tyc-webview-v2/src/views/WithdrawDetails.vue

<template>
    <div class="min-h-screen bg-gray-50">
        <!-- 提现记录列表 -->
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @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">
                    <div v-if="item.withdraw_type === 1 && item.payee_account">
                        收款账户：{{ maskName(item.payee_account) }}
                    </div>
                    <div v-if="item.withdraw_type === 2">
                        <div v-if="item.bank_card_no">银行卡号：{{ maskBankCard(item.bank_card_no) }}</div>
                        <div v-if="item.bank_name">开户支行：{{ item.bank_name }}</div>
                        <div v-if="item.payee_name">收款人：{{ item.payee_name }}</div>
                    </div>
                    <div v-if="item.remark">备注：{{ item.remark }}</div>
                </div>
            </div>
        </van-list>
    </div>
</template>

<script setup>
// 状态映射配置
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-green-100",
            text: "text-green-800",
            dot: "bg-green-500",
            amount: "text-green-500",
        },
    },
    3: {
        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 maskBankCard = (cardNo) => {
    if (!cardNo || typeof cardNo !== "string") return "";
    const card = cardNo.replace(/\s/g, "");
    if (card.length <= 8) return card;
    return card.substring(0, 4) + " **** **** " + card.substring(card.length - 4);
};

// 状态转中文
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 () => {
    if (!finished.value) {
        await getData();
    }
};

// 获取数据（修改分页逻辑）
const getData = async () => {
    try {
        loading.value = true;
        const { data: res, error } = await useApiFetch(
            `/agent/withdrawal?page=${page.value}&page_size=${pageSize.value}`
        )
            .get()
            .json();
        if (res.value?.code === 200 && !error.value) {
            // 保留首次加载数据
            if (page.value === 1) {
                data.value = res.value.data;
            } else {
                data.value.list.push(...res.value.data.list);
            }

            // 更新分页状态
            page.value++;

            // 判断是否加载完成
            if (
                data.value.list.length >= res.value.data.total ||
                res.value.data.list.length < pageSize.value
            ) {
                finished.value = true;
            }
        }
    } finally {
        loading.value = false;
    }
};

// 初始化加载
onMounted(async () => {
    // 重置分页状态
    page.value = 1;
    finished.value = false;
    await getData();
});
</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>