添加小程序关键词链接回复

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/weChat/autoReply.vue

@@ -51,6 +51,17 @@
                     </div>
                   </el-card>
                 </div>
+                <div v-if="item.type === 'link'" class="news-media" style="display: inline-block;width: 150px;">
+                  <el-card :body-style="{ padding: '0px' }">
+                    <a :href="item.url" target="_blank" style="position: relative; color: #333; text-decoration: none;">
+                      <div style="margin: 3px;line-height: 2" class="ellip">{{item.title}}</div>
+                      <div class="f-bt" style="position: relative;margin-left: 3px;">
+                        <div style="color: #666;width: 63%;word-break: break-all;word-wrap: break-word;line-height: 1;">{{item.description}}</div>
+                        <img :src="item.thumb_url" style="width: 35%; height: auto"/>
+                      </div>
+                    </a>
+                  </el-card>
+                </div>
               </div>
             </el-form-item>
           </el-form>
@@ -118,17 +129,19 @@
       filters: {
         type(value){
           if (value === 'text') {
-              return '文本'
+            return '文本'
           } else if (value === 'voice') {
-              return '语音'
+            return '语音'
           } else if (value === 'video') {
-              return '视频'
+            return '视频'
           } else if (value === 'image') {
-              return '图片'
+            return '图片'
           } else if (value === 'news') {
-              return '图文'
+            return '图文'
+          } else if (value === 'link') {
+            return '链接'
           } else {
-              return val
+            return val
           }
         }
       },
@@ -269,4 +282,15 @@
     background-color: rgba(0,0,0,0.5);
     text-decoration: none;
   }
+  .f-bt {
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+  .ellip {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 </style>

src/components/weChat/autoReplyDialog.vue

@@ -52,6 +52,17 @@
                       </div>
                     </el-card>
                   </div>
+                  <div v-else-if="item.type === 'link'" class="news-media" style="display: inline-block">
+                    <el-card :body-style="{ padding: '0px' }">
+                      <a :href="item.url" target="_blank" style="position: relative; color: #333; text-decoration: none;">
+                        <div style="margin: 3px;line-height: 2" class="ellip">{{item.title}}</div>
+                        <div class="f-bt" style="position: relative;">
+                          <div style="color: #666;margin-left: 3px;word-wrap: break-word;word-break: break-all;width: 60%;">{{item.description}}</div>
+                          <img :src="item.thumb_url" style="width: 35%; height: auto"/>
+                        </div>
+                      </a>
+                    </el-card>
+                  </div>
                   <i class="el-icon-edit" @click="onEditText(item, index)"></i>
                   <i class="el-icon-delete" @click="onDelText(item, index)"></i>
                 </div>
@@ -75,6 +86,7 @@
                       <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-tab-pane v-if="form.key === 'mini_keywords_reply'" label="链接" name="link"></el-tab-pane>
                     </el-tabs>
                     <div v-if="showType" class="more-info clear-both">
                       <template v-if="type=== 'text'">
@@ -296,6 +308,31 @@
                           <page :total="total" v-model="nowPage" :limit="limit" @pageChange="onPageChange"/>
                         </div>
                       </template>
+                      <template v-if="type==='link'">
+                        <el-form-item label="标题">
+                          <el-input v-model="linkContent.title"></el-input>
+                        </el-form-item>
+                        <el-form-item label="描述">
+                          <el-input v-model="linkContent.description"></el-input>
+                        </el-form-item>
+                        <el-form-item label="跳转链接">
+                          <el-input v-model="linkContent.url"></el-input>
+                        </el-form-item>
+                        <el-form-item label="缩略图">
+                          <el-upload
+                            action="/api/public/upload/zone"
+                            :http-request="uploadFile"
+                            :class="{disabled:!uploadLinkShow}"
+                            :before-upload="beforeAvatarUpload"
+                            list-type="picture-card"
+                            :file-list="imageLinkList"
+                            :on-success="handleAvatarSuccess"
+                            :on-remove="handleRemove"
+                            :limit="1">
+                            <i class="el-icon-plus"></i>
+                          </el-upload>
+                        </el-form-item>
+                      </template>
                       <div class="tool_bar">
                         <el-button @click="close">取 消</el-button>
                         <el-button class="weui-desktop-btn weui-desktop-btn_primary" @click="confirm">确定</el-button>
@@ -357,6 +394,12 @@
           url: '',
           media_id: ''
         },
+        linkContent: {
+          title: '',
+          description: '',
+          url: '',
+          thumb_url: ''
+        },
         voiceContent:'',
         videoContent: '',
         newsContent: '',
@@ -377,7 +420,9 @@
           ]
         },
         imageList: [],
-        uploadShow: true
+        imageLinkList: [],
+        uploadShow: true,
+        uploadLinkShow: true
       }
     },
     components:{
@@ -448,6 +493,25 @@
         this.form = _form;
         this.showType = false;
       },
+      addLinkContent(type, title, description, url,thumb_url) {
+        let _form = this.form;
+        let _desc = _form.desc ? JSON.parse(_form.desc) : [];
+        let obj = {
+          type: type,
+          title: title,
+          description: description,
+          url: url,
+          thumb_url: thumb_url
+        };
+        if (this.editIndex > -1) {
+          _desc.splice(this.editIndex,1,obj);
+        } else {
+          _desc.push(obj);
+        }
+        _form.desc = JSON.stringify(_desc);
+        this.form = _form;
+        this.showType = false;
+      },
       initDialog(){
         this.show = this.dialogObj.show;
         if (this.dialogObj.id) {
@@ -479,11 +543,19 @@
           media_id: '',
           variable: ''
         };
+        this.linkContent = {
+          title: '',
+          description: '',
+          url: '',
+          thumb_url: ''
+        };
         this.imageList = [];
+        this.imageLinkList = [];
         this.teacher_id = '';
         this.start_at = '';
         this.showType = true;
         this.uploadShow = true;
+        this.uploadLinkShow = true;
       },
       onEditText(item, index) {
         this.title = '编辑回复';
@@ -491,6 +563,15 @@
         this.editIndex = index;
         if (this.type === 'text') {
           this.content=item.content;
+        } else if (this.type === 'link') {
+            this.linkContent = {
+              url: item.url,
+              title : item.title,
+              description: item.description,
+              thumb_url: item.thumb_url
+            };
+            this.imageLinkList = [];
+            this.uploadLinkShow = false;
         } else {
             if(item.content) {
               this.imageContent = {
@@ -518,6 +599,12 @@
         };
         this.teacher_id = '';
         this.start_at = '';
+        this.linkContent = {
+          url: '',
+          title : '',
+          description: '',
+          thumb_url: ''
+        };
         this.showType = false;
       },
       confirm(){
@@ -542,7 +629,37 @@
             let _mediaId = this.imageContent.media_id ? this.imageContent.media_id : '';
             this.addContent(this.type, _url, _mediaId,_myTeacher);
           }
-        }else if (this.type === 'news') {
+        } else if (this.type === 'link'){
+          if (!this.linkContent.title) {
+            this.$message({
+              showClose: true,
+              message: '请输入标题'
+            });
+            return;
+          }
+          if (!this.linkContent.description) {
+            this.$message({
+              showClose: true,
+              message: '请输入描述'
+            });
+            return;
+          }
+          if (!this.linkContent.url) {
+            this.$message({
+              showClose: true,
+              message: '请输入跳转链接'
+            });
+            return;
+          }
+          if (!this.linkContent.thumb_url) {
+            this.$message({
+              showClose: true,
+              message: '请上传缩略图'
+            });
+            return;
+          }
+          this.addLinkContent(this.type, this.linkContent.title, this.linkContent.description, this.linkContent.url,this.linkContent.thumb_url);
+        } else if (this.type === 'news') {
           if (!this.newsContent) {
             this.$message({
               showClose: true,
@@ -647,20 +764,42 @@
         this.content += '{my_teacher_alias}'
       },
       handleAvatarSuccess(res) {
-        this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
+        if (this.type === 'link') {
+          this.imageLinkList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
+        } else {
+          this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
+        }
       },
       beforeAvatarUpload(){
-        this.uploadShow = false
+        if (this.type === 'link') {
+          this.uploadLinkShow = false
+        } else {
+          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;
-        })
+        if (this.type === 'link') {
+          uploadFileApi({file:a.file,type:'local'}).then(res=>{
+            this.imageLinkList = [{name:res.url,url:process.env.IMAGE_URL_HEAD + res.url}]
+            this.loading = false;
+            this.$message({
+              type: 'success',
+              message: '上传成功!'
+            });
+            this.linkContent.thumb_url = process.env.IMAGE_URL_HEAD + res.url;
+          }).catch(()=>{
+            this.loading = false;
+          })
+        } else {
+          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;
@@ -682,7 +821,11 @@
         })
       },
       handleRemove(){
-        this.uploadShow = true
+        if (this.type === 'link') {
+          this.uploadLinkShow = true
+        } else {
+          this.uploadShow = true
+        }
       }
     },
     watch:{
@@ -907,6 +1050,17 @@
     background-color: rgba(0,0,0,0.5);
     text-decoration: none;
   }
+  .f-bt {
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+  .ellip {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 </style>
 <style>
   .disabled .el-upload--picture-card {