api

pageE/tool/MineCoupon.vue

@@ -0,0 +1,105 @@
+<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 test" :key="c_index">
+						<Coupon :couponInfo="coupon" :status='index' :type="1" @use="useCoupon($event)"></Coupon>
+					</view>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+<script>
+import Coupon from "@/components/mine/coupon/index" 
+export default {
+	data() {
+		return {
+			list: [{
+				name: '未使用'
+			}, {
+				name: '已使用'
+			}, {
+				name: '已过期'
+			}],
+			current: 0,
+			swiperCurrent: 0,
+			swiperHeight: '',
+			test: [
+				{
+					index: 0
+				},
+				{
+					index: 1
+				},
+				{
+					index: 2
+				},
+				{
+					index: 3
+				},
+				{
+					index: 4
+				},
+				{
+					index: 5
+				},
+				{
+					index: 6
+				},
+				{
+					index: 7
+				}
+			]
+		}
+	},
+	components: {
+		Coupon
+	},
+	onLoad() {
+		this.setViewHeight();
+	},
+	methods: {
+		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>