teambuy-front/pages_order/mine/coupon.vue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<navbar title="优惠券" leftClick @leftClick="$utils.navigateBack" bgColor="#019245" color="#fff" />

		<!-- 标签页 -->
		<uv-sticky bgColor="#fff">
			<uv-tabs :list="tabs" @change="changeTab" :scrollable="false" lineColor="#019245"
				:activeStyle="{color: '#019245' }" lineWidth="80" lineHeight="6" :inactiveStyle="{color: '#333'}"
				:itemStyle="{height: '90rpx'}" />
		</uv-sticky>

		<!-- 优惠券列表 -->
		<view class="coupon-list">
			<template v-if="currentTab === 0">
				<coupon-item v-for="coupon in unusedCoupons" :key="coupon.id" :coupon="coupon" @use="useCoupon" />
				<uv-empty v-if="unusedCoupons.length == 0" text="暂无优惠卷" textSize="30rpx" iconSize="200rpx"
					style="padding-top: 100rpx;" icon="list" />

			</template>

			<template v-if="currentTab === 1">
				<coupon-item v-for="coupon in usedCoupons" :key="coupon.id" :coupon="coupon" />
				<uv-empty v-if="usedCoupons.length == 0" text="暂无优惠卷" textSize="30rpx" iconSize="200rpx"
					style="padding-top: 100rpx;" icon="list" />
			</template>

			<template v-if="currentTab === 2">
				<coupon-item v-for="coupon in expiredCoupons" :key="coupon.id" :coupon="coupon" />
				<uv-empty v-if="expiredCoupons.length == 0" text="暂无优惠卷" textSize="30rpx" iconSize="200rpx"
					style="padding-top: 100rpx;" icon="list" />
			</template>
		</view>
	</view>
</template>

<script>
import navbar from '@/components/base/navbar.vue'
import CouponItem from '@/components/coupon/CouponItem.vue'
import { unusedCoupons, usedCoupons, expiredCoupons } from '@/static/js/mockCoupon.js'

export default {
	components: {
		navbar,
		CouponItem
	},
	data() {
		return {
			tabs: [
				{ name: '未使用' },
				{ name: '已使用' },
				{ name: '已过期' }
			],
			currentTab: 0,
			unusedCoupons: [],
			usedCoupons: [],
			expiredCoupons: []
		}
	},
	onLoad() {
		// 从mock数据获取优惠券列表
		this.unusedCoupons = unusedCoupons
		this.usedCoupons = usedCoupons
		// 暂时	没有已过期的优惠卷
		// this.expiredCoupons = expiredCoupons 
	},
	methods: {
		// 切换标签页
		changeTab(item) {
			this.currentTab = item.index
		},	

		// 使用优惠券
		useCoupon(coupon) {
			uni.showModal({
				title: '提示',
				content: `确定使用面值${coupon.amount}元的优惠券吗？`,
				success: (res) => {
					// 模拟使用优惠券
					uni.showLoading({
						title: '使用中...'
					})
					setTimeout(() => {
						uni.hideLoading()
						uni.showToast({
							title: '使用成功',
							icon: 'success'
						})
						setTimeout(() => {
							if (res.confirm) {
								this.$utils.navigateTo('/pages/order/index')
							}
						}, 1000)
					}, 1000)
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
	.tabs-container {
		.coupon-list {
			padding: 30rpx;
		}
		
		.empty-tip {
			text-align: center;
			color: $uni-color-third;
			padding: 100rpx 0;
			font-size: 28rpx;
		}
	}
}


</style>