book_admin/public/assets/js/backend/wechat/vipmenu.js

define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'sortable', 'clipboard'], function ($, undefined, Backend, Table, Form, Sortable, Clipboard) {
    var Controller = {
        index: function () {
            if (Config.group_ids_js){
                gzhIdArr = Config.group_ids_js
                gzhHtmlArr = Config.gzhHtmlArr
            }else{
                gzhIdArr = [];
                gzhHtmlArr = [];
            }
            //复制文本
            var clipboard = new Clipboard('.fa-file', {
                target: function(trigger) {
                    trigger = $(trigger).prev()[0];
                    Toastr.success('复制成功');
                    return trigger;
                }
            });
            clipboard.on('error',function (data) {
                Toastr.error('复制失败');
            });
            String.prototype.subByte = function (start, bytes) {
                for (var i = start; bytes > 0; i++) {
                    var code = this.charCodeAt(i);
                    bytes -= code < 256 ? 1 : 2;
                }
                return this.slice(start, i + bytes)
            };
            /**
             * 初始化菜单
             * @param menu 菜单json数据
             */
            var init_menu = function (menu) {
                var str = "";
                var items = menu;
                var type = action = "";
                for (i in items) {
                    if (items[i]['sub_button'] != undefined) {
                        type = action = "";
                    } else {
                        type = items[i]['type'];
                        if (items[i]['url'] != undefined)
                            action = "url|" + items[i]['url'];
                        if (items[i]['key'] != undefined)
                            action = "key|" + items[i]['key'];
                    }
                    str += '<li id="menu-' + i + '" class="menu-item" data-type="' + type + '" data-action="' + action + '" data-name="' + items[i]['name'] + '"> <a href="javascript:;" class="menu-link"> <i class="icon-menu-dot"></i> <i class="weixin-icon sort-gray"></i> <span class="title">' + items[i]['name'] + '</span> </a>';
                    var tem = '';
                    if (items[i]['sub_button'] != undefined) {
                        var sub_menu = items[i]['sub_button'];
                        for (j in sub_menu) {
                            type = sub_menu[j]['type'];
                            if (sub_menu[j]['url'] != undefined)
                                action = "url|" + sub_menu[j]['url'];
                            if (sub_menu[j]['key'] != undefined)
                                action = "key|" + sub_menu[j]['key'];
                            tem += '<li id="sub-menu-' + j + '" class="sub-menu-item" data-type="' + type + '" data-action="' + action + '" data-name="' + sub_menu[j]['name'] + '"> <a href="javascript:;"> <i class="weixin-icon sort-gray"></i><span class="sub-title">' + sub_menu[j]['name'] + '</span></a> </li>';
                        }
                    }
                    str += '<div class="sub-menu-box" style="' + (i != 0 ? 'display:none;' : '') + '"> <ul class="sub-menu-list">' + tem + '<li class=" add-sub-item"><a href="javascript:;" title="添加子菜单"><span class=" "><i class="weixin-icon add-gray"></i></span></a></li> </ul> <i class="arrow arrow-out"></i> <i class="arrow arrow-in"></i></div>';
                    str += '</li>';
                }
                $("#add-item").before(str);
            };
            /**
             * 切换资源选择类型
             */
            var refresh_type = function () {
                var key = $('input[name=type]:checked').attr('id');
                $('#menu-content > div').hide();
                switch(key){
                    case 'type2':
                        $(".is-view").show();
                        break;
                    case 'type3':
                        $(".is-sign").show();
                        break;
                    case 'type4':
                        $(".is-manager_contact").show();
                        break;
                    default:
                        // $(".is-click").show();
                        break;
                }
            };
            //初始化菜单
            init_menu(menu);
            //拖动排序
            new Sortable($("#menu-list")[0], {draggable: 'li.menu-item'});
            $(".sub-menu-list").each(function () {
                new Sortable(this, {draggable: 'li.sub-menu-item'});
            });
            $(".sub-menu-item a").height($(".add-sub-item").eq(0).height());
            //添加主菜单
            $(document).on('click', '#add-item', function () {
                var menu_item_total = $(".menu-item").size();
                if (menu_item_total < 3) {
                    var item = '<li class="menu-item" data-type="click" data-action="key|" data-name="添加菜单" > <a href="javascript:;" class="menu-link"> <i class="icon-menu-dot"></i> <i class="weixin-icon sort-gray"></i> <span class="title">添加菜单</span> </a> <div class="sub-menu-box" style=""> <ul class="sub-menu-list"><li class=" add-sub-item"><a href="javascript:;" title="添加子菜单"><span class=" "><i class="weixin-icon add-gray"></i></span></a></li> </ul> <i class="arrow arrow-out"></i> <i class="arrow arrow-in"></i> </div></li>';
                    var itemDom = $(item);
                    itemDom.insertBefore(this);
                    itemDom.trigger("click");
                    $(".sub-menu-box", itemDom).show();
                    new Sortable($(".sub-menu-list", itemDom)[0], {draggable: 'li.sub-menu-item'});
                }
            });
            /**
             * 切换子菜单类型
             *
             */
            $(document).on('change', 'input[name=type]', function () {
                refresh_type();
            });
            /**
             * 删除菜单
             */
            $(document).on('click', '#item_delete', function () {
                var current = $("#menu-list li.current");
                var prev = current.prev("li[data-type]");
                var next = current.next("li[data-type]");

                if (prev.size() == 0 && next.size() == 0 && $(".sub-menu-box", current).size() == 0) {
                    last = current.closest(".menu-item");
                } else if (prev.size() > 0 || next.size() > 0) {
                    last = prev.size() > 0 ? prev : next;
                } else {
                    last = null;
                    $(".weixin-content").hide();
                    $(".no-weixin-content").show();
                }
                $("#menu-list li.current").remove();
                if (last) {
                    last.trigger('click');
                } else {
                    $("input[name='item-title']").val('');
                }
                updateChangeMenu();
            });

            //更新修改与变动 //本地修改
            var updateChangeMenu = function () {
                var title = $("input[name='item-title']").val();
                var type = $("input[name='type']:checked").val();
                var typeid = $("input[name='type']:checked").attr('id');
                var key = value = '';
                if(typeid == 'type3'){
                    key = 'sign';
                }else if(typeid == 'type4'){
                    key = 'manager_contact';
                }else if (type == 'view') {
                    key = 'url';
                } else {
                    key = 'key';
                }
                value = $("input[name='" + key + "']").val();

                if (key == 'key') {
                    var keytitle = typeof responselist[value] != 'undefined' ? responselist[value] : '';
                    var cont = $(".is-click .create-click:first");
                    $(".keytitle", cont).remove();
                    cont.append('<div class="keytitle">资源名:' + keytitle + '</div>');
                }
                var currentItem = $("#menu-list li.current");
                if (currentItem.size() > 0) {
                    currentItem.attr('data-type', type);
                    if(key == 'url'){
                        currentItem.attr('data-action', key + "|" + value);
                    }else{
                        currentItem.attr('data-action', "key|" + value);
                    }
                    if (currentItem.siblings().size() == 4) {
                        $(".add-sub-item").show();
                    } else if (false) {

                    }
                    currentItem.children("a").find("span").text(title.subByte(0, 16));
                    $("input[name='item-title']").val(title);
                    currentItem.attr('data-name', title);
                    $('#current-item-name').text(title);
                }
                // menuUpdate();
            };
            //更新菜单数据 //保存到平台服务器
            var menuUpdate = function () {
                if($('.sync_to_all').is(':checked')){
                    datas = {
                        menu: JSON.stringify(getMenuList()),
                        group_type:1,
                        group_ids: ''
                    }
                }else{
                    datas = {
                        menu: JSON.stringify(getMenuList()),
                        group_type: 2,
                        group_ids: gzhIdArr.join(',')
                    }
                }
                $.post("wechat/vipmenu/edit", datas, function (data) {
                    if (data['code'] == 1) {
                        Backend.api.toastr.success('操作成功！');
                    } else {
                        Toastr.error(data['msg']);
                        return false;
                    }
                }, 'json');
            };
            //获取菜单数据 //从菜单li列表获取menu json
            var getMenuList = function () {
                var menus = new Array();
                var sub_button = new Array();
                var menu_i = 0;
                var sub_menu_i = 0;
                var item;
                $("#menu-list li").each(function (i) {
                    item = $(this);
                    var name = item.attr('data-name');
                    var type = item.attr('data-type');
                    var action = item.attr('data-action');
                    if (name != null) {
                        actions = action.split('|');
                        if (item.hasClass('menu-item')) {
                            sub_menu_i = 0;
                            if (item.find('.sub-menu-item').size() > 0) {
                                menus[menu_i] = {"name": name, "sub_button": "sub_button"}
                            } else {
                                if (actions[0] == 'url')
                                    menus[menu_i] = {"name": name, "type": type, "url": actions[1]};
                                else
                                    menus[menu_i] = {"name": name, "type": type, "key": actions[1]};
                            }
                            if (menu_i > 0) {
                                if (menus[menu_i - 1]['sub_button'] == "sub_button")
                                    menus[menu_i - 1]['sub_button'] = sub_button;
                                else
                                    menus[menu_i - 1]['sub_button'];
                            }
                            sub_button = new Array();
                            menu_i++;
                        } else {
                            if (actions[0] == 'url')
                                sub_button[sub_menu_i++] = {"name": name, "type": type, "url": actions[1]};
                            else
                                sub_button[sub_menu_i++] = {"name": name, "type": type, "key": actions[1]};
                        }
                    }
                });
                if (sub_button.length > 0) {
                    var len = menus.length;
                    menus[len - 1]['sub_button'] = sub_button;
                }
                return menus;
            };
            //添加子菜单
            $(document).on('click', ".add-sub-item", function () {
                var sub_menu_item_total = $(this).parent().find(".sub-menu-item").size();
                var height = $(this).height();
                if (sub_menu_item_total < 5) {
                    var item = '<li class="sub-menu-item" data-type="click" data-action="key|" data-name="添加子菜单"><a href="javascript:;"><span class=" "><i class="weixin-icon sort-gray"></i><span class="sub-title">添加子菜单</span></span></a></li>';
                    var itemDom = $(item);
                    itemDom.children("a").height(height);
                    itemDom.insertBefore(this);
                    itemDom.trigger("click");
                    if (sub_menu_item_total == 4) {
                        $(this).hide();
                    }
                }
                return false;
            });
            //主菜单子菜单点击事件
            $(document).on('click', ".menu-item, .sub-menu-item", function () {
                if ($(this).hasClass("sub-menu-item")) {
                    $("#menu-list li").removeClass('current');
                    $(".is-item").show();
                    $(".is-sub-item").show();
                } else {
                    $("#menu-list li").removeClass('current');
                    $("#menu-list > li").not(this).find(".sub-menu-box").hide();
                    $(".sub-menu-box", this).toggle();
                    //如果当前还没有子菜单
                    if ($(".sub-menu-item", this).size() == 0) {
                        $(".is-item").show();
                        $(".is-sub-item").show();
                    } else {
                        $(".is-item").hide();
                        $(".is-sub-item").hide();
                    }
                }
                $(this).addClass('current');
                var type = $(this).attr('data-type');
                var action = $(this).attr('data-action');
                var title = $(this).attr('data-name');

                actions = action.split('|');
                if(actions[1] == '签到'){
                    $("#type3").prop("checked", true);
                }else if(actions[1] == 'manager_contact'){
                    $("#type4").prop("checked", true);
                }else if(actions[0] == 'url'){
                    $("#type2").prop("checked", true);
                }else{
                    $("#type1").prop("checked", true);
                }
                $("input[name='item-title']").val(title);
                $('#current-item-name').text(title);
                if (actions[0] == 'url') {
                    $('input[name=key]').val('');
                } else {
                    $('input[name=url]').val('');
                }
                $("input[name='" + actions[0] + "']").val(actions[1]);
                if (actions[0] == 'key') {
                    var cont = $(".is-click .create-click:first");
                    if(actions[1] == 'manager_contact'){
                        cont.append('<div class="keytitle">资源名:自动读取客服内容</div>');
                    }else {
                        var keytitle = typeof responselist[actions[1]] != 'undefined' ? responselist[actions[1]] : '';
                        $(".keytitle", cont).remove();
                        if (keytitle) {
                            cont.append('<div class="keytitle">资源名:' + keytitle + '</div>');
                        }
                    }
                } else {

                }

                $(".weixin-content").show();
                $(".no-weixin-content").hide();

                refresh_type();

                return false;
            });

            /**
             * 菜单设置为回复二维码形式并发布
             */
            $(document).on('click', "#menuQrcode", function () {
                var qrcode_menu_value = $(this).data('qrcode_menu');
                var alert_txt = '确认设置成二维码形式并发布吗';

                if(qrcode_menu_value){
                    var alert_txt = '确认恢复菜单为链接形式吗';
                }

                Layer.confirm(
                    alert_txt,
                    {btn: ['确定', '取消']},
                    function () {
                        $.post(
                            'wechat/vipmenu/ajaxmofiywxmenu',
                            {qrcode_menu_value: qrcode_menu_value},
                            function (ret) {
                                if(ret.code == 1) {
                                    Backend.api.toastr.success('菜单已修改，生效时间看微信官网说明，或者你重新关注微信号！');
                                    setTimeout(function () {
                                        window.location.reload();
                                    }, 600);
                                }else{
                                    Backend.api.toastr.error(msg ? msg : __('Operation failed'));
                                }
                            });
                    }
                );
            });

            /**
             * 本地保存
             */
            $("form").on('change', "input,textarea", function () {
                updateChangeMenu();
            });
            /**
             * 保存按钮
             */
            $(document).on('click', "#menuSave", function () {
                if($('.sync_to_some').is(':checked') && gzhIdArr.length==0) {
                    Backend.api.toastr.error('请指定分组');
                    return false;
                }
                updateChangeMenu();
                menuUpdate();
            });

            /**
             * 发布按钮
             */
            $(document).on('click', "#menuSyn", function () {
                if($('.sync_to_some').is(':checked') && gzhIdArr.length==0) {
                    Backend.api.toastr.error('请指定分组');
                    return false;
                }
                updateChangeMenu();
                if($('.sync_to_all').is(':checked')){
                    datass = {
                        menu: JSON.stringify(getMenuList()),
                        group_type:1,
                        group_ids: ''
                    }
                }else{
                    datass = {
                        menu: JSON.stringify(getMenuList()),
                        group_type: 2,
                        group_ids: gzhIdArr.join(',')
                    }
                }
                $.post("wechat/vipmenu/edit",datass, function (data) {
                    if (data['code'] == 1) {
                        $.post("wechat/vipmenu/saveto", datass, function (ret) {
                            var msg = ret.hasOwnProperty("msg") && ret.msg != "" ? ret.msg : "";
                            if (ret.code == 1) {
                                Backend.api.toastr.success('菜单同步更新成功，生效时间看微信官网说明，或者你重新关注微信号！');
                            } else {
                                Backend.api.toastr.error(ret.msg);
                                return false;
                            }
                        }, 'json');
                    } else {
                        Toastr.error(data.msg);
                        return false;
                    }
                }, 'json');
            });

            /**
             * 重置按钮
             */
            $(document).on('click','#menuReset',function(){
                Layer.confirm(
                    "请确认是否恢复为系统默认的菜单",
                    {icon: 3, title: "操作确认", shadeClose: true},
                    function (index) {
                        Layer.close(index);
                        if($('.sync_to_all').is(':checked')){
                            datas = {
                                group_type:1,
                                group_ids: ''
                            }
                        }else{
                            datas = {
                                group_type: 2,
                                group_ids: gzhIdArr.join(',')
                            }
                        }
                        $.post('wechat/vipmenu/reset',datas,function(ret){
                            var msg = ret.hasOwnProperty("msg") && ret.msg != "" ? ret.msg : "";
                            if (ret.code == 1) {
                                Backend.api.toastr.success('菜单恢复成功，生效时间看微信官网说明，或者你重新关注微信号！');
                                setTimeout(function(){
                                    window.location.reload();
                                },1200);
                            } else {
                                Backend.api.toastr.error(msg ? msg : __('Operation failed'));
                            }
                        });
                    }
                );
            });

            /**
             * 刷新资源标题
             * @param data
             */
            var refreshkey = function (data) {
                responselist[data.eventkey] = data.title;
                $("input[name=key]").val(data.eventkey).trigger("change");
                Layer.closeAll();
            };
            /**
             * 选择现有资源
             */
            $(document).on('click', "#select-resources", function () {
                var key = $("#key").val();
                Backend.api.open($(this).attr("href") + "?key=" + key, __('Select'), {
                    callback: refreshkey
                });
                return false;
            });
            /**
             * 添加新资源
             */
            $(document).on('click', "#add-resources", function () {
                Backend.api.open($(this).attr("href") + "?key=" + key, __('Add'), {
                    callback: refreshkey
                });
                return false;
            });

            /**
             * 切换渠道类型
             */
            $(".sync_to_all").on('click', function () {
                $('.pick_group').addClass('hidden');
                $('#gzh_table').find('tbody').empty();
                gzhIdArr = []
                gzhHtmlArr = []
            });

            $(".sync_to_some").on('click', function () {
                $('.pick_group').removeClass('hidden');
            });

            $('.btn-add-group-list').on('click',function () {
                if(gzhIdArr.length >= 10){
                    Layer.msg('最多选择10个分组');
                    return false;
                };
                Fast.api.open(
                    '/admin/wechat/vipmenu/usergroup?in_ids='+gzhIdArr.join(','),
                    '添加公众号',
                    {
                        callback: function(rows){
                            $.each(rows, function(index, row){
                                gzhIdArr.push(row.id)
                                gzhHtmlArr.push(row)
                                Controller.api.resetGroupList(gzhHtmlArr)
                            })
                        }
                    }
                );
            });

            // 公众号删除
            $('#gzh_table').on('click' , '.gzh_del_btn' , function(e){
                var tmpId = $(e.target).data('id');
                $(window.gzhHtmlArr).each(function(index, item){
                    if(item.id == tmpId){
                        // 修改val
                        window.gzhIdArr.splice(index , 1);
                        // 修改html
                        window.gzhHtmlArr.splice(index , 1);
                        $(e.target).parent().parent().remove();
                        Controller.api.resetGroupList(window.gzhHtmlArr)
                    }
                });
            });
        },
        add: function () {
            Form.api.bindevent($("form[role=form]"));
        },
        edit: function () {
            Form.api.bindevent($("form[role=form]"));
        },
        usergroup: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    usergroup_url: 'wechat/vipmenu/usergroup?in_ids='+Config.in_ids,
                }
            });
            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.usergroup_url,
                pk: 'id',
                sortName: 'vip_group.id',
                columns: [
                    [
                        {
                            checkbox: true
                        },
                        {field: 'id', title: __('分组ID'),operate:false},
                        {field: 'name', title: __('公众号名称'),operate:'LIKE'},
                        {field: 'createtime', title: __('创建时间'),operate:false},
                        {field: 'updatetime', title: __('修改时间'),operate:false},
                    ]
                ],
            });

            // 添加时将数组转字符串, 设置给hidden input的value
            $('.btn-add-subscription-list').click(function(){

                var data = table.bootstrapTable('getSelections');

                if (data.length < 1) {
                    Toastr.error('请选择公众号');
                } else {
                    if (data.length + window.parent.gzhIdArr.length > 10) {
                        Layer.msg('最多选择10个分组');
                        return false;
                    }
                    Fast.api.close(data);
                }
                //
                //
                // //id整理
                // if(PIdArr.length > 0 ){
                //     $(window.gzhArr).each(function(index, item){
                //         if(PIdArr.indexOf(item) == -1){
                //             PIdArr.push(item);
                //         };
                //     });
                // }else{
                //     PIdArr = window.gzhArr;
                // };
                // //$(window.parent.document).find('#user_group_ids').val(PIdArr.join(','));
                // window.parent.gzhIdArr = PIdArr;
                //
                // // 所有数据整理
                //
                // if (window.htmlArr.length + window.parent.gzhHtmlArr.length > 10) {
                //     Layer.msg('最多选择10个分组');
                //     return false;
                // }
                // if(PhtmlArr.length == 0){
                //     PhtmlArr = window.htmlArr;
                // }else{
                //     $(window.htmlArr).each(function (index , item) {
                //         var flag = true;
                //         $(PhtmlArr).each(function (idx , itemInner) {
                //             if(itemInner.id == item.id){
                //                 flag = false;
                //             }
                //         });
                //         if(flag){
                //             PhtmlArr.push(item);
                //         }
                //     });
                // };
                //
                // window.parent.gzhHtmlArr = PhtmlArr;
                // var gzhParentHtml = "";
                // $(window.parent.gzhHtmlArr).each(function (index, item) {
                //     var tempHtml = '' +
                //         '<tr data-index="0"> ' +
                //         '<td style="text-align: center; vertical-align: middle; ">' +
                //         (index+1)+
                //         '</td> ' +
                //         '<td style="text-align: center; vertical-align: middle; ">' +
                //         item.id +
                //         '</td> ' +
                //         '<td style="text-align: center; vertical-align: middle; ">' +
                //         item.name +
                //         '</td> ' +
                //         '<td style="text-align: center; vertical-align: middle; ">' +
                //         item.createtime +
                //         '</td> ' +
                //         '<td style="text-align: center; vertical-align: middle; ">' +
                //         item.updatetime +
                //         '</td> ' +
                //         '<td style="text-align: center; vertical-align: middle; ">' +
                //         '<a class="gzh_del_btn" href="javascript:;" data-index='+index+' data-id='+item.id+'>删除</a>' +
                //         '</td> ' +
                //         '</tr>';
                //     gzhParentHtml += tempHtml;
                // });
                // $(window.parent.document).find('#gzh_table tbody').html(gzhParentHtml);
                //
                // Fast.api.close('');
            });
            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        api: {
            resetGroupList: function(gzhHtmlArr){
                var tempHtml = ''
                for (index in gzhHtmlArr){
                    var item = gzhHtmlArr[index]
                    tempHtml += '<tr data-index="'+index+'"> ' +
                        '<td style="text-align: center; vertical-align: middle; ">' +
                        // item.id +
                        (parseInt(index)+1)+
                        '</td> ' +
                        '<td style="text-align: center; vertical-align: middle; ">' +
                        item.name +
                        '</td> ' +
                        '<td style="text-align: center; vertical-align: middle; ">' +
                        item.createtime +
                        '</td> ' +
                        '<td style="text-align: center; vertical-align: middle; ">' +
                        item.updatetime +
                        '</td> ' +
                        '<td style="text-align: center; vertical-align: middle; ">' +
                        '<a class="gzh_del_btn" href="javascript:;" data-index='+index+' data-id='+item.id+'>删除</a>' +
                        '</td> ' +
                        '</tr>';
                }
                $('#gzh_table tbody').html(tempHtml);
            }
        }
    };
    return Controller;
});