feat: 详情轮播支持点击查看

template/uni-app/components/cusPreviewImg/swiperPrevie.vue

@@ -0,0 +1,150 @@
+<template>
+	<view class="previewImg" v-if="showBox" @touchmove.stop.prevent>
+		<view class="mask" @click="close">
+			<swiper @change="changeSwiper" class="mask-swiper" :current="currentIndex" :circular="circular"
+				:duration="duration">
+				<swiper-item v-for="(src, i) in list" :key="i" class="flex flex-column justify-center align-center">
+					<image class="mask-swiper-img" :src="src" mode="widthFix" />
+				</swiper-item>
+			</swiper>
+		</view>
+		<view class="pagebox" v-if="list.length>0">{{ Number(currentIndex) + 1 }} / {{ list.length }}</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'cusPreviewImg',
+		props: {
+			list: {
+				type: Array,
+				required: true,
+				default: () => {
+					return [];
+				}
+			},
+			circular: {
+				type: Boolean,
+				default: true
+			},
+			duration: {
+				type: Number,
+				default: 500
+			}
+		},
+		data() {
+			return {
+				currentIndex: 0,
+				showBox: false
+			};
+		},
+		watch: {
+			list(val) {}
+		},
+		methods: {
+			// 左右切换
+			changeSwiper(e) {
+				this.currentIndex = e.target.current;
+				// this.$emit('changeSwitch', e.target.current)
+			},
+			open(current) {
+				if (!this.list.length) return;
+				this.currentIndex = current;
+				this.showBox = true;
+			},
+			close() {
+				this.showBox = false;
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@mixin full {
+		width: 100%;
+		height: 100%;
+	}
+
+	.previewImg {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 300;
+		@include full;
+
+		.mask {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			background-color: #000;
+			opacity: 1;
+			z-index: 8;
+			@include full;
+
+			&-swiper {
+				@include full;
+
+				&-img {
+					width: 100%;
+				}
+			}
+		}
+
+		.pagebox {
+			position: absolute;
+			width: 100%;
+			bottom: 20rpx;
+			z-index: 300;
+			color: #fff;
+			text-align: center;
+		}
+	}
+
+	.mask_sku {
+		color: #fff;
+		max-width: 80%;
+		z-index: 300;
+		text-align: center;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin-top: 30rpx;
+
+		.sku_name {
+			font-size: 12px;
+			border: 1px solid #fff;
+			padding: 10rpx 30rpx 10rpx;
+			border-radius: 40px;
+			box-sizing: border-box;
+		}
+
+		.sku_price {
+			padding-top: 10px;
+		}
+	}
+
+	.font12 {
+		font-size: 24rpx;
+	}
+
+	.share_btn {
+		position: absolute;
+		top: 70rpx;
+		right: 50rpx;
+		font-size: 40rpx;
+		color: #fff;
+		z-index: 300;
+	}
+
+	.flex-column {
+		flex-direction: column;
+	}
+
+	.justify-center {
+		justify-content: center;
+	}
+
+	.align-center {
+		align-items: center;
+	}
+</style>

template/uni-app/components/productConSwiper/index.vue

@@ -6,10 +6,9 @@
 			<swiper-item v-if="videoline">
 				<view class="item">
 					<view v-show="!controls" style="width:100%;height:100% ">
-						<video id="myVideo"  :src='videoline' objectFit="contain" controls
-							style="width:100%;height:100%" show-center-play-btn show-mute-btn="true"
-							auto-pause-if-navigate :custom-cache="false" :enable-progress-gesture="false"
-							:poster="imgUrls[0]" @pause="videoPause"></video>
+						<video id="myVideo" :src='videoline' objectFit="contain" controls style="width:100%;height:100%"
+							show-center-play-btn show-mute-btn="true" auto-pause-if-navigate :custom-cache="false"
+							:enable-progress-gesture="false" :poster="imgUrls[0]" @pause="videoPause"></video>
 					</view>
 					<view class="poster" v-show="controls">
 						<image class="image" :src="imgUrls[0]"></image>
@@ -34,7 +33,7 @@
 			<!-- #endif -->
 			<block v-for="(item,index) in imgUrls" :key='index'>
 				<swiper-item v-if="videoline?index>=1:index>=0">
-					<image :src="item" class="slide-image" />
+					<image :src="item" class="slide-image" @click="openImage(index)" />
 				</swiper-item>
 			</block>
 		</swiper>
@@ -108,6 +107,10 @@
 			},
 			change: function(e) {
 				this.$set(this, 'currents', e.detail.current + 1);
+			},
+			// 查看图片详情
+			openImage(index) {
+				this.$emit('showSwiperImg', index)
 			}
 		}
 	}
@@ -148,11 +151,12 @@
 		width: 100%;
 		height: 100%;
 	}
-
-	.goods-video{
-		width: 100%;
-		height: 100%;
+
+	.goods-video {
+		width: 100%;
+		height: 100%;
 	}
+
 	.product-bg .item {
 		position: relative;
 		width: 100%;

template/uni-app/pages/activity/goods_seckill_details/index.vue

@@ -42,7 +42,7 @@
 					<!-- #ifdef APP-PLUS || MP -->
 					<view class="" :style="'width:100%;' + 'height:'+sysHeight"></view>
 					<!-- #endif -->
-					<productConSwiper :imgUrls='imgUrls'></productConSwiper>
+					<productConSwiper :imgUrls='imgUrls' @showSwiperImg="showSwiperImg"></productConSwiper>
 					<view class="bg-color">
 						<view class='nav acea-row row-between-wrapper'>
 							<view class='money'>{{$t(`￥`)}}<text class='num'>{{storeInfo.price || ''}}</text>
@@ -221,6 +221,7 @@
 		<view class="share-box" v-if="H5ShareBox">
 			<image :src="imgHost + '/statics/images/share-info.png'" @click="H5ShareBox = false"></image>
 		</view>
+		<swiperPrevie ref="cusSwiperImg" :list="storeInfo.images"></swiperPrevie>
 		<!-- #ifdef H5 || APP-PLUS -->
 		<zb-code ref="qrcode" :show="codeShow" :cid="cid" :val="codeVal" :size="size" :unit="unit"
 			:background="background" :foreground="foreground" :pdground="pdground" :icon="codeIcon" :iconSize="iconsize"
@@ -244,6 +245,7 @@
 		collectDel
 	} from '@/api/store.js';
 	import productConSwiper from '@/components/productConSwiper/index.vue'
+	import swiperPrevie from "@/components/cusPreviewImg/swiperPrevie.vue";
 	import productWindow from '@/components/productWindow/index.vue'
 	import userEvaluation from '@/components/userEvaluation/index.vue'
 	import kefuIcon from '@/components/kefuIcon';
@@ -289,6 +291,7 @@
 			menuIcon,
 			countDown,
 			cusPreviewImg,
+			swiperPrevie,
 			parser,
 			homeList,
 			// #ifdef MP
@@ -1129,6 +1132,9 @@
 					this.$set(this, "attrValue", productSelect.suk);
 				}
 			},
+			showSwiperImg(index) {
+				this.$refs.cusSwiperImg.open(index);
+			},
 		},
 		//#ifdef MP
 		onShareAppMessage() {