new-88live/pages/user/coupon/mycard.vue

<!-- 我的优惠券（我的卡包） -->
<template>
		<view class="wanl-order-list">
			<!-- 顶部Tab：未使用/已使用/已过期 -->
			<view class="navbar">
				<view class="nav-item text-df" v-for="(item, index) in navList" :key="item.state"
					:class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
					{{ item.text }}
				</view>
			</view>
			<!-- 滑动切换 -->
			<swiper :current="tabCurrentIndex" style="height: calc(100% - 60rpx)" duration="300" @change="changeTab">
				<swiper-item class="tab-content" v-for="(tag, key) in navList" :key="tag.state">
					<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
						<!-- 空白页 -->
						<wanl-empty :text="$t('coupon.noCoupons')" src="ticket_default3x" v-if="tag.loaded === true && tag.cardList.length === 0" />
						<!-- 优惠券列表 -->
						<view class="wanl-coupon">
							<view v-for="(coupon, seat) in tag.cardList" :key="coupon.id"
								:class="[coupon.state == 1 ? coupon.type : 'wanl-gray']" class="item margin-bj radius-bock"
								@tap="onDetails(coupon)">
								<image :src="couponBg" class="coupon-bg"></image>
								<image v-if="coupon.state == 2" :src="couponUsed" class="coupon-sign"></image>
								<image v-if="coupon.state == 3" :src="couponExpired" class="coupon-sign"></image>
								<!-- 左侧：金额/折扣 -->
								<view class="item-left">
									<block v-if="coupon.type == 'reduction' || (coupon.type == 'vip' && coupon.usertype == 'reduction')">
										<view class="colour">
											<text class="text-price"></text>
											<text class="price">{{ Number(coupon.price) }}</text>
										</view>
										<view class="cu-tag wanl-gray-dark radius text-sm">
											{{ $t('mall.fullReduction', [Number(coupon.limit), Number(coupon.price)]) }}
										</view>
									</block>
									<block v-if="coupon.type == 'discount' || (coupon.type == 'vip' && coupon.usertype == 'discount')">
										<view class="colour">
											<text class="price">{{ Number(coupon.discount) }}</text>
											<text class="discount">{{ $t('mall.discountSuffix') }}</text>
										</view>
										<view class="cu-tag wanl-gray-dark radius text-sm">
											{{ $t('mall.fullDiscount', [Number(coupon.limit), Number(coupon.discount)]) }}
										</view>
									</block>
									<block v-if="coupon.type == 'shipping'">
										<view class="colour">
											<text class="price">{{ $t('mall.freeShipping') }}</text>
										</view>
										<view class="cu-tag wanl-gray-dark radius text-sm">
											{{ $t('mall.freeShippingFull', [Number(coupon.limit)]) }}
										</view>
									</block>
								</view>
								<!-- 右侧：店铺+名称+有效期+操作 -->
								<view class="item-right padding-bj">
									<view class="shop" @tap="onShop(coupon.shop_id)">
										<view class="name">
											<text class="wlIcon-dianpu margin-right-xs"></text> {{ coupon.shop.shopname }}
										</view>
										<view><text class="wlIcon-fanhui2"></text></view>
									</view>
									<view class="title">
										<view class="cu-tag sm radius margin-right-xs tagstyle">{{ coupon.type_text }}</view>
										<text class="text-cut wanl-gray text-min">{{ coupon.name }}</text>
									</view>
									<view class="content text-min">
										<view class="wanl-gray">
											<view v-if="coupon.pretype == 'fixed'">
												<text class="wlIcon-dot"></text>{{ $t('coupon.validUntil', [coupon.enddate]) }}
											</view>
											<view v-else-if="coupon.pretype == 'appoint' && coupon.validity != 0">
												<text class="wlIcon-dot"></text>{{ $t('coupon.validDays', [coupon.validity]) }}
											</view>
											<view v-else>
												<text class="wlIcon-dot"></text>{{ $t('coupon.permanent') }}
											</view>
										</view>
										<view class="cu-btn sm round line-colour" v-if="coupon.state == 1" @tap.stop="onApply(coupon.id)">
											{{ $t('coupon.useNow') }}
										</view>
									</view>
								</view>
							</view>
						</view>
						<uni-load-more :status="tag.loadingType" />
						<view class="edgeInsetBottom"></view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
</template>

<script>
import { pullCouponMyList } from '@/features/mall/mall-gateway'

export default {
	data() {
		return {
			tabCurrentIndex: 0,
			navList: [
				{ state: 1, text: this.$t('coupon.unused'), loadingType: 'more', current_page: 1, cardList: [] },
				{ state: 2, text: this.$t('coupon.used'), loadingType: 'more', current_page: 1, cardList: [] },
				{ state: 3, text: this.$t('coupon.expired'), loadingType: 'more', current_page: 1, cardList: [] }
			],
			couponBg: '/static/coupon/bg_coupon_3x.png',
			couponUsed: '/static/coupon/img_coupon_beused_3x.png',
			couponExpired: '/static/coupon/img_coupon_failure_3x.png'
		}
	},
	onLoad() {
		this.loadData()
	},
	methods: {
		/** swiper切换 */
		changeTab(e) {
			this.tabCurrentIndex = e.target.current
			this.loadData('tabChange')
		},
		/** 顶部tab点击 */
		tabClick(index) {
			this.tabCurrentIndex = index
		},
		/** 加载优惠券列表 */
		async loadData(source) {
			let index = this.tabCurrentIndex
			let navItem = this.navList[index]
			let state = navItem.state
			if (navItem.loadingType == 'noMore') return
			if (source === 'tabChange' && navItem.loaded === true) return
			if (navItem.loadingType === 'loading') return
			navItem.loadingType = 'loading'
			try {
				const res = await pullCouponMyList({ state, page: navItem.current_page })
				navItem.current_page = res.currentPage
				if (res.lastPage === res.currentPage) {
					navItem.loadingType = 'noMore'
				} else {
					navItem.loadingType = 'more'
					navItem.current_page++
				}
				res.rows.forEach(item => {
					navItem.cardList.push(item)
				})
				this.$set(navItem, 'loaded', true)
			} catch (e) {
				console.error('[coupon mycard] loadData', e)
				navItem.loadingType = 'more'
			}
		},
		/** 去使用优惠券 */
		onApply(id) {
			uni.navigateTo({ url: `/pages/user/coupon/apply?id=${id}&state=true` })
		},
		/** 查看优惠券详情 */
		onDetails(data) {
			// 预留详情页跳转
		},
		/** 跳转店铺 */
		onShop(id) {
			uni.navigateTo({ url: `/pages/shop/index?id=${id}` })
		}
	}
}
</script>

<style>
page {
	height: 100%;
}
</style>