优化
This commit is contained in:
@@ -8,3 +8,4 @@ export * from './finance'
|
||||
export * from './member'
|
||||
export * from './banner'
|
||||
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="i-carbon-chevron-right arrow"></text>
|
||||
</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">
|
||||
<text class="i-carbon-location icon"></text>
|
||||
<text class="label">地址管理</text>
|
||||
|
||||
@@ -205,3 +205,50 @@ export interface Banner {
|
||||
link?: string // 跳转链接
|
||||
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页面中注释掉
|
||||
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-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: [
|
||||
[
|
||||
'p-safe',
|
||||
|
||||
Reference in New Issue
Block a user