deming/pageE/tool/MineCoupon.vue

<template>
	<view class="coupon">
		<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false" active-color="#FF780F" :current="current" font-size="32" :show-bar="false" @change="tabsChange" height="88" ></u-tabs-swiper>
		<swiper :current="swiperCurrent" @animationfinish="animationfinish" :style="{ height: swiperHeight }">
			<swiper-item class="swiper-item" v-for="(_, index) in list" :key="index">
				<scroll-view scroll-y class="scroll-coupon">
					<view class="coupon-item" v-for="(coupon, c_index) in couponList" :key="c_index">
						<Coupon :couponInfo="coupon" :status='index' :type="1" @use="useCoupon($event)" :goodsClass="goodsClass"></Coupon>
					</view>
					<u-empty text="暂无优惠券" mode="coupon" v-if="!couponList.length"></u-empty>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
import Coupon from "@/components/mine/coupon/mine" 
export default {
	data() {
		return {
			list: [{
				name: '未使用'
			}, {
				name: '已使用'
			}, {
				name: '已过期'
			}],
			current: Number,
			swiperCurrent: 0,
			swiperHeight: '',
			couponList: [],
			goodsClass: [],
		}
	},
	components: {
		Coupon
	},
	onLoad() {
		this.setViewHeight();
		this.getGoodsClass();
	},
	onShow() {
		this.current = 0;
	},
	watch: {
		current(value) {
			let status = value + 1;
			this.getMemberCouponList(status);
		}
	},
	methods: {
		getGoodsClass() {
			this.$u.api.getGoodsClass().then(res => {
				this.goodsClass = res.data;
			})
		},
		getMemberCouponList(current) {
			this.$u.api.getMemberCouponList({
				status: current
			}).then(res => {
				if(res.errCode == 0) {
					this.couponList = res.data;
				} else {
					this.couponList = [];
				}
			})
		},
		useCoupon(id) {
			console.log(id);
		},
		setViewHeight() {
			const res = uni.getSystemInfoSync();
			this.swiperHeight = res.windowHeight - (88 / 2 + 11 / 2) + 'px';
		},
		tabsChange(index) {
			this.swiperCurrent = index;
		},
		animationfinish(e) {
			let current = e.detail.current;
			this.swiperCurrent = current;
			this.current = current;
		},
	},
};
</script>
<style lang="scss" scoped>
.coupon {
	overflow: hidden;
	.u-tabs {
		border: {
			top: 1rpx #ECECEC solid;
			bottom: 10rpx #ECECEC solid;
		};
	}
	.swiper-item {
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		.scroll-coupon {
			height: 100%;
			.coupon-item {
				margin-bottom: 20rpx;
				// position: relative;
				// z-index: 9;
			}
		}
	}
}
</style>