jje_uniapp/myPages/coupon/index.vue

<template>
    <view class="order-content-wrap">

        <!-- 导航-->
        <view class="service-order-tab-bar">
            <view class="service-order-tab-item" :class="{ active: currentServiceTab === 'orderTab1' }"
                @click="changeServiceTab('orderTab1')">
                <text :class="{ underline: currentServiceTab === 'orderTab1' }">可使用</text>
            </view>
            <view class="service-order-tab-item" :class="{ active: currentServiceTab === 'orderTab2' }"
                @click="changeServiceTab('orderTab2')">
                <text :class="{ underline: currentServiceTab === 'orderTab2' }">已使用</text>
            </view>
            <view class="service-order-tab-item" :class="{ active: currentServiceTab === 'orderTab3' }"
                @click="changeServiceTab('orderTab3')">
                <text :class="{ underline: currentServiceTab === 'orderTab3' }">已过期</text>
            </view>
        </view>

        <view class="custom-line"></view>
        <!-- 当前订单-->
        <view class="service-order">

            <!-- 门店列表 -->
            <view v-if="countsList.length > 0" v-for="(item, index) in countsList" 
                class="store-wrap  bg-img">
                <view class="row-list">
                    <view class="store-content">
                        <view class="h-left-content">
                            <view class="h-text">
                                <view class="money">￥{{ item.discountsPrice }}</view>
                                <view class="desc">{{ item.name }}</view>
                            </view>
                        </view>
                        <view class="h-center-content">
                            <view class="title">
                                <text class="h-value">门店通用</text>
                            </view>
                            <view class="title">
                                使用平台：<text v-if="item.strategyType == '0'">全平台</text>
                                <text v-else-if="item.strategyType == '1'">个人优惠卷</text>
                            </view>
                            <view class="title">
                                有效时间：{{ this.dateFormat(item.startTime) }}~{{ this.dateFormat(item.endTime) }}
                            </view>
                        </view>
                        <view class="h-right-content">
                            <view class="h-btn">
                                <view @click="gotoUseCoupon()" v-if="item.state == 0" class="h-btn-value-use">立即使用</view>
                                <!-- <view @click="gotoReceiveCoupon()" v-else-if="index == 1" class="h-btn-value-receive">立即领取</view> -->
                                <view v-else-if="item.state == 1" class="h-btn-img">
                                    <image src="../../static/coupon/u2109.png" mode=""></image>
                                </view>
                                <view v-else class="h-btn-img">
                                    <image src="../../static/coupon/u2108.png" mode=""></image>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view v-else class="footer">
                <view class="">---暂无数据---</view>
            </view>

            <view v-if="countsList.length > 0" class="footer">
                <view class="">---到底了---</view>
            </view>
        </view>

    </view>
</template>

<script>

export default {
    data() {
        return {
            currentServiceTab: 'orderTab1', // 当前选中的 Tab
            reqParm: {
                auth: true,
                type: 0 // 我的优惠卷列表（0未使用， 1已使用， 2已过期 null查询全部）
            },
            countsList: []
        };
    },
    onLoad() {

    },
    methods: {
        // 切换菜单
        changeServiceTab(tab) {
            if (tab == 'orderTab1') { //全部
                this.reqParm.type = '0';
            } else if (tab == 'orderTab2') {
                this.reqParm.type = '1';
            } else if (tab == 'orderTab3') {
                this.reqParm.type = '2';
            }


        },
    }
}
</script>

<style scoped lang="scss">
@import '/common/css/common.css';
@import './index.rpx.scss';
</style>