jewelry-front/components/couponList/couponList.vue

<template>
	<scroll-view scroll-y="true" :style="{height: height}" @scrolltolower="moreCoupon()">
		<!-- 优惠券列表 -->
		<view class="list">
			<view class="item" v-for="item in couponList" @click="select(item)" :key="item.id"
				:class="['status-' + item.state]">
				<image src="@/pages_order/static/coupon/coupon-bg.png" mode="widthFix" class="coupon-bg"></image>

				<view class="item-con">
					<view class="price-time">
						<view class="price">
							<view class="num">
								<view class="icon">
									￥
								</view>
								{{ item.money }}
							</view>
						</view>

						<view class="date-tiao">
							<view class="time">
								限{{ formatDate(item.stateTime) }} - {{ formatDate(item.endTime) }}
							</view>
							<view class="tiao">
								满{{ item.useMoney }}可用
							</view>
						</view>
					</view>

					<view class="status">
						<view class="order-status">
							<image src="@/pages_order/static/coupon/status.png" mode="widthFix" class="status-img">
							</image>
							<view class="text">
								{{ status[item.state] }}
							</view>
						</view>

						<!-- <view class="surplus">
							剩余28天过期
						</view> -->
					</view>
				</view>
			</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() {
				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 {

		.item {
			color: #FDDFCD;
			position: relative;
			width: calc(100% - 40rpx);
			height: 220rpx;
			background-size: 100% 100%;
			margin: 20rpx;
			box-sizing: border-box;
			padding: 30rpx;

			.coupon-bg {
				width: 100%;
				position: absolute;
				left: 0rpx;
				top: 0rpx;
			}

			.item-con {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				position: absolute;
				top: 50%;
				left: 0rpx;
				transform: translateY(-50%);
				z-index: 99;
				width: 100%;

				.price-time {
					display: flex;
					width: 65%;

					.price {
						display: flex;
						align-items: center;

						.num {
							color: #FFF8E9;
							font-weight: 900;
							font-size: 70rpx;
							display: flex;
							align-items: flex-end;

							.icon {
								color: #FFF8E9;
								width: 30rpx;
								height: 30rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 20rpx;
								border-radius: 14rpx;
								margin-bottom: 14rpx;
								margin-right: 10rpx;
							}
						}
					}

					.date-tiao {
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 24rpx;
						box-sizing: border-box;
						padding-left: 20rpx;

						.time {}

						.tiao {
							display: flex;
							justify-content: center;
							background: #FDE5BA;
							border-radius: 40rpx;
							color: #FF2E34;
							padding: 5rpx 20rpx;
							margin-top: 15rpx;
						}
					}
				}

				.status {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 35%;
					color: #FD4231;
					padding-top: 30rpx;

					.order-status {
						position: relative;
						width: 180rpx;

						.status-img {
							position: absolute;
							left: 0;
							width: 100%;
						}

						.text {
							height: 90rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							position: relative;
							z-index: 100;
							font-size: 34rpx;
							font-weight: bold;
						}
					}

					.surplus {
						font-size: 22rpx;
						text-align: center;
						margin-top: 10rpx;
					}
				}
			}
		}

		.status-0 {
			opacity: 1;
		}

		.status-1 {
			opacity: .9;
		}

		.status-2 {
			opacity: .6;
		}

		.del {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #ffffff99;
			z-index: 99;
		}
	}
</style>