GuangYuYuan-shanghu/src/pages/demo/coupon.vue

<template>
    <view class="page-container">
        <!-- <u-navbar title="我的卡券" :autoBack="true" placeholder border></u-navbar> -->
        <view class="tabs-box">
            <u-tabs :list="tabList" @click="tabChange" lineColor="#03C8BE"
                activeStyle="color: #03C8BE; font-weight: bold;"
                itemStyle="width: 25%; height: 90rpx;"
            ></u-tabs>
        </view>

        <view class="list-container">
            <view v-for="(item, index) in filteredList" :key="index"
                :class="['coupon-card', { 'is-disabled': item.status !== 'unused' }]">
                <view class="left-content">
                    <view class="coupon-title">{{ item.title }}</view>
                    <view class="coupon-time">
                        <view v-if="item.discountType == 3">满{{ item.thresholdAmount }}减{{ item.discountValue }}</view>
                        <view v-else>满{{ item.thresholdAmount }}可用</view>
                        <view>有效期至{{ item.expirationTimeString }}</view>
                    </view>
                    <view class="coupon-type">
                        <text>现金券*1</text>
                        <view class="detail-link" @click.stop="toggleDetail(index)">
                            详细信息 <u-icon :name="item.showDetail ? 'arrow-up-fill' : 'arrow-down-fill'" size="20rpx" color="#999"></u-icon>
                        </view>
                    </view>
                </view>

                <view class="right-action">
                    <view class="amount-box" v-if="item.discountType == 3">
                        <text class="unit">¥</text>
                        <text class="val">{{ item.discountValue }}</text>
                    </view>
                    <view class="amount-box" v-else>
                        <text class="val">{{ item.rebValue }}</text>
                        <text class="unit">折</text>
                    </view>

                    <view v-if="item.status === 'unused'" class="action-btn active">立即使用</view>
                    <view v-else-if="item.status === 'used'" class="action-btn disabled">已使用</view>
                    <view v-else class="action-btn disabled">已失效</view>
                </view>

                <view v-if="item.showDetail" class="detail-info">
                    <view>限项目：仅可购买服务项目（不含秒杀，升级，续购项目和车费）</view>
                    <view>限手机：仅登录手机号为{{ item.phone }}使用</view>
                </view>
            </view>

            <u-empty v-if="filteredList.length === 0" mode="coupon" marginTop="100"></u-empty>
        </view>
    </view>
</template>

<script>
import {
    getCoupon
} from '@/api/index';
export default {
    data() {
        return {
            currentTab: 0,
            tabList: [
                { name: '全部', value: 'all' },
                { name: '待使用', value: 'unused' },
                { name: '已使用', value: 'used' },
                { name: '已失效', value: 'expired' }
            ],
            // 模拟卡券数据
            couponList: [
                { id: 1, title: '仅项目费用满498可使用', rebValue: '40', expirationTimeString: '2026-01-24 23:59:59', status: 'unused', phone: '180****9382', showDetail: false },
                { id: 2, title: '仅项目费用满398可使用', rebValue: '30', expirationTimeString: '2026-01-24 23:59:59', status: 'used', phone: '180****9382', showDetail: false },
                { id: 3, title: '仅项目费用满298可使用', rebValue: '20', expirationTimeString: '2026-01-24 23:59:59', status: 'expired', phone: '180****9382', showDetail: false },
                { id: 4, title: '仅项目费用满198可使用', rebValue: '10', expirationTimeString: '2026-01-24 23:59:59', status: 'unused', phone: '180****9382', showDetail: false }
            ]
        };
    },
    computed: {
        // 根据Tab过滤列表
        filteredList() {
            const tabValue = this.tabList[this.currentTab].value;
            if (tabValue === 'all') return this.couponList;
            return this.couponList.filter(item => item.status === tabValue);
        }
    },
    onShow() {
        // this.getData();
    },
    methods: {
        getData() {
            let params = {
                openid: uni.getStorageSync('wx_copenid')
            }
            getCoupon(params).then(res => {
                if (res.data.code == 200) {
                    this.couponList = res.data.data;
                }
            });
        },
        tabChange(item) {
            this.currentTab = item.index;
        },
        toggleDetail(index) {
            this.filteredList[index].showDetail = !this.filteredList[index].showDetail;
        }
    }
};
</script>

<style lang="scss" scoped>
.page-container {
    min-height: 100vh;
    background-color: #f8f8f8;

    .tabs-box {
        background-color: #fff;
        padding-bottom: 10rpx;
    }

    .list-container {
        padding: 20rpx 24rpx;
    }
}

.coupon-card {
    margin-bottom: 24rpx;
    position: relative;
    border-radius: 16rpx;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    transition: opacity 0.3s;

    &.is-disabled {
        opacity: 0.65; 
        filter: grayscale(20%); 
    }

    .left-content {
        flex: 1;
        padding: 30rpx;
        border-right: 2rpx dashed #eee;

        .coupon-title {
            font-size: 30rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 10rpx;
        }

        .coupon-time {
            font-size: 22rpx;
            color: #999;
            margin-bottom: 20rpx;
        }

        .coupon-type {
            font-size: 26rpx;
            color: #333;
            display: flex;
            align-items: center;

            .detail-link {
                color: #999;
                margin-left: auto;
                display: flex;
                align-items: center;
            }
        }
    }

    .right-action {
        width: 220rpx;
        padding: 20rpx;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        background-color: #E8FBFA; 

        .amount-box {
            color: #03C8BE;
            margin-bottom: 16rpx;

            .unit {
                font-size: 24rpx;
                margin-right: 4rpx;
            }

            .val {
                font-size: 50rpx;
                font-weight: bold;
            }
        }

        .action-btn {
            width: 140rpx;
            height: 54rpx;
            border-radius: 40rpx;
            font-size: 24rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            &.active {
                background-color: #03C8BE;
                color: #fff;
            }

            &.disabled {
                background-color: transparent;
                border: 2rpx solid #03C8BE;
                color: #03C8BE;
            }
        }
    }

    .detail-info {
        width: 100%;
        font-size: 22rpx;
        color: #999;
        line-height: 1.6;
        padding: 24rpx;
        background-color: #fafafa;
        border-top: 1rpx solid #eee;
    }
}
</style>