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="filtrationMenu" 
				@click="hadleFiltrationMenuEvent" 
				: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" :state="state"></couponList>
	</view>
</template>

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

	export default {
		name: "coupon",
		components: {
			couponList
		},
		props: {
			height: {
				default: 'auto'
				// default : 'calc(90vh - 180rpx)'
			},
			// 押金
			depositPrice: {},
			washPrice: { //水洗费
			},
			rentPrice: { //租金
			},
		},
		onShow() {
			this.getCouponList()
		},
		data() {
			return {
				filtrationMenu: [{
					name: "全部优惠券"
				}, {
					name: "已使用优惠券"
				}, {
					name: "已过期优惠券"
				}],
				state: 0
			};
		},
		methods: {
			//获取优惠券数据
			getCouponList() {
				this.$refs.couponList.getCouponList()
			},

			select(item) {
				if (this.isSelect(item)) {
					return
				}
				this.$emit('select', item)
			},
			isSelect(item) {

				if (!this.depositPrice && !this.rentPrice && !this.washPrice) {
					return false
				}

				// 押金
				if (this.depositPrice &&
					item.useType == 0 &&
					this.depositPrice >= item.conditionPrice) {
					return false
				}

				// 租金
				if (this.rentPrice &&
					item.useType == 1 &&
					this.rentPrice >= item.conditionPrice) {
					return false
				}

				// 水洗
				if (this.washPrice &&
					item.useType == 2 &&
					this.washPrice >= item.conditionPrice) {
					return false
				}

				return true
			},

			//点击过滤菜单
			hadleFiltrationMenuEvent(event) {
				this.state = event.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>