ThinkAdmin/app/wechat/view/menu/index.html

{extend name="main"}

{block name='content'}
<div id="MenuEditor" class="layui-hide think-box-shadow" style="width:900px">
    <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="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">
            <form class="layui-form padding-right-40" name="menu" role="form" onsubmit="return false">
                <div ng-if="list.length>0">
                    <div class="layui-form-item margin-top-20">
                        <label class="layui-form-label">菜单名称</label>
                        <div class="layui-input-block">
                            <input required vali-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 vali-name="提示文字" 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 pattern="url" class="layui-textarea" vali-name="跳转链接" 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 vali-name="小程序链接" 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 vali-name="小程序APPID" 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 vali-name="小程序页面" class="layui-input" ng-model="item.pagepath" placeholder="请输入小程序页面">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="text-center margin-top-20">
        <div class="hr-line-dashed margin-top-15 margin-bottom-15"></div>
        <!--{if auth("push")}-->
        <button ng-click="submit()" class="layui-btn menu-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 () {

        $('#MenuEditor').removeClass('layui-hide');
        $('form[name=menu]').vali(null, function () {

            var vali = this, 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('{:request()->url()}', {output: 'json'}, 'get', function (ret) {
                    $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];
                    });
                    return false;
                });

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

                // 增加菜单选项
                $rootScope.addItem = function (list) {
                    if (!vali.checkAllInput()) return;
                    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) {
                    if (!vali.checkAllInput()) return;
                    $rootScope.list.forEach(function (item) {
                        item.show = item === one;
                        item.active = two ? false : (item === one)
                        item.sub_button.forEach(function (subitem) {
                            subitem.active = subitem === two;
                        });
                    });
                    $rootScope.item = two || one || {};
                    $rootScope.item.type = $rootScope.item.type || 'click';
                    if ($rootScope.item.type === 'click') setTimeout(function () {
                        layui.form.render('select'), ($rootScope.item.key = $('[lay-filter="key"]').val());
                    }, 50);
                };

                // 下拉列表处理
                $rootScope.$watch('item', function () {
                    if ($rootScope.item.type === 'click') setTimeout(function () {
                        layui.form.render('select'), ($rootScope.item.key = $('[lay-filter="key"]').val());
                    }, 50)
                }, true);

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

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

{/block}