小程序图片回复

config/index.js

@@ -12,8 +12,8 @@ module.exports = {
     //本地代理设置
     proxyTable: {
       '/api': {
-        target: 'http://local.base-api.sing.com', // 接口的域名
-        // target: 'https://wechat-test.changchangenglish.com/',
+        // target: 'http://local.base-api.sing.com', // 接口的域名
+        target: 'https://wechat-test.changchangenglish.com/',
         changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
       }
     },

src/components/single/dialog.vue

@@ -131,7 +131,6 @@
             this.$refs['form'].validate((valid) => {
               if(valid){
                 if(this.imageList.length >0){
-                    console.log('this.imageList', this.imageList)
                   this.form.cover = this.imageList[0].name;
                 }
                 let json = this.form;
@@ -150,7 +149,6 @@
           case 1:
             this.$refs['form'].validate((valid) => {
               if(valid){
-                console.log('this.imageList', this.imageList)
                 if(this.imageList.length >0){
                   this.form.cover = this.imageList[0].name;
                 }

src/components/weChat/autoReplyDialog.vue

@@ -72,7 +72,7 @@
                     <el-tabs v-if="showType" v-model="type" type="card">
                       <el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="图文消息" name="news"></el-tab-pane>
                       <el-tab-pane label="文字" name="text"></el-tab-pane>
-                      <el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="图片" name="image"></el-tab-pane>
+                      <el-tab-pane label="图片" name="image"></el-tab-pane>
                       <el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="语音" name="voice"></el-tab-pane>
                       <el-tab-pane v-if="form.key !== 'mini_keywords_reply'" label="视频" name="video"></el-tab-pane>
                     </el-tabs>
@@ -103,18 +103,31 @@
                         </div>
                       </template>
                       <template v-if="type==='image'">
-                        <div v-if="imageContent.url" class="img">
+                        <div v-if="imageContent.url && form.key !== 'mini_keywords_reply'" class="img">
                           <img :src="imageContent.url"/>
                           <i class="el-icon-delete" @click="imageContent={url:'',media_id:''}"></i>
                         </div>
-                        <div v-if="imageContent.variable" class="img my-teacher">
+                        <div v-if="imageContent.variable && form.key !== 'mini_keywords_reply'" class="img my-teacher">
                           <div>老师二维码</div>
                           <i class="el-icon-delete" @click="imageContent={url:'',media_id:'',variable:''}"></i>
                         </div>
-                        <div class="display-b">
+                        <div class="display-b" v-if="form.key !== 'mini_keywords_reply'">
                           <div class="choose_item" style="color: #888;" @click="getMediaList('image')">+从素材库中选择</div>
                           <div class="choose_item" style="color: #888;" @click="addTeacherQrcode">+添加老师二维码</div>
                         </div>
+                        <el-upload
+                          v-if="form.key === 'mini_keywords_reply'"
+                          action="/api/public/upload/zone"
+                          :http-request="uploadFile"
+                          :class="{disabled:!uploadShow}"
+                          :before-upload="beforeAvatarUpload"
+                          list-type="picture-card"
+                          :file-list="imageList"
+                          :on-success="handleAvatarSuccess"
+                          :on-remove="handleRemove"
+                          :limit="1">
+                          <i class="el-icon-plus"></i>
+                        </el-upload>
                         <div v-if="showMedia && mediaList.length > 0">
                           <el-table
                             :data="mediaList"
@@ -306,7 +319,7 @@
 </template>
 
 <script>
-  import {updateConfigApi,saveConfigApi,getMediaListApi,getTeacherListApi} from "../../service/api";
+  import {updateConfigApi,saveConfigApi,getMediaListApi,getTeacherListApi,uploadFileApi} from "../../service/api";
   import page from '../framework/page'
   import emotion from '../framework/Emotion/index'
   export default {
@@ -362,7 +375,9 @@
           qr:[
             { required: true, message: '请输入二维码', trigger: 'change' }
           ]
-        }
+        },
+        imageList: [],
+        uploadShow: true
       }
     },
     components:{
@@ -438,7 +453,6 @@
         if (this.dialogObj.id) {
           this.id = this.dialogObj.id;
         }
-        console.log('this.dialogObj', this.dialogObj)
         this.form.value = this.dialogObj.value;
         this.form.desc = this.dialogObj.desc;
         if (this.dialogObj.key) {
@@ -465,9 +479,11 @@
           media_id: '',
           variable: ''
         };
+        this.imageList = [];
         this.teacher_id = '';
         this.start_at = '';
         this.showType = true;
+        this.uploadShow = true;
       },
       onEditText(item, index) {
         this.title = '编辑回复';
@@ -487,6 +503,10 @@
                 variable: item.variable
               };
             }
+            if(this.type === 'image' && this.form.key === 'mini_keywords_reply') {
+                this.imageList = [{name:'mini',url:item.content}]
+                this.uploadShow = false;
+            }
         }
         this.showType = true;
       },
@@ -626,6 +646,44 @@
       addTeacherAlias(){
         this.content += '{my_teacher_alias}'
       },
+      handleAvatarSuccess(res) {
+        this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
+      },
+      beforeAvatarUpload(){
+        this.uploadShow = false
+      },
+      uploadFile(a) {
+        this.loading = true;
+        this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
+        uploadFileApi({file:a.file,type:'mini'}).then(res=>{
+          this.uploadFileToQiniu(a, res);
+          this.loading = false;
+        }).catch(()=>{
+          this.loading = false;
+        })
+      },
+      uploadFileToQiniu(a, data) {
+        this.loading = true;
+        this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
+        uploadFileApi({file:a.file,type:'local'}).then(res=>{
+          this.imageList = [{name:res.url,url:process.env.IMAGE_URL_HEAD + res.url}]
+          this.loading = false;
+          this.$message({
+            type: 'success',
+            message: '上传成功!'
+          });
+          this.imageContent = {
+            url: process.env.IMAGE_URL_HEAD + res.url,
+            media_id: data.media_id,
+            name: res.url
+          }
+        }).catch(()=>{
+          this.loading = false;
+        })
+      },
+      handleRemove(){
+        this.uploadShow = true
+      }
     },
     watch:{
       dialogObj:{
@@ -850,3 +908,8 @@
     text-decoration: none;
   }
 </style>
+<style>
+  .disabled .el-upload--picture-card {
+    display: none !important;
+  }
+</style>

src/components/weChat/focusReplyDialog.vue

@@ -10,23 +10,36 @@
           <ul class="weui-desktop-msg-sender__tabs">
             <li v-if="dialogObj && dialogObj.key !== 'mini_auto_reply'" class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_appmsg" :class="type === 'news' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('news')">图文</li>
             <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_text" :class="type === 'text' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('text')">文字</li>
-            <li v-if="dialogObj && dialogObj.key !== 'mini_auto_reply'" class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_img" :class="type === 'image' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('image')">图片</li>
+            <li class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_img" :class="type === 'image' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('image')">图片</li>
             <li v-if="dialogObj && dialogObj.key !== 'mini_auto_reply'" class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_audio" :class="type === 'voice' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('voice')">语音</li>
             <li v-if="dialogObj && dialogObj.key !== 'mini_auto_reply'" class="weui-desktop-msg-sender__tab weui-desktop-msg-sender__tab_video" :class="type === 'video' ? 'weui-desktop-msg-sender__tab_selected' : ''" @click="onChangeType('video')">视频</li>
           </ul>
           <div class="inner-bottom">
             <div class="img-action" v-if="type === 'image'">
-              <template v-if="imageContent">
+              <template v-if="imageContent && dialogObj.key !== 'mini_auto_reply' ">
                 <div class="my-teacher" v-if="imageContent.variable">我的老师二维码</div>
                 <img style="max-width: 80%;" v-if="imageContent.content" :src="imageContent.content"/>
               </template>
               <div class="display-b">
-                <div class="img-create-access" v-if="!showMedia">
+                <div class="img-create-access" v-if="!showMedia && dialogObj && dialogObj.key !== 'mini_auto_reply'">
                   <a href="javascript:;" class="img-create-access__link" @click="getMediaList('image')">从素材库中选择</a>
                 </div>
-                <div class="img-create-access" v-if="!showMedia">
+                <div class="img-create-access" v-if="!showMedia && dialogObj && dialogObj.key !== 'mini_auto_reply'">
                   <a href="javascript:;" class="img-create-access__link" @click="addTeacherQrcode">添加老师二维码</a>
                 </div>
+                <el-upload
+                  v-if="dialogObj && dialogObj.key === 'mini_auto_reply'"
+                  action="/api/public/upload/zone"
+                  :http-request="uploadFile"
+                  :class="{disabled:!uploadShow}"
+                  :before-upload="beforeAvatarUpload"
+                  list-type="picture-card"
+                  :file-list="imageList"
+                  :on-success="handleAvatarSuccess"
+                  :on-remove="handleRemove"
+                  :limit="1">
+                  <i class="el-icon-plus"></i>
+                </el-upload>
               </div>
               <div v-if="showMedia && mediaList.length > 0">
                 <el-table
@@ -238,7 +251,7 @@
 </template>
 
 <script>
-    import {updateConfigApi,saveConfigApi,getMediaListApi,getConfigListApi,getTeacherListApi} from "../../service/api";
+    import {updateConfigApi,saveConfigApi,getMediaListApi,getConfigListApi,getTeacherListApi,uploadFileApi} from "../../service/api";
     import page from '../framework/page'
     import page2 from '../framework/page'
     import page3 from '../framework/page'
@@ -289,7 +302,9 @@
             qr:[
               { required: true, message: '请输入二维码', trigger: 'change' }
             ]
-          }
+          },
+          imageList: [],
+          uploadShow: true
         }
       },
       components:{
@@ -353,7 +368,11 @@
                 obj.variable = this.list[this.index].variable
               }
               if (this.type === 'image') {
-                this.imageContent = obj
+                this.imageContent = obj;
+                if(this.dialogObj.key === 'mini_auto_reply') {
+                  this.imageList = [{name:'mini-image',url:obj.content}];
+                  this.uploadShow = false;
+                }
               } else if (this.type ==='news') {
                 this.newsContent = obj
               } else if (this.type === 'voice') {
@@ -514,7 +533,45 @@
           } else{
             this.imageContent = obj
           }
-
+        },
+        handleAvatarSuccess(res) {
+          this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
+        },
+        beforeAvatarUpload(){
+          this.uploadShow = false
+        },
+        uploadFile(a) {
+          this.loading = true;
+          this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
+          this.fileUid = a.file.uid;
+          uploadFileApi({file:a.file,type:'mini'}).then(res=>{
+            this.uploadFileToQiniu(a, res);
+            this.loading = false;
+          }).catch(()=>{
+            this.loading = false;
+          })
+        },
+        uploadFileToQiniu(a, data) {
+          this.loading = true;
+          this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
+          uploadFileApi({file:a.file,type:'local'}).then(res=>{
+            this.imageList = [{name:res.url,url:process.env.IMAGE_URL_HEAD + res.url}]
+            this.loading = false;
+            this.$message({
+              type: 'success',
+              message: '上传成功!'
+            });
+          this.imageContent = {
+              type: 'image',
+              content: process.env.IMAGE_URL_HEAD + res.url,
+              media_id: data.media_id
+          }
+          }).catch(()=>{
+            this.loading = false;
+          })
+        },
+        handleRemove(){
+          this.uploadShow = true
         }
       }
     }
@@ -776,4 +833,7 @@
     display: block;
     clear: both;
   }
+  .disabled .el-upload--picture-card {
+    display: none !important;
+  }
 </style>