From b635f91e9ff2a0be408d641971d357fddf5dcece Mon Sep 17 00:00:00 2001
From: Yer <17633066053@163.com>
Date: Thu, 20 Jul 2023 15:50:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20=E5=B0=8F=E7=A8=8B?=
 =?UTF-8?q?=E5=BA=8F=E7=AB=AF=E5=85=BC=E5=AE=B9video=20=E6=92=AD=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/product/goods.vue                       |  3 +-
 pages/product/product/goods/-goods-swiper.vue | 36 +++++++++++++++++--
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/pages/product/goods.vue b/pages/product/goods.vue
index ba280b4..2f7c84b 100644
--- a/pages/product/goods.vue
+++ b/pages/product/goods.vue
@@ -51,7 +51,8 @@
         :scroll-top="tabScrollTop" @scroll="pageScroll">
         <view>
           <!-- 轮播图 -->
-          <GoodsSwiper id="main1" :res="imgList" />
+         
+          <GoodsSwiper id="main1" :res="imgList" :video="goodsDetail.goodsVideo" />
 
           <!-- 促销活动条 -->
           <PromotionAssembleLayout v-if="PromotionList" :detail="goodsDetail" :res="PromotionList" />
diff --git a/pages/product/product/goods/-goods-swiper.vue b/pages/product/product/goods/-goods-swiper.vue
index 13e6d43..038df4d 100644
--- a/pages/product/product/goods/-goods-swiper.vue
+++ b/pages/product/product/goods/-goods-swiper.vue
@@ -1,8 +1,24 @@
 <template>
   <!-- 轮播图 -->
   <view class="carousel">
+
     <swiper circular="true" duration="400" @change="swiperChange">
+      <swiper-item v-if='video'>
+        <!-- #ifndef APP-PLUS -->
+        <video class="video" show-mute-btn style="width:100%; height:100%;" muted autoplay :src='video' loop
+          object-fit="cover"></video>
+        <!-- #endif -->
+        <!-- #ifdef APP-PLUS -->
+        <view style="width:100%; height:100%;">
+          <!-- <video class="video" show-mute-btn style="width:100%; height:100%;" muted autoplay :src='video' loop
+              object-fit="cover"></video> -->
+          <view v-html="html" style="width:100%; height:100%;"></view>
+        </view>
+        <!-- #endif -->
+
+      </swiper-item>
       <swiper-item class="swiper-item" v-for="(item, index) in res" :key="index">
+
         <view class="image-wrapper">
           <u-image :src="item" mode="aspectFit" class="loaded" width="100%" height="100%">
             <u-loading slot="loading"></u-loading>
@@ -10,7 +26,7 @@
         </view>
       </swiper-item>
     </swiper>
-    <view class="swiper-dots">{{ current }}/{{ res.length }}</view>
+    <view class="swiper-dots">{{ current }}/{{ video ? res.length + 1 : res.length }}</view>
   </view>
 </template>
 <script>
@@ -18,15 +34,24 @@ export default {
   data() {
     return {
       current: 1,
+      html: ""
     };
   },
-  props: ["res"],
+  props: ["res", 'video'],
+  watch: {
+    video(val) {
+      this.html = '<video muted="muted"   ref="videoPlay" style="width:100%; height:100%;" src=' + val + '  page-gesture show-mute-btn   autoplay  webkit-playsinline="" playsinline="" ></video>'
+    }
+  },
   methods: {
     // 轮播图对应的dot
     swiperChange(e) {
       this.current = e.detail.current + 1;
     },
   },
+  mounted() {
+    console.log(this.video)
+  }
 };
 </script>
 <style lang="scss" scoped>
@@ -82,4 +107,9 @@ export default {
 /deep/ .image-wrapper image {
   opacity: 1 !important;
 }
-</style>
\ No newline at end of file
+
+.video {
+  width: 100%;
+  height: 100%;
+}
+</style>