gym-manage/gym-manage-uniapp/pages/memberInfo/coupons.vue

<template>
    <view class="scroll-container theme-light">
        <view class="bt-page">
            <MemberInfoSubNav title="我的优惠券" @back="goBack" />
            <view class="mi-mod-tabs">
                <view
                    v-for="tab in tabs"
                    :key="tab.key"
                    class="bt-tab"
                    :class="{ 'bt-tab--active': activeTab === tab.key }"
                    hover-class="mi-tap-tab--hover"
                    :hover-stay-time="150"
                    @tap="activeTab = tab.key"
                >
                    <text class="bt-tab__text">{{ tab.label }}({{ countByTab[tab.key] }})</text>
                </view>
            </view>
            <view class="bt-page__action-bar bt-page__action-bar--end">
                <text
                    class="bt-page__action-link bt-page__action-link--primary"
                    hover-class="mi-tap--hover"
                    :hover-stay-time="150"
                    @tap="goCenter"
                >
                    领券中心
                </text>
            </view>
            <view class="bt-page__body">
                <view
                    v-for="item in displayedCoupons"
                    :key="item.id"
                    class="mi-mod-coupon"
                    :class="'mi-mod-coupon--' + item.status"
                    hover-class="mi-tap-card--hover"
                    :hover-stay-time="150"
                    @tap="onCouponTap(item)"
                >
                    <view class="mi-mod-coupon__left">
                        <text class="mi-mod-coupon__amount">¥{{ item.amount }}</text>
                        <text class="mi-mod-coupon__min">满{{ item.minSpend }}可用</text>
                    </view>
                    <view class="mi-mod-coupon__right">
                        <text class="mi-mod-coupon__title">{{ item.title }}</text>
                        <text class="mi-mod-coupon__desc">{{ item.desc }}</text>
                        <text class="mi-mod-coupon__expire">
                            {{ item.status === 'used' ? `已于 ${item.usedAt} 使用` : `有效期至 ${item.expire}` }}
                        </text>
                        <view v-if="item.status === 'available'" class="mi-mod-coupon__use" @tap.stop="useNow(item)">
                            <text>立即使用</text>
                        </view>
                        <view v-if="item.status === 'expired'" class="mi-mod-coupon__del" @tap.stop="removeExpired(item)">
                            <text>删除</text>
                        </view>
                    </view>
                </view>
                <view v-if="!displayedCoupons.length" class="bt-empty">
                    <text class="bt-empty__text">暂无{{ activeTabLabel }}优惠券</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import MemberInfoSubNav from '@/components/memberInfo/MemberInfoSubNav.vue'
import { PAGE, navigateToPage, backToMemberCenter } from '@/common/constants/routes.js'
import { getCouponsByStatus, useCoupon, deleteExpiredCoupon } from '@/common/memberInfo/moduleStore.js'
import { loadMemberStore, persistMemberStore } from '@/common/memberInfo/store.js'

const tabs = ref([
    { key: 'available', label: '可用' },
    { key: 'used', label: '已用' },
    { key: 'expired', label: '已失效' }
])
const activeTab = ref('available')
const coupons = ref([])

const displayedCoupons = computed(() => {
    return coupons.value.filter((c) => c.status === activeTab.value)
})

const countByTab = computed(() => {
    return {
        available: coupons.value.filter((c) => c.status === 'available').length,
        used: coupons.value.filter((c) => c.status === 'used').length,
        expired: coupons.value.filter((c) => c.status === 'expired').length
    }
})

const activeTabLabel = computed(() => {
    return tabs.value.find((t) => t.key === activeTab.value)?.label || ''
})

function refreshList() {
    const store = loadMemberStore()
    coupons.value = [
        ...getCouponsByStatus(store, 'available'),
        ...getCouponsByStatus(store, 'used'),
        ...getCouponsByStatus(store, 'expired')
    ]
}

function goBack() {
    backToMemberCenter()
}

function onCouponTap(item) {
    navigateToPage(`${PAGE.COUPON_DETAIL}?id=${item.id}`)
}

function useNow(item) {
    uni.showModal({
        title: '使用优惠券',
        content: `确认使用「${item.title}」？`,
        success: (res) => {
            if (!res.confirm) return
            const store = loadMemberStore()
            useCoupon(store, item.id)
            persistMemberStore(store)
            refreshList()
            navigateToPage(PAGE.COURSE_LIST)
        }
    })
}

function removeExpired(item) {
    const store = loadMemberStore()
    deleteExpiredCoupon(store, item.id)
    persistMemberStore(store)
    refreshList()
}

function goCenter() {
    navigateToPage(PAGE.COUPON_CENTER)
}

refreshList()
</script>

<style lang="scss">
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-sub-nav.css';
@import '@/common/style/memberInfo/member-info-tap.css';
@import '@/common/style/memberInfo/pages/body-test-common.css';
@import '@/common/style/memberInfo/pages/module-pages-common.css';

.mi-mod-coupon__use {
    margin-top: 8px;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
}

.mi-mod-coupon__use text {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}

.mi-mod-coupon__del {
    margin-top: 8px;
}

.mi-mod-coupon__del text {
    font-size: 11px;
    color: var(--text-light, #8A99B4);
}
</style>