商品详情轮播图及评价图点击预览功能

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>

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 {