Merge branch 'feature/0715' into release/6.9.8

@@ -3,6 +3,7 @@
     <video
     <video
       ref="videoPlayer"
       ref="videoPlayer"
       class="video-js vjs-matrix vjs-yoho"
       class="video-js vjs-matrix vjs-yoho"
+      :poster="coverImg"
       controls
       controls
       preload="auto"
       preload="auto"
       playsinline
       playsinline
@@ -24,6 +25,7 @@ export default {
   name: 'VideoPlayer',
   name: 'VideoPlayer',
   props: {
   props: {
     source: String,
     source: String,
+    cover: String,
     options: {
     options: {
       type: Object,
       type: Object,
       default() {
       default() {
@@ -40,10 +42,17 @@ export default {
       player: null
       player: null
     };
     };
   },
   },
+  computed: {
+    coverImg() {
+      if (this.cover) {
+        return this.cover.split('?')[0];
+      } else {
+        return '';
+      }
+    },
+  },
   mounted() {
   mounted() {
-    this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
-      this.play();
-    });
+    this.player = videojs(this.$refs.videoPlayer, this.options);
   },
   },
   beforeDestroy() {
   beforeDestroy() {
     if (this.player) {
     if (this.player) {

@@ -7,7 +7,7 @@
       {{data.emptyTip || '文章不存在或文章被删除'}}
       {{data.emptyTip || '文章不存在或文章被删除'}}
     </div>
     </div>
     <div v-else class="article-context">
     <div v-else class="article-context">
-      <VideoPlayer v-if="+data.sort === 4" :source="data.videoUrl"></VideoPlayer>
+      <VideoPlayer v-if="+data.sort === 4" :source="data.videoUrl" :cover="data.coverUrl"></VideoPlayer>
       <ArticleItemSlide v-else :thumb="thumb" :share="share" :data="slideData" :slide-index="slideIndex" :lazy="lazy" @on-praise="onPraise" @change="onChangeSlide"></ArticleItemSlide>
       <ArticleItemSlide v-else :thumb="thumb" :share="share" :data="slideData" :slide-index="slideIndex" :lazy="lazy" @on-praise="onPraise" @change="onChangeSlide"></ArticleItemSlide>
       <ProductGroup :article-id="data.articleId" :pos-id="0" :index="0" :thumb="thumb" v-if="productListData.length" :share="share" :data="productListData" :lazy="lazy"></ProductGroup>
       <ProductGroup :article-id="data.articleId" :pos-id="0" :index="0" :thumb="thumb" v-if="productListData.length" :share="share" :data="productListData" :lazy="lazy"></ProductGroup>
 
 

@@ -5,7 +5,7 @@
       <a v-if="actionUrl" class="action-article" :href="actionUrl" target="_blank"></a>
       <a v-if="actionUrl" class="action-article" :href="actionUrl" target="_blank"></a>
       <div class="layer-image" @click="onClick" :style="`height: ${data.blockWidth * data.scale}px`">
       <div class="layer-image" @click="onClick" :style="`height: ${data.blockWidth * data.scale}px`">
         <div v-if="data.authStatus == 2" class="failed-cover">未审核通过</div>
         <div v-if="data.authStatus == 2" class="failed-cover">未审核通过</div>
-        <div v-if="data.sort === 2" class="article-long-icon"></div>
+        <div v-if="cornerMark" class="article-corner-mark" :class="cornerMark"></div>
         <ImageFormat :mode="1" :src="data.coverImage" :width="imgWidth" :height="Math.floor(data.scale * imgWidth)"></ImageFormat>
         <ImageFormat :mode="1" :src="data.coverImage" :width="imgWidth" :height="Math.floor(data.scale * imgWidth)"></ImageFormat>
       </div>
       </div>
       <div v-if="data.content" class="description" @click="onClick('article')">
       <div v-if="data.content" class="description" @click="onClick('article')">
@@ -68,6 +68,22 @@ export default {
       }
       }
 
 
       return '';
       return '';
+    },
+    cornerMark() {
+      let className = '';
+
+      switch (+this.data.sort) {
+        case 2:
+          className = 'article-long-icon';
+          break;
+        case 4:
+          className = 'article-video-icon';
+          break;
+        default:
+          break;
+      }
+
+      return className;
     }
     }
   },
   },
   methods: {
   methods: {
@@ -147,16 +163,23 @@ export default {
         justify-content: center;
         justify-content: center;
       }
       }
 
 
-      .article-long-icon {
+      .article-corner-mark {
         width: 36px;
         width: 36px;
         height: 36px;
         height: 36px;
         position: absolute;
         position: absolute;
         top: 18px;
         top: 18px;
         right: 18px;
         right: 18px;
-        background-image: url("~statics/image/article/article-long-icon.png");
         background-size: 100% 100%;
         background-size: 100% 100%;
       }
       }
 
 
+      .article-long-icon {
+        background-image: url("~statics/image/article/article-long-icon.png");
+      }
+
+      .article-video-icon {
+        background-image: url("~statics/image/article/article-video-icon.png");
+      }
+
       > img {
       > img {
         width: 100%;
         width: 100%;
         height: 100%;
         height: 100%;