xingmingyi_applet/pages/user/coupon/coupon.vue

<template>
	<view class="pageCon">
		<view class="list dfsb" v-for="(item, ind) in list" :key="ind">
			<view class="left">
				<view class="num">
					{{ item.reduce }}
					<text class="red fontssm">元</text>
				</view>
				<text class="textgrey fontssm">{{ item.satisfy }}元以上使用</text>
			</view>
			<view class="center flex1 dffd">
				<text class="bold fontbase">{{ item.names }}</text>
				<view class="red fontsm">{{ item.content }}</view>
				<text class="textgrey fontsm">有效期至{{ item.end_time }}</text>
			</view>
			<view @click="getHand(item)" class="right red fontssm">立即领取</view>
		</view>
		<u-empty v-if="list.length<1" text="还没有优惠券" mode="coupon"></u-empty>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				// {
				// 	money: 5,
				// 	name: '资源通用下载券',
				// 	content: '用于下载5元以内资源1次',
				// 	time: '有效期至2021.11.03'
				// },
			],
			status: 'loading',
			page: 1,
			pagenum: 10
		};
	},
	onPullDownRefresh() {
		this.page = 1;
		this.list = [];
		this.onload();
		setTimeout(res => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom() {
		if (this.status == 'nomore') return;
		this.status = 'loading';
		this.page = ++this.page;
		this.onload();
	},
	onLoad(opt) {
		this.onload();
	},
	methods: {
		getHand(item) {
			this.$api
				.request('coupon/userReceive', {
					coupon_id: item.id
				})
				.then(data => {
					this.$api.toast(data.msg);
					if (data.code == '200') {
						setTimeout(res => {
							this.page = 1;
							this.list = [];
							this.onload();
						}, 600);
					}
				});
		},
		onload() {
			this.$api
				.request('coupon/getCouponList', {
					flag: 0,
					page: this.page,
					limit: this.pagenum
				})
				.then(data => {
					if (data.code == '200') {
						this.list = this.list.concat(data.data);
						if (data.data.length < this.pagnum) {
							this.status = 'nomore';
						}
					} else {
						this.$api.toast(data.msg);
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.pageCon {
	padding: 20rpx 30rpx;
	.list {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 32rpx 30rpx;
		margin-bottom: 20rpx;
		.left {
			padding-right: 29rpx;
			border-right: 1rpx solid #dedede;
			.num {
				font-size: 80rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #f03a2f;
				line-height: 112rpx;
			}
		}
		.center {
			justify-content: space-between;
			margin: 0 30rpx;
			align-items: flex-start;
			.red {
				margin: 20rpx 0;
			}
		}
		.right {
			padding: 10rpx 20rpx;
			border-radius: 28rpx;
			border: 1px solid #e93837;
		}
	}
	.tips {
		margin-top: 70rpx;
		font-size: 26rpx;
		justify-content: center;
		.prosecond {
			font-size: 26rpx;
		}
	}
}
</style>