Compare commits
16 Commits
8718429ad1
...
25.12.17
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
3c21b074c4 | ||
| 5e3d3708c6 | |||
| 5ba58bafa6 | |||
| 25e9fac1b9 | |||
| b8626db4dd | |||
| 519d955679 | |||
| 7f6cf8797d | |||
| e0ef7f9788 | |||
| c8715d2b74 | |||
| 8b82f479c4 | |||
| bce3f26424 | |||
| 4b06c16ff5 | |||
| 3be949f95b | |||
| 2fb1a3b23d | |||
| cf843557a6 | |||
| 13f2940a3a |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -45,3 +45,4 @@ src/manifest.json
|
||||
|
||||
# 更新 uni-app 官方版本
|
||||
# npx @dcloudio/uvm@latest
|
||||
src/pages.json
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
# 应结账款页面交互流程图
|
||||
|
||||
navigationStyle: 'custom',
|
||||
## 用户操作流程
|
||||
|
||||
```mermaid
|
||||
|
||||
@@ -18,6 +18,37 @@ export default defineUniPages({
|
||||
'^wd-(.*)': 'wot-design-uni/components/wd-$1/wd-$1.vue',
|
||||
},
|
||||
},
|
||||
// tabbar 的配置统一在 “./src/tabbar/config.ts” 文件中
|
||||
// tabbar 配置
|
||||
tabBar: tabBar as any,
|
||||
|
||||
// 分包配置
|
||||
subPackages: [
|
||||
{
|
||||
root: 'pagesMerchant',
|
||||
pages: [
|
||||
{ path: 'dashboard/index', style: { navigationBarTitleText: '商家工作台' } },
|
||||
{ path: 'order/list', style: { navigationBarTitleText: '订单管理' } },
|
||||
{ path: 'goods/list', style: { navigationBarTitleText: '商品管理' } },
|
||||
{ path: 'finance/index', style: { navigationBarTitleText: '财务中心' } },
|
||||
{ path: 'me/index', style: { navigationBarTitleText: '商家中心' } },
|
||||
],
|
||||
},
|
||||
{
|
||||
root: 'pagesBank',
|
||||
pages: [
|
||||
{ path: 'dashboard/index', style: { navigationBarTitleText: '银行工作台' } },
|
||||
{ path: 'audit/list', style: { navigationBarTitleText: '审核列表' } },
|
||||
{ path: 'customer/list', style: { navigationBarTitleText: '客户管理' } },
|
||||
{ path: 'me/index', style: { navigationBarTitleText: '银行中心' } },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
// 分包预下载配置
|
||||
preloadRule: {
|
||||
'pages/login/index': {
|
||||
network: 'all',
|
||||
packages: ['pagesMerchant', 'pagesBank'],
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
@@ -18,7 +18,7 @@ const pages = {
|
||||
type: 'home',
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTitleText: '首页',
|
||||
navigationBarTitleText: '数字广东',
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
12
src/App.vue
12
src/App.vue
@@ -1,10 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import { onHide, onLaunch, onShow } from '@dcloudio/uni-app'
|
||||
import { navigateToInterceptor } from '@/router/interceptor'
|
||||
import { useUserStore, ClientType } from '@/store/user'
|
||||
import { tabbarStore } from '@/tabbar/store'
|
||||
|
||||
onLaunch((options) => {
|
||||
console.log('App.vue onLaunch', options)
|
||||
|
||||
// 根据已存储的客户端类型恢复 tabbar 配置
|
||||
const userStore = useUserStore()
|
||||
if (userStore.clientType && userStore.clientType !== ClientType.USER) {
|
||||
tabbarStore.setTabbarByClientType(userStore.clientType)
|
||||
console.log('Restored tabbar for clientType:', userStore.clientType)
|
||||
}
|
||||
})
|
||||
|
||||
onShow((options) => {
|
||||
console.log('App.vue onShow', options)
|
||||
// 处理直接进入页面路由的情况:如h5直接输入路由、微信小程序分享后进入等
|
||||
@@ -16,6 +26,7 @@ onShow((options) => {
|
||||
navigateToInterceptor.invoke({ url: '/' })
|
||||
}
|
||||
})
|
||||
|
||||
onHide(() => {
|
||||
console.log('App Hide')
|
||||
})
|
||||
@@ -24,3 +35,4 @@ onHide(() => {
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@@ -13,8 +13,8 @@ export function login(data: { phone: string, code?: string, password?: string })
|
||||
const user: User = {
|
||||
id: 'user_001',
|
||||
username: data.phone,
|
||||
nickname: `用户${data.phone.slice(-4)}`,
|
||||
avatar: 'https://picsum.photos/200/200?random=avatar',
|
||||
nickname: `王明阳`, // ${data.phone.slice(-4)}
|
||||
avatar: '/static/images/avatar.jpg',
|
||||
phone: data.phone,
|
||||
creditLimits: [],
|
||||
member: mockMember,
|
||||
|
||||
@@ -93,12 +93,12 @@ function goToDetail() {
|
||||
// border-radius: 16rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
margin-bottom: 0;
|
||||
position: relative; // 移到嵌套规则之前
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
@@ -129,16 +129,21 @@ function goToDetail() {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
/* 添加右边距避免与删除按钮重叠 */
|
||||
padding-right: 80rpx; /* 根据删除按钮大小调整 */
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
/* 移除固定行数限制,让内容自然换行 */
|
||||
display: block;
|
||||
overflow: visible;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
/* 调整最小高度确保有足够空间 */
|
||||
min-height: 80rpx;
|
||||
}
|
||||
|
||||
.specs {
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -11,7 +11,7 @@ import { useCartStore } from '@/store/cart'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '首页',
|
||||
navigationBarTitleText: '数字广东',
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import { useUserStore } from '@/store/user'
|
||||
import { useUserStore, ClientType, CLIENT_TYPE_CONFIG } from '@/store/user'
|
||||
import { tabbarStore } from '@/tabbar/store'
|
||||
import { login, sendCode } from '@/api/auth'
|
||||
|
||||
definePage({
|
||||
@@ -18,6 +19,19 @@ const loading = ref(false)
|
||||
const countdown = ref(0)
|
||||
const timer = ref<any>(null)
|
||||
|
||||
// 客户端类型选择
|
||||
const selectedClientType = ref<ClientType>(ClientType.USER)
|
||||
const clientTypes = [
|
||||
{ type: ClientType.USER, ...CLIENT_TYPE_CONFIG[ClientType.USER] },
|
||||
{ type: ClientType.MERCHANT, ...CLIENT_TYPE_CONFIG[ClientType.MERCHANT] },
|
||||
{ type: ClientType.BANK, ...CLIENT_TYPE_CONFIG[ClientType.BANK] },
|
||||
]
|
||||
|
||||
// 选择客户端类型
|
||||
function selectClientType(type: ClientType) {
|
||||
selectedClientType.value = type
|
||||
}
|
||||
|
||||
// 发送验证码
|
||||
async function handleSendCode() {
|
||||
if (!phone.value) {
|
||||
@@ -30,7 +44,6 @@ async function handleSendCode() {
|
||||
await sendCode(phone.value)
|
||||
uni.showToast({ title: '验证码已发送', icon: 'none' })
|
||||
|
||||
// 倒计时
|
||||
countdown.value = 60
|
||||
timer.value = setInterval(() => {
|
||||
countdown.value--
|
||||
@@ -49,26 +62,25 @@ async function handleLogin() {
|
||||
uni.showToast({ title: '请输入手机号', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!code.value) {
|
||||
// 为了演示方便,这里允许空验证码直接登录(模拟)
|
||||
// uni.showToast({ title: '请输入验证码', icon: 'none' })
|
||||
// return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const res: any = await login({ phone: phone.value, code: code.value })
|
||||
|
||||
// 更新用户信息
|
||||
// 更新用户信息和客户端类型
|
||||
userStore.userInfo = res.data.user
|
||||
userStore.isLogin = true
|
||||
userStore.setClientType(selectedClientType.value)
|
||||
|
||||
uni.showToast({ title: '登录成功', icon: 'success' })
|
||||
// 根据客户端类型切换 tabbar
|
||||
tabbarStore.setTabbarByClientType(selectedClientType.value)
|
||||
|
||||
const config = CLIENT_TYPE_CONFIG[selectedClientType.value]
|
||||
uni.showToast({ title: `${config.label}登录成功`, icon: 'success' })
|
||||
|
||||
// 跳转到对应首页
|
||||
setTimeout(() => {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
uni.reLaunch({ url: config.homePage })
|
||||
}, 1500)
|
||||
} catch (error) {
|
||||
uni.showToast({ title: '登录失败', icon: 'none' })
|
||||
@@ -88,9 +100,34 @@ onUnload(() => {
|
||||
<view class="login-page">
|
||||
<view class="logo-wrapper">
|
||||
<view class="logo">
|
||||
<text class="i-carbon-store icon"></text>
|
||||
<image src="/static/logo4.png" class="logo-image"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 客户端类型选择 -->
|
||||
<view class="client-type-section">
|
||||
<view class="section-title">选择登录端</view>
|
||||
<view class="client-type-list">
|
||||
<view
|
||||
v-for="item in clientTypes"
|
||||
:key="item.type"
|
||||
class="client-type-item"
|
||||
:class="{ active: selectedClientType === item.type }"
|
||||
:style="{ '--theme-color': item.color }"
|
||||
@click="selectClientType(item.type)"
|
||||
>
|
||||
<view class="type-icon" :style="selectedClientType === item.type ? { background: item.color } : {}">
|
||||
<text :class="item.icon"></text>
|
||||
</view>
|
||||
<view class="type-info">
|
||||
<text class="type-label">{{ item.label }}</text>
|
||||
<text class="type-desc">{{ item.description }}</text>
|
||||
</view>
|
||||
<view class="type-check" v-if="selectedClientType === item.type" :style="{ color: item.color }">
|
||||
<text class="i-carbon-checkmark-filled"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="app-name">商城+金融</text>
|
||||
</view>
|
||||
|
||||
<view class="form">
|
||||
@@ -101,7 +138,7 @@ onUnload(() => {
|
||||
class="input"
|
||||
type="number"
|
||||
placeholder="请输入手机号"
|
||||
maxlength="11"
|
||||
:maxlength="11"
|
||||
/>
|
||||
</view>
|
||||
|
||||
@@ -112,7 +149,7 @@ onUnload(() => {
|
||||
class="input"
|
||||
type="number"
|
||||
placeholder="请输入验证码"
|
||||
maxlength="6"
|
||||
:maxlength="6"
|
||||
/>
|
||||
<view
|
||||
class="code-btn"
|
||||
@@ -123,19 +160,32 @@ onUnload(() => {
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="submit-btn" @click="handleLogin">
|
||||
<text v-if="!loading">登录</text>
|
||||
<wd-notice-bar text="演示使用,直接点击登录~" prefix="warn-bold" custom-class="space" color="#34D19D" background-color="#f0f9eb" />
|
||||
|
||||
<view
|
||||
class="submit-btn"
|
||||
:style="{ background: CLIENT_TYPE_CONFIG[selectedClientType].color }"
|
||||
@click="handleLogin"
|
||||
>
|
||||
<text v-if="!loading">{{ CLIENT_TYPE_CONFIG[selectedClientType].label }}登录</text>
|
||||
<text v-else>登录中...</text>
|
||||
</view>
|
||||
|
||||
<view class="tips">
|
||||
<text>未注册手机号验证后自动创建账号</text>
|
||||
<p> </p>
|
||||
<p><text>©2025 数字广东网络建设有限公司</text></p>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.logo-image {
|
||||
width: 80px;
|
||||
height: 78px;
|
||||
}
|
||||
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
@@ -148,30 +198,93 @@ onUnload(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 100rpx;
|
||||
margin-bottom: 100rpx;
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.logo {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4f 100%);
|
||||
width: 320rpx;
|
||||
height: 116rpx;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(255, 77, 79, 0.3);
|
||||
|
||||
.icon {
|
||||
font-size: 80rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 客户端类型选择区域
|
||||
.client-type-section {
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-bottom: 20rpx;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
.client-type-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.client-type-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 24rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 16rpx;
|
||||
border: 2rpx solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.active {
|
||||
background: #fff;
|
||||
border-color: var(--theme-color);
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #e9ecef;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
text {
|
||||
font-size: 36rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
&.active .type-icon text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.type-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
|
||||
.type-label {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.type-desc {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.type-check {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -183,7 +296,7 @@ onUnload(() => {
|
||||
background: #f5f5f5;
|
||||
border-radius: 50rpx;
|
||||
padding: 0 40rpx;
|
||||
margin-bottom: 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.icon {
|
||||
font-size: 40rpx;
|
||||
@@ -199,7 +312,7 @@ onUnload(() => {
|
||||
|
||||
.code-btn {
|
||||
font-size: 26rpx;
|
||||
color: #ff4d4f;
|
||||
color: #008ef7;
|
||||
padding-left: 20rpx;
|
||||
border-left: 1rpx solid #ddd;
|
||||
line-height: 1;
|
||||
@@ -212,7 +325,6 @@ onUnload(() => {
|
||||
|
||||
.submit-btn {
|
||||
height: 100rpx;
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4f 100%);
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -220,11 +332,13 @@ onUnload(() => {
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
margin-top: 60rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(255, 77, 79, 0.3);
|
||||
margin-top: 40rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
opacity: 0.9;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -236,3 +350,4 @@ onUnload(() => {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
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>
|
||||
942
src/pages/me/loan-application.vue
Normal file
942
src/pages/me/loan-application.vue
Normal file
@@ -0,0 +1,942 @@
|
||||
<script lang="ts" setup>
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '贷款申请',
|
||||
navigationBarBackgroundColor: '#fff',
|
||||
navigationBarTextStyle: 'black',
|
||||
},
|
||||
})
|
||||
|
||||
// 表单数据
|
||||
const formData = ref({
|
||||
// 个人信息
|
||||
personalInfo: {
|
||||
name: '',
|
||||
phone: '',
|
||||
idCard: '',
|
||||
region: ['', '', ''], // 省、市、区
|
||||
detailAddress: '',
|
||||
},
|
||||
// 经营信息
|
||||
businessInfo: {
|
||||
businessProject: '',
|
||||
businessTime: '',
|
||||
annualIncome: '',
|
||||
hasDebt: 'no', // 'no' 或 'yes'
|
||||
debtAmount: '',
|
||||
loanDemand: '',
|
||||
assets: [] as string[], // 家庭主要资产
|
||||
},
|
||||
// 证件信息
|
||||
documentInfo: {
|
||||
businessLicense: '', // 营业执照或租赁合同
|
||||
otherMaterials: [] as string[], // 其他辅助材料
|
||||
},
|
||||
})
|
||||
|
||||
// 表单验证错误
|
||||
const formErrors = ref({
|
||||
personalInfo: {
|
||||
name: '',
|
||||
phone: '',
|
||||
idCard: '',
|
||||
region: '',
|
||||
detailAddress: '',
|
||||
},
|
||||
businessInfo: {
|
||||
businessProject: '',
|
||||
businessTime: '',
|
||||
annualIncome: '',
|
||||
debtAmount: '',
|
||||
loanDemand: '',
|
||||
assets: '',
|
||||
},
|
||||
documentInfo: {
|
||||
businessLicense: '',
|
||||
},
|
||||
})
|
||||
|
||||
// 省市区选项(模拟数据)
|
||||
const regionOptions = ref([
|
||||
{
|
||||
value: '110000',
|
||||
label: '北京市',
|
||||
children: [
|
||||
{
|
||||
value: '110100',
|
||||
label: '北京市',
|
||||
children: [
|
||||
{ value: '110101', label: '东城区' },
|
||||
{ value: '110102', label: '西城区' },
|
||||
{ value: '110105', label: '朝阳区' },
|
||||
{ value: '110106', label: '丰台区' },
|
||||
{ value: '110107', label: '石景山区' },
|
||||
{ value: '110108', label: '海淀区' },
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: '310000',
|
||||
label: '上海市',
|
||||
children: [
|
||||
{
|
||||
value: '310100',
|
||||
label: '上海市',
|
||||
children: [
|
||||
{ value: '310101', label: '黄浦区' },
|
||||
{ value: '310104', label: '徐汇区' },
|
||||
{ value: '310105', label: '长宁区' },
|
||||
{ value: '310106', label: '静安区' },
|
||||
{ value: '310107', label: '普陀区' },
|
||||
{ value: '310109', label: '虹口区' },
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: '440000',
|
||||
label: '广东省',
|
||||
children: [
|
||||
{
|
||||
value: '440100',
|
||||
label: '广州市',
|
||||
children: [
|
||||
{ value: '440103', label: '荔湾区' },
|
||||
{ value: '440104', label: '越秀区' },
|
||||
{ value: '440105', label: '海珠区' },
|
||||
{ value: '440106', label: '天河区' },
|
||||
{ value: '440111', label: '白云区' },
|
||||
{ value: '440112', label: '黄埔区' },
|
||||
]
|
||||
},
|
||||
{
|
||||
value: '440300',
|
||||
label: '深圳市',
|
||||
children: [
|
||||
{ value: '440303', label: '罗湖区' },
|
||||
{ value: '440304', label: '福田区' },
|
||||
{ value: '440305', label: '南山区' },
|
||||
{ value: '440306', label: '宝安区' },
|
||||
{ value: '440307', label: '龙岗区' },
|
||||
{ value: '440308', label: '龙华区' },
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
// 家庭主要资产选项
|
||||
const assetOptions = [
|
||||
{ value: 'house', label: '商品房' },
|
||||
{ value: 'selfBuiltState', label: '自建房 (国有)' },
|
||||
{ value: 'selfBuiltCollective', label: '自建房 (集体)' },
|
||||
{ value: 'shop', label: '商铺' },
|
||||
{ value: 'land', label: '土地' },
|
||||
{ value: 'car', label: '车辆' },
|
||||
{ value: 'other', label: '其他' },
|
||||
{ value: 'none', label: '无' },
|
||||
]
|
||||
|
||||
// 选择省市区
|
||||
function handleRegionPicker() {
|
||||
// 简化的省市区选择器,使用 uni.showActionSheet
|
||||
const provinces = regionOptions.value.map(item => item.label)
|
||||
|
||||
uni.showActionSheet({
|
||||
itemList: provinces,
|
||||
success: (res) => {
|
||||
if (res.tapIndex !== undefined) {
|
||||
const selectedProvince = regionOptions.value[res.tapIndex]
|
||||
formData.value.personalInfo.region[0] = selectedProvince.value
|
||||
|
||||
// 选择市
|
||||
const cities = selectedProvince.children.map((item: any) => item.label)
|
||||
uni.showActionSheet({
|
||||
itemList: cities,
|
||||
success: (cityRes) => {
|
||||
if (cityRes.tapIndex !== undefined) {
|
||||
const selectedCity = selectedProvince.children[cityRes.tapIndex]
|
||||
formData.value.personalInfo.region[1] = selectedCity.value
|
||||
|
||||
// 选择区
|
||||
const districts = selectedCity.children.map((item: any) => item.label)
|
||||
uni.showActionSheet({
|
||||
itemList: districts,
|
||||
success: (districtRes) => {
|
||||
if (districtRes.tapIndex !== undefined) {
|
||||
const selectedDistrict = selectedCity.children[districtRes.tapIndex]
|
||||
formData.value.personalInfo.region[2] = selectedDistrict.value
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 处理资产选择
|
||||
function handleAssetChange(value: string) {
|
||||
const { assets } = formData.value.businessInfo
|
||||
|
||||
// 如果选择"无",则取消其他所有选项
|
||||
if (value === 'none') {
|
||||
formData.value.businessInfo.assets = ['none']
|
||||
return
|
||||
}
|
||||
|
||||
// 如果选择了其他选项,则取消"无"选项
|
||||
if (assets.includes('none')) {
|
||||
const index = assets.indexOf('none')
|
||||
assets.splice(index, 1)
|
||||
}
|
||||
|
||||
// 切换选项
|
||||
const index = assets.indexOf(value)
|
||||
if (index > -1) {
|
||||
assets.splice(index, 1)
|
||||
} else {
|
||||
assets.push(value)
|
||||
}
|
||||
}
|
||||
|
||||
// 上传营业执照
|
||||
function handleUploadBusinessLicense() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
formData.value.documentInfo.businessLicense = res.tempFilePaths[0]
|
||||
formErrors.value.documentInfo.businessLicense = ''
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 上传其他材料
|
||||
function handleUploadOtherMaterials() {
|
||||
const currentCount = formData.value.documentInfo.otherMaterials.length
|
||||
const maxCount = 5
|
||||
|
||||
if (currentCount >= maxCount) {
|
||||
uni.showToast({
|
||||
title: `最多上传${maxCount}张图片`,
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
uni.chooseImage({
|
||||
count: maxCount - currentCount,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
if (Array.isArray(res.tempFilePaths)) {
|
||||
formData.value.documentInfo.otherMaterials.push(...res.tempFilePaths)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 删除其他材料
|
||||
function handleRemoveOtherMaterial(index: number) {
|
||||
formData.value.documentInfo.otherMaterials.splice(index, 1)
|
||||
}
|
||||
|
||||
// 预览图片
|
||||
function handlePreviewImage(url: string) {
|
||||
uni.previewImage({
|
||||
urls: [url]
|
||||
})
|
||||
}
|
||||
|
||||
// 表单验证
|
||||
function validateForm() {
|
||||
let isValid = true
|
||||
const errors = formErrors.value
|
||||
|
||||
// 重置错误信息
|
||||
Object.keys(errors.personalInfo).forEach(key => {
|
||||
errors.personalInfo[key as keyof typeof errors.personalInfo] = ''
|
||||
})
|
||||
Object.keys(errors.businessInfo).forEach(key => {
|
||||
errors.businessInfo[key as keyof typeof errors.businessInfo] = ''
|
||||
})
|
||||
errors.documentInfo.businessLicense = ''
|
||||
|
||||
// 验证个人信息
|
||||
if (!formData.value.personalInfo.name.trim()) {
|
||||
errors.personalInfo.name = '请输入姓名'
|
||||
isValid = false
|
||||
}
|
||||
|
||||
if (!formData.value.personalInfo.phone.trim()) {
|
||||
errors.personalInfo.phone = '请输入联系方式'
|
||||
isValid = false
|
||||
} else if (!/^1[3-9]\d{9}$/.test(formData.value.personalInfo.phone)) {
|
||||
errors.personalInfo.phone = '请输入正确的手机号'
|
||||
isValid = false
|
||||
}
|
||||
|
||||
if (!formData.value.personalInfo.idCard.trim()) {
|
||||
errors.personalInfo.idCard = '请输入身份证号码'
|
||||
isValid = false
|
||||
} else if (!/^\d{17}[\dXx]$/.test(formData.value.personalInfo.idCard)) {
|
||||
errors.personalInfo.idCard = '请输入正确的身份证号码'
|
||||
isValid = false
|
||||
}
|
||||
|
||||
if (formData.value.personalInfo.region.some(item => !item)) {
|
||||
errors.personalInfo.region = '请选择省市区'
|
||||
isValid = false
|
||||
}
|
||||
|
||||
if (!formData.value.personalInfo.detailAddress.trim()) {
|
||||
errors.personalInfo.detailAddress = '请输入详细地址'
|
||||
isValid = false
|
||||
} else if (formData.value.personalInfo.detailAddress.trim().length < 5 || formData.value.personalInfo.detailAddress.trim().length > 100) {
|
||||
errors.personalInfo.detailAddress = '详细地址长度应在5-100字之间'
|
||||
isValid = false
|
||||
}
|
||||
|
||||
// 验证经营信息
|
||||
if (!formData.value.businessInfo.businessProject.trim()) {
|
||||
errors.businessInfo.businessProject = '请输入经营项目'
|
||||
isValid = false
|
||||
}
|
||||
|
||||
if (!formData.value.businessInfo.businessTime.trim()) {
|
||||
errors.businessInfo.businessTime = '请输入经营时间'
|
||||
isValid = false
|
||||
}
|
||||
|
||||
if (!formData.value.businessInfo.annualIncome.trim()) {
|
||||
errors.businessInfo.annualIncome = '请输入最近1年经营收入'
|
||||
isValid = false
|
||||
} else if (isNaN(Number(formData.value.businessInfo.annualIncome)) || Number(formData.value.businessInfo.annualIncome) <= 0) {
|
||||
errors.businessInfo.annualIncome = '请输入正确的金额'
|
||||
isValid = false
|
||||
}
|
||||
|
||||
if (formData.value.businessInfo.hasDebt === 'yes' && !formData.value.businessInfo.debtAmount.trim()) {
|
||||
errors.businessInfo.debtAmount = '请输入负债金额'
|
||||
isValid = false
|
||||
} else if (formData.value.businessInfo.hasDebt === 'yes' && (isNaN(Number(formData.value.businessInfo.debtAmount)) || Number(formData.value.businessInfo.debtAmount) <= 0)) {
|
||||
errors.businessInfo.debtAmount = '请输入正确的金额'
|
||||
isValid = false
|
||||
}
|
||||
|
||||
if (!formData.value.businessInfo.loanDemand.trim()) {
|
||||
errors.businessInfo.loanDemand = '请输入贷款需求'
|
||||
isValid = false
|
||||
} else if (isNaN(Number(formData.value.businessInfo.loanDemand)) || Number(formData.value.businessInfo.loanDemand) <= 0) {
|
||||
errors.businessInfo.loanDemand = '请输入正确的金额'
|
||||
isValid = false
|
||||
}
|
||||
|
||||
if (formData.value.businessInfo.assets.length === 0) {
|
||||
errors.businessInfo.assets = '请至少选择一项家庭主要资产'
|
||||
isValid = false
|
||||
}
|
||||
|
||||
// 验证证件信息
|
||||
if (!formData.value.documentInfo.businessLicense) {
|
||||
errors.documentInfo.businessLicense = '请上传营业执照或租赁合同'
|
||||
isValid = false
|
||||
}
|
||||
|
||||
return isValid
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
function handleSubmit() {
|
||||
// 取消表单校验,直接提交
|
||||
|
||||
uni.showLoading({
|
||||
title: '提交中...'
|
||||
})
|
||||
|
||||
// 模拟提交
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 延迟返回
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
function handleBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="loan-application-page">
|
||||
<!-- 个人信息模块 -->
|
||||
<view class="form-card">
|
||||
<view class="card-title">
|
||||
<view class="title-bar"></view>
|
||||
<text class="title-text">个人信息</text>
|
||||
</view>
|
||||
|
||||
<view class="form-content">
|
||||
<view class="form-item">
|
||||
<view class="label">姓名</view>
|
||||
<input
|
||||
class="input"
|
||||
v-model="formData.personalInfo.name"
|
||||
placeholder="请输入姓名"
|
||||
:maxlength="20"
|
||||
/>
|
||||
<text v-if="formErrors.personalInfo.name" class="error-text">{{ formErrors.personalInfo.name }}</text>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="label">联系方式</view>
|
||||
<input
|
||||
class="input"
|
||||
v-model="formData.personalInfo.phone"
|
||||
placeholder="请输入联系方式"
|
||||
type="number"
|
||||
:maxlength="11"
|
||||
/>
|
||||
<text v-if="formErrors.personalInfo.phone" class="error-text">{{ formErrors.personalInfo.phone }}</text>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="label">身份证号码</view>
|
||||
<input
|
||||
class="input"
|
||||
v-model="formData.personalInfo.idCard"
|
||||
placeholder="请输入身份证号码"
|
||||
:maxlength="18"
|
||||
/>
|
||||
<text v-if="formErrors.personalInfo.idCard" class="error-text">{{ formErrors.personalInfo.idCard }}</text>
|
||||
</view>
|
||||
|
||||
<view class="form-item" @click="handleRegionPicker">
|
||||
<view class="label">经营地址</view>
|
||||
<view class="picker-input">
|
||||
<text v-if="formData.personalInfo.region.some(item => item)" class="picker-text">
|
||||
{{ regionOptions.find(p => p.value === formData.personalInfo.region[0])?.label }}
|
||||
{{ regionOptions.find(p => p.value === formData.personalInfo.region[0])?.children?.find(c => c.value === formData.personalInfo.region[1])?.label }}
|
||||
{{ regionOptions.find(p => p.value === formData.personalInfo.region[0])?.children?.find(c => c.value === formData.personalInfo.region[1])?.children?.find(d => d.value === formData.personalInfo.region[2])?.label }}
|
||||
</text>
|
||||
<text v-else class="picker-placeholder">选择省,市,区</text>
|
||||
<text class="i-carbon-chevron-right picker-arrow"></text>
|
||||
</view>
|
||||
<text v-if="formErrors.personalInfo.region" class="error-text">{{ formErrors.personalInfo.region }}</text>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="label">详细地址</view>
|
||||
<textarea
|
||||
class="textarea"
|
||||
v-model="formData.personalInfo.detailAddress"
|
||||
placeholder="请输入街道小区楼牌号等"
|
||||
:maxlength="100"
|
||||
/>
|
||||
<text v-if="formErrors.personalInfo.detailAddress" class="error-text">{{ formErrors.personalInfo.detailAddress }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 经营信息模块 -->
|
||||
<view class="form-card">
|
||||
<view class="card-title">
|
||||
<view class="title-bar"></view>
|
||||
<text class="title-text">经营信息</text>
|
||||
</view>
|
||||
|
||||
<view class="form-content">
|
||||
<view class="form-item">
|
||||
<view class="label">经营项目</view>
|
||||
<input
|
||||
class="input"
|
||||
v-model="formData.businessInfo.businessProject"
|
||||
placeholder="请输入经营项目"
|
||||
/>
|
||||
<text v-if="formErrors.businessInfo.businessProject" class="error-text">{{ formErrors.businessInfo.businessProject }}</text>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="label">经营时间</view>
|
||||
<input
|
||||
class="input"
|
||||
v-model="formData.businessInfo.businessTime"
|
||||
placeholder="请输入经营时间"
|
||||
/>
|
||||
<text v-if="formErrors.businessInfo.businessTime" class="error-text">{{ formErrors.businessInfo.businessTime }}</text>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="label">最近1年经营收入</view>
|
||||
<view class="input-with-suffix">
|
||||
<input
|
||||
class="input"
|
||||
v-model="formData.businessInfo.annualIncome"
|
||||
placeholder="请输入金额"
|
||||
type="digit"
|
||||
/>
|
||||
<text class="suffix">万元</text>
|
||||
</view>
|
||||
<text v-if="formErrors.businessInfo.annualIncome" class="error-text">{{ formErrors.businessInfo.annualIncome }}</text>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="label">负债情况</view>
|
||||
<view class="radio-group">
|
||||
<view
|
||||
class="radio-item"
|
||||
:class="{ active: formData.businessInfo.hasDebt === 'no' }"
|
||||
@click="formData.businessInfo.hasDebt = 'no'"
|
||||
>
|
||||
<text class="radio-dot"></text>
|
||||
<text>无负债</text>
|
||||
</view>
|
||||
<view
|
||||
class="radio-item"
|
||||
:class="{ active: formData.businessInfo.hasDebt === 'yes' }"
|
||||
@click="formData.businessInfo.hasDebt = 'yes'"
|
||||
>
|
||||
<text class="radio-dot"></text>
|
||||
<text>有负债</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="formData.businessInfo.hasDebt === 'yes'" class="debt-amount">
|
||||
<input
|
||||
class="input"
|
||||
v-model="formData.businessInfo.debtAmount"
|
||||
placeholder="请输入负债金额"
|
||||
type="digit"
|
||||
/>
|
||||
<text v-if="formErrors.businessInfo.debtAmount" class="error-text">{{ formErrors.businessInfo.debtAmount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="label">贷款需求</view>
|
||||
<view class="input-with-suffix">
|
||||
<input
|
||||
class="input"
|
||||
v-model="formData.businessInfo.loanDemand"
|
||||
placeholder="请输入金额"
|
||||
type="digit"
|
||||
/>
|
||||
<text class="suffix">万元</text>
|
||||
</view>
|
||||
<text v-if="formErrors.businessInfo.loanDemand" class="error-text">{{ formErrors.businessInfo.loanDemand }}</text>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="label">家庭主要资产</view>
|
||||
<view class="checkbox-group">
|
||||
<view
|
||||
v-for="option in assetOptions"
|
||||
:key="option.value"
|
||||
class="checkbox-item"
|
||||
:class="{ active: formData.businessInfo.assets.includes(option.value) }"
|
||||
@click="handleAssetChange(option.value)"
|
||||
>
|
||||
<text class="checkbox-icon"></text>
|
||||
<text>{{ option.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="formErrors.businessInfo.assets" class="error-text">{{ formErrors.businessInfo.assets }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 证件信息模块 -->
|
||||
<view class="form-card">
|
||||
<view class="card-title">
|
||||
<view class="title-bar"></view>
|
||||
<text class="title-text">证件信息</text>
|
||||
</view>
|
||||
|
||||
<view class="form-content">
|
||||
<view class="form-item">
|
||||
<view class="label">营业执照(租赁合同)</view>
|
||||
<view class="upload-area" @click="handleUploadBusinessLicense">
|
||||
<image v-if="formData.documentInfo.businessLicense" :src="formData.documentInfo.businessLicense" class="uploaded-image" @click.stop="handlePreviewImage(formData.documentInfo.businessLicense)" />
|
||||
<view v-else class="upload-placeholder">
|
||||
<text class="i-carbon-camera upload-icon"></text>
|
||||
<text class="upload-text">点击上传图片</text>
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="formErrors.documentInfo.businessLicense" class="error-text">{{ formErrors.documentInfo.businessLicense }}</text>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="label">其他辅助材料</view>
|
||||
<view class="upload-list">
|
||||
<view
|
||||
v-for="(image, index) in formData.documentInfo.otherMaterials"
|
||||
:key="index"
|
||||
class="upload-item"
|
||||
>
|
||||
<image :src="image" class="uploaded-image" @click="handlePreviewImage(image)" />
|
||||
<view class="delete-btn" @click="handleRemoveOtherMaterial(index)">
|
||||
<text class="i-carbon-close"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-if="formData.documentInfo.otherMaterials.length < 5"
|
||||
class="upload-area small"
|
||||
@click="handleUploadOtherMaterials"
|
||||
>
|
||||
<text class="i-carbon-add upload-icon"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部提交按钮 -->
|
||||
<view class="submit-bar">
|
||||
<button class="submit-btn" @click="handleSubmit">提交资料</button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.loan-application-page {
|
||||
min-height: 100vh;
|
||||
background: #F5F7FA;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
background: #FFFFFF;
|
||||
margin: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #F0F0F0;
|
||||
|
||||
.title-bar {
|
||||
width: 6rpx;
|
||||
height: 30rpx;
|
||||
background: #FF6600;
|
||||
border-radius: 3rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.form-content {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background: #F8F8F8;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 24rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
min-height: 120rpx;
|
||||
background: #F8F8F8;
|
||||
border-radius: 8rpx;
|
||||
padding: 24rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.picker-input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background: #F8F8F8;
|
||||
border-radius: 8rpx;
|
||||
padding: 0 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
|
||||
.picker-text {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.picker-placeholder {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.picker-arrow {
|
||||
font-size: 32rpx;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
}
|
||||
|
||||
.input-with-suffix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.suffix {
|
||||
height: 80rpx;
|
||||
padding: 0 24rpx;
|
||||
background: #F0F0F0;
|
||||
border-top-right-radius: 8rpx;
|
||||
border-bottom-right-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
gap: 40rpx;
|
||||
|
||||
.radio-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
|
||||
.radio-dot {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #DDDDDD;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
border-radius: 50%;
|
||||
background: #28C445;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.radio-dot {
|
||||
border-color: #28C445;
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.debt-amount {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
|
||||
.checkbox-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
background: #F8F8F8;
|
||||
border-radius: 8rpx;
|
||||
|
||||
.checkbox-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border-radius: 4rpx;
|
||||
border: 2rpx solid #DDDDDD;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background: #28C445;
|
||||
border-radius: 2rpx;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.checkbox-icon {
|
||||
border-color: #28C445;
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
background: #F8F8F8;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.small {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.upload-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
|
||||
.upload-icon {
|
||||
font-size: 48rpx;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.uploaded-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8rpx;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
|
||||
.upload-item {
|
||||
position: relative;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
|
||||
.uploaded-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8rpx;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
right: -10rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.i-carbon-close {
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.error-text {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #FF4D4F;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: #28C445;
|
||||
border-radius: 44rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -40,6 +40,13 @@ function navigateTo(url: string) {
|
||||
uni.navigateTo({ url })
|
||||
}
|
||||
|
||||
// 跳转到贷款申请页面
|
||||
function goToLoanApplication() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/me/loan-application'
|
||||
})
|
||||
}
|
||||
|
||||
// 退出登录
|
||||
function handleLogout() {
|
||||
uni.showModal({
|
||||
@@ -162,7 +169,7 @@ function handleLogout() {
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-footer">
|
||||
<view class="apply-btn">立即申请</view>
|
||||
<view class="apply-btn" @click="goToLoanApplication">立即申请</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -189,7 +196,7 @@ function handleLogout() {
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-footer">
|
||||
<view class="apply-btn">立即申请</view>
|
||||
<view class="apply-btn" @click="goToLoanApplication">立即申请</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -198,6 +205,11 @@ function handleLogout() {
|
||||
<!-- 常用功能 -->
|
||||
<view class="section-card">
|
||||
<view class="cell-group">
|
||||
<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" @click="navigateTo('/pages/member/index')">
|
||||
<text class="i-carbon-user-favorite icon"></text>
|
||||
<text class="label">会员中心</text>
|
||||
|
||||
@@ -351,9 +351,12 @@ function handleCancel() {
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0 24rpx;
|
||||
padding-left: calc(24rpx + env(safe-area-inset-left));
|
||||
padding-right: calc(24rpx + env(safe-area-inset-right));
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
gap: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.btn {
|
||||
padding: 16rpx 40rpx;
|
||||
|
||||
121
src/pagesBank/audit/list.vue
Normal file
121
src/pagesBank/audit/list.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<script lang="ts" setup>
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '审核列表',
|
||||
},
|
||||
})
|
||||
|
||||
// 模拟审核数据
|
||||
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 statusMap: Record<string, { text: string; color: string }> = {
|
||||
pending: { text: '待审核', color: '#ff8f0d' },
|
||||
approved: { text: '已通过', color: '#00c05a' },
|
||||
rejected: { text: '已拒绝', color: '#fa4350' },
|
||||
}
|
||||
|
||||
function handleAudit(id: string) {
|
||||
uni.navigateTo({ url: `/pagesBank/audit/detail?id=${id}` })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="audit-list-page">
|
||||
<view class="audit-list">
|
||||
<view
|
||||
v-for="item in auditList"
|
||||
:key="item.id"
|
||||
class="audit-card"
|
||||
@click="handleAudit(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 }}
|
||||
</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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.audit-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.audit-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.audit-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
|
||||
.audit-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.merchant-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.audit-status {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.audit-body {
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.amount {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #00c05a;
|
||||
}
|
||||
}
|
||||
|
||||
.audit-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.action {
|
||||
font-size: 24rpx;
|
||||
color: #00c05a;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
141
src/pagesBank/customer/list.vue
Normal file
141
src/pagesBank/customer/list.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<script lang="ts" setup>
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '客户管理',
|
||||
},
|
||||
})
|
||||
|
||||
// 模拟客户数据
|
||||
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' },
|
||||
])
|
||||
|
||||
function handleDetail(id: string) {
|
||||
uni.navigateTo({ url: `/pagesBank/customer/detail?id=${id}` })
|
||||
}
|
||||
|
||||
function getUsageRate(used: number, total: number) {
|
||||
return ((used / total) * 100).toFixed(1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="customer-list-page">
|
||||
<view class="customer-list">
|
||||
<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' ? '正常' : '预警' }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="customer-body">
|
||||
<view class="limit-info">
|
||||
<text class="label">授信额度</text>
|
||||
<text class="value">¥{{ (item.creditLimit / 10000).toFixed(0) }}万</text>
|
||||
</view>
|
||||
<view class="limit-info">
|
||||
<text class="label">已使用</text>
|
||||
<text class="value used">¥{{ (item.usedLimit / 10000).toFixed(1) }}万</text>
|
||||
</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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.customer-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.customer-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.customer-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
|
||||
.customer-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.customer-name {
|
||||
font-size: 28rpx;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
192
src/pagesBank/dashboard/index.vue
Normal file
192
src/pagesBank/dashboard/index.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<script lang="ts" setup>
|
||||
import { useUserStore } from '@/store/user'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '银行工作台',
|
||||
},
|
||||
})
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 模拟数据
|
||||
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-settings', label: '设置', path: '/pagesBank/me/index' },
|
||||
]
|
||||
|
||||
function handleAction(path: string) {
|
||||
uni.navigateTo({ url: path })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="dashboard-page">
|
||||
<!-- 头部欢迎 -->
|
||||
<view class="header">
|
||||
<view class="welcome">
|
||||
<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>
|
||||
<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>
|
||||
</view>
|
||||
|
||||
<!-- 快捷操作 -->
|
||||
<view class="section">
|
||||
<view class="section-title">快捷操作</view>
|
||||
<view class="quick-actions">
|
||||
<view
|
||||
v-for="item in quickActions"
|
||||
:key="item.label"
|
||||
class="action-item"
|
||||
@click="handleAction(item.path)"
|
||||
>
|
||||
<view class="action-icon">
|
||||
<text :class="item.icon"></text>
|
||||
</view>
|
||||
<text class="action-label">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
padding: 40rpx 30rpx 60rpx;
|
||||
|
||||
.welcome {
|
||||
color: #fff;
|
||||
|
||||
.greeting {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
font-size: 26rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20rpx;
|
||||
padding: 0 20rpx;
|
||||
margin-top: -40rpx;
|
||||
|
||||
.stat-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.stat-value {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&.warning .stat-value {
|
||||
color: #ff8f0d;
|
||||
}
|
||||
|
||||
&.success .stat-value {
|
||||
color: #00c05a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
margin: 30rpx 20rpx;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20rpx;
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
|
||||
.action-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
font-size: 40rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.action-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
152
src/pagesBank/me/index.vue
Normal file
152
src/pagesBank/me/index.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<script lang="ts" setup>
|
||||
import { useUserStore, CLIENT_TYPE_CONFIG, ClientType } from '@/store/user'
|
||||
import { tabbarStore } from '@/tabbar/store'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '银行中心',
|
||||
},
|
||||
})
|
||||
|
||||
const userStore = useUserStore()
|
||||
const config = CLIENT_TYPE_CONFIG[ClientType.BANK]
|
||||
|
||||
const menuList = [
|
||||
{ icon: 'i-carbon-report', label: '数据报表' },
|
||||
{ icon: 'i-carbon-settings', label: '系统设置' },
|
||||
{ icon: 'i-carbon-help', label: '帮助中心' },
|
||||
{ icon: 'i-carbon-information', label: '关于我们' },
|
||||
]
|
||||
|
||||
function handleLogout() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要退出登录吗?',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
userStore.logout()
|
||||
tabbarStore.setTabbarByClientType('user')
|
||||
uni.reLaunch({ url: '/pages/login/index' })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="me-page">
|
||||
<!-- 用户信息 -->
|
||||
<view class="user-card" :style="{ background: config.color }">
|
||||
<view class="avatar">
|
||||
<image :src="userStore.userInfo?.avatar || '/static/images/avatar.jpg'" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text class="nickname">{{ userStore.userInfo?.nickname || '银行用户' }}</text>
|
||||
<text class="tag">{{ config.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 菜单列表 -->
|
||||
<view class="menu-list">
|
||||
<view v-for="item in menuList" :key="item.label" class="menu-item">
|
||||
<view class="menu-left">
|
||||
<text :class="item.icon" class="menu-icon"></text>
|
||||
<text class="menu-label">{{ item.label }}</text>
|
||||
</view>
|
||||
<text class="i-carbon-chevron-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 退出登录 -->
|
||||
<view class="logout-btn" @click="handleLogout">退出登录</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.me-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
padding: 60rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
|
||||
.avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 4rpx solid rgba(255, 255, 255, 0.5);
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
.nickname {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
background: #fff;
|
||||
margin: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.menu-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
|
||||
.menu-icon {
|
||||
font-size: 40rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
margin: 40rpx 20rpx;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #fa4350;
|
||||
}
|
||||
</style>
|
||||
192
src/pagesMerchant/dashboard/index.vue
Normal file
192
src/pagesMerchant/dashboard/index.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<script lang="ts" setup>
|
||||
import { useUserStore } from '@/store/user'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '商家工作台',
|
||||
},
|
||||
})
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 模拟数据
|
||||
const stats = ref({
|
||||
todayOrders: 128,
|
||||
pendingOrders: 23,
|
||||
todaySales: 15680.50,
|
||||
totalGoods: 356,
|
||||
})
|
||||
|
||||
const quickActions = [
|
||||
{ icon: 'i-carbon-document-add', label: '新增订单', path: '/pagesMerchant/order/list' },
|
||||
{ icon: 'i-carbon-add-alt', label: '新增商品', path: '/pagesMerchant/goods/edit' },
|
||||
{ icon: 'i-carbon-wallet', label: '财务中心', path: '/pagesMerchant/finance/index' },
|
||||
{ icon: 'i-carbon-settings', label: '店铺设置', path: '/pagesMerchant/me/index' },
|
||||
]
|
||||
|
||||
function handleAction(path: string) {
|
||||
uni.navigateTo({ url: path })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="dashboard-page">
|
||||
<!-- 头部欢迎 -->
|
||||
<view class="header">
|
||||
<view class="welcome">
|
||||
<text class="greeting">您好,{{ userStore.userInfo?.nickname || '商家' }}</text>
|
||||
<text class="sub-text">今日订单运营数据</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数据卡片 -->
|
||||
<view class="stats-grid">
|
||||
<view class="stat-card">
|
||||
<text class="stat-value">{{ stats.todayOrders }}</text>
|
||||
<text class="stat-label">今日订单</text>
|
||||
</view>
|
||||
<view class="stat-card warning">
|
||||
<text class="stat-value">{{ stats.pendingOrders }}</text>
|
||||
<text class="stat-label">待处理</text>
|
||||
</view>
|
||||
<view class="stat-card success">
|
||||
<text class="stat-value">¥{{ stats.todaySales.toFixed(0) }}</text>
|
||||
<text class="stat-label">今日销售额</text>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<text class="stat-value">{{ stats.totalGoods }}</text>
|
||||
<text class="stat-label">商品总数</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 快捷操作 -->
|
||||
<view class="section">
|
||||
<view class="section-title">快捷操作</view>
|
||||
<view class="quick-actions">
|
||||
<view
|
||||
v-for="item in quickActions"
|
||||
:key="item.label"
|
||||
class="action-item"
|
||||
@click="handleAction(item.path)"
|
||||
>
|
||||
<view class="action-icon">
|
||||
<text :class="item.icon"></text>
|
||||
</view>
|
||||
<text class="action-label">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #ff8f0d 0%, #ffb347 100%);
|
||||
padding: 40rpx 30rpx 60rpx;
|
||||
|
||||
.welcome {
|
||||
color: #fff;
|
||||
|
||||
.greeting {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
font-size: 26rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20rpx;
|
||||
padding: 0 20rpx;
|
||||
margin-top: -40rpx;
|
||||
|
||||
.stat-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.stat-value {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&.warning .stat-value {
|
||||
color: #ff8f0d;
|
||||
}
|
||||
|
||||
&.success .stat-value {
|
||||
color: #00c05a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
margin: 30rpx 20rpx;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20rpx;
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
|
||||
.action-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(135deg, #ff8f0d 0%, #ffb347 100%);
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
font-size: 40rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.action-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
105
src/pagesMerchant/finance/index.vue
Normal file
105
src/pagesMerchant/finance/index.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<script lang="ts" setup>
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '财务中心',
|
||||
},
|
||||
})
|
||||
|
||||
// 模拟数据
|
||||
const finance = ref({
|
||||
balance: 125680.50,
|
||||
pendingSettlement: 23500.00,
|
||||
monthIncome: 89600.00,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="finance-page">
|
||||
<!-- 余额卡片 -->
|
||||
<view class="balance-card">
|
||||
<text class="label">可用余额</text>
|
||||
<text class="amount">¥{{ finance.balance.toFixed(2) }}</text>
|
||||
<view class="actions">
|
||||
<view class="action-btn">提现</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 财务统计 -->
|
||||
<view class="stats">
|
||||
<view class="stat-item">
|
||||
<text class="value">¥{{ finance.pendingSettlement.toFixed(2) }}</text>
|
||||
<text class="label">待结算</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="value">¥{{ finance.monthIncome.toFixed(2) }}</text>
|
||||
<text class="label">本月收入</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.finance-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.balance-card {
|
||||
background: linear-gradient(135deg, #ff8f0d 0%, #ffb347 100%);
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx;
|
||||
color: #fff;
|
||||
|
||||
.label {
|
||||
font-size: 26rpx;
|
||||
opacity: 0.9;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 56rpx;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.actions {
|
||||
.action-btn {
|
||||
display: inline-block;
|
||||
padding: 16rpx 48rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.stat-item {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
|
||||
.value {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
144
src/pagesMerchant/goods/list.vue
Normal file
144
src/pagesMerchant/goods/list.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<script lang="ts" setup>
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '商品管理',
|
||||
},
|
||||
})
|
||||
|
||||
// 模拟商品数据
|
||||
const goods = ref([
|
||||
{ id: '1', name: '苹果 iPhone 15 Pro', price: 8999.00, stock: 50, status: 'on' },
|
||||
{ id: '2', name: '华为 Mate 60 Pro', price: 6999.00, stock: 30, status: 'on' },
|
||||
{ id: '3', name: '小米 14 Ultra', price: 5999.00, stock: 0, status: 'off' },
|
||||
])
|
||||
|
||||
function handleEdit(id: string) {
|
||||
uni.navigateTo({ url: `/pagesMerchant/goods/edit?id=${id}` })
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
uni.navigateTo({ url: '/pagesMerchant/goods/edit' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="goods-list-page">
|
||||
<view class="goods-list">
|
||||
<view
|
||||
v-for="item in goods"
|
||||
:key="item.id"
|
||||
class="goods-card"
|
||||
@click="handleEdit(item.id)"
|
||||
>
|
||||
<view class="goods-info">
|
||||
<text class="goods-name">{{ item.name }}</text>
|
||||
<view class="goods-meta">
|
||||
<text class="price">¥{{ item.price.toFixed(2) }}</text>
|
||||
<text class="stock" :class="{ warning: item.stock === 0 }">
|
||||
库存:{{ item.stock }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-status" :class="item.status">
|
||||
{{ item.status === 'on' ? '上架' : '下架' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 添加按钮 -->
|
||||
<view class="add-btn" @click="handleAdd">
|
||||
<text class="i-carbon-add"></text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 20rpx;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.goods-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.goods-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.goods-info {
|
||||
flex: 1;
|
||||
|
||||
.goods-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.goods-meta {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
|
||||
.price {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #ff8f0d;
|
||||
}
|
||||
|
||||
.stock {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
|
||||
&.warning {
|
||||
color: #fa4350;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-status {
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 22rpx;
|
||||
|
||||
&.on {
|
||||
background: rgba(0, 192, 90, 0.1);
|
||||
color: #00c05a;
|
||||
}
|
||||
|
||||
&.off {
|
||||
background: rgba(153, 153, 153, 0.1);
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
position: fixed;
|
||||
right: 40rpx;
|
||||
bottom: 140rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: linear-gradient(135deg, #ff8f0d 0%, #ffb347 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8rpx 24rpx rgba(255, 143, 13, 0.4);
|
||||
|
||||
text {
|
||||
font-size: 48rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
152
src/pagesMerchant/me/index.vue
Normal file
152
src/pagesMerchant/me/index.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<script lang="ts" setup>
|
||||
import { useUserStore, CLIENT_TYPE_CONFIG, ClientType } from '@/store/user'
|
||||
import { tabbarStore } from '@/tabbar/store'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '商家中心',
|
||||
},
|
||||
})
|
||||
|
||||
const userStore = useUserStore()
|
||||
const config = CLIENT_TYPE_CONFIG[ClientType.MERCHANT]
|
||||
|
||||
const menuList = [
|
||||
{ icon: 'i-carbon-settings', label: '店铺设置' },
|
||||
{ icon: 'i-carbon-customer-service', label: '客服中心' },
|
||||
{ icon: 'i-carbon-help', label: '帮助中心' },
|
||||
{ icon: 'i-carbon-information', label: '关于我们' },
|
||||
]
|
||||
|
||||
function handleLogout() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要退出登录吗?',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
userStore.logout()
|
||||
tabbarStore.setTabbarByClientType('user')
|
||||
uni.reLaunch({ url: '/pages/login/index' })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="me-page">
|
||||
<!-- 用户信息 -->
|
||||
<view class="user-card" :style="{ background: config.color }">
|
||||
<view class="avatar">
|
||||
<image :src="userStore.userInfo?.avatar || '/static/images/avatar.jpg'" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text class="nickname">{{ userStore.userInfo?.nickname || '商家用户' }}</text>
|
||||
<text class="tag">{{ config.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 菜单列表 -->
|
||||
<view class="menu-list">
|
||||
<view v-for="item in menuList" :key="item.label" class="menu-item">
|
||||
<view class="menu-left">
|
||||
<text :class="item.icon" class="menu-icon"></text>
|
||||
<text class="menu-label">{{ item.label }}</text>
|
||||
</view>
|
||||
<text class="i-carbon-chevron-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 退出登录 -->
|
||||
<view class="logout-btn" @click="handleLogout">退出登录</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.me-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
padding: 60rpx 30rpx 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
|
||||
.avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 4rpx solid rgba(255, 255, 255, 0.5);
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
.nickname {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
background: #fff;
|
||||
margin: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.menu-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
|
||||
.menu-icon {
|
||||
font-size: 40rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
margin: 40rpx 20rpx;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #fa4350;
|
||||
}
|
||||
</style>
|
||||
114
src/pagesMerchant/order/list.vue
Normal file
114
src/pagesMerchant/order/list.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<script lang="ts" setup>
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '订单管理',
|
||||
},
|
||||
})
|
||||
|
||||
// 模拟订单数据
|
||||
const orders = ref([
|
||||
{ id: '1', orderNo: 'M202312170001', customer: '张三', amount: 299.00, status: 'pending', time: '10:30' },
|
||||
{ id: '2', orderNo: 'M202312170002', customer: '李四', amount: 1580.00, status: 'processing', time: '09:45' },
|
||||
{ id: '3', orderNo: 'M202312170003', customer: '王五', amount: 456.50, status: 'completed', time: '08:20' },
|
||||
])
|
||||
|
||||
const statusMap: Record<string, { text: string; color: string }> = {
|
||||
pending: { text: '待处理', color: '#ff8f0d' },
|
||||
processing: { text: '处理中', color: '#4d80f0' },
|
||||
completed: { text: '已完成', color: '#00c05a' },
|
||||
}
|
||||
|
||||
function handleOrder(id: string) {
|
||||
uni.navigateTo({ url: `/pagesMerchant/order/detail?id=${id}` })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="order-list-page">
|
||||
<view class="order-list">
|
||||
<view
|
||||
v-for="order in orders"
|
||||
:key="order.id"
|
||||
class="order-card"
|
||||
@click="handleOrder(order.id)"
|
||||
>
|
||||
<view class="order-header">
|
||||
<text class="order-no">{{ order.orderNo }}</text>
|
||||
<text class="order-status" :style="{ color: statusMap[order.status].color }">
|
||||
{{ statusMap[order.status].text }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="order-body">
|
||||
<text class="customer">客户:{{ order.customer }}</text>
|
||||
<text class="amount">¥{{ order.amount.toFixed(2) }}</text>
|
||||
</view>
|
||||
<view class="order-footer">
|
||||
<text class="time">今天 {{ order.time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.order-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.order-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.order-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
|
||||
.order-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.order-no {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.order-status {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.order-body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.customer {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #ff8f0d;
|
||||
}
|
||||
}
|
||||
|
||||
.order-footer {
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 127 KiB After Width: | Height: | Size: 263 KiB |
BIN
src/static/logo1.png
Normal file
BIN
src/static/logo1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
src/static/logo2.png
Normal file
BIN
src/static/logo2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
BIN
src/static/logo3.png
Normal file
BIN
src/static/logo3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
src/static/logo4.png
Normal file
BIN
src/static/logo4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
@@ -2,31 +2,93 @@ import { defineStore } from 'pinia'
|
||||
import type { User } from '@/typings/mall'
|
||||
import { mockMember } from '@/mock/member'
|
||||
|
||||
/**
|
||||
* 客户端类型枚举
|
||||
* - user: 用户端(消费者)
|
||||
* - merchant: 商家端
|
||||
* - bank: 银行端
|
||||
*/
|
||||
export enum ClientType {
|
||||
USER = 'user',
|
||||
MERCHANT = 'merchant',
|
||||
BANK = 'bank',
|
||||
}
|
||||
|
||||
/** 客户端类型配置 */
|
||||
export const CLIENT_TYPE_CONFIG = {
|
||||
[ClientType.USER]: {
|
||||
label: '用户端',
|
||||
icon: 'i-carbon-user',
|
||||
color: '#4d80f0',
|
||||
description: '购物消费、查看订单',
|
||||
homePage: '/pages/index/index',
|
||||
},
|
||||
[ClientType.MERCHANT]: {
|
||||
label: '商家端',
|
||||
icon: 'i-carbon-store',
|
||||
color: '#ff8f0d',
|
||||
description: '商品管理、订单处理',
|
||||
homePage: '/pagesMerchant/dashboard/index',
|
||||
},
|
||||
[ClientType.BANK]: {
|
||||
label: '银行端',
|
||||
icon: 'i-carbon-bank',
|
||||
color: '#00c05a',
|
||||
description: '账款审核、金融服务',
|
||||
homePage: '/pagesBank/dashboard/index',
|
||||
},
|
||||
}
|
||||
|
||||
export const useUserStore = defineStore('user', {
|
||||
state: () => ({
|
||||
userInfo: {
|
||||
id: 'user_001',
|
||||
username: 'admin',
|
||||
nickname: '测试用户',
|
||||
nickname: '王明阳',
|
||||
avatar: '/static/images/avatar.jpg',
|
||||
phone: '13800138000',
|
||||
creditLimits: [], // 实际应从 financeStore 获取或关联
|
||||
creditLimits: [],
|
||||
member: mockMember,
|
||||
} as User | null,
|
||||
isLogin: true, // 默认已登录
|
||||
isLogin: true,
|
||||
clientType: ClientType.USER as ClientType,
|
||||
}),
|
||||
|
||||
getters: {
|
||||
// 获取当前客户端类型配置
|
||||
currentClientConfig(state) {
|
||||
return CLIENT_TYPE_CONFIG[state.clientType]
|
||||
},
|
||||
// 是否为用户端
|
||||
isUserClient(state) {
|
||||
return state.clientType === ClientType.USER
|
||||
},
|
||||
// 是否为商家端
|
||||
isMerchantClient(state) {
|
||||
return state.clientType === ClientType.MERCHANT
|
||||
},
|
||||
// 是否为银行端
|
||||
isBankClient(state) {
|
||||
return state.clientType === ClientType.BANK
|
||||
},
|
||||
},
|
||||
|
||||
actions: {
|
||||
// 登录(模拟)
|
||||
// 设置客户端类型
|
||||
setClientType(type: ClientType) {
|
||||
this.clientType = type
|
||||
},
|
||||
|
||||
// 登录
|
||||
login(data: any) {
|
||||
this.isLogin = true
|
||||
// ...
|
||||
},
|
||||
|
||||
// 退出登录
|
||||
logout() {
|
||||
this.isLogin = false
|
||||
this.userInfo = null
|
||||
this.clientType = ClientType.USER
|
||||
},
|
||||
},
|
||||
|
||||
@@ -38,3 +100,4 @@ export const useUserStore = defineStore('user', {
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
@@ -2,13 +2,11 @@ import type { TabBar } from '@uni-helper/vite-plugin-uni-pages'
|
||||
import type { CustomTabBarItem, NativeTabBarItem } from './types'
|
||||
|
||||
/**
|
||||
* tabbar 选择的策略,更详细的介绍见 tabbar.md 文件
|
||||
* 0: 'NO_TABBAR' `无 tabbar`
|
||||
* 1: 'NATIVE_TABBAR' `完全原生 tabbar`
|
||||
* 2: 'CUSTOM_TABBAR_WITH_CACHE' `有缓存自定义 tabbar`
|
||||
* 3: 'CUSTOM_TABBAR_WITHOUT_CACHE' `无缓存自定义 tabbar`
|
||||
*
|
||||
* 温馨提示:本文件的任何代码更改了之后,都需要重新运行,否则 pages.json 不会更新导致配置不生效
|
||||
* tabbar 选择的策略
|
||||
* 0: 'NO_TABBAR' 无 tabbar
|
||||
* 1: 'NATIVE_TABBAR' 完全原生 tabbar
|
||||
* 2: 'CUSTOM_TABBAR_WITH_CACHE' 有缓存自定义 tabbar
|
||||
* 3: 'CUSTOM_TABBAR_WITHOUT_CACHE' 无缓存自定义 tabbar
|
||||
*/
|
||||
export const TABBAR_STRATEGY_MAP = {
|
||||
NO_TABBAR: 0,
|
||||
@@ -17,13 +15,9 @@ export const TABBAR_STRATEGY_MAP = {
|
||||
CUSTOM_TABBAR_WITHOUT_CACHE: 3,
|
||||
}
|
||||
|
||||
// TODO: 1/3. 通过这里切换使用tabbar的策略
|
||||
// 如果是使用 NO_TABBAR(0),nativeTabbarList 和 customTabbarList 都不生效(里面的配置不用管)
|
||||
// 如果是使用 NATIVE_TABBAR(1),只需要配置 nativeTabbarList,customTabbarList 不生效
|
||||
// 如果是使用 CUSTOM_TABBAR(2,3),只需要配置 不生效
|
||||
export const selectedTabbarStrategy = TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE
|
||||
|
||||
// TODO: 2/3. 使用 NATIVE_TABBAR 时,更新下面的 tabbar 配置
|
||||
// 原生 tabbar 配置(备用)
|
||||
export const nativeTabbarList: NativeTabBarItem[] = [
|
||||
{
|
||||
iconPath: 'static/tabbar/home.png',
|
||||
@@ -35,95 +29,129 @@ export const nativeTabbarList: NativeTabBarItem[] = [
|
||||
iconPath: 'static/tabbar/personal.png',
|
||||
selectedIconPath: 'static/tabbar/personalHL.png',
|
||||
pagePath: 'pages/me/me',
|
||||
text: '个人',
|
||||
text: '我的',
|
||||
},
|
||||
]
|
||||
|
||||
// TODO: 3/3. 使用 CUSTOM_TABBAR(2,3) 时,更新下面的 tabbar 配置
|
||||
// 如果需要配置鼓包,需要在 'tabbar/store.ts' 里面设置,最后在 `tabbar/index.vue` 里面更改鼓包的图片
|
||||
export const customTabbarList: CustomTabBarItem[] = [
|
||||
// ==================== 用户端 Tabbar 配置 ====================
|
||||
export const userTabbarList: CustomTabBarItem[] = [
|
||||
{
|
||||
text: '首页',
|
||||
pagePath: 'pages/index/index',
|
||||
// 注意 unocss 图标需要如下处理:(二选一)
|
||||
// 1)在fg-tabbar.vue页面上引入一下并注释掉(见tabbar/index.vue代码第2行)
|
||||
// 2)配置到 unocss.config.ts 的 safelist 中
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-home',
|
||||
// badge: 'dot',
|
||||
navigationStyle: 'custom',
|
||||
iconType: 'image',
|
||||
icon: '/static/logo2.png',
|
||||
iconActive: '/static/logo1.png',
|
||||
},
|
||||
{
|
||||
pagePath: 'pages/sort/index',
|
||||
text: '分类',
|
||||
// 1)在fg-tabbar.vue页面上引入一下并注释掉(见tabbar/index.vue代码第2行)
|
||||
// 2)配置到 unocss.config.ts 的 safelist 中
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-view-mode-2',
|
||||
// badge: 10,
|
||||
},
|
||||
{
|
||||
pagePath: 'pages/goods/cart',
|
||||
text: '购物车',
|
||||
// 1)在fg-tabbar.vue页面上引入一下并注释掉(见tabbar/index.vue代码第2行)
|
||||
// 2)配置到 unocss.config.ts 的 safelist 中
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-shopping-cart',
|
||||
// badge: 10,
|
||||
},
|
||||
{
|
||||
pagePath: 'pages/me/me',
|
||||
text: '我的',
|
||||
// 1)在fg-tabbar.vue页面上引入一下并注释掉(见tabbar/index.vue代码第2行)
|
||||
// 2)配置到 unocss.config.ts 的 safelist 中
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-user',
|
||||
// badge: 10,
|
||||
},
|
||||
// 其他类型演示
|
||||
// 1、uiLib
|
||||
// {
|
||||
// pagePath: 'pages/index/index',
|
||||
// text: '首页',
|
||||
// iconType: 'uiLib',
|
||||
// icon: 'home',
|
||||
// },
|
||||
// 2、iconfont
|
||||
// {
|
||||
// pagePath: 'pages/index/index',
|
||||
// text: '首页',
|
||||
// // 注意 iconfont 图标需要额外加上 'iconfont',如下
|
||||
// iconType: 'iconfont',
|
||||
// icon: 'iconfont icon-my',
|
||||
// },
|
||||
// 3、image
|
||||
// {
|
||||
// pagePath: 'pages/index/index',
|
||||
// text: '首页',
|
||||
// // 使用 ‘image’时,需要配置 icon + iconActive 2张图片
|
||||
// iconType: 'image',
|
||||
// icon: '/static/tabbar/home.png',
|
||||
// iconActive: '/static/tabbar/homeHL.png',
|
||||
// },
|
||||
]
|
||||
|
||||
// ==================== 商家端 Tabbar 配置 ====================
|
||||
export const merchantTabbarList: CustomTabBarItem[] = [
|
||||
{
|
||||
text: '工作台',
|
||||
pagePath: 'pagesMerchant/dashboard/index',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-dashboard',
|
||||
},
|
||||
{
|
||||
pagePath: 'pagesMerchant/order/list',
|
||||
text: '订单',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-document',
|
||||
},
|
||||
{
|
||||
pagePath: 'pagesMerchant/goods/list',
|
||||
text: '商品',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-product',
|
||||
},
|
||||
{
|
||||
pagePath: 'pagesMerchant/finance/index',
|
||||
text: '财务',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-wallet',
|
||||
},
|
||||
{
|
||||
pagePath: 'pagesMerchant/me/index',
|
||||
text: '我的',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-user',
|
||||
},
|
||||
]
|
||||
|
||||
// ==================== 银行端 Tabbar 配置 ====================
|
||||
export const bankTabbarList: CustomTabBarItem[] = [
|
||||
{
|
||||
text: '工作台',
|
||||
pagePath: 'pagesBank/dashboard/index',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-analytics',
|
||||
},
|
||||
{
|
||||
pagePath: 'pagesBank/audit/list',
|
||||
text: '审核',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-task-approved',
|
||||
},
|
||||
{
|
||||
pagePath: 'pagesBank/customer/list',
|
||||
text: '客户',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-group',
|
||||
},
|
||||
{
|
||||
pagePath: 'pagesBank/me/index',
|
||||
text: '我的',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-user',
|
||||
},
|
||||
]
|
||||
|
||||
// 根据客户端类型获取对应的 tabbar 配置
|
||||
export type ClientTypeKey = 'user' | 'merchant' | 'bank'
|
||||
export function getTabbarListByClientType(clientType: ClientTypeKey): CustomTabBarItem[] {
|
||||
const tabbarMap: Record<ClientTypeKey, CustomTabBarItem[]> = {
|
||||
user: userTabbarList,
|
||||
merchant: merchantTabbarList,
|
||||
bank: bankTabbarList,
|
||||
}
|
||||
return tabbarMap[clientType] || userTabbarList
|
||||
}
|
||||
|
||||
// 默认使用用户端配置
|
||||
export const customTabbarList: CustomTabBarItem[] = userTabbarList
|
||||
|
||||
/**
|
||||
* 是否启用 tabbar 缓存
|
||||
* NATIVE_TABBAR(1) 和 CUSTOM_TABBAR_WITH_CACHE(2) 时,需要tabbar缓存
|
||||
*/
|
||||
export const tabbarCacheEnable
|
||||
= [TABBAR_STRATEGY_MAP.NATIVE_TABBAR, TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE].includes(selectedTabbarStrategy)
|
||||
|
||||
/**
|
||||
* 是否启用自定义 tabbar
|
||||
* CUSTOM_TABBAR(2,3) 时,启用自定义tabbar
|
||||
*/
|
||||
export const customTabbarEnable
|
||||
= [TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE, TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITHOUT_CACHE].includes(selectedTabbarStrategy)
|
||||
|
||||
/**
|
||||
* 是否需要隐藏原生 tabbar
|
||||
* CUSTOM_TABBAR_WITH_CACHE(2) 时,需要隐藏原生tabbar
|
||||
*/
|
||||
export const needHideNativeTabbar = selectedTabbarStrategy === TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE
|
||||
|
||||
@@ -131,7 +159,6 @@ const _tabbarList = customTabbarEnable ? customTabbarList.map(item => ({ text: i
|
||||
export const tabbarList = customTabbarEnable ? customTabbarList : nativeTabbarList
|
||||
|
||||
const _tabbar: TabBar = {
|
||||
// 只有微信小程序支持 custom。App 和 H5 不生效
|
||||
custom: selectedTabbarStrategy === TABBAR_STRATEGY_MAP.CUSTOM_TABBAR_WITH_CACHE,
|
||||
color: '#999999',
|
||||
selectedColor: '#018d71',
|
||||
@@ -145,3 +172,4 @@ const _tabbar: TabBar = {
|
||||
}
|
||||
|
||||
export const tabBar = tabbarCacheEnable ? _tabbar : undefined
|
||||
|
||||
|
||||
@@ -1,25 +1,39 @@
|
||||
import type { CustomTabBarItem, CustomTabBarItemBadge } from './types'
|
||||
import { reactive } from 'vue'
|
||||
|
||||
import { tabbarList as _tabbarList, customTabbarEnable, selectedTabbarStrategy, TABBAR_STRATEGY_MAP } from './config'
|
||||
import {
|
||||
tabbarList as _tabbarList,
|
||||
customTabbarEnable,
|
||||
selectedTabbarStrategy,
|
||||
TABBAR_STRATEGY_MAP,
|
||||
getTabbarListByClientType,
|
||||
type ClientTypeKey,
|
||||
} from './config'
|
||||
|
||||
// TODO 1/2: 中间的鼓包tabbarItem的开关
|
||||
// 中间的鼓包tabbarItem的开关
|
||||
const BULGE_ENABLE = false
|
||||
|
||||
/** tabbarList 里面的 path 从 pages.config.ts 得到 */
|
||||
/** tabbarList 动态列表,根据客户端类型切换 */
|
||||
const tabbarList = reactive<CustomTabBarItem[]>(_tabbarList.map(item => ({
|
||||
...item,
|
||||
pagePath: item.pagePath.startsWith('/') ? item.pagePath : `/${item.pagePath}`,
|
||||
})))
|
||||
|
||||
if (customTabbarEnable && BULGE_ENABLE) {
|
||||
if (tabbarList.length % 2) {
|
||||
console.error('有鼓包时 tabbar 数量必须是偶数,否则样式很奇怪!!')
|
||||
// 初始化鼓包
|
||||
function initBulge() {
|
||||
if (customTabbarEnable && BULGE_ENABLE) {
|
||||
if (tabbarList.length % 2) {
|
||||
console.error('有鼓包时 tabbar 数量必须是偶数')
|
||||
}
|
||||
const hasBulge = tabbarList.some(item => item.isBulge)
|
||||
if (!hasBulge) {
|
||||
tabbarList.splice(tabbarList.length / 2, 0, {
|
||||
isBulge: true,
|
||||
} as CustomTabBarItem)
|
||||
}
|
||||
}
|
||||
tabbarList.splice(tabbarList.length / 2, 0, {
|
||||
isBulge: true,
|
||||
} as CustomTabBarItem)
|
||||
}
|
||||
initBulge()
|
||||
|
||||
export function isPageTabbar(path: string) {
|
||||
if (selectedTabbarStrategy === TABBAR_STRATEGY_MAP.NO_TABBAR) {
|
||||
@@ -30,33 +44,55 @@ export function isPageTabbar(path: string) {
|
||||
}
|
||||
|
||||
/**
|
||||
* 自定义 tabbar 的状态管理,原生 tabbar 无需关注本文件
|
||||
* tabbar 状态,增加 storageSync 保证刷新浏览器时在正确的 tabbar 页面
|
||||
* 使用reactive简单状态,而不是 pinia 全局状态
|
||||
* 自定义 tabbar 的状态管理
|
||||
*/
|
||||
const tabbarStore = reactive({
|
||||
curIdx: uni.getStorageSync('app-tabbar-index') || 0,
|
||||
prevIdx: uni.getStorageSync('app-tabbar-index') || 0,
|
||||
|
||||
setCurIdx(idx: number) {
|
||||
this.curIdx = idx
|
||||
uni.setStorageSync('app-tabbar-index', idx)
|
||||
},
|
||||
|
||||
setTabbarItemBadge(idx: number, badge: CustomTabBarItemBadge) {
|
||||
if (tabbarList[idx]) {
|
||||
tabbarList[idx].badge = badge
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 根据客户端类型切换 tabbar 列表
|
||||
*/
|
||||
setTabbarByClientType(clientType: ClientTypeKey) {
|
||||
const newList = getTabbarListByClientType(clientType)
|
||||
|
||||
// 清空现有列表
|
||||
tabbarList.length = 0
|
||||
|
||||
// 填充新列表
|
||||
newList.forEach(item => {
|
||||
tabbarList.push({
|
||||
...item,
|
||||
pagePath: (item.pagePath.startsWith('/') ? item.pagePath : `/${item.pagePath}`) as any,
|
||||
})
|
||||
})
|
||||
|
||||
// 重新初始化鼓包
|
||||
initBulge()
|
||||
|
||||
// 重置当前索引
|
||||
this.setCurIdx(0)
|
||||
},
|
||||
|
||||
setAutoCurIdx(path: string) {
|
||||
// '/' 当做首页
|
||||
if (path === '/') {
|
||||
this.setCurIdx(0)
|
||||
return
|
||||
}
|
||||
const index = tabbarList.findIndex(item => item.pagePath === path)
|
||||
// console.log('tabbarList:', tabbarList)
|
||||
if (index === -1) {
|
||||
const pagesPathList = getCurrentPages().map(item => item.route.startsWith('/') ? item.route : `/${item.route}`)
|
||||
// console.log(pagesPathList)
|
||||
const flag = tabbarList.some(item => pagesPathList.includes(item.pagePath))
|
||||
if (!flag) {
|
||||
this.setCurIdx(0)
|
||||
@@ -67,6 +103,7 @@ const tabbarStore = reactive({
|
||||
this.setCurIdx(index)
|
||||
}
|
||||
},
|
||||
|
||||
restorePrevIdx() {
|
||||
if (this.prevIdx === this.curIdx)
|
||||
return
|
||||
@@ -76,3 +113,4 @@ const tabbarStore = reactive({
|
||||
})
|
||||
|
||||
export { tabbarList, tabbarStore }
|
||||
|
||||
|
||||
@@ -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[] // 底部按钮配置
|
||||
}
|
||||
|
||||
@@ -70,10 +70,21 @@ export default defineConfig({
|
||||
center: 'flex justify-center items-center',
|
||||
},
|
||||
],
|
||||
// 动态图标需要在这里配置,或者写在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'],
|
||||
// 动态图标需要在这里配置
|
||||
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-document-attachment',
|
||||
// 商家端/银行端 tabbar 图标
|
||||
'i-carbon-dashboard', 'i-carbon-document', 'i-carbon-product', 'i-carbon-wallet',
|
||||
'i-carbon-analytics', 'i-carbon-task-approved', 'i-carbon-group', 'i-carbon-report',
|
||||
// 登录页端类型选择图标
|
||||
'i-carbon-store', 'i-carbon-bank', 'i-carbon-checkmark-filled',
|
||||
// 菜单图标
|
||||
'i-carbon-settings', 'i-carbon-customer-service', 'i-carbon-help', 'i-carbon-information',
|
||||
'i-carbon-add', 'i-carbon-add-alt', 'i-carbon-document-add', 'i-carbon-chevron-right',
|
||||
],
|
||||
rules: [
|
||||
[
|
||||
'p-safe',
|
||||
|
||||
Reference in New Issue
Block a user