feat(商品详情): 增加视频资源位

@@ -40,7 +40,7 @@ export default {
       let videoUrl = null;
       for(const resourceInfo of this.list) {
           const { url} = resourceInfo;
-          if(/(\.mp4)$/.test(url)) {
+          if(/(\.mp4)/.test(url)) {
             videoUrl = url
             break;
           }
@@ -52,7 +52,7 @@ export default {
     onClickHandler(e, url, index) {
       e.stopPropagation();
       e.preventDefault();
-      if(/(\.mp4)$/.test(url)) {
+      if(/(\.mp4)/.test(url)) {
         const key = `videoPlayer-${index+1}`;
         this.$refs[key][0].parentHandleclick()
       }

@@ -65,7 +65,7 @@ export default {
       let videoInfo = null;
       for(const resourceInfo of this.list) {
           const { url, id } = resourceInfo;
-          if(/(\.mp4)$/.test(url)) {
+          if(/(\.mp4)/.test(url)) {
             videoInfo = {url, id};
             break;
           }
@@ -84,7 +84,7 @@ export default {
     onClickHandler(e, url) {
       e.stopPropagation();
       e.preventDefault();
-      if(/(\.mp4)$/.test(url)) {
+      if(/(\.mp4)/.test(url)) {
         this.$refs.videoPlayer.parentHandleclick()
       }
     }

@@ -16,6 +16,9 @@ export default {
     resource() {
       return this.productDetail.resource || {};
     },
+    videoResource() {
+      return this.productDetail.videoResource || {};
+    },
     activity() {
       return this.productDetail.activity;
     },

@@ -52,6 +52,22 @@
           <img class="ref-img" v-lazy="prdDetailTip"/>
         </div>
 
+         <!-- 视频资源位 -->
+        <a 
+          class="banner video-resource" 
+          ref="videoResourceImg" 
+          v-if="videoResource.src">
+            <div 
+              class="video-mask" 
+              @click="onVideoPlay"></div>
+            <VideoPlayer
+              ref="videoPlayer"
+              class="video-player"
+              :source="videoResource.url"
+            />
+            <img-size :src="sizeImg(videoResource.src)"/>
+        </a>
+
         <img class="ref-img" v-lazy="prdDetailImage" />
 
         <div class="recommend" v-if="recommend"><h2>相关推荐</h2>
@@ -118,6 +134,7 @@ export default {
     'cube-slide': Slide,
     'cube-slide-item': Slide.Item,
     'cube-popup': Popup,
+    VideoPlayer
   },
   props: {
     productId: {
@@ -129,7 +146,6 @@ export default {
       slideOptions: {
         eventPassthrough: 'vertical',
       },
-      videoUrl: 'https://v.yohobuy.com/d3afd3b6vodtranscq1400201211/e553618a5285890795944899907/v.f30.mp4',
       prdDetailTip,
       prdDetailImage,
 
@@ -790,22 +806,46 @@ export default {
         title: `淘口令#${this.productDetail.product_name}`, // 分享标题
         text: '' // 分享描述
       }, yasReportHandler);
+    },
+    onVideoPlay() {
+      this.$refs.videoPlayer.parentHandleclick()
     }
   },
+  
 };
 </script>
 
 <style lang="scss" scoped>
   @import "./product-detail";
 
-  .video-wrapper {
-    overflow: hidden;
+  .video-mask {
+    z-index: 10;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
   }
 
   .video-player {
     display: block;
-    height: 40px;
+    height: 100%;
+    width: 100%;
     opacity: 0;
+    position: absolute;
+    bottom: 0;
+    overflow: hidden;
+
+    /deep/ .video-js {
+      padding: 0;
+      height: 100%;
+    }
+  }
+
+  .video-resource {
+    margin-top: 30px;
+    position: relative;
+    overflow: hidden;
   }
 
   .cube-btn {

@@ -26,12 +26,17 @@ export default {
     });
 
     let [detail, resource, activity, recommend, limitInfo] = await Promise.all(queryTasks);
+    
+    // 视频资源位
+    const videoResourceInfo = resource.find(r=> /(\.mp4)/.test(r.data[0].url));
+    const videoResource = get(videoResourceInfo, 'data[0]', {});
 
     resource = get(resource, '[0].data[0]', {});
-    
+
     const {product_info = {}} = detail || {};
     commit(Types.UPDATE_PRODUCT_DETAIL, Object.assign(product_info, {
       resource,
+      videoResource,
       activity: activity || [],
       recommend: recommend && recommend.product_list || [],
       limitInfo: limitInfo || {}