XEH-miniProgram/pages/self/coupon.vue

<template>
	<view class="page-wrap">
		<view class="tabs-panel">
			<view :class="{ item: true, active: tabActive === item.value }" v-for="(item, index) in tabList" :key="index" @click="tabActive = item.value">
				{{ item.label }}
			</view>
		</view>
		<!-- 未使用 -->
		<view v-if="tabActive === 1" class="coupon-panel">
			<view class="item">
				<view class="name">三八女神节特惠券【通用】</view>
				<view class="desc">使用范围：所有产品品类可用</view>
				<view class="desc">使用条件：满100元可用</view>
				<view class="desc">有效日期：至 2023-03-31</view>
				<view class="side">
					<view class="price">38</view>
					满100元可用
				</view>
			</view>
			<view class="item">
				<view class="name">100元财税代金券</view>
				<view class="desc">使用范围：指定产品品类可用</view>
				<view class="desc">使用条件：无限制</view>
				<view class="desc">有效日期：无限制</view>
				<view class="side">
					<view class="price">100</view>
					使用无限制
				</view>
			</view>
			<view class="item">
				<view class="name">六一童心特惠券</view>
				<view class="desc">使用范围：所有产品品类可用</view>
				<view class="desc">使用条件：满100元可用</view>
				<view class="desc">有效日期：至 2023-03-31</view>
				<view class="side">
					<view class="price">61</view>
					满100元可用
				</view>
			</view>
		</view>
		<!-- 已使用 -->
		<view v-if="tabActive === 2" class="coupon-panel">
			<view class="item disabled">
				<view class="name">
					<view class="price">38</view>
					<view class="text">三八女神节特惠券</view>
				</view>
				<view class="desc">使用范围：所有产品品类可用</view>
				<view class="desc">使用条件：满100元可用</view>
				<view class="desc">有效日期：至 2023-03-31</view>
				<view class="side">
					<image class="state-1" src="../../static/img_coupon_state_1.png"></image>
				</view>
			</view>
			<view class="item disabled">
				<view class="name">
					<view class="price">100</view>
					<view class="text">财税代金券</view>
				</view>
				<view class="desc">使用范围：所有产品品类可用</view>
				<view class="desc">使用条件：满100元可用</view>
				<view class="desc">有效日期：至 2023-03-31</view>
				<view class="side">
					<image class="state-1" src="../../static/img_coupon_state_1.png"></image>
				</view>
			</view>
		</view>
		<!-- 已使用 -->
		<view v-if="tabActive === 3" class="coupon-panel">
			<view class="item disabled">
				<view class="name">
					<view class="price">38</view>
					<view class="text">三八女神节特惠券</view>
				</view>
				<view class="desc">使用范围：所有产品品类可用</view>
				<view class="desc">使用条件：满100元可用</view>
				<view class="desc">有效日期：至 2023-03-31</view>
				<view class="side">
					<image class="state-2" src="../../static/img_coupon_state_2.png"></image>
				</view>
			</view>
			<view class="item disabled">
				<view class="name">
					<view class="price">100</view>
					<view class="text">财税代金券</view>
				</view>
				<view class="desc">使用范围：所有产品品类可用</view>
				<view class="desc">使用条件：满100元可用</view>
				<view class="desc">有效日期：至 2023-03-31</view>
				<view class="side">
					<image class="state-2" src="../../static/img_coupon_state_2.png"></image>
				</view>
			</view>
		</view>
		<button class="foot-btn">去领券中心看看</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabActive: 1,
			tabList: [
				{
					label: '未使用',
					value: 1
				},
				{
					label: '已使用',
					value: 2
				},
				{
					label: '已失效',
					value: 3
				}
			]
		};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.page-wrap {
	padding: 82.42rpx 0 96.15rpx;
}
.tabs-panel {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	height: 82.42rpx;
	background: #fff;
	display: flex;
	padding: 0 41.21rpx;
	z-index: 1;

	&::before,
	&::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		height: 1rpx;
		background: #e0e0e0;
	}

	&::before {
		top: 0;
	}

	&::after {
		bottom: 0;
	}

	.item {
		padding: 0 9.62rpx;
		text-align: center;
		font-size: 27.47rpx;
		color: #999;
		line-height: 82.42rpx;
		position: relative;

		& + .item {
			margin-left: 27.47rpx;
		}
	}

	.active {
		color: #00bcd2;

		&::after {
			content: '';
			position: absolute;
			left: 0%;
			right: 0%;
			bottom: 0%;
			height: 5.49rpx;
			background: #00bcd2;
			z-index: 1;
		}
	}
}
.coupon-panel {
	.item {
		width: 708.79rpx;
		height: 192.31rpx;
		border-radius: 8.24rpx;
		position: relative;
		overflow: hidden;
		padding: 27.47rpx 233.52rpx 27.47rpx 41.21rpx;
		box-sizing: border-box;
		margin: 13.74rpx auto;
		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: #fff;
			-webkit-mask-image: radial-gradient(circle at 13.74rpx 50%, transparent 13.74rpx, red 13.74rpx);
			-webkit-mask-position: -13.74rpx;
			z-index: -1;
		}
		&::after {
			content: '';
			position: absolute;
			right: -27.47rpx;
			top: 0;
			height: 100%;
			width: 239.01rpx;
			background: #fe6e6d;
			-webkit-mask-image: radial-gradient(circle at 5rpx, transparent 6rpx, red 6rpx);
			-webkit-mask-position: -6rpx;
			-webkit-mask-size: 100% 19rpx;
			z-index: -1;
		}
		&.disabled::after {
			background: #ccc;
		}
	}
	.name {
		font-size: 30.22rpx;
		height: 68.68rpx;
		display: flex;
		align-items: center;
		margin-top: -14rpx;
		.text {
			flex: 1;
			width: 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.price {
			line-height: 1;
			margin: -14rpx 10rpx 0 0;
		}
	}
	.desc {
		font-size: 24.73rpx;
		color: #999;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.3;
	}
	.side {
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		width: 211.54rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 21.98rpx;
		color: #fff;
		padding-top: 27.47rpx;
	}
	.price {
		font-size: 68.68rpx;
		&:before {
			content: '￥';
			font-size: 38.46rpx;
		}
	}
	.state-1 {
		width: 182.69rpx;
		height: 120.88rpx;
		margin-top: 13.74rpx;
	}
	.state-2 {
		width: 189.56rpx;
		height: 130.49rpx;
		margin-top: 8.24rpx;
	}
}
.foot-btn {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 96.15rpx;
	background: #fff;
	font-size: 30.22rpx;
	color: #00bcd2;
	line-height: 96.15rpx;
	border: none;
	border-radius: 0;
	&:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1rpx;
		background: #e0e0e0;
	}
	&::after {
		display: none;
	}
}
</style>