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" v-if="!usein">
			<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'
import { mapState } from 'vuex'

export default {
	components: {
		navbar,
		CouponItem
	},
	data() {
		return {
			tabs: [
				{ name: '未使用' },
				{ name: '已使用' },
				{ name: '已过期' }
			],
			currentTab: 0,
			allCoupons: [],
			usein: false // 是否是跳进来选择使用的情况
		}
	},
	computed: {
		...mapState(['couponData']),
		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(args) {	
		this.getCoupon()
		if (args.usein === '1') {
			this.usein = true
		}
	},
	methods: {
		// 切换标签页
		changeTab(item) {
			this.currentTab = item.index
			this.getCoupon()
		},	

		// 使用优惠券
		useCoupon(coupon) {
			if (this.usein) {
				uni.showModal({
					title: '提示',
					content: `确定使用面值${coupon.discount}元的优惠券吗？`,
					confirmColor: '#019245',
					success: (res) => {
						// 模拟使用优惠券
						uni.showLoading({
							title: '使用中...'
						})
						setTimeout(() => {
							uni.hideLoading()
							if (res.confirm) {
								uni.showToast({
									title: '使用成功',
									icon: 'success'
								})
								this.$store.commit('setCouponData', coupon)
								this.$utils.navigateBack()
							}
						}, 300)
					},
					fail: (err) => {
						console.log('err', err)
					}
				})
			}else {
				this.$utils.navigateTo('/pages/index/category')
			}
		},
		// 获取优惠卷
		getCoupon() {
			this.$api('queryCouponList', {
				pageNo: 1,
				pageSize: 10000,
				status: this.currentTab
			}, 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>