商品详情页轮播图和加入购物车属性图无法点击放大

components/ProductConSwiper.vue

@@ -1,9 +1,13 @@
 <template>
   <view class="slider-banner product-bg">
-    <swiper class="swiper-wrapper" @change="handleChange" v-if="imgUrls.length > 0">
+    <swiper
+      class="swiper-wrapper"
+      @change="handleChange"
+      v-if="imgUrls.length > 0"
+    >
       <block v-for="(item, imgUrlsIndex) in imgUrls" :key="imgUrlsIndex">
         <swiper-item>
-          <image :src="item" class="slide-image" />
+          <image :src="item" @tap="previewImage(imgUrlsIndex)" class="slide-image" />
         </swiper-item>
       </block>
     </swiper>
@@ -27,8 +31,8 @@ export default {
   props: {
     imgUrls: {
       type: Array,
-      default: () => []
+      default: () => [],
-    }
+    },
   },
   data: function () {
     let that = this;
@@ -37,7 +41,7 @@ export default {
       ProductConSwiper: {
         autoplay: {
           disableOnInteraction: false,
-          delay: 2000
+          delay: 2000,
         },
         loop: true,
         speed: 1000,
@@ -46,16 +50,22 @@ export default {
         on: {
           slideChangeTransitionStart: function () {
             that.currents = this.realIndex + 1;
-          }
+          },
-        }
+        },
-      }
+      },
     };
   },
   mounted: function () {},
   methods: {
     handleChange(event) {
       this.currents = event.mp.detail.current + 1;
-    }
+    },
-  }
+    previewImage(current) {
+      uni.previewImage({
+        current,
+        urls: this.imgUrls,
+      });
+    },
+  },
 };
 </script>

components/ProductWindow.vue

@@ -3,7 +3,7 @@
     <view class="product-window" :class="attr.cartAttr === true ? 'on' : ''">
       <view class="textpic acea-row row-between-wrapper">
         <view class="pictrue">
-          <image :src="attr.productSelect.image" class="image" />
+          <image @tap="previewImage" :src="attr.productSelect.image" class="image" />
         </view>
         <view class="text">
           <view class="line1">{{ attr.productSelect.store_name }}</view>
@@ -16,7 +16,11 @@
         <view class="iconfont icon-guanbi" @click="closeAttr"></view>
       </view>
       <view class="productWinList">
-        <view class="item" v-for="(item, indexw) in attr.productAttr" :key="indexw">
+        <view
+          class="item"
+          v-for="(item, indexw) in attr.productAttr"
+          :key="indexw"
+        >
           <view class="title">{{ item.attrName }}</view>
           <view class="listn acea-row row-middle">
             <view
@@ -25,28 +29,36 @@
               v-for="(itemn, indexn) in item.attrValue"
               @click="tapAttr(indexw, indexn)"
               :key="indexn"
-            >{{ itemn.attr }}</view>
+              >{{ itemn.attr }}</view
+            >
           </view>
         </view>
       </view>
       <view class="cart">
         <view class="title">数量</view>
         <view class="carnum acea-row row-left">
-          <view class="item reduce" :class="cartNum <= 1 ? 'on' : ''" @click="CartNumDes">-</view>
+          <view
+            class="item reduce"
+            :class="cartNum <= 1 ? 'on' : ''"
+            @click="CartNumDes"
+            >-</view
+          >
           <view class="item num">{{ cartNum }}</view>
           <view
             class="item plus"
-            :class="
+            :class="cartNum >= attr.productSelect.stock ? 'on' : ''"
-              cartNum >= attr.productSelect.stock
-                ? 'on'
-                : ''
-            "
             @click="CartNumAdd"
-          >+</view>
+            >+</view
+          >
         </view>
       </view>
     </view>
-    <view class="mask" @touchmove.prevent :hidden="attr.cartAttr === false" @click="closeAttr"></view>
+    <view
+      class="mask"
+      @touchmove.prevent
+      :hidden="attr.cartAttr === false"
+      @click="closeAttr"
+    ></view>
   </view>
 </template>
 <script>
@@ -114,6 +126,12 @@ export default {
       }
       return value;
     },
+    previewImage() {
+      uni.previewImage({
+        current: 0,
+        urls: [this.attr.productSelect.image],
+      });
+    },
   },
 };
 </script>