src/api/mpwechat/mpmenus.js

@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+
+export function GetMenus() {
+  return request({
+    url: '/api/mpwechat/menus',
+    method: 'get',
+  })
+}
+
+export function SaveMenus(data) {
+  return request({
+    url: '/api/mpwechat/savemenus',
+    method: 'put',
+    data:data,
+  })
+}
+
+export function DeleteMenu(data) {
+  return request({
+    url: '/api/mpwechat/deletemenus',
+    method: 'post',
+    data:data,
+  })
+}

src/api/mpwechat/mpreply.js

@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+
+export function GetSubscribeRplay() {
+    return request({
+        url: '/api/mpwechat/reply/subscribe',
+        method: 'get',
+    })
+}
+
+export function SaveSubscribeRplay(data) {
+    return request({
+        url: '/api/mpwechat/reply/subscribe',
+        method: 'put',
+        data:data,
+    })
+}
+    
+export function GetKeyWordReplys(params) {
+    return request({
+        url: '/api/mpwechat/reply/kewords',
+        method: 'get',
+        params:params,
+    })
+}
+
+export function CreateKeyWordReply(data) {
+    return request({
+        url: '/api/mpwechat/reply/keword',
+        method: 'post',
+        data:data,
+    })
+}
+export function EditKeyWordReply(id,data) {
+    return request({
+        url: '/api/mpwechat/reply/keword?id='+id,
+        method: 'put',
+        data:data,
+    })
+}
+
+export function DeleteReplys(data) {
+    return request({
+        url: '/api/mpwechat/replys',
+        method: 'delete',
+        data:data,
+    })
+}

src/api/mpwechat/mpwechat.js

@@ -12,19 +12,4 @@ export function GetAuthUrl() {
     url: '/api/mpwechat/authurl',
     method: 'get',
   })
-}
-  
-export function GetMenus() {
-  return request({
-    url: '/api/mpwechat/menus',
-    method: 'get',
-  })
-}
-
-export function SaveMenus(data) {
-  return request({
-    url: '/api/mpwechat/savemenus',
-    method: 'put',
-    data:data,
-  })
-}
+}

src/router/modules/member.js

@@ -15,7 +15,7 @@ export default {
     {
       path: '/member/members',
       component: () => import('@/scrm_pages/members/members'),
-      name: 'memberslist',
+      name: 'memberslists',
       meta: { title: '会员管理', noCache: true }
     },
     {

src/router/modules/system.js

@@ -23,6 +23,19 @@ export default {
       name: 'weixinMpMenus',
       meta: { title: '公众号菜单', noCache: true }
     },
+    {
+      path: '/weixinmp/reply/subscribe',
+      component: () => import('@/scrm_pages/weixinmp/subscribereply'),
+      name: 'weixinAutoReply',
+      meta: { title: '自动回复', noCache: true }
+    },
+    {
+      path: '/weixinmp/reply/keyword',
+      component: () => import('@/scrm_pages/weixinmp/keywordreply'),
+      name: 'weixinKeywordReply',
+      hidden: true,
+      meta: { title: '关键词回复', noCache: true }
+    },
     {
       path: '/Systemsetting/staffmanagement',
       component: () => import('@/scrm_pages/Systemsetting/staffmanagement'),

src/scrm_pages/weixinmp/components/CreateKWReplyForm.vue

@@ -0,0 +1,101 @@
+<template>
+    <div id="create-kw-reply-form-box">
+        <el-dialog title="添加关键词回复" :visible.sync="createKWReplyFormVisible" width="700px" >
+            <el-form ref="replyForm" :rules="replyRules" :model="form" label-width="90px">
+                <el-form-item label="规则名称:" required prop="message_regular_name">
+                    <el-input v-model="form.message_regular_name"></el-input>
+                </el-form-item>
+                <el-form-item label="模式:" required prop="message_key_type">
+                    <el-radio-group v-model="form.message_key_type">
+                        <el-radio :label="item.id" :value="item.id" v-for="(item, index) in keyTypeOptions" :key="index" >{{item.name}}</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="关键字:" required prop="message_key_name">
+                    <el-input v-model="form.message_key_name"></el-input>
+                </el-form-item>
+                <el-form-item label="回复内容:" required prop="message_content">
+                    <el-input v-model="form.message_content" type="textarea" rows="4"></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="createKWReplyFormVisible = false">取消</el-button>
+                <el-button
+                type="primary"
+                @click="submitForm('replyForm')"
+                >保 存
+                </el-button>
+            </div>
+        </el-dialog>  
+    </div>
+</template>
+
+<script>
+import {CreateKeyWordReply} from "@/api/mpwechat/mpreply";
+
+export default {
+    name:'CreateReplyForm',
+    props:{
+        replysData:{
+            type: Array,
+            default: function () {
+                return [];
+            }
+        },
+    },
+    data(){
+        return {
+            createKWReplyFormVisible:false,
+            keyTypeOptions:[
+                {id:1, name:'半匹配'},
+                {id:2, name:'全匹配'},
+            ],
+            replyRules: {
+                message_regular_name: [{required: true, message: "请填写规则名称",},],
+                message_key_type: [{required: true, message: "请选择模式",},],
+                message_key_name: [{required: true, message: "请填写关键字",},],
+                message_content: [{required: true, message: "请填写回复内容",},],
+            },
+            form:{
+                message_regular_name:'',
+                message_key_type:1,
+                message_key_name:'',
+                message_content:'',
+            },
+            
+        }
+    },
+    methods:{
+        open:function(){
+            this.resetForm("replyForm");
+            this.createKWReplyFormVisible = true;
+        },
+        resetForm(formName) {
+            if (typeof(this.$refs[formName]) !='undefined') {
+                this.$refs[formName].resetFields();
+            }
+        },
+        submitForm(formName){
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    CreateKeyWordReply(this.form).then(response=>{
+                        var res = response.data;
+                        if(res.state === 1) {
+                            var message = res.data.message;
+                            this.replysData.unshift(message);
+                            this.resetForm("replyForm");
+                            this.createKWReplyFormVisible = false;
+                            this.$message.success("添加成功");
+                        }else {
+                            this.$message.error(res.msg);
+                        }
+                    }).catch(e=>{});
+
+                } else {
+                    return false;
+                }
+            });
+        },
+    }
+}
+</script>
+

src/scrm_pages/weixinmp/components/EditKWReplyForm.vue

@@ -0,0 +1,105 @@
+<template>
+    <div id="edit-kw-reply-form-box">
+        <el-dialog title="编辑关键词回复" :visible.sync="editKWReplyFormVisible" width="700px" >
+            <el-form ref="replyForm" :rules="replyRules" :model="form" label-width="90px">
+                <el-form-item label="规则名称:" required prop="message_regular_name">
+                    <el-input v-model="form.message_regular_name"></el-input>
+                </el-form-item>
+                <el-form-item label="模式:" required prop="message_key_type">
+                    <el-radio-group v-model="form.message_key_type">
+                        <el-radio :label="item.id" :value="item.id" v-for="(item, index) in keyTypeOptions" :key="index" >{{item.name}}</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="关键字:" required prop="message_key_name">
+                    <el-input v-model="form.message_key_name"></el-input>
+                </el-form-item>
+                <el-form-item label="回复内容:" required prop="message_content">
+                    <el-input v-model="form.message_content" type="textarea" rows="4"></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="editKWReplyFormVisible = false">取消</el-button>
+                <el-button
+                type="primary"
+                @click="submitForm('replyForm')"
+                >保 存
+                </el-button>
+            </div>
+        </el-dialog>  
+    </div>
+</template>
+
+<script>
+import {EditKeyWordReply} from "@/api/mpwechat/mpreply";
+
+export default {
+    name:'EditReplyForm',
+    props:{
+        replysData:{
+            type: Array,
+            default: function () {
+                return [];
+            }
+        },
+        replyIndex:{
+            type:Number,
+            default:-1,
+        },
+        form:{
+            id:0,
+            message_regular_name:'',
+            message_key_type:1,
+            message_key_name:'',
+            message_content:'',
+        },
+    },
+    data(){
+        return {
+            editKWReplyFormVisible:false,
+            keyTypeOptions:[
+                {id:1, name:'半匹配'},
+                {id:2, name:'全匹配'},
+            ],
+            replyRules: {
+                message_regular_name: [{required: true, message: "请填写规则名称",},],
+                message_key_type: [{required: true, message: "请选择模式",},],
+                message_key_name: [{required: true, message: "请填写关键字",},],
+                message_content: [{required: true, message: "请填写回复内容",},],
+            },
+            
+        }
+    },
+    methods:{
+        open:function(){
+            this.editKWReplyFormVisible = true;
+        },
+        resetForm(formName) {
+            if (typeof(this.$refs[formName]) !='undefined') {
+                this.$refs[formName].resetFields();
+            }
+        },
+        submitForm(formName){
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    EditKeyWordReply(this.form.id, this.form).then(response=>{
+                        var res = response.data;
+                        if(res.state === 1) {
+                            var message = res.data.message;
+                            this.replysData.splice(this.replyIndex, 1, message);
+                            this.resetForm("replyForm");
+                            this.editKWReplyFormVisible = false;
+                            this.$message.success("编辑成功");
+                        }else {
+                            this.$message.error(res.msg);
+                        }
+                    }).catch(e=>{});
+
+                } else {
+                    return false;
+                }
+            });
+        },
+    }
+}
+</script>
+

src/scrm_pages/weixinmp/components/replyNav.vue

@@ -0,0 +1,30 @@
+<template>
+    <el-tabs v-model="tabActiveName" @tab-click="handleTabClick" style="margin-bottom:10px">
+        <el-tab-pane label="关键词回复" name="keyword"></el-tab-pane>
+        <el-tab-pane label="关注后回复" name="subscribe"></el-tab-pane>
+    </el-tabs>
+</template>
+<script>
+export default {
+    props:{
+        activeName:{
+            type:String,
+            default: 'subscribe'
+        }
+    },
+    data(){
+        return{
+            tabActiveName:'subscribe',
+        }
+    }, 
+    methods:{
+        handleTabClick(tab, event) {
+            this.$router.push({ path: "/weixinmp/reply/"+this.tabActiveName });
+        }
+    },
+    created(){
+        this.tabActiveName = this.activeName
+    },
+}
+</script>
+

src/scrm_pages/weixinmp/keywordreply.vue

@@ -0,0 +1,234 @@
+<template>
+  <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>
+    </div>
+    <div class="app-container">
+        <reply-nav activeName="keyword"></reply-nav>
+        <div style="margin-bottom: 10px">
+            <el-row :gutter="24">
+                <el-col :span="8">
+                    <el-input style="width: 300px" v-model="listQuery.search" placeholder="请输入您需要搜索的内容"></el-input>
+                    <el-button type="primary"  icon="el-icon-search" @click="changeKey">搜索</el-button>
+                </el-col>
+            </el-row>
+        </div>
+        <div class="filter-container" style="margin-top: 10px;margin-left: 5px">
+            <el-checkbox style="width: 30px" @change="changeCheck" v-model="checkAllStatus">全选</el-checkbox>
+            <el-button size="small" icon="el-icon-delete" @click="openDeleteReplys">批量删除</el-button>
+        </div>
+        <el-table ref="multipleTable"  @selection-change="handleSelectionChange"  :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}" :data="messagesData" border fit highlight-current-row  style="width: 100%;margin-top: 10px;">
+            <el-table-column
+                align="center"
+                type="selection"
+                width="55">
+             </el-table-column>
+            <el-table-column label="关键词" align="center">
+                <template slot-scope="scope">
+                    {{scope.row.message_key_name}}
+                </template>
+            </el-table-column>
+            <el-table-column label="回复内容" align="center">
+                <template slot-scope="scope">
+                <span>{{scope.row.message_content}}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="模式" align="center">
+                <template slot-scope="scope">
+                <span>{{keyTypeName(scope.row.message_key_type)}}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center">
+                <template slot-scope="scope">
+                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
+                        <el-button size="mini" type="primary" icon="el-icon-edit-outline" @click="openEdit(scope.row, scope.$index)" ></el-button>
+                    </el-tooltip>
+                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
+                        <el-button size="mini" type="danger" icon="el-icon-delete" @click="openDelete(scope.row, scope.$index)" ></el-button>
+                    </el-tooltip>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :page-sizes="[10,20,50,100]"
+            :page-size="10"
+            background
+            style="margin-top:20px;"
+            align="right"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total">
+        </el-pagination>
+        <!--添加-->
+        <create-k-w-reply-form ref="createKWReplyForm" :replysData="messagesData" ></create-k-w-reply-form>
+        <!--编辑-->
+        <edit-k-w-reply-form ref="editKWReplyForm" :replysData="messagesData" :replyIndex="replyIndex" :form="editForm"></edit-k-w-reply-form>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {GetKeyWordReplys,DeleteReplys} from "@/api/mpwechat/mpreply";
+  import BreadCrumb from '../components/bread-crumb';
+  import CreateKWReplyForm from './components/CreateKWReplyForm';
+  import EditKWReplyForm from './components/EditKWReplyForm';
+import replyNav from "./components/replyNav";
+
+  export default {
+    name: 'keywordreply',
+    components:{
+      BreadCrumb,
+      replyNav,
+      CreateKWReplyForm,
+      EditKWReplyForm,
+    },
+    data(){
+      return{
+        crumbs: [
+        { path: false, name: "系统设置" },
+        { path: false, name: "关键词回复" }
+        ],
+        total:0,
+        listQuery:{
+            page:1,
+            limit:10,
+            search:'',
+        },
+        checkAllStatus:false,
+        selectedReplys:[],
+        messagesData:[],
+        replyIndex:-1,
+        editForm:{
+            id:0,
+            message_regular_name:'',
+            message_key_type:1,
+            message_key_name:'',
+            message_content:'',
+        },
+      }
+    },
+    methods:{
+        openCreate:function(){
+          this.$refs.createKWReplyForm.open();
+        },
+        openEdit:function(row,index){
+            this.replyIndex = index;
+            for (const key in this.editForm) {
+              this.editForm[key] = row[key];
+            }
+            this.$refs.editKWReplyForm.open();
+        },
+        openDeleteReplys:function(){
+          if (this.selectedReplys.length==0) {
+            this.$message.error("请选择要删除的回复");
+            return false;
+          }
+
+          this.$confirm('确认要删除所选的回复吗？<br>删除后，回复将无法恢复', '删除提示', {
+            dangerouslyUseHTMLString:true,
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            var ids = [];
+            var idMap = {};
+            for (const index in this.selectedReplys) {
+              ids.push(this.selectedReplys[index].id);
+              idMap[this.selectedReplys[index].id] = this.selectedReplys[index].id;
+            }
+            DeleteReplys({ids:ids}).then(response=>{
+              var res = response.data;
+              if (res.state === 1) {
+                var dataLength = this.messagesData.length;
+                for (let index = dataLength-1; index >= 0; index--) {
+                  if(this.messagesData[index].id in idMap) {
+                    this.messagesData.splice(index, 1);
+                  }                  
+                }
+                this.$message.success("删除成功");
+              }else {
+                this.$message.error(res.msg);
+              }
+            }).catch(e=>{});
+          }).catch(() => {
+            return false        
+          });
+        },
+        openDelete:function(row,index){
+          this.$confirm('确认要删除该回复吗？<br>删除后，该回复将无法恢复', '删除提示', {
+            dangerouslyUseHTMLString:true,
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            var ids = [];
+            ids.push(row.id);
+            DeleteReplys({ids:ids}).then(response=>{
+              var res = response.data;
+              if (res.state === 1) {
+                this.messagesData.splice(index, 1);
+                this.$message.success("删除成功");
+              }else {
+                this.$message.error(res.msg);
+              }
+            }).catch(e=>{});
+          }).catch(() => {
+            return false        
+          });
+        },
+        changeCheck:function(){
+          this.$refs.multipleTable.clearSelection();
+          if (this.checkAllStatus) {
+            this.$refs.multipleTable.toggleAllSelection();
+          }
+        },
+        handleSelectionChange:function (val) {
+          this.selectedReplys = val;
+        },
+        handleSizeChange(limit) {
+            this.listQuery.limit = limit;
+            this.GetKeyWordReplys();
+        },
+        handleCurrentChange(page) {
+            this.listQuery.page = page;
+            this.GetKeyWordReplys();
+        },
+        changeKey(){
+            this.GetKeyWordReplys();
+        },
+        keyTypeName:function(type){
+          return type == 1?'半匹配':'全匹配';
+        },
+        GetKeyWordReplys(){
+            GetKeyWordReplys(this.listQuery).then(response=>{
+                var res = response.data;
+                if(res.state===1) {
+                    this.messagesData = res.data.messages;
+                    this.total = res.data.total;
+                }
+            }).catch(e=>{})
+        }
+    },
+    computed:{
+    },
+    created(){
+        this.GetKeyWordReplys();
+    }
+  }
+</script>
+
+<style scoped>
+  /*.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>

src/scrm_pages/weixinmp/menus.vue

@@ -4,7 +4,7 @@
       <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" >停用菜单</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">
@@ -41,7 +41,7 @@
                             </div> 
                         </li>
 
-                          <li class="jsAddMenu pre_menu_li" v-show="menus.button.length<3">
+                          <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_">
@@ -84,7 +84,7 @@
                   <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="changeMenuType">
+                          <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>
@@ -92,13 +92,41 @@
                         <div class="inner send_message " v-show="menuType==1">
                             <div class="send_message_tit">
                                 <div class="send_nav">
-                                    <i class="ico_size"></i>
-                                    文字
+                                    <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 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>
+                            <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"></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>
+                            </div>
                         </div>
                         <div class="inner  jump_page" v-show="menuType==2">
                             <span class="tips_size">订阅者点击该子菜单会跳到以下链接</span>
@@ -141,8 +169,10 @@
 </template>
 
 <script>
+import axios from 'axios';
 import BreadCrumb from "../components/bread-crumb";
-import {GetAuthorizationInfo,GetMenus,SaveMenus} from "@/api/mpwechat/mpwechat";
+import {GetAuthorizationInfo} from "@/api/mpwechat/mpwechat";
+import {GetMenus,SaveMenus,DeleteMenu} from "@/api/mpwechat/mpmenus";
 export default {
   name: "menus",
   components: {
@@ -159,10 +189,12 @@ export default {
         {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:'',
@@ -172,6 +204,7 @@ export default {
         message:'',
         sub_button:[],
         media_id:'',
+        media_url:'',
       },
       menuType:0,
       currentPatient:-1,
@@ -228,6 +261,57 @@ export default {
           this.$message.error(res.msg);
         }
       }).catch(e=>{});
+    },
+     handleMediaSuccess:function(res, file) {
+       console.log(res, file);
+      },
+      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;
@@ -309,6 +393,8 @@ export default {
               message:'',
               sub_button:[],
               media_id:'',
+              media_url:'',
+              big_type:0
             };
           }
         }
@@ -323,6 +409,7 @@ export default {
             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') {
@@ -333,6 +420,7 @@ export default {
               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') {
@@ -367,10 +455,29 @@ export default {
           break;
       }
     },
-    changeMenuType:function(value){
+    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:
-          this.currentMenu.type = 'click';
+          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';
@@ -382,6 +489,14 @@ export 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;
@@ -395,6 +510,8 @@ export default {
         message:'',
         sub_button:[],
         media_id:'',
+        media_url:'',
+        big_type:0,
       };
       for (const key in node) {
         this.currentMenu[key] = node[key]; 
@@ -567,8 +684,10 @@ export default {
       }
     },  
     '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";
@@ -577,6 +696,7 @@ export default {
         }
       } 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";
@@ -630,7 +750,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style >
 #winxin-menus-box {
   font-size: 14px;
   color: #485b6d;
@@ -929,6 +1049,7 @@ export default {
 }
 #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;
@@ -984,6 +1105,46 @@ export default {
 #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:hover {
+  background:#c0c8d4;
+}  */
+#winxin-menus-box .mediaID-item i {
+  display: block;
+}
+#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: 55px;
+  height: 55px;
+  line-height: 55px;
+  text-align: center;
+}
+#winxin-menus-box .mediaID-item  .media {
+  width: 55px;
+  height: 55px;
+  display: block;
+}
+
 /*.app-container .cell.clearfix .time ul li {*/
 /*float: left;*/
 /*list-style: none;*/

src/scrm_pages/weixinmp/subscribereply.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="main-contain">
+    <div class="position">
+      <bread-crumb :crumbs="crumbs"></bread-crumb>
+    </div>
+    <div class="app-container" id="winxin-subscribe-replu-box">
+      <reply-nav activeName="subscribe"></reply-nav>
+      <el-form ref="form" :model="form" >
+        <el-form-item label="">
+          <el-input type="textarea" v-model="form.message_content" rows='5'></el-input>
+        </el-form-item>
+        <el-form-item>
+          <!-- <el-col :span="24" style="text-align: right;"> -->
+            <el-button type="primary" align="right" @click="saveReply">保存</el-button>
+          <!-- </el-col> -->
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import BreadCrumb from "../components/bread-crumb";
+import replyNav from "./components/replyNav";
+import {GetAuthorizationInfo} from "@/api/mpwechat/mpwechat";
+import {GetSubscribeRplay,SaveSubscribeRplay} from "@/api/mpwechat/mpreply";
+
+export default {
+  name: "subscribereply",
+  components: {
+    BreadCrumb,
+    replyNav,
+  },
+  data() {
+    return {
+      crumbs: [
+        { path: false, name: "系统设置" },
+        { path: false, name: "关注后回复" }
+      ],
+      initReply:false,
+      form:{
+        'message_content':'',
+      },
+    };
+  },
+  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.initReply = true;
+            }
+          }else {
+              this.$message.error("公众号未授权");
+              this.$router.push({path:"/weixinmp/authorization"})
+          }
+        }else {
+          this.$message.error(res.msg);
+        }
+      }).catch(e=>{});
+    },
+    GetSubscribeRplay:function(){
+      GetSubscribeRplay().then(response=>{
+        var res = response.data;
+        if (res.state==1) {
+          if (res.data.message) {
+            this.form.message_content = res.data.message.message_content;
+          }
+        }else {
+          this.$message.error(res.msg);
+        }
+      }).catch(e=>{});
+    },
+    saveReply:function(){
+      SaveSubscribeRplay(this.form).then(response=>{
+        var res = response.data;
+        if (res.state === 1) {
+          this.$message.success('保存成功');
+        }else {
+          this.$message.error(res.msg);
+        }
+      }).catch(e=>{});
+    }
+  },
+  created() {
+    this.GetAuthorizationInfo();
+  },
+  computed:{
+  },
+  watch:{
+    'initReply':function(){
+      this.GetSubscribeRplay();
+    }
+  },
+};
+</script>
+
+<style scoped>
+/*.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>