f

src/views/WithdrawDetails.vue

@@ -0,0 +1,197 @@
+<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>