From 3be949f95baaeebef21615ab0db82b7dae043217 Mon Sep 17 00:00:00 2001
From: xiayebo <364530740@qq.com>
Date: Sun, 30 Nov 2025 00:21:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mock/index.ts                         |   1 +
 src/mock/loan-application.ts              | 141 +++++
 src/pages.json                            | 150 -----
 src/pages/me/loan-application-records.vue | 654 ++++++++++++++++++++++
 src/pages/me/me.vue                       |   5 +
 src/typings/mall.ts                       |  47 ++
 uno.config.ts                             |   2 +-
 7 files changed, 849 insertions(+), 151 deletions(-)
 create mode 100644 src/mock/loan-application.ts
 delete mode 100644 src/pages.json
 create mode 100644 src/pages/me/loan-application-records.vue

diff --git a/src/mock/index.ts b/src/mock/index.ts
index 34ff8e0..daf1b7a 100644
--- a/src/mock/index.ts
+++ b/src/mock/index.ts
@@ -8,3 +8,4 @@ export * from './finance'
 export * from './member'
 export * from './banner'
 export * from './address'
+export * from './loan-application'
diff --git a/src/mock/loan-application.ts b/src/mock/loan-application.ts
new file mode 100644
index 0000000..c491f2f
--- /dev/null
+++ b/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"
+      }
+    ]
+  }
+]
\ No newline at end of file
diff --git a/src/pages.json b/src/pages.json
deleted file mode 100644
index 1c87b8d..0000000
--- a/src/pages.json
+++ /dev/null
@@ -1,150 +0,0 @@
-{
-  "globalStyle": {
-    "navigationStyle": "default",
-    "navigationBarTitleText": "unibest",
-    "navigationBarBackgroundColor": "#f8f8f8",
-    "navigationBarTextStyle": "black",
-    "backgroundColor": "#FFFFFF"
-  },
-  "easycom": {
-    "autoscan": true,
-    "custom": {
-      "^fg-(.*)": "@/components/fg-$1/fg-$1.vue",
-      "^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)": "z-paging/components/z-paging$1/z-paging$1.vue",
-      "^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue"
-    }
-  },
-  "pages": [
-    // GENERATED BY UNI-PAGES, PLATFORM: H5
-    {
-      "path": "pages/index/index",
-      "type": "home",
-      "style": {
-        "navigationBarTitleText": "首页",
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/finance/credit",
-      "type": "page",
-      "style": {
-        "navigationBarTitleText": "信用额度",
-        "enablePullDownRefresh": true
-      }
-    },
-    {
-      "path": "pages/finance/settlement",
-      "type": "page",
-      "style": {
-        "navigationBarTitleText": "应结账款",
-        "enablePullDownRefresh": true
-      }
-    },
-    {
-      "path": "pages/goods/cart",
-      "type": "page",
-      "style": {
-        "navigationBarTitleText": "购物车"
-      }
-    },
-    {
-      "path": "pages/goods/detail",
-      "type": "page",
-      "style": {
-        "navigationBarTitleText": "商品详情",
-        "navigationBarBackgroundColor": "#ffffff",
-        "navigationBarTextStyle": "black"
-      }
-    },
-    {
-      "path": "pages/login/index",
-      "type": "page",
-      "style": {
-        "navigationBarTitleText": "登录",
-        "navigationBarBackgroundColor": "#ffffff",
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/me/me",
-      "type": "page",
-      "style": {
-        "navigationBarTitleText": "我的",
-        "navigationBarBackgroundColor": "#fff",
-        "navigationBarTextStyle": "black",
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/member/index",
-      "type": "page",
-      "style": {
-        "navigationBarTitleText": "会员中心",
-        "navigationBarBackgroundColor": "#1a1a1a",
-        "navigationBarTextStyle": "white"
-      }
-    },
-    {
-      "path": "pages/order/confirm",
-      "type": "page",
-      "style": {
-        "navigationBarTitleText": "确认订单"
-      }
-    },
-    {
-      "path": "pages/order/detail",
-      "type": "page",
-      "style": {
-        "navigationBarTitleText": "订单详情"
-      }
-    },
-    {
-      "path": "pages/order/list",
-      "type": "page",
-      "style": {
-        "navigationBarTitleText": "我的订单",
-        "enablePullDownRefresh": true
-      }
-    },
-    {
-      "path": "pages/sort/index",
-      "type": "page",
-      "style": {
-        "navigationBarTitleText": "分类",
-        "disableScroll": true,
-        "navigationStyle": "custom"
-      }
-    }
-  ],
-  "subPackages": [],
-  "tabBar": {
-    "custom": true,
-    "color": "#999999",
-    "selectedColor": "#018d71",
-    "backgroundColor": "#F8F8F8",
-    "borderStyle": "black",
-    "height": "50px",
-    "fontSize": "10px",
-    "iconWidth": "24px",
-    "spacing": "3px",
-    "list": [
-      // GENERATED BY UNI-PAGES, PLATFORM: H5
-      {
-        "text": "首页",
-        "pagePath": "pages/index/index"
-      },
-      {
-        "text": "分类",
-        "pagePath": "pages/sort/index"
-      },
-      {
-        "text": "购物车",
-        "pagePath": "pages/goods/cart"
-      },
-      {
-        "text": "我的",
-        "pagePath": "pages/me/me"
-      }
-    ]
-  }
-}
\ No newline at end of file
diff --git a/src/pages/me/loan-application-records.vue b/src/pages/me/loan-application-records.vue
new file mode 100644
index 0000000..8c739a1
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/me/me.vue b/src/pages/me/me.vue
index 7513eaf..50d8de1 100644
--- a/src/pages/me/me.vue
+++ b/src/pages/me/me.vue
@@ -210,6 +210,11 @@ function handleLogout() {
           <text class="label">会员中心</text>
           <text class="i-carbon-chevron-right arrow"></text>
         </view>
+        <view class="cell" @click="navigateTo('/pages/me/loan-application-records')">
+          <text class="i-carbon-document-attachment icon"></text>
+          <text class="label">助贷申请记录</text>
+          <text class="i-carbon-chevron-right arrow"></text>
+        </view>
         <view class="cell">
           <text class="i-carbon-location icon"></text>
           <text class="label">地址管理</text>
diff --git a/src/typings/mall.ts b/src/typings/mall.ts
index fe8f45e..1e63043 100644
--- a/src/typings/mall.ts
+++ b/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[] // 底部按钮配置
+}
diff --git a/uno.config.ts b/uno.config.ts
index 012abff..9f58365 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -73,7 +73,7 @@ export default defineConfig({
   // 动态图标需要在这里配置，或者写在vue页面中注释掉
   safelist: ['i-carbon-code', 'i-carbon-home', 'i-carbon-user','i-carbon-shopping-cart','i-carbon-view-mode-2','i-carbon-webhook',
     'i-carbon-restaurant','i-carbon-crop','i-carbon-ibm-deployable-architecture',
-    'i-carbon-edge-device','i-carbon-ibm-cloud-direct-link-1-dedicated-hosting','i-carbon-face-satisfied'],
+    'i-carbon-edge-device','i-carbon-ibm-cloud-direct-link-1-dedicated-hosting','i-carbon-face-satisfied','i-carbon-document-attachment'],
   rules: [
     [
       'p-safe',