优化
This commit is contained in:
@@ -8,3 +8,4 @@ export * from './finance'
|
|||||||
export * from './member'
|
export * from './member'
|
||||||
export * from './banner'
|
export * from './banner'
|
||||||
export * from './address'
|
export * from './address'
|
||||||
|
export * from './loan-application'
|
||||||
|
|||||||
141
src/mock/loan-application.ts
Normal file
141
src/mock/loan-application.ts
Normal file
@@ -0,0 +1,141 @@
|
|||||||
|
import { LoanApplicationStatus } from '@/typings/mall'
|
||||||
|
import type { LoanApplicationRecord } from '@/typings/mall'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 助贷申请记录模拟数据
|
||||||
|
*/
|
||||||
|
export const mockLoanApplicationRecords: LoanApplicationRecord[] = [
|
||||||
|
{
|
||||||
|
applicationId: "AP20230815001",
|
||||||
|
loanType: "ENTERPRISE",
|
||||||
|
loanTitle: "经营贷",
|
||||||
|
dateLabel: "申请时间",
|
||||||
|
dateValue: "2023-08-15",
|
||||||
|
status: LoanApplicationStatus.PROCESSING,
|
||||||
|
statusText: "处理中",
|
||||||
|
progress: {
|
||||||
|
show: true,
|
||||||
|
steps: ["提交申请", "资料审核", "风险评估", "审批完成"],
|
||||||
|
currentStepIndex: 2,
|
||||||
|
stepStatus: "active"
|
||||||
|
},
|
||||||
|
alertInfo: {
|
||||||
|
show: true,
|
||||||
|
type: "info",
|
||||||
|
content: "您的申请正在风控部门审核中，预计还需要1-2个工作日完成评估"
|
||||||
|
},
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
code: "VIEW_DETAIL",
|
||||||
|
text: "查看详情",
|
||||||
|
style: "primary-blue"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
applicationId: "AP20230810002",
|
||||||
|
loanType: "ENTERPRISE",
|
||||||
|
loanTitle: "经营贷",
|
||||||
|
dateLabel: "申请时间",
|
||||||
|
dateValue: "2023-08-10",
|
||||||
|
status: LoanApplicationStatus.COMPLETED,
|
||||||
|
statusText: "已完成",
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
code: "DOWNLOAD_CONTRACT",
|
||||||
|
text: "下载合同",
|
||||||
|
style: "text-link"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: "VIEW_RESULT",
|
||||||
|
text: "查看结果",
|
||||||
|
style: "primary-green"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
applicationId: "AP20230805003",
|
||||||
|
loanType: "REVITALIZATION",
|
||||||
|
loanTitle: "振兴贷",
|
||||||
|
dateLabel: "创建时间",
|
||||||
|
dateValue: "2023-08-05",
|
||||||
|
status: LoanApplicationStatus.PENDING,
|
||||||
|
statusText: "待提交",
|
||||||
|
progress: {
|
||||||
|
show: true,
|
||||||
|
steps: ["提交申请", "资料审核", "风险评估", "审批完成"],
|
||||||
|
currentStepIndex: 0,
|
||||||
|
stepStatus: "active"
|
||||||
|
},
|
||||||
|
alertInfo: {
|
||||||
|
show: true,
|
||||||
|
type: "warning",
|
||||||
|
content: "您的申请资料尚未完整，请尽快完善资料后提交"
|
||||||
|
},
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
code: "DELETE",
|
||||||
|
text: "删除",
|
||||||
|
style: "text-link"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: "CONTINUE_FILL",
|
||||||
|
text: "继续填写",
|
||||||
|
style: "primary-yellow"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
applicationId: "AP20230728004",
|
||||||
|
loanType: "HOUSING",
|
||||||
|
loanTitle: "安居贷",
|
||||||
|
dateLabel: "申请时间",
|
||||||
|
dateValue: "2023-07-28",
|
||||||
|
status: LoanApplicationStatus.PROCESSING,
|
||||||
|
statusText: "处理中",
|
||||||
|
progress: {
|
||||||
|
show: true,
|
||||||
|
steps: ["提交申请", "资料审核", "风险评估", "审批完成"],
|
||||||
|
currentStepIndex: 1,
|
||||||
|
stepStatus: "active"
|
||||||
|
},
|
||||||
|
alertInfo: {
|
||||||
|
show: true,
|
||||||
|
type: "info",
|
||||||
|
content: "您的申请已进入资料审核阶段，请耐心等待"
|
||||||
|
},
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
code: "CANCEL",
|
||||||
|
text: "取消申请",
|
||||||
|
style: "text-link"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: "VIEW_DETAIL",
|
||||||
|
text: "查看详情",
|
||||||
|
style: "primary-blue"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
applicationId: "AP20230720005",
|
||||||
|
loanType: "ENTERPRISE",
|
||||||
|
loanTitle: "经营贷",
|
||||||
|
dateLabel: "申请时间",
|
||||||
|
dateValue: "2023-07-20",
|
||||||
|
status: LoanApplicationStatus.COMPLETED,
|
||||||
|
statusText: "已完成",
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
code: "DOWNLOAD_CONTRACT",
|
||||||
|
text: "下载合同",
|
||||||
|
style: "text-link"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
code: "VIEW_RESULT",
|
||||||
|
text: "查看结果",
|
||||||
|
style: "primary-green"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
150
src/pages.json
150
src/pages.json
@@ -1,150 +0,0 @@
|
|||||||
{
|
|
||||||
"globalStyle": {
|
|
||||||
"navigationStyle": "default",
|
|
||||||
"navigationBarTitleText": "unibest",
|
|
||||||
"navigationBarBackgroundColor": "#f8f8f8",
|
|
||||||
"navigationBarTextStyle": "black",
|
|
||||||
"backgroundColor": "#FFFFFF"
|
|
||||||
},
|
|
||||||
"easycom": {
|
|
||||||
"autoscan": true,
|
|
||||||
"custom": {
|
|
||||||
"^fg-(.*)": "@/components/fg-$1/fg-$1.vue",
|
|
||||||
"^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)": "z-paging/components/z-paging$1/z-paging$1.vue",
|
|
||||||
"^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"pages": [
|
|
||||||
// GENERATED BY UNI-PAGES, PLATFORM: H5
|
|
||||||
{
|
|
||||||
"path": "pages/index/index",
|
|
||||||
"type": "home",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "首页",
|
|
||||||
"navigationStyle": "custom"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/finance/credit",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "信用额度",
|
|
||||||
"enablePullDownRefresh": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/finance/settlement",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "应结账款",
|
|
||||||
"enablePullDownRefresh": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/goods/cart",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "购物车"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/goods/detail",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "商品详情",
|
|
||||||
"navigationBarBackgroundColor": "#ffffff",
|
|
||||||
"navigationBarTextStyle": "black"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/login/index",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "登录",
|
|
||||||
"navigationBarBackgroundColor": "#ffffff",
|
|
||||||
"navigationStyle": "custom"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/me/me",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "我的",
|
|
||||||
"navigationBarBackgroundColor": "#fff",
|
|
||||||
"navigationBarTextStyle": "black",
|
|
||||||
"navigationStyle": "custom"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/member/index",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "会员中心",
|
|
||||||
"navigationBarBackgroundColor": "#1a1a1a",
|
|
||||||
"navigationBarTextStyle": "white"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/order/confirm",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "确认订单"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/order/detail",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "订单详情"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/order/list",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "我的订单",
|
|
||||||
"enablePullDownRefresh": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/sort/index",
|
|
||||||
"type": "page",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "分类",
|
|
||||||
"disableScroll": true,
|
|
||||||
"navigationStyle": "custom"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"subPackages": [],
|
|
||||||
"tabBar": {
|
|
||||||
"custom": true,
|
|
||||||
"color": "#999999",
|
|
||||||
"selectedColor": "#018d71",
|
|
||||||
"backgroundColor": "#F8F8F8",
|
|
||||||
"borderStyle": "black",
|
|
||||||
"height": "50px",
|
|
||||||
"fontSize": "10px",
|
|
||||||
"iconWidth": "24px",
|
|
||||||
"spacing": "3px",
|
|
||||||
"list": [
|
|
||||||
// GENERATED BY UNI-PAGES, PLATFORM: H5
|
|
||||||
{
|
|
||||||
"text": "首页",
|
|
||||||
"pagePath": "pages/index/index"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"text": "分类",
|
|
||||||
"pagePath": "pages/sort/index"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"text": "购物车",
|
|
||||||
"pagePath": "pages/goods/cart"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"text": "我的",
|
|
||||||
"pagePath": "pages/me/me"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
654
src/pages/me/loan-application-records.vue
Normal file
654
src/pages/me/loan-application-records.vue
Normal file
@@ -0,0 +1,654 @@
|
|||||||
|
<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 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 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.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
@@ -210,6 +210,11 @@ function handleLogout() {
|
|||||||
<text class="label">会员中心</text>
|
<text class="label">会员中心</text>
|
||||||
<text class="i-carbon-chevron-right arrow"></text>
|
<text class="i-carbon-chevron-right arrow"></text>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="cell" @click="navigateTo('/pages/me/loan-application-records')">
|
||||||
|
<text class="i-carbon-document-attachment icon"></text>
|
||||||
|
<text class="label">助贷申请记录</text>
|
||||||
|
<text class="i-carbon-chevron-right arrow"></text>
|
||||||
|
</view>
|
||||||
<view class="cell">
|
<view class="cell">
|
||||||
<text class="i-carbon-location icon"></text>
|
<text class="i-carbon-location icon"></text>
|
||||||
<text class="label">地址管理</text>
|
<text class="label">地址管理</text>
|
||||||
|
|||||||
@@ -205,3 +205,50 @@ export interface Banner {
|
|||||||
link?: string // 跳转链接
|
link?: string // 跳转链接
|
||||||
goodsId?: string // 关联商品ID
|
goodsId?: string // 关联商品ID
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 助贷申请记录相关类型定义
|
||||||
|
*/
|
||||||
|
|
||||||
|
// 助贷申请状态
|
||||||
|
export enum LoanApplicationStatus {
|
||||||
|
PROCESSING = 'PROCESSING', // 处理中
|
||||||
|
COMPLETED = 'COMPLETED', // 已完成
|
||||||
|
PENDING = 'PENDING', // 待提交
|
||||||
|
}
|
||||||
|
|
||||||
|
// 进度条数据
|
||||||
|
export interface LoanApplicationProgress {
|
||||||
|
show: boolean
|
||||||
|
steps: string[] // 步骤名称数组
|
||||||
|
currentStepIndex: number // 当前步骤索引 (从0开始)
|
||||||
|
stepStatus: string // 当前步骤状态
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提示信息框
|
||||||
|
export interface LoanApplicationAlertInfo {
|
||||||
|
show: boolean
|
||||||
|
type: 'info' | 'warning' // info(蓝), warning(黄)
|
||||||
|
content: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// 底部按钮配置
|
||||||
|
export interface LoanApplicationAction {
|
||||||
|
code: string
|
||||||
|
text: string
|
||||||
|
style: string // text-link, primary-blue, primary-green, primary-yellow
|
||||||
|
}
|
||||||
|
|
||||||
|
// 助贷申请记录
|
||||||
|
export interface LoanApplicationRecord {
|
||||||
|
applicationId: string // 申请编号
|
||||||
|
loanType: string // 贷款类型：ENTERPRISE, 其他
|
||||||
|
loanTitle: string // 显示标题
|
||||||
|
dateLabel: string // 动态标签：申请时间 / 创建时间
|
||||||
|
dateValue: string // 日期值
|
||||||
|
status: LoanApplicationStatus // 状态枚举
|
||||||
|
statusText: string // 状态中文文案
|
||||||
|
progress?: LoanApplicationProgress // 进度条数据 (仅Processing和Pending状态需要)
|
||||||
|
alertInfo?: LoanApplicationAlertInfo // 提示信息框 (可空)
|
||||||
|
actions: LoanApplicationAction[] // 底部按钮配置
|
||||||
|
}
|
||||||
|
|||||||
@@ -73,7 +73,7 @@ export default defineConfig({
|
|||||||
// 动态图标需要在这里配置，或者写在vue页面中注释掉
|
// 动态图标需要在这里配置，或者写在vue页面中注释掉
|
||||||
safelist: ['i-carbon-code', 'i-carbon-home', 'i-carbon-user','i-carbon-shopping-cart','i-carbon-view-mode-2','i-carbon-webhook',
|
safelist: ['i-carbon-code', 'i-carbon-home', 'i-carbon-user','i-carbon-shopping-cart','i-carbon-view-mode-2','i-carbon-webhook',
|
||||||
'i-carbon-restaurant','i-carbon-crop','i-carbon-ibm-deployable-architecture',
|
'i-carbon-restaurant','i-carbon-crop','i-carbon-ibm-deployable-architecture',
|
||||||
'i-carbon-edge-device','i-carbon-ibm-cloud-direct-link-1-dedicated-hosting','i-carbon-face-satisfied'],
|
'i-carbon-edge-device','i-carbon-ibm-cloud-direct-link-1-dedicated-hosting','i-carbon-face-satisfied','i-carbon-document-attachment'],
|
||||||
rules: [
|
rules: [
|
||||||
[
|
[
|
||||||
'p-safe',
|
'p-safe',
|
||||||
|
|||||||
Reference in New Issue
Block a user