From 4f1d542908fe036709f7181ab72dfa93cdf95ece Mon Sep 17 00:00:00 2001
From: yangdanqi <0027013580@iwhalecloud.com>
Date: Sun, 1 May 2022 18:45:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E8=AF=A6=E6=83=85=E8=BD=AE?=
 =?UTF-8?q?=E6=92=AD=E5=9B=BE=E5=8F=8A=E8=AF=84=E4=BB=B7=E5=9B=BE=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E9=A2=84=E8=A7=88=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/goods-card/comments-card.vue | 17 +++++++++++---
 pages/product/product-detail.vue        | 30 +++++++++++++++++++------
 2 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/components/goods-card/comments-card.vue b/components/goods-card/comments-card.vue
index 9c683c1..8354bd1 100644
--- a/components/goods-card/comments-card.vue
+++ b/components/goods-card/comments-card.vue
@@ -19,7 +19,7 @@
 				</view>
 				<view class="grid flex-sub padding-lr col-3 grid-square" v-if="reviewer.picList">
 					<view class="bg-img" :style="'background-image:url(' + item.url + ');'"
-						v-for="(item, index) in reviewer.picList" :key="index" v-if="index < 3">
+						v-for="(item, index) in reviewer.picList" :key="index" v-if="index < 3" :data-url="item.url" :data-imgs="reviewer.picList" @click="viewImage($event)">
 					</view>
 				</view>
 			</view>
@@ -41,8 +41,19 @@
 				isCard: true
 			}
 		},
-		methods: {
-
+		methods: {
+			viewImage(e) {
+				let imgList = e.currentTarget.dataset.imgs;
+				let curUrl = e.currentTarget.dataset.url;
+				let picList = [];
+				for(let i = 0; i < imgList.length; i++) {
+					picList.push(imgList[i].url);
+				}
+				uni.previewImage({
+					urls: picList,
+					current: curUrl
+				});
+			}
 		}
 	}
 </script>
diff --git a/pages/product/product-detail.vue b/pages/product/product-detail.vue
index beb8ae2..c92c0cd 100644
--- a/pages/product/product-detail.vue
+++ b/pages/product/product-detail.vue
@@ -17,7 +17,7 @@
 		</uni-transition>
 		<!-- 轮播图，视频 -->
 		<swiper class="screen-swiper" @change="changeSwiper">
-			<swiper-item v-for="(item,index) in swiperList" :key="item.id" @click="pauseVideo($event, item)">
+			<swiper-item v-for="(item,index) in swiperList" :key="item.id" @click="clickSwiper($event, item)">
 				<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
 				<video v-if="item.type=='video'" id="productVideo" :src="item.url" :controls="true" :autoplay="false"
 					:show-center-play-btn="true" :show-fullscreen-btn="false"></video>
@@ -177,7 +177,8 @@
 				ifShowPageMeta: false,
 				orderNow: false,
 				totalPickCount: 0,
-				ifHasCsMsg: true
+				ifHasCsMsg: true,
+				swiperPicUrls: []
 			}
 		},
 		onLoad() {
@@ -203,7 +204,12 @@
 				this.curProductSpecs = this.specsList[0];
 				this.reviewers = productDetail.reviewers;
 				this.productDetailImgUrl = productDetail.productDetailImgUrl;
-				this.shopInfo = productDetail.shopInfo;
+				this.shopInfo = productDetail.shopInfo;
+				for (let i = 0; i < this.swiperList.length; i++) {
+					if (this.swiperList[i].type === 'image') {
+						this.swiperPicUrls.push(this.swiperList[i].url);
+					}
+				}
 			},
 			bindEvent() {
 				uni.$on('product-detail_add2Cart', this.add2Cart);
@@ -216,11 +222,21 @@
 			},
 			showAllSpecs() {
 				this.isShowAllSpecs = !this.isShowAllSpecs;
+			},
+			clickSwiper(e, item) {
+				if (item.type === 'image') {
+					this.viewImage(item.url);
+				} else if (item.type === 'video') {
+					this.pauseVideo(e);
+				}
+			},
+			viewImage(url) {
+				uni.previewImage({
+					urls: this.swiperPicUrls,
+					current: url
+				});
 			},
-			pauseVideo(e, item) {
-				if (item.type !== 'video') {
-					return;
-				}
+			pauseVideo(e) {
 				if (this.productVideoPlaying) {
 					this.productVideoContext.pause();
 				} else {