XEH-miniProgram/pages/self/coupon/center.vue

<template>
	<view class="page-wrap">
		<view class="coupon-panel">
			<view class="item" v-for="(item, index) in couponList" :key="index">
				<view class="name">
					<view class="price">{{ item.showMoney }}</view>
					<view class="text">{{ item.name }}</view>
				</view>
				<view class="desc time">有效日期：{{ item.endTime ? '至 ' + item.endTime : '无限制' }}</view>
				<view class="desc">{{ item.productIds || item.categoryIds ? '指定产品品类可用' : '所有产品品类可用' }}</view>
				<view class="desc">{{ item.line ? `满${item.line}元可用` : '无限制' }}</view>
				<view class="side" v-if="item.leftNumber">
					<text class="number">仅剩\n{{ item.leftNumber }}张</text>
					<button class="btn" @click="handleClaim(item.couponId)">可领{{ item.everyoneMax }}张</button>
				</view>
				<view class="side" v-else>
					<view class="over">已领完</view>
					<text>持续发放中\n下次再领</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import couponService from '@/api/coupon.js';
export default {
	data() {
		return {
			couponList: []
		};
	},
	onLoad() {
		this.getCouponList();
	},
	onPullDownRefresh() {
		this.getCouponList();
	},
	methods: {
		// 获取优惠券列表
		async getCouponList() {
			const { tabActive } = this;
			const { rows } = await couponService.getCouponList();
			this.couponList = rows;
			uni.pageScrollTo({ scrollTop: 0 });
			uni.stopPullDownRefresh();
		},
		// 领取优惠券
		async handleClaim(id) {
			try {
				await couponService.claimCoupon(id);
				setTimeout(() => {
					uni.showToast({
						title: '领取成功',
						icon: 'none'
					});
				}, 100);
				this.getCouponList();
			} catch {
				this.getCouponList();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.coupon-panel {
	padding: 13.74rpx 0;
	.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: #00bdef;
			-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;
		text-align: center;
	}
	.price {
		font-size: 68.68rpx;
		&:before {
			content: '￥';
			font-size: 38.46rpx;
		}
	}
	.number {
		font-size: 27.47rpx;
		line-height: 38.46rpx;
	}
	.over {
		font-size: 30.22rpx;
		margin: 13.74rpx 0 20.6rpx;
	}
	.time {
		color: #000;
	}
	.btn {
		width: 164.84rpx;
		height: 49.45rpx;
		background: #fff;
		border-radius: 8.24rpx;
		color: #00bdef;
		font-size: 24.73rpx;
		line-height: 49.45rpx;
		padding: 0;
		margin-top: 13.74rpx;
	}
}
.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>