xingmingyi_applet/pages/user/coupon/myCoup.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="useHandle(item)" class="right red fontssm">立即使用</view>
		</view>
		<u-empty v-if="list.length<1" text="还没有优惠券" mode="coupon"></u-empty>
		<navigator url="/pages/user/coupon/coupon" class="tips textgrey dffs">
			去领取更多
			<view class="prosecond dffs">
				优惠券
				<u-icon size="14" color="#ED742E" name="arrow-right"></u-icon>
			</view>
		</navigator>
	</view>
</template>

<script>
export default {
	data() {
		return {
			money:'',   //文档  商品使用优惠券时带来的价格
			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.money=opt.money||0;
		this.onload();
	},
	methods: {
		// 立即使用
		useHandle(item){
			if(this.money){
				if(Number(this.money)<Number(item.satisfy)) return this.$api.toast('满'+item.satisfy+'元使用')
				this.$api.prePage().coupon=item;
				uni.navigateBack({
					delta:1
				})
			}else{
				uni.redirectTo({
					url:'/pages/index/index'
				})
			}
		},
		onload() {
			this.$api
				.request('coupon/userCoupon', {
					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>