jewelry-front/pages_order/mine/coupon.vue

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

		<!-- 优惠券筛选 -->
		<view class="tabs">
			<uv-tabs :list="filtrationMenu" @click="hadleFiltrationMenuEvent" lineColor="#E3441A"
				:activeStyle="{ color : '#E3441A' }"></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">
	// 优惠券筛选
	.tabs {
		&::v-deep .uv-tabs__wrapper__nav {
			background: white;

			.uv-tabs__wrapper__nav__item {
				width: 33.33%;
				text-align: center;
				box-sizing: border-box;
			}
		}
	}
</style>