公众号菜单：上传微信公众号素材永久图片，图库

index.html

     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="renderer" content="webkit">
+    <meta name=”referrer” content=”never”>
+    <meta name="referrer" content="no-referrer"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <title>血透管理-酷医云</title>
   </head>

src/api/mpwechat/material.js

+import request from '@/utils/request'
+
+export function GetMaterials(params) {
+    return request({
+        url: '/api/mpwechat/media/material',
+        method: 'get',
+        params:params
+    })
+}

src/scrm_pages/contactBox/index.vue

+<template>
+    <div class="contact-box" id="contact-box">
+        <div class="contact-box-item msg-box" >
+            <div class="box-btn " @click="showMsgBox=true">
+                <i class="el-icon-service"></i>
+                <span>在线客服</span>
+            </div>
+            <div class="contact-info-box" v-show="!showMsgBox">
+                点击打开在线客服
+            </div>
+            <div class="contact-msg-box" v-show="showMsgBox">
+                <div class="msg-box-panel">
+                    <div class="panel-header">
+                        <i class="el-icon-close kf-close" @click="showMsgBox=false"></i>
+                        <p class="kf-h-line">酷医云在线客服</p>
+                        <div class="clearfix"></div>
+                    </div>
+                    <div class="panel-body">
+                        <ul class="msg-inner scroll-y">
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                            <li>1</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="contact-box-item phone-box">
+            <div class="box-btn">
+                <i class="el-icon-phone-outline"></i>
+                <span>客服电话</span>
+            </div>
+            <div class="contact-phone-box">
+                <i class="el-icon-phone-outline"></i>
+                <span>0755-86526342</span>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name:'contactBox',
+    data(){
+        return{
+            showMsgBox:false,
+        }
+    }
+
+}
+</script>
+
+<style scoped>
+.contact-box {
+    position: fixed;
+    right: 12px;
+    bottom: 10%;
+    margin-top: -100px;
+    z-index: 99999;
+}
+    
+.contact-box .contact-box-item{
+    position: relative;
+    margin-bottom: 6px;
+    border: 1px solid #999;
+}
+
+.contact-box .contact-box-item .box-btn {
+    width: 48px;
+    height: 48px;
+    text-align: center;
+    display: block;
+    position: relative;
+    background: #fff;
+    cursor: pointer;
+}
+.contact-box .contact-box-item .box-btn i{
+    font-size:30px; 
+    margin: 9px;
+    color: #59a3ec;
+    display: inline-block;
+}
+.contact-box .contact-box-item .box-btn:hover {
+    background: #5aa6f1;
+}
+.contact-box .box-btn span{
+    display: none;
+}
+
+.contact-box .box-btn:hover span{
+    display: block;
+    color:#fff;
+    padding: 8px;
+    font-size: 14px;
+}
+.contact-box .box-btn:hover i{
+    display: none;
+}
+.contact-box .contact-phone-box {
+    border: 1px solid #999;
+    position: absolute;
+    bottom: 0px;
+    right: 56px;
+    height: 48px;
+    /* display: block; */
+    background: #fff;
+    width: 230px;
+    display:none;
+    align-items: center;
+}
+.contact-box .contact-phone-box i {
+    color: #59a3ec;
+    font-size:30px; 
+    margin: 9px;
+}
+.contact-box .phone-box:hover .contact-phone-box{
+    display:flex;
+}
+
+.contact-box .contact-phone-box span {
+    font-size:20px; 
+    margin-left: 15px;
+    color: #485b6d;
+}
+
+.contact-box .contact-info-box {
+    border: 1px #e5e5e5 solid;
+    position: absolute;
+    bottom: 0px;
+    right: 56px;
+    display: none;
+    background: #fff;
+    width: 175px;
+    z-index: 1000000;
+}
+.contact-box .msg-box:hover .contact-info-box{
+    display:block;
+    color: #485b6d;
+    font-size:20px; 
+    padding: 5px;
+}
+
+.contact-box .contact-msg-box {
+    border: 1px #e5e5e5 solid;
+    position: absolute;
+    bottom: 0px;
+    right: 56px;
+    background: #fff;
+}
+.contact-box .msg-box-panel {
+    width: 408px;
+    background-color: #fff;
+    position: relative;
+}
+.contact-box .panel-header {
+    border-bottom: 1px #e5e5e5 solid;
+}
+.contact-box .panel-header .kf-close {
+    width: 30px;
+    height: 20px;
+    float: right;
+    cursor: pointer;
+    margin: 12px 0 0 0;
+}
+.contact-box .panel-header .kf-h-line {
+    float: left;
+    color: #485b6d;
+    font-size: 16px;
+    line-height: 40px;
+    height: 40px;
+    padding-left: 10px;
+}
+.contact-box .panel-body {
+    overflow-x: visible;
+    overflow-y: auto;
+    height: 182px;
+}
+
+.contact-box .msg-inner {
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: 100%;
+    border-bottom: 1px #e5e5e5 solid;
+}
+.contact-box .scroll-y::-webkit-scrollbar {
+    width: 6px;
+    height: 3px;
+}
+.contact-box .scroll-y::-webkit-scrollbar-thumb {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
+    box-shadow: inset 0 0 6px rgba(0,0,0,.1);
+    border-radius: 2px;
+}
+.contact-box .scroll-y::-webkit-scrollbar-track {
+    border-radius: 2px;
+}
+</style>

src/scrm_pages/weixinmp/components/ImageMaterialBox.vue

+<template>
+    <div id="image-material-box">
+        <el-dialog title="选择图片" :visible.sync="ImageMaterialBoxVisible" width="900px" >
+            <el-row>
+                <el-col :span="24" style="text-align: right;" >
+                    <el-upload
+                        class="media-uploader"
+                        :action="addMaterialUrl"
+                        :show-file-list="false"
+                        :with-credentials='true'
+                        :on-success="handleMediaSuccess"
+                        :before-upload="beforeMediaUpload"
+                        >
+                        <el-button type="primary" size="small" icon="el-icon-upload" >上传图片</el-button>
+                    </el-upload>
+                </el-col>
+            </el-row>
+            <div class="material-box">
+                <div class="mateial-item" v-for="(media, index) in medias" :key="index" @click="selectThis(media.media_id, media.media_url)">
+                    <div class="mateial-item-image" :class="selectId==media.media_id?'active':''">
+                        <img :src="'http://img01.store.sogou.com/net/a/04/link?appid=100520029&url='+media.media_url" alt="" srcset="">
+                    </div>
+                </div>
+            </div>
+            <el-row style="clear:both">
+                <el-pagination
+                    @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange"
+                    :page-sizes="[20,50,100]"
+                    :page-size="20"
+                    :current-page="pageParams.page"
+                    background
+                    style="margin-top:20px;"
+                    align="right"
+                    layout="total, sizes, prev, pager, next, jumper"
+                    :total="total">
+                </el-pagination>
+            </el-row>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="ImageMaterialBoxVisible = false">取消</el-button>
+                <el-button
+                type="primary"
+                @click="submitSelect"
+                >保 存
+                </el-button>
+            </div>
+        </el-dialog>  
+    </div>
+</template>
+
+<script>
+
+import {GetMaterials} from "@/api/mpwechat/material";
+
+export default {
+    name:'imageMaterialBox',
+    props:{
+        currentMenu:{
+            big_type:0,
+            type:'',
+            name:'',
+            url:'',
+            appid:'',
+            pagepath:'',
+            key:'',//key规则：V_[number]_click;VC_[number]_click
+            message:'',
+            sub_button:[],
+            media_id:'',
+            media_url:'',
+        },
+    },
+    data(){
+        return {
+            addMaterialUrl: process.env.BASE_API + '/api/mpwechat/media/add_material',
+            ImageMaterialBoxVisible:false,
+            medias:[],
+            selectId:'',
+            selectUrl:'',
+            total:0,
+            pageParams:{
+                page:1,
+                limit:20,
+                media_type:'image',
+            },
+        }
+    },
+    methods:{
+        open:function(){
+            
+            this.pageParams={
+                page:1,
+                limit:20,
+                media_type:'image',
+            },
+            
+            this.selectId='',
+            this.selectUrl='',
+            this.GetMaterials();
+            this.ImageMaterialBoxVisible = true;
+        },
+        submitSelect:function(){
+            if (this.selectId.length==0) {
+                this.$message.error('未选择图片');
+                return false;
+            }
+            this.currentMenu.media_id = this.selectId;
+            this.currentMenu.media_url = 'http://img01.store.sogou.com/net/a/04/link?appid=100520029&url=' +  this.selectUrl;
+            this.ImageMaterialBoxVisible = false;
+        },
+        selectThis(id, url) {
+            this.selectId = id;
+            this.selectUrl = url;
+        },
+        handleSizeChange(limit) {
+            this.pageParams.limit = limit;
+            this.GetMaterials();
+        },
+        handleCurrentChange(page) {
+            this.pageParams.page = page;
+            this.GetMaterials();
+        },
+        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;
+                this.pageParams.page = 1;
+                
+                this.selectId='',
+                this.selectUrl='',
+                this.GetMaterials();
+            }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;
+        },
+        GetMaterials:function(){
+            GetMaterials(this.pageParams).then(response=>{
+                var res = response.data;
+                if (res.state==1) {
+                    this.medias = res.data.medias;
+                    this.total = res.data.total;
+                }
+            }).catch(e=>{});
+        }
+    }
+}
+</script>
+
+<style >
+#image-material-box .mateial-item {
+    float: left;
+    margin: 6px;
+}
+
+#image-material-box  .mateial-item-image {
+    width: 199px;
+    height: 90px;
+    position: relative;
+    border: none;
+    background: #dde1e4;
+    color: #58a2ec;
+    display: block;
+    padding: 4px;
+    line-height: 1.42857143;
+    background-color: #fff;
+    -webkit-transition: border .2s ease-in-out;
+    transition: border .2s ease-in-out;
+}
+
+#image-material-box  .mateial-item .active {
+    border: 1px solid rgb(68, 181, 73);
+}
+#image-material-box  .mateial-item-image img {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+</style>
+

src/scrm_pages/weixinmp/menus.vue

                               <el-row>
                                 <el-col :span="12" >
                                   <div class="mediaID-item">
-                                    <i class="el-icon-news"></i>
+                                    <i class="el-icon-news" @click="openMediaBox"></i>
                                     <span class="icon-name">从素材库选择</span>
                                   </div>
                                 </el-col>
                                   </div>
                                 </el-col>
                               </el-row>
+                              
+                            <span class="tips" id="acterrinfo"  >&nbsp;&nbsp;如果出现：此图片来自微信公众平台，未经允许不可引用！是正常情况</span>
+                              
                             </div>
                         </div>
                         <div class="inner  jump_page" v-show="menuType==2">
           </div>
       </div>
     </div>
+    <!--选择图片-->
+    <image-material-box ref="imageMaterialBox" :currentMenu="currentMenu"></image-material-box>
   </div>
 </template>
 
 <script>
-import axios from 'axios';
 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 {
         }
       }).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;
+    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;
-      },
+      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,
       }
       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;
     /* 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-icon {
   font-size: 28px;
   color: #8c939d;
-  width: 55px;
-  height: 55px;
-  line-height: 55px;
+  width: 155px;
+  height: 70px;
+  line-height: 70px;
   text-align: center;
 }
 #winxin-menus-box .mediaID-item  .media {
-  width: 55px;
-  height: 55px;
+  width: 155px;
+  height: 70px;
   display: block;
 }
 

src/views/layout/Layout.vue

     <div class="main-container">
       <tags-view></tags-view>
       <app-main></app-main>
+      <contact-box></contact-box>
     </div>
    </div>
   </div>
 
 <script>
 import { Navbar, Sidebar, AppMain, TagsView } from './components'
+import ContactBox from '@/scrm_pages/contactBox';
 import ResizeMixin from './mixin/ResizeHandler'
 
 export default {
     Navbar,
     Sidebar,
     AppMain,
-    TagsView
+    TagsView,
+    ContactBox,
   },
   mixins: [ResizeMixin],
   computed: {