feat: 银行端
This commit is contained in:
FlowerWater
175
src/pagesBank/api/index.ts
Normal file
175
src/pagesBank/api/index.ts
Normal file
@@ -0,0 +1,175 @@
|
||||
import type {
|
||||
BankStats,
|
||||
AuditItem,
|
||||
AuditStatus,
|
||||
BankCustomer,
|
||||
WithdrawAuditDetail
|
||||
} from '@/typings/bank'
|
||||
import {
|
||||
mockBankStats,
|
||||
mockAuditList,
|
||||
getMockWithdrawDetail,
|
||||
mockCustomerList
|
||||
} from '../mock'
|
||||
|
||||
/** 获取银行端首页统计 */
|
||||
export function getBankStats(): Promise<BankStats> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(mockBankStats)
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取审核列表 */
|
||||
export function getAuditList(params: {
|
||||
status?: AuditStatus
|
||||
type?: string
|
||||
pageNum: number
|
||||
pageSize: number
|
||||
keyword?: string
|
||||
}): Promise<{ list: AuditItem[]; total: number }> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
let list = [...mockAuditList]
|
||||
|
||||
// 状态筛选
|
||||
if (params.status) {
|
||||
list = list.filter(item => item.status === params.status)
|
||||
}
|
||||
|
||||
// 关键词筛选
|
||||
if (params.keyword) {
|
||||
const keyword = params.keyword.toLowerCase()
|
||||
list = list.filter(item =>
|
||||
item.merchantName.toLowerCase().includes(keyword) ||
|
||||
item.id.toLowerCase().includes(keyword)
|
||||
)
|
||||
}
|
||||
|
||||
resolve({ list, total: list.length })
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取提现审核详情 */
|
||||
export function getWithdrawAuditDetail(id: string): Promise<WithdrawAuditDetail> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(getMockWithdrawDetail(id))
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 提交审核结果 */
|
||||
export function submitAudit(data: {
|
||||
id: string
|
||||
status: AuditStatus
|
||||
rejectReason?: string
|
||||
}): Promise<boolean> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
// 模拟更新本地 mock 数据状态
|
||||
const item = mockAuditList.find(i => i.id === data.id)
|
||||
if (item) {
|
||||
item.status = data.status
|
||||
}
|
||||
resolve(true)
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取客户列表 */
|
||||
export function getCustomerList(params: {
|
||||
status?: string
|
||||
pageNum: number
|
||||
pageSize: number
|
||||
keyword?: string
|
||||
}): Promise<{ list: BankCustomer[]; total: number }> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
let list = [...mockCustomerList]
|
||||
|
||||
if (params.status) {
|
||||
list = list.filter(item => item.status === params.status)
|
||||
}
|
||||
|
||||
if (params.keyword) {
|
||||
const keyword = params.keyword.toLowerCase()
|
||||
list = list.filter(item =>
|
||||
item.merchantName.toLowerCase().includes(keyword) ||
|
||||
item.contactName.toLowerCase().includes(keyword)
|
||||
)
|
||||
}
|
||||
|
||||
resolve({ list, total: list.length })
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取客户详情 */
|
||||
export function getCustomerDetail(id: string): Promise<BankCustomer | null> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const customer = mockCustomerList.find(item => item.id === id)
|
||||
resolve(customer || null)
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 更新客户授信额度 */
|
||||
export function updateCustomerCredit(data: {
|
||||
merchantId: string
|
||||
creditLimit: number
|
||||
}): Promise<boolean> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const customer = mockCustomerList.find(item => item.merchantId === data.merchantId)
|
||||
if (customer) {
|
||||
customer.creditLimit = data.creditLimit
|
||||
}
|
||||
resolve(true)
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 冻结/解冻客户 */
|
||||
export function freezeCustomer(id: string, status: 'normal' | 'frozen'): Promise<boolean> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const customer = mockCustomerList.find(item => item.id === id)
|
||||
if (customer) {
|
||||
customer.status = status === 'frozen' ? 'frozen' : 'normal'
|
||||
}
|
||||
resolve(true)
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
import { mockTransactions, mockWithdrawHistory } from '../mock'
|
||||
|
||||
/** 获取客户交易流水 */
|
||||
export function getCustomerTransactions(params: {
|
||||
merchantId: string
|
||||
pageNum: number
|
||||
pageSize: number
|
||||
}): Promise<{ list: any[]; total: number }> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({ list: mockTransactions, total: mockTransactions.length })
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取客户提现记录 */
|
||||
export function getCustomerWithdraws(params: {
|
||||
merchantId: string
|
||||
pageNum: number
|
||||
pageSize: number
|
||||
}): Promise<{ list: any[]; total: number }> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({ list: mockWithdrawHistory, total: mockWithdrawHistory.length })
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
452
src/pagesBank/audit/detail.vue
Normal file
452
src/pagesBank/audit/detail.vue
Normal file
@@ -0,0 +1,452 @@
|
||||
<script lang="ts" setup>
|
||||
import { getLoanApplicationDetail, operateLoanApplication } from '@/api/loan'
|
||||
import { LoanStatus } from '@/typings/loan'
|
||||
import type { LoanApplication, RelatedMerchant } from '@/typings/loan'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '贷款审核详情',
|
||||
},
|
||||
})
|
||||
|
||||
const id = ref('')
|
||||
const detail = ref<LoanApplication | null>(null)
|
||||
const loading = ref(false)
|
||||
|
||||
// 流程步骤定义
|
||||
const steps = [
|
||||
{ key: LoanStatus.SUBMITTED, label: '申请' },
|
||||
{ key: LoanStatus.ACCEPTED, label: '受理' },
|
||||
{ key: LoanStatus.INVESTIGATING, label: '调查' },
|
||||
{ key: LoanStatus.APPROVING, label: '审批' },
|
||||
{ key: LoanStatus.SIGNING, label: '签约' },
|
||||
{ key: LoanStatus.DISBURSED, label: '放款' }
|
||||
]
|
||||
|
||||
// 获取当前步骤索引
|
||||
const currentStepIndex = computed(() => {
|
||||
if (!detail.value) return 0
|
||||
const status = detail.value.status
|
||||
const index = steps.findIndex(s => s.key === status)
|
||||
// 特殊处理中间状态映射
|
||||
if (status === LoanStatus.REPORTED) return 3 // 上报后进入审批阶段
|
||||
if (status === LoanStatus.APPROVED) return 4 // 审批通过等待签约
|
||||
if (status === LoanStatus.SIGNED) return 5 // 签约完成等待放款
|
||||
return index > -1 ? index : 0
|
||||
})
|
||||
|
||||
async function loadDetail() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getLoanApplicationDetail(id.value)
|
||||
detail.value = res
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 流程操作
|
||||
async function handleAction(action: string) {
|
||||
let data = null
|
||||
|
||||
if (action === 'investigate') {
|
||||
// 模拟录入调查报告
|
||||
const res = await uni.showModal({
|
||||
title: '录入调查报告',
|
||||
editable: true,
|
||||
placeholderText: '请输入实地调查情况...'
|
||||
})
|
||||
if (!res.confirm) return
|
||||
data = { report: res.content }
|
||||
} else if (action === 'approve' || action === 'reject') {
|
||||
const res = await uni.showModal({
|
||||
title: action === 'approve' ? '确认通过' : '确认拒绝',
|
||||
editable: true,
|
||||
placeholderText: '请输入审批意见...'
|
||||
})
|
||||
if (!res.confirm) return
|
||||
data = { opinion: res.content }
|
||||
} else if (action === 'disburse') {
|
||||
const res = await uni.showModal({
|
||||
title: '确认放款',
|
||||
content: `确认发放贷款 ${detail.value?.amount} 万元？`
|
||||
})
|
||||
if (!res.confirm) return
|
||||
}
|
||||
|
||||
uni.showLoading({ title: '处理中...' })
|
||||
try {
|
||||
await operateLoanApplication(id.value, action, data)
|
||||
uni.showToast({ title: '操作成功', icon: 'success' })
|
||||
loadDetail() // 刷新详情
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
|
||||
function previewImage(url: string) {
|
||||
uni.previewImage({ urls: [url] })
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options?.id) {
|
||||
id.value = options.id
|
||||
loadDetail()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="audit-detail-page">
|
||||
<view v-if="loading" class="loading-state">加载中...</view>
|
||||
|
||||
<template v-else-if="detail">
|
||||
<!-- 流程步骤条 -->
|
||||
<view class="step-card">
|
||||
<view class="steps">
|
||||
<view
|
||||
v-for="(step, index) in steps"
|
||||
:key="step.key"
|
||||
class="step-item"
|
||||
:class="{ active: index <= currentStepIndex, current: index === currentStepIndex }"
|
||||
>
|
||||
<view class="step-icon">
|
||||
<text class="num" v-if="index > currentStepIndex">{{ index + 1 }}</text>
|
||||
<text class="i-carbon-checkmark" v-else></text>
|
||||
</view>
|
||||
<text class="step-label">{{ step.label }}</text>
|
||||
<view class="step-line" v-if="index < steps.length - 1"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 核心信息 -->
|
||||
<view class="info-card">
|
||||
<div class="header">
|
||||
<div class="user">
|
||||
<text class="name">{{ detail.personalInfo.name }}</text>
|
||||
<text class="phone">{{ detail.personalInfo.phone }}</text>
|
||||
</div>
|
||||
<text class="status-tag">{{ detail.status }}</text>
|
||||
</div>
|
||||
<div class="amount-box">
|
||||
<div class="item">
|
||||
<text class="label">申请金额</text>
|
||||
<text class="value">{{ detail.amount }}<text class="unit">万</text></text>
|
||||
</div>
|
||||
<div class="item">
|
||||
<text class="label">申请期限</text>
|
||||
<text class="value">{{ detail.term }}<text class="unit">年</text></text>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
|
||||
<!-- 关联商家及辅助材料 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
<text class="title">关联商家 (辅助材料)</text>
|
||||
</view>
|
||||
<view class="merchant-list">
|
||||
<view
|
||||
v-for="merchant in detail.relatedMerchants"
|
||||
:key="merchant.merchantId"
|
||||
class="merchant-item"
|
||||
>
|
||||
<view class="m-header">
|
||||
<text class="m-name">{{ merchant.merchantName }}</text>
|
||||
<text
|
||||
class="m-status"
|
||||
:class="merchant.assistStatus"
|
||||
>
|
||||
{{ merchant.assistStatus === 'submitted' ? '已提交材料' : '未提交' }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- 材料展示 -->
|
||||
<view class="materials" v-if="merchant.materials?.materials.length">
|
||||
<view
|
||||
v-for="(img, idx) in merchant.materials.materials"
|
||||
:key="idx"
|
||||
class="img-item"
|
||||
@click="previewImage(img.url)"
|
||||
>
|
||||
<image :src="img.url" mode="aspectFill" />
|
||||
<text class="type-tag">{{ img.type }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 经营信息 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">经营信息</view>
|
||||
<view class="cell-group">
|
||||
<view class="cell">
|
||||
<text class="label">经营项目</text>
|
||||
<text class="value">{{ detail.businessInfo.businessProject }}</text>
|
||||
</view>
|
||||
<view class="cell">
|
||||
<text class="label">年收入</text>
|
||||
<text class="value">{{ detail.businessInfo.annualIncome }}万</text>
|
||||
</view>
|
||||
<view class="cell">
|
||||
<text class="label">负债情况</text>
|
||||
<text class="value">{{ detail.businessInfo.hasDebt === 'yes' ? '有负债' : '无负债' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="action-bar safe-area-bottom">
|
||||
<template v-if="detail.status === LoanStatus.SUBMITTED">
|
||||
<button class="btn primary" @click="handleAction('accept')">受理申请</button>
|
||||
</template>
|
||||
|
||||
<template v-else-if="detail.status === LoanStatus.ACCEPTED">
|
||||
<button class="btn primary" @click="handleAction('investigate')">开始上门调查</button>
|
||||
</template>
|
||||
|
||||
<template v-else-if="detail.status === LoanStatus.INVESTIGATING">
|
||||
<button class="btn primary" @click="handleAction('report')">提交调查报告</button>
|
||||
</template>
|
||||
|
||||
<template v-else-if="[LoanStatus.REPORTED, LoanStatus.APPROVING].includes(detail.status)">
|
||||
<button class="btn danger" @click="handleAction('reject')">拒绝</button>
|
||||
<button class="btn primary" @click="handleAction('approve')">通过审批</button>
|
||||
</template>
|
||||
|
||||
<template v-else-if="detail.status === LoanStatus.APPROVED">
|
||||
<button class="btn primary" @click="handleAction('sign')">完成签约</button>
|
||||
</template>
|
||||
|
||||
<template v-else-if="detail.status === LoanStatus.SIGNED">
|
||||
<button class="btn success" @click="handleAction('disburse')">确认放款</button>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.audit-detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
padding: 20rpx;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.step-card {
|
||||
background: #fff;
|
||||
padding: 30rpx 20rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.steps {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.step-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.step-icon {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
background: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-bottom: 10rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.step-label {
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.step-line {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
background: #f0f0f0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.step-icon {
|
||||
background: #e6f7eb;
|
||||
color: #00c05a;
|
||||
}
|
||||
.step-label {
|
||||
color: #333;
|
||||
}
|
||||
.step-line {
|
||||
background: #00c05a;
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
.step-icon {
|
||||
background: #00c05a;
|
||||
color: #fff;
|
||||
}
|
||||
.step-label {
|
||||
font-weight: bold;
|
||||
color: #00c05a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.user {
|
||||
.name { font-size: 32rpx; font-weight: bold; margin-right: 16rpx; }
|
||||
.phone { font-size: 26rpx; opacity: 0.9; }
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
background: rgba(255,255,255,0.2);
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.amount-box {
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
|
||||
.label { display: block; font-size: 24rpx; opacity: 0.8; margin-bottom: 8rpx; }
|
||||
.value { font-size: 40rpx; font-weight: bold;
|
||||
.unit { font-size: 24rpx; font-weight: normal; margin-left: 4rpx; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.card-header {
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.cell-group {
|
||||
padding: 20rpx 0;
|
||||
.cell {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx 0;
|
||||
font-size: 26rpx;
|
||||
|
||||
.label { color: #666; }
|
||||
.value { color: #333; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.merchant-list {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.merchant-item {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.m-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.m-name { font-size: 28rpx; font-weight: bold; color: #333; }
|
||||
.m-status { font-size: 24rpx; color: #999;
|
||||
&.submitted { color: #00c05a; }
|
||||
}
|
||||
}
|
||||
|
||||
.materials {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.img-item {
|
||||
position: relative;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
|
||||
image { width: 100%; height: 100%; border-radius: 8rpx; }
|
||||
.type-tag {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
color: #fff;
|
||||
font-size: 18rpx;
|
||||
text-align: center;
|
||||
border-bottom-left-radius: 8rpx;
|
||||
border-bottom-right-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
padding: 20rpx 30rpx;
|
||||
box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
z-index: 100;
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
|
||||
&.primary { background: #00c05a; color: #fff; }
|
||||
&.danger { background: #fa4350; color: #fff; }
|
||||
&.success { background: #00c05a; color: #fff; }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
|
||||
439
src/pagesBank/customer/detail.vue
Normal file
439
src/pagesBank/customer/detail.vue
Normal file
@@ -0,0 +1,439 @@
|
||||
<script lang="ts" setup>
|
||||
import { getCustomerDetail, updateCustomerCredit, freezeCustomer } from '@/pagesBank/api'
|
||||
import type { BankCustomer } from '@/typings/bank'
|
||||
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '客户详情',
|
||||
},
|
||||
})
|
||||
|
||||
const id = ref('')
|
||||
const detail = ref<BankCustomer | null>(null)
|
||||
const loading = ref(false)
|
||||
|
||||
async function loadDetail() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getCustomerDetail(id.value)
|
||||
detail.value = res
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleUpdateCredit() {
|
||||
uni.showModal({
|
||||
title: '调整授信额度',
|
||||
placeholderText: '请输入新的授信额度 (元)',
|
||||
editable: true,
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
const amount = parseFloat(res.content)
|
||||
if (isNaN(amount) || amount <= 0) {
|
||||
uni.showToast({ title: '请输入正确的金额', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
uni.showLoading({ title: '提交中...' })
|
||||
try {
|
||||
await updateCustomerCredit({
|
||||
merchantId: detail.value!.merchantId,
|
||||
creditLimit: amount
|
||||
})
|
||||
uni.showToast({ title: '调整成功', icon: 'success' })
|
||||
loadDetail()
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function handleCall() {
|
||||
if (detail.value?.contactPhone) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: detail.value.contactPhone
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function handleTransactions() {
|
||||
uni.navigateTo({
|
||||
url: `/pagesBank/customer/transaction-list?id=${id.value}&merchantId=${detail.value?.merchantId}`
|
||||
})
|
||||
}
|
||||
|
||||
function handleWithdraws() {
|
||||
uni.navigateTo({
|
||||
url: `/pagesBank/customer/withdraw-list?id=${id.value}&merchantId=${detail.value?.merchantId}`
|
||||
})
|
||||
}
|
||||
|
||||
function handleFreeze() {
|
||||
const isFrozen = detail.value?.status === 'frozen'
|
||||
uni.showModal({
|
||||
title: isFrozen ? '解冻账户' : '冻结账户',
|
||||
content: isFrozen ? '确定要解除该账户的冻结状态吗？' : '冻结后该商户将无法进行交易和提现，确定执行？',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({ title: '提交中...' })
|
||||
try {
|
||||
await freezeCustomer(id.value, isFrozen ? 'normal' : 'frozen')
|
||||
uni.showToast({ title: '操作成功', icon: 'success' })
|
||||
loadDetail()
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options?.id) {
|
||||
id.value = options.id
|
||||
loadDetail()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="customer-detail-page">
|
||||
<view v-if="loading" class="loading-box">加载中...</view>
|
||||
|
||||
<template v-else-if="detail">
|
||||
<!-- 头部商户概览 -->
|
||||
<view class="header-card">
|
||||
<view class="merchant-base">
|
||||
<image :src="detail.logo || '/static/images/avatar.jpg'" class="logo" mode="aspectFill" />
|
||||
<view class="info">
|
||||
<text class="name">{{ detail.merchantName }}</text>
|
||||
<view class="tags">
|
||||
<text class="tag">{{ detail.status === 'normal' ? '优质客户' : '风险预警' }}</text>
|
||||
<text class="tag gold">V3会员</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="stats-row">
|
||||
<view class="stat-item">
|
||||
<text class="label">可用余额</text>
|
||||
<text class="value">¥{{ detail.balance.toLocaleString() }}</text>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
<view class="stat-item">
|
||||
<text class="label">已用额度</text>
|
||||
<text class="value highlight">¥{{ detail.usedLimit.toLocaleString() }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 授信管理 -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<view class="title">授信管理</view>
|
||||
<view class="action-btn" @click="handleUpdateCredit">调整额度</view>
|
||||
</view>
|
||||
<view class="credit-box">
|
||||
<view class="progress-container">
|
||||
<view class="progress-labels">
|
||||
<text>当前总额度</text>
|
||||
<text>¥{{ detail.creditLimit.toLocaleString() }}</text>
|
||||
</view>
|
||||
<view class="progress-bar">
|
||||
<view
|
||||
class="inner"
|
||||
:style="{ width: (detail.usedLimit / detail.creditLimit * 100) + '%' }"
|
||||
></view>
|
||||
</view>
|
||||
<view class="progress-footer">
|
||||
<text>已使用 {{ (detail.usedLimit / detail.creditLimit * 100).toFixed(1) }}%</text>
|
||||
<text>剩余 ¥{{ (detail.creditLimit - detail.usedLimit).toLocaleString() }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 联系信息 -->
|
||||
<view class="section">
|
||||
<view class="section-title">联系信息</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">联系人</text>
|
||||
<text class="value">{{ detail.contactName }}</text>
|
||||
</view>
|
||||
<view class="info-item" @click="handleCall">
|
||||
<text class="label">联系电话</text>
|
||||
<view class="value phone">
|
||||
{{ detail.contactPhone }}
|
||||
<text class="i-carbon-phone-filled"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">加入时间</text>
|
||||
<text class="value">{{ detail.joinTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 快捷操作 -->
|
||||
<view class="bottom-actions">
|
||||
<view class="action-item" @click="handleTransactions">
|
||||
<text class="i-carbon-list"></text>
|
||||
交易流水
|
||||
</view>
|
||||
<view class="action-item" @click="handleWithdraws">
|
||||
<text class="i-carbon-wallet"></text>
|
||||
提现记录
|
||||
</view>
|
||||
<view class="action-item" :class="{ danger: detail.status !== 'frozen' }" @click="handleFreeze">
|
||||
<text :class="detail.status === 'frozen' ? 'i-carbon-locked' : 'i-carbon-unlocked'"></text>
|
||||
{{ detail.status === 'frozen' ? '解冻账户' : '冻结账户' }}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.customer-detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f8f9fa;
|
||||
padding-bottom: calc(60rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.header-card {
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
padding: 20rpx 40rpx 40rpx;
|
||||
color: #fff;
|
||||
border-bottom-left-radius: 40rpx;
|
||||
border-bottom-right-radius: 40rpx;
|
||||
|
||||
.merchant-base {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.logo {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50rpx;
|
||||
border: 4rpx solid rgba(255, 255, 255, 0.5);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.info {
|
||||
.name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
.tag {
|
||||
font-size: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 20rpx;
|
||||
&.gold { background: #ffb347; color: #fff; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx 0;
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
.label {
|
||||
font-size: 24rpx;
|
||||
opacity: 0.8;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.value {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 1rpx;
|
||||
height: 32rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
background: #fff;
|
||||
margin: 0 30rpx 24rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx 30rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
padding-left: 20rpx;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: #00c05a;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 24rpx;
|
||||
color: #00c05a;
|
||||
font-weight: 600;
|
||||
padding: 8rpx 20rpx;
|
||||
background: rgba(0, 192, 90, 0.1);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 24rpx;
|
||||
padding-left: 20rpx;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: #00c05a;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.credit-box {
|
||||
.progress-container {
|
||||
.progress-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-bottom: 16rpx;
|
||||
text:last-child { font-weight: 700; color: #333; }
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 16rpx;
|
||||
background: #f1f3f5;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.inner {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #34d19d 0%, #00c05a 100%);
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-list {
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f8f9fa;
|
||||
&:last-child { border-bottom: none; }
|
||||
|
||||
.label {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
|
||||
&.phone {
|
||||
color: #4d80f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
margin: 40rpx 30rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
|
||||
.action-item {
|
||||
flex: 1;
|
||||
height: 100rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
gap: 8rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
text { font-size: 40rpx; color: #00c05a; }
|
||||
|
||||
&.danger { text { color: #fa4350; } color: #fa4350; }
|
||||
|
||||
&:active { background: #f8f9fa; }
|
||||
}
|
||||
}
|
||||
|
||||
.loading-box {
|
||||
padding: 100rpx;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -1,55 +1,177 @@
|
||||
<script lang="ts" setup>
|
||||
import { getCustomerList } from '@/pagesBank/api'
|
||||
import type { BankCustomer } from '@/typings/bank'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '客户管理',
|
||||
enablePullDownRefresh: true
|
||||
},
|
||||
})
|
||||
|
||||
// 模拟客户数据
|
||||
const customers = ref([
|
||||
{ id: '1', name: '广州数字科技有限公司', creditLimit: 500000, usedLimit: 125000, status: 'normal' },
|
||||
{ id: '2', name: '深圳智慧商贸公司', creditLimit: 300000, usedLimit: 280000, status: 'warning' },
|
||||
{ id: '3', name: '佛山电子商务公司', creditLimit: 200000, usedLimit: 50000, status: 'normal' },
|
||||
])
|
||||
const customers = ref<BankCustomer[]>([])
|
||||
const loading = ref(false)
|
||||
const keyword = ref('')
|
||||
const activeStatus = ref('')
|
||||
|
||||
const statusTabs = [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '正常', value: 'normal' },
|
||||
{ label: '预警', value: 'warning' },
|
||||
{ label: '冻结', value: 'frozen' },
|
||||
]
|
||||
|
||||
async function loadData() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getCustomerList({
|
||||
status: activeStatus.value || undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
keyword: keyword.value
|
||||
})
|
||||
customers.value = res.list
|
||||
} finally {
|
||||
loading.value = false
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
loadData()
|
||||
}
|
||||
|
||||
function handleTabChange(value: string) {
|
||||
activeStatus.value = value
|
||||
loadData()
|
||||
}
|
||||
|
||||
function handleDetail(id: string) {
|
||||
uni.navigateTo({ url: `/pagesBank/customer/detail?id=${id}` })
|
||||
}
|
||||
|
||||
function getUsageRate(used: number, total: number) {
|
||||
return ((used / total) * 100).toFixed(1)
|
||||
return (used / total) * 100
|
||||
}
|
||||
|
||||
function getStatusInfo(status: string) {
|
||||
const map: Record<string, { text: string; color: string; bgColor: string }> = {
|
||||
normal: { text: '正常', color: '#00c05a', bgColor: 'rgba(0, 192, 90, 0.1)' },
|
||||
warning: { text: '预警', color: '#ff8f0d', bgColor: 'rgba(255, 143, 13, 0.1)' },
|
||||
frozen: { text: '冻结', color: '#fa4350', bgColor: 'rgba(250, 67, 80, 0.1)' },
|
||||
}
|
||||
return map[status] || { text: '未知', color: '#999', bgColor: '#f5f5f5' }
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="customer-list-page">
|
||||
<view class="customer-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 statusTabs"
|
||||
:key="tab.value"
|
||||
class="tab-item"
|
||||
:class="{ active: activeStatus === tab.value }"
|
||||
@click="handleTabChange(tab.value)"
|
||||
>
|
||||
{{ tab.label }}
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-container">
|
||||
<view v-if="loading && customers.length === 0" class="loading-state">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
|
||||
<view v-else-if="customers.length === 0" class="empty-state">
|
||||
<text class="i-carbon-user-avatar-filled-blank"></text>
|
||||
<text>暂无相关客户信息</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-for="item in customers"
|
||||
:key="item.id"
|
||||
class="customer-card"
|
||||
@click="handleDetail(item.id)"
|
||||
>
|
||||
<view class="customer-header">
|
||||
<text class="customer-name">{{ item.name }}</text>
|
||||
<text class="customer-status" :class="item.status">
|
||||
{{ item.status === 'normal' ? '正常' : '预警' }}
|
||||
<view class="card-header">
|
||||
<view class="customer-base">
|
||||
<image :src="item.logo || '/static/images/avatar.jpg'" class="logo" mode="aspectFill" />
|
||||
<view class="info">
|
||||
<text class="name">{{ item.merchantName }}</text>
|
||||
<text class="contact">{{ item.contactName }} {{ item.contactPhone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text
|
||||
class="status-tag"
|
||||
:style="{ color: getStatusInfo(item.status).color, backgroundColor: getStatusInfo(item.status).bgColor }"
|
||||
>
|
||||
{{ getStatusInfo(item.status).text }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="customer-body">
|
||||
<view class="limit-info">
|
||||
<text class="label">授信额度</text>
|
||||
<text class="value">¥{{ (item.creditLimit / 10000).toFixed(0) }}万</text>
|
||||
|
||||
<view class="card-body">
|
||||
<view class="limit-stats">
|
||||
<view class="stat-item">
|
||||
<text class="label">授信总额</text>
|
||||
<text class="value">¥{{ (item.creditLimit / 10000).toFixed(1) }}w</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="label">已使用</text>
|
||||
<text class="value highlight">¥{{ (item.usedLimit / 10000).toFixed(1) }}w</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="label">可用余额</text>
|
||||
<text class="value">¥{{ (item.balance / 10000).toFixed(1) }}w</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="limit-info">
|
||||
<text class="label">已使用</text>
|
||||
<text class="value used">¥{{ (item.usedLimit / 10000).toFixed(1) }}万</text>
|
||||
|
||||
<view class="usage-progress">
|
||||
<view class="progress-info">
|
||||
<text>额度使用率</text>
|
||||
<text :class="{ danger: getUsageRate(item.usedLimit, item.creditLimit) > 80 }">
|
||||
{{ getUsageRate(item.usedLimit, item.creditLimit).toFixed(1) }}%
|
||||
</text>
|
||||
</view>
|
||||
<view class="progress-bar">
|
||||
<view
|
||||
class="progress-inner"
|
||||
:style="{
|
||||
width: Math.min(getUsageRate(item.usedLimit, item.creditLimit), 100) + '%',
|
||||
backgroundColor: getUsageRate(item.usedLimit, item.creditLimit) > 80 ? '#fa4350' : '#00c05a'
|
||||
}"
|
||||
></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="limit-info">
|
||||
<text class="label">使用率</text>
|
||||
<text class="value" :class="{ warning: item.status === 'warning' }">
|
||||
{{ getUsageRate(item.usedLimit, item.creditLimit) }}%
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="card-footer">
|
||||
<text class="join-time">加入时间：{{ item.joinTime }}</text>
|
||||
<view class="action">
|
||||
管理客户 <text class="i-carbon-chevron-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -60,82 +182,228 @@ function getUsageRate(used: number, total: number) {
|
||||
<style lang="scss" scoped>
|
||||
.customer-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 20rpx;
|
||||
background: #f8f9fa;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.customer-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;
|
||||
}
|
||||
|
||||
.customer-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);
|
||||
|
||||
.customer-header {
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.customer-base {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
flex: 1;
|
||||
|
||||
.logo {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.info {
|
||||
.name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
.contact {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
background: #f8f9fa;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.limit-stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.stat-item {
|
||||
.label {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
|
||||
&.highlight { color: #00c05a; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.usage-progress {
|
||||
.progress-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.danger { color: #fa4350; font-weight: 700; }
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 12rpx;
|
||||
background: #e9ecef;
|
||||
border-radius: 6rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.progress-inner {
|
||||
height: 100%;
|
||||
border-radius: 6rpx;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
border-top: 1rpx solid #f1f3f5;
|
||||
padding-top: 20rpx;
|
||||
|
||||
.customer-name {
|
||||
font-size: 28rpx;
|
||||
.join-time {
|
||||
font-size: 24rpx;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.action {
|
||||
font-size: 26rpx;
|
||||
color: #4d80f0;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.customer-status {
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
|
||||
&.normal {
|
||||
background: rgba(0, 192, 90, 0.1);
|
||||
color: #00c05a;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: rgba(255, 143, 13, 0.1);
|
||||
color: #ff8f0d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.customer-body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.limit-info {
|
||||
text-align: center;
|
||||
|
||||
.label {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
|
||||
&.used {
|
||||
color: #00c05a;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: #ff8f0d;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
107
src/pagesBank/customer/transaction-list.vue
Normal file
107
src/pagesBank/customer/transaction-list.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<script lang="ts" setup>
|
||||
import { getCustomerTransactions } from '@/pagesBank/api'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
|
||||
const merchantId = ref('')
|
||||
const list = ref<any[]>([])
|
||||
const loading = ref(false)
|
||||
const finished = ref(false)
|
||||
|
||||
async function loadData() {
|
||||
if (loading.value || finished.value) return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getCustomerTransactions({
|
||||
merchantId: merchantId.value,
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
})
|
||||
list.value = res.list
|
||||
finished.value = true
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options?.merchantId) {
|
||||
merchantId.value = options.merchantId
|
||||
loadData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="transaction-list-page">
|
||||
<view class="list">
|
||||
<view class="item" v-for="item in list" :key="item.id">
|
||||
<view class="left">
|
||||
<text class="title">{{ item.title }}</text>
|
||||
<text class="time">{{ item.time }}</text>
|
||||
</view>
|
||||
<view class="right">
|
||||
<text class="amount" :class="item.type">
|
||||
{{ item.type === 'expend' || item.type === 'withdraw' ? '-' : '+' }}{{ item.amount.toFixed(2) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="loading" class="loading">加载中...</view>
|
||||
<view v-else-if="list.length === 0" class="empty">暂无记录</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.transaction-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f8f9fa;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: #fff;
|
||||
padding: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.02);
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.amount {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
|
||||
&.income { color: #fe5b02; }
|
||||
&.expend { color: #333; }
|
||||
&.withdraw { color: #333; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading, .empty {
|
||||
text-align: center;
|
||||
padding: 40rpx;
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
</style>
|
||||
126
src/pagesBank/customer/withdraw-list.vue
Normal file
126
src/pagesBank/customer/withdraw-list.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<script lang="ts" setup>
|
||||
import { getCustomerWithdraws } from '@/pagesBank/api'
|
||||
import { AuditStatus } from '@/typings/bank'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
|
||||
const merchantId = ref('')
|
||||
const list = ref<any[]>([])
|
||||
const loading = ref(false)
|
||||
const finished = ref(false)
|
||||
|
||||
const statusMap: Record<string, { text: string; color: string }> = {
|
||||
[AuditStatus.PENDING]: { text: '待审核', color: '#ff8f0d' },
|
||||
[AuditStatus.APPROVED]: { text: '已通过', color: '#00c05a' },
|
||||
[AuditStatus.REJECTED]: { text: '已拒绝', color: '#fa4350' },
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
if (loading.value || finished.value) return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getCustomerWithdraws({
|
||||
merchantId: merchantId.value,
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
})
|
||||
list.value = res.list
|
||||
finished.value = true
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options?.merchantId) {
|
||||
merchantId.value = options.merchantId
|
||||
loadData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="withdraw-list-page">
|
||||
<view class="list">
|
||||
<view class="item" v-for="item in list" :key="item.id">
|
||||
<view class="header">
|
||||
<text class="time">{{ item.time }}</text>
|
||||
<text class="status" :style="{ color: statusMap[item.status]?.color }">
|
||||
{{ statusMap[item.status]?.text }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="amount">¥{{ item.amount.toFixed(2) }}</view>
|
||||
<view class="bank">{{ item.bank }}</view>
|
||||
</view>
|
||||
<view class="footer" v-if="item.reason">
|
||||
<text class="reason">拒绝原因: {{ item.reason }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="loading" class="loading">加载中...</view>
|
||||
<view v-else-if="list.length === 0" class="empty">暂无记录</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.withdraw-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f8f9fa;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: #fff;
|
||||
padding: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.02);
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
.time { color: #999; }
|
||||
.status { font-weight: 500; }
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.amount {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.bank {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding-top: 20rpx;
|
||||
border-top: 1rpx solid #f8f9fa;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.reason {
|
||||
font-size: 24rpx;
|
||||
color: #fa4350;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading, .empty {
|
||||
text-align: center;
|
||||
padding: 40rpx;
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import { useUserStore } from '@/store/user'
|
||||
import { useBankStore } from '@/store/bank'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
@@ -8,60 +9,96 @@ definePage({
|
||||
})
|
||||
|
||||
const userStore = useUserStore()
|
||||
const bankStore = useBankStore()
|
||||
|
||||
// 模拟数据
|
||||
const stats = ref({
|
||||
pendingAudit: 45,
|
||||
todayApproved: 28,
|
||||
totalAmount: 2568000.00,
|
||||
customers: 156,
|
||||
})
|
||||
|
||||
// 快捷操作
|
||||
const quickActions = [
|
||||
{ icon: 'i-carbon-task-approved', label: '待审核', path: '/pagesBank/audit/list' },
|
||||
{ icon: 'i-carbon-group', label: '客户管理', path: '/pagesBank/customer/list' },
|
||||
{ icon: 'i-carbon-report', label: '数据报表', path: '/pagesBank/dashboard/index' },
|
||||
{ icon: 'i-carbon-report', label: '数据报表', path: '' }, // 暂未实现
|
||||
{ icon: 'i-carbon-settings', label: '设置', path: '/pagesBank/me/index' },
|
||||
]
|
||||
|
||||
function handleAction(path: string) {
|
||||
if (!path) {
|
||||
uni.showToast({ title: '功能开发中', icon: 'none' })
|
||||
return
|
||||
}
|
||||
uni.navigateTo({ url: path })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
bankStore.fetchStats()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="dashboard-page">
|
||||
<view class="header-bg"></view>
|
||||
|
||||
<!-- 头部欢迎 -->
|
||||
<view class="header">
|
||||
<view class="header-content">
|
||||
<view class="welcome">
|
||||
<text class="greeting">您好，{{ userStore.userInfo?.nickname || '银行用户' }}</text>
|
||||
<text class="sub-text">金融服务数据总览</text>
|
||||
<text class="greeting">您好，{{ userStore.userInfo?.nickname || '银行管理员' }}</text>
|
||||
<text class="sub-text">欢迎回到银行端管理系统</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数据卡片 -->
|
||||
<view class="stats-grid">
|
||||
<view class="stat-card warning">
|
||||
<text class="stat-value">{{ stats.pendingAudit }}</text>
|
||||
<text class="stat-label">待审核</text>
|
||||
<!-- 关键指标卡片 -->
|
||||
<view class="stats-overview">
|
||||
<view class="total-amount-card">
|
||||
<text class="label">累计放款金额 (元)</text>
|
||||
<view class="amount-box">
|
||||
<text class="unit">¥</text>
|
||||
<text class="value">{{ (bankStore.stats?.totalLoanAmount || 0).toLocaleString() }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="stat-card success">
|
||||
<text class="stat-value">{{ stats.todayApproved }}</text>
|
||||
<text class="stat-label">今日已审</text>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<text class="stat-value">{{ (stats.totalAmount / 10000).toFixed(0) }}万</text>
|
||||
<text class="stat-label">累计放款</text>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<text class="stat-value">{{ stats.customers }}</text>
|
||||
<text class="stat-label">服务客户</text>
|
||||
|
||||
<view class="stats-grid">
|
||||
<view class="stat-card" @click="handleAction('/pagesBank/audit/list')">
|
||||
<view class="stat-info">
|
||||
<text class="stat-value warning">{{ bankStore.stats?.pendingAuditWithdraw || 0 }}</text>
|
||||
<text class="stat-label">待审提现</text>
|
||||
</view>
|
||||
<view class="stat-icon warning">
|
||||
<text class="i-carbon-wallet"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<view class="stat-info">
|
||||
<text class="stat-value success">{{ bankStore.stats?.todayApprovedCount || 0 }}</text>
|
||||
<text class="stat-label">今日审批</text>
|
||||
</view>
|
||||
<view class="stat-icon success">
|
||||
<text class="i-carbon-checkmark-outline"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="stat-card" @click="handleAction('/pagesBank/customer/list')">
|
||||
<view class="stat-info">
|
||||
<text class="stat-value">{{ bankStore.stats?.activeCustomerCount || 0 }}</text>
|
||||
<text class="stat-label">活跃商户</text>
|
||||
</view>
|
||||
<view class="stat-icon">
|
||||
<text class="i-carbon-user-activity"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<view class="stat-info">
|
||||
<text class="stat-value">{{ bankStore.stats?.pendingAuditStore || 0 }}</text>
|
||||
<text class="stat-label">待审入驻</text>
|
||||
</view>
|
||||
<view class="stat-icon">
|
||||
<text class="i-carbon-store"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 快捷操作 -->
|
||||
<view class="section">
|
||||
<view class="section-title">快捷操作</view>
|
||||
<view class="section-header">
|
||||
<text class="section-title">快捷操作</text>
|
||||
</view>
|
||||
<view class="quick-actions">
|
||||
<view
|
||||
v-for="item in quickActions"
|
||||
@@ -76,27 +113,53 @@ function handleAction(path: string) {
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 最近动态 (Placeholder) -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">最近动态</text>
|
||||
<text class="more">更多 ></text>
|
||||
</view>
|
||||
<view class="empty-dynamic">
|
||||
<text class="i-carbon-reminder-attendance"></text>
|
||||
<text>暂无新的审核动态</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
background: #f8f9fa;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.header {
|
||||
.header-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 480rpx; /* 稍微增高一点以容纳更多内容 */
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
padding: 40rpx 30rpx 60rpx;
|
||||
border-bottom-left-radius: 40rpx;
|
||||
border-bottom-right-radius: 40rpx;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
position: relative;
|
||||
padding: 60rpx 40rpx 20rpx;
|
||||
z-index: 1;
|
||||
|
||||
.welcome {
|
||||
color: #fff;
|
||||
|
||||
.greeting {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
@@ -106,54 +169,127 @@ function handleAction(path: string) {
|
||||
}
|
||||
}
|
||||
|
||||
.stats-overview {
|
||||
position: relative;
|
||||
margin: 0 30rpx;
|
||||
z-index: 1;
|
||||
|
||||
.total-amount-card {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx;
|
||||
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.label {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.amount-box {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.unit {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 56rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20rpx;
|
||||
padding: 0 20rpx;
|
||||
margin-top: -40rpx;
|
||||
|
||||
.stat-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
|
||||
|
||||
.stat-value {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
.stat-info {
|
||||
.stat-value {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 4rpx;
|
||||
|
||||
&.warning { color: #ff8f0d; }
|
||||
&.success { color: #00c05a; }
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&.warning .stat-value {
|
||||
color: #ff8f0d;
|
||||
}
|
||||
|
||||
&.success .stat-value {
|
||||
color: #00c05a;
|
||||
.stat-icon {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
font-size: 36rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: rgba(255, 143, 13, 0.1);
|
||||
text { color: #ff8f0d; }
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: rgba(0, 192, 90, 0.1);
|
||||
text { color: #00c05a; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
margin: 30rpx 20rpx;
|
||||
margin: 30rpx;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 24rpx;
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.more {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -166,27 +302,51 @@ function handleAction(path: string) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
gap: 16rpx;
|
||||
|
||||
.action-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
border-radius: 20rpx;
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
|
||||
text {
|
||||
font-size: 40rpx;
|
||||
color: #fff;
|
||||
font-size: 44rpx;
|
||||
color: #00c05a;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #e9ecef;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.action-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
color: #495057;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-dynamic {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40rpx 0;
|
||||
color: #adb5bd;
|
||||
gap: 16rpx;
|
||||
|
||||
text:first-child {
|
||||
font-size: 64rpx;
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
111
src/pagesBank/mock/index.ts
Normal file
111
src/pagesBank/mock/index.ts
Normal file
@@ -0,0 +1,111 @@
|
||||
import type {
|
||||
BankStats,
|
||||
AuditItem,
|
||||
BankCustomer,
|
||||
WithdrawAuditDetail
|
||||
} from '@/typings/bank'
|
||||
import { AuditStatus, AuditType } from '@/typings/bank'
|
||||
|
||||
// 统计数据 Mock
|
||||
export const mockBankStats: BankStats = {
|
||||
pendingAuditStore: 5,
|
||||
pendingAuditWithdraw: 12,
|
||||
todayApprovedCount: 8,
|
||||
totalLoanAmount: 12850000.00,
|
||||
activeCustomerCount: 156
|
||||
}
|
||||
|
||||
// 审核记录 Mock
|
||||
export const mockAuditList: AuditItem[] = [
|
||||
{
|
||||
id: 'W001',
|
||||
merchantId: 'M1001',
|
||||
merchantName: '广州酷玩玩具城',
|
||||
type: AuditType.WITHDRAW,
|
||||
amount: 5000.00,
|
||||
status: AuditStatus.PENDING,
|
||||
applyTime: '2024-12-19 10:30:00',
|
||||
remark: '年终结算提现'
|
||||
},
|
||||
{
|
||||
id: 'W002',
|
||||
merchantId: 'M1002',
|
||||
merchantName: '深圳特粉专卖店',
|
||||
type: AuditType.WITHDRAW,
|
||||
amount: 12800.00,
|
||||
status: AuditStatus.PENDING,
|
||||
applyTime: '2024-12-19 09:15:00'
|
||||
},
|
||||
{
|
||||
id: 'C001',
|
||||
merchantId: 'M1003',
|
||||
merchantName: '珠海智悦贸易有限公司',
|
||||
type: AuditType.CREDIT,
|
||||
amount: 500000.00,
|
||||
status: AuditStatus.PENDING,
|
||||
applyTime: '2024-12-18 16:45:00',
|
||||
remark: '扩大经营，申请提高授信额度'
|
||||
}
|
||||
]
|
||||
|
||||
// 客户列表 Mock
|
||||
export const mockCustomerList: BankCustomer[] = [
|
||||
{
|
||||
id: 'C1001',
|
||||
merchantId: 'M1001',
|
||||
merchantName: '广州酷玩玩具城',
|
||||
creditLimit: 500000.00,
|
||||
usedLimit: 125000.00,
|
||||
balance: 375000.00,
|
||||
status: 'normal',
|
||||
contactName: '张三',
|
||||
contactPhone: '138****8888',
|
||||
joinTime: '2024-05-20'
|
||||
},
|
||||
{
|
||||
id: 'C1002',
|
||||
merchantId: 'M1002',
|
||||
merchantName: '深圳特粉专卖店',
|
||||
creditLimit: 200000.00,
|
||||
usedLimit: 180000.00,
|
||||
balance: 20000.00,
|
||||
status: 'warning',
|
||||
contactName: '李四',
|
||||
contactPhone: '139****9999',
|
||||
joinTime: '2024-06-15'
|
||||
}
|
||||
]
|
||||
|
||||
// 审核详情 Mock
|
||||
export function getMockWithdrawDetail(id: string): WithdrawAuditDetail {
|
||||
return {
|
||||
id,
|
||||
merchantId: 'M1001',
|
||||
merchantName: '广州酷玩玩具城',
|
||||
type: AuditType.WITHDRAW,
|
||||
amount: 5000.00,
|
||||
status: AuditStatus.PENDING,
|
||||
applyTime: '2024-12-19 10:30:00',
|
||||
bankName: '中国工商银行',
|
||||
bankAccount: '6222 **** **** 8888',
|
||||
memberLevel: 'V3',
|
||||
transactionCount: 156,
|
||||
remark: '年终结算提现'
|
||||
}
|
||||
}
|
||||
|
||||
// 交易流水 Mock
|
||||
export const mockTransactions = [
|
||||
{ id: 'T001', type: 'income', amount: 500.00, time: '2024-12-19 14:30', title: '商品销售收入-订单#1001' },
|
||||
{ id: 'T002', type: 'expend', amount: 200.00, time: '2024-12-19 12:00', title: '退款支出-订单#0998' },
|
||||
{ id: 'T003', type: 'income', amount: 1200.00, time: '2024-12-18 18:20', title: '商品销售收入-订单#0999' },
|
||||
{ id: 'T004', type: 'withdraw', amount: 5000.00, time: '2024-12-18 10:00', title: '提现申请' },
|
||||
{ id: 'T005', type: 'income', amount: 350.50, time: '2024-12-17 15:45', title: '商品销售收入-订单#0997' },
|
||||
]
|
||||
|
||||
// 提现记录 Mock (复用 AuditItem 结构部分字段或定义新结构，这里简化复用)
|
||||
export const mockWithdrawHistory = [
|
||||
{ id: 'W001', amount: 5000.00, status: AuditStatus.PENDING, time: '2024-12-19 10:30', bank: '工商银行(8888)' },
|
||||
{ id: 'W005', amount: 10000.00, status: AuditStatus.APPROVED, time: '2024-12-01 09:00', bank: '工商银行(8888)' },
|
||||
{ id: 'W008', amount: 2000.00, status: AuditStatus.REJECTED, time: '2024-11-20 16:20', bank: '工商银行(8888)', reason: '账户信息有误' },
|
||||
]
|
||||
Reference in New Issue
Block a user