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: 200rpx;" 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: 200rpx;" 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: 200rpx;" icon="list" />
			</template>
		</view>
	</view>
</template>

<script>
import navbar from '@/components/base/navbar.vue'
import CouponItem from '@/components/coupon/CouponItem.vue'

export default {
	components: {
		navbar,
		CouponItem
	},
	data() {
		return {
			tabs: [
				{ name: '未使用' },
				{ name: '已使用' },
				{ name: '已过期' }
			],
			currentTab: 0,
			allCoupons: []
		}
	},
	computed: {
		unusedCoupons() {
			return (this.allCoupons || []).filter(coupon => coupon.status === "0")
		},
		usedCoupons() {
			return (this.allCoupons || []).filter(coupon => coupon.status === "1")
		},
		expiredCoupons() {
			return (this.allCoupons || []).filter(coupon => coupon.status === "2")
		}
	},
	onLoad() {	
		this.getCoupon()
	},
	methods: {
		// 切换标签页
		changeTab(item) {
			this.currentTab = item.index
		},	

		// 使用优惠券
		useCoupon(coupon) {
			uni.showModal({
				title: '提示',
				content: `确定使用面值${coupon.discount}元的优惠券吗？`,
				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)
				},
				fail: (err) => {
					console.log('err', err)
				}
			})
		},
		// 获取优惠卷
		getCoupon() {
			this.$api('queryCouponList', {
				pageNo: 1,
				pageSize: 10000
			}, res => {
				if (res.code === 200){
					this.allCoupons = res.result.records
				}
			})
		}
	}
}
</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>