关键词回复添加图文音视频

src/components/weChat/autoReply.vue

@@ -13,12 +13,40 @@
           <el-form label-position="top"  class="demo-table-expand">
             <el-form-item label="回复内容">
               <div v-for="(item, index) in JSON.parse(props.row.desc)">
+                回复{{index+1}}({{item.type | type}})：
                 <span v-if="item.content && item.type==='text'">
-                  回复{{index+1}}：
                   <span v-html="item.content.replace(/\/[\u4E00-\u9FA5]{1,3}/gi, emotion)"></span>
                 </span>
                 <span v-if="item.content && item.type==='image'">回复{{index+1}}：<img class="img" :src="item.content"/></span>
-                <span v-if="item.variable">回复{{index+1}}：老师二维码</span>
+                <span v-if="item.type==='image' && item.variable">回复{{index+1}}：老师二维码</span>
+                <a v-if="item.type === 'video'" :href="item.content.down_url" target="_blank">{{item.content.title}}</a>
+                <div v-if="item.type==='news' && item.content && item.content.news_item" class="news-media" style="display: inline-block;width: 150px;">
+                  <el-card :body-style="{ padding: '0px' }">
+                    <div v-for="(child, childIndex) in item.content.news_item" style="position: relative">
+                      <div v-if="item.content.news_item.length === 1" class="single-cover">
+                        <div class="title">{{child.title}}</div>
+                        <img :src="child.thumb_url" style="width: 100%;margin-top: 20px;"/>
+                        <div class="digest">{{child.digest}}</div>
+                        <a class="preview" :href="child.url" target="_blank">
+                          预览文章
+                        </a>
+                      </div>
+                      <div v-else-if="item.content.news_item.length > 1" class="clear-both bottomCover" style="position: relative">
+                        <div v-if="childIndex === 0" class="muti-cover">
+                          <img style="width: 100%;margin-top: 20px;" :src="child.thumb_url"/>
+                          <div class="bottom-title">{{child.title}}</div>
+                        </div>
+                        <div class="next-cover clear-both" v-else>
+                          <span class="next-title">{{child.title}}</span>
+                          <img class="next-img" :src="child.thumb_url"/>
+                        </div>
+                        <a class="preview" :href="child.url" target="_blank">
+                          预览文章
+                        </a>
+                      </div>
+                    </div>
+                  </el-card>
+                </div>
               </div>
             </el-form-item>
           </el-form>
@@ -82,6 +110,23 @@
       mounted(){
         this.getList()
       },
+      filters: {
+        type(value){
+          if (value === 'text') {
+              return '文本'
+          } else if (value === 'voice') {
+              return '语音'
+          } else if (value === 'video') {
+              return '视频'
+          } else if (value === 'image') {
+              return '图片'
+          } else if (value === 'news') {
+              return '图文'
+          } else {
+              return val
+          }
+        }
+      },
       methods: {
         // 将匹配结果替换表情图片
         emotion (res) {
@@ -139,4 +184,78 @@
   .img {
     width: 10%;
   }
+  .news-media {
+    padding: 10px;
+    width: 25%;
+  }
+  .news-media img{
+    width: 100%;
+  }
+  .s-news img {
+    width: 50px;
+    float: right;
+  }
+  .title {
+    font-size: 16px;
+    font-weight: 400;
+    display: block;
+    line-height: 1.2;
+    color: #353535;
+  }
+  .digest {
+    padding-top: 12px;
+    color: #9A9A9A;
+    font-size: 14px;
+  }
+  .single-cover {
+    /*padding: 20px 15px 15px;*/
+  }
+  .muti-cover {
+    position: relative;
+    padding: 20px 15px 0 15px;
+  }
+  .bottom-title {
+    color: #FFFFFF;
+    background-color: rgba(0, 0, 0, 0.55);
+    position: absolute;
+    left: 15px;
+    right: 15px;
+    bottom: 0;
+    padding: 8px 12px;
+  }
+  .next-cover {
+    padding: 12px 15px;
+    position: relative;
+  }
+  .next-img {
+    float: right;
+    margin-left: 12px;
+    width: 60px !important;
+    height: 60px !important;
+  }
+  .next-title {
+    overflow: hidden;
+    font-weight: 400;
+    word-wrap: break-word;
+    -webkit-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+    color: #353535;
+  }
+  .single-cover:hover .preview,.bottomCover:hover .preview{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+  }
+  .preview {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.5);
+    text-decoration: none;
+  }
 </style>