massage-front/components/couponList/couponList.vue

<template>
	<scroll-view scroll-y="true" :style="{height: height}" @scrolltolower="moreCoupon()">
		<!-- 优惠券列表 -->
		<view class="list">
			<view class="list-item" v-for="item in couponList" @click="select(item)" :key="item.id">
				
				<!-- 已领取 -->
				<template v-if="item.state === 0">
					<image class="list-item-bg" src="@/pages_order/static/coupon/coupon-bg-useful.png" ></image>
				</template>
				<!-- 已使用 -->
				<template v-else-if="item.state === 1">
					<image class="list-item-bg" src="@/pages_order/static/coupon/coupon-bg-used.png" ></image>
				</template>
				<!-- 已过期 -->
				<template v-else-if="item.state === 2">
					<image class="list-item-bg" src="@/pages_order/static/coupon/coupon-bg-overtime.png" ></image>
				</template>

				<text class="list-item-count">{{ item.money }}</text>
				<text class="list-item-deadline">{{ `有效期至${item.endTime}` }}</text>
			</view>
		</view>

		<uv-empty v-if="couponList.length == 0" text="空空如也" textSize="30rpx" iconSize="200rpx" icon="list"></uv-empty>
	</scroll-view>
</template>

<script>
	export default {
		name: 'CouponList',
		data() {
			return {
				status: ['已领取', '已使用', '已过期'],
				queryParams: {
					pageNo: 1,
					pageSize: 10
				},
				couponList: [],
				total: 0
			}
		},
		methods: {
			select(item) {
				this.$emit('select', item)
			},

			//获取优惠券列表
			getCouponList() {
				// todo: delte test data

				this.couponList = [
					{
						state: 0,
						money: 40,
						endTime: '2025-06-12',
					},
					{
						state: 1,
						money: 40,
						endTime: '2025-06-12',
					},
					{
						state: 2,
						money: 40,
						endTime: '2025-06-12',
					},
				]
				return
				let requestData = {
					...this.queryParams,
					state: this.state ? this.state : 0
				}
				this.$api('getRiceCouponList', requestData, res => {
					if (res.code == 200) {
						this.couponList = res.result.records
						this.total = res.result.total
					}
				})
			},

			//格式化年月日
			formatDate(date) {
				if(!date){
					return ''
				}
				date = new Date(date.replace(/-/g,'/'));
				// const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并且确保是两位数
				const day = String(date.getDate()).padStart(2, '0'); // 确保日期是两位数

				return `${month}-${day}`;
			},

			// 加载更多
			moreCoupon() {
				if (this.queryParams.pageSize > this.total) return
				this.queryParams.pageSize += 10
				this.getCouponList()
			},
		},
		props: {
			state: {
				type: Number,
				default: 0
			},
			height: {
				default: 'calc(90vh - 180rpx)'
			}
		},
		watch: {
			state: function(newValue) {
				this.getCouponList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		padding: 32rpx 50rpx;

		&-item {
			width: 100%;
			height: 211rpx;
			position: relative;

			&-bg {
				width: 100%;
				height: 100%;
			}

			&-count {
				position: absolute;
				top: 40rpx;
				left: 48rpx;
				color: $uni-color-light;
				font-size: 78rpx;
				font-weight: 900;
				line-height: 110rpx;
			}

			&-deadline {
				position: absolute;
				bottom: 58rpx;
				left: 156rpx;
				color: $uni-color-light;
				font-size: 22rpx;
			}
		}
	}
</style>