vending-machine/mobile/components/RedeemPopup.vue

<template>
	<view class="popup-mask" v-if="visible" @click="handleCancel">
		<view class="popup-content" @click.stop>
			<!-- 标题 -->
			<text class="popup-title">{{ t('redeem.title') }}</text>

			<!-- 优惠券卡片 -->
			<view class="coupon-card" v-if="coupon">
				<image class="coupon-bg" src="/static/ic_coupon_bg2.png" mode="scaleToFill" />
				<view class="coupon-inner">
					<text class="coupon-name">{{ coupon.name }}</text>
					<view class="coupon-detail-row">
						<text class="coupon-dot">●</text>
						<text class="coupon-detail-label">{{ t('couponCard.expireLabel') }}</text>
						<text class="coupon-detail-value">{{ formatExpire(coupon.expireAt) }}</text>
					</view>
					<view class="coupon-detail-row">
						<text class="coupon-dot">●</text>
						<text class="coupon-detail-label">{{ t('couponCard.conditionLabel') }}</text>
						<text class="coupon-detail-value">{{ coupon.pointsCost ?? 0 }}{{ t('couponCard.pointsUnit') }}</text>
					</view>
				</view>
			</view>

			<!-- 按钮 -->
			<view class="popup-actions">
				<view class="btn cancel-btn" @click="handleCancel">
					<text class="btn-text cancel-text">{{ t('common.cancel') }}</text>
				</view>
				<view class="btn confirm-btn" @click="handleConfirm">
					<text class="btn-text confirm-text">{{ t('redeem.confirmBtn') }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useI18n
	} from 'vue-i18n'

	const {
		t
	} = useI18n()

	defineProps({
		visible: {
			type: Boolean,
			default: false
		},
		coupon: {
			type: Object,
			default: null
		}
	})

	const emit = defineEmits(['confirm', 'cancel'])

	// 格式化到期时间
	function formatExpire(dateStr) {
		if (!dateStr) return t('couponCard.noLimit')
		const d = new Date(dateStr)
		return `${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()}`
	}

	function handleConfirm() {
		emit('confirm')
	}

	function handleCancel() {
		emit('cancel')
	}
</script>

<style scoped>
	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}

	.popup-content {
		width: 620rpx;
		background-color: #ffffff;
		border-radius: 24rpx;
		padding: 40rpx;
	}

	.popup-title {
		font-size: 34rpx;
		font-weight: 600;
		color: #333;
		text-align: center;
		display: block;
		margin-bottom: 30rpx;
	}

	/* 优惠券卡片 */
	.coupon-card {
		position: relative;
		border-radius: 16rpx;
		overflow: hidden;
		margin-bottom: 36rpx;
		min-height: 200rpx;
	}

	.coupon-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
	}

	.coupon-inner {
		position: relative;
		z-index: 1;
		padding: 28rpx 32rpx;
	}

	.coupon-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		display: block;
		margin-left: 28rpx;
		margin-bottom: 16rpx;
	}

	.coupon-detail-row {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
		margin-left: 28rpx;
	}

	.coupon-dot {
		font-size: 16rpx;
		color: #D9DED7;
		margin-right: 10rpx;
	}

	.coupon-detail-label {
		font-size: 24rpx;
		color: #666;
	}

	.coupon-detail-value {
		font-size: 24rpx;
		color: #c9a96e;
		font-weight: 500;
	}

	/* 按钮 */
	.popup-actions {
		display: flex;
		gap: 20rpx;
	}

	.btn {
		flex: 1;
		height: 84rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cancel-btn {
		background-color: #ffffff;
		border: 2rpx solid #6b7c5e;
	}

	.confirm-btn {
		background-color: #6b7c5e;
	}

	.btn-text {
		font-size: 30rpx;
	}

	.cancel-text {
		color: #6b7c5e;
	}

	.confirm-text {
		color: #ffffff;
	}
</style>