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

<template>
	<view class="page-wrap">
		<view class="tabs-panel">
			<view :class="{ item: true, active: tabActive === item }" v-for="(item, index) in tabList" :key="index" @click="tabActive = item">
				{{ item }}
			</view>
		</view>
		<!-- 未使用 -->
		<view class="coupon-panel">
			<view class="item" v-for="(item, index) in couponList" :key="index" @click="handleOpenCouponDetail">
				<view class="name">{{ item.coupon.name }}</view>
				<view class="desc">使用范围：{{ item.coupon.productIds || item.coupon.categoryIds ? '指定产品品类可用' : '所有产品品类可用' }}</view>
				<view class="desc">使用条件：{{ item.coupon.line ? `满${item.coupon.line}元可用` : '无限制' }}</view>
				<view class="desc">有效日期：{{ item.coupon.endTime ? '至 ' + item.coupon.endTime : '无限制' }}</view>
				<view class="side">
					<view class="price">{{ item.coupon.showMoney }}</view>
					{{ item.coupon.line ? `满${item.coupon.line}元可用` : '使用无限制' }}
				</view>
				<!-- <view class="side">
					<image class="state-1" src="@/static/img_coupon_state_1.png"></image>
				</view> -->
			</view>
		</view>
		<button class="foot-btn" @click="handleOpenCouponCenter()">去领券中心看看</button>
	</view>
</template>

<script>
import couponService from '@/api/coupon.js';
export default {
	data() {
		return {
			tabActive: '未使用',
			tabList: ['未使用', '已使用', '已失效'],
			couponList: []
		};
	},
	watch: {
		tabActive() {
			this.getCouponList();
		}
	},
	onLoad() {
		this.getCouponList();
	},
	onShow() {
		this.getCouponList();
	},
	onPullDownRefresh() {
		this.getCouponList();
	},
	methods: {
		// 获取优惠券列表
		async getCouponList() {
			const { tabActive } = this;
			const { rows } = await couponService.getUserCouponList(tabActive === '已失效' ? '已过期' : tabActive);
			this.couponList = rows;
			uni.pageScrollTo({ scrollTop: 0 });
			uni.stopPullDownRefresh();
		},
		handleOpenCouponDetail() {
			uni.navigateTo({
				url: 'detail'
			});
		},
		handleOpenCouponCenter() {
			uni.navigateTo({
				url: 'center'
			});
		}
	}
};
</script>

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