teambuy-front/pages_order/mine/oldCoupon.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>