massage-front/pages_order/mine/coupon.vue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<navbar title="优惠券" leftClick @leftClick="$utils.navigateBack" color="#fff" />

		<!-- 优惠券筛选 -->
		<view class="tabs">
			<uv-tabs 
				:list="statusOptions" 
				@click="onTabClick" 
				:customStyle="{
					backgroundColor: '#FFFFFF',
				}"
				:activeStyle="{
					color: '#84A73F',
					fontSize: '28rpx',
					whiteSpace: 'nowrap',
					paddingTop: '29rpx',
					paddingBottom: '21rpx',
				}"
				:inactiveStyle="{
					color: '#000000',
					fontSize: '28rpx',
					whiteSpace: 'nowrap',
					paddingTop: '29rpx',
					paddingBottom: '21rpx',
				}"
				lineHeight="5rpx" 
				lineWidth="92rpx" 
				lineColor="linear-gradient(to right, #84A73F, #D8FF8F)"
				:scrollable="false"
			></uv-tabs>
		</view>

		<couponList ref="couponList" :list="list" :status="status"></couponList>
	</view>
</template>

<script>
	import couponList from "@/components/couponList/couponList.vue"

	export default {
		name: "coupon",
		components: {
			couponList
		},
		props: {
			height: {
				default: 'auto'
			},
		},
		onShow() {
			this.getCouponList()
		},
		data() {
			return {
				statusOptions: [{
					name: "全部优惠券"
				}, {
					name: "已使用优惠券"
				}, {
					name: "已过期优惠券"
				}],
				status: 'all'
			};
		},
		methods: {
			//获取优惠券数据
			getCouponList() {
				this.$refs.couponList.getCouponList()
			},
			//点击过滤菜单
			onTabClick(e) {
				const { index } = e

				// status：空-全部 0-未使用 1-已使用 2-已失效
				if (index === 0) {
					this.status = 'all'
				} else {
					this.status = index
				}
			}
		}
	}
</script>

<style scoped lang="scss">

	.page {
		background-color: $uni-bg-color;
		min-height: 100vh;
				
		/deep/ .nav-bar__view {
			background-image: linear-gradient(#84A73F, #D8FF8F);
		}
	}

	.tabs {
		/deep/ .uv-tabs__wrapper__nav__line {
			bottom: 0;
		}
	}

</style>