MER-2.2_2601/mer_uniapp/pages/goods/components/cus-previewImg/cus-previewImg.vue

<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.image" mode="widthFix" />
					<view class="mask_sku">
						<text class="sku_name mb-34">{{src.sku}}</text>
						<PointsPrice v-if="src.type === ProductTypeEnum.Integral" :pointsPrice="src"
							:pointsGoodsStyle="hotPointsStyle"></PointsPrice>
						<view v-else>
							<text class="sku_price">￥{{!type?src.price:src.groupPrice}}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="pagebox" v-if="list.length>0">{{ Number(currentIndex) + 1 }} / {{ list.length }}</view>
		<!-- #ifndef MP -->
		<text class="iconfont icon-ic_share share_btn" @click="shareFriend()"></text>
		<!-- #endif -->
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2026 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------

	import PointsPrice from '@/components/PointsPrice.vue';
	import {
		ProductTypeEnum
	} from "@/enums/productEnums";
	export default {
		name: 'cus-previewImg',
		components: {
			PointsPrice
		},
		props: {
			list: {
				type: Array,
				required: true,
				default: () => {
					return [];
				}
			},
			circular: {
				type: Boolean,
				default: true
			},
			duration: {
				type: Number,
				default: 500
			}
		},
		data() {
			return {
				ProductTypeEnum: ProductTypeEnum,
				hotPointsStyle: {
					iconStyle: {
						width: '32rpx',
						height: '32rpx'
					},
					priceStyle: {
						fontSize: '32rpx',
					},
					unitStyle: {
						fontSize: '28rpx',
					},
					priceColor: {
						color: '#fff'
					}
				},
				currentIndex: 0,
				showBox: false,
				type: 0,
			};
		},
		methods: {
			// 左右切换
			changeSwiper(e) {
				this.currentIndex = e.target.current;
				this.$emit('changeSwitch', e.target.current)
			},
			open(current, type) {
				if (type) {
					this.type = type
				}
				if (!current || !this.list.length) return;
				this.currentIndex = this.list.map((item) => item.sku).indexOf(current);
				this.showBox = true;
			},
			close() {
				this.showBox = false;
			},
			shareFriend() {
				this.$emit('shareFriend')
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.price-box{
		color: #fff !important;
	}
	@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: 90rpx;

		.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>