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 { ref } from 'vue'
import { getAccountCount } from '@/api/home'
import { getCouponIssuerAccountByPageMap, PageMapResponse } from '@/api/income'

import { LOGIN_PAGE } from '@/router/config'
import { useUserStore } from '@/store'
import { useTokenStore } from '@/store/token'
import { changtime, menuButtonInfo, safeAreaInsets, systemInfo } from '@/utils'

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(Number(new Date()))
function confirm() {
    // 函数实现
    show.value = false
}
function cancel() {
    show.value = false
}
function close() {
    show.value = false
}
// 发券人账户表-通过userId查询账户信息
const { send: getAccountCountRequest, data: accountCountData } = useRequest(getAccountCount, {
    immediate: false,
})

const queryForm = ref({
    pageNo: 1,
    pageSize: 10,
    startTime: '',
    endTime: '',
    status: 0, // 0-待结算, 1-已结算/成功
    type: 1, // 明细类型: 1-佣金收入, 2-提现支出, 3-退款扣减, 4-系统调整
})

// 获取账户明细分页数据(Map格式)
const { send: getCouponIssuerAccountByPageMapRequest, data: couponIssuerAccountByPageMapData } = useRequest(
    getCouponIssuerAccountByPageMap,
    { immediate: false },
)
const list = ref<AccountDetailItem[]>([])

onShow(async () => {
    // 登录后查询收益数据
    if (hasLogin) {
        try {
            await getAccountCountRequest()
            await getCouponIssuerAccountByPageMapRequest(queryForm.value)
            // 使用可选链和空值合并运算符避免undefined错误，直接赋值而非展开运算符
            list.value = couponIssuerAccountByPageMapData.value?.detailList || []
        }
        catch (error) {
            console.error('获取收益数据失败:', error)
            uni.showToast({ title: '获取数据失败', icon: 'error' })
            list.value = []
        }
    }
})

function showTimeFilter() {
    show.value = true
}
const wjsList = ref<AccountDetailItem[]>([])
const yjsList = ref<AccountDetailItem[]>([])
onLoad(() => {
    list.value = wjsList.value
})
const activeTab = ref('pending')
async function changeTab(tab: string) {
    console.log(999, activeTab.value, tab)
    if (activeTab.value === tab)
        return
    activeTab.value = tab
    queryForm.value.status = tab === 'pending' ? 0 : 1

    try {
        await getCouponIssuerAccountByPageMapRequest(queryForm.value)
        // 使用可选链和空值合并运算符避免undefined错误，直接赋值而非展开运算符
        list.value = couponIssuerAccountByPageMapData.value?.detailList || []
    }
    catch (error) {
        console.error('切换标签页失败:', error)
        uni.showToast({ title: '获取数据失败', icon: 'error' })
        list.value = []
    }
}

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

<template>
    <view class="profile-container">
        <!-- 顶部区域 -->
        <view class="income-header"
            style="background: url('../../static/images/income/income-bg.png') no-repeat center center; background-size: cover;">
            <view class="income-header-avatar-info"
                :style="{ paddingTop: `${safeAreaInsets.top + menuButtonInfo.height + 12}px` }">
                <view class="income-header-balance">
                    当前账户余额（元）
                </view>
                <view class="income-header-balance-num">
                    <view class="income-header-balance-num-amount">
                        {{ accountCountData?.balance }}
                    </view>
                    <view class="income-header-balance-num-btns">
                        <view class="income-header-balance-num-btn js" @click="goPage('unlockRewards')">
                            解锁
                        </view>
                        <view class="income-header-balance-num-btn tx" @click="goPage('withdraw')">
                            提现
                        </view>
                    </view>
                </view>
            </view>
            <view class="income-header-tips">
                <view class="income-header-tips-item">
                    <view class="income-header-tips-item-num">
                        {{ accountCountData?.withdrawableAmount }}
                    </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 }}
                    </view>
                    <view class="income-header-tips-item-des">
                        未结算金额
                    </view>
                </view>
            </view>
        </view>
        <!-- 公告 -->
        <view class="income-header-notice">
            <view class="income-header-notice-icon">
                <image src="@/static/images/income/notice.png" mode="aspectFit" />
            </view>
            <view class="income-header-notice-content">
                在考核周期内未达标已锁定收益，<text>前往查看~</text>
            </view>
        </view>
        <!-- 菜单 -->
        <view class="income-header-menu">
            <!-- 结算筛选 -->
            <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" />
                </view>
                <view>合计：￥{{ couponIssuerAccountByPageMapData?.totalAmount || 0 }}</view>
            </view>
            <!-- 优惠券列表 -->
            <view class="income-header-menu-list">
                <view v-for="item in list" :key="item.id" class="income-header-menu-item">
                    <view class="income-header-menu-icon">
                        <image v-if="activeTab === 'settled'" src="@/static/images/income/hb.png" mode="aspectFit" />
                        <image v-else src="@/static/images/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>
            </view>
        </view>
        <up-datetime-picker v-model="filterValue" :show="show" mode="year-month" close-on-click-overlay
            @confirm="confirm" @cancel="cancel" />
    </view>
</template>

<style lang="scss" scoped>
.profile-container {
    font-family: Alibaba PuHuiTi;
    min-height: 100vh;
    background-color: #f5f5f5;
    line-height: 1;

    .income-header {
        height: 525rpx;

        .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;

                &:first-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: 24rpx 24rpx 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: 50rpx 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;

            .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;
                    }
                }
            }
        }
    }
}
</style>