dingding/application/wechat/view/menu/index.html

{extend name="admin@main"}

{block name='content'}
<div id="MenuEditor" class="layui-hide think-box-shadow" style="width:910px">
    <div class='mobile-preview inline-block'>
        <div class='mobile-header'>公众号</div>
        <div class='mobile-body'></div>
        <ul class='mobile-footer notselect'>
            <li class="parent-menu" style="{{getItemStyle(list)}}" ng-repeat="one in list">
                <a ng-click="setActiveItem(one)" ng-class="{true:'active'}[one.active]">
                    <i class="icon-sub" ng-if="one.sub_button.length>0"></i> <span ng-bind="one.name"></span>
                </a>
                <i class="close layui-bg-gray layui-icon" ng-click="delItem(one)">&#x1006;</i>
                <div class="sub-menu text-center" ng-if="one.active||one.show">
                    <ul>
                        <li ng-repeat="two in one.sub_button">
                            <a class="bottom-border" ng-click="setActiveItem(one,two)" ng-class="{true:'active'}[two.active]"><span ng-bind="two.name"></span></a>
                            <i class="close layui-bg-gray layui-icon" ng-click="delItem(one,two)">&#x1006;</i>
                        </li>
                        <li class="menu-add" ng-if="one.sub_button.length<5"><a ng-click="addItem(one.sub_button)"><i class="icon-add"></i></a></li>
                    </ul>
                    <i class="arrow arrow_out"></i>
                    <i class="arrow arrow_in"></i>
                </div>
            </li>
            <li class="parent-menu menu-add" style="{{getItemStyle(list)}}" ng-if="list.length<3">
                <a ng-click="addItem(list)"><i class="icon-add"></i></a>
            </li>
        </ul>
    </div>

    <div class="absolute inline-block layui-card margin-left-10" style="border:1px solid #ccc;height:578px;width:570px">
        <div class="layui-card-header layui-bg-gray text-center">菜单编辑</div>
        <div class="layui-card-body" ng-if="list.length<1">
            <blockquote class="layui-elem-quote border-0 text-center">请在左侧创建菜单...</blockquote>
        </div>
        <div class="layui-card-body" ng-if="list.length>0">
            <form class="layui-form menu-form" autocomplete="off" style="padding-right:80px;">
                <div class="layui-form-item margin-top-20">
                    <label class="layui-form-label">菜单名称</label>
                    <div class="layui-input-block">
                        <input required name="menu-name" ng-model="item.name" class="layui-input" placeholder="请输入菜单名称">
                        <span class="help-block">字数不超过13个汉字或40个字母</span>
                    </div>
                </div>
                <div class="layui-form-item margin-top-20" ng-if="!item.sub_button||item.sub_button.length<1">
                    <label class="layui-form-label label-required">菜单类型</label>
                    <div class="layui-input-block">
                        {foreach $menuTypes as $key => $type}
                        <label class="think-radio layui-elip"><input lay-ignore type="radio" ng-model="item.type" name="menu-type" value="{$key}"> {$type}</label>
                        {/foreach}
                    </div>
                </div>
                <div class="layui-form-item margin-top-20" ng-if="item.type==='customservice'">
                    <label class="layui-form-label">提示文字</label>
                    <div class="layui-input-block">
                        <textarea required class="layui-textarea" ng-model="item.content"></textarea>
                    </div>
                </div>
                <div class="layui-form-item margin-top-20" ng-if="(!item.sub_button||item.sub_button.length<1)&&item.type==='click'">
                    <label class="layui-form-label">匹配规则</label>
                    <div class="layui-input-block">
                        <select required class="layui-select" lay-filter="key" lay-search>
                            <option value="{{x.keys}}" ng-selected="x.keys===item.key" ng-repeat="x in keys" ng-bind="x.keys"></option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item margin-top-20" ng-if="item.type==='view'">
                    <label class="layui-form-label">跳转链接</label>
                    <div class="layui-input-block">
                        <textarea required class="layui-textarea" ng-model="item.url" placeholder="请输入跳转链接"></textarea>
                    </div>
                </div>
                <div ng-if="item.type==='miniprogram'">
                    <div class="layui-form-item margin-top-20">
                        <label class="layui-form-label">小程序链接</label>
                        <div class="layui-input-block">
                            <input type="text" required class="layui-input" ng-model="item.url" placeholder="请输入小程序链接">
                        </div>
                    </div>
                    <div class="layui-form-item margin-top-20">
                        <label class="layui-form-label">小程序APPID</label>
                        <div class="layui-input-block">
                            <input type="text" required class="layui-input" ng-model="item.appid" placeholder="请输入小程序APPID">
                        </div>
                    </div>
                    <div class="layui-form-item margin-top-20">
                        <label class="layui-form-label">小程序页面</label>
                        <div class="layui-input-block">
                            <input type="text" required class="layui-input" ng-model="item.pagepath" placeholder="请输入小程序页面">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="text-center margin-top-20">
        {if auth("edit")}
        <button class="layui-btn menu-submit" ng-click="submit()">保存发布</button>
        {/if}
        {if auth("cancel")}
        <button data-load='{:url("cancel")}' class="layui-btn layui-btn-danger">取消发布</button>
        {/if}
    </div>

</div>

<script>
    require(['angular'], function () {

        var $form = $('.menu-form').vali();
        var $vali = $form.vali().data('validate');
        $('#MenuEditor.layui-hide').removeClass('layui-hide');

        var app = angular.module("MenuEditor", []).run(callback);
        angular.bootstrap(document.getElementById(app.name), [app.name]);

        function callback($rootScope) {
            $rootScope.item = {};
            $rootScope.list = [];
            $rootScope.keys = [];
            $.form.load('{:url("index")}', {output: 'json'}, 'get', function (ret) {
                return $rootScope.$apply(function () {
                    $rootScope.keys = ret.data.keysdata || [];
                    $rootScope.list = ret.data.menudata || [];
                    if ($rootScope.list.length < 1) $rootScope.list = [{name: '请输入名称', type: 'click', sub_button: []}];
                    for (var i in $rootScope.list) $rootScope.list[i].sub_button = $rootScope.list[i].sub_button || [];
                    $rootScope.list[0].show = true;
                    $rootScope.list[0].active = true;
                    $rootScope.item = $rootScope.list[0];
                }), false;
            });

            // 动态计算宽度
            $rootScope.getItemStyle = function (list) {
                return 'width:' + (100 / (list.length >= 3 ? 3 : (list.length + 1))) + '%';
            };

            // 增加菜单选项
            $rootScope.addItem = function (list) {
                $vali.checkAllInput();
                if ($form.find('.validate-error').size() > 0) {
                    return $.msg.tips('表单验证不成功，请输入需要的内容！');
                }
                list.push({name: '请输入名称', type: 'click', sub_button: []});
            };

            // 移除菜单
            $rootScope.delItem = function (one, two) {
                var tmp = [], _two = null;
                if (two) {
                    for (var i in one.sub_button) if (one.sub_button[i] !== two) {
                        tmp.push(one.sub_button[i]);
                        if (one.sub_button[i].active) _two = one.sub_button[i];
                    }
                    one.sub_button = tmp;
                    return $rootScope.setActiveItem(one, _two);
                }
                for (var i in $rootScope.list) if (one !== $rootScope.list[i]) tmp.push($rootScope.list[i]);
                $rootScope.list = tmp;
                if ($rootScope.list.length > 1) $rootScope.setActiveItem($rootScope.list[0])
            };

            // 切换选择菜单
            $rootScope.setActiveItem = function (one, two) {
                for (var i in $rootScope.list) {
                    $rootScope.list[i].show = ($rootScope.list[i] === one);
                    $rootScope.list[i].active = two ? false : ($rootScope.list[i] === one);
                }
                for (var i in $rootScope.list) for (var j in $rootScope.list[i].sub_button) {
                    $rootScope.list[i].sub_button[j].active = ($rootScope.list[i].sub_button[j] === two)
                }
                $rootScope.item = two || one || {};
                $rootScope.item.type = $rootScope.item.type || 'click';
                if ($rootScope.item.type === 'click') setTimeout(function () {
                    form.render('select');
                    $rootScope.item.key = $('[lay-filter="key"]').val();
                }, 50);
            };

            // 下拉列表处理
            $rootScope.$watch('item', function () {
                if ($rootScope.item.type === 'click') setTimeout(function () {
                    form.render('select');
                }, 50)
            }, true);

            form.on('select(key)', function (data) {
                $rootScope.item.key = data.value;
            });

            // 提交数据
            $rootScope.submit = function () {
                $vali.checkAllInput();
                if ($form.find('.validate-error').size() > 0) return false;
                $.form.load('{:url("edit")}', {data: angular.toJson($rootScope.list)}, 'post');
            }
        }
    })
</script>

{/block}