Merge branch 'feature/video' into develop

@@ -4,6 +4,16 @@
       <li v-for="(item, index) in list" :key="index">
         <LayoutLink :href="item.url" :report="{PAGE_URL, ...item.reportParams}" reportEvent="XY_UFO_MAIN_EVENT">
           <ImageFormat :data-secc="item.src" :lazy="false" :src="item.src" :alt="item.alt" :width="item.width || 750" :height="item.height || 160" />
+          <div 
+            v-if="videoUrl" 
+            class="video-mask" 
+            @click="e => onClickHandler(e, item.url, index)"></div>
+          <VideoPlayer
+            :ref="`videoPlayer-${index+1}`"
+            class="video-player"
+            v-if="videoUrl"
+            :source="videoUrl"
+          />
         </LayoutLink>
       </li>
     </ul>
@@ -11,6 +21,8 @@
 </template>
 
 <script>
+import VideoPlayer from "@/components/video-player";
+
 export default {
   name: 'banner',
   props: {
@@ -22,16 +34,64 @@ export default {
       type: String,
     }
   },
+  components: { VideoPlayer },
+  computed: {
+    videoUrl() {
+      let videoUrl = null;
+      for(const resourceInfo of this.list) {
+          const { url} = resourceInfo;
+          if(/(\.mp4)/.test(url)) {
+            videoUrl = url
+            break;
+          }
+      }
+      return videoUrl;
+    },
+  },
   methods: {
-
+    onClickHandler(e, url, index) {
+      e.stopPropagation();
+      e.preventDefault();
+      if(/(\.mp4)/.test(url)) {
+        const key = `videoPlayer-${index+1}`;
+        this.$refs[key][0].parentHandleclick()
+      }
+    }
   }
 };
 </script>
 
 <style lang="scss" scoped>
+
+.video-mask {
+  z-index: 10;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.video-player {
+  display: block;
+  height: 100%;
+  width: 100%;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+}
+
 .banner {
   width: 100%;
 
+  /deep/ .layout-link {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+    display: inline-block;
+  }
+
   img {
     width: 100%;
     display: block;

@@ -3,20 +3,52 @@
     <div class="swiper-item swiper-item-left">
       <LayoutLink :href="list[0].url" class="img-link" :report="{PAGE_URL, ...list[0].reportParams}" reportEvent="XY_UFO_MAIN_EVENT">
         <ImageFormat :lazy="false" class="item-imge" :src="list[0].src" :width="310" :height="402"></ImageFormat>
+        <div 
+          v-if="videoInfo && videoInfo.id === list[0].id" 
+          class="video-mask" 
+          @click="e => onClickHandler(e, list[0].url)"></div>
+        <VideoPlayer
+          ref="videoPlayer"
+          class="video-player"
+          v-if="videoInfo && videoInfo.id === list[0].id"
+          :source="videoInfo.url"
+        />
       </LayoutLink>
     </div>
     <div class="swiper-item swiper-item-right">
       <LayoutLink :href="list[1].url" class="img-link" :report="{PAGE_URL, ...list[1].reportParams}" reportEvent="XY_UFO_MAIN_EVENT">
         <ImageFormat :lazy="false" class="item-imge" :src="list[1].src" :width="380" :height="196"></ImageFormat>
+        <div 
+          v-if="videoInfo && videoInfo.id === list[1].id" 
+          class="video-mask" 
+          @click="e => onClickHandler(e, list[1].url)"></div>
+        <VideoPlayer
+          ref="videoPlayer"
+          class="video-player"
+          v-if="videoInfo && videoInfo.id === list[1].id"
+          :source="videoInfo.url"
+        />
       </LayoutLink>
       <LayoutLink :href="list[2].url" class="img-link img-link2" :report="{PAGE_URL, ...list[2].reportParams}" reportEvent="XY_UFO_MAIN_EVENT">
         <ImageFormat :lazy="false" class="item-imge" :src="list[2].src" :width="380" :height="196"></ImageFormat>
+        <div 
+          v-if="videoInfo && videoInfo.id === list[2].id" 
+          class="video-mask" 
+          @click="e => onClickHandler(e, list[2].url)"></div>
+        <VideoPlayer
+          ref="videoPlayer"
+          class="video-player"
+          v-if="videoInfo && videoInfo.id === list[2].id"
+          :source="videoInfo.url"
+        />
       </LayoutLink>
     </div>
   </div>
 </template>
 
 <script>
+import VideoPlayer from "@/components/video-player";
+
 export default {
   name: 'swiper',
   props: {
@@ -27,21 +59,59 @@ export default {
       type: String,
     }
   },
+  components: {VideoPlayer},
+  computed: {
+    videoInfo() {
+      let videoInfo = null;
+      for(const resourceInfo of this.list) {
+          const { url, id } = resourceInfo;
+          if(/(\.mp4)/.test(url)) {
+            videoInfo = {url, id};
+            break;
+          }
+      }
+      return videoInfo;
+    },
+  },
   data() {
     return {
       params: {},
     }
   },
   mounted() {
-    // console.log(this.list)
   },
   methods: {
-
+    onClickHandler(e, url) {
+      e.stopPropagation();
+      e.preventDefault();
+      if(/(\.mp4)/.test(url)) {
+        this.$refs.videoPlayer.parentHandleclick()
+      }
+    }
   },
 };
 </script>
 
 <style lang="scss" scoped>
+
+.video-mask {
+  z-index: 10;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.video-player {
+  display: block;
+  height: 100%;
+  width: 100%;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+}
+
 .swiper {
   display: flex;
   align-content: stretch;
@@ -50,6 +120,10 @@ export default {
   margin-left: 8px;
   margin-right: 8px;
 
+  /deep/ .layout-link {
+    position: relative;
+  }
+
   .swiper-item-left {
     width: 44%;
   }

@@ -130,7 +130,7 @@ import DetailHeader from "./components/header";
 import DetailFooter from "./components//detail-footer";
 
 import OrderActions from "../components/order-actions";
-import VideoPlayer from "../order-list/components/video-player";
+import VideoPlayer from "@/components/video-player";
 
 import orderActionMixin from "../mixin/order-action";
 

@@ -64,7 +64,7 @@ import { createNamespacedHelpers } from "vuex";
 import OrderItem from "./components/order-item";
 import StatusNav from "./components/status-nav";
 import OrderItemHeader from "./components/order-item-header";
-import VideoPlayer from "./components/video-player";
+import VideoPlayer from "@/components/video-player";
 
 import EmptyList from "components//ufo-no-item";
 

@@ -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>
@@ -100,6 +116,8 @@ import stateShortCutsMixins from './mixins';
 import trackingMixins from './tracking-mixins';
 import DetailUseageTips from './components/detail-useage-tips';
 
+import VideoPlayer from "@/components/video-player";
+
 const { mapActions, mapState } = createNamespacedHelpers('product');
 
 export default {
@@ -119,6 +137,7 @@ export default {
     'cube-slide': Slide,
     'cube-slide-item': Slide.Item,
     'cube-popup': Popup,
+    VideoPlayer
   },
   props: {
     productId: {
@@ -790,23 +809,59 @@ export default {
         title: `淘口令#${this.productDetail.product_name}`, // 分享标题
         text: '' // 分享描述
       }, yasReportHandler);
+    },
+    onVideoPlay() {
+      this.$refs.videoPlayer.parentHandleclick()
     }
   },
+  
 };
 </script>
 
 <style lang="scss" scoped>
   @import "./product-detail";
 
+  .video-mask {
+    z-index: 10;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .video-player {
+    display: block;
+    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 {
     border-radius: 0;
   }
 
-  .fade-enter, .fade-leave-to {
+  .fade-enter,
+  .fade-leave-to {
     opacity: 0;
   }
 
-  .fade-enter-active, .fade-leave-active {
+  .fade-enter-active,
+  .fade-leave-active {
     transition: opacity 300ms linear;
   }
 

@@ -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 || {}