自定义菜单：页面逻辑，接口

config/index.js

@@ -17,9 +17,7 @@ module.exports = {
     // can be overwritten by process.env.HOST
     // if you want dev by ip, please set host: '0.0.0.0'
 
-    // host: 'jk.kuyicloud.com',
-
-
+    host: 'test1.sgjyun.com',
     port: 8090, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,

src/api/mpwechat/mpwechat.js

@@ -20,4 +20,11 @@ export function GetMenus() {
     method: 'get',
   })
 }
-  
+
+export function SaveMenus(data) {
+  return request({
+    url: '/api/mpwechat/savemenus',
+    method: 'put',
+    data:data,
+  })
+}

src/scrm_pages/weixinmp/authorization.vue

@@ -110,7 +110,7 @@ export default {
         authorizer_qrcode_url: "",
         created_time: "",
         updated_time: "",
-        authorizer_status: 1
+        authorizer_status: 0
       }
     };
   },

src/scrm_pages/weixinmp/menus.vue

@@ -2,20 +2,23 @@
   <div class="main-contain">
     <div class="position">
       <bread-crumb :crumbs="crumbs"></bread-crumb>
-      <el-col :span="5" style="text-align: right;">
-        <el-button type="primary" size="small" icon="el-icon-upload">保存并发布</el-button>
-        <el-button  type="danger" size="small" icon="el-icon-delete" >停用菜单</el-button>
+      <el-col :span="5" style="text-align: right;" v-show="initButtons">
+        <el-button type="primary" size="small" :disabled="subload" icon="el-icon-upload" @click="submitSave">保存并发布</el-button>
+        <el-button  type="danger" size="small" :disabled="subload" icon="el-icon-delete" >停用菜单</el-button>
       </el-col>
     </div>
     <div class="app-container" id="winxin-menus-box">
       <div class="menu_tips clearfix">
           <span class="ico_menu_tips fl"></span>  
-          <div class="menu_tips_txt fl">
+          <div class="menu_tips_txt fl" v-show="initButtons">
               <p>菜单编辑中</p>
               <p>菜单不会即时发布，请确定菜单编辑完成后点击“保存并发布”同步到手机，若停用菜单，点击“停用菜单”</p>
           </div>
+          <div class="menu_tips_txt fl" v-show="!initButtons">
+              <p>未认证的订阅号没有自定义菜单接口权限，无法编辑菜单。</p>
+          </div>
       </div>
-      <div class="menu_setting_area clearfix">
+      <div class="menu_setting_area clearfix" v-loading='subload' element-loading-text="正在保存..." v-show="initButtons">
           <div class="menu_preview_area fl">
               <div class="mobile_menu_preview">
                   <div class="mobile_hd">{{authData.authorizer_nick_name}}</div>
@@ -30,7 +33,7 @@
                                 </li> 
 
                                 <li class="jslevel2 jsAddSubMenu" v-show="childrenNode(menu.sub_button).length<5"> 
-                                  <a href="javascript:void(0);" class="jsSubView"> <span class="sub_pre_menu_inner "> <i class="icon14_menu_add">+</i> </span> </a> 
+                                  <a href="javascript:void(0);" class="jsSubView" @click="addItem(mi)"> <span class="sub_pre_menu_inner "> <i class="icon14_menu_add">+</i> </span> </a> 
                                 </li>
                               </ul>
                                 <i class="arrow arrow_out"></i> 
@@ -39,13 +42,13 @@
                         </li>
 
                           <li class="jsAddMenu pre_menu_li" v-show="menus.button.length<3">
-                              <a href="javascript:void(0);" class="pre_menu_link">
+                              <a href="javascript:void(0);" class="pre_menu_link" @click="addItem(-1)">
                                   <i class="icon_menu_dot "></i>
                                   <span class="js_l1Title_">
                                       <i class="icon14_menu_add">+</i>
                                   </span>
                               </a>
-                              <div class="sub_pre_menu_box">
+                              <!-- <div class="sub_pre_menu_box">
                                   <ul class="sub_pre_menu_list">
                                       <li class="jslevel2 jsAddSubMenu">
                                           <a href="javascript:void(0);" class="jsSubView">
@@ -57,7 +60,7 @@
                                   </ul>
                                   <i class="arrow arrow_out"></i>
                                   <i class="arrow arrow_in"></i>
-                              </div>
+                              </div> -->
                           </li>
 
                       </ul>
@@ -69,7 +72,7 @@
           <div class="menu_form_area fl" v-show="currentPatient>=0&&currentMenu">
               <div class="menu_form_inner">
                   <h2 class="menu_form_tit clearfix">
-                      <span class="delate fr delete_menu">{{deleteButtonName()}}</span>
+                      <span class="delate fr delete_menu" @click="deleteButtonItem">{{deleteButtonName()}}</span>
                       <span class="global_info">{{showMenuName()}}</span>
                   </h2>
                   <div class="menu_form_item">
@@ -78,10 +81,10 @@
                       <span class="tips" id="tips" v-show="!menuNameError">{{menuNameTip()}}</span>
                       <span class="tips" id="errinfo" v-show="menuNameError" style="color: #f00;">{{menuNameTip()}}</span>
                   </div>
-                  <div class="menu_form_item menu_more_info" v-show="currentMenu&&!currentMenu.sub_button">
+                  <div class="menu_form_item menu_more_info" v-show="typeof(currentMenu.sub_button) == 'undefined' || !currentMenu.sub_button || currentMenu.sub_button.length==0">
                       <div class="menu_form__nav clearfix">
                           <label for="" class="tit">菜单内容</label>
-                          <el-radio-group v-model="menuType" class="radio_item">
+                          <el-radio-group v-model="menuType" class="radio_item" @change="changeMenuType">
                             <el-radio v-for="(menu, index) in menuTypeOptions" :key="index" :label="menu.id" :value="menu.id">{{menu.name}}</el-radio>
                           </el-radio-group>
                       </div>
@@ -97,12 +100,13 @@
                             <span class="tips" id="acterrinfo" v-if="!messageError" >&nbsp;&nbsp;{{menuMessageTip}}</span>
                             <span class="tips" id="acterrinfo" v-if="messageError"  style="color: #f00;">&nbsp;&nbsp;{{menuMessageTip}}</span>
                         </div>
-                        <div class="inner jump_page " v-show="menuType==2">
+                        <div class="inner  jump_page" v-show="menuType==2">
                             <span class="tips_size">订阅者点击该子菜单会跳到以下链接</span>
                             <div>
                               <label for="" class="address">页面地址：</label>
                               <input type="text" id="view_menu_url" class="address_input " v-model="currentMenu.url" :title="currentMenu.url"/>
                               <el-button type="primary" size="small" icon="el-icon-menu">选择地址</el-button>
+                              <span class="mitips" v-if="urlError"  style="color: #f00;">请填写url</span>
                             </div>
                         </div>
                         
@@ -110,18 +114,21 @@
                             <span class="tips_size">订阅者点击该子菜单会跳到以下小程序</span>
                             <div class="miniprogram-item">
                               <label for="" class="address">APPID：</label>
-                              <input type="text" id="view_menu_url" class="address_input " v-model="currentMenu.appid" :title="currentMenu.appid"/>
-                              选择地址
+                              <input type="text" id="view_menu_url" class="address_input " v-model="currentMenu.appid" :title="currentMenu.appid" placeholder="请确保小程序与公众号关联，填写小程序"/>
+                              <a href="https://weixiao.qq.com/notice/view?mid=0&cid=2&id=274" target="_blank" rel="noopener noreferrer">如何获取</a>
+                              <span class="mitips" v-if="appidError"  style="color: #f00;">请填写appid</span>
                             </div>
                             <div class="miniprogram-item">
                               <label for="" class="address">页面：</label>
-                              <input type="text" id="view_menu_url" class="address_input " v-model="currentMenu.pagepath" :title="currentMenu.pagepath"/>
-                              选择地址
+                              <input type="text" id="view_menu_url" class="address_input " v-model="currentMenu.pagepath" :title="currentMenu.pagepath" placeholder="请填写跳转页面的小程序访问路径"/>
+                              <a href="https://weixiao.qq.com/notice/view?mid=0&cid=2&id=275" target="_blank" rel="noopener noreferrer">填写指引</a>
+                              <span class="mitips" v-if="pagepathError" style="color: #f00;">请填写pagepath</span>
                             </div>
                             <div class="miniprogram-item">
                               <label for="" class="address">备用页面：</label>
                               <input type="text" id="view_menu_url" class="address_input " v-model="currentMenu.url" :title="currentMenu.url"/>
-                              <span style="display:block;left:84px;position:relative;margin-top:10px;">旧版微信客户端不支持小程序，用户点击菜单时会打开该网页</span>
+                              <span class="mitips" v-if="urlError"  style="color: #f00;">请填写url</span>
+                              <span class="mitips" >旧版微信客户端不支持小程序，用户点击菜单时会打开该网页</span>
                             </div>
                         </div>
                       </div>
@@ -135,7 +142,7 @@
 
 <script>
 import BreadCrumb from "../components/bread-crumb";
-import {GetAuthorizationInfo,GetMenus} from "@/api/mpwechat/mpwechat";
+import {GetAuthorizationInfo,GetMenus,SaveMenus} from "@/api/mpwechat/mpwechat";
 export default {
   name: "menus",
   components: {
@@ -153,6 +160,7 @@ export default {
         {id:3, name:' 跳转小程序'},
       ],
       initButtons:false,
+      subload:false,
       menus:{button:[]},
       currentMenu:{
         type:'',
@@ -160,7 +168,7 @@ export default {
         url:'',
         appid:'',
         pagepath:'',
-        key:'',
+        key:'',//key规则：V_[number]_click;VC_[number]_click
         message:'',
         sub_button:[],
         media_id:'',
@@ -170,7 +178,12 @@ export default {
       currentChild:-1,
       menuNameError:false,
       messageError:false,
+      urlError:false,
+      appidError:false,
+      pagepathError:false,
       menuMessageTip:'还可以输入 600 字',
+      pclick:0,
+      cclick:0,
       authData: {
         id: 0,
         user_org_id: 0,
@@ -189,7 +202,7 @@ export default {
         authorizer_qrcode_url: "",
         created_time: "",
         updated_time: "",
-        authorizer_status: 1
+        authorizer_status: 0
       }
     };
   },
@@ -201,24 +214,135 @@ export default {
           if(res.data.authorization) {
             this.authData = res.data.authorization;
             if (this.authData.authorizer_status != 1) {
-              this.$message.error("公众号未授权给平台");
+              this.$message.error("公众号未授权");
               this.$router.push({path:"/weixinmp/authorization"})
               return false;
-            }else {
+            }else if (this.authData.authorizer_verify_type_info>=0 || this.authData.authorizer_service_type_info==2) {
               this.initButtons = true;
             }
+          }else {
+              this.$message.error("公众号未授权");
+              this.$router.push({path:"/weixinmp/authorization"})
           }
         }else {
           this.$message.error(res.msg);
         }
       }).catch(e=>{});
     },
+    submitSave:function () {
+        this.subload = true;
+        var res = this.checkMenus();
+        if (!res) {
+          this.$message.error("保存失败");
+          this.subload = false;
+          return false;
+        }
+        SaveMenus(this.menus).then(response=>{
+          var res = response.data;
+          if (res.state===1) {
+            this.$message.success("保存成功")
+          }else {
+            this.$message.error(res.msg);
+          }
+          this.subload = false;
+        }).catch(e=>{
+          this.subload = false;
+        });
+
+    },
+    addItem:function(mi){
+       var menu={type:'click',name:'',url:'',appid:'',pagepath:'',key:'',message:'',sub_button:null,media_id:''};
+       if (mi>-1) {
+         this.cclick += 1;
+          menu.key = 'VC_' + this.cclick + "_click";
+          menu.name ='子菜单名称';
+          if(!this.menus.button[mi].sub_button) {
+            this.menus.button[mi].sub_button = [];
+          }
+          this.menus.button[mi].sub_button.push(menu);
+          var sblen = this.menus.button[mi].sub_button.length;
+          this.selectItem(mi, sblen-1, menu);
+       }else {
+         this.pclick += 1;
+          menu.key = 'V_' + this.pclick + "_click";
+          menu.name ='菜单名称';
+          if (!this.menus.button) {
+            this.menus.button = [];
+          }
+          this.menus.button.push(menu);
+          var len = this.menus.button.length;
+          this.selectItem(len-1, -1, menu);
+       }
+    },
+    deleteButtonItem:function(){
+      this.$confirm('删除后该菜单下设置的内容将被删除', '删除提示', {
+        dangerouslyUseHTMLString:true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        if (this.currentPatient>=0&&this.currentChild>=0) {
+          this.menus.button[this.currentPatient].sub_button.splice(this.currentChild, 1);
+          var sblen = this.menus.button[this.currentPatient].sub_button.length;
+          if(sblen>0) {
+            this.currentChild = sblen-1;
+            this.selectItem(this.currentPatient, this.currentChild,this.menus.button[this.currentPatient].sub_button[this.currentChild]);
+          }else {
+            this.menus.button[this.currentPatient].sub_button = null;
+            this.selectItem(this.currentPatient,-1,this.menus.button[this.currentPatient]);
+          }
+        }else if (this.currentPatient>=0) {
+          this.menus.button.splice(this.currentPatient, 1);
+          var blen = this.menus.buttonlength;
+          if(blen>0) {
+            this.currentPatient = blen-1;
+            this.selectItem(this.currentPatient, -1,this.menus.button[this.currentPatient]);
+          }else {
+            this.currentPatient = -1;
+            this.currentMenu={
+              type:'',
+              name:'',
+              url:'',
+              appid:'',
+              pagepath:'',
+              key:'',
+              message:'',
+              sub_button:[],
+              media_id:'',
+            };
+          }
+        }
+      }).catch(() => {
+      });
+    },
     GetMenus:function(){
       GetMenus().then(response=>{
         var res = response.data;
         if (res.state == 1) {
           if (res.data.menus){
             this.menus = res.data.menus;
+            for (const index in this.menus.button) {
+              var button = this.menus.button[index];
+              if(typeof(button.key) !='undefined' && button.key) {
+                var keys = button.key.split("_")
+                if (typeof(keys[1]) !='undefined') {
+                  var num = parseInt(keys[1]);
+                  this.pclick = !isNaN(num) && num>this.pclick?num:this.pclick;
+                }
+              }
+              if(typeof(button.sub_button) !='undefined' && button.sub_button) {
+                for (const chilid in button.sub_button) {
+                  var cbutton = button.sub_button[chilid];
+                  if(typeof(cbutton.key) !='undefined' && cbutton.key) {
+                    var keys = cbutton.key.split("_")
+                    if (typeof(keys[1]) !='undefined') {
+                      var num = parseInt(keys[1]);
+                      this.cclick = !isNaN(num) && num>this.cclick?num:this.cclick;
+                    }
+                  }
+                }
+              }
+            }
           }
         }else {
           this.$message.error(res.msg);
@@ -243,9 +367,35 @@ export default {
           break;
       }
     },
+    changeMenuType:function(value){
+      switch (value) {
+        case 1:
+          this.currentMenu.type = 'click';
+          break;
+        case 2:
+          this.currentMenu.type = 'view';
+          break;
+        case 3:
+          this.currentMenu.type = 'miniprogram';
+          break;
+        default:
+          break;
+      }
+    },
     selectItem:function(mi, ni, node){
       this.currentPatient = mi;
       this.currentChild = ni;
+      this.currentMenu={
+        type:'',
+        name:'',
+        url:'',
+        appid:'',
+        pagepath:'',
+        key:'',
+        message:'',
+        sub_button:[],
+        media_id:'',
+      };
       for (const key in node) {
         this.currentMenu[key] = node[key]; 
       }
@@ -279,7 +429,6 @@ export default {
         return '';
       }
     },
-    
     ChcekMenuNameError:function(){
       if (this.currentPatient>=0&&this.currentChild>=0) {
         var res = /^[a-zA-Z0-9]{1,16}$/.test((this.currentMenu.name  + '').replace(/[\u4e00-\u9fa5]/g, 'aa'));
@@ -290,7 +439,111 @@ export default {
       } else {
         this.menuNameError = false;
       }
-    }
+      return this.menuNameError;
+    },
+    CheckUrlError:function(){
+      if (this.currentMenu.url.length==0) {
+        this.urlError = true;
+      }else {
+        this.urlError = false;
+      }
+      return this.urlError;
+    },
+    CheckAppidError:function(){
+      if (this.currentMenu.appid.length==0) {
+        this.appidError = true;
+      }else {
+        this.appidError = false;
+      }
+      return this.appidError;
+    },
+    CheckPagePathError:function(){
+      if (this.currentMenu.pagepath.length==0) {
+        this.pagepathError = true;
+      }else {
+        this.pagepathError = false;
+      }
+      return this.pagepathError;
+    },
+    CheckMessageError:function(){
+      var len = $.trim(this.currentMenu.message+'').length; 
+      var mt = 600-len;
+      if ( mt < 0) {
+        this.messageError = true;
+      }else {
+        this.messageError = false;
+      }
+      return this.messageError;
+    },
+    checkMenus:function(){
+      let p = this.currentPatient;
+      let c = this.currentChild;
+      for (const parent in this.menus.button) {
+        if (this.menus.button[parent].sub_button && this.menus.button[parent].sub_button.length>0) {
+          let subs = this.menus.button[parent].sub_button;
+          for (const child in subs) {
+            this.selectItem(parent, child, subs[child]);
+            if (this.ChcekMenuNameError()) {
+              return false;
+            }
+            if (subs[child].type == 'click') {
+              if (this.CheckMessageError()) {
+                return false;
+              }
+            }
+            if (subs[child].type == 'view') {
+              if (this.CheckUrlError()) {
+                return false;
+              }
+            }
+            if (subs[child].type == 'miniprogram') {
+              if (this.CheckUrlError()) {
+                return false;
+              }
+              if (this.CheckAppidError()) {
+                return false;
+              }
+              if (this.CheckPagePathError()) {
+                return false;
+              }
+            }
+          }
+        }else {
+          this.selectItem(parent, -1, this.menus.button[parent]);
+          var res = this.ChcekMenuNameError();
+          if (res) {
+            return false;
+          }
+          if (this.menus.button[parent].type == 'click') {
+            if (this.CheckMessageError()) {
+              return false;
+            }
+          }
+          if (this.menus.button[parent].type == 'view') {
+            if (this.CheckUrlError()) {
+              return false;
+            }
+          }
+          if (this.menus.button[parent].type == 'miniprogram') {
+            if (this.CheckUrlError()) {
+              return false;
+            }
+            if (this.CheckAppidError()) {
+              return false;
+            }
+            if (this.CheckPagePathError()) {
+              return false;
+            }
+          }
+        }
+      }
+      if (p>-1&&c>-1) {
+        this.selectItem(p, c, this.menus.button[p].sub_button[c]);
+      }else if(p>-1) {
+        this.selectItem(p, -1, this.menus.button[p]);
+      }
+      return true;
+    },
   },
   created() {
     this.GetAuthorizationInfo();
@@ -304,7 +557,57 @@ export default {
       }
     },
     'currentMenu.name':function(){
-      this.ChcekMenuNameError();
+      var res = this.ChcekMenuNameError();
+      if (!res) { //如果当前的菜单名称没有错
+        if (this.currentPatient>=0&&this.currentChild>=0) {
+          this.menus.button[this.currentPatient].sub_button[this.currentChild].name = this.currentMenu.name;
+        } else if (this.currentPatient>=0){
+          this.menus.button[this.currentPatient].name = this.currentMenu.name;
+        }
+      }
+    },  
+    'currentMenu.type':function(){
+      if (this.currentPatient>=0&&this.currentChild>=0) {
+        this.menus.button[this.currentPatient].sub_button[this.currentChild].type = this.currentMenu.type;
+        if (this.currentMenu.type == 'click' && this.currentMenu.key.length==0) {
+          this.cclick += 1;
+          var key = 'VC_' + this.cclick + "_click";
+          this.currentMenu.key = key;
+          this.menus.button[this.currentPatient].sub_button[this.currentChild]['key'] = key;
+        }
+      } else if (this.currentPatient>=0){
+        this.menus.button[this.currentPatient].type = this.currentMenu.type;
+        if (this.currentMenu.type == 'click' && this.currentMenu.key.length==0) {
+          this.pclick += 1;
+          var key = 'V_' + this.cclick + "_click";
+          this.currentMenu.key = key;
+          this.menus.button[this.currentPatient]['key'] = key;
+        }
+      }
+    },  
+    'currentMenu.url':function(){
+      if (this.currentPatient>=0&&this.currentChild>=0) {
+        this.menus.button[this.currentPatient].sub_button[this.currentChild].url = this.currentMenu.url;
+      } else if (this.currentPatient>=0){
+        this.menus.button[this.currentPatient].url = this.currentMenu.url;
+      }
+      this.CheckUrlError();
+    },  
+    'currentMenu.appid':function(){
+      if (this.currentPatient>=0&&this.currentChild>=0) {
+        this.menus.button[this.currentPatient].sub_button[this.currentChild].appid = this.currentMenu.appid;
+      } else if (this.currentPatient>=0){
+        this.menus.button[this.currentPatient].appid = this.currentMenu.appid;
+      }
+      this.CheckAppidError();
+    },  
+    'currentMenu.pagepath':function(){
+      if (this.currentPatient>=0&&this.currentChild>=0) {
+        this.menus.button[this.currentPatient].sub_button[this.currentChild].pagepath = this.currentMenu.pagepath;
+      } else if (this.currentPatient>=0){
+        this.menus.button[this.currentPatient].pagepath = this.currentMenu.pagepath;
+      }
+      this.CheckPagePathError();
     },  
     'currentMenu.message':function(){
       var len = $.trim(this.currentMenu.message+'').length; 
@@ -316,6 +619,11 @@ export default {
       }else {
         this.messageError = false;
         this.menuMessageTip = '还可以输入 ' + mt + ' 字';
+        if (this.currentPatient>=0&&this.currentChild>=0) {
+          this.menus.button[this.currentPatient].sub_button[this.currentChild].message = this.currentMenu.message;
+        } else if (this.currentPatient>=0){
+          this.menus.button[this.currentPatient].message = this.currentMenu.message;
+        }
       }
     },  
   },
@@ -673,6 +981,9 @@ export default {
     color: #485b6d;
     vertical-align: middle;
 }
+#winxin-menus-box .menu_form__con .mitips {
+  display:block;left:84px;position:relative;margin-top:10px;color: #c0c8d4;
+}
 /*.app-container .cell.clearfix .time ul li {*/
 /*float: left;*/
 /*list-style: none;*/

src/xt_permission.js

@@ -10,14 +10,14 @@ const permissionWhiteList = loginWhiteList.concat(['/']) // 权限验证白名
 
 router.beforeEach((to, from, next) => {
   // 线上注释
-  if (store.getters.permission_routers === undefined) {
-    store.dispatch('xt_GenerateRoutes', []).then(() => {
-      next()
-    })
-  } else {
-    next()
-  }
-  return
+  // if (store.getters.permission_routers === undefined) {
+  //   store.dispatch('xt_GenerateRoutes', []).then(() => {
+  //     next()
+  //   })
+  // } else {
+  //   next()
+  // }
+  // return
   // 线上注释
 
   NProgress.start()