mrr.sj.front/pages/coupon/components/couponCard.vue

<template>
	<view class="coupon-card" :class="{ 'action-card': isActionStatus }" style="position: relative;">
		<!-- 左列：金额 + 条件 -->
		<view class="col-left" :class="{ 'action-left': isActionStatus }">
			<view class="coupon-amount">
				<text class="amount">{{ coupon.amount }}</text>
				<text class="yuan">元</text>
			</view>
			<text class="condition">{{ coupon.condition }}</text>
		</view>

		<!-- 中列：平台标签 + 有效期 -->
		<view class="col-middle" :class="{ 'action-middle': isActionStatus }">
			<view class="platform-tag">
				<text>{{ coupon.platform }}</text>
				<text class="separator">|</text>
				<text>{{ coupon.tag }}</text>
			</view>
			<text class="expiry">{{ coupon.expiry }}</text>
		</view>

		<!-- 右列：状态标签/按钮 + 图标 -->
		<view class="col-right">
			<view class="status-tag" :class="[coupon.status, { 'gradient-btn': isActionStatus }]" @click="handleAction">
				{{ statusText }}
			</view>
		</view>

		<!-- 新获取图标（仅可操作状态且 isNew 为 true 时显示） -->
		<view class="sate-icon" v-if="isActionStatus">
			<image v-if="coupon.isNew" class="icon-new"
				src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/0da3e86d-8567-4c43-9a9e-392668701749.png"
				mode="aspectFit"></image>
			<!-- 快过期图标（仅可操作状态且 isExpiringSoon 为 true 时显示） -->
			<image v-if="coupon.isExpiringSoon" class="icon-expiring"
				src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/21e102f7-b4a5-4b52-8c6d-8284b5e5b1c9.png"
				mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'CouponCard',
		props: {
			coupon: {
				type: Object,
				required: true,
				default: () => ({})
			}
		},
		computed: {
			isActionStatus() {
				return this.coupon.status === 'receive' || this.coupon.status === 'use';
			},
			statusText() {
				const map = {
					expired: '已过期',
					used: '已使用',
					receive: '立即领取',
					use: '立即使用'
				};
				return map[this.coupon.status] || '已过期';
			}
		},
		methods: {
			handleAction() {
				if (this.isActionStatus) {
					this.$emit('action', this.coupon.status);
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	.coupon-card {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 24rpx;
		padding: 30rpx 20rpx;
		background-image: url('https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/220ad6bb-a4c7-4197-84b7-80aa92501008.png');
		background-size: cover;
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
		position: relative;

		&.action-card {
			background-image: url('https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/b8d0a4c2-ef17-4dda-af0b-2d7c556ceb8b.png');
		}

		/* 左列 */
		.col-left {
			display: flex;
			flex-direction: column;
			align-items: center;
			min-width: 167rpx;
			margin-left: -10rpx;
			flex-shrink: 0;
			color: #FFAAA4;
			// border: #E8101E 1rpx solid;

			&.action-left {
				color: #FF3340;
			}

			.coupon-amount {
				align-items: baseline;
			}

			.amount {
				font-family: DINPro, DINPro;
				font-size: 54rpx;
				font-weight: 500;
				line-height: 70rpx;
				margin-bottom: 8rpx;
				margin-right: 5rpx;
			}

			.yuan {
				position: relative;
				top: -5rpx;
				font-weight: 500;
			}

			.condition {
				font-weight: 400;
				font-size: 24rpx;
				line-height: 33rpx;
				text-align: center;
				font-style: normal;
			}
		}

		/* 中列 */
		.col-middle {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding: 0 25rpx;

			.platform-tag {
				font-weight: 500;
				display: flex;
				font-size: 30rpx;
				color: #888888;
				margin-bottom: 10rpx;

				.separator {
					margin: 0 8rpx;
					color: #ccc;
				}
			}

			.expiry {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #D3D3D3;
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
				white-space: nowrap;
			}

			&.action-middle {
				.platform-tag {
					color: #333;
					font-weight: 500;
				}

				.separator {
					color: #807C7B;
				}

				.expiry {
					color: #777777;
					font-weight: 400;
				}
			}
		}

		/* 右列 */
		.col-right {
			margin-right: 15rpx;
			flex-shrink: 0;

			.status-tag {
				position: relative;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 33rpx;
				color: #ffffff;
				background-color: #DDD;
				padding: 10rpx 30rpx;
				border-radius: 27rpx;
				text-align: center;
				white-space: nowrap;

				&.expired,
				&.used {
					background-color: #DDD;
				}

				&.gradient-btn {
					background: linear-gradient(135deg, #FF3344, #E8101E);
					border: none;
					color: #fff;
					padding: 11rpx 18rpx;
				}
			}
		}

		/* 新获取快过期图标位置 */
		.sate-icon {
			position: absolute;
			top: -3rpx;
			right: -3rpx;
			flex-direction: row;
			align-items: center;
			z-index: 10;

			.icon-new,
			.icon-expiring {
				width: 93rpx;
				height: 62rpx;
			}
		}
	}
</style>