couponCenter_mpapp/src/pages-A/couponRedemptionList/index.vue

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { getHomeCouponRedemptionList } from '@/api/home'
import { useScroll } from '@/hooks/useScroll'
import { changtime, safeAreaInsets } from '@/utils'

definePage({
    style: {
        navigationBarTitleText: '',
        navigationStyle: 'custom',
    },
})

const topSafeAreaHeight = safeAreaInsets?.top || 0
const currentState = ref('1')
const currentCouponType = ref('3')
const currentDate = ref(Date.now())
const show = ref(false)
const datetimePickerRef = ref(null)

const {
    list: data, // 响应式的数据列表
    loading, // 是否加载中
    finished, // 是否已全部加载
    error, // 是否加载失败
    refresh: onRefresh, // 下拉刷新方法
    loadMore: onLoadMore, // 加载更多方法
} = useScroll({
    fetchData: async (page, pageSize) => {
        const response = await getHomeCouponRedemptionList({
            pageNo: page,
            pageSize,
            verificationStatus: currentState.value,
            couponType: currentCouponType.value,
            year: changtime(currentDate.value, 'YYYY'),
            month: changtime(currentDate.value, 'MM'),
        })
        return response.records || []
    },
    pageSize: 7,
})

// 计算底部安全区高度
const safeBottomHeight = computed(() => {
    return safeAreaInsets?.bottom || 0
})

// 格式化日期显示：YYYY年MM月
const formattedDate = computed(() => {
    return changtime(currentDate.value, 'YYYY年MM月')
})

// 计算加载状态
const status = computed(() => {
    if (loading.value) {
        return 'loading'
    }
    if (finished.value) {
        return 'nomore'
    }
    if (error.value) {
        return 'error'
    }
    return 'loadmore'
})

onLoad((options) => {
    if (options.state) {
        currentState.value = options.state
    }
})

function redemptionChange(state) {
    currentState.value = state
    onRefresh()
}

function couponTypeChange(type) {
    currentCouponType.value = type
    onRefresh()
}

function datePickerConfirm() {
    show.value = false
    onRefresh()
}
</script>

<template>
    <view class="page-container">
        <up-navbar title="优惠券" :auto-back="true" />
        <up-status-bar />
        <view class="redemption-type" :style="{ paddingTop: `${topSafeAreaHeight}px` }">
            <view class="redemption-type-item" :class="{ active: currentState === '1' }" @click="redemptionChange('1')">
                待核销
            </view>
            <up-line direction="col" color="#9A9B9B" length="40rpx" />
            <view class="redemption-type-item" :class="{ active: currentState === '2' }" @click="redemptionChange('2')">
                已核销
            </view>
        </view>
        <view class="redemption-select">
            <view class="redemption-select-item coupon-type">
                <view class="coupon-type-item" :class="{ 'coupon-active': currentCouponType === '3' }"
                    @click="couponTypeChange('3')">
                    满减券
                </view>
                <view class="coupon-type-item" :class="{ 'coupon-active': currentCouponType === '2' }"
                    @click="couponTypeChange('2')">
                    折扣券
                </view>
            </view>
            <view class="redemption-select-item">
                <up-datetime-picker ref="datetimePickerRef" v-model="currentDate" :show="show" mode="year-month"
                    @cancel="show = false" @confirm="datePickerConfirm" />
                <view class="date-display" @click="show = true">
                    {{ formattedDate }}
                    <up-icon name="arrow-down" />
                </view>
            </view>
        </view>
        <view class="redemption-content">
            <scroll-view scroll-y :refresher-enabled="true" :refresher-triggered="loading" @refresherrefresh="onRefresh"
                @scrolltolower="onLoadMore">
                <template v-for="(item, index) in data" :key="index">
                    <view class="redemption-content-card">
                        <template v-if="currentState === '1'">
                            <view class="redemption-content-item">
                                <view class="redemption-content-item-left">
                                    优惠券名称
                                </view>
                                <view class="redemption-content-item-header-right">
                                    {{ item?.couponName || '' }}
                                </view>
                            </view>
                            <view class="redemption-content-item">
                                <view class="redemption-content-item-left">
                                    用户名称
                                </view>
                                <view class="redemption-content-item-header-right">
                                    {{ item?.receiveUserName || '' }}
                                </view>
                            </view>
                            <view class="redemption-content-item">
                                <view class="redemption-content-item-left">
                                    到期时间
                                </view>
                                <view class="redemption-content-item-right">
                                    {{ item?.expireTime || '--' }}
                                </view>
                            </view>
                        </template>
                        <template v-if="currentState === '2'">
                            <view class="redemption-content-item">
                                <view class="redemption-content-item-left">
                                    核销时间
                                </view>
                                <view class="redemption-content-item-header-right">
                                    {{ item?.verificationTime || '--' }}
                                </view>
                            </view>
                            <view class="redemption-content-item">
                                <view class="redemption-content-item-left">
                                    优惠券名称
                                </view>
                                <view class="redemption-content-item-header-right">
                                    {{ item?.couponName || '' }}
                                </view>
                            </view>
                            <view class="redemption-content-item">
                                <view class="redemption-content-item-left">
                                    核销用户
                                </view>
                                <view class="redemption-content-item-header-right">
                                    {{ item?.receiveUserName || '' }}
                                </view>
                            </view>
                            <view class="redemption-content-item">
                                <view class="redemption-content-item-left">
                                    商品名称
                                </view>
                                <view class="redemption-content-item-right">
                                    {{ item?.orderItemName || '' }}
                                </view>
                            </view>
                            <view class="redemption-content-item">
                                <view class="redemption-content-item-left">
                                    实付金额
                                </view>
                                <view class="redemption-content-item-right">
                                    {{ item?.orderAmount || '' }}
                                </view>
                            </view>
                            <view class="redemption-content-item">
                                <view class="redemption-content-item-left">
                                    预计获得佣金
                                </view>
                                <view class="redemption-content-item-right">
                                    {{ item?.commission || '' }}
                                </view>
                            </view>
                        </template>
                    </view>
                </template>
                <template v-if="!data || data.length === 0">
                    <up-empty mode="data" style="height: 100%" />
                </template>
                <!-- 加载状态提示 -->
                <template v-else>
                    <up-loadmore :status="status" />
                </template>
            </scroll-view>
        </view>
        <view class="safe-bottom" :style="{ height: `${safeBottomHeight}px` }" />
    </view>
</template>

<style lang="scss" scoped>
.page-container {
    height: 100vh;
    background-color: #f8f8fa;
    display: flex;
    flex-direction: column; // 设置为flex布局，让子元素垂直排列

    .redemption-type {
        width: 100%;
        height: 88rpx;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background-color: #ffffff;
        position: relative;
    }

    .redemption-type-item {
        flex: 1;
        text-align: center;
        font-weight: 400;
        font-size: 30rpx;
        color: #888888;
        line-height: 33rpx;
        transition: color 0.3s ease; // 添加颜色过渡动画
        position: relative;
        z-index: 1; // 确保文字在指示器上方
        padding: 20rpx 0; // 增加点击区域

        &.active {
            color: #333333;
            font-weight: bolder;
        }
    }

    .indicator {
        position: absolute;
        bottom: 0;
        width: 30%;
        height: 4rpx;
        background-color: #333333;
        transition: left 0.3s ease; // 添加左右移动的过渡动画
        transform: translateX(-50%); // 居中对齐
    }

    .redemption-select {
        height: 90rpx;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 20rpx;

        .coupon-type {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            gap: 19rpx;

            .coupon-type-item {
                width: 118rpx;
                height: 45rpx;
                padding: 11rpx 21rpx 10rpx 21rpx;
                text-align: center;
                background: #ffffff;
                border-radius: 35rpx;
                border: 1px solid #e5e5e5;

                &.coupon-active {
                    font-weight: 400;
                    color: #ffffff;
                    background: linear-gradient(180deg, #ff7a72 0%, #ff3500 100%);
                }
            }
        }

        .redemption-select-item {
            .date-display {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                gap: 13rpx;
            }
        }
    }

    .redemption-content {
        flex: 1; // 占据剩余空间
        padding: 9px 20rpx;
        overflow: hidden; // 隐藏超出部分

        scroll-view {
            height: 100%; // 充满整个容器
        }

        .redemption-content-card {
            background-color: #ffffff;
            border-radius: 10rpx;
            padding: 39rpx 20rpx;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: space-around;
            gap: 40rpx;

            .redemption-content-item {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: space-between;

                .redemption-content-item-left {
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #666666;
                }

                .redemption-content-item-right {
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #333333;
                }
            }
        }
    }
}
</style>