新增：商品详情页主图视频

pages/goods/components/SlideImage.vue

@@ -3,16 +3,26 @@
   <view class="images-swiper">
     <swiper class="swiper-box" :autoplay="autoplay" :duration="duration" :indicator-dots="indicatorDots"
       :interval="interval" :circular="true" @change="setCurrent">
+      <!-- 主图视频 -->
+      <swiper-item v-if="video">
+        <view class="slide-video">
+          <video id="myVideo" class="video" :poster="videoCover.preview_url" :src="video.external_url" controls
+            x5-playsinline playsinline webkit-playsinline webkit-playsinline x5-video-player-type="h5"
+            x5-video-player-fullscreen x5-video-orientation="portrait" :enable-progress-gesture="false"
+            @play="onVideoPlay"></video>
+        </view>
+      </swiper-item>
+      <!-- 轮播图片 -->
       <swiper-item v-for="(item, index) in images" :key="index" @click="onPreviewImages(index)">
         <view class="slide-image">
-          <image class="image" :src="item.preview_url"></image>
+          <image class="image" :draggable="false" :src="item.preview_url"></image>
         </view>
       </swiper-item>
     </swiper>
     <view class="swiper-count">
       <text>{{ currentIndex }}</text>
       <text>/</text>
-      <text>{{ images.length }}</text>
+      <text>{{ images.length + (video ? 1 : 0) }}</text>
     </view>
   </view>
 </template>
@@ -20,6 +30,21 @@
 <script>
   export default {
     props: {
+      // 主图视频
+      video: {
+        type: Object,
+        default () {
+          return null
+        }
+      },
+      // 主图视频封面
+      videoCover: {
+        type: Object,
+        default () {
+          return null
+        }
+      },
+      // 图片轮播
       images: {
         type: Array,
         default: []
@@ -29,18 +54,23 @@
       return {
         indicatorDots: true, // 是否显示面板指示点
         autoplay: true, // 是否自动切换
-        interval: 3000, // 自动切换时间间隔
+        interval: 4000, // 自动切换时间间隔
         duration: 800, // 滑动动画时长
-        currentIndex: 1 // 轮播图指针
+        currentIndex: 1, // 轮播图指针
       }
     },
 
     methods: {
 
+      // 事件：视频开始播放
+      onVideoPlay(e) {
+        this.autoplay = false
+      },
+
       // 设置轮播图当前指针 数字
-      setCurrent(e) {
+      setCurrent({ detail }) {
         const app = this
-        app.currentIndex = e.detail.current + 1
+        app.currentIndex = detail.current + 1
       },
 
       // 浏览商品图片
@@ -76,6 +106,19 @@
     margin: 0 auto;
     /* #endif */
 
+    // 主图视频
+    .slide-video {
+      width: 100%;
+      height: 100%;
+
+      .video {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    // 图片轮播
     .slide-image {
       position: relative;
       width: 100%;
@@ -92,8 +135,8 @@
   // swiper计数
   .swiper-count {
     position: absolute;
-    right: 30rpx;
-    bottom: 36rpx;
+    right: 36rpx;
+    bottom: 72rpx;
     padding: 2rpx 18rpx;
     background: rgba(0, 0, 0, 0.363);
     border-radius: 50rpx;

pages/goods/detail.vue

@@ -1,7 +1,7 @@
 <template>
   <view v-show="!isLoading" class="container">
     <!-- 商品图片轮播 -->
-    <SlideImage v-if="!isLoading" :images="goods.goods_images" />
+    <SlideImage v-if="!isLoading" :video="goods.video" :videoCover="goods.videoCover" :images="goods.goods_images" />
 
     <!-- 商品信息 -->
     <view v-if="!isLoading" class="goods-info m-top20">