refactor(shop/cabinet-goods): 调整分页大小并优化样式

将默认分页大小从10调整为5，并优化了表格和分页的样式，提升了用户体验。

src/api/common/login.ts

@@ -16,13 +16,13 @@ export type ConfigDTO = {
 
 export type LoginByPasswordDTO = {
   /** 用户名 */
-  username: string;
+  username?: string;
   /**  密码 */
-  password: string;
+  password?: string;
   /** 验证码 */
-  captchaCode: string;
+  captchaCode?: string;
   /** 验证码对应的缓存key */
-  captchaCodeKey: string;
+  captchaCodeKey?: string;
   /** 企业微信 */
   corpid: string;
   code: string;

src/api/shop/order.ts

@@ -1,27 +1,78 @@
 import { http } from "@/utils/http";
 
 export interface OrderQuery extends BasePageQuery {
+  /** 订单编号 */
   orderNumber?: string;
+  /** 
+   * 订单状态
+   * @remarks 
+   * 1-待付款 | 2-已付款 | 3-已发货 | 4-已完成 | 5-已取消
+   */
   status?: number;
+  /** 
+   * 支付状态
+   * @remarks 
+   * 1-未支付 | 2-已支付 | 3-退款中 | 4-已退款
+   */
   payStatus?: number;
+  /** 订单开始时间（查询范围） */
   startTime?: string;
+  /** 订单结束时间（查询范围） */
   endTime?: string;
+  /** 支付时间（精确查询） */
+  payTime?: string;
+  /** 
+ * 支付方式
+ * @remarks 
+ * wechat-微信支付 | balance-余额支付
+ */
+  paymentMethod?: string;
 }
 
 export interface OrderDTO {
+  /** 订单唯一ID */
   orderId: number;
+  /** ucid */
   ucid?: string;
+  /** openid */
   openid?: string;
+  /** 支付网关交易id */
   tradeId?: string;
+  /** 手机号码 */
   mobile?: string;
+  /** 企业微信用户ID或汇邦云用户ID */
   userid?: string;
+  /** 用户姓名 */
   name?: string;
+  /** 
+   * 是否内部用户
+   * @remarks 
+   * 0-否 | 1-汇邦云用户 | 2-企业微信用户
+   */
   isInternal?: number;
+  /** 业务系统订单ID（对接外部系统） */
   bizOrderId?: string;
+  /** 订单总金额 */
   totalAmount: number;
+  /** 
+   * 订单状态
+   * @remarks 
+   * 1-待付款 | 2-已付款 | 3-已发货 | 4-已完成 | 5-已取消
+   */
   status: number;
+  /** 
+   * 支付状态
+   * @remarks 
+   * 1-未支付 | 2-已支付 | 3-退款中 | 4-已退款
+   */
   payStatus: number;
+  /** 
+   * 支付方式
+   * @remarks 
+   * wechat-微信支付 | balance-余额支付
+   */
   paymentMethod?: string;
+  /** 支付时间 */
   payTime?: string;
 }
 
@@ -30,8 +81,22 @@ export const getOrderListApi = (params?: OrderQuery) => {
     params: {
       ...params,
       // 处理时间范围参数格式
-      startTime: params?.startTime ? new Date(params.startTime).toISOString() : undefined,
+      startTime: params?.startTime ? params.startTime : undefined,
-      endTime: params?.endTime ? new Date(params.endTime).toISOString() : undefined
+      endTime: params?.endTime ? params.endTime : undefined,
+      payTime: params?.payTime ? params.payTime : undefined
+    }
+  });
+};
+
+/** 批量导出订单 */
+export const exportOrderExcelApi = (params: OrderQuery, fileName: string) => {
+  return http.download("/shop/order/excel", fileName, {
+    params: {
+      ...params,
+      // 处理时间范围参数格式
+      startTime: params?.startTime ? params.startTime : undefined,
+      endTime: params?.endTime ? params.endTime : undefined,
+      payTime: params?.payTime ? params.payTime : undefined
     }
   });
 };

src/layout/components/navbar.vue

@@ -37,9 +37,9 @@ const {
       <!-- 二维码 -->
       <QrCodeHover />
       <!-- 菜单搜索 -->
-      <Search />
+      <!-- <Search /> -->
       <!-- 通知 -->
-      <Notice id="header-notice" />
+      <!-- <Notice id="header-notice" /> -->
       <!-- 退出登录 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover select-none">
@@ -61,9 +61,9 @@ const {
           </el-dropdown-menu>
         </template>
       </el-dropdown>
-      <span class="set-icon navbar-bg-hover" title="打开项目配置" @click="onPanel">
+      <!-- <span class="set-icon navbar-bg-hover" title="打开项目配置" @click="onPanel">
         <IconifyIconOffline :icon="Setting" />
-      </span>
+      </span> -->
     </div>
   </div>
 </template>

src/layout/components/sidebar/horizontal.vue

@@ -47,9 +47,9 @@ nextTick(() => {
       <!-- 二维码 -->
       <QrCodeHover />
       <!-- 菜单搜索 -->
-      <Search />
+      <!-- <Search /> -->
       <!-- 通知 -->
-      <Notice id="header-notice" />
+      <!-- <Notice id="header-notice" /> -->
       <!-- 退出登录 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover">
@@ -65,9 +65,9 @@ nextTick(() => {
           </el-dropdown-menu>
         </template>
       </el-dropdown>
-      <span class="set-icon navbar-bg-hover" title="打开项目配置" @click="onPanel">
+      <!-- <span class="set-icon navbar-bg-hover" title="打开项目配置" @click="onPanel">
         <IconifyIconOffline :icon="Setting" />
-      </span>
+      </span> -->
     </div>
   </div>
 </template>

src/layout/components/sidebar/mixNav.vue

@@ -76,9 +76,9 @@ watch(
       <!-- 二维码 -->
       <QrCodeHover />
       <!-- 菜单搜索 -->
-      <Search />
+      <!-- <Search /> -->
       <!-- 通知 -->
-      <Notice id="header-notice" />
+      <!-- <Notice id="header-notice" /> -->
       <!-- 退出登录 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link navbar-bg-hover select-none">
@@ -94,9 +94,9 @@ watch(
           </el-dropdown-menu>
         </template>
       </el-dropdown>
-      <span class="set-icon navbar-bg-hover" title="打开项目配置" @click="onPanel">
+      <!-- <span class="set-icon navbar-bg-hover" title="打开项目配置" @click="onPanel">
         <IconifyIconOffline :icon="Setting" />
-      </span>
+      </span> -->
     </div>
   </div>
 </template>

src/router/index.ts

@@ -1,7 +1,7 @@
 // import "@/utils/sso";
 import { getConfig } from "@/config";
 import NProgress from "@/utils/progress";
-import { sessionKey } from "@/utils/auth";
+import { sessionKey, setTokenFromBackend } from "@/utils/auth";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
 import { usePermissionStoreHook } from "@/store/modules/permission";
 import {
@@ -26,6 +26,9 @@ import { isUrl, openLink, storageSession, isAllEmpty } from "@pureadmin/utils";
 
 import remainingRouter from "./modules/remaining";
 import { TokenDTO } from "@/api/common/login";
+import { useWxStore, useWxStoreOutside } from "@/store/modules/wx";
+import * as LoginAPI from "@/api/common/login";
+import { message } from "@/utils/message";
 
 /** 自动导入全部静态路由，无需再手动引入！匹配 src/router/modules 目录（任何嵌套级别）中具有 .ts 扩展名的所有文件，除了 remaining.ts 文件
  * 如何匹配所有文件请看：https://github.com/mrmlnc/fast-glob#basic-syntax
@@ -101,7 +104,7 @@ const whiteList = ["/login"];
 
 const { VITE_HIDE_HOME } = import.meta.env;
 
-router.beforeEach((to: ToRouteType, _from, next) => {
+router.beforeEach(async (to: ToRouteType, _from, next) => {
   if (to.meta?.keepAlive) {
     handleAliveRoute(to, "add");
     // 页面整体刷新和点击标签页刷新
@@ -109,6 +112,30 @@ router.beforeEach((to: ToRouteType, _from, next) => {
       handleAliveRoute(to);
     }
   }
+
+  const wxStore = useWxStoreOutside();
+  if (!wxStore.isInit) {
+    wxStore.initWx();
+    const urlParams = new URLSearchParams(window.location.search);
+    console.log('urlParams', urlParams);
+    const corpid = urlParams.get('corpid') || undefined;
+    const code = urlParams.get('code') || undefined;
+    const state = urlParams.get('state') || undefined;
+    if (code && corpid) {
+      wxStore.handleWxCallback({ corpid, code, state });
+      const { data } = await LoginAPI.loginByPassword({
+        corpid,
+        code,
+        state
+      });
+      // 登录成功后 将token存储到sessionStorage中
+      setTokenFromBackend(data);
+      // 获取后端路由
+      await initRouter();
+      next({ path: getTopMenu(true).path });
+    }
+  }
+
   const userInfo = storageSession().getItem<TokenDTO>(sessionKey)?.currentUser;
   NProgress.start();
   const externalLink = isUrl(to?.name as string);

src/store/modules/wx.ts

@@ -13,12 +13,19 @@ export const useWxStore = defineStore("wx", () => {
   const state = ref<string>("")
   // 用户 userid
   const userid = ref<string>("")
+  // 初始化
+  const isInit = ref<boolean>(false);
 
   // 设置 userid
   const setUserid = (id: string) => {
     userid.value = id
   }
 
+  const initWx = () => {
+    if (isInit.value) return;
+    isInit.value = true;
+  }
+
   const handleWxCallback = async (params: { corpid: string; code: string; state: string }) => {
     console.log('handleWxCallback:', params)
     if (params.code && params.corpid) {
@@ -42,7 +49,7 @@ export const useWxStore = defineStore("wx", () => {
     }
   }
 
-  return { corpid, code, state, userid, setUserid, handleWxCallback }
+  return { corpid, code, state, userid, isInit, setUserid, handleWxCallback, initWx }
 })
 
 /**

src/views/login/index.vue

@@ -194,9 +194,9 @@ onBeforeMount(async () => {
 onMounted(() => {
   window.document.addEventListener("keypress", onkeypress);
   // 临时登录
-  if (wxStore.code && wxStore.corpid) {
+  /* if (wxStore.code && wxStore.corpid) {
     onLogin(ruleFormRef.value);
-  }
+  } */
 });
 
 onBeforeUnmount(() => {

src/views/shop/cabinet-goods/cabinet-goods-config-modal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { getGoodsListApi, type GoodsDTO } from "@/api/shop/goods";
 import { configureGoodsCellsStock } from "@/api/cabinet/cabinet-cell";
@@ -76,6 +76,17 @@ const handleConfigure = async (row: GoodsDTO) => {
   }
 };
 
+watch(
+  () => props.cellId,
+  () => {
+    getList();
+  }
+);
+
+onMounted(() => {
+  getList();
+})
+
 defineExpose({ getList });
 </script>
 

src/views/shop/cabinet-goods/index.vue

@@ -28,7 +28,7 @@ const searchFormParams = ref({
 });
 
 const pagination = ref({
-  pageSize: 10,
+  pageSize: 5,
   currentPage: 1,
   total: 0
 });
@@ -191,89 +191,128 @@ const handleClearGoods = async (row: CabinetCellDTO) => {
 </script>
 
 <template>
-  <div class="main">
+  <div class="main flex">
-    <el-form ref="formRef" :inline="true" :model="searchFormParams"
+    <!-- 左侧柜机列表 -->
-      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
+    <div class="w-[200px] pr-4 border-r h-full left-list">
-      <el-form-item label="柜机：" prop="cabinetId">
+      <div class="text-lg font-bold mb-4 px-2">柜机列表</div>
-        <el-select v-model.number="searchFormParams.cabinetId" placeholder="请选择柜机" clearable class="!w-[200px]">
+      <div class="h-[calc(100vh-180px)] overflow-y-auto">
-          <el-option v-for="cabinet in cabinets" :key="cabinet.cabinetId" :label="cabinet.cabinetName"
+        <div class="cabinet-list">
-            :value="cabinet.cabinetId" />
+          <div v-for="cabinet in cabinets" :key="cabinet.cabinetId"
-        </el-select>
+            class="cabinet-item p-3 mb-2 cursor-pointer rounded hover:bg-gray-100 transition-colors"
-      </el-form-item>
+            :class="{ 'bg-blue-50': searchFormParams.cabinetId === cabinet.cabinetId }"
-      <el-form-item label="单元格号：" prop="cellNo">
+            @click="searchFormParams.cabinetId = cabinet.cabinetId; onSearch()">
-        <el-input v-model.number="searchFormParams.cellNo" placeholder="请输入单元格号" clearable class="!w-[180px]" />
+            {{ cabinet.cabinetName }}
-      </el-form-item>
+          </div>
-      <el-form-item label="单元格类型：" prop="cellType">
+        </div>
-        <el-select v-model="searchFormParams.cellType" placeholder="请选择类型" clearable class="!w-[180px]">
+      </div>
-          <el-option label="小格" :value="1" />
+    </div>
-          <el-option label="中格" :value="2" />
-          <el-option label="大格" :value="3" />
-          <el-option label="超大格" :value="4" />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" :icon="useRenderIcon(Search)" @click="onSearch">
-          搜索
-        </el-button>
-        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm">
-          重置
-        </el-button>
-      </el-form-item>
-    </el-form>
 
-    <PureTableBar title="柜体单元格管理" @refresh="getList">
+    <!-- 右侧内容 -->
-      <template #buttons>
+    <div class="flex-1 pl-4">
-        <el-button type="danger" :icon="useRenderIcon(Delete)" :disabled="multipleSelection.length === 0"
+      <el-form ref="formRef" :inline="true" :model="searchFormParams" class="search-form bg-bg_color w-full pt-[12px]">
-          @click="handleBulkDelete">
+        <el-form-item label="单元格号：" prop="cellNo">
-          批量删除
+          <el-input v-model.number="searchFormParams.cellNo" placeholder="请输入单元格号" clearable class="!w-[180px]" />
-        </el-button>
+        </el-form-item>
-      </template>
+        <el-form-item label="单元格类型：" prop="cellType">
-      <el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="cellId"
+          <el-select v-model="searchFormParams.cellType" placeholder="请选择类型" clearable class="!w-[180px]">
-        @selection-change="handleSelectionChange" border>
+            <el-option label="小格" :value="1" />
-        <el-table-column type="selection" width="55" />
+            <el-option label="中格" :value="2" />
-        <el-table-column label="商品图片" width="120">
+            <el-option label="大格" :value="3" />
-          <template #default="{ row }">
+            <el-option label="超大格" :value="4" />
-            <el-image :src="row.coverImg" :preview-src-list="[row.coverImg]" :z-index="9999" :preview-teleported="true"
+          </el-select>
-              :hide-on-click-modal="true" fit="cover" class="rounded" width="60" height="60" />
+        </el-form-item>
-          </template>
+        <el-form-item>
-        </el-table-column>
+          <el-button type="primary" :icon="useRenderIcon(Search)" @click="onSearch">
-        <el-table-column label="商品名称">
+            搜索
-          <template #default="{ row }">
+          </el-button>
-            {{ row.goodsId ? row.goodsName : '未配置商品' }}
+          <el-button :icon="useRenderIcon(Refresh)" @click="resetForm">
-          </template>
+            重置
-        </el-table-column>
+          </el-button>
-        <el-table-column label="价格" prop="price" width="120" />
+        </el-form-item>
-        <el-table-column label="库存" prop="stock" width="120" />
+      </el-form>
-        <el-table-column label="单元格号" prop="cellNo" width="120" />
+
-        <el-table-column label="单元格类型" prop="cellType">
+      <div title="柜体单元格管理" @refresh="getList" class="cell-list">
-          <template #default="{ row }">
+        <!-- <template #buttons>
-            {{ switchCellType(row.cellType) }}
+          <el-button type="danger" :icon="useRenderIcon(Delete)" :disabled="multipleSelection.length === 0"
-          </template>
+            @click="handleBulkDelete">
-        </el-table-column>
+            批量删除
-        <el-table-column label="操作" width="150" fixed="right">
+          </el-button>
-          <template #default="{ row }">
+        </template> -->
-            <el-button type="success" link :icon="useRenderIcon(AddFill)" @click="handleConfigure(row)">
+        <el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="cellId"
-              配置商品
+          @selection-change="handleSelectionChange" border>
-            </el-button>
+          <el-table-column type="selection" width="55" />
-            <el-button v-if="row.goodsId" type="warning" link :icon="useRenderIcon(EditPen)"
+          <el-table-column label="商品图片" width="120">
-              @click="handleStockConfig(row)">
+            <template #default="{ row }">
-              配置库存
+              <el-image :src="row.coverImg" :preview-src-list="[row.coverImg]" :z-index="9999"
-            </el-button>
+                :preview-teleported="true" :hide-on-click-modal="true" fit="cover" class="rounded" width="60"
-            <el-button v-if="row.goodsId" type="danger" link :icon="useRenderIcon(Delete)"
+                height="60" />
-              @click="handleClearGoods(row)">
+            </template>
-              下架商品
+          </el-table-column>
-            </el-button>
+          <el-table-column label="商品名称">
-          </template>
+            <template #default="{ row }">
-        </el-table-column>
+              {{ row.goodsId ? row.goodsName : '未配置商品' }}
-      </el-table>
+            </template>
-      <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
+          </el-table-column>
-        :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
+          <el-table-column label="价格" prop="price" width="120" />
-        @size-change="onSizeChange" @current-change="onCurrentChange" />
+          <el-table-column label="库存" prop="stock" width="120" />
-    </PureTableBar>
+          <el-table-column label="单元格号" prop="cellNo" width="120" />
-    <el-dialog v-model="configVisible" title="配置商品" width="80%">
+          <el-table-column label="单元格类型" prop="cellType">
-      <CabinetGoodsConfigModal v-model="configVisible" :cell-id="currentCellId" @refresh="getList" />
+            <template #default="{ row }">
-    </el-dialog>
+              {{ switchCellType(row.cellType) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="150" fixed="right">
+            <template #default="{ row }">
+              <el-button type="success" link :icon="useRenderIcon(AddFill)" @click="handleConfigure(row)">
+                配置商品
+              </el-button>
+              <el-button v-if="row.goodsId" type="warning" link :icon="useRenderIcon(EditPen)"
+                @click="handleStockConfig(row)">
+                配置库存
+              </el-button>
+              <el-button v-if="row.goodsId" type="danger" link :icon="useRenderIcon(Delete)"
+                @click="handleClearGoods(row)">
+                下架商品
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
+          :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
+          @size-change="onSizeChange" @current-change="onCurrentChange" class="pagination" />
+      </div>
+      <el-dialog v-model="configVisible" title="配置商品" width="80%">
+        <CabinetGoodsConfigModal v-model="configVisible" :cell-id="currentCellId" @refresh="getList" />
+      </el-dialog>
+    </div>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.flex {
+  display: flex;
+}
+
+.border-r {
+  border-right: 1px solid #ebeef5;
+}
+
+.left-list {
+  background: #FFFFFF;
+  padding: 15px;
+}
+
+.search-form {
+  padding-left: 10px;
+}
+
+.pagination {
+  margin-top: 10px;
+  background: #FFFFFF;
+  padding: 7px;
+}
+
+.cell-list {
+  margin-top: 10px;
+}
+</style>

src/views/shop/order/index.vue

@@ -2,7 +2,7 @@
 import { ref } from "vue";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { getOrderListApi, type OrderDTO } from "@/api/shop/order";
+import { getOrderListApi, exportOrderExcelApi, type OrderDTO } from "@/api/shop/order";
 import Search from "@iconify-icons/ep/search";
 import Refresh from "@iconify-icons/ep/refresh";
 import { ElMessage } from "element-plus";
@@ -18,8 +18,10 @@ const searchFormParams = ref({
   orderNumber: "",
   status: null,
   payStatus: null,
+  paymentMethod: null,
   startTime: "",
-  endTime: ""
+  endTime: "",
+  payTime: "",
 });
 
 const pagination = ref({
@@ -66,6 +68,28 @@ const onCurrentChange = (val: number) => {
   getList();
 };
 
+const exportLoading = ref(false);
+
+const handleExport = async () => {
+  try {
+    exportLoading.value = true;
+    const dateSuffix = searchFormParams.value.payTime
+      ? `_${searchFormParams.value.payTime.split(' ')[0].replace(/-/g, '')}`
+      : '';
+    const fileName = `订单列表${dateSuffix}.xlsx`;
+    await exportOrderExcelApi({
+      ...searchFormParams.value,
+      pageSize: pagination.value.pageSize,
+      pageNum: pagination.value.currentPage
+    }, fileName);
+    ElMessage.success('导出任务已开始，请稍后查看下载文件');
+  } catch (e) {
+    ElMessage.error('导出失败');
+  } finally {
+    exportLoading.value = false;
+  }
+};
+
 getList();
 </script>
 
@@ -73,11 +97,15 @@ getList();
   <div class="main">
     <el-form ref="formRef" :inline="true" :model="searchFormParams"
       class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
-      <el-form-item label="时间范围：">
+      <!-- <el-form-item label="时间范围：">
-        <el-date-picker v-model="searchFormParams.startTime" type="datetime" placeholder="开始时间"
+        <el-date-picker v-model="searchFormParams.startTime" type="date" placeholder="开始时间"
           value-format="YYYY-MM-DD HH:mm:ss" class="!w-[200px]" />
         <span class="mx-2">至</span>
-        <el-date-picker v-model="searchFormParams.endTime" type="datetime" placeholder="结束时间"
+        <el-date-picker v-model="searchFormParams.endTime" type="date" placeholder="结束时间"
+          value-format="YYYY-MM-DD HH:mm:ss" class="!w-[200px]" />
+      </el-form-item> -->
+      <el-form-item label="支付日期：">
+        <el-date-picker v-model="searchFormParams.payTime" type="date" placeholder="支付时间"
           value-format="YYYY-MM-DD HH:mm:ss" class="!w-[200px]" />
       </el-form-item>
       <el-form-item label="订单编号：" prop="orderNumber">
@@ -100,6 +128,12 @@ getList();
           <el-option label="已退款" :value="4" />
         </el-select>
       </el-form-item>
+      <el-form-item label="支付方式：" prop="paymentMethod">
+        <el-select v-model="searchFormParams.paymentMethod" placeholder="请选择支付方式" clearable class="!w-[180px]">
+          <el-option label="微信支付" value="wechat" />
+          <el-option label="余额支付" value="balance" />
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" :icon="useRenderIcon(Search)" @click="onSearch">
           搜索
@@ -107,6 +141,10 @@ getList();
         <el-button :icon="useRenderIcon(Refresh)" @click="resetForm">
           重置
         </el-button>
+        <el-button type="success" :loading="exportLoading" :icon="useRenderIcon('vscode-icons:file-type-excel2')"
+          @click="handleExport">
+          导出Excel
+        </el-button>
       </el-form-item>
     </el-form>
 
@@ -133,7 +171,11 @@ getList();
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="支付方式" prop="paymentMethod" width="120" />
+        <el-table-column label="支付方式" prop="paymentMethod" width="120">
+          <template #default="{ row }">
+            {{ { wechat: '微信支付', balance: '余额支付' }[row.paymentMethod] || row.paymentMethod }}
+          </template>
+        </el-table-column>
         <el-table-column label="支付时间" prop="payTime" width="180">
           <template #default="{ row }">
             {{ row.payTime ? new Date(row.payTime).toLocaleString() : '-' }}