XEH-miniProgram/pages/self/coupon/index.vue

<template>
	<view class="page-wrap">
		<view class="tabs-panel">
			<view :class="{ item: true, active: tabActive === item.value }" v-for="(item, index) in tabList" :key="index" @click="tabActive = item.value">
				{{ item.label }}
			</view>
		</view>
		<!-- 未使用 -->
		<view v-if="tabActive === 1" class="coupon-panel">
			<view class="item" @click="handleOpenCouponDetail">
				<view class="name">三八女神节特惠券【通用】</view>
				<view class="desc">使用范围：所有产品品类可用</view>
				<view class="desc">使用条件：满100元可用</view>
				<view class="desc">有效日期：至 2023-03-31</view>
				<view class="side">
					<view class="price">38</view>
					满100元可用
				</view>
			</view>
			<view class="item">
				<view class="name">100元财税代金券</view>
				<view class="desc">使用范围：指定产品品类可用</view>
				<view class="desc">使用条件：无限制</view>
				<view class="desc">有效日期：无限制</view>
				<view class="side">
					<view class="price">100</view>
					使用无限制
				</view>
			</view>
			<view class="item">
				<view class="name">六一童心特惠券</view>
				<view class="desc">使用范围：所有产品品类可用</view>
				<view class="desc">使用条件：满100元可用</view>
				<view class="desc">有效日期：至 2023-03-31</view>
				<view class="side">
					<view class="price">61</view>
					满100元可用
				</view>
			</view>
		</view>
		<!-- 已使用 -->
		<view v-if="tabActive === 2" class="coupon-panel">
			<view class="item disabled">
				<view class="name">
					<view class="price">38</view>
					<view class="text">三八女神节特惠券</view>
				</view>
				<view class="desc">使用范围：所有产品品类可用</view>
				<view class="desc">使用条件：满100元可用</view>
				<view class="desc">有效日期：至 2023-03-31</view>
				<view class="side">
					<image class="state-1" src="../../static/img_coupon_state_1.png"></image>
				</view>
			</view>
			<view class="item disabled">
				<view class="name">
					<view class="price">100</view>
					<view class="text">财税代金券</view>
				</view>
				<view class="desc">使用范围：所有产品品类可用</view>
				<view class="desc">使用条件：满100元可用</view>
				<view class="desc">有效日期：至 2023-03-31</view>
				<view class="side">
					<image class="state-1" src="../../static/img_coupon_state_1.png"></image>
				</view>
			</view>
		</view>
		<!-- 已使用 -->
		<view v-if="tabActive === 3" class="coupon-panel">
			<view class="item disabled">
				<view class="name">
					<view class="price">38</view>
					<view class="text">三八女神节特惠券</view>
				</view>
				<view class="desc">使用范围：所有产品品类可用</view>
				<view class="desc">使用条件：满100元可用</view>
				<view class="desc">有效日期：至 2023-03-31</view>
				<view class="side">
					<image class="state-2" src="../../static/img_coupon_state_2.png"></image>
				</view>
			</view>
			<view class="item disabled">
				<view class="name">
					<view class="price">100</view>
					<view class="text">财税代金券</view>
				</view>
				<view class="desc">使用范围：所有产品品类可用</view>
				<view class="desc">使用条件：满100元可用</view>
				<view class="desc">有效日期：至 2023-03-31</view>
				<view class="side">
					<image class="state-2" src="../../static/img_coupon_state_2.png"></image>
				</view>
			</view>
		</view>
		<button class="foot-btn" @click="handleOpenCouponCenter()">去领券中心看看</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabActive: 1,
			tabList: [
				{
					label: '未使用',
					value: 1
				},
				{
					label: '已使用',
					value: 2
				},
				{
					label: '已失效',
					value: 3
				}
			]
		};
	},
	methods: {
		handleOpenCouponDetail() {
			uni.navigateTo({
				url: 'detail'
			});
		},
		handleOpenCouponCenter() {
			uni.navigateTo({
				url: 'center'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import 'index.scss';
</style>