medicine-xcx/pages/my/coupon/coupon.vue

<template>
	<view class="coupon">
		<view class="position-fixed top-0 left-0 bg-white vw-100 zIndex-2">
			<u-tabs font-size="34" :list="list" :is-scroll="false" :current="current" @change="change" active-color="#01AEEA" />
		</view>
		<view class="coupon-container" v-if="couponData.length>0">
			<view class="items" v-for="item in couponData" :key="item.id">
				<text class="title font-28">优惠券</text>
				<text class="price font-40">{{item.name}}</text>
				<text>有效期至：{{item.validTime}}</text>
				<button class="btn" type="default" @click="chooseCoup(item)">立即使用</button>
				
				<view class="position-absolute zIndex-1 coupon-invalid" v-if="item.useFlag == 1">
					<view class="coupon-invalid-image position-absolute">
						<image :src="IMG_URL + 'my/invalid.png'" mode="widthFix"></image>
					</view>
				</view>
				
			</view>
		</view>
		
		<view v-if="!couponData.length">
			<u-empty margin-top="450" text="暂无优惠券~" mode="list" ></u-empty>
		</view>
	</view>
</template>
<!-- invalid -->
<script>
	import { IMG_URL } from '@/env.js'
	export default {
		data () {
			return {
				IMG_URL,
				list: [{
					name: '待使用'
				}, {
					name: '已过期'
				}],
				options: {},
				current: 0,
				couponData: [],
				pageNo: 1,
				pageSize: 10,
				total: null,
				isLock: true,
			}
		},
		onLoad(options) {
			this.options = options
			this.getCouponPage()
		},
		onPullDownRefresh() {
			this.couponData = [];
			this.pageNo = 1;
			this.total = null;
			this.isLock = true;
			this.getCouponPage()
		},
		onReachBottom() {
			if(this.isLock){
				this.isLock = false;
				if(this.total !== null && this.pageNo * this.pageSize >= this.total){
					this.$Toast('没有更多数据了哦！');
					setTimeout(()=>{
						this.isLock = true;
					},3000)
					return
				}
				this.pageNo+=1;
				this.getCouponPage();
			}
		},
		methods: {
			getCouponPage() {
				uni.showLoading();
				const params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					type: this.current,
					id: this.options?.id ||　null
				}
				this.$api('getCouponPage',params).then(res => {
					let { code, result, message} = res;
					if(code == 200) {
						if(this.total == null) {
							this.total = result.total;
						}
						// 处理 图片
						this.couponData = this.couponData.concat(result.records)
						console.log(result);
					}else {
						this.$Toast(message);
					}
					uni.hideLoading()
					uni.stopPullDownRefresh()
					this.isLock = true;
				}).catch(err => {
					uni.hideLoading()
					this.isLock = true;
					uni.stopPullDownRefresh()
					this.$Toast(err.message);
				})
			},
			chooseCoup(item) {
				if (this.options?.id) {
					uni.$emit('coupon', item)
					uni.navigateBack({
						delta: 1
					})
				} else {
					this.$tools.navigateTo({
						url: '/pagesC/goodsInfo/goodsInfo?type=home&id='+ item.goodsId
					})
				}
			},
			change(index) {
				this.current = index;
				this.couponData = [];
				this.pageNo = 1;
				this.total = null;
				this.isLock = true;
				this.getCouponPage()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon{
		&-container {
			padding: 100rpx 20rpx 20rpx;
			box-sizing: border-box;
		}
		
		&-invalid {
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			border-radius: 10rpx;
			background: rgba(0,0,0,0.3);
			&-image {
				width: 200rpx;
				right: 40rpx;
				bottom: 20rpx;
			}
		}
		
		.items{
			margin-bottom: 40rpx;
			background: url('https://hanhai-image-dev.oss-cn-guangzhou.aliyuncs.com/blindbox/youhuiquan.png') no-repeat;
			background-size: cover;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 40rpx 30rpx;
			border-radius: 10rpx;
			text{
				margin-top: 20rpx;
				color: #FFFFFF;
				font-size: 24rpx;
			}
			.title{
				font-size: 30rpx;
			}
			.price{
				font-size: 36rpx;
			}
			.btn{
				position: absolute;
				right: 15rpx;
				top: 100rpx;
				width: 146rpx;
				height: 58rpx;
				padding: 0rpx;
				// border: 1rpx solid #fb7b5e;
				border-radius: 17rpx;
				box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16);
				background: #ffffff;
				font-size: 24rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	
	.noCoupon {
		text-align: center;
	}
	
	.giving-box {
		width: 602rpx;
		.giving-title {
			padding:40rpx 0;
			width: 100%;
			font-size: 37rpx;
			color: #000000;
			text-align: center;
		}
		.giving-cont {
			padding: 0 41rpx;
			.input-box {
				background-color: #F5F5F5;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx 21rpx;
				font-size: 30rpx;
				color: #000000;
				margin-bottom: 24rpx;
				border-radius: 10rpx;
			}
		}
		.giving-btn {
			padding-bottom: 30rpx;
			margin-top: 85rpx;
			.custom-style {
				width: 374rpx;
				height: 77rpx;
				background-color: #000000;
				color: #FFFfff;
			}
		}
	}
</style>