couponCenter_mpapp/src/pages/income/income.vue

<script lang="ts" setup>
import type { AccountDetailItem } from '@/api/income'
import { useRequest } from 'alova/client'
import { storeToRefs } from 'pinia'
import { computed, ref, watch } from 'vue'
import { getAccountCount } from '@/api/home'
import { getAccountDetailTotalAmount, getCouponIssuerAccountByPageMap } from '@/api/income'
import { useScroll } from '@/hooks/useScroll'
import { useShare } from '@/hooks/useShare'
import { useUserStore } from '@/store'
import { useTokenStore } from '@/store/token'
import { changtime, menuButtonInfo, safeAreaInsets, systemInfo } from '@/utils'
import { getImageUrl } from '@/utils/imageUtil'

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

const userStore = useUserStore()
const tokenStore = useTokenStore()
// 使用storeToRefs解构userInfo
const { userInfo } = storeToRefs(userStore)
const { hasLogin } = storeToRefs(tokenStore)

const show = ref(false)
const filterValue = ref(Date.now())
// 发券人账户表-通过userId查询账户信息
const { send: getAccountCountRequest, data: accountCountData } = useRequest(getAccountCount, {
    immediate: false,
})

const refreshing = ref(false)
const status = ref(0) // 0-待结算, 1-已结算/成功
const type = ref(1) // 明细类型: 1-佣金收入, 2-提现支出, 3-退款扣减, 4-系统调整

const { send: getAccountDetailTotalAmountRequest, data: accountDetailTotalAmountData } = useRequest(() => getAccountDetailTotalAmount({ status: status.value, year: changtime(filterValue.value, 'YYYY'), month: changtime(filterValue.value, 'MM'), type: type.value }), {
    immediate: false,
})

// 获取账户明细分页数据(Map格式)---待结算
const {
    list: pendingSettlementData,
    loading: pendingSettlementLoading,
    finished: pendingSettlementFinished,
    refresh: pendingSettlementRefresh,
    loadMore: pendingSettlementLoadMore,
} = useScroll<AccountDetailItem>({
    fetchData: async (page, pageSize) => {
        const response = await getCouponIssuerAccountByPageMap({
            pageNo: page,
            pageSize,
            status: 0,
            year: changtime(filterValue.value, 'YYYY'),
            month: changtime(filterValue.value, 'MM'),
            type: type.value,
        })
        return response.detailList || []
    },
    pageSize: 7,
})

// 获取账户明细分页数据(Map格式)---已结算
const {
    list: settledData,
    loading: settledLoading,
    finished: settledFinished,
    refresh: settledRefresh,
    loadMore: settledLoadMore,
} = useScroll<AccountDetailItem>({
    fetchData: async (page, pageSize) => {
        const response = await getCouponIssuerAccountByPageMap({
            pageNo: page,
            pageSize,
            status: 1,
            year: changtime(filterValue.value, 'YYYY'),
            month: changtime(filterValue.value, 'MM'),
            type: type.value,
        })
        return response.detailList || []
    },
    pageSize: 7,
})

async function confirm() {
    // 函数实现
    show.value = false
    if (status.value === 0) {
        await pendingSettlementRefresh()
    }
    else {
        await settledRefresh()
    }
}
function cancel() {
    show.value = false
}
function close() {
    show.value = false
}

// 下拉刷新
async function onRefresh() {
    refreshing.value = true
    // 重置列表并重新加载数据
    if (status.value === 0) {
        await pendingSettlementRefresh()
    }
    else {
        await settledRefresh()
    }
    refreshing.value = false
}

// 上拉加载更多
function onLoadMore() {
    console.log(status.value, '执行了')
    if (status.value === 0) {
        pendingSettlementLoadMore()
    }
    else {
        settledLoadMore()
    }
}

const list = ref<AccountDetailItem[]>([])

onShow(async () => {
    // 登录后查询收益数据
    if (hasLogin) {
        await getAccountCountRequest()
        await getAccountDetailTotalAmountRequest()
        // 数据会在useScroll的onMounted中自动加载，这里不需要额外调用
    }
})

// 创建分享hook实例
const { getShareConfig, getTimelineShareConfig } = useShare()

// #ifdef MP-WEIXIN
// 分享给好友生命周期函数
onShareAppMessage(async (options) => {
    return await getShareConfig()
})

// 分享到朋友圈生命周期函数
onShareTimeline(async () => {
    return await getTimelineShareConfig()
})
// #endif

const isUnlock = computed(() => accountCountData && accountCountData?.status === 0)

watch(() => accountCountData, (newVal) => {
    console.log(newVal)
})

function showTimeFilter() {
    show.value = true
}
const wjsList = ref<AccountDetailItem[]>([])
const yjsList = ref<AccountDetailItem[]>([])
const activeTab = ref('pending')
async function changeTab(tab: string) {
    if (activeTab.value === tab)
        return
    activeTab.value = tab
    status.value = tab === 'pending' ? 0 : 1
    await getAccountDetailTotalAmountRequest()
    // 切换标签时刷新对应列表数据
    if (tab === 'pending') {
        await pendingSettlementRefresh()
    }
    else {
        await settledRefresh()
    }
}

function goPage(page: string) {
    uni.navigateTo({
        url: `/pages-A/${page}/index`,
    })
}
</script>

<template>
    <view class="profile-container"
        :style="{ height: `calc(100vh - ${safeAreaInsets.top}px - ${safeAreaInsets.bottom}px)` }">
        <!-- 顶部区域 -->
        <view class="income-header"
            :style="{ background: `url(${getImageUrl('@img/income/income-bg.png')})`, backgroundSize: '100% 110%', backgroundPosition: 'left bottom', backgroundRepeat: 'no-repeat' }">
            <view class="income-header-avatar-info"
                :style="{ paddingTop: `calc(${safeAreaInsets.top}px + ${menuButtonInfo.height}px)` }">
                <view class="income-header-balance">
                    当前账户余额（元）
                </view>
                <view class="income-header-balance-num">
                    <view class="income-header-balance-num-amount">
                        {{ accountCountData?.balance || 0 }}
                    </view>
                    <view class="income-header-balance-num-btns">
                        <view v-if="isUnlock" class="income-header-balance-num-btn js" @click="goPage('unlockRewards')">
                            解锁
                        </view>
                    </view>
                </view>
            </view>
            <view class="income-header-tips">
                <view class="income-header-tips-item">
                    <view class="income-header-tips-item-num">
                        {{ accountCountData?.withdrawableAmount || 0 }}
                    </view>
                    <view class="income-header-tips-item-des">
                        可提现金额
                    </view>
                </view>
                <view class="income-header-tips-item">
                    <view class="income-header-tips-item-num">
                        {{ accountCountData?.unsettledAmount || 0 }}
                    </view>
                    <view class="income-header-tips-item-des">
                        未结算金额
                    </view>
                </view>
                <view class="income-header-tips-item">
                    <view class="income-header-tips-item-num">
                        {{ accountCountData?.totalCommission || 0 }}
                    </view>
                    <view class="income-header-tips-item-des">
                        累计收益
                    </view>
                </view>
            </view>
        </view>
        <!-- 公告 -->
        <view v-if="isUnlock" class="income-header-notice">
            <view class="income-header-notice-icon">
                <image :src="getImageUrl('@img/income/notice.png')" mode="aspectFit" />
            </view>
            <view class="income-header-notice-content">
                在考核周期内未达标已锁定收益，<text>前往查看~</text>
            </view>
        </view>
        <!-- 菜单 -->
        <view class="income-header-menu" :style="{ marginTop: isUnlock ? '24rpx' : '-50rpx' }">
            <!-- 结算筛选 -->
            <view class="income-header-menu-filter">
                <view class="income-header-menu-filter-item" :class="[activeTab === 'pending' ? 'active' : '']"
                    @click="changeTab('pending')">
                    待结算
                </view>
                <view class="income-header-menu-filter-item" :class="[activeTab === 'settled' ? 'active' : '']"
                    @click="changeTab('settled')">
                    已结算
                </view>
            </view>
            <!-- 时间筛选 -->
            <view class="income-menu-time-filter">
                <view class="income-menu-time-filter-text" @click="showTimeFilter">
                    <text>{{ changtime(filterValue) }}</text>
                    <up-icon name="arrow-down" color="#666666" size="14" />
                    <up-datetime-picker v-model="filterValue" :show="show" mode="year-month" close-on-click-overlay
                        @confirm="confirm" @cancel="cancel" />
                </view>
                <view>
                    合计：￥{{ accountDetailTotalAmountData?.totalAmount || 0 }}
                </view>
            </view>
            <!-- 优惠券列表 -->
            <scroll-view class="income-header-menu-list" :scroll-y="true" :refresher-enabled="true"
                :refresher-triggered="refreshing" @refresherrefresh="onRefresh" @scrolltolower="onLoadMore">
                <template v-for="item in activeTab === 'pending' ? pendingSettlementData || [] : settledData || []"
                    :key="item.id">
                    <view class="income-header-menu-item">
                        <view class="income-header-menu-icon">
                            <image v-if="activeTab === 'settled'" :src="getImageUrl('@img/income/hb.png')"
                                mode="aspectFit" />
                            <image v-else :src="getImageUrl('@img/income/djs.png')" mode="aspectFit" />
                            <view class="income-header-menu-text">
                                <view class="income-header-menu-text-nickname">
                                    {{ item.receiveUserName }}
                                </view>
                                <view>{{ item.couponName }}</view>
                            </view>
                        </view>
                        <view class="income-header-menu-left">
                            <view class="income-header-menu-left-amount">
                                ￥{{ item.changeAmount }}
                            </view>
                            <view class="income-header-menu-left-time">
                                {{ item.settleTime }}
                            </view>
                        </view>
                    </view>
                </template>

                <!-- 加载状态提示 -->
                <view v-if="(activeTab === 'pending' ? pendingSettlementLoading : settledLoading)" class="loading-tip">
                    加载中...
                </view>
                <view
                    v-else-if="(activeTab === 'pending' ? pendingSettlementFinished : settledFinished) && (activeTab === 'pending' ? pendingSettlementData.length : settledData.length) > 0"
                    class="finished-tip">
                    没有更多数据了
                </view>

                <!-- 空状态 -->
                <u-empty
                    v-if="(activeTab === 'pending' ? pendingSettlementData.length === 0 : settledData.length === 0)"
                    class="p-b-12 pt-12" mode="list" />
            </scroll-view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.profile-container {
    background-color: #f5f5f5;
    line-height: 1;
    display: flex;
    flex-direction: column;

    /* 添加这行，设置容器高度为视口高度 */

    .income-header {
        height: 526rpx;

        .income-header-avatar-info {
            display: flex;
            flex-direction: column;
            gap: 30rpx;
            padding: 0 24rpx;

            .income-header-balance {
                font-weight: 400;
                font-size: 26rpx;
                color: #ffffff;
            }

            .income-header-balance-num {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .income-header-balance-num-amount {
                    font-weight: 500;
                    font-size: 65rpx;
                    color: #ffffff;
                }

                .income-header-balance-num-btns {
                    display: flex;
                    gap: 15rpx;

                    .income-header-balance-num-btn {
                        padding: 20rpx 40rpx;
                        border-radius: 33rpx;
                        font-weight: 400;
                        font-size: 26rpx;

                        &.js {
                            background: #da4c47;
                            color: #ffffff;
                        }

                        &.tx {
                            background: #bfbfbf;
                            color: #747474;
                        }
                    }
                }
            }
        }

        .income-header-tips {
            height: 124rpx;
            display: flex;
            background: linear-gradient(114deg, #f67873, #fb847f, #f67873);
            border-radius: 10rpx;
            margin: 47rpx 24rpx 0 24rpx;

            .income-header-tips-item {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 15rpx;
                font-weight: 500;
                font-size: 34rpx;
                color: #ffffff;
                line-height: 1;
                position: relative;

                &:not(:last-child):after {
                    content: '';
                    position: absolute;
                    top: 50%;
                    right: 0;
                    transform: translateY(-50%);
                    width: 2px;
                    height: 40rpx;
                    background: #ffffff;
                }

                .income-header-tips-item-num {
                    font-weight: bold;
                }

                .income-header-tips-item-des {
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #ffffff;
                }
            }
        }
    }

    .income-header-notice {
        margin: -50rpx 24rpx 24rpx 24rpx;
        background: #ffffff;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        gap: 20rpx;
        padding: 28rpx 20rpx;

        .income-header-notice-icon {
            width: 52rpx;
            height: 35rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .income-header-notice-content {
            font-weight: 400;
            font-size: 24rpx;
            color: #333333;

            text {
                color: #c52d27;
            }
        }
    }

    .income-header-menu {
        // background: #ffffff;
        border-radius: 10rpx 10rpx 0rpx 0rpx;
        margin-left: 24rpx;
        margin-bottom: 24rpx;
        margin-right: 23rpx;
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;

        .income-header-menu-filter {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
            height: 90rpx;
            background: #ffffff;
            box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(213, 213, 213, 0.29);
            border-radius: 10rpx 10rpx 0rpx 0rpx;

            .income-header-menu-filter-item {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                height: 100%;

                &.active {
                    color: #ed6b66;

                    &:after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 67rpx;
                        height: 6rpx;
                        background: #ed6b66;
                        border-radius: 3rpx;
                    }
                }
            }
        }

        .income-menu-time-filter {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 400;
            font-size: 24rpx;
            color: #333333;
            padding: 30rpx 20rpx 14rpx;
            background: #ffffff;
            margin-top: 4rpx;

            .income-menu-time-filter-text {
                font-weight: 400;
                font-size: 26rpx;
                color: #000000;
                display: flex;
                align-items: center;
                gap: 12rpx;
            }
        }

        .income-header-menu-list {
            background: #ffffff;
            flex: 1;
            min-height: calc(30vh - 100rpx);
            overflow-y: auto;
            /* 确保内容超出时可滚动 */

            .income-header-menu-item {
                height: 88rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #eeeeee;
                padding: 32rpx 0 29rpx;
                margin: 0 20rpx;

                &:last-child {
                    border-bottom: none;
                }

                .income-header-menu-icon {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 19rpx;

                    image {
                        width: 60rpx;
                        height: 60rpx;
                    }

                    .income-header-menu-text {
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #888888;

                        .income-header-menu-text-nickname {
                            font-size: 28rpx;
                            color: #222222;
                            margin-bottom: 18rpx;
                        }
                    }
                }

                .income-header-menu-left {
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #888888;

                    .income-header-menu-left-amount {
                        font-size: 28rpx;
                        color: #222222;
                        margin-bottom: 18rpx;
                        text-align: right;
                    }
                }
            }

            .loading-tip,
            .finished-tip {
                text-align: center;
                padding: 20rpx 0;
                color: #999;
                font-size: 24rpx;
            }
        }
    }
}
</style>