pet-front-order/components/CouponRulePopup/index.vue

<template>
	<uni-popup ref="popup" type="center">
		<view class="rule-popup">
			<view class="rule-popup-title">优惠券详细规则</view>
			<view class="rule-popup-content">
				<view class="rule-item">
					<view class="rule-label">名称：</view>
					<view class="rule-value">{{couponData.stockName || ''}}</view>
				</view>
				<!-- <view class="rule-item" v-if="couponData.comment">
					<view class="rule-label">备注：</view>
					<view class="rule-value">{{couponData.comment}}</view>
				</view> -->
				<view class="rule-item">
					<view class="rule-label">类型：</view>
					<view class="rule-value">{{getStockTypeText(couponData)}}</view>
				</view>
				<view class="rule-item">
					<view class="rule-label">优惠内容：</view>
					<view class="rule-value">{{getDiscountText(couponData)}}</view>
				</view>
				<view class="rule-item" v-if="couponData.transactionMinimum">
					<view class="rule-label">消费门槛：</view>
					<view class="rule-value">满{{couponData.transactionMinimum}}元可用</view>
				</view>
				<view class="rule-item" v-if="couponData.goodsName">
					<view class="rule-label">适用范围：</view>
					<view class="rule-value">{{couponData.goodsName}}</view>
				</view>
				<view class="rule-item">
					<view class="rule-label">有效期：</view>
					<view class="rule-value">{{getValidTimeText(couponData)}}</view>
				</view>
				<!-- <view class="rule-item" v-if="couponData.maxCouponsPerUser">
					<view class="rule-label">领取限制：</view>
					<view class="rule-value">每人最多可领{{couponData.maxCouponsPerUser}}张</view>
				</view> -->
				<view class="rule-item">
					<view class="rule-label">特别说明：</view>
					<view class="rule-value">单笔订单仅限使用1张优惠券；优惠券仅限用户本人使用，不可赠送、不可提现、不得找零。</view>
				</view>
			</view>
			<view class="rule-popup-close" @click="close">关闭</view>
		</view>
	</uni-popup>
</template>

<script>
export default {
	name: 'CouponRulePopup',
	data() {
		return {
			couponData: {}
		}
	},
	methods: {
		// 打开弹窗
		open(couponData = {}) {
			this.couponData = couponData;
			this.$refs.popup.open();
		},
		
		// 关闭弹窗
		close() {
			this.$refs.popup.close();
		},
		
		// 获取批次类型文本
		getStockTypeText(coupon) {
			if (!coupon || !coupon.stockType) return '';
			
			const typeMap = {
				'PNORMAL': '平台满减券',
				'PDISCOUNT': '平台折扣券',
				'PTRAIL': '平台体验券',
				'NORMAL': '微信满减券',
				'DISCOUNT': '微信折扣券',
				'EXCHANGE': '微信换购券'
			};
			return typeMap[coupon.stockType] || coupon.stockType;
		},
		
		// 获取优惠券折扣文本
		getDiscountText(coupon) {
			if (!coupon || !coupon.stockType) return '';
			
			if (coupon.stockType === 'PNORMAL') {
				// 平台满减券
				if (coupon.discountAmount && coupon.transactionMinimum) {
					return `满${coupon.transactionMinimum}元减${coupon.discountAmount}元`;
				} else if (coupon.discountAmount) {
					return `减${coupon.discountAmount}元`;
				}
				return '满减优惠';
			} else if (coupon.stockType === 'PDISCOUNT') {
				// 平台折扣券
				if (coupon.discountPercent) {
					return `${coupon.discountPercent / 10}折优惠`;
				}
				return '折扣优惠';
			} else if (coupon.stockType === 'PTRAIL') {
				// 平台体验券
				return '免费体验';
			} else if (coupon.stockType === 'NORMAL') {
				// 微信满减券
				if (coupon.discountAmount && coupon.transactionMinimum) {
					return `满${coupon.transactionMinimum}元减${coupon.discountAmount}元`;
				}
				return '满减优惠';
			} else if (coupon.stockType === 'DISCOUNT') {
				// 微信折扣券
				if (coupon.discountPercent) {
					return `${coupon.discountPercent}折优惠`;
				}
				return '折扣优惠';
			} else if (coupon.stockType === 'EXCHANGE') {
				// 微信换购券
				return '换购优惠';
			}
			return '';
		},
		
		// 获取有效期文本
		getValidTimeText(coupon) {
			if (!coupon) return '';
			
			const beginTime = coupon.availableBeginTime ? coupon.availableBeginTime.slice(0, 16).replace('T', ' ') : '';
			const endTime = coupon.availableEndTime ? coupon.availableEndTime.slice(0, 16).replace('T', ' ') : '';
			
			if (beginTime && endTime) {
				return `${beginTime} 至 ${endTime}`;
			} else if (endTime) {
				return `截止至 ${endTime}`;
			} else if (beginTime) {
				return `${beginTime} 开始生效`;
			}
			
			// 如果有领取后生效天数
			if (coupon.availableDayAfterReceive) {
				return `领取后${coupon.availableDayAfterReceive}天开始生效`;
			}
			
			return '长期有效';
		}
	}
}
</script>

<style lang="scss" scoped>
.rule-popup {
	width: 600rpx;
	background-color: #FFFFFF;
	border-radius: 16rpx;
	overflow: hidden;
}

.rule-popup-title {
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	font-size: 32rpx;
	font-weight: 600;
	color: #FFFFFF;
	background-color: #FFAA48;
}

.rule-popup-content {
	padding: 30rpx;
}

.rule-item {
	display: flex;
	margin-bottom: 20rpx;
}

.rule-label {
	width: 140rpx;
	font-size: 28rpx;
	color: #666666;
	flex-shrink: 0;
}

.rule-value {
	flex: 1;
	font-size: 28rpx;
	color: #333333;
	line-height: 40rpx;
}

.rule-popup-close {
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	font-size: 30rpx;
	color: #FFAA48;
	border-top: 1px solid #EEEEEE;
}
</style>