关注自动回复加入音视频图文

src/components/weChat/focusReply.vue

@@ -34,8 +34,38 @@
             <div v-else-if="scope.row.type === 'image' && scope.row.variable">
               老师二维码
             </div>
+            <div v-else-if="scope.row.type === 'video'">
+              <a :href="scope.row.content.down_url" target="_blank">{{scope.row.content.title}}</a>
+            </div>
+            <div v-else-if="scope.row.type === 'voice'">
+              <a :href="scope.row.content.down_url" target="_blank">{{scope.row.content.title}}</a>
+            </div>
             <div v-else-if="scope.row.type === 'news'">
-              图文消息
+              <div class="news-media">
+              <div v-for="(child, childIndex) in scope.row.content.news_item" style="position: relative">
+                <div v-if="scope.row.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="scope.row.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>
+            </div>
             </div>
           </template>
         </el-table-column>
@@ -103,20 +133,6 @@
           imageContent: '',
           type: 'text',
           mediaList: [],
-          mediaListMock:  [
-          {
-            "media_id": "hQb3Pbdb4E5Ivxi2sagL5sTdtW5W9pKJNA6Z8nBo6Ao",
-            "name": "xx.jpg",
-            "update_time": 1535351431,
-            "url": "http://mmbiz.qpic.cn/mmbiz_jpg/qNgYSw5sicibUGtiaRYRY9QEZUoqgGdvkTE5Zvg58tUciaAXFslmwuiadgU6turtsF7mXFeicKa9RQTTG1gKSLqPiabpA/0?wx_fmt=jpeg"
-          },
-          {
-            "media_id": "hQb3Pbdb4E5Ivxi2sagL5p2poL7GllXYm4SETNmf210",
-            "name": "z.jpg",
-            "update_time": 1535351316,
-            "url": "http://mmbiz.qpic.cn/mmbiz_jpg/qNgYSw5sicibUGtiaRYRY9QEZUoqgGdvkTE5mTOB0jnmfdH30s54N5FIr2Tsbd9QcBFDiapicYWJ6sCZRMGTIlj179g/0?wx_fmt=jpeg"
-          }
-          ],
           showMedia: false,
           rules:{
             value:[
@@ -153,6 +169,10 @@
             return '图片'
           } else if(value === 'news'){
             return '图文'
+          } else if(value === 'video'){
+            return '视频'
+          } else if(value === 'voice'){
+            return '语音'
           } else {
             return val
           }
@@ -472,4 +492,79 @@
        clear: both;
      }
   }
+  .news-media {
+    padding: 10px;
+    width: 200px;
+    background-color: #fff;
+  }
+  .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>