Initial commit: 积分兑换电商平台多商户版 MER-2.2

Made-with: Cursor
2026-03-08 20:07:52 +08:00
commit de02c8a3e1
4954 changed files with 703009 additions and 0 deletions
--- a/mer_uniapp/pages/goods/components/cus-previewImg/cus-previewImg.vue
+++ b/mer_uniapp/pages/goods/components/cus-previewImg/cus-previewImg.vue
@@ -0,0 +1,201 @@
+<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>