first commit
This commit is contained in:
219
src/views/WithdrawDetails.vue
Normal file
219
src/views/WithdrawDetails.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<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 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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getWithdrawalList } from '@/api/agent'
|
||||
|
||||
// 新系统状态映射配置：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 () => {
|
||||
if (!finished.value) {
|
||||
await getData();
|
||||
}
|
||||
};
|
||||
|
||||
// 获取数据
|
||||
const getData = async () => {
|
||||
if (loading.value || finished.value) return
|
||||
|
||||
try {
|
||||
loading.value = true;
|
||||
const { data: res, error } = await getWithdrawalList({
|
||||
page: page.value,
|
||||
page_size: pageSize.value
|
||||
});
|
||||
|
||||
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;
|
||||
}
|
||||
} else {
|
||||
// 接口返回错误或请求失败，停止翻页
|
||||
finished.value = true;
|
||||
console.error('获取提现列表失败:', res.value?.msg || error.value || '未知错误');
|
||||
}
|
||||
} catch (err) {
|
||||
// 捕获异常，停止翻页
|
||||
finished.value = true;
|
||||
console.error('获取提现列表失败:', err);
|
||||
} 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>
|
||||
Reference in New Issue
Block a user