789 lines
20 KiB
Vue
789 lines
20 KiB
Vue
<script lang="ts" setup>
|
||
import { mockLoanApplicationRecords } from '@/mock/loan-application'
|
||
import type { LoanApplicationRecord, LoanApplicationStatus } from '@/typings/mall'
|
||
|
||
definePage({
|
||
style: {
|
||
navigationBarTitleText: '助贷申请记录',
|
||
navigationBarBackgroundColor: '#fff',
|
||
navigationBarTextStyle: 'black',
|
||
},
|
||
})
|
||
|
||
// 申请记录列表
|
||
const applicationRecords = ref<LoanApplicationRecord[]>(mockLoanApplicationRecords)
|
||
|
||
// 详情弹窗相关
|
||
const showDetailModal = ref(false)
|
||
const selectedRecord = ref<LoanApplicationRecord | null>(null)
|
||
|
||
// 打开详情弹窗
|
||
function openDetailModal(record: LoanApplicationRecord) {
|
||
selectedRecord.value = record
|
||
showDetailModal.value = true
|
||
}
|
||
|
||
// 关闭详情弹窗
|
||
function closeDetailModal() {
|
||
showDetailModal.value = false
|
||
selectedRecord.value = null
|
||
}
|
||
|
||
// 处理按钮点击
|
||
function handleActionClick(record: LoanApplicationRecord, action: any) {
|
||
if (action.code === 'VIEW_DETAIL' || action.code === 'VIEW_RESULT' || action.code === 'CONTINUE_FILL') {
|
||
openDetailModal(record)
|
||
} else if (action.code === 'DOWNLOAD_CONTRACT') {
|
||
uni.showToast({
|
||
title: '合同下载中...',
|
||
icon: 'loading'
|
||
})
|
||
setTimeout(() => {
|
||
uni.showToast({
|
||
title: '合同已下载',
|
||
icon: 'success'
|
||
})
|
||
}, 1500)
|
||
} else if (action.code === 'CANCEL') {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要取消该申请吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.showToast({
|
||
title: '申请已取消',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
} else if (action.code === 'DELETE') {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要删除该申请记录吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.showToast({
|
||
title: '记录已删除',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
// 拨打银行受理人电话
|
||
function handleCallPhone(phone: string) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone
|
||
})
|
||
}
|
||
|
||
// 获取状态颜色
|
||
function getStatusColor(status: LoanApplicationStatus) {
|
||
switch (status) {
|
||
case 'PROCESSING':
|
||
return {
|
||
bg: 'rgba(59, 130, 246, 0.1)',
|
||
text: '#3B82F6'
|
||
}
|
||
case 'COMPLETED':
|
||
return {
|
||
bg: 'rgba(16, 185, 129, 0.1)',
|
||
text: '#10B981'
|
||
}
|
||
case 'PENDING':
|
||
return {
|
||
bg: 'rgba(245, 158, 11, 0.1)',
|
||
text: '#F59E0B'
|
||
}
|
||
default:
|
||
return {
|
||
bg: '#f5f5f5',
|
||
text: '#999'
|
||
}
|
||
}
|
||
}
|
||
|
||
// 获取按钮样式
|
||
function getButtonStyle(style: string) {
|
||
switch (style) {
|
||
case 'primary-blue':
|
||
return 'background: #3B82F6; color: #fff;'
|
||
case 'primary-green':
|
||
return 'background: #10B981; color: #fff;'
|
||
case 'primary-yellow':
|
||
return 'background: #F59E0B; color: #fff;'
|
||
case 'text-link':
|
||
return 'background: transparent; color: #666; border: none;'
|
||
default:
|
||
return 'background: #f5f5f5; color: #333;'
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="loan-application-records-page">
|
||
<!-- 申请记录列表 -->
|
||
<view class="records-list">
|
||
<view
|
||
v-for="record in applicationRecords"
|
||
:key="record.applicationId"
|
||
class="record-card"
|
||
>
|
||
<!-- 头部区域 -->
|
||
<view class="card-header">
|
||
<view class="title-section">
|
||
<text class="title">{{ record.loanTitle }}</text>
|
||
<view
|
||
class="status-badge"
|
||
:style="{
|
||
background: getStatusColor(record.status).bg,
|
||
color: getStatusColor(record.status).text
|
||
}"
|
||
>
|
||
{{ record.statusText }}
|
||
</view>
|
||
</view>
|
||
<view class="info-section">
|
||
<text class="application-id">申请编号：{{ record.applicationId }}</text>
|
||
<text class="date-info">{{ record.dateLabel }}：{{ record.dateValue }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 进度条区域 -->
|
||
<view v-if="record.progress && record.progress.show" class="progress-section">
|
||
<view class="steps-container">
|
||
<view
|
||
v-for="(step, index) in record.progress.steps"
|
||
:key="index"
|
||
class="step-item"
|
||
:class="{
|
||
'completed': index < record.progress.currentStepIndex,
|
||
'current': index === record.progress.currentStepIndex,
|
||
'future': index > record.progress.currentStepIndex
|
||
}"
|
||
>
|
||
<view class="step-circle">
|
||
<text v-if="index < record.progress.currentStepIndex" class="i-carbon-checkmark"></text>
|
||
<text v-else>{{ index + 1 }}</text>
|
||
</view>
|
||
<text class="step-text">{{ step }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提示信息区域 -->
|
||
<view v-if="record.alertInfo && record.alertInfo.show" class="alert-section">
|
||
<view
|
||
class="alert-box"
|
||
:class="record.alertInfo.type"
|
||
>
|
||
<text
|
||
v-if="record.alertInfo.type === 'info'"
|
||
class="i-carbon-information alert-icon"
|
||
></text>
|
||
<text
|
||
v-else-if="record.alertInfo.type === 'warning'"
|
||
class="i-carbon-warning-alt alert-icon"
|
||
></text>
|
||
<text class="alert-content">{{ record.alertInfo.content }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 银行受理人信息（仅处理中状态显示） -->
|
||
<view v-if="record.status === 'PROCESSING' && record.handlerName" class="handler-section">
|
||
<view class="handler-info">
|
||
<text class="i-carbon-user handler-icon"></text>
|
||
<view class="handler-details">
|
||
<text class="handler-label">银行受理人</text>
|
||
<text class="handler-name">{{ record.handlerName }}</text>
|
||
<view class="handler-phone-wrapper" @click="handleCallPhone(record.handlerPhone)">
|
||
<text class="i-carbon-phone handler-phone-icon"></text>
|
||
<text class="handler-phone">{{ record.handlerPhone }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部操作区 -->
|
||
<view class="actions-section">
|
||
<view
|
||
v-for="action in record.actions"
|
||
:key="action.code"
|
||
class="action-btn"
|
||
:style="getButtonStyle(action.style)"
|
||
@click="handleActionClick(record, action)"
|
||
>
|
||
{{ action.text }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 详情弹窗 -->
|
||
<view v-if="showDetailModal" class="modal-overlay" @click="closeDetailModal">
|
||
<view class="modal-content" @click.stop>
|
||
<view class="modal-header">
|
||
<text class="modal-title">申请详情</text>
|
||
<text class="i-carbon-close modal-close" @click="closeDetailModal"></text>
|
||
</view>
|
||
|
||
<view v-if="selectedRecord" class="modal-body">
|
||
<view class="detail-item">
|
||
<text class="detail-label">申请编号</text>
|
||
<text class="detail-value">{{ selectedRecord.applicationId }}</text>
|
||
</view>
|
||
<view class="detail-item">
|
||
<text class="detail-label">贷款类型</text>
|
||
<text class="detail-value">{{ selectedRecord.loanTitle }}</text>
|
||
</view>
|
||
<view class="detail-item">
|
||
<text class="detail-label">申请状态</text>
|
||
<text
|
||
class="detail-value status-text"
|
||
:style="{ color: getStatusColor(selectedRecord.status).text }"
|
||
>
|
||
{{ selectedRecord.statusText }}
|
||
</text>
|
||
</view>
|
||
<view class="detail-item">
|
||
<text class="detail-label">{{ selectedRecord.dateLabel }}</text>
|
||
<text class="detail-value">{{ selectedRecord.dateValue }}</text>
|
||
</view>
|
||
|
||
<!-- 进度详情 -->
|
||
<view v-if="selectedRecord.progress && selectedRecord.progress.show" class="progress-detail">
|
||
<text class="detail-label">申请进度</text>
|
||
<view class="progress-steps">
|
||
<view
|
||
v-for="(step, index) in selectedRecord.progress.steps"
|
||
:key="index"
|
||
class="progress-step"
|
||
:class="{
|
||
'completed': index < selectedRecord.progress.currentStepIndex,
|
||
'current': index === selectedRecord.progress.currentStepIndex,
|
||
'future': index > selectedRecord.progress.currentStepIndex
|
||
}"
|
||
>
|
||
<view class="step-dot"></view>
|
||
<text class="step-name">{{ step }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 银行受理人信息（仅处理中状态显示） -->
|
||
<view v-if="selectedRecord.status === 'PROCESSING' && selectedRecord.handlerName" class="handler-detail">
|
||
<text class="detail-label">银行受理人</text>
|
||
<view class="handler-detail-info">
|
||
<view class="handler-detail-row">
|
||
<text class="i-carbon-user handler-detail-icon"></text>
|
||
<text class="handler-detail-name">{{ selectedRecord.handlerName }}</text>
|
||
</view>
|
||
<view class="handler-detail-row handler-detail-phone" @click="handleCallPhone(selectedRecord.handlerPhone)">
|
||
<text class="i-carbon-phone handler-detail-icon"></text>
|
||
<text class="handler-detail-phone-number">{{ selectedRecord.handlerPhone }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提示信息 -->
|
||
<view v-if="selectedRecord.alertInfo && selectedRecord.alertInfo.show" class="alert-detail">
|
||
<view
|
||
class="alert-detail-box"
|
||
:class="selectedRecord.alertInfo.type"
|
||
>
|
||
<text
|
||
v-if="selectedRecord.alertInfo.type === 'info'"
|
||
class="i-carbon-information alert-icon"
|
||
></text>
|
||
<text
|
||
v-else-if="selectedRecord.alertInfo.type === 'warning'"
|
||
class="i-carbon-warning-alt alert-icon"
|
||
></text>
|
||
<text>{{ selectedRecord.alertInfo.content }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.loan-application-records-page {
|
||
min-height: 100vh;
|
||
background: #f5f5f5;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.records-list {
|
||
.record-card {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.card-header {
|
||
margin-bottom: 24rpx;
|
||
|
||
.title-section {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.status-badge {
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.info-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
|
||
.application-id, .date-info {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.progress-section {
|
||
margin-bottom: 24rpx;
|
||
|
||
.steps-container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
padding: 0 10rpx;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 30rpx;
|
||
left: 50rpx;
|
||
right: 50rpx;
|
||
height: 2rpx;
|
||
background: #e5e5e5;
|
||
z-index: 1;
|
||
}
|
||
|
||
.step-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
z-index: 2;
|
||
flex: 1;
|
||
|
||
.step-circle {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.step-text {
|
||
font-size: 22rpx;
|
||
text-align: center;
|
||
color: #666;
|
||
}
|
||
|
||
&.completed {
|
||
.step-circle {
|
||
background: #10B981;
|
||
color: #fff;
|
||
}
|
||
.step-text {
|
||
color: #10B981;
|
||
}
|
||
}
|
||
|
||
&.current {
|
||
.step-circle {
|
||
background: #3B82F6;
|
||
color: #fff;
|
||
transform: scale(1.1);
|
||
}
|
||
.step-text {
|
||
color: #3B82F6;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
&.future {
|
||
.step-circle {
|
||
background: #f5f5f5;
|
||
color: #999;
|
||
}
|
||
.step-text {
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.alert-section {
|
||
margin-bottom: 24rpx;
|
||
|
||
.alert-box {
|
||
padding: 20rpx;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12rpx;
|
||
|
||
&.info {
|
||
background: rgba(59, 130, 246, 0.1);
|
||
|
||
.alert-icon {
|
||
color: #3B82F6;
|
||
}
|
||
|
||
.alert-content {
|
||
color: #3B82F6;
|
||
}
|
||
}
|
||
|
||
&.warning {
|
||
background: rgba(245, 158, 11, 0.1);
|
||
|
||
.alert-icon {
|
||
color: #F59E0B;
|
||
}
|
||
|
||
.alert-content {
|
||
color: #F59E0B;
|
||
}
|
||
}
|
||
|
||
.alert-icon {
|
||
font-size: 32rpx;
|
||
margin-top: 2rpx;
|
||
}
|
||
|
||
.alert-content {
|
||
flex: 1;
|
||
font-size: 26rpx;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
}
|
||
|
||
.handler-section {
|
||
margin-bottom: 24rpx;
|
||
|
||
.handler-info {
|
||
background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
|
||
border-radius: 12rpx;
|
||
padding: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
|
||
.handler-icon {
|
||
font-size: 48rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.handler-details {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
|
||
.handler-label {
|
||
font-size: 22rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
.handler-name {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
}
|
||
|
||
.handler-phone-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
|
||
.handler-phone-icon {
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.handler-phone {
|
||
font-size: 26rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.actions-section {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 20rpx;
|
||
|
||
.action-btn {
|
||
padding: 16rpx 32rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
border: 1rpx solid #e5e5e5;
|
||
|
||
&:active {
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 弹窗样式
|
||
.modal-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
padding: 40rpx;
|
||
|
||
.modal-content {
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
width: 100%;
|
||
max-width: 600rpx;
|
||
max-height: 80vh;
|
||
overflow: hidden;
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
border-bottom: 1rpx solid #f5f5f5;
|
||
|
||
.modal-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.modal-close {
|
||
font-size: 36rpx;
|
||
color: #999;
|
||
|
||
&:active {
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
}
|
||
|
||
.modal-body {
|
||
padding: 30rpx;
|
||
max-height: 60vh;
|
||
overflow-y: auto;
|
||
|
||
.detail-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 0;
|
||
border-bottom: 1rpx solid #f5f5f5;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.detail-label {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.detail-value {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
|
||
&.status-text {
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
.progress-detail {
|
||
padding: 20rpx 0;
|
||
|
||
.detail-label {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
margin-bottom: 20rpx;
|
||
display: block;
|
||
}
|
||
|
||
.progress-steps {
|
||
.progress-step {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.step-dot {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.step-name {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
&.completed {
|
||
.step-dot {
|
||
background: #10B981;
|
||
}
|
||
.step-name {
|
||
color: #10B981;
|
||
}
|
||
}
|
||
|
||
&.current {
|
||
.step-dot {
|
||
background: #3B82F6;
|
||
transform: scale(1.2);
|
||
}
|
||
.step-name {
|
||
color: #3B82F6;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
&.future {
|
||
.step-dot {
|
||
background: #f5f5f5;
|
||
border: 2rpx solid #e5e5e5;
|
||
}
|
||
.step-name {
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.handler-detail {
|
||
padding: 20rpx 0;
|
||
|
||
.detail-label {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
margin-bottom: 20rpx;
|
||
display: block;
|
||
}
|
||
|
||
.handler-detail-info {
|
||
background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
|
||
border-radius: 12rpx;
|
||
padding: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
|
||
.handler-detail-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
|
||
.handler-detail-icon {
|
||
font-size: 32rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.handler-detail-name {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
}
|
||
|
||
&.handler-detail-phone {
|
||
cursor: pointer;
|
||
|
||
.handler-detail-phone-number {
|
||
font-size: 26rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.alert-detail {
|
||
padding: 20rpx 0;
|
||
|
||
.alert-detail-box {
|
||
padding: 20rpx;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12rpx;
|
||
font-size: 26rpx;
|
||
line-height: 1.5;
|
||
|
||
&.info {
|
||
background: rgba(59, 130, 246, 0.1);
|
||
color: #3B82F6;
|
||
|
||
.alert-icon {
|
||
color: #3B82F6;
|
||
}
|
||
}
|
||
|
||
&.warning {
|
||
background: rgba(245, 158, 11, 0.1);
|
||
color: #F59E0B;
|
||
|
||
.alert-icon {
|
||
color: #F59E0B;
|
||
}
|
||
}
|
||
|
||
.alert-icon {
|
||
font-size: 32rpx;
|
||
margin-top: 2rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |