bug fixes

src/pages/shop.vue

@@ -4,9 +4,18 @@
       <div class="shop-content__left">
         <div class="left-con__top">
           <div class="swiper-box">
-            <img class="banner" :src="swiperBanner" />
+            <div class="banner">
+              <video :src="commodityData.main_chart_oss" controls v-if="isVideo"></video>
+              <img :src="swiperBanner" v-else />
+            </div>
             <div class="swiper-tab__btn">
               <swiper ref="mySwiper" :options="swiperOptions">
+                <swiper-slide v-if="commodityData.main_chart_oss">
+                  <img
+                    :src="`${commodityData.main_chart_oss}?x-oss-process=video/snapshot,t_10,f_jpg,w_0,h_0,m_fast`"
+                    @click="tabSwiperVideo"
+                  />
+                </swiper-slide>
                 <template v-for="(item, index) in swiperBtnItem">
                   <swiper-slide :key="index"><img :src="item" @click="tabSwiper(item)" /></swiper-slide>
                 </template>
@@ -31,7 +40,9 @@
               <div class="name">运费</div>
               <div class="val">无需配送</div>
             </div>
-            <div class="buy-btn" @click="dialogVisible = true">{{ commodityData.buy_button_text || '立即购买' }}</div>
+            <div class="buy-btn" @click="dialogVisible = true" v-if="commodityData.status === '2'">
+              {{ buttonText }}
+            </div>
             <div class="buy-mode">
               <div class="name">支付方式：</div>
               <div class="li">
@@ -99,7 +110,8 @@ export default {
           el: '.swiper-scrollbar',
           hide: true
         }
-      }
+      },
+      isVideo: false
     }
   },
   computed: {
@@ -114,6 +126,9 @@ export default {
     },
     buyPreviewUrl() {
       return `${webConf.others.h5PreviewUrl}/buy?shop_id=${this.shopId}&spu_id=${this.goodsId}`
+    },
+    buttonText() {
+      return this.commodityData.buy_button_text || '立即购买'
     }
   },
   mounted() {
@@ -129,14 +144,20 @@ export default {
             this.hotCommodity = res.data
             return
           }
-          this.commodityData = res.data[0]
-          this.swiperBtnItem = JSON.parse(res.data[0].chart_oss).map(item => item.url)
+          const [goods] = res.data
+          this.commodityData = goods
+          this.swiperBtnItem = JSON.parse(goods.chart_oss).map(item => item.url)
           this.swiperBanner = this.swiperBtnItem[0]
+          goods.main_chart_oss && this.tabSwiperVideo()
         }
       })
     },
     tabSwiper(src) {
+      this.isVideo = false
       this.swiperBanner = src
+    },
+    tabSwiperVideo() {
+      this.isVideo = true
     }
   }
 }
@@ -156,11 +177,17 @@ export default {
         .swiper-box {
           width: 420px;
           .banner {
-            width: 100%;
             height: 420px;
-            display: block;
-            object-fit: contain;
             border: 1px solid #f2f2f2;
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: contain;
+            }
+            video {
+              width: 100%;
+              height: 100%;
+            }
           }
           .swiper-tab__btn {
             margin-top: 20px;