charge_miniapp/pages/coupons/coupons.vue

<template>
	<ax-body>
		<!-- <template #title></template> -->
		<view class="page-background">
			<image :src="couponsBg" mode="widthFix"></image>
		</view>
		<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: 350rpx;"></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 == 0" class="not-data">
					<image src="@/static/img/empty.svg" mode="widthFix" class="icon"></image>
					<view>暂无数据</view>
				</view>
			</view>
		</view>
	</ax-body>
</template>

<script>
export default {
	data() {
		return {
			coupons_card: 'https://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/bNfT8BQFvtcead404bdf22856fe1306af8fbb672a74c.png/1.png',
			couponsBg: 'https://charge.hub.zswlgz.com/apifile//2025/12/09/YXVyOk6RqkKi2a5b93800594ecafd15e6599498e7e90_20251209095058A002.png',
			currentIndex: 0, // 默认选中第一个选项卡
			tabsList: [{
				text: '待领取',
				id: 0,
				count: 0
			}, {
				text: '待使用',
				id: 1,
				count: 0
			}, {
				text: '已使用',
				id: 2,
				count: 0
			}, {
				text: '已过期',
				id: 3,
				count: 0
			}],
			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()
		},
		get_TobeclaimedCoupons() {
			if (this.currentIndex == 0) {
				this.$api.base("get", "/applet/v1/user/getCouponTemplatePage", {
					pageNum: this.form_submit.pageNum,
					pageSize: this.form_submit.pageSize,
					status: this.form_submit.status
				}, {}).then(res => {
					this.toBeclaimedCoupons = res.data.records
					this.tabsList[0].count = res.data.total
				})
			} else {
				this.$api.base("post",
					`/applet/v1/user/getCouponPage`, {
					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.data.records
					} else {
						this.toBeclaimedCoupons = [...this.toBeclaimedCoupons, ...res.data.records]
					}
				})
			}

		},
		get_statistical() {
			this.$api.base("get", "/applet/v1/user/getCouponStatusNum", {}, {}).then(res => {
				this.tabsList[1].count = res.data.unusedNum
				this.tabsList[2].count = res.data.usedNum
				this.tabsList[3].count = res.data.expiredNum
			})
		},
		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", "/applet/v1/user/gainCoupon", {
					couponCode: e.code
				}, {}).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>