qnc-webview-v3/src/views/WithdrawDetails.vue

<template>
    <div class="min-h-screen bg-gray-50">
        <!-- 提现记录列表 -->
        <van-list v-model:loading="loading" :finished="finished" :finished-text="data.list.length > 0 ? '没有更多了' : ''" @load="onLoad">
            <div v-for="(item, index) in data.list" :key="index" class="mx-4 my-2 bg-white rounded-lg p-4 shadow-sm">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-gray-500 text-sm">{{
                        item.create_time || "-"
                        }}</span>
                    <span class="font-bold" :class="getAmountColor(item.status)">{{ item.amount.toFixed(2) }}元</span>
                </div>
                <div class="flex items-center mb-2">
                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
                        :class="getStatusStyle(item.status)">
                        <span class="w-2 h-2 rounded-full mr-1" :class="getDotColor(item.status)"></span>
                        {{ statusToChinese(item.status) }}
                    </span>
                </div>
                <div class="text-xs text-gray-500 space-y-1">
                    <div v-if="item.payee_account">
                        收款账户：{{ maskName(item.payee_account) }}
                    </div>
                    <div v-if="item.payee_name">
                        收款人：{{ item.payee_name }}
                    </div>
                    <div v-if="item.tax_amount > 0">
                        税费：-¥{{ item.tax_amount.toFixed(2) }}
                    </div>
                    <div v-if="item.actual_amount > 0" class="text-green-600 font-medium">
                        实际到账：¥{{ item.actual_amount.toFixed(2) }}
                    </div>
                    <div v-if="item.withdrawal_no">
                        提现单号：{{ item.withdrawal_no }}
                    </div>
                    <div v-if="item.remark">备注：{{ item.remark }}</div>
                </div>
            </div>
        </van-list>

        <!-- 空状态 -->
        <EmptyState v-if="!loading && !data.list.length" text="暂无提现记录" />
    </div>
</template>

<script setup>
import { getWithdrawalList } from '@/api/agent'
import EmptyState from '@/components/EmptyState.vue'

// 新系统状态映射配置：1=待审核，2=审核通过，3=审核拒绝，4=提现中，5=提现成功，6=提现失败
const statusConfig = {
    1: {
        chinese: "待审核",
        color: {
            bg: "bg-yellow-100",
            text: "text-yellow-800",
            dot: "bg-yellow-500",
            amount: "text-yellow-500",
        },
    },
    2: {
        chinese: "审核通过",
        color: {
            bg: "bg-blue-100",
            text: "text-blue-800",
            dot: "bg-blue-500",
            amount: "text-blue-500",
        },
    },
    3: {
        chinese: "审核拒绝",
        color: {
            bg: "bg-red-100",
            text: "text-red-800",
            dot: "bg-red-500",
            amount: "text-red-500",
        },
    },
    4: {
        chinese: "提现中",
        color: {
            bg: "bg-purple-100",
            text: "text-purple-800",
            dot: "bg-purple-500",
            amount: "text-purple-500",
        },
    },
    5: {
        chinese: "提现成功",
        color: {
            bg: "bg-green-100",
            text: "text-green-800",
            dot: "bg-green-500",
            amount: "text-green-500",
        },
    },
    6: {
        chinese: "提现失败",
        color: {
            bg: "bg-red-100",
            text: "text-red-800",
            dot: "bg-red-500",
            amount: "text-red-500",
        },
    },
};

const page = ref(1);
const pageSize = ref(10);
const data = ref({
    total: 0,
    list: [],
});
const loading = ref(false);
const finished = ref(false);

// 账户脱敏处理
const maskName = (name) => {
    if (!name || typeof name !== "string") return "";
    if (name.length <= 7) return name;
    return name.substring(0, 3) + "****" + name.substring(7);
};

// 状态转中文
const statusToChinese = (status) => {
    return statusConfig[status]?.chinese || "未知状态";
};

// 获取状态样式
const getStatusStyle = (status) => {
    const config = statusConfig[status] || {};
    return `${config.color?.bg || "bg-gray-100"} ${config.color?.text || "text-gray-800"
        }`;
};

// 获取小圆点颜色
const getDotColor = (status) => {
    return statusConfig[status]?.color.dot || "bg-gray-500";
};

// 获取金额颜色
const getAmountColor = (status) => {
    return statusConfig[status]?.color.amount || "text-gray-500";
};

// 加载更多数据
const onLoad = async () => {
    await getData();
};

// 获取数据
const getData = async () => {
    try {
        loading.value = true;
        const { data: res, error } = await getWithdrawalList({
            page: page.value,
            page_size: pageSize.value
        });

        if (res.value?.code === 200 && !error.value) {
            const list = res.value.data.list || []
            const total = res.value.data.total || 0

            if (page.value === 1) {
                data.value = { total, list }
            } else {
                data.value.list.push(...list)
            }

            // 判断是否加载完成
            if (
                data.value.list.length >= total ||
                list.length < pageSize.value
            ) {
                finished.value = true;
            } else {
                page.value++;
            }
        } else {
            finished.value = true;
            console.error('获取提现列表失败:', res.value?.msg || error.value || '未知错误');
        }
    } catch (err) {
        finished.value = true;
        console.error('获取提现列表失败:', err);
    } finally {
        loading.value = false;
    }
};
</script>

<style scoped>
/* 保持原有样式不变 */
.list-enter-active {
    transition: all 0.3s ease;
}

.list-enter-from {
    opacity: 0;
    transform: translateY(20px);
}

:deep(.van-list__finished-text) {
    @apply py-4 text-gray-400 text-sm;
}

:deep(.van-list__loading) {
    @apply py-4;
}
</style>