会员卡权益设置，微信公众号授权，微信公众号菜单页面基本布局

package-lock.json

@@ -4706,8 +4706,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4728,14 +4727,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4750,20 +4747,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4880,8 +4874,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4893,7 +4886,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4908,7 +4900,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4916,14 +4907,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -4942,7 +4931,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5023,8 +5011,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5036,7 +5023,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5122,8 +5108,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5159,7 +5144,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5179,7 +5163,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5223,14 +5206,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },

src/api/member/member.js

@@ -118,3 +118,12 @@ export function DeleteMemberShipCard(data) {
     data: data
   })
 }
+
+
+export function EditRight(data) {
+  return request({
+    url: '/api/membercard/right/edit',
+    method: 'put',
+    data: data
+  })
+}

src/api/mpwechat/mpwechat.js

@@ -0,0 +1,23 @@
+import request from '@/utils/request'
+
+export function GetAuthorizationInfo() {
+  return request({
+    url: '/api/mpwechat/authorization',
+    method: 'get',
+  })
+}
+
+export function GetAuthUrl() {
+  return request({
+    url: '/api/mpwechat/authurl',
+    method: 'get',
+  })
+}
+  
+export function GetMenus() {
+  return request({
+    url: '/api/mpwechat/menus',
+    method: 'get',
+  })
+}
+  

src/router/modules/system.js

@@ -17,6 +17,12 @@ export default {
       name: 'weixinMpAuth',
       meta: { title: '公众号授权', noCache: true }
     },
+    {
+      path: '/weixinmp/menus',
+      component: () => import('@/scrm_pages/weixinmp/menus'),
+      name: 'weixinMpMenus',
+      meta: { title: '公众号菜单', noCache: true }
+    },
     {
       path: '/Systemsetting/staffmanagement',
       component: () => import('@/scrm_pages/Systemsetting/staffmanagement'),

src/scrm_pages/members/cards.vue

@@ -2,7 +2,11 @@
   <div class="main-contain">
     <div class="position">
       <bread-crumb :crumbs='crumbs'></bread-crumb>
-      <el-button  style="float:right;" type="primary" size="small" icon="el-icon-circle-plus-outline" @click="openCreate">添加会员卡</el-button>
+      <el-col :span="5" style="text-align: right;">
+        <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="openCreate">添加会员卡</el-button>
+        <el-button  type="primary" size="small" icon="el-icon-setting" @click="openRight">会员权益配置</el-button>
+      </el-col>
+      
     </div>
     <div class="app-container">
         <div class="filter-container" style="margin-top: 10px;margin-left: 5px " id="member-cards-box">
@@ -29,6 +33,8 @@
         <create-card-form ref="createCardForm" :cardsData="cardsData" ></create-card-form>
         <!--create-card-form 编辑会员卡-->
         <edit-card-form ref="editCardForm" :cardsData="cardsData" :cardIndex="cardIndex" :form="editFormData"></edit-card-form>
+        <!--create-right-form 编辑权益-->
+        <edit-card-right-form ref="editCardRightForm"  :form="rightData" ></edit-card-right-form>
     </div>
   </div>
 </template>
@@ -38,6 +44,7 @@
   import BreadCrumb from '../components/bread-crumb';
   import CreateCardForm from "./components/CreateCardForm";
   import EditCardForm from "./components/EditCardForm";
+  import EditCardRightForm from "./components/EditCardRightForm";
 
   export default {
     name: 'memberCardList',
@@ -45,6 +52,7 @@
       BreadCrumb,
       CreateCardForm,
       EditCardForm,
+      EditCardRightForm
     },
     data(){
       return{
@@ -53,6 +61,9 @@
           { path: false, name: '会员卡管理' }
         ],
         cardsData:[],
+        rightData:{
+          rights: "",
+        },
         editFormData:{
             background_type:1,
             background:"#409EFF",
@@ -72,6 +83,12 @@
         openCreate:function(){
           this.$refs.createCardForm.open();
         },
+        // updateRightData(right){
+        //   this.rightData.rights = right;
+        // },
+        openRight(){
+          this.$refs.editCardRightForm.open();
+        },
         openEdit(row, index) {
           for (const key in this.editFormData) {
             this.editFormData[key] = row[key];
@@ -106,6 +123,9 @@
                 var res = response.data;
                 if(res.state===1) {
                     this.cardsData = res.data.cards;
+                    if (res.data.right) {
+                      this.rightData.rights = res.data.right.rights;
+                    }
                 }
             }).catch(e=>{})
         }

src/scrm_pages/members/components/EditCardRightForm.vue

@@ -0,0 +1,77 @@
+<template>
+    <div id="edit-card-form-box">
+        <el-dialog title="会员协议配置" :visible.sync="editRightFormVisible" width="900px" id="edit-member-right-show" v-loading="submitLoading" :element-loading-text="loadingText">
+            <el-form ref="rightForm" :model="form" label-width="100px" id="edit-member-right-form">
+                <el-form-item label="会员权益:"  prop="rights">
+                    <el-input v-model="form.rights" type="textarea" rows='6' placeholder="" ></el-input>
+                </el-form-item>
+            </el-form>
+            
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="editRightFormVisible = false">取消</el-button>
+                <el-button
+                type="primary"
+                @click="submitForm('rightForm')"
+                >保 存
+                </el-button>
+            </div>
+        </el-dialog>  
+    </div>
+</template>
+
+<script>
+import {EditRight} from "@/api/member/member";
+
+export default {
+    name:'EditCardRightForm',
+    props:{
+        form:{
+            rights:'',
+        },
+    },
+    data(){
+        return {
+            editRightFormVisible:false,
+            loadingText:'',
+            submitLoading:false,
+            
+        }
+    },
+    methods:{
+        open:function(){
+            this.editRightFormVisible = true;
+        },
+        resetForm:function(formName) {
+            if (typeof(this.$refs[formName]) !='undefined') {
+                this.$refs[formName].resetFields();
+            }
+        },
+        submitForm:function(formName){
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    this.loadingText = "正在保存...";
+                    this.submitLoading = true;
+                    EditRight(this.form).then(response=>{
+                        var res = response.data;
+                        if(res.state === 1) {
+                            // this.$emit('update-right', res.data.right.rights);
+                            this.editRightFormVisible = false;
+                            this.$message.success("编辑成功");
+                        }else {
+                            this.$message.error(res.msg);
+                        }
+                        this.submitLoading = false;
+                    }).catch(e=>{
+                        this.submitLoading = false;
+                    });
+                } else {
+                    return false;
+                }
+            });
+        },
+    },
+    computed: {
+    
+    },
+}
+</script>

src/scrm_pages/weixinmp/authorization.vue

@@ -2,6 +2,7 @@
   <div class="main-contain">
     <div class="position">
       <bread-crumb :crumbs="crumbs"></bread-crumb>
+      <el-button  style="float:right;" type="primary" size="small" :disabled="resetSubmit" icon="el-icon-refresh" @click="resetPage">刷新</el-button>
     </div>
     <div class="app-container" id="winxin-auth-box">
       <div class="filter-container" style="margin-top: 10px;margin-left: 5px ">
@@ -9,10 +10,10 @@
           <div class="bind-title-box">
             <span class="bind-title">您已绑定公众号，如需更换绑定公众号，请点击下面按钮</span>
           </div>
-          <el-button type="warning">更换绑定公众号</el-button>
+          <el-button type="warning" @click="getAuthUrl" >更换绑定公众号</el-button>
           <div class="bind-massage-box">
             <span>
-              授权公众号：{{authData.authorizer_nick_name}}，类型：{{mpTypeName}}，
+              授权公众号：{{authData.authorizer_nick_name}}
               <!--授权方公众号类型，0代表订阅号，1代表由历史老帐号升级后的订阅号，2代表服务号-->
               <!-- authorizer_service_type_info -->
             </span>
@@ -22,7 +23,7 @@
           <div class="bind-title-box">
             <span class="bind-title">您尚未绑定公众号</span>
           </div>
-          <el-button type="warning">已有公众号，立刻绑定</el-button>
+          <el-button type="warning" @click="getAuthUrl" >已有公众号，立刻绑定</el-button>
           <div class="bind-massage-box">
             <span>
               如果还没有公众号，需要先在微信公众号平台进行申请。 去
@@ -54,19 +55,33 @@
       <div style="height:20px">&nbsp;</div>
       <div class="dataTitle title-12">如何取消给酷医云的授权？</div>
       <div class="dataBody">
-        <p>公众号取消授权，进入微信后台，点击“+添加功能插件”，进入“授权管理”，就可以看到酷医云的授权，并且解除授权了。</p>
+        <p>公众号取消授权，进入微信后台，点击“设置-公众号设置-授权管理”，就可以看到酷医云的授权，并且解除授权了。</p>
       </div>
     </div>
+    <el-dialog
+      title="授权二维码"
+      :visible.sync="centerDialogVisible"
+      width="30%"
+      center>
+      <div style="text-align:center;">
+        <div><span>请用微信扫描下方二维码</span></div>
+        <div id="mpwechat-auth-qrcode" ref="qrcode" ></div>
+        <div><span>在手机完成授权后，点击右上角的刷新按钮</span></div>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
 import BreadCrumb from "../components/bread-crumb";
-
+import QRCode from 'qrcodejs2'  // 引入qrcode
+import {GetAuthorizationInfo,GetAuthUrl} from "@/api/mpwechat/mpwechat";
 export default {
   name: "authorization",
   components: {
-    BreadCrumb
+    BreadCrumb,
+    QRCode,
   },
   data() {
     return {
@@ -74,7 +89,9 @@ export default {
         { path: false, name: "系统设置" },
         { path: false, name: "公众号授权" }
       ],
-
+      showAuthButton:true,
+      centerDialogVisible:false,
+      resetSubmit:false,
       authData: {
         id: 0,
         user_org_id: 0,
@@ -97,8 +114,54 @@ export default {
       }
     };
   },
-  methods: {},
-  created() {},
+  methods: {
+    getAuthUrl:function(){
+      // this.showAuthButton = false;
+      GetAuthUrl().then(response=>{
+        var res =  response.data;
+        if (res.state===1) {
+          var url = res.data.url;
+          this.centerDialogVisible = true;
+          this.$nextTick (function () {
+            this.qrcode(url);
+          })
+        }else {
+          this.$message.error(res.msg);
+        }
+      }).catch(e=>{
+        
+        // this.showAuthButton = true;
+      });
+    },
+    qrcode(url) {
+      document.getElementById('mpwechat-auth-qrcode').innerHTML = ''
+      let qrcode = new QRCode('mpwechat-auth-qrcode', {
+        width: 150,  
+        height: 150,
+        text: url,
+        colorDark : "#000",
+        colorLight : "#fff",
+      })
+    },
+    resetPage(){
+      this.GetAuthorizationInfo();
+    },
+    GetAuthorizationInfo:function(){
+      GetAuthorizationInfo().then(response=>{
+        var res =  response.data;
+        if(res.state===1) {
+          if(res.data.authorization) {
+            this.authData = res.data.authorization;
+          }
+        }else {
+          this.$message.error(res.msg);
+        }
+      }).catch(e=>{});
+    },
+  },
+  created() {
+    this.GetAuthorizationInfo();
+  },
   computed:{
     mpTypeName:function(){
       return 'xx';
@@ -166,6 +229,10 @@ export default {
   font-size: 14px;
   line-height: 18px;
 }
+#mpwechat-auth-qrcode{
+  width: 150px;
+  margin: 5px auto;
+}
 /*.app-container .cell.clearfix .time ul li {*/
 /*float: left;*/
 /*list-style: none;*/

src/scrm_pages/weixinmp/menus.vue

@@ -0,0 +1,687 @@
+<template>
+  <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>
+    </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">
+              <p>菜单编辑中</p>
+              <p>菜单不会即时发布，请确定菜单编辑完成后点击“保存并发布”同步到手机，若停用菜单，点击“停用菜单”</p>
+          </div>
+      </div>
+      <div class="menu_setting_area clearfix">
+          <div class="menu_preview_area fl">
+              <div class="mobile_menu_preview">
+                  <div class="mobile_hd">{{authData.authorizer_nick_name}}</div>
+                  <div class="mobile_bd">
+                      <ul class="pre_menu_list">
+                        <li class="jsMenu pre_menu_li"  :id="'menu_'+mi" v-for="(menu, mi) in menus.button" :key="mi" :class="mi==currentPatient&&currentChild==-1?'menu-active':''">
+                            <a href="javascript:void(0);" class="pre_menu_link jsMenuB" @click="selectItem(mi, -1, menu)"> <i class="icon_menu_dot "></i> <span class="js_l1Title_">{{menu.name}}</span> </a>
+                            <div class="sub_pre_menu_box" v-show="mi==currentPatient">
+                              <ul class="sub_pre_menu_list">
+                                <li class="jslevel2 jsSubMenu"   :id="'subMenu_menu_'+ mi + '_'+ni" v-for="(node, ni) in childrenNode(menu.sub_button)" :key="ni" :class="mi==currentPatient&&currentChild==ni?'menu-active':''"> 
+                                  <a href="javascript:void(0);" class="jsSubView jsSubMenuBtn" @click="selectItem(mi, ni, node)" > <span class="sub_pre_menu_inner "> <i class="icon20_common"></i> <span class="js_l2Title">{{node.name}}</span> </span> </a> 
+                                </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> 
+                                </li>
+                              </ul>
+                                <i class="arrow arrow_out"></i> 
+                                <i class="arrow arrow_in"></i> 
+                            </div> 
+                        </li>
+
+                          <li class="jsAddMenu pre_menu_li" v-show="menus.button.length<3">
+                              <a href="javascript:void(0);" class="pre_menu_link">
+                                  <i class="icon_menu_dot "></i>
+                                  <span class="js_l1Title_">
+                                      <i class="icon14_menu_add">+</i>
+                                  </span>
+                              </a>
+                              <div class="sub_pre_menu_box">
+                                  <ul class="sub_pre_menu_list">
+                                      <li class="jslevel2 jsAddSubMenu">
+                                          <a href="javascript:void(0);" class="jsSubView">
+                                              <span class="sub_pre_menu_inner ">
+                                                  <i class="icon14_menu_add">+</i>
+                                              </span>
+                                          </a>
+                                      </li>
+                                  </ul>
+                                  <i class="arrow arrow_out"></i>
+                                  <i class="arrow arrow_in"></i>
+                              </div>
+                          </li>
+
+                      </ul>
+                  </div>
+              </div>
+              <div class="sort_btn_wrp">
+              </div>
+          </div>
+          <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="global_info">{{showMenuName()}}</span>
+                  </h2>
+                  <div class="menu_form_item">
+                      <label for="" class="tit">菜单名称</label>
+                      <input type="text" class="name clearfix js_menu_name" id="menu_name_input" v-model="currentMenu.name" placeholder="请输入菜单名称" />
+                      <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__nav clearfix">
+                          <label for="" class="tit">菜单内容</label>
+                          <el-radio-group v-model="menuType" class="radio_item">
+                            <el-radio v-for="(menu, index) in menuTypeOptions" :key="index" :label="menu.id" :value="menu.id">{{menu.name}}</el-radio>
+                          </el-radio-group>
+                      </div>
+                      <div class="menu_form__con">
+                        <div class="inner send_message " v-show="menuType==1">
+                            <div class="send_message_tit">
+                                <div class="send_nav">
+                                    <i class="ico_size"></i>
+                                    文字
+                                </div>
+                            </div>
+                            <textarea class="send_message_edit" id="click_menu_act" v-model="currentMenu.message" placeholder="请输入你需要的文字"></textarea>
+                            <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">
+                            <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>
+                            </div>
+                        </div>
+                        
+                        <div class="inner miniprogram " v-show="menuType==3">
+                            <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"/>
+                              选择地址
+                            </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"/>
+                              选择地址
+                            </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>
+                            </div>
+                        </div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BreadCrumb from "../components/bread-crumb";
+import {GetAuthorizationInfo,GetMenus} from "@/api/mpwechat/mpwechat";
+export default {
+  name: "menus",
+  components: {
+    BreadCrumb,
+  },
+  data() {
+    return {
+      crumbs: [
+        { path: false, name: "系统设置" },
+        { path: false, name: "公众号菜单" }
+      ],
+      menuTypeOptions:[
+        {id:1, name:' 发送内容'},
+        {id:2, name:' 跳转网页'},
+        {id:3, name:' 跳转小程序'},
+      ],
+      initButtons:false,
+      menus:{button:[]},
+      currentMenu:{
+        type:'',
+        name:'',
+        url:'',
+        appid:'',
+        pagepath:'',
+        key:'',
+        message:'',
+        sub_button:[],
+        media_id:'',
+      },
+      menuType:0,
+      currentPatient:-1,
+      currentChild:-1,
+      menuNameError:false,
+      messageError:false,
+      menuMessageTip:'还可以输入 600 字',
+      authData: {
+        id: 0,
+        user_org_id: 0,
+        authorizer_appid: "",
+        authorizer_access_token: "",
+        authorizer_refresh_token: "",
+        authorizer_jsapi_ticket: "",
+        authorizer_funcscope_category: "",
+        authorizer_nick_name: "",
+        authorizer_head_img: "",
+        authorizer_service_type_info: 0,
+        authorizer_verify_type_info: 0,
+        authorizer_user_name: "",
+        authorizer_principal_name: "",
+        authorizer_business_info: "",
+        authorizer_qrcode_url: "",
+        created_time: "",
+        updated_time: "",
+        authorizer_status: 1
+      }
+    };
+  },
+  methods: {
+    GetAuthorizationInfo:function(){
+      GetAuthorizationInfo().then(response=>{
+        var res =  response.data;
+        if(res.state===1) {
+          if(res.data.authorization) {
+            this.authData = res.data.authorization;
+            if (this.authData.authorizer_status != 1) {
+              this.$message.error("公众号未授权给平台");
+              this.$router.push({path:"/weixinmp/authorization"})
+              return false;
+            }else {
+              this.initButtons = true;
+            }
+          }
+        }else {
+          this.$message.error(res.msg);
+        }
+      }).catch(e=>{});
+    },
+    GetMenus:function(){
+      GetMenus().then(response=>{
+        var res = response.data;
+        if (res.state == 1) {
+          if (res.data.menus){
+            this.menus = res.data.menus;
+          }
+        }else {
+          this.$message.error(res.msg);
+        }
+      }).catch(e=>{});
+    },
+    SetMenuType:function(){
+      switch (this.currentMenu.type) {
+        case 'media_id':
+        case 'click':
+          this.menuType = 1;
+          break;
+        case 'view':
+          this.menuType = 2;
+          break;
+        case 'miniprogram':
+          this.menuType = 3;
+          break;
+      
+        default:
+          this.menuType = 0;
+          break;
+      }
+    },
+    selectItem:function(mi, ni, node){
+      this.currentPatient = mi;
+      this.currentChild = ni;
+      for (const key in node) {
+        this.currentMenu[key] = node[key]; 
+      }
+      this.SetMenuType();
+    },
+    childrenNode:function(buttons) {
+      if (buttons) {
+        return buttons;
+      }else {
+        return [];
+      }
+    },
+    deleteButtonName:function() {
+      if(this.currentPatient>=0&&this.currentChild>=0) {
+        return '删除子菜单';
+      }
+      return '删除菜单';
+    },
+    showMenuName:function(){
+      if(this.currentMenu) {
+        return this.currentMenu.name;
+      }
+      return '菜单名称';
+    },
+    menuNameTip:function(){
+      if(this.currentPatient>=0&&this.currentChild>=0) {
+        return '字数不超过8个汉字或16个字母';
+      }else if (this.currentPatient>=0){
+        return '字数不超过4个汉字或8个字母';
+      }else {
+        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'));
+        this.menuNameError = !res;
+      } else if (this.currentPatient>=0){
+        var res = /^[a-zA-Z0-9]{1,8}$/.test((this.currentMenu.name + '').replace(/[\u4e00-\u9fa5]/g, 'aa'));
+        this.menuNameError = !res;
+      } else {
+        this.menuNameError = false;
+      }
+    }
+  },
+  created() {
+    this.GetAuthorizationInfo();
+  },
+  computed:{
+  },
+  watch:{
+    'initButtons':function(){
+      if (this.initButtons) {
+        this.GetMenus();
+      }
+    },
+    'currentMenu.name':function(){
+      this.ChcekMenuNameError();
+    },  
+    'currentMenu.message':function(){
+      var len = $.trim(this.currentMenu.message+'').length; 
+      var mt = 600-len;
+      if ( mt < 0) {
+        mt = len-600;
+        this.messageError = true;
+        this.menuMessageTip = '已超出 ' + mt + ' 字，内容将不会保存。';
+      }else {
+        this.messageError = false;
+        this.menuMessageTip = '还可以输入 ' + mt + ' 字';
+      }
+    },  
+  },
+};
+</script>
+
+<style scoped>
+#winxin-menus-box {
+  font-size: 14px;
+  color: #485b6d;
+}
+#winxin-menus-box .menu-active{
+  border: 1px solid rgb(68, 181, 73) !important;
+}
+#winxin-menus-box .menu_tips{
+  padding: 20px 0 18px 32px;
+    background: #f4f7fa;
+}
+#winxin-menus-box .clearfix {
+    clear: both;
+}
+#winxin-menus-box .clearfix:before {
+    display: table;
+    content: " ";
+}
+#winxin-menus-box .menu_tips .ico_menu_tips {
+    width: 36px;
+    height: 36px;
+    background: url('https://images.shengws.com/icos-201906141103.png') no-repeat -691px -548px;
+    display: block;
+    margin-right: 11px;
+}
+#winxin-menus-box .fl {
+    float: left;
+}
+#winxin-menus-box .menu_setting_area {
+    padding: 42px 0 0 50px;
+    display: flex;
+}
+#winxin-menus-box .menu_preview_area {
+    width: 284px;
+    border: 1px solid #e7e7eb;
+    position: relative;
+}
+
+#winxin-menus-box .mobile_menu_preview {
+    position: relative;
+    width: 284px;
+    height: 580px;
+    background: transparent url("https://images.shengws.com/bg_mobile_head_default3a7b38.png") no-repeat 0 0;
+    background-position: 0 0;
+    background-size:100%;
+}
+#winxin-menus-box .mobile_menu_preview .mobile_hd {
+    padding: 30px 0 0 20px;
+    text-align: center;
+    color: #fff;
+}
+#winxin-menus-box .menu_preview_area .pre_menu_list {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-top: 1px solid #e7e7eb;
+    background: transparent url("https://images.shengws.com/bg_mobile_foot_default3a7b38.png") no-repeat 0 0;
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    padding-left: 43px;
+}
+#winxin-menus-box ul, #winxin-menus-boxol {
+    list-style: none;
+}
+#winxin-menus-box .radio_item {
+  margin: 13px 0;
+}
+#winxin-menus-box .mobile_bd .pre_menu_list .pre_menu_li {
+    border-right: 1px #e5e8ea solid;
+    height: 50px;
+    line-height: 50px;
+    float: left;
+    text-align: center;
+    width: 33%;
+    position: relative;
+}
+#winxin-menus-box .mobile_bd .pre_menu_list li a {
+    display: block;
+    width: auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-wrap: normal;
+    text-decoration: none;
+    color: #54657e;
+    white-space: nowrap;
+}
+#winxin-menus-box .menu_preview_area .sub_pre_menu_box {
+    bottom: 60px;
+    border-top-width: 0;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    border: 1px solid #d0d0d0;
+    background-color: #fff;
+}
+#winxin-menus-box  ul ul {
+    margin-bottom: 0;
+}
+#winxin-menus-box .sub_pre_menu_box .jslevel2 {
+    line-height: 44px;
+    border: 1px solid transparent;
+    margin: 0 -1px -1px;
+}
+#winxin-menus-box .sub_pre_menu_box .jslevel2 .jsSubView {
+    padding: 0 .5em;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-wrap: normal;
+    color: #616161;
+    text-decoration: none;
+}
+#winxin-menus-box .mobile_bd .pre_menu_list li a {
+    display: block;
+    width: auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-wrap: normal;
+    text-decoration: none;
+    color: #54657e;
+    white-space: nowrap;
+}
+#winxin-menus-box .menu_preview_area .sub_pre_menu_inner {
+    display: block;
+    border-top: 1px solid #e7e7eb;
+    width: auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-wrap: normal;
+    cursor: pointer;
+}
+#winxin-menus-box .menu_preview_area .icon14_menu_add {
+    font-size: 26px;
+    color: #d0d4d7;
+    font-weight: 700;
+}
+#winxin-menus-box .sub_pre_menu_box .arrow_out {
+    bottom: -6px;
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-width: 6px;
+    border-style: dashed;
+    border-color: transparent;
+    border-bottom-width: 0;
+    border-top-color: #d0d0d0;
+    border-top-style: solid;
+    position: absolute;
+    left: 50%;
+    margin-left: -6px;
+}
+#winxin-menus-box .sub_pre_menu_box .arrow_in {
+    bottom: -5px;
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-width: 6px;
+    border-style: dashed;
+    border-color: transparent;
+    border-bottom-width: 0;
+    border-top-color: #fafafa;
+    border-top-style: solid;
+    position: absolute;
+    left: 50%;
+    margin-left: -6px;
+}
+#winxin-menus-box .arrow {
+    float: right;
+    margin-top: 9px;
+    margin-right: 8px;
+    color: #909399;
+}
+
+#winxin-menus-box .menu_form_area {
+    margin-left: 26px;
+    border: 1px #dee2e5 solid;
+    background: #f4f7fa;
+    flex: 1;
+}
+#winxin-menus-box .menu_form_inner {
+    padding: 0 16px 30px 18px;
+}
+#winxin-menus-box .menu_setting_area .menu_form_tit {
+    height: 38px;
+    line-height: 38px;
+    border-bottom: 1px #e5e8ea solid;
+    color: #485b6d;
+    font-size: 14px;
+    margin-bottom: 29px;
+}
+#winxin-menus-box .menu_form_tit .delate {
+    color: #485b6d;
+    font-size: 13px;
+    cursor: pointer;
+}
+#winxin-menus-box .fr {
+    float: right;
+}
+#winxin-menus-box .menu_form_inner .menu_form_item {
+    padding-bottom: 20px;
+}
+#winxin-menus-box .menu_form_inner .menu_form_item .tit {
+    font-size: 13px;
+    color: #485b6d;
+    margin-right: 15px;
+    font-weight: normal;
+    display: block;
+    float: left;
+    height: 40px;
+    line-height: 40px;
+    width: 68px;
+    text-align: right;
+}
+#winxin-menus-box label {
+    display: inline-block;
+    max-width: 100%;
+    margin-bottom: 0;
+    font-weight: normal;
+}
+#winxin-menus-box .menu_form_inner .menu_form_item .name {
+    width: 377px;
+    height: 38px;
+    border: 1px #dee2e5 solid;
+    padding-left: 18px;
+    font-size: 12px;
+    color: #c1c9d3;
+    border-radius: 4px;
+    color: #485b6d;
+}
+#winxin-menus-box input {
+    outline: none;
+}
+#winxin-menus-box input, #winxin-menus-box select, #winxin-menus-box textarea {
+    outline: none;
+    font-family: "Microsoft YaHei";
+    filter: chroma(color=#FFF);
+    padding: 0px;
+}
+#winxin-menus-box input, #winxin-menus-box select {
+    vertical-align: middle;
+}
+#winxin-menus-box .menu_form_inner .menu_form_item .tips {
+    display: block;
+    font-size: 13px;
+    color: #c0c8d4;
+    height: 30px;
+    line-height: 30px;
+}
+#winxin-menus-box .menu_form_inner .menu_form_item {
+    padding-bottom: 20px;
+}
+#winxin-menus-box .radio_item li {
+    float: left;
+    margin-right: 25px;
+    color: #2c3e50;
+    cursor: pointer;
+    line-height: 36px;
+    height: 36px;
+    position: relative;
+}
+#winxin-menus-box .menu_form__nav .radio_item li .type_radio {
+    width: 20px;
+    height: 20px;
+    margin-right: 10px;
+}
+#winxin-menus-box .radio_item li .type_radio {
+    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+}
+#winxin-menus-box input[type=radio] {
+    margin: 0 0 0;
+}
+#winxin-menus-box .radio_item li.active .radio_name {
+    color: #58a2ec;
+}
+#winxin-menus-box .radio_item li.active .ico_radio {
+    background: url('https://images.shengws.com/icos-201906141103.png') no-repeat -171px -348px;
+}
+#winxin-menus-box .menu_form_item .menu_form__con {
+    background: #fff;
+    border: 1px #dee2e5 solid;
+    border-radius: 4px;
+}
+#winxin-menus-box .menu_form__con .active {
+    display: block;
+}
+#winxin-menus-box .menu_form_item .menu_form__con .send_message_tit {
+    font-size: 13px;
+    color: #485b6d;
+    padding: 10px 38px;
+    border-bottom: 1px #e5e8ea solid;
+}
+#winxin-menus-box .menu_form_item .send_message_tit .send_nav {
+    width: 80px;
+}
+#winxin-menus-box .menu_form_item .send_message_tit .ico_size {
+    width: 14px;
+    height: 18px;
+    background: url('https://images.shengws.com/icos-201906141103.png') -716px -310px;
+    display: block;
+    float: left;
+    margin-right: 10px;
+}
+#winxin-menus-box .menu_form__con .send_message_edit {
+    padding: 15px;
+    width: 100%;
+    height: 100%;
+    display: block;
+    border: 1px #fff solid;
+    height: 160px;
+}
+#winxin-menus-box .menu_form_inner .menu_form_item .tips {
+    display: block;
+    font-size: 13px;
+    color: #c0c8d4;
+    height: 30px;
+    line-height: 30px;
+}
+#winxin-menus-box .menu_form__con .jump_page, #winxin-menus-box .menu_form__con .miniprogram {
+    padding: 22px 0 50px 20px;
+}
+
+#winxin-menus-box .menu_form__con .miniprogram .miniprogram-item  {
+  margin: 10px 0; 
+}
+#winxin-menus-box .menu_form__con .jump_page .tips_size, #winxin-menus-box .menu_form__con .miniprogram .tips_size {
+    color: #7b8a97;
+    display: block;
+    margin-bottom: 14px;
+}
+#winxin-menus-box .menu_form__con .jump_page .address, #winxin-menus-box .menu_form__con .miniprogram .address {
+    font-weight: normal;
+    margin-right: 10px;
+    width: 70px;
+}
+#winxin-menus-box .menu_form__con .jump_page .address_input,#winxin-menus-box .menu_form__con .miniprogram .address_input {
+    width: 377px;
+    height: 38px;
+    border: 1px #dee2e5 solid;
+    padding-left: 18px;
+    font-size: 12px;
+    color: #c1c9d3;
+    border-radius: 4px;
+    color: #485b6d;
+    vertical-align: middle;
+}
+/*.app-container .cell.clearfix .time ul li {*/
+/*float: left;*/
+/*list-style: none;*/
+/*cursor: pointer;*/
+/*padding: 6px 20px;*/
+/*color: #606266;*/
+/*border-radius: 4px;*/
+/*margin: 0 8px 0 0;*/
+/*font-size: 14px;*/
+/*text-align: center;*/
+/*}*/
+</style>