micro_vue/src/scrm_pages/weixinmp/menus.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
      <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" @click="deleteMenus">停用菜单</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" 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" 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>
                  <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" @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> 
                                <i class="arrow arrow_in"></i> 
                            </div> 
                        </li>

                          <li class="jsAddMenu pre_menu_li" v-show="!menus.button||menus.button.length<3">
                              <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">
                                  <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" @click="deleteButtonItem">{{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="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" @change="changeBigType">
                            <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">
                                    <el-button type="text" icon="el-icon-edit-outline" style="padding:0" :disabled="currentMenu.type=='click'" @click="selectMenuType(1)">文字</el-button>
                                </div>
                                <div class="send_nav">
                                    <el-button type="text" icon="el-icon-picture-outline" style="padding:0" :disabled="currentMenu.type=='media_id'" @click="selectMenuType(2)">图片</el-button>
                                </div>
                            </div>
                            <textarea v-show="currentMenu.type=='click'" class="send_message_edit" id="click_menu_act" v-model="currentMenu.message" placeholder="请输入你需要的文字"></textarea>
                            <span v-show="currentMenu.type=='click'" class="tips" id="acterrinfo" v-if="!messageError" >&nbsp;&nbsp;{{menuMessageTip}}</span>
                            <span v-show="currentMenu.type=='click'" class="tips" id="acterrinfo" v-if="messageError"  style="color: #f00;">&nbsp;&nbsp;{{menuMessageTip}}</span>
                            <div v-show="currentMenu.type=='media_id'" class="mediaID-box">
                              <el-row>
                                <el-col :span="12" >
                                  <div class="mediaID-item">
                                    <i class="el-icon-news" @click="openMediaBox"></i>
                                    <span class="icon-name">从素材库选择</span>
                                  </div>
                                </el-col>
                                <el-col :span="12" >
                                  <div class="mediaID-item">
                                    <el-upload
                                      class="media-uploader"
                                      :action="addMaterialUrl"
                                      :show-file-list="false"
                                      :with-credentials='true'
                                      :on-success="handleMediaSuccess"
                                      :before-upload="beforeMediaUpload"
                                      >
                                      <img v-if="currentMenu.media_url" :src="currentMenu.media_url" class="media">
                                      <i v-else class="el-icon-plus media-uploader-icon"></i>
                                    </el-upload>
                                    <span class="icon-name">上传图片</span>
                                  </div>
                                </el-col>
                              </el-row>
                              
                            <span class="tips" id="acterrinfo"  >&nbsp;&nbsp;如果出现：此图片来自微信公众平台，未经允许不可引用！是正常情况</span>
                              
                            </div>
                        </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>
                              <span class="mitips" v-if="urlError"  style="color: #f00;">请填写url</span>
                            </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" 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" 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 class="mitips" v-if="urlError"  style="color: #f00;">请填写url</span>
                              <span class="mitips" >旧版微信客户端不支持小程序，用户点击菜单时会打开该网页</span>
                            </div>
                        </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
    <!--选择图片-->
    <image-material-box ref="imageMaterialBox" :currentMenu="currentMenu"></image-material-box>
  </div>
</template>

<script>
import BreadCrumb from "../components/bread-crumb";
import ImageMaterialBox from "./components/ImageMaterialBox";
import {GetAuthorizationInfo} from "@/api/mpwechat/mpwechat";
import {GetMenus,SaveMenus,DeleteMenu} from "@/api/mpwechat/mpmenus";

export default {
  name: "menus",
  components: {
    BreadCrumb,
    ImageMaterialBox,
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "系统设置" },
        { path: false, name: "公众号菜单" }
      ],
      menuTypeOptions:[
        {id:1, name:' 发送内容'},
        {id:2, name:' 跳转网页'},
        {id:3, name:' 跳转小程序'},
      ],
      addMaterialUrl: process.env.BASE_API + '/api/mpwechat/media/add_material',
      initButtons:false,
      subload:false,
      menus:{button:[]},
      currentMenu:{
        big_type:0,
        type:'',
        name:'',
        url:'',
        appid:'',
        pagepath:'',
        key:'',//key规则：V_[number]_click;VC_[number]_click
        message:'',
        sub_button:[],
        media_id:'',
        media_url:'',
      },
      menuType:0,
      currentPatient:-1,
      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,
        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: 0
      }
    };
  },
  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 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=>{});
    },
    openMediaBox:function(){
      this.$refs.imageMaterialBox.open();
    },
    handleMediaSuccess:function(res, file) {
      if (res.state==1) {
        this.$message.success('上传成功');
        this.currentMenu.media_url = 'http://img01.store.sogou.com/net/a/04/link?appid=100520029&url=' + res.data.media.media_url;
        this.currentMenu.media_id =  res.data.media.media_id;
      }else {
        this.$message.error(res.msg);
      }
    },
    beforeMediaUpload:function(file) {
      var allow = {"image/bmp":1,"image/png":1,"image/jpeg":1,"image/jpg":1,"image/gif":1};
      // const isJPG = file.type === 'image/jpeg';
      const isImg = file.type in allow;
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isImg) {
        this.$message.error('上传图片只能是 bmp/png/jpeg/jpg/gif 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isImg && isLt2M;
    },
    deleteMenus:function(){
      this.$confirm('删除后，公众号的菜单也将被删除', '删除提示', {
        dangerouslyUseHTMLString:true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteMenu().then(response=>{
          var res = response.data;
          if (res.state==1) {
            this.$message.success('删除成功');
            this.currentMenu = {
              type:'',
              name:'',
              url:'',
              appid:'',
              pagepath:'',
              key:'',//key规则：V_[number]_click;VC_[number]_click
              message:'',
              sub_button:[],
              media_id:'',
              media_url:'',
              big_type:0
            };
            this.currentPatient = -1;
            this.currentChild = -1;
            this.menus = {button:[]};
          }else {
            this.$message.error(res.msg);
          }
        }).catch(e=>{});
      }).catch(() => {
      });
    },
    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:'',
              media_url:'',
              big_type:0
            };
          }
        }
      }).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];
              this.menus.button[index]['big_type'] = typeof(button.type) !='undefined' && button.type ? this.setBigType(button.type):0;
              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];
                  this.menus.button[index].sub_button[chilid]['big_type'] = typeof(cbutton.type) !='undefined' && cbutton.type ? this.setBigType(cbutton.type):0;
                  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);
        }
      }).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;
      }
    },
    setBigType(type) {
       var bitType = 0;
       switch (this.currentMenu.type) {
        case 'click':
          bitType = 1;
          break;
        case 'media_id':
          bitTypee = 2;
          break;
      }
      return bitType;
    },
    changeBigType:function(value){
      // this.currentMenu.big_type = value;
      switch (value) {
        case 1:
          if (this.currentMenu.big_type == 1 ) {
            this.currentMenu.type = 'click';
          } else if (this.currentMenu.big_type == 2) {
            this.currentMenu.type = 'media_id';
          } else {
            this.currentMenu.type = 'click';
          }
          break;
        case 2:
          this.currentMenu.type = 'view';
          break;
        case 3:
          this.currentMenu.type = 'miniprogram';
          break;
        default:
          break;
      }
    },
    selectMenuType:function(type){
      this.currentMenu.big_type = type;
      if(type==1) {
        this.currentMenu.type = 'click';
      }else if(type==2) {
        this.currentMenu.type = 'media_id';
      }
    },
    selectItem:function(mi, ni, node){
      this.currentPatient = mi;
      this.currentChild = ni;
      this.currentMenu={
        type:'',
        name:'',
        url:'',
        appid:'',
        pagepath:'',
        key:'',
        message:'',
        sub_button:[],
        media_id:'',
        media_url:'',
        big_type:0,
      };
      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;
      }
      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();
  },
  computed:{
  },
  watch:{
    'initButtons':function(){
      if (this.initButtons) {
        this.GetMenus();
      }
    },
    'currentMenu.name':function(){
      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;
        this.menus.button[this.currentPatient].sub_button[this.currentChild].big_type = this.currentMenu.big_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;
        this.menus.button[this.currentPatient].big_type = this.currentMenu.big_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.media_id':function(){
      if (this.currentPatient>=0&&this.currentChild>=0) {
        this.menus.button[this.currentPatient].sub_button[this.currentChild].media_id = this.currentMenu.media_id;
      } else if (this.currentPatient>=0){
        this.menus.button[this.currentPatient].media_id = this.currentMenu.media_id;
      }
    },
    'currentMenu.media_url':function(){
      if (this.currentPatient>=0&&this.currentChild>=0) {
        this.menus.button[this.currentPatient].sub_button[this.currentChild].media_url = this.currentMenu.media_url;
      } else if (this.currentPatient>=0){
        this.menus.button[this.currentPatient].media_url = this.currentMenu.media_url;
      }
    },
    '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 + ' 字';
        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;
        }
      }
    },  
  },
};
</script>

<style >
#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;
    display: inline-block;
}
#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;
}
#winxin-menus-box .menu_form__con .mitips {
  display:block;left:84px;position:relative;margin-top:10px;color: #c0c8d4;
}
#winxin-menus-box .mediaID-item {
    text-align: center;
    padding: 10px;
    /* cursor: pointer; */
}

#winxin-menus-box .mediaID-item .el-icon-news{
  
    cursor: pointer;
}

/* #winxin-menus-box .mediaID-item:hover {
  background:#c0c8d4;
}  */
#winxin-menus-box .mediaID-item i {
  display: block;
    width: 80px;
    margin: 0 auto;
}
#winxin-menus-box .mediaID-item .el-icon-news {
  font-size: 80px;
}
#winxin-menus-box .mediaID-item .media-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin: 10px;
}
#winxin-menus-box .mediaID-item  .media-uploader .el-upload:hover {
  border-color: #409EFF;
}
#winxin-menus-box .mediaID-item .media-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 155px;
  height: 70px;
  line-height: 70px;
  text-align: center;
}
#winxin-menus-box .mediaID-item  .media {
  width: 155px;
  height: 70px;
  display: block;
}

/*.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>