charge_miniapp/pages/coupons/coupons.vue

<template>
	<view class="tabs-body">
		<view class="tabs-box">
			<view class="item-tabs" :class="{active:currentIndex===item.id}" v-for="item in tabsList" :key="item.id"
				@click="handleTabClick(item)">{{item.text}}({{item.count||0}})</view>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="list-body">
			<view class="coupons-list-box" :style="{opacity:`${currentIndex===3?'0.5':''}`}"
				v-for="item in toBeclaimedCoupons" :key="item.id">
				<image class="coupons-bg-img" :src="coupons_card" mode=""></image>
				<view class="coupons-content-box">
					<view class="coupons-left">
						<view class="left-price">{{item.discountPrice}}<text>元</text></view>
						<view class="left-rules">满{{item.usePrice}}元可用</view>
					</view>
					<view class="coupons-center">
						<view class="coupons-title">{{item.name}}</view>
						<view class="coupons-valid" v-if="currentIndex==0">有效期：领取后{{item.failureTime}}天</view>
						<view class="coupons-valid" v-else>{{item.validEndTime}}到期</view>
						<view class="coupons-range">平台所有充电桩可用</view>
					</view>
					<view class="coupons-right">
						<view class="coupons-dayrules" v-if="currentIndex===0">{{item.description}}</view>
						<view class="coupons-getbtn" v-if="currentIndex===0" @click="get_coupons(item)">立即领取</view>
						<view class="coupons-getbtn" v-if="currentIndex===2">查看订单</view>
					</view>
				</view>
				<view class="ribbon"
					:style="{backgroundColor:`${currentIndex===3?'#e8e8e8':''}`,color:`${currentIndex===3?'#8c8c8c':''}`}">
					{{tabsList[currentIndex].text}}
				</view>
			</view>
			<view style="height: 30rpx;"></view>
			<view v-if="toBeclaimedCoupons.length<1" class="not-data">
				<image src="@/static/img/empty.svg" mode="widthFix" class="icon"></image>
				<view>暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				coupons_card: 'https://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/bNfT8BQFvtcead404bdf22856fe1306af8fbb672a74c.png/1.png',
				currentIndex: 0, // 默认选中第一个选项卡
				tabsList: [{
					text: '待领取',
					id: 0
				}, {
					text: '待使用',
					id: 1
				}, {
					text: '已使用',
					id: 2
				}, {
					text: '已过期',
					id: 3
				}],
				toBeclaimedCoupons: [],
				totalNumber:0,
				form_submit: {
					pageNum: 1,
					pageSize:10,
					status:1,
				}
			};
		},
		onLoad() {
			this.get_statistical()
		},
		onReachBottom(e) {
			this.form_submit.pageNum++
			if(this.totalNumber>this.toBeclaimedCoupons.length){
				this.get_TobeclaimedCoupons()
			}
		},

		mounted() {
			this.get_TobeclaimedCoupons()
		},
		methods: {
			handleTabClick(e) {
				this.currentIndex = e.id;
				this.form_submit.status=e.id
				this.get_TobeclaimedCoupons()
			},
			get_TobeclaimedCoupons() {
				if (this.currentIndex == 0) {
					this.$api.base("post", "/couponApi/list-pending", {}, {}).then(res => {
						this.toBeclaimedCoupons = res.list
					})
				} else {
					this.$api.base("post",`/couponApi/list-user?pageNum=${this.form_submit.pageNum}&pageSize=${this.form_submit.pageSize}&status=${this.form_submit.status}`,{}, {}).then(res => {
						this.totalNumber=res.total
						if(this.form_submit.pageNum==1){
							this.toBeclaimedCoupons = res.rows
						}else{
							this.toBeclaimedCoupons=[...this.toBeclaimedCoupons,...res.rows]
						}
					})
				}

			},
			get_statistical(){
				// 数据映射
				const idToKeyMap = {
				  0: 'list-pending',
				  1: 'list-unused',
				  2: 'list-used',
				  3: 'list-overdue'
				};
				this.$api.base("post", "/couponApi/statistical", {}, {}).then(res => {
					this.tabsList.forEach(tab => {
					  const key = idToKeyMap[tab.id];
					  tab.count = res.data[key] || 0;
					});
				})
			},
			
			get_coupons(e){
				this.$api.base("post", "/couponApi/receive", {templateId:e.id}, {}).then(res => {
					if(res.code==0){
						this.get_statistical()
						this.get_TobeclaimedCoupons()
						this.$app.popup.toast('领取成功')
					}
				})
			}
		}
	};
</script>

<style>
	@import url("coupons");
</style>