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 textHidden">{{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 textHidden" 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" @click="goto_orderDetail(item)">查看订单</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.toBeclaimedCoupons = []
				this.get_TobeclaimedCoupons()
				this.get_statistical()
			},
			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;
					});
				})
			},
			goto_orderDetail(e) {
				uni.navigateTo({
					url: `/pages/order-detail/order-detail?orderId=${e.useOrderId}`
				})
			},
			get_coupons(e) {
				if (e.dayReceiveCount > e.totalCount) return this.$app.popup.toast('您来慢了~该优惠券已被领完')
				uni.showLoading({
					mask:true
				});
				let timer = setInterval(() => {
					clearInterval(timer)
					this.$api.base("post", "/couponApi/receive", {
						templateId: e.id
					}, {}).then(res => {
						uni.hideLoading()
						if (res.code == 0) {
							this.get_statistical()
							this.get_TobeclaimedCoupons()
							this.$app.popup.toast('领取成功')
						}
					})
				}, 100);
			}
		}
	};
</script>

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