feat: 分端显示

# Conflicts:
#	src/mock/goods.ts

.gitignore

@@ -31,7 +31,6 @@ src/types
 # 单独把这个文件排除掉，用以解决部分电脑生成的 auto-import.d.ts 的API不完整导致类型提示报错问题
 !src/types/auto-import.d.ts
 src/manifest.json
-src/pages.json
 
 # 2025-10-15 by 菲鸽： lock 文件还是需要加入版本管理，今天又遇到版本不一致导致无法运行的问题了。
 # pnpm-lock.yaml
@@ -46,3 +45,4 @@ src/pages.json
 
 # 更新 uni-app 官方版本
 # npx @dcloudio/uvm@latest
+src/pages.json

interaction-flow.md

@@ -0,0 +1,89 @@
+# 应结账款页面交互流程图
+navigationStyle: 'custom',
+## 用户操作流程
+
+```mermaid
+flowchart TD
+    A[用户进入应结账款页面] --> B[查看商户列表]
+    B --> C[点击商户头部的"消账"按钮]
+    C --> D[进入选择模式]
+    
+    D --> E{用户操作}
+    E -->|点击订单| F[选择/取消选择订单]
+    E -->|点击全选| G[全选/取消全选]
+    E -->|点击取消| H[退出选择模式]
+    E -->|选择订单后点击进行消账| I[打开消账弹窗]
+    
+    F --> J[更新已选数量和金额]
+    G --> J
+    J --> K{是否有选中订单}
+    K -->|有| L[显示"进行消账(X)"按钮]
+    K -->|无| M[显示"取消"按钮]
+    
+    L --> N[点击"进行消账"]
+    N --> I
+    I --> O[填写消账信息]
+    O --> P[提交消账申请]
+    P --> Q[消账成功]
+    Q --> R[退出选择模式]
+    R --> S[刷新列表]
+    
+    H --> T[返回正常模式]
+    M --> T
+    T --> B
+    S --> B
+```
+
+## 数据流图
+
+```mermaid
+flowchart LR
+    A[用户点击消账] --> B[selectionMode[merchantId] = true]
+    B --> C[显示选择界面]
+    
+    C --> D[用户选择订单]
+    D --> E[selectedOrders[merchantId] 更新]
+    E --> F[计算选中数量和金额]
+    F --> G[更新按钮状态]
+    
+    G --> H[点击进行消账]
+    H --> I[获取选中订单数据]
+    I --> J[调用消账API]
+    J --> K[消账完成]
+    K --> L[selectionMode[merchantId] = false]
+    L --> M[刷新页面数据]
+```
+
+## 组件状态管理
+
+```mermaid
+stateDiagram-v2
+    [*] --> NormalMode
+    NormalMode --> SelectionMode: 点击消账按钮
+    SelectionMode --> NormalMode: 点击取消
+    SelectionMode --> NormalMode: 消账完成
+    SelectionMode --> SelectionMode: 选择/取消选择订单
+    SelectionMode --> SelectionMode: 全选/取消全选
+    
+    state SelectionMode {
+        [*] --> NoSelection
+        NoSelection --> HasSelection: 选择订单
+        HasSelection --> NoSelection: 取消选择所有订单
+        HasSelection --> HasSelection: 继续选择订单
+    }
+```
+
+## 条件判断逻辑
+
+```mermaid
+flowchart TD
+    A[订单点击事件] --> B{是否在选择模式?}
+    B -->|否| C[忽略点击]
+    B -->|是| D{订单状态是否为未结或逾期?}
+    D -->|否| E[忽略点击]
+    D -->|是| F{订单是否已选中?}
+    F -->|是| G[取消选中订单]
+    F -->|否| H[选中订单]
+    G --> I[更新选中列表]
+    H --> I
+    I --> J[更新UI显示]

pages.config.ts

@@ -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'],
+    },
+  },
 })

scripts/create-base-files.js

@@ -18,7 +18,7 @@ const pages = {
       type: 'home',
       style: {
         navigationStyle: 'custom',
-        navigationBarTitleText: '首页',
+        navigationBarTitleText: '数字广东',
       },
     },
     {

settlement-redesign-plan.md

@@ -0,0 +1,342 @@
+# 应结账款页面重构方案
+
+## 需求概述
+
+1. 将商户卡片中的"批量消账"按钮改为"消账"
+2. 移除每个订单的"申请消账"按钮
+3. 点击"消账"按钮后，进入选择模式，可以选择该商户下的多个订单
+4. 选择订单后，按钮文本变为"进行消账(X)"，X为选择的订单数量
+5. 添加全选/取消全选功能
+6. 显示已选订单的汇总金额
+7. 限制只能选择未结和逾期状态的订单
+8. 点击"进行消账"后，执行批量消账逻辑
+
+## 数据结构设计
+
+### 新增状态变量
+
+```typescript
+// 选择模式状态
+const selectionMode = ref<Record<string, boolean>>({}) // 记录每个商户是否处于选择模式
+const selectedOrders = ref<Record<string, string[]>>({}) // 记录每个商户选中的订单ID列表
+```
+
+### 计算属性
+
+```typescript
+// 计算每个商户选中的订单数量
+const selectedCount = computed(() => {
+  return (merchantId: string) => selectedOrders.value[merchantId]?.length || 0
+})
+
+// 计算每个商户选中的订单总金额
+const selectedAmount = computed(() => {
+  return (merchantId: string) => {
+    const group = groupedByMerchant.value.find(g => g.merchantId === merchantId)
+    if (!group) return 0
+    
+    const selectedIds = selectedOrders.value[merchantId] || []
+    return group.settlements
+      .filter(item => selectedIds.includes(item.id))
+      .reduce((sum, item) => sum + item.amount, 0)
+  }
+})
+
+// 计算每个商户是否全选
+const isAllSelected = computed(() => {
+  return (merchantId: string) => {
+    const group = groupedByMerchant.value.find(g => g.merchantId === merchantId)
+    if (!group) return false
+    
+    const selectableOrders = group.settlements.filter(
+      item => item.status === SettlementStatus.UNSETTLED || item.status === SettlementStatus.OVERDUE
+    )
+    const selectedIds = selectedOrders.value[merchantId] || []
+    
+    return selectableOrders.length > 0 && selectableOrders.every(item => selectedIds.includes(item.id))
+  }
+})
+```
+
+## UI 设计
+
+### 1. 商户头部修改
+
+```vue
+<!-- 商户头部 -->
+<view class="merchant-header">
+  <!-- 原有商户信息保持不变 -->
+  
+  <!-- 头部操作区域 -->
+  <view v-if="currentTab === 0" class="header-action">
+    <!-- 非选择模式 -->
+    <view v-if="!selectionMode[group.merchantId]" class="batch-btn-small" @click.stop="enterSelectionMode(group.merchantId)">
+      <text class="i-carbon-checkmark-outline" />
+      <text>消账</text>
+    </view>
+    
+    <!-- 选择模式 -->
+    <template v-else>
+      <view class="selection-controls">
+        <view class="select-all-btn" @click.stop="toggleSelectAll(group.merchantId)">
+          <text class="i-carbon-checkmark-filled" v-if="isAllSelected(group.merchantId)" />
+          <text class="i-carbon-checkmark-outline" v-else />
+          <text>全选</text>
+        </view>
+        <view class="selected-info">
+          <text>已选 {{ selectedCount(group.merchantId) }} 单</text>
+          <text class="amount">¥{{ selectedAmount(group.merchantId).toFixed(2) }}</text>
+        </view>
+        <view 
+          v-if="selectedCount(group.merchantId) > 0" 
+          class="batch-btn-small active" 
+          @click.stop="handleBatchWriteOff(group.merchantId)"
+        >
+          <text class="i-carbon-checkmark-outline" />
+          <text>进行消账({{ selectedCount(group.merchantId) }})</text>
+        </view>
+        <view v-else class="cancel-btn" @click.stop="exitSelectionMode(group.merchantId)">
+          <text>取消</text>
+        </view>
+      </view>
+    </template>
+  </view>
+</view>
+```
+
+### 2. 订单列表修改
+
+```vue
+<!-- 订单列表 -->
+<view class="order-list">
+  <view 
+    v-for="item in group.settlements" 
+    :key="item.id" 
+    class="order-item"
+    :class="{ 
+      'selection-mode': selectionMode[group.merchantId],
+      'selected': selectedOrders[group.merchantId]?.includes(item.id),
+      'disabled': item.status !== SettlementStatus.UNSETTLED && item.status !== SettlementStatus.OVERDUE
+    }"
+    @click="handleOrderClick(group.merchantId, item.id, item.status)"
+  >
+    <!-- 选择框 -->
+    <view v-if="selectionMode[group.merchantId]" class="checkbox">
+      <text class="i-carbon-checkmark-filled" v-if="selectedOrders[group.merchantId]?.includes(item.id)" />
+      <text class="i-carbon-checkmark-outline" v-else />
+    </view>
+    
+    <!-- 订单内容 -->
+    <view class="order-content">
+      <!-- 原有订单头部和内容保持不变 -->
+      <!-- 移除订单操作区域 -->
+    </view>
+  </view>
+</view>
+```
+
+## 功能实现
+
+### 1. 进入选择模式
+
+```typescript
+function enterSelectionMode(merchantId: string) {
+  selectionMode.value[merchantId] = true
+  selectedOrders.value[merchantId] = []
+}
+```
+
+### 2. 退出选择模式
+
+```typescript
+function exitSelectionMode(merchantId: string) {
+  selectionMode.value[merchantId] = false
+  selectedOrders.value[merchantId] = []
+}
+```
+
+### 3. 处理订单点击
+
+```typescript
+function handleOrderClick(merchantId: string, orderId: string, status: SettlementStatus) {
+  // 只有在选择模式下且订单状态为未结或逾期时才能选择
+  if (!selectionMode.value[merchantId]) return
+  if (status !== SettlementStatus.UNSETTLED && status !== SettlementStatus.OVERDUE) return
+  
+  const selected = selectedOrders.value[merchantId] || []
+  const index = selected.indexOf(orderId)
+  
+  if (index > -1) {
+    // 取消选择
+    selected.splice(index, 1)
+  } else {
+    // 添加选择
+    selected.push(orderId)
+  }
+  
+  selectedOrders.value[merchantId] = selected
+}
+```
+
+### 4. 全选/取消全选
+
+```typescript
+function toggleSelectAll(merchantId: string) {
+  const group = groupedByMerchant.value.find(g => g.merchantId === merchantId)
+  if (!group) return
+  
+  const selectableOrders = group.settlements.filter(
+    item => item.status === SettlementStatus.UNSETTLED || item.status === SettlementStatus.OVERDUE
+  )
+  
+  if (isAllSelected.value(merchantId)) {
+    // 取消全选
+    selectedOrders.value[merchantId] = []
+  } else {
+    // 全选
+    selectedOrders.value[merchantId] = selectableOrders.map(item => item.id)
+  }
+}
+```
+
+### 5. 批量消账
+
+```typescript
+function handleBatchWriteOff(merchantId: string) {
+  const selectedIds = selectedOrders.value[merchantId] || []
+  if (selectedIds.length === 0) return
+  
+  const group = groupedByMerchant.value.find(g => g.merchantId === merchantId)
+  if (!group) return
+  
+  // 获取选中的订单
+  const selectedSettlements = group.settlements.filter(item => selectedIds.includes(item.id))
+  
+  currentSettlement.value = null
+  currentMerchantSettlements.value = selectedSettlements
+  isBatchMode.value = true
+  writeOffVisible.value = true
+  
+  // 退出选择模式
+  exitSelectionMode(merchantId)
+}
+```
+
+## 样式设计
+
+### 1. 选择模式样式
+
+```scss
+.order-item {
+  &.selection-mode {
+    display: flex;
+    align-items: flex-start;
+    gap: 20rpx;
+    padding: 24rpx;
+    
+    .checkbox {
+      width: 40rpx;
+      height: 40rpx;
+      border-radius: 50%;
+      border: 2rpx solid #ddd;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 10rpx;
+      flex-shrink: 0;
+      
+      .i-carbon-checkmark-outline {
+        font-size: 24rpx;
+        color: #999;
+      }
+      
+      .i-carbon-checkmark-filled {
+        font-size: 24rpx;
+        color: $primary;
+      }
+    }
+    
+    &.selected .checkbox {
+      background: rgba($primary, 0.1);
+      border-color: $primary;
+    }
+    
+    &.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+    
+    .order-content {
+      flex: 1;
+    }
+  }
+}
+```
+
+### 2. 选择控制区域样式
+
+```scss
+.selection-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+  align-items: flex-end;
+  
+  .select-all-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 8rpx 16rpx;
+    background: rgba($primary, 0.05);
+    border-radius: 20rpx;
+    color: $primary;
+    font-size: 22rpx;
+    
+    .i-carbon-checkmark-outline,
+    .i-carbon-checkmark-filled {
+      font-size: 24rpx;
+    }
+  }
+  
+  .selected-info {
+    text-align: right;
+    font-size: 22rpx;
+    
+    .amount {
+      display: block;
+      font-size: 26rpx;
+      font-weight: 600;
+      color: $danger;
+    }
+  }
+  
+  .cancel-btn {
+    padding: 8rpx 20rpx;
+    background: rgba($text-2, 0.1);
+    border-radius: 20rpx;
+    color: $text-2;
+    font-size: 24rpx;
+  }
+  
+  .batch-btn-small.active {
+    background: $primary;
+    color: white;
+  }
+}
+```
+
+## 交互流程
+
+1. 用户点击商户头部的"消账"按钮
+2. 进入选择模式，显示选择框和全选按钮
+3. 用户可以选择/取消选择符合条件的订单
+4. 选择订单后，显示已选数量和汇总金额
+5. 点击"进行消账"按钮，打开消账弹窗
+6. 消账完成后退出选择模式，刷新列表
+
+## 注意事项
+
+1. 只有未结和逾期状态的订单才能被选择
+2. 选择模式下，其他商户的卡片保持正常状态
+3. 消账弹窗需要支持批量处理多个订单
+4. 需要处理选择状态的响应式更新

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>
+

src/api/auth.ts

@@ -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,

src/components/cart/CartItem.vue

@@ -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 {

src/components/common/CategoryGrid.vue

@@ -33,8 +33,13 @@ const emit = defineEmits<{
 function handleClick(item: Category) {
   emit('click', item)
   // 跳转到分类页面
-  uni.navigateTo({
-    url: `/pages/sort/index?categoryId=${item.id}`,
+  // 注意：因为分类页面是 tabBar 页面，需要使用 switchTab 而不是 navigateTo
+  uni.switchTab({
+    url: `/pages/sort/index`,
+    success: () => {
+      // 跳转成功后，通过全局事件通知分类页面选中指定分类
+      uni.$emit('selectCategory', item.id)
+    }
   })
 }
 </script>

src/components/finance/CreditCard.vue

@@ -1,26 +1,29 @@
 <template>
-  <view class="credit-card">
+  <view class="credit-card" @click="handleClick">
     <view class="header">
+      <view class="title-wrapper">
         <text class="title">{{ title }}</text>
-      <text class="date">更新于 {{ updateTime }}</text>
+        <view v-if="isExhausted" class="status-tag exhausted">额度已用尽</view>
+        <view v-else-if="isHighUsage" class="status-tag warning">额度紧张</view>
+      </view>
     </view>
     
     <view class="content">
       <view class="row">
         <view class="item">
-          <text class="label">总额度</text>
-          <text class="value">¥{{ formatPrice(totalLimit) }}</text>
+          <text class="label">可用额度</text>
+          <text class="value" :class="{ 'exhausted': isExhausted }">¥{{ formatPrice(availableLimit) }}</text>
         </view>
         <view class="item">
-          <text class="label">可用额度</text>
-          <text class="value highlight">¥{{ formatPrice(availableLimit) }}</text>
+          <text class="label">总额度</text>
+          <text class="value">¥{{ formatPrice(totalLimit) }}</text>
         </view>
       </view>
       
       <!-- 进度条 -->
       <view class="progress-wrapper">
         <view class="progress-bg">
-          <view class="progress-bar" :style="{ width: percent + '%' }"></view>
+          <view class="progress-bar" :style="{ width: percent + '%', background: progressColor }"></view>
         </view>
         <view class="progress-text">
           <text>已用 {{ percent }}%</text>
@@ -38,18 +41,45 @@ interface Props {
   usedLimit: number
   availableLimit: number
   updateTime: string
+  hideUpdateTime?: boolean
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  hideUpdateTime: false
+})
 
+const emit = defineEmits(['click'])
+
+// 计算使用百分比
 const percent = computed(() => {
   if (props.totalLimit === 0) return 0
   return Math.min(100, Math.round((props.usedLimit / props.totalLimit) * 100))
 })
 
+// 判断是否额度已用尽
+const isExhausted = computed(() => {
+  return props.availableLimit <= 0 || percent.value >= 100
+})
+
+// 判断是否高使用率
+const isHighUsage = computed(() => {
+  return percent.value >= 80 && percent.value < 100
+})
+
+// 根据使用率返回进度条颜色
+const progressColor = computed(() => {
+  if (isExhausted.value) return '#ff4d4f' // 红色
+  if (isHighUsage.value) return '#faad14' // 橙色
+  return '#52c41a' // 绿色
+})
+
 function formatPrice(price: number) {
   return price.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
 }
+
+function handleClick() {
+  emit('click')
+}
 </script>
 
 <style lang="scss" scoped>
@@ -59,6 +89,40 @@ function formatPrice(price: number) {
   padding: 30rpx;
   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
   margin-bottom: 24rpx;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  }
+  
+  // 添加左侧彩色边框
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 6rpx;
+    background: #1890ff;
+    border-radius: 3rpx 0 0 3rpx;
+  }
+  
+  // 额度已用尽的卡片
+  &.exhausted {
+    &::before {
+      background: #ff4d4f;
+    }
+  }
+  
+  // 额度紧张的卡片
+  &.warning {
+    &::before {
+      background: #faad14;
+    }
+  }
 }
 
 .header {
@@ -67,29 +131,33 @@ function formatPrice(price: number) {
   align-items: center;
   margin-bottom: 30rpx;
   
+  .title-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+  }
+  
   .title {
     font-size: 32rpx;
     font-weight: 600;
     color: #333;
-    position: relative;
-    padding-left: 20rpx;
-    
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 8rpx;
-      height: 32rpx;
-      background: #ff4d4f;
-      border-radius: 4rpx;
-    }
   }
   
-  .date {
-    font-size: 24rpx;
-    color: #999;
+  .status-tag {
+    padding: 6rpx 12rpx;
+    border-radius: 20rpx;
+    font-size: 20rpx;
+    font-weight: 500;
+    
+    &.exhausted {
+      background: rgba(255, 77, 79, 0.1);
+      color: #ff4d4f;
+    }
+    
+    &.warning {
+      background: rgba(250, 173, 20, 0.1);
+      color: #faad14;
+    }
   }
 }
 
@@ -114,8 +182,8 @@ function formatPrice(price: number) {
         font-weight: 600;
         color: #333;
         
-        &.highlight {
-          color: #52c41a;
+        &.exhausted {
+          color: #ff4d4f;
         }
       }
     }
@@ -123,18 +191,17 @@ function formatPrice(price: number) {
   
   .progress-wrapper {
     .progress-bg {
-      height: 12rpx;
+      height: 16rpx;
       background: #f5f5f5;
-      border-radius: 6rpx;
+      border-radius: 8rpx;
       overflow: hidden;
       margin-bottom: 12rpx;
     }
     
     .progress-bar {
       height: 100%;
-      background: linear-gradient(90deg, #ff9c6e 0%, #ff4d4f 100%);
-      border-radius: 6rpx;
-      transition: width 0.3s ease;
+      border-radius: 8rpx;
+      transition: width 0.5s ease, background 0.3s ease;
     }
     
     .progress-text {

src/components/finance/WriteOffRecord.vue

@@ -0,0 +1,390 @@
+<template>
+  <view class="write-off-record-popup" :class="{ show: visible }">
+    <view class="mask" @click="handleClose"></view>
+    <view class="content">
+      <view class="header">
+        <text class="title">消账记录</text>
+        <text class="close-btn i-carbon-close" @click="handleClose"></text>
+      </view>
+      
+      <scroll-view scroll-y class="body">
+        <view v-if="writeOffRecords.length === 0" class="empty-state">
+          <text class="empty-text">暂无消账记录</text>
+        </view>
+        
+        <view v-else class="record-list">
+          <view
+            v-for="(record, index) in writeOffRecords"
+            :key="record.id"
+            class="record-item"
+          >
+            <!-- 记录头部 -->
+            <view class="record-header">
+              <view class="record-info">
+                <text class="record-id">记录编号: {{ record.id }}</text>
+                <view class="status-badge" :class="getStatusClass(record.status)">
+                  {{ getStatusText(record.status) }}
+                </view>
+              </view>
+              <view class="record-amount">
+                <text class="amount-label">消账金额</text>
+                <text class="amount-value">¥{{ record.amount.toFixed(2) }}</text>
+              </view>
+            </view>
+            
+            <!-- 记录内容 -->
+            <view class="record-content">
+              <view class="info-row">
+                <text class="info-label">提交时间</text>
+                <text class="info-value">{{ record.submitTime }}</text>
+              </view>
+              
+              <view v-if="record.remark" class="info-row">
+                <text class="info-label">备注说明</text>
+                <text class="info-value">{{ record.remark }}</text>
+              </view>
+              
+              <!-- 凭证图片 -->
+              <view v-if="record.proof && record.proof.length > 0" class="proof-section">
+                <view class="proof-label">凭证图片</view>
+                <view class="proof-list">
+                  <view
+                    v-for="(img, imgIndex) in record.proof"
+                    :key="imgIndex"
+                    class="proof-item"
+                    @click="previewImage(img, record.proof)"
+                  >
+                    <image :src="img" mode="aspectFill" class="proof-image" />
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </scroll-view>
+      
+      <view class="footer">
+        <view class="btn close-btn" @click="handleClose">关闭</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { WriteOff, WriteOffStatus } from '@/typings/mall'
+
+interface Props {
+  visible: boolean
+  writeOffRecords: WriteOff[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  writeOffRecords: () => [],
+})
+
+const emit = defineEmits<{
+  'update:visible': [visible: boolean]
+}>()
+
+// 状态文本
+function getStatusText(status: WriteOffStatus) {
+  switch (status) {
+    case 'pending':
+      return '待审核'
+    case 'approved':
+      return '已通过'
+    case 'rejected':
+      return '已拒绝'
+    default:
+      return '未知'
+  }
+}
+
+// 状态样式类
+function getStatusClass(status: WriteOffStatus) {
+  switch (status) {
+    case 'pending':
+      return 'warning'
+    case 'approved':
+      return 'success'
+    case 'rejected':
+      return 'danger'
+    default:
+      return ''
+  }
+}
+
+// 关闭弹窗
+function handleClose() {
+  emit('update:visible', false)
+}
+
+// 预览图片
+function previewImage(current: string, urls: string[]) {
+  uni.previewImage({
+    current,
+    urls,
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+// 设计令牌
+$primary: #4d80f0;
+$danger: #fa4350;
+$warning: #ff8f0d;
+$success: #00c05a;
+
+$text-1: #262626;
+$text-2: #909399;
+$text-3: #c0c4cc;
+
+$bg-page: #f4f4f4;
+$bg-card: #ffffff;
+
+.write-off-record-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  visibility: hidden;
+  transition: visibility 0.3s;
+
+  &.show {
+    visibility: visible;
+
+    .mask {
+      opacity: 1;
+    }
+
+    .content {
+      transform: translateY(0);
+    }
+  }
+}
+
+.mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: #fff;
+  border-radius: 24rpx 24rpx 0 0;
+  transform: translateY(100%);
+  transition: transform 0.3s;
+  display: flex;
+  flex-direction: column;
+  max-height: 80vh;
+}
+
+.header {
+  padding: 30rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1rpx solid #f5f5f5;
+  
+  .title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: $text-1;
+  }
+  
+  .close-btn {
+    font-size: 40rpx;
+    color: $text-2;
+  }
+}
+
+.body {
+  padding: 30rpx;
+  max-height: 600rpx;
+  box-sizing: border-box;
+}
+
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 100rpx 0;
+  
+  .empty-text {
+    font-size: 28rpx;
+    color: $text-2;
+  }
+}
+
+.record-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
+}
+
+.record-item {
+  background: $bg-card;
+  border-radius: 16rpx;
+  padding: 24rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
+  margin-bottom: 16rpx;
+  box-sizing: border-box;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+.record-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 20rpx;
+  flex-wrap: wrap;
+  
+  .record-info {
+    flex: 1;
+    min-width: 0;
+    margin-right: 16rpx;
+    
+    .record-id {
+      font-size: 24rpx;
+      color: $text-2;
+      margin-bottom: 8rpx;
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    .status-badge {
+      display: inline-block;
+      font-size: 22rpx;
+      padding: 4rpx 12rpx;
+      border-radius: 20rpx;
+      font-weight: 500;
+      
+      &.success {
+        color: $success;
+        background: rgba($success, 0.1);
+      }
+      &.warning {
+        color: $warning;
+        background: rgba($warning, 0.1);
+      }
+      &.danger {
+        color: $danger;
+        background: rgba($danger, 0.1);
+      }
+    }
+  }
+  
+  .record-amount {
+    text-align: right;
+    flex-shrink: 0;
+    
+    .amount-label {
+      font-size: 22rpx;
+      color: $text-2;
+      display: block;
+      margin-bottom: 4rpx;
+    }
+    
+    .amount-value {
+      font-size: 32rpx;
+      font-weight: 700;
+      color: $danger;
+      font-family: 'DIN Alternate', sans-serif;
+    }
+  }
+}
+
+.record-content {
+  .info-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 16rpx;
+    
+    .info-label {
+      font-size: 24rpx;
+      color: $text-2;
+      min-width: 120rpx;
+      flex-shrink: 0;
+    }
+    
+    .info-value {
+      font-size: 24rpx;
+      color: $text-1;
+      flex: 1;
+      text-align: right;
+      word-wrap: break-word;
+      word-break: break-all;
+      overflow-wrap: break-word;
+    }
+  }
+}
+
+.proof-section {
+  margin-top: 20rpx;
+  
+  .proof-label {
+    font-size: 24rpx;
+    color: $text-2;
+    margin-bottom: 16rpx;
+  }
+  
+  .proof-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16rpx;
+    margin-top: 16rpx;
+    
+    .proof-item {
+      width: 160rpx;
+      height: 160rpx;
+      border-radius: 8rpx;
+      overflow: hidden;
+      flex-shrink: 0;
+      
+      .proof-image {
+        width: 100%;
+        height: 100%;
+        border-radius: 8rpx;
+        object-fit: cover;
+      }
+    }
+  }
+}
+
+.footer {
+  padding: 20rpx 30rpx;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+  border-top: 1rpx solid #f5f5f5;
+  
+  .close-btn {
+    height: 88rpx;
+    background: $bg-page;
+    color: $text-1;
+    font-size: 32rpx;
+    font-weight: 600;
+    border-radius: 44rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    &:active {
+      opacity: 0.9;
+    }
+  }
+}
+</style>

src/mock/goods.ts

@@ -347,4 +347,24 @@ export const mockGoodsList: Goods[] = [
     categoryId: 'cat_005',
     categoryName: '文创工艺品',
   },
+  {
+    id: 'goods_018',
+    shopId: 'merchant_007',
+    shopName: '四脚公园',
+    name: '洗面奶专用清爽控油祛痘洁面乳去油去黑头',
+    cover: '/static/product/18/1.jpg',
+    images: ['/static/product/18/1.jpg'],
+    detailImage: '/static/product/18/2.jpg',
+    price: 45,
+    originalPrice: 85,
+    stock: 200,
+    sales: 456,
+    description: '曼秀雷敦男士洗面奶专用清爽控油祛痘洁面乳去油去黑头旗舰店正品。采用天然植物成分，温和清洁肌肤，有效去除油脂，改善痘痘问题，让肌肤清爽透亮。',
+    specs: [
+      { name: '瓶', values: ['小瓶', '大瓶'] },
+    ],
+    tags: ['热销'],
+    categoryId: 'cat_008',
+    categoryName: '美妆',
+  },
 ]

src/mock/index.ts

@@ -8,3 +8,4 @@ export * from './finance'
 export * from './member'
 export * from './banner'
 export * from './address'
+export * from './loan-application'

src/mock/loan-application.ts

@@ -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"
+      }
+    ]
+  }
+]

src/pages/finance/credit.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { useFinanceStore } from '@/store/finance'
 import CreditCard from '@/components/finance/CreditCard.vue'
+import type { CreditLimit } from '@/typings/mall'
 
 definePage({
   style: {
@@ -12,6 +13,25 @@ definePage({
 const financeStore = useFinanceStore()
 const loading = ref(true)
 
+// 计算总额度
+const totalCreditLimit = computed(() => {
+  return financeStore.creditLimits.reduce((sum, item) => sum + item.totalLimit, 0)
+})
+
+// 计算使用百分比
+const usagePercent = computed(() => {
+  if (totalCreditLimit.value === 0) return 0
+  return Math.min(100, Math.round((financeStore.totalUsedLimit / totalCreditLimit.value) * 100))
+})
+
+// 根据使用率返回进度条颜色
+const progressColor = computed(() => {
+  const percent = usagePercent.value
+  if (percent < 50) return '#52c41a' // 绿色
+  if (percent < 80) return '#faad14' // 橙色
+  return '#ff4d4f' // 红色
+})
+
 onShow(() => {
   loadData()
 })
@@ -26,6 +46,43 @@ async function loadData() {
 onPullDownRefresh(() => {
   loadData()
 })
+
+// 快捷功能处理函数
+function handleIncreaseLimit() {
+  uni.showToast({
+    title: '跳转到提升额度页面',
+    icon: 'none'
+  })
+  // 实际项目中跳转到额度申请页面
+  // uni.navigateTo({ url: '/pages/finance/increase-limit' })
+}
+
+function handleViewBills() {
+  uni.showToast({
+    title: '跳转到账单明细页面',
+    icon: 'none'
+  })
+  // 实际项目中跳转到账单明细页面
+  // uni.navigateTo({ url: '/pages/finance/bill-detail' })
+}
+
+function handleManageLimit() {
+  uni.showToast({
+    title: '跳转到额度管理页面',
+    icon: 'none'
+  })
+  // 实际项目中跳转到额度管理页面
+  // uni.navigateTo({ url: '/pages/finance/limit-manage' })
+}
+
+// 商户卡片点击处理
+function handleMerchantClick(merchant: CreditLimit) {
+  uni.showModal({
+    title: merchant.merchantName,
+    content: `可用额度：¥${merchant.availableLimit.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}\n总额度：¥${merchant.totalLimit.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}\n已使用：¥${merchant.usedLimit.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}`,
+    showCancel: false
+  })
+}
 </script>
 
 <template>
@@ -35,9 +92,35 @@ onPullDownRefresh(() => {
       <view class="label">总可用额度 (元)</view>
       <view class="amount">{{ financeStore.totalAvailableLimit.toLocaleString('zh-CN', { minimumFractionDigits: 2 }) }}</view>
       <view class="sub-info">
-        <text>总额度 ¥{{ financeStore.creditLimits.reduce((sum, item) => sum + item.totalLimit, 0).toLocaleString() }}</text>
-        <text class="divider">|</text>
-        <text>已用 ¥{{ financeStore.totalUsedLimit.toLocaleString() }}</text>
+        <text>信用额度 ¥{{ totalCreditLimit.toLocaleString() }} | 已使用 ¥{{ financeStore.totalUsedLimit.toLocaleString() }} ({{ usagePercent }}%)</text>
+      </view>
+      
+      <!-- 进度条 -->
+      <view class="progress-wrapper">
+        <view class="progress-bg">
+          <view class="progress-bar" :style="{ width: usagePercent + '%', background: progressColor }"></view>
+        </view>
+      </view>
+      
+      <!-- 统一更新时间 -->
+      <view class="update-time" v-if="financeStore.creditLimits.length > 0">
+        数据更新于：{{ financeStore.creditLimits[0].updateTime }}
+      </view>
+    </view>
+
+    <!-- 快捷功能入口 -->
+    <view class="quick-actions">
+      <view class="action-item" @click="handleIncreaseLimit">
+        <view class="icon">📈</view>
+        <text>提升额度</text>
+      </view>
+      <view class="action-item" @click="handleViewBills">
+        <view class="icon">📋</view>
+        <text>账单明细</text>
+      </view>
+      <view class="action-item" @click="handleManageLimit">
+        <view class="icon">⚙️</view>
+        <text>额度管理</text>
       </view>
     </view>
 
@@ -58,6 +141,12 @@ onPullDownRefresh(() => {
           :used-limit="item.usedLimit"
           :available-limit="item.availableLimit"
           :update-time="item.updateTime"
+          :hide-update-time="true"
+          :class="{
+            'exhausted': item.availableLimit <= 0 || (item.usedLimit / item.totalLimit) >= 1,
+            'warning': (item.usedLimit / item.totalLimit) >= 0.8 && (item.usedLimit / item.totalLimit) < 1
+          }"
+          @click="handleMerchantClick(item)"
         />
       </view>
     </view>
@@ -73,8 +162,10 @@ onPullDownRefresh(() => {
 
 .overview-card {
   background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
-  padding: 60rpx 40rpx;
+  padding: 60rpx 40rpx 40rpx;
   color: #fff;
+  border-radius: 0 0 40rpx 40rpx;
+  box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.2);
   
   .label {
     font-size: 28rpx;
@@ -83,27 +174,86 @@ onPullDownRefresh(() => {
   }
   
   .amount {
-    font-size: 64rpx;
-    font-weight: 600;
+    font-size: 72rpx;
+    font-weight: 700;
     margin-bottom: 30rpx;
+    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
   }
   
   .sub-info {
-    display: flex;
-    align-items: center;
     font-size: 26rpx;
     opacity: 0.9;
+    margin-bottom: 30rpx;
+  }
   
-    .divider {
-      margin: 0 20rpx;
-      opacity: 0.5;
+  .progress-wrapper {
+    margin-bottom: 30rpx;
+    
+    .progress-bg {
+      height: 16rpx;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 8rpx;
+      overflow: hidden;
+    }
+    
+    .progress-bar {
+      height: 100%;
+      border-radius: 8rpx;
+      transition: width 0.5s ease, background 0.3s ease;
+    }
+  }
+  
+  .update-time {
+    font-size: 24rpx;
+    opacity: 0.7;
+    text-align: center;
+  }
+}
+
+.quick-actions {
+  display: flex;
+  justify-content: space-around;
+  padding: 40rpx 30rpx;
+  background: #fff;
+  margin: 20rpx 30rpx;
+  border-radius: 16rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+  
+  .action-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16rpx;
+    padding: 20rpx;
+    border-radius: 12rpx;
+    transition: all 0.3s ease;
+    
+    &:active {
+      background: #f5f5f5;
+      transform: scale(0.95);
+    }
+    
+    .icon {
+      font-size: 48rpx;
+      width: 80rpx;
+      height: 80rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #f0f8ff;
+      border-radius: 50%;
+    }
+    
+    text {
+      font-size: 24rpx;
+      color: #333;
     }
   }
 }
 
 .list-container {
   padding: 30rpx;
-  margin-top: -40rpx;
+  margin-top: 20rpx;
   
   .section-title {
     font-size: 30rpx;
@@ -111,6 +261,19 @@ onPullDownRefresh(() => {
     color: #333;
     margin-bottom: 24rpx;
     padding-left: 10rpx;
+    position: relative;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      left: -10rpx;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 6rpx;
+      height: 30rpx;
+      background: #1890ff;
+      border-radius: 3rpx;
+    }
   }
 }
 

src/pages/finance/settlement.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import type { Settlement } from '@/typings/mall'
+import type { WriteOff } from '@/typings/mall'
 import SettlementItem from '@/components/finance/SettlementItem.vue'
 import WriteOffForm from '@/components/finance/WriteOffForm.vue'
+import WriteOffRecord from '@/components/finance/WriteOffRecord.vue'
 import { useFinanceStore } from '@/store/finance'
 import { SettlementStatus } from '@/typings/mall'
 
@@ -36,6 +38,14 @@ const currentSettlement = ref<Settlement | null>(null)
 const currentMerchantSettlements = ref<Settlement[]>([]) // 批量消账时的商户所有账款
 const isBatchMode = ref(false) // 是否批量消账模式
 
+// 消账记录弹窗相关
+const writeOffRecordVisible = ref(false)
+const currentWriteOffRecords = ref<WriteOff[]>([]) // 当前订单的消账记录
+
+// 选择模式状态
+const selectionMode = ref<Record<string, boolean>>({}) // 记录每个商户是否处于选择模式
+const selectedOrders = ref<Record<string, string[]>>({}) // 记录每个商户选中的订单ID列表
+
 // 按商户分组
 const groupedByMerchant = computed(() => {
   const groups: Record<string, {
@@ -72,6 +82,39 @@ const groupedByMerchant = computed(() => {
   return Object.values(groups)
 })
 
+// 计算每个商户选中的订单数量
+const selectedCount = computed(() => {
+  return (merchantId: string) => selectedOrders.value[merchantId]?.length || 0
+})
+
+// 计算每个商户选中的订单总金额
+const selectedAmount = computed(() => {
+  return (merchantId: string) => {
+    const group = groupedByMerchant.value.find(g => g.merchantId === merchantId)
+    if (!group) return 0
+    
+    const selectedIds = selectedOrders.value[merchantId] || []
+    return group.settlements
+      .filter(item => selectedIds.includes(item.id))
+      .reduce((sum, item) => sum + item.amount, 0)
+  }
+})
+
+// 计算每个商户是否全选
+const isAllSelected = computed(() => {
+  return (merchantId: string) => {
+    const group = groupedByMerchant.value.find(g => g.merchantId === merchantId)
+    if (!group) return false
+    
+    const selectableOrders = group.settlements.filter(
+      item => item.status === SettlementStatus.UNSETTLED || item.status === SettlementStatus.OVERDUE
+    )
+    const selectedIds = selectedOrders.value[merchantId] || []
+    
+    return selectableOrders.length > 0 && selectableOrders.every(item => selectedIds.includes(item.id))
+  }
+})
+
 // 页面显示
 onShow(() => {
   loadData()
@@ -120,7 +163,97 @@ function handleOpenWriteOff(item: Settlement) {
   writeOffVisible.value = true
 }
 
-// 打开商户批量消账弹窗
+// 进入选择模式
+function enterSelectionMode(merchantId: string) {
+  selectionMode.value[merchantId] = true
+  selectedOrders.value[merchantId] = []
+}
+
+// 退出选择模式
+function exitSelectionMode(merchantId: string) {
+  selectionMode.value[merchantId] = false
+  selectedOrders.value[merchantId] = []
+}
+
+// 处理订单点击
+async function handleOrderClick(merchantId: string, orderId: string, status: SettlementStatus) {
+  // 已结订单点击显示消账记录
+  if (status === SettlementStatus.SETTLED) {
+    await showWriteOffRecords(orderId)
+    return
+  }
+  
+  // 只有在选择模式下且订单状态为未结或逾期时才能选择
+  if (!selectionMode.value[merchantId]) return
+  if (status !== SettlementStatus.UNSETTLED && status !== SettlementStatus.OVERDUE) return
+  
+  const selected = selectedOrders.value[merchantId] || []
+  const index = selected.indexOf(orderId)
+  
+  if (index > -1) {
+    // 取消选择
+    selected.splice(index, 1)
+  } else {
+    // 添加选择
+    selected.push(orderId)
+  }
+  
+  selectedOrders.value[merchantId] = selected
+}
+
+// 显示消账记录
+async function showWriteOffRecords(settlementId: string) {
+  try {
+    uni.showLoading({ title: '加载中...' })
+    await financeStore.fetchWriteOffList(settlementId)
+    currentWriteOffRecords.value = financeStore.writeOffList
+    writeOffRecordVisible.value = true
+  } catch (error) {
+    uni.showToast({ title: '获取消账记录失败', icon: 'none' })
+  } finally {
+    uni.hideLoading()
+  }
+}
+
+// 全选/取消全选
+function toggleSelectAll(merchantId: string) {
+  const group = groupedByMerchant.value.find(g => g.merchantId === merchantId)
+  if (!group) return
+  
+  const selectableOrders = group.settlements.filter(
+    item => item.status === SettlementStatus.UNSETTLED || item.status === SettlementStatus.OVERDUE
+  )
+  
+  if (isAllSelected.value(merchantId)) {
+    // 取消全选
+    selectedOrders.value[merchantId] = []
+  } else {
+    // 全选
+    selectedOrders.value[merchantId] = selectableOrders.map(item => item.id)
+  }
+}
+
+// 批量消账
+function handleBatchWriteOff(merchantId: string) {
+  const selectedIds = selectedOrders.value[merchantId] || []
+  if (selectedIds.length === 0) return
+  
+  const group = groupedByMerchant.value.find(g => g.merchantId === merchantId)
+  if (!group) return
+  
+  // 获取选中的订单
+  const selectedSettlements = group.settlements.filter(item => selectedIds.includes(item.id))
+  
+  currentSettlement.value = null
+  currentMerchantSettlements.value = selectedSettlements
+  isBatchMode.value = true
+  writeOffVisible.value = true
+  
+  // 退出选择模式
+  exitSelectionMode(merchantId)
+}
+
+// 打开商户批量消账弹窗（保留原有功能作为备用）
 function handleOpenBatchWriteOff(merchantId: string) {
   const group = groupedByMerchant.value.find(g => g.merchantId === merchantId)
   if (!group)
@@ -249,7 +382,7 @@ function getDaysUntilDue(dateStr: string) {
           <text class="i-carbon-warning-filled alert-icon" />
           <text class="alert-title">近期到期提醒</text>
         </view>
-        <scroll-view scroll-x class="due-list" show-scrollbar="false">
+        <scroll-view scroll-x class="due-list" :show-scrollbar="false">
           <view
             v-for="item in financeStore.dueOrders"
             :key="item.id"
@@ -305,16 +438,61 @@ function getDaysUntilDue(dateStr: string) {
             
             <!-- 头部批量操作 -->
             <view v-if="currentTab === 0" class="header-action">
-              <view class="batch-btn-small" @click.stop="handleOpenBatchWriteOff(group.merchantId)">
+              <!-- 非选择模式 -->
+              <view v-if="!selectionMode[group.merchantId]" class="batch-btn-small" @click.stop="enterSelectionMode(group.merchantId)">
                 <text class="i-carbon-checkmark-outline" />
-                <text>批量消账</text>
+                <text>消账</text>
               </view>
+              
+              <!-- 选择模式 -->
+              <template v-else>
+                <view class="selection-controls">
+                  <view class="select-all-btn" @click.stop="toggleSelectAll(group.merchantId)">
+                    <text class="i-carbon-checkmark-filled" v-if="isAllSelected(group.merchantId)" />
+                    <text class="i-carbon-checkmark-outline" v-else />
+                    <text>全选</text>
+                  </view>
+                  <view class="selected-info">
+                    <text>已选 {{ selectedCount(group.merchantId) }} 单</text>
+                    <text class="amount">¥{{ selectedAmount(group.merchantId).toFixed(2) }}</text>
+                  </view>
+                  <view
+                    v-if="selectedCount(group.merchantId) > 0"
+                    class="batch-btn-small active"
+                    @click.stop="handleBatchWriteOff(group.merchantId)"
+                  >
+                    <text class="i-carbon-checkmark-outline" />
+                    <text>进行消账({{ selectedCount(group.merchantId) }})</text>
+                  </view>
+                  <view v-else class="cancel-btn" @click.stop="exitSelectionMode(group.merchantId)">
+                    <text>取消</text>
+                  </view>
+                </view>
+              </template>
             </view>
           </view>
 
           <!-- 订单列表 -->
           <view class="order-list">
-            <view v-for="item in group.settlements" :key="item.id" class="order-item">
+            <view
+              v-for="item in group.settlements"
+              :key="item.id"
+              class="order-item"
+              :class="{
+                'selection-mode': selectionMode[group.merchantId],
+                'selected': selectedOrders[group.merchantId]?.includes(item.id),
+                'disabled': item.status !== SettlementStatus.UNSETTLED && item.status !== SettlementStatus.OVERDUE
+              }"
+              @click="handleOrderClick(group.merchantId, item.id, item.status)"
+            >
+              <!-- 选择框 -->
+              <view v-if="selectionMode[group.merchantId]" class="checkbox">
+                <text class="i-carbon-checkmark-filled" v-if="selectedOrders[group.merchantId]?.includes(item.id)" />
+                <text class="i-carbon-checkmark-outline" v-else />
+              </view>
+              
+              <!-- 订单内容 -->
+              <view class="order-content">
                 <!-- 订单头部 -->
                 <view class="order-header">
                   <view class="order-no-wrapper">
@@ -341,16 +519,6 @@ function getDaysUntilDue(dateStr: string) {
                     <text class="info-value amount">¥{{ item.amount.toFixed(2) }}</text>
                   </view>
                 </view>
-
-              <!-- 订单操作 -->
-              <view
-                v-if="item.status === SettlementStatus.UNSETTLED || item.status === SettlementStatus.OVERDUE"
-                class="order-footer"
-              >
-                <view class="action-btn" @click="handleOpenWriteOff(item)">
-                  <text class="i-carbon-document-tasks" />
-                  <text>申请消账</text>
-                </view>
               </view>
             </view>
           </view>
@@ -367,6 +535,12 @@ function getDaysUntilDue(dateStr: string) {
       :default-amount="currentWriteOffAmount"
       @submit="handleSubmitWriteOff"
     />
+    
+    <!-- 消账记录弹窗 -->
+    <WriteOffRecord
+      v-model:visible="writeOffRecordVisible"
+      :write-off-records="currentWriteOffRecords"
+    />
   </view>
 </template>
 
@@ -610,6 +784,54 @@ $bg-card: #ffffff;
       .i-carbon-checkmark-outline {
         font-size: 28rpx;
       }
+      
+      &.active {
+        background: $primary;
+        color: white;
+      }
+    }
+    
+    .selection-controls {
+      display: flex;
+      flex-direction: column;
+      gap: 12rpx;
+      align-items: flex-end;
+      
+      .select-all-btn {
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        padding: 8rpx 16rpx;
+        background: rgba($primary, 0.05);
+        border-radius: 20rpx;
+        color: $primary;
+        font-size: 22rpx;
+        
+        .i-carbon-checkmark-outline,
+        .i-carbon-checkmark-filled {
+          font-size: 24rpx;
+        }
+      }
+      
+      .selected-info {
+        text-align: right;
+        font-size: 22rpx;
+        
+        .amount {
+          display: block;
+          font-size: 26rpx;
+          font-weight: 600;
+          color: $danger;
+        }
+      }
+      
+      .cancel-btn {
+        padding: 8rpx 20rpx;
+        background: rgba($text-2, 0.1);
+        border-radius: 20rpx;
+        color: $text-2;
+        font-size: 24rpx;
+      }
     }
   }
 }
@@ -628,6 +850,49 @@ $bg-card: #ffffff;
     border-bottom: none;
   }
   
+  &.selection-mode {
+    display: flex;
+    align-items: flex-start;
+    gap: 20rpx;
+    padding: 24rpx;
+    
+    .checkbox {
+      width: 40rpx;
+      height: 40rpx;
+      border-radius: 50%;
+      border: 2rpx solid #ddd;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 10rpx;
+      flex-shrink: 0;
+      
+      .i-carbon-checkmark-outline {
+        font-size: 24rpx;
+        color: #999;
+      }
+      
+      .i-carbon-checkmark-filled {
+        font-size: 24rpx;
+        color: $primary;
+      }
+    }
+    
+    &.selected .checkbox {
+      background: rgba($primary, 0.1);
+      border-color: $primary;
+    }
+    
+    &.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+    
+    .order-content {
+      flex: 1;
+    }
+  }
+
   // 订单头部
   .order-header {
     display: flex;

src/pages/index/index.vue

@@ -11,7 +11,7 @@ import { useCartStore } from '@/store/cart'
 
 definePage({
   style: {
-    navigationBarTitleText: '首页',
+    navigationBarTitleText: '数字广东',
   },
 })
 

src/pages/login/index.vue

@@ -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>&nbsp;</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,31 +198,94 @@ 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;
+// 客户端类型选择区域
+.client-type-section {
+  margin-bottom: 30rpx;
+  
+  .section-title {
+    font-size: 28rpx;
+    color: #666;
+    margin-bottom: 20rpx;
+    padding-left: 10rpx;
+  }
+  
+  .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;
     }
-  }
     
-  .app-name {
-    font-size: 40rpx;
+    .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;
+    }
+  }
 }
 
 .form {
@@ -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>
+

src/pages/me/loan-application-records.vue

@@ -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>

src/pages/me/loan-application.vue

@@ -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>

src/pages/me/me.vue

@@ -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>

src/pages/order/detail.vue

@@ -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;

src/pages/sort/index.vue

@@ -27,6 +27,25 @@ onLoad((options) => {
   loadCategories()
 })
 
+// 监听全局事件，用于接收从首页传递的分类ID
+onShow(() => {
+  // 监听选中分类事件
+  uni.$on('selectCategory', (categoryId: string) => {
+    if (categoryId && categoryId !== currentCategoryId.value) {
+      currentCategoryId.value = categoryId
+      // 如果分类已加载，直接切换并加载商品
+      if (categoryList.value.length > 0) {
+        loadGoods()
+      }
+    }
+  })
+})
+
+// 页面卸载时移除事件监听
+onUnload(() => {
+  uni.$off('selectCategory')
+})
+
 // 加载分类
 async function loadCategories() {
   try {

src/pagesBank/audit/list.vue

@@ -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>

src/pagesBank/customer/list.vue

@@ -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>

src/pagesBank/dashboard/index.vue

@@ -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>

src/pagesBank/me/index.vue

@@ -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>

src/pagesMerchant/dashboard/index.vue

@@ -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>

src/pagesMerchant/finance/index.vue

@@ -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>

src/pagesMerchant/goods/list.vue

@@ -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>

src/pagesMerchant/me/index.vue

@@ -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>

src/pagesMerchant/order/list.vue

@@ -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>

src/store/user.ts

@@ -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: '测试用户',
-      avatar: 'https://picsum.photos/200/200?random=avatar',
+      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', {
     },
   },
 })
+

src/tabbar/config.ts

@@ -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
+

src/tabbar/store.ts

@@ -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}`,
 })))
 
+// 初始化鼓包
+function initBulge() {
   if (customTabbarEnable && BULGE_ENABLE) {
     if (tabbarList.length % 2) {
-    console.error('有鼓包时 tabbar 数量必须是偶数，否则样式很奇怪！！')
+      console.error('有鼓包时 tabbar 数量必须是偶数')
     }
+    const hasBulge = tabbarList.some(item => item.isBulge)
+    if (!hasBulge) {
       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 }
+

src/typings/mall.ts

@@ -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[] // 底部按钮配置
+}

uno.config.ts

@@ -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',
+  // 动态图标需要在这里配置
+  safelist: [
+    // 基础图标
+    'i-carbon-code', 'i-carbon-home', 'i-carbon-user', 'i-carbon-shopping-cart', 'i-carbon-view-mode-2', 'i-carbon-webhook',
     'i-carbon-restaurant', 'i-carbon-crop', 'i-carbon-ibm-deployable-architecture',
-    'i-carbon-edge-device','i-carbon-ibm-cloud-direct-link-1-dedicated-hosting','i-carbon-face-satisfied'],
+    'i-carbon-edge-device', 'i-carbon-ibm-cloud-direct-link-1-dedicated-hosting', 'i-carbon-face-satisfied', 'i-carbon-document-attachment',
+    // 商家端/银行端 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',