From 60ecd8015d5a359146226ff597f2a51e15437747 Mon Sep 17 00:00:00 2001
From: lzhizhao <790086754@qq.com>
Date: Sun, 2 Nov 2025 00:46:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=93=E7=AE=97=E7=AE=A1=E7=90=863?=
 =?UTF-8?q?=E4=B8=AA=E9=A1=B5=E9=9D=A2=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/full-routers.js            |  53 ++
 src/views/modules/settle/money.vue    | 808 ++++++++++++++++++++++++++
 src/views/modules/settle/unsettle.vue | 594 +++++++++++++++++++
 src/views/modules/settle/wallet.vue   | 738 +++++++++++++++++++++++
 4 files changed, 2193 insertions(+)
 create mode 100644 src/views/modules/settle/money.vue
 create mode 100644 src/views/modules/settle/unsettle.vue
 create mode 100644 src/views/modules/settle/wallet.vue

diff --git a/src/router/full-routers.js b/src/router/full-routers.js
index ac0dbdf..ddc24f7 100644
--- a/src/router/full-routers.js
+++ b/src/router/full-routers.js
@@ -464,6 +464,59 @@ export default {
         }
       ]
     },
+    {
+      menuId: getUUID(),
+      parentId: 0,
+      parentName: null,
+      name: '结算管理',
+      url: 'settle',
+      perms: 'settle',
+      type: 0,
+      elIcon: 'el-icon-office-building',
+      orderNum: 0,
+      open: null,
+      list: [
+        {
+          menuId: getUUID(),
+          parentId: 0,
+          parentName: null,
+          name: '待结算管理',
+          url: 'settle/unsettle',
+          perms: 'settle:unsettle',
+          type: 1,
+          elIcon: 'el-icon-document-checked',
+          orderNum: 0,
+          open: null,
+          list: []
+        },
+        {
+          menuId: getUUID(),
+          parentId: 0,
+          parentName: null,
+          name: '金额管理',
+          url: 'settle/money',
+          perms: 'settle:money',
+          type: 1,
+          elIcon: 'el-icon-coin',
+          orderNum: 0,
+          open: null,
+          list: []
+        },
+        {
+          menuId: getUUID(),
+          parentId: 0,
+          parentName: null,
+          name: '钱包管理',
+          url: 'settle/wallet',
+          perms: 'settle:wallet',
+          type: 1,
+          elIcon: 'el-icon-wallet',
+          orderNum: 0,
+          open: null,
+          list: []
+        }
+      ]
+    },
     {
       menuId: getUUID(),
       parentId: 0,
diff --git a/src/views/modules/settle/money.vue b/src/views/modules/settle/money.vue
new file mode 100644
index 0000000..9962421
--- /dev/null
+++ b/src/views/modules/settle/money.vue
@@ -0,0 +1,808 @@
+<template>
+  <div class="page-container">
+    <!-- 统计数据区域 -->
+    <el-row :gutter="16" class="stats-row">
+      <el-col :span="8">
+        <el-card class="stat-card" shadow="hover">
+          <div class="stat-content">
+            <div class="stat-label">冻结金额</div>
+            <div class="stat-value stat-frozen">
+              ¥ {{ statsInfo.frozenAmount.toFixed(2) }}
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="stat-card" shadow="hover">
+          <div class="stat-content">
+            <div class="stat-label">可用金额</div>
+            <div class="stat-value stat-available">
+              ¥ {{ statsInfo.availableAmount.toFixed(2) }}
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="stat-card" shadow="hover">
+          <div class="stat-content">
+            <div class="stat-label">钱包余额</div>
+            <div class="stat-value stat-balance">
+              ¥ {{ statsInfo.walletBalance.toFixed(2) }}
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 标签页区域 -->
+    <el-card class="tabs-card" shadow="never">
+      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
+        <!-- 收入Tab -->
+        <el-tab-pane label="收入" name="income">
+          <!-- 搜索区域 -->
+          <div class="search-section">
+            <el-form
+              :model="incomeSearchForm"
+              :inline="true"
+              ref="incomeSearchForm"
+              class="search-form"
+              size="small"
+            >
+              <el-form-item label="订单ID" prop="orderId">
+                <el-input
+                  v-model="incomeSearchForm.orderId"
+                  placeholder="请输入订单ID"
+                  clearable
+                  @clear="handleIncomeSearchClear"
+                  style="width: 200px"
+                />
+              </el-form-item>
+              <el-form-item label="订单时间" prop="dateRange">
+                <el-date-picker
+                  v-model="incomeSearchForm.dateRange"
+                  type="daterange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  value-format="yyyy-MM-dd"
+                  style="width: 340px"
+                />
+              </el-form-item>
+              <el-form-item>
+                <el-button
+                  type="primary"
+                  @click="handleIncomeSearch"
+                  icon="el-icon-search"
+                  size="small"
+                >
+                  搜索
+                </el-button>
+                <el-button
+                  @click="handleIncomeReset"
+                  icon="el-icon-refresh"
+                  size="small"
+                >
+                  重置
+                </el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <!-- 表格区域 -->
+          <el-table
+            ref="incomeTable"
+            :data="incomeDataList"
+            border
+            style="width: 100%"
+            v-loading="incomeLoading"
+          >
+            <el-table-column
+              type="index"
+              width="60"
+              align="center"
+              label="序号"
+            />
+            <el-table-column
+              prop="orderId"
+              label="订单ID"
+              align="center"
+              min-width="150"
+            />
+            <el-table-column
+              prop="orderAmount"
+              label="订单金额"
+              align="center"
+              width="130"
+            >
+              <template slot-scope="scope">
+                <span style="font-weight: 600">
+                  ¥{{ scope.row.orderAmount.toFixed(2) }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="orderTime"
+              label="订单时间"
+              align="center"
+              min-width="160"
+            />
+            <el-table-column
+              prop="incomeAmount"
+              label="收入金额"
+              align="center"
+              width="130"
+            >
+              <template slot-scope="scope">
+                <span style="color: #52c41a; font-weight: 600">
+                  + ¥{{ scope.row.incomeAmount.toFixed(2) }}
+                </span>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <!-- 分页 -->
+          <el-pagination
+            @size-change="handleIncomeSizeChange"
+            @current-change="handleIncomeCurrentChange"
+            :current-page="incomePageInfo.pageNumber"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="incomePageInfo.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="incomePageInfo.total"
+            class="pagination-container"
+          />
+        </el-tab-pane>
+
+        <!-- 支出Tab -->
+        <el-tab-pane label="支出" name="expense">
+          <!-- 搜索区域 -->
+          <div class="search-section">
+            <el-form
+              :model="expenseSearchForm"
+              :inline="true"
+              ref="expenseSearchForm"
+              class="search-form"
+              size="small"
+            >
+              <el-form-item label="结算明细ID" prop="settlementId">
+                <el-input
+                  v-model="expenseSearchForm.settlementId"
+                  placeholder="请输入结算明细ID"
+                  clearable
+                  @clear="handleExpenseSearchClear"
+                  style="width: 180px"
+                />
+              </el-form-item>
+              <el-form-item label="清算明细ID" prop="clearingId">
+                <el-input
+                  v-model="expenseSearchForm.clearingId"
+                  placeholder="请输入清算明细ID"
+                  clearable
+                  @clear="handleExpenseSearchClear"
+                  style="width: 180px"
+                />
+              </el-form-item>
+              <el-form-item label="支出对象ID" prop="targetId">
+                <el-input
+                  v-model="expenseSearchForm.targetId"
+                  placeholder="请输入支出对象ID"
+                  clearable
+                  @clear="handleExpenseSearchClear"
+                  style="width: 180px"
+                />
+              </el-form-item>
+              <el-form-item label="支出时间" prop="dateRange">
+                <el-date-picker
+                  v-model="expenseSearchForm.dateRange"
+                  type="daterange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  value-format="yyyy-MM-dd"
+                  style="width: 340px"
+                />
+              </el-form-item>
+              <el-form-item>
+                <el-button
+                  type="primary"
+                  @click="handleExpenseSearch"
+                  icon="el-icon-search"
+                  size="small"
+                >
+                  搜索
+                </el-button>
+                <el-button
+                  @click="handleExpenseReset"
+                  icon="el-icon-refresh"
+                  size="small"
+                >
+                  重置
+                </el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+
+          <!-- 表格区域 -->
+          <el-table
+            ref="expenseTable"
+            :data="expenseDataList"
+            border
+            style="width: 100%"
+            v-loading="expenseLoading"
+          >
+            <el-table-column
+              type="index"
+              width="60"
+              align="center"
+              label="序号"
+            />
+            <el-table-column
+              prop="settlementId"
+              label="结算明细ID"
+              align="center"
+              min-width="140"
+            />
+            <el-table-column
+              prop="clearingId"
+              label="清算明细ID"
+              align="center"
+              min-width="140"
+            />
+            <el-table-column
+              prop="settlementAmount"
+              label="结算金额"
+              align="center"
+              width="130"
+            >
+              <template slot-scope="scope">
+                <span style="color: #ff4d4f; font-weight: 600">
+                  - ¥{{ scope.row.settlementAmount.toFixed(2) }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="settlementTime"
+              label="结算时间"
+              align="center"
+              min-width="160"
+            />
+            <el-table-column
+              prop="targetId"
+              label="支出对象ID"
+              align="center"
+              min-width="120"
+            />
+            <el-table-column
+              prop="targetRole"
+              label="支出对象角色"
+              align="center"
+              width="120"
+            />
+            <el-table-column
+              prop="expenseTime"
+              label="支出时间"
+              align="center"
+              min-width="160"
+            />
+          </el-table>
+
+          <!-- 分页 -->
+          <el-pagination
+            @size-change="handleExpenseSizeChange"
+            @current-change="handleExpenseCurrentChange"
+            :current-page="expensePageInfo.pageNumber"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="expensePageInfo.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="expensePageInfo.total"
+            class="pagination-container"
+          />
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MoneyManagement",
+  data() {
+    return {
+      // 当前激活的标签页
+      activeTab: "income",
+      // 统计信息
+      statsInfo: {
+        frozenAmount: 5280.0,
+        availableAmount: 23450.5,
+        walletBalance: 28730.5
+      },
+      // 收入搜索表单
+      incomeSearchForm: {
+        orderId: "",
+        dateRange: null
+      },
+      // 收入表格数据
+      incomeDataList: [],
+      // 收入分页信息
+      incomePageInfo: {
+        pageNumber: 1,
+        pageSize: 10,
+        total: 0
+      },
+      // 收入加载状态
+      incomeLoading: false,
+      // 支出搜索表单
+      expenseSearchForm: {
+        settlementId: "",
+        clearingId: "",
+        targetId: "",
+        dateRange: null
+      },
+      // 支出表格数据
+      expenseDataList: [],
+      // 支出分页信息
+      expensePageInfo: {
+        pageNumber: 1,
+        pageSize: 10,
+        total: 0
+      },
+      // 支出加载状态
+      expenseLoading: false
+    };
+  },
+  created() {
+    this.fetchStatsInfo();
+    this.fetchIncomeData();
+  },
+  methods: {
+    // 获取统计信息
+    async fetchStatsInfo() {
+      try {
+        // TODO: 调用实际的API接口获取统计信息
+        // const res = await this.$api.mer_admin.getMoneyStats();
+        // this.statsInfo = res.data.data;
+
+        // 模拟数据
+        this.statsInfo = {
+          frozenAmount: 5280.0,
+          availableAmount: 23450.5,
+          walletBalance: 28730.5
+        };
+      } catch (error) {
+        console.error("获取统计信息失败:", error);
+        this.$message.error("获取统计信息失败");
+      }
+    },
+
+    // 标签页切换
+    handleTabClick(tab) {
+      if (tab.name === "income") {
+        this.fetchIncomeData();
+      } else if (tab.name === "expense") {
+        this.fetchExpenseData();
+      }
+    },
+
+    // ==================== 收入相关方法 ====================
+
+    // 获取收入数据
+    fetchIncomeData() {
+      this.incomeLoading = true;
+      const marketId = this.marketId;
+      if (!marketId) {
+        this.$message.error("获取市场ID失败，请重新登录");
+        this.$router.push("/login");
+        return;
+      }
+
+      const params = {
+        pageNumber: this.incomePageInfo.pageNumber,
+        pageSize: this.incomePageInfo.pageSize,
+        marketId,
+        ...this.buildIncomeSearchParams()
+      };
+
+      // TODO: 调用实际的API接口获取收入列表
+      // this.$api.mer_admin
+      //   .getIncomeList(params)
+      //   .then(res => {
+      //     if (res.data && res.data.data) {
+      //       this.incomeDataList = res.data.data.data || [];
+      //       this.incomePageInfo.total = Number(res.data.data.total) || 0;
+      //     }
+      //   })
+      //   .catch(err => {
+      //     console.error("获取收入数据失败:", err);
+      //     this.$message.error("获取收入数据失败");
+      //   })
+      //   .finally(() => {
+      //     this.incomeLoading = false;
+      //   });
+
+      // 模拟数据
+      setTimeout(() => {
+        const mockData = [
+          {
+            orderId: "ORD202501310001",
+            orderAmount: 1280.0,
+            orderTime: "2025-01-31 10:30:25",
+            incomeAmount: 1280.0
+          },
+          {
+            orderId: "ORD202501310002",
+            orderAmount: 850.5,
+            orderTime: "2025-01-31 11:15:42",
+            incomeAmount: 850.5
+          },
+          {
+            orderId: "ORD202501310003",
+            orderAmount: 2100.0,
+            orderTime: "2025-01-31 14:20:18",
+            incomeAmount: 2100.0
+          },
+          {
+            orderId: "ORD202501300001",
+            orderAmount: 560.0,
+            orderTime: "2025-01-30 09:45:33",
+            incomeAmount: 560.0
+          },
+          {
+            orderId: "ORD202501300002",
+            orderAmount: 1450.0,
+            orderTime: "2025-01-30 16:28:56",
+            incomeAmount: 1450.0
+          }
+        ];
+
+        // 应用搜索过滤
+        let filteredData = mockData;
+        const searchParams = this.buildIncomeSearchParams();
+        if (searchParams.orderId) {
+          filteredData = filteredData.filter(item =>
+            item.orderId.includes(searchParams.orderId)
+          );
+        }
+
+        this.incomeDataList = filteredData;
+        this.incomePageInfo.total = 127; // 模拟总数
+        this.incomeLoading = false;
+      }, 500);
+    },
+
+    // 构建收入搜索参数
+    buildIncomeSearchParams() {
+      const params = {};
+      if (this.incomeSearchForm.orderId) {
+        params.orderId = this.incomeSearchForm.orderId;
+      }
+      if (
+        this.incomeSearchForm.dateRange &&
+        this.incomeSearchForm.dateRange.length === 2
+      ) {
+        params.startDate = this.incomeSearchForm.dateRange[0];
+        params.endDate = this.incomeSearchForm.dateRange[1];
+      }
+      return params;
+    },
+
+    // 收入搜索
+    handleIncomeSearch() {
+      this.incomePageInfo.pageNumber = 1;
+      this.fetchIncomeData();
+    },
+
+    // 收入清除搜索
+    handleIncomeSearchClear() {
+      this.handleIncomeSearch();
+    },
+
+    // 收入重置
+    handleIncomeReset() {
+      this.incomeSearchForm = {
+        orderId: "",
+        dateRange: null
+      };
+      this.incomePageInfo.pageNumber = 1;
+      this.fetchIncomeData();
+    },
+
+    // 收入分页大小改变
+    handleIncomeSizeChange(val) {
+      this.incomePageInfo.pageSize = val;
+      this.incomePageInfo.pageNumber = 1;
+      this.fetchIncomeData();
+    },
+
+    // 收入当前页改变
+    handleIncomeCurrentChange(val) {
+      this.incomePageInfo.pageNumber = val;
+      this.fetchIncomeData();
+    },
+
+    // ==================== 支出相关方法 ====================
+
+    // 获取支出数据
+    fetchExpenseData() {
+      this.expenseLoading = true;
+      const marketId = this.marketId;
+      if (!marketId) {
+        this.$message.error("获取市场ID失败，请重新登录");
+        this.$router.push("/login");
+        return;
+      }
+
+      const params = {
+        pageNumber: this.expensePageInfo.pageNumber,
+        pageSize: this.expensePageInfo.pageSize,
+        marketId,
+        ...this.buildExpenseSearchParams()
+      };
+
+      // TODO: 调用实际的API接口获取支出列表
+      // this.$api.mer_admin
+      //   .getExpenseList(params)
+      //   .then(res => {
+      //     if (res.data && res.data.data) {
+      //       this.expenseDataList = res.data.data.data || [];
+      //       this.expensePageInfo.total = Number(res.data.data.total) || 0;
+      //     }
+      //   })
+      //   .catch(err => {
+      //     console.error("获取支出数据失败:", err);
+      //     this.$message.error("获取支出数据失败");
+      //   })
+      //   .finally(() => {
+      //     this.expenseLoading = false;
+      //   });
+
+      // 模拟数据
+      setTimeout(() => {
+        const mockData = [
+          {
+            settlementId: "SET202501310001",
+            clearingId: "CLR202501310001",
+            settlementAmount: 320.0,
+            settlementTime: "2025-01-31 15:30:20",
+            targetId: "SUP100256",
+            targetRole: "供应商",
+            expenseTime: "2025-01-31 15:30:25"
+          },
+          {
+            settlementId: "SET202501310002",
+            clearingId: "CLR202501310002",
+            settlementAmount: 580.5,
+            settlementTime: "2025-01-31 16:15:35",
+            targetId: "DRV100128",
+            targetRole: "配送员",
+            expenseTime: "2025-01-31 16:15:40"
+          },
+          {
+            settlementId: "SET202501310003",
+            clearingId: "CLR202501310003",
+            settlementAmount: 1200.0,
+            settlementTime: "2025-01-31 17:20:18",
+            targetId: "SUP100328",
+            targetRole: "供应商",
+            expenseTime: "2025-01-31 17:20:22"
+          },
+          {
+            settlementId: "SET202501300001",
+            clearingId: "CLR202501300001",
+            settlementAmount: 450.0,
+            settlementTime: "2025-01-30 10:45:33",
+            targetId: "PLT100045",
+            targetRole: "平台",
+            expenseTime: "2025-01-30 10:45:38"
+          },
+          {
+            settlementId: "SET202501300002",
+            clearingId: "CLR202501300002",
+            settlementAmount: 280.0,
+            settlementTime: "2025-01-30 14:28:56",
+            targetId: "DRV100089",
+            targetRole: "配送员",
+            expenseTime: "2025-01-30 14:29:00"
+          }
+        ];
+
+        // 应用搜索过滤
+        let filteredData = mockData;
+        const searchParams = this.buildExpenseSearchParams();
+        if (searchParams.settlementId) {
+          filteredData = filteredData.filter(item =>
+            item.settlementId.includes(searchParams.settlementId)
+          );
+        }
+        if (searchParams.clearingId) {
+          filteredData = filteredData.filter(item =>
+            item.clearingId.includes(searchParams.clearingId)
+          );
+        }
+        if (searchParams.targetId) {
+          filteredData = filteredData.filter(item =>
+            item.targetId.includes(searchParams.targetId)
+          );
+        }
+
+        this.expenseDataList = filteredData;
+        this.expensePageInfo.total = 85; // 模拟总数
+        this.expenseLoading = false;
+      }, 500);
+    },
+
+    // 构建支出搜索参数
+    buildExpenseSearchParams() {
+      const params = {};
+      if (this.expenseSearchForm.settlementId) {
+        params.settlementId = this.expenseSearchForm.settlementId;
+      }
+      if (this.expenseSearchForm.clearingId) {
+        params.clearingId = this.expenseSearchForm.clearingId;
+      }
+      if (this.expenseSearchForm.targetId) {
+        params.targetId = this.expenseSearchForm.targetId;
+      }
+      if (
+        this.expenseSearchForm.dateRange &&
+        this.expenseSearchForm.dateRange.length === 2
+      ) {
+        params.startDate = this.expenseSearchForm.dateRange[0];
+        params.endDate = this.expenseSearchForm.dateRange[1];
+      }
+      return params;
+    },
+
+    // 支出搜索
+    handleExpenseSearch() {
+      this.expensePageInfo.pageNumber = 1;
+      this.fetchExpenseData();
+    },
+
+    // 支出清除搜索
+    handleExpenseSearchClear() {
+      this.handleExpenseSearch();
+    },
+
+    // 支出重置
+    handleExpenseReset() {
+      this.expenseSearchForm = {
+        settlementId: "",
+        clearingId: "",
+        targetId: "",
+        dateRange: null
+      };
+      this.expensePageInfo.pageNumber = 1;
+      this.fetchExpenseData();
+    },
+
+    // 支出分页大小改变
+    handleExpenseSizeChange(val) {
+      this.expensePageInfo.pageSize = val;
+      this.expensePageInfo.pageNumber = 1;
+      this.fetchExpenseData();
+    },
+
+    // 支出当前页改变
+    handleExpenseCurrentChange(val) {
+      this.expensePageInfo.pageNumber = val;
+      this.fetchExpenseData();
+    }
+  },
+  computed: {
+    // 获取当前市场的ID
+    marketId() {
+      return this.$store.state.userData.marketId;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+  padding: 0;
+}
+
+// 统计数据区域
+.stats-row {
+  margin-bottom: 16px;
+}
+
+.stat-card {
+  border-radius: 8px;
+  transition: all 0.3s;
+
+  &:hover {
+    transform: translateY(-2px);
+  }
+
+  ::v-deep .el-card__body {
+    padding: 24px;
+  }
+}
+
+.stat-content {
+  text-align: center;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 12px;
+}
+
+.stat-value {
+  font-size: 28px;
+  font-weight: 600;
+
+  &.stat-frozen {
+    color: #fa8c16;
+  }
+
+  &.stat-available {
+    color: #52c41a;
+  }
+
+  &.stat-balance {
+    color: #1890ff;
+  }
+}
+
+// 标签页卡片
+.tabs-card {
+  border-radius: 8px;
+
+  ::v-deep .el-card__body {
+    padding: 0;
+  }
+
+  ::v-deep .el-tabs__header {
+    margin: 0;
+    padding: 0 24px;
+    background: #fafafa;
+  }
+
+  ::v-deep .el-tabs__nav-wrap::after {
+    height: 1px;
+  }
+
+  ::v-deep .el-tabs__item {
+    height: 48px;
+    line-height: 48px;
+    font-size: 15px;
+  }
+
+  ::v-deep .el-tabs__content {
+    padding: 0;
+  }
+}
+
+// 搜索区域
+.search-section {
+  padding: 24px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.search-form .el-form-item {
+  margin-bottom: 0;
+}
+
+// 表格区域
+::v-deep .el-table {
+  margin: 0;
+}
+
+// 分页
+.pagination-container {
+  padding: 20px 24px;
+  text-align: right;
+  border-top: 1px solid #f0f0f0;
+}
+</style>
+
+<style>
+.search-form .el-form-item__label {
+  padding-bottom: 0px !important;
+  font-size: 14px;
+  line-height: 32px;
+}
+</style>
diff --git a/src/views/modules/settle/unsettle.vue b/src/views/modules/settle/unsettle.vue
new file mode 100644
index 0000000..a7db032
--- /dev/null
+++ b/src/views/modules/settle/unsettle.vue
@@ -0,0 +1,594 @@
+<template>
+  <div class="page-container">
+    <!-- 资金概览卡片 -->
+    <el-row :gutter="16" class="info-cards-row">
+      <el-col :span="8">
+        <el-card class="info-card info-card-purple" shadow="hover">
+          <div class="info-card-content">
+            <div class="info-card-label">当前冻结金额</div>
+            <div class="info-card-value">
+              <span>{{ accountInfo.totalAmount.toFixed(2) }}</span>
+              <span class="info-card-unit">元</span>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="info-card info-card-pink" shadow="hover">
+          <div class="info-card-content">
+            <div class="info-card-label">当前可用金额</div>
+            <div class="info-card-value">
+              <span>{{ accountInfo.availableAmount.toFixed(2) }}</span>
+              <span class="info-card-unit">元</span>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="info-card info-card-blue" shadow="hover">
+          <div class="info-card-content">
+            <div class="info-card-label">当前钱包余额</div>
+            <div class="info-card-value">
+              <span>{{ accountInfo.walletBalance.toFixed(2) }}</span>
+              <span class="info-card-unit">元</span>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 搜索区域 -->
+    <el-card class="search-card" shadow="never">
+      <el-form
+        :model="searchForm"
+        :inline="true"
+        ref="searchForm"
+        class="search-form"
+        size="small"
+      >
+        <el-form-item label="待结算明细ID" prop="settlementId">
+          <el-input
+            v-model="searchForm.settlementId"
+            placeholder="请输入待结算明细ID"
+            clearable
+            @clear="handleSearchClear"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="关联清算明细ID" prop="clearingId">
+          <el-input
+            v-model="searchForm.clearingId"
+            placeholder="请输入关联清算明细ID"
+            clearable
+            @clear="handleSearchClear"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="结算目标对象ID" prop="targetId">
+          <el-input
+            v-model="searchForm.targetId"
+            placeholder="请输入结算目标对象ID"
+            clearable
+            @clear="handleSearchClear"
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            @click="handleSearch"
+            icon="el-icon-search"
+            size="small"
+          >
+            查询
+          </el-button>
+          <el-button @click="handleReset" icon="el-icon-refresh" size="small">
+            重置
+          </el-button>
+          <el-button
+            @click="handleRefreshAccount"
+            icon="el-icon-refresh-right"
+            size="small"
+            :loading="refreshLoading"
+          >
+            刷新账户信息
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 表格区域 -->
+    <div class="table-container">
+      <el-table
+        ref="multipleTable"
+        :data="dataList"
+        border
+        style="width: 100%"
+        v-loading="loading"
+      >
+        <el-table-column type="index" width="60" align="center" label="序号" />
+        <el-table-column
+          prop="id"
+          label="待结算明细ID"
+          align="center"
+          min-width="140"
+        />
+        <el-table-column
+          prop="clearingId"
+          label="关联清算明细ID"
+          align="center"
+          min-width="150"
+        />
+        <el-table-column
+          prop="targetId"
+          label="结算目标对象ID"
+          align="center"
+          min-width="140"
+        />
+        <el-table-column
+          prop="targetRole"
+          label="结算目标角色"
+          align="center"
+          width="120"
+        />
+        <el-table-column
+          prop="amount"
+          label="结算金额(元)"
+          align="center"
+          width="130"
+        >
+          <template slot-scope="scope">
+            <span style="color: #f56c6c; font-weight: 600">
+              ¥{{ scope.row.amount.toFixed(2) }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="clearingTime"
+          label="清算时间"
+          align="center"
+          min-width="160"
+        />
+        <el-table-column label="结算状态" align="center" width="100">
+          <template slot-scope="scope">
+            <el-tag
+              v-if="scope.row.status === 'pending'"
+              type="warning"
+              size="small"
+            >
+              未结算
+            </el-tag>
+            <el-tag
+              v-else-if="scope.row.status === 'processing'"
+              type="primary"
+              size="small"
+            >
+              执行中
+            </el-tag>
+            <el-tag v-else type="success" size="small">已完成</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" fixed="right" align="center" width="150">
+          <template slot-scope="scope">
+            <el-button
+              v-if="scope.row.status === 'pending'"
+              size="mini"
+              type="primary"
+              @click="handleSettlement(scope.row, false)"
+            >
+              开始结算
+            </el-button>
+            <el-button
+              v-else-if="scope.row.status === 'processing'"
+              size="mini"
+              type="warning"
+              @click="handleSettlement(scope.row, true)"
+            >
+              重新执行
+            </el-button>
+            <span v-else style="color: #909399">-</span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="pageInfo.pageNumber"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageInfo.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="pageInfo.total"
+        class="pagination-container"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "UnsettleManagement",
+  data() {
+    return {
+      // 账户信息
+      accountInfo: {
+        totalAmount: 0,
+        availableAmount: 0,
+        walletBalance: 0
+      },
+      // 搜索表单
+      searchForm: {
+        settlementId: "",
+        clearingId: "",
+        targetId: ""
+      },
+      // 表格数据
+      dataList: [],
+      // 分页信息
+      pageInfo: {
+        pageNumber: 1,
+        pageSize: 10,
+        total: 0
+      },
+      // 加载状态
+      loading: false,
+      refreshLoading: false
+    };
+  },
+  created() {
+    this.fetchAccountInfo();
+    this.fetchData();
+  },
+  methods: {
+    // 获取账户信息
+    async fetchAccountInfo() {
+      try {
+        // TODO: 调用实际的API接口获取账户信息
+        // const res = await this.$api.mer_admin.getAccountInfo();
+        // this.accountInfo = res.data.data;
+
+        // 模拟数据
+        this.accountInfo = {
+          totalAmount: 8770.5,
+          availableAmount: 6420.25,
+          walletBalance: 15230.75
+        };
+      } catch (error) {
+        console.error("获取账户信息失败:", error);
+        this.$message.error("获取账户信息失败");
+      }
+    },
+
+    // 刷新账户信息
+    async handleRefreshAccount() {
+      this.refreshLoading = true;
+      try {
+        await this.fetchAccountInfo();
+        this.$message.success("刷新成功");
+      } catch (error) {
+        console.error("刷新失败:", error);
+      } finally {
+        this.refreshLoading = false;
+      }
+    },
+
+    // 获取待结算列表数据
+    fetchData() {
+      this.loading = true;
+      const marketId = this.marketId;
+      if (!marketId) {
+        this.$message.error("获取市场ID失败，请重新登录");
+        this.$router.push("/login");
+        return;
+      }
+
+      const params = {
+        pageNumber: this.pageInfo.pageNumber,
+        pageSize: this.pageInfo.pageSize,
+        marketId,
+        ...this.buildSearchParams()
+      };
+
+      // TODO: 调用实际的API接口获取待结算列表
+      // this.$api.mer_admin
+      //   .getUnsettleList(params)
+      //   .then(res => {
+      //     if (res.data && res.data.data) {
+      //       this.dataList = res.data.data.data || [];
+      //       this.pageInfo.total = Number(res.data.data.total) || 0;
+      //     }
+      //   })
+      //   .catch(err => {
+      //     console.error("获取数据失败:", err);
+      //     this.$message.error("获取数据失败");
+      //   })
+      //   .finally(() => {
+      //     this.loading = false;
+      //   });
+
+      // 模拟数据
+      setTimeout(() => {
+        const mockData = [
+          {
+            id: "SET2024010001",
+            clearingId: "CLR2024010001",
+            targetId: "TGT001",
+            targetRole: "商家",
+            amount: 1580.5,
+            clearingTime: "2024-01-15 14:30:25",
+            status: "pending"
+          },
+          {
+            id: "SET2024010002",
+            clearingId: "CLR2024010002",
+            targetId: "TGT002",
+            targetRole: "供应商",
+            amount: 2350.0,
+            clearingTime: "2024-01-15 15:20:10",
+            status: "processing"
+          },
+          {
+            id: "SET2024010003",
+            clearingId: "CLR2024010003",
+            targetId: "TGT003",
+            targetRole: "平台",
+            amount: 890.75,
+            clearingTime: "2024-01-15 16:45:30",
+            status: "completed"
+          },
+          {
+            id: "SET2024010004",
+            clearingId: "CLR2024010004",
+            targetId: "TGT004",
+            targetRole: "商家",
+            amount: 3200.0,
+            clearingTime: "2024-01-16 09:15:40",
+            status: "pending"
+          },
+          {
+            id: "SET2024010005",
+            clearingId: "CLR2024010005",
+            targetId: "TGT005",
+            targetRole: "供应商",
+            amount: 1750.25,
+            clearingTime: "2024-01-16 10:30:55",
+            status: "processing"
+          }
+        ];
+
+        // 应用搜索过滤
+        let filteredData = mockData;
+        const searchParams = this.buildSearchParams();
+        if (searchParams.settlementId) {
+          filteredData = filteredData.filter(item =>
+            item.id.includes(searchParams.settlementId)
+          );
+        }
+        if (searchParams.clearingId) {
+          filteredData = filteredData.filter(item =>
+            item.clearingId.includes(searchParams.clearingId)
+          );
+        }
+        if (searchParams.targetId) {
+          filteredData = filteredData.filter(item =>
+            item.targetId.includes(searchParams.targetId)
+          );
+        }
+
+        this.dataList = filteredData;
+        this.pageInfo.total = filteredData.length;
+        this.loading = false;
+      }, 500);
+    },
+
+    // 构建搜索参数
+    buildSearchParams() {
+      const params = {};
+      if (this.searchForm.settlementId) {
+        params.settlementId = this.searchForm.settlementId;
+      }
+      if (this.searchForm.clearingId) {
+        params.clearingId = this.searchForm.clearingId;
+      }
+      if (this.searchForm.targetId) {
+        params.targetId = this.searchForm.targetId;
+      }
+      return params;
+    },
+
+    // 搜索
+    handleSearch() {
+      this.pageInfo.pageNumber = 1;
+      this.fetchData();
+    },
+
+    // 清除搜索
+    handleSearchClear() {
+      this.handleSearch();
+    },
+
+    // 重置
+    handleReset() {
+      this.searchForm = {
+        settlementId: "",
+        clearingId: "",
+        targetId: ""
+      };
+      this.pageInfo.pageNumber = 1;
+      this.fetchData();
+    },
+
+    // 分页大小改变
+    handleSizeChange(val) {
+      this.pageInfo.pageSize = val;
+      this.pageInfo.pageNumber = 1;
+      this.fetchData();
+    },
+
+    // 当前页改变
+    handleCurrentChange(val) {
+      this.pageInfo.pageNumber = val;
+      this.fetchData();
+    },
+
+    // 处理结算操作
+    handleSettlement(row, isRetry) {
+      const action = isRetry ? "重新执行" : "开始结算";
+      const message = `确认${action}该笔待结算明细吗？\n待结算明细ID: ${
+        row.id
+      }\n结算金额: ¥${row.amount.toFixed(2)}`;
+
+      this.$confirm(message, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          this.executeSettlement(row, isRetry);
+        })
+        .catch(() => {
+          this.$message.info("已取消操作");
+        });
+    },
+
+    // 执行结算
+    async executeSettlement(row, isRetry) {
+      try {
+        this.loading = true;
+
+        // TODO: 调用实际的API接口执行结算
+        // const params = {
+        //   settlementId: row.id,
+        //   isRetry: isRetry
+        // };
+        // await this.$api.mer_admin.executeSettlement(params);
+
+        // 模拟API调用
+        await new Promise(resolve => setTimeout(resolve, 1000));
+
+        // 更新状态为执行中
+        row.status = "processing";
+        this.$message.success("结算任务已提交");
+
+        // 模拟结算完成
+        setTimeout(() => {
+          row.status = "completed";
+          this.$message.success("结算完成");
+          this.fetchAccountInfo(); // 刷新账户信息
+        }, 2000);
+      } catch (error) {
+        console.error("结算失败:", error);
+        this.$message.error("结算失败，请重试");
+      } finally {
+        this.loading = false;
+      }
+    }
+  },
+  computed: {
+    // 获取当前市场的ID
+    marketId() {
+      return this.$store.state.userData.marketId;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+  padding: 0;
+}
+
+// 资金概览卡片
+.info-cards-row {
+  margin-bottom: 16px;
+}
+
+.info-card {
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: -50%;
+    right: -20%;
+    width: 200px;
+    height: 200px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+  }
+
+  &.info-card-purple {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  }
+
+  &.info-card-pink {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  }
+
+  &.info-card-blue {
+    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  }
+
+  ::v-deep .el-card__body {
+    padding: 20px;
+  }
+}
+
+.info-card-content {
+  color: white;
+  position: relative;
+  z-index: 1;
+}
+
+.info-card-label {
+  font-size: 14px;
+  opacity: 0.9;
+  margin-bottom: 8px;
+}
+
+.info-card-value {
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1.2;
+
+  span {
+    display: inline-block;
+  }
+}
+
+.info-card-unit {
+  font-size: 16px;
+  margin-left: 4px;
+}
+
+// 搜索卡片
+.search-card {
+  margin-bottom: 16px;
+}
+
+.search-form .el-form-item {
+  margin-bottom: 0;
+}
+
+// 表格容器
+.table-container {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  text-align: right;
+}
+</style>
+
+<style>
+.search-form .el-form-item__label {
+  padding-bottom: 0px !important;
+  font-size: 14px;
+  line-height: 32px;
+}
+</style>
diff --git a/src/views/modules/settle/wallet.vue b/src/views/modules/settle/wallet.vue
new file mode 100644
index 0000000..3288b41
--- /dev/null
+++ b/src/views/modules/settle/wallet.vue
@@ -0,0 +1,738 @@
+<template>
+  <div class="page-container">
+    <!-- 统计数据区域 -->
+    <el-row :gutter="16" class="stats-row">
+      <el-col :span="12">
+        <el-card class="stat-card stat-card-available" shadow="hover">
+          <div class="stat-content">
+            <div class="stat-label">可用金额</div>
+            <div class="stat-value">
+              ¥ {{ walletInfo.availableAmount.toFixed(2) }}
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card class="stat-card stat-card-balance" shadow="hover">
+          <div class="stat-content">
+            <div class="stat-label">钱包余额</div>
+            <div class="stat-value">
+              ¥ {{ walletInfo.walletBalance.toFixed(2) }}
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 操作按钮区域 -->
+    <el-card class="action-card" shadow="never">
+      <div class="button-group">
+        <el-button type="primary" size="medium" @click="openDepositDialog">
+          提取可用金额到钱包余额
+        </el-button>
+        <el-button size="medium" @click="openWithdrawDialog">
+          提现钱包金额到银行卡
+        </el-button>
+      </div>
+    </el-card>
+
+    <!-- 标签页区域 -->
+    <el-card class="tabs-card" shadow="never">
+      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
+        <!-- 提取到钱包Tab -->
+        <el-tab-pane label="提取到钱包" name="deposit">
+          <el-table
+            ref="depositTable"
+            :data="depositDataList"
+            border
+            style="width: 100%"
+            v-loading="depositLoading"
+          >
+            <el-table-column
+              type="index"
+              width="60"
+              align="center"
+              label="序号"
+            />
+            <el-table-column
+              prop="amount"
+              label="操作金额"
+              align="center"
+              width="150"
+            >
+              <template slot-scope="scope">
+                <span style="color: #52c41a; font-weight: 600">
+                  ¥{{ scope.row.amount.toFixed(2) }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="afterAvailableAmount"
+              label="提取后可用金额余额"
+              align="center"
+              width="180"
+            >
+              <template slot-scope="scope">
+                <span style="font-weight: 600">
+                  ¥{{ scope.row.afterAvailableAmount.toFixed(2) }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="afterWalletBalance"
+              label="提取后钱包余额"
+              align="center"
+              width="160"
+            >
+              <template slot-scope="scope">
+                <span style="font-weight: 600">
+                  ¥{{ scope.row.afterWalletBalance.toFixed(2) }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="time"
+              label="操作时间"
+              align="center"
+              min-width="160"
+            />
+          </el-table>
+
+          <!-- 分页 -->
+          <el-pagination
+            @size-change="handleDepositSizeChange"
+            @current-change="handleDepositCurrentChange"
+            :current-page="depositPageInfo.pageNumber"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="depositPageInfo.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="depositPageInfo.total"
+            class="pagination-container"
+          />
+        </el-tab-pane>
+
+        <!-- 提现到银行卡Tab -->
+        <el-tab-pane label="提现到银行卡" name="withdraw">
+          <el-table
+            ref="withdrawTable"
+            :data="withdrawDataList"
+            border
+            style="width: 100%"
+            v-loading="withdrawLoading"
+          >
+            <el-table-column
+              type="index"
+              width="60"
+              align="center"
+              label="序号"
+            />
+            <el-table-column
+              prop="amount"
+              label="操作金额"
+              align="center"
+              width="150"
+            >
+              <template slot-scope="scope">
+                <span style="color: #ff4d4f; font-weight: 600">
+                  ¥{{ scope.row.amount.toFixed(2) }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="afterWalletBalance"
+              label="提现后钱包余额"
+              align="center"
+              width="160"
+            >
+              <template slot-scope="scope">
+                <span style="font-weight: 600">
+                  ¥{{ scope.row.afterWalletBalance.toFixed(2) }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="time"
+              label="操作时间"
+              align="center"
+              min-width="160"
+            />
+          </el-table>
+
+          <!-- 分页 -->
+          <el-pagination
+            @size-change="handleWithdrawSizeChange"
+            @current-change="handleWithdrawCurrentChange"
+            :current-page="withdrawPageInfo.pageNumber"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="withdrawPageInfo.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="withdrawPageInfo.total"
+            class="pagination-container"
+          />
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+
+    <!-- 提取到钱包弹窗 -->
+    <el-dialog
+      title="提取可用金额到钱包余额"
+      :visible.sync="depositDialogVisible"
+      width="500px"
+      :close-on-click-modal="false"
+    >
+      <el-form
+        ref="depositForm"
+        :model="depositForm"
+        :rules="depositRules"
+        label-width="100px"
+      >
+        <el-form-item label="提取金额" prop="amount">
+          <el-input-number
+            v-model="depositForm.amount"
+            :min="0.01"
+            :max="walletInfo.availableAmount"
+            :precision="2"
+            :step="0.01"
+            controls-position="right"
+            style="width: 100%"
+            placeholder="请输入提取金额"
+          />
+          <div style="margin-top: 8px; font-size: 12px; color: #999">
+            当前可用金额：¥{{ walletInfo.availableAmount.toFixed(2) }}
+          </div>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="depositDialogVisible = false">取消</el-button>
+        <el-button
+          type="primary"
+          @click="handleDepositSubmit"
+          :loading="depositSubmitLoading"
+        >
+          确定
+        </el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 提现到银行卡弹窗 -->
+    <el-dialog
+      title="提现钱包金额到银行卡"
+      :visible.sync="withdrawDialogVisible"
+      width="500px"
+      :close-on-click-modal="false"
+    >
+      <el-form
+        ref="withdrawForm"
+        :model="withdrawForm"
+        :rules="withdrawRules"
+        label-width="100px"
+      >
+        <el-form-item label="提现金额" prop="amount">
+          <el-input-number
+            v-model="withdrawForm.amount"
+            :min="0.01"
+            :max="walletInfo.walletBalance"
+            :precision="2"
+            :step="0.01"
+            controls-position="right"
+            style="width: 100%"
+            placeholder="请输入提现金额"
+          />
+          <div style="margin-top: 8px; font-size: 12px; color: #999">
+            当前钱包余额：¥{{ walletInfo.walletBalance.toFixed(2) }}
+          </div>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="withdrawDialogVisible = false">取消</el-button>
+        <el-button
+          type="primary"
+          @click="handleWithdrawSubmit"
+          :loading="withdrawSubmitLoading"
+        >
+          确定
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WalletManagement",
+  data() {
+    // 自定义验证规则
+    const validateDepositAmount = (rule, value, callback) => {
+      if (!value || value <= 0) {
+        callback(new Error("请输入有效的金额"));
+      } else if (value > this.walletInfo.availableAmount) {
+        callback(new Error("可用金额不足"));
+      } else {
+        callback();
+      }
+    };
+
+    const validateWithdrawAmount = (rule, value, callback) => {
+      if (!value || value <= 0) {
+        callback(new Error("请输入有效的金额"));
+      } else if (value > this.walletInfo.walletBalance) {
+        callback(new Error("钱包余额不足"));
+      } else {
+        callback();
+      }
+    };
+
+    return {
+      // 当前激活的标签页
+      activeTab: "deposit",
+      // 钱包信息
+      walletInfo: {
+        availableAmount: 0,
+        walletBalance: 0
+      },
+      // 提取弹窗
+      depositDialogVisible: false,
+      depositSubmitLoading: false,
+      depositForm: {
+        amount: null
+      },
+      depositRules: {
+        amount: [
+          { required: true, message: "请输入提取金额", trigger: "blur" },
+          { validator: validateDepositAmount, trigger: "blur" }
+        ]
+      },
+      // 提现弹窗
+      withdrawDialogVisible: false,
+      withdrawSubmitLoading: false,
+      withdrawForm: {
+        amount: null
+      },
+      withdrawRules: {
+        amount: [
+          { required: true, message: "请输入提现金额", trigger: "blur" },
+          { validator: validateWithdrawAmount, trigger: "blur" }
+        ]
+      },
+      // 提取记录表格数据
+      depositDataList: [],
+      // 提取记录分页信息
+      depositPageInfo: {
+        pageNumber: 1,
+        pageSize: 10,
+        total: 0
+      },
+      // 提取记录加载状态
+      depositLoading: false,
+      // 提现记录表格数据
+      withdrawDataList: [],
+      // 提现记录分页信息
+      withdrawPageInfo: {
+        pageNumber: 1,
+        pageSize: 10,
+        total: 0
+      },
+      // 提现记录加载状态
+      withdrawLoading: false
+    };
+  },
+  created() {
+    this.fetchWalletInfo();
+    this.fetchDepositData();
+  },
+  methods: {
+    // 获取钱包信息
+    async fetchWalletInfo() {
+      try {
+        // TODO: 调用实际的API接口获取钱包信息
+        // const res = await this.$api.mer_admin.getWalletInfo();
+        // this.walletInfo = res.data.data;
+
+        // 模拟数据
+        this.walletInfo = {
+          availableAmount: 5000.0,
+          walletBalance: 2000.0
+        };
+      } catch (error) {
+        console.error("获取钱包信息失败:", error);
+        this.$message.error("获取钱包信息失败");
+      }
+    },
+
+    // 标签页切换
+    handleTabClick(tab) {
+      if (tab.name === "deposit") {
+        this.fetchDepositData();
+      } else if (tab.name === "withdraw") {
+        this.fetchWithdrawData();
+      }
+    },
+
+    // ==================== 提取到钱包相关方法 ====================
+
+    // 打开提取弹窗
+    openDepositDialog() {
+      this.depositForm.amount = null;
+      this.depositDialogVisible = true;
+      this.$nextTick(() => {
+        if (this.$refs.depositForm) {
+          this.$refs.depositForm.clearValidate();
+        }
+      });
+    },
+
+    // 提交提取
+    handleDepositSubmit() {
+      this.$refs.depositForm.validate(valid => {
+        if (valid) {
+          this.executeDeposit();
+        }
+      });
+    },
+
+    // 执行提取
+    async executeDeposit() {
+      this.depositSubmitLoading = true;
+      try {
+        const amount = this.depositForm.amount;
+
+        // TODO: 调用实际的API接口执行提取
+        // const params = {
+        //   amount: amount
+        // };
+        // await this.$api.mer_admin.depositToWallet(params);
+
+        // 模拟API调用
+        await new Promise(resolve => setTimeout(resolve, 1000));
+
+        // 更新本地钱包信息
+        this.walletInfo.availableAmount -= amount;
+        this.walletInfo.walletBalance += amount;
+
+        this.$message.success("提取成功");
+        this.depositDialogVisible = false;
+
+        // 刷新数据
+        this.fetchWalletInfo();
+        this.fetchDepositData();
+      } catch (error) {
+        console.error("提取失败:", error);
+        this.$message.error("提取失败，请重试");
+      } finally {
+        this.depositSubmitLoading = false;
+      }
+    },
+
+    // 获取提取记录数据
+    fetchDepositData() {
+      this.depositLoading = true;
+      const marketId = this.marketId;
+      if (!marketId) {
+        this.$message.error("获取市场ID失败，请重新登录");
+        this.$router.push("/login");
+        return;
+      }
+
+      const params = {
+        pageNumber: this.depositPageInfo.pageNumber,
+        pageSize: this.depositPageInfo.pageSize,
+        marketId
+      };
+
+      // TODO: 调用实际的API接口获取提取记录列表
+      // this.$api.mer_admin
+      //   .getDepositList(params)
+      //   .then(res => {
+      //     if (res.data && res.data.data) {
+      //       this.depositDataList = res.data.data.data || [];
+      //       this.depositPageInfo.total = Number(res.data.data.total) || 0;
+      //     }
+      //   })
+      //   .catch(err => {
+      //     console.error("获取提取记录失败:", err);
+      //     this.$message.error("获取提取记录失败");
+      //   })
+      //   .finally(() => {
+      //     this.depositLoading = false;
+      //   });
+
+      // 模拟数据
+      setTimeout(() => {
+        const mockData = [
+          {
+            amount: 1000.0,
+            time: "2025-10-30 10:15:42",
+            afterAvailableAmount: 4000.0,
+            afterWalletBalance: 2000.0
+          },
+          {
+            amount: 1500.0,
+            time: "2025-10-29 09:45:33",
+            afterAvailableAmount: 3500.0,
+            afterWalletBalance: 3500.0
+          },
+          {
+            amount: 2000.0,
+            time: "2025-10-28 14:22:18",
+            afterAvailableAmount: 3000.0,
+            afterWalletBalance: 2000.0
+          }
+        ];
+
+        this.depositDataList = mockData;
+        this.depositPageInfo.total = mockData.length;
+        this.depositLoading = false;
+      }, 500);
+    },
+
+    // 提取记录分页大小改变
+    handleDepositSizeChange(val) {
+      this.depositPageInfo.pageSize = val;
+      this.depositPageInfo.pageNumber = 1;
+      this.fetchDepositData();
+    },
+
+    // 提取记录当前页改变
+    handleDepositCurrentChange(val) {
+      this.depositPageInfo.pageNumber = val;
+      this.fetchDepositData();
+    },
+
+    // ==================== 提现到银行卡相关方法 ====================
+
+    // 打开提现弹窗
+    openWithdrawDialog() {
+      this.withdrawForm.amount = null;
+      this.withdrawDialogVisible = true;
+      this.$nextTick(() => {
+        if (this.$refs.withdrawForm) {
+          this.$refs.withdrawForm.clearValidate();
+        }
+      });
+    },
+
+    // 提交提现
+    handleWithdrawSubmit() {
+      this.$refs.withdrawForm.validate(valid => {
+        if (valid) {
+          this.executeWithdraw();
+        }
+      });
+    },
+
+    // 执行提现
+    async executeWithdraw() {
+      this.withdrawSubmitLoading = true;
+      try {
+        const amount = this.withdrawForm.amount;
+
+        // TODO: 调用实际的API接口执行提现
+        // const params = {
+        //   amount: amount
+        // };
+        // await this.$api.mer_admin.withdrawToBank(params);
+
+        // 模拟API调用
+        await new Promise(resolve => setTimeout(resolve, 1000));
+
+        // 更新本地钱包信息
+        this.walletInfo.walletBalance -= amount;
+
+        this.$message.success("提现成功");
+        this.withdrawDialogVisible = false;
+
+        // 刷新数据
+        this.fetchWalletInfo();
+        this.fetchWithdrawData();
+      } catch (error) {
+        console.error("提现失败:", error);
+        this.$message.error("提现失败，请重试");
+      } finally {
+        this.withdrawSubmitLoading = false;
+      }
+    },
+
+    // 获取提现记录数据
+    fetchWithdrawData() {
+      this.withdrawLoading = true;
+      const marketId = this.marketId;
+      if (!marketId) {
+        this.$message.error("获取市场ID失败，请重新登录");
+        this.$router.push("/login");
+        return;
+      }
+
+      const params = {
+        pageNumber: this.withdrawPageInfo.pageNumber,
+        pageSize: this.withdrawPageInfo.pageSize,
+        marketId
+      };
+
+      // TODO: 调用实际的API接口获取提现记录列表
+      // this.$api.mer_admin
+      //   .getWithdrawList(params)
+      //   .then(res => {
+      //     if (res.data && res.data.data) {
+      //       this.withdrawDataList = res.data.data.data || [];
+      //       this.withdrawPageInfo.total = Number(res.data.data.total) || 0;
+      //     }
+      //   })
+      //   .catch(err => {
+      //     console.error("获取提现记录失败:", err);
+      //     this.$message.error("获取提现记录失败");
+      //   })
+      //   .finally(() => {
+      //     this.withdrawLoading = false;
+      //   });
+
+      // 模拟数据
+      setTimeout(() => {
+        const mockData = [
+          {
+            amount: 500.0,
+            time: "2025-10-30 15:30:25",
+            afterWalletBalance: 1500.0
+          },
+          {
+            amount: 800.0,
+            time: "2025-10-29 16:20:10",
+            afterWalletBalance: 1200.0
+          }
+        ];
+
+        this.withdrawDataList = mockData;
+        this.withdrawPageInfo.total = mockData.length;
+        this.withdrawLoading = false;
+      }, 500);
+    },
+
+    // 提现记录分页大小改变
+    handleWithdrawSizeChange(val) {
+      this.withdrawPageInfo.pageSize = val;
+      this.withdrawPageInfo.pageNumber = 1;
+      this.fetchWithdrawData();
+    },
+
+    // 提现记录当前页改变
+    handleWithdrawCurrentChange(val) {
+      this.withdrawPageInfo.pageNumber = val;
+      this.fetchWithdrawData();
+    }
+  },
+  computed: {
+    // 获取当前市场的ID
+    marketId() {
+      return this.$store.state.userData.marketId;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+  padding: 0;
+}
+
+// 统计数据区域
+.stats-row {
+  margin-bottom: 16px;
+}
+
+.stat-card {
+  border-radius: 8px;
+  transition: all 0.3s;
+
+  &:hover {
+    transform: translateY(-2px);
+  }
+
+  ::v-deep .el-card__body {
+    padding: 24px;
+  }
+
+  &.stat-card-available {
+    border-left: 4px solid #52c41a;
+  }
+
+  &.stat-card-balance {
+    border-left: 4px solid #1890ff;
+  }
+}
+
+.stat-content {
+  text-align: center;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 12px;
+}
+
+.stat-value {
+  font-size: 32px;
+  font-weight: 600;
+  color: #1890ff;
+}
+
+// 操作按钮区域
+.action-card {
+  margin-bottom: 16px;
+  border-radius: 8px;
+
+  ::v-deep .el-card__body {
+    padding: 20px 24px;
+  }
+}
+
+.button-group {
+  display: flex;
+  gap: 12px;
+}
+
+// 标签页卡片
+.tabs-card {
+  border-radius: 8px;
+
+  ::v-deep .el-card__body {
+    padding: 0;
+  }
+
+  ::v-deep .el-tabs__header {
+    margin: 0;
+    padding: 0 24px;
+    background: #fafafa;
+  }
+
+  ::v-deep .el-tabs__nav-wrap::after {
+    height: 1px;
+  }
+
+  ::v-deep .el-tabs__item {
+    height: 48px;
+    line-height: 48px;
+    font-size: 15px;
+  }
+
+  ::v-deep .el-tabs__content {
+    padding: 0;
+  }
+}
+
+// 表格区域
+::v-deep .el-table {
+  margin: 0;
+}
+
+// 分页
+.pagination-container {
+  padding: 20px 24px;
+  text-align: right;
+  border-top: 1px solid #f0f0f0;
+}
+
+// 弹窗
+.dialog-footer {
+  text-align: right;
+}
+</style>