massage-front/components/couponList/couponList.vue

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

				<text class="list-item-count">{{ item.discountAmount }}</text>
				<text class="list-item-deadline">{{ `有效期至${item.validDate ? $dayjs(item.validDate).format('YYYY-MM-DD') : '-'}` }}</text>
			</view>
		</view>

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

<script>

	import dayjs from 'dayjs'
	import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'

	dayjs.extend(isSameOrBefore)

	export default {
		name: 'CouponList',
		props: {
			status: {
				type: String | Number,
				default: 'all'
			},
			height: {
				default: 'calc(90vh - 180rpx)'
			},
			maxLimit: {
				type: Number,
				default: null,
			}
		},
		data() {
			return {
				queryParams: {
					pageNo: 1,
					pageSize: 10
				},
				couponList: [],
				total: 0
			}
		},
		watch: {
			status: function() {
				this.getCouponList()
			}
		},
		// #ifndef H5
		mounted() {
			this.getCouponList()
		},
		// #endif
		methods: {
			getDisabled(item) {
				return this.maxLimit && (item.discountAmount > this.maxLimit)
			},
			select(item) {
				if (this.getDisabled(item)) {
					return
				}

				this.$emit('select', item)
			},
			isValid(obj) {
				const { validDate } = obj

				return dayjs().isSameOrBefore(dayjs(validDate), 'day')
			},
			//获取优惠券列表
			getCouponList() {
				let params = {
					...this.queryParams,
					type: 0, // type：0-抵扣 1-代金券
				}

				// todo: check “已过期”
				// status: 0-未使用 1-已使用
				if (this.status === 'all') {
					delete params.status
				} else {
					params.status = this.status
				}
				
				this.$api('queryVouchersList', params, res => {
					if (res.code == 200) {
						this.couponList = res.result.records.map(item => {
							let status = item.status

							if (!this.isValid(item)) {
								status = 2
							}

							return { ...item, status }
						})
						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()
			},
		},
	}
</script>

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

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

			&.is-disabled {
				opacity: 0.5;
			}

			&-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>