reservation-uniapp-250509/service-uniapp-client/pages/mine/coupon.vue

<template>
	<view>
		<mNavbar title="我的优惠劵"
		:leftClick="toLeft"
		style="background: linear-gradient(#4899a6, rgb(78 160 167));"
		/>
		
		<view style="position: sticky;top: 45px;z-index: 99;">
			<van-tabs v-model:active="active"
			title-active-color="var(--van-primary-color)"
			@change="clickTabs"
			>
				<van-tab :title="item.name"
				v-for="(item, index) in tabs"
				:key="index"></van-tab>
			</van-tabs>
		</view>
		
		<van-list
		  v-model:loading="loading"
		  :finished="finished"
		  @load="onLoad"
		>
			<couponList :list="couponList" @select="toHome"/>
		</van-list>
	</view>
</template>

<script>
	import couponList from '/components/couponList.vue'
	import mNavbar from '@/components/base/m-navbar.vue'
	export default {
		components : {
			couponList,
			mNavbar
		},
		data() {
			return {
				value : '',
				tabs : [
					{
						name: '待使用优惠劵',
					}, {
						name: '已使用优惠劵',
					}, {
						name: '已过期优惠劵'
					}
				],
				active : 0,
				queryParams : {
					pageNo : 1,
					pageSize : 10,
				},
				couponList : [],
				loading : false,
				finished : false,
			}
		},
		onShow(){
			this.getCouponList()
		},
		methods: {
			onLoad(){
				this.queryParams.pageSize += 10
				this.getCouponList()
			},
			//获取优惠券列表
			getCouponList(){
				this.$api('getCouponList' , {
					...this.queryParams,
					state : this.active
				} , res => {
					if(res.code == 200){
						this.couponList = res.result.records;
						if(this.queryParams.pageSize > res.result.total){
							this.finished = true
						}
					}
					this.loading = false
				})
			},
			toLeft(){
				uni.switchTab({
					url: '/pages/index/center'
				})
			},
			clickTabs(e){
				this.getCouponList()
			},
			onClickButton(){
				
			},
			toHome(){		//跳转首页
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.btn{
	padding: 0px 30rpx;
	background-color: #4FD3BC;
	color: #fff;
	font-size: 22rpx;
	margin-left: 20rpx;
	font-size: 20rpx;
	border-radius: 30rpx;
}
</style>