feat: 银行端
This commit is contained in:
FlowerWater
@@ -1,49 +1,148 @@
|
||||
<script lang="ts" setup>
|
||||
import { getLoanApplicationList } from '@/api/loan'
|
||||
import { LoanStatus } from '@/typings/loan'
|
||||
import type { LoanApplication } from '@/typings/loan'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '审核列表',
|
||||
enablePullDownRefresh: true
|
||||
},
|
||||
})
|
||||
|
||||
// 模拟审核数据
|
||||
const auditList = ref([
|
||||
{ id: '1', merchantName: '广州数字科技有限公司', amount: 50000.00, status: 'pending', time: '2小时前' },
|
||||
{ id: '2', merchantName: '深圳智慧商贸公司', amount: 128000.00, status: 'pending', time: '3小时前' },
|
||||
{ id: '3', merchantName: '佛山电子商务公司', amount: 35000.00, status: 'approved', time: '昨天' },
|
||||
])
|
||||
// 状态标签
|
||||
const tabs = [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '待处理', value: LoanStatus.SUBMITTED }, // 包含提交/受理等
|
||||
{ label: '已通过', value: LoanStatus.APPROVED },
|
||||
{ label: '已拒绝', value: LoanStatus.REJECTED },
|
||||
]
|
||||
|
||||
const statusMap: Record<string, { text: string; color: string }> = {
|
||||
pending: { text: '待审核', color: '#ff8f0d' },
|
||||
approved: { text: '已通过', color: '#00c05a' },
|
||||
rejected: { text: '已拒绝', color: '#fa4350' },
|
||||
const activeTab = ref('')
|
||||
const keyword = ref('')
|
||||
const list = ref<LoanApplication[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
const statusMap: Record<string, { text: string; color: string; bgColor: string }> = {
|
||||
[LoanStatus.SUBMITTED]: { text: '新申请', color: '#ff8f0d', bgColor: 'rgba(255, 143, 13, 0.1)' },
|
||||
[LoanStatus.ACCEPTED]: { text: '已受理', color: '#4d80f0', bgColor: 'rgba(77, 128, 240, 0.1)' },
|
||||
[LoanStatus.INVESTIGATING]: { text: '调查中', color: '#4d80f0', bgColor: 'rgba(77, 128, 240, 0.1)' },
|
||||
[LoanStatus.REPORTED]: { text: '待审批', color: '#ff8f0d', bgColor: 'rgba(255, 143, 13, 0.1)' },
|
||||
[LoanStatus.APPROVED]: { text: '已通过', color: '#00c05a', bgColor: 'rgba(0, 192, 90, 0.1)' },
|
||||
[LoanStatus.REJECTED]: { text: '已拒绝', color: '#fa4350', bgColor: 'rgba(250, 67, 80, 0.1)' },
|
||||
[LoanStatus.SIGNED]: { text: '已签约', color: '#00c05a', bgColor: 'rgba(0, 192, 90, 0.1)' },
|
||||
[LoanStatus.DISBURSED]: { text: '已放款', color: '#00c05a', bgColor: 'rgba(0, 192, 90, 0.1)' },
|
||||
}
|
||||
|
||||
function handleAudit(id: string) {
|
||||
async function loadData() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getLoanApplicationList({
|
||||
status: activeTab.value || undefined,
|
||||
keyword: keyword.value
|
||||
})
|
||||
list.value = res.list
|
||||
} finally {
|
||||
loading.value = false
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
}
|
||||
|
||||
function handleTabChange(value: string) {
|
||||
activeTab.value = value
|
||||
loadData()
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
loadData()
|
||||
}
|
||||
|
||||
function handleDetail(id: string) {
|
||||
uni.navigateTo({ url: `/pagesBank/audit/detail?id=${id}` })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="audit-list-page">
|
||||
<view class="audit-list">
|
||||
<!-- 顶部状态栏 -->
|
||||
<view class="sticky-header">
|
||||
<view class="search-bar">
|
||||
<view class="search-input">
|
||||
<text class="i-carbon-search"></text>
|
||||
<input
|
||||
v-model="keyword"
|
||||
placeholder="搜索申请人/单号"
|
||||
confirm-type="search"
|
||||
@confirm="handleSearch"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tabs">
|
||||
<view
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === tab.value }"
|
||||
@click="handleTabChange(tab.value)"
|
||||
>
|
||||
{{ tab.label }}
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 列表内容 -->
|
||||
<view class="list-container">
|
||||
<view v-if="loading && list.length === 0" class="loading-state">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
|
||||
<view v-else-if="list.length === 0" class="empty-state">
|
||||
<text class="i-carbon-document-blank"></text>
|
||||
<text>暂无相关贷申请</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-for="item in auditList"
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
class="audit-card"
|
||||
@click="handleAudit(item.id)"
|
||||
@click="handleDetail(item.id)"
|
||||
>
|
||||
<view class="audit-header">
|
||||
<text class="merchant-name">{{ item.merchantName }}</text>
|
||||
<text class="audit-status" :style="{ color: statusMap[item.status].color }">
|
||||
{{ statusMap[item.status].text }}
|
||||
<view class="card-top">
|
||||
<view class="merchant-info">
|
||||
<text class="merchant-name">{{ item.userName }}的贷款申请</text>
|
||||
<text class="time">{{ item.createTime }}</text>
|
||||
</view>
|
||||
<text
|
||||
class="status-tag"
|
||||
:style="{ color: statusMap[item.status]?.color, backgroundColor: statusMap[item.status]?.bgColor }"
|
||||
>
|
||||
{{ statusMap[item.status]?.text || item.status }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="audit-body">
|
||||
<text class="amount">申请金额：¥{{ item.amount.toFixed(2) }}</text>
|
||||
</view>
|
||||
<view class="audit-footer">
|
||||
<text class="time">{{ item.time }}</text>
|
||||
<text class="action" v-if="item.status === 'pending'">去审核 →</text>
|
||||
|
||||
<view class="card-content">
|
||||
<view class="info-row">
|
||||
<text class="label">申请金额</text>
|
||||
<text class="amount">¥{{ item.amount }}<text class="unit">万</text></text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="label">期限</text>
|
||||
<text class="val">{{ item.term }}年</text>
|
||||
</view>
|
||||
<view class="info-row" v-if="item.relatedMerchants.length">
|
||||
<text class="label">关联商家</text>
|
||||
<text class="val">{{ item.relatedMerchants.length }} 家</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -53,69 +152,158 @@ function handleAudit(id: string) {
|
||||
<style lang="scss" scoped>
|
||||
.audit-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 20rpx;
|
||||
background: #f8f9fa;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.audit-list {
|
||||
.sticky-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #fff;
|
||||
padding: 20rpx 0 0;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
padding: 0 30rpx 20rpx;
|
||||
|
||||
.search-input {
|
||||
height: 72rpx;
|
||||
background: #f1f3f5;
|
||||
border-radius: 36rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
gap: 16rpx;
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
justify-content: space-around;
|
||||
border-bottom: 1rpx solid #f1f3f5;
|
||||
|
||||
.tab-item {
|
||||
padding: 20rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #495057;
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
color: #00c05a;
|
||||
font-weight: 700;
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 6rpx;
|
||||
background: #00c05a;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-container {
|
||||
padding: 24rpx 30rpx;
|
||||
}
|
||||
|
||||
.audit-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
.audit-header {
|
||||
.card-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.merchant-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
.merchant-info {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
|
||||
.merchant-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.audit-status {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.audit-body {
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.amount {
|
||||
font-size: 30rpx;
|
||||
.status-tag {
|
||||
font-size: 22rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
font-weight: 600;
|
||||
color: #00c05a;
|
||||
}
|
||||
}
|
||||
|
||||
.audit-footer {
|
||||
.card-content {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.action {
|
||||
font-size: 24rpx;
|
||||
color: #00c05a;
|
||||
font-weight: 500;
|
||||
.info-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.label { font-size: 24rpx; color: #999; margin-bottom: 4rpx; }
|
||||
.amount { font-size: 32rpx; font-weight: 700; color: #333; .unit { font-size: 24rpx; font-weight: normal; margin-left: 2rpx; } }
|
||||
.val { font-size: 28rpx; color: #333; font-weight: 500; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #adb5bd;
|
||||
gap: 20rpx;
|
||||
|
||||
text:first-child {
|
||||
font-size: 80rpx;
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #adb5bd;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user