feat(用户详情): 添加借呗记录功能

- 新增 balanceLog.ts API 文件，包含借呗记录相关接口和类型定义
- 在用户详情页添加借呗记录标签页，展示用户借呗变更历史
- 实现借呗记录的分页查询功能

src/api/ab98/balanceLog.ts

@@ -0,0 +1,144 @@
+import { http } from "@/utils/http";
+
+export interface UserBalanceLog {
+  /** 主键ID */
+  logId: number;
+  /** 用户余额ID */
+  userBalanceId: number;
+  /** 变更类型(1-消费,2-审批归还,3-系统调整) */
+  changeType: number;
+  /** 变更金额(分) */
+  changeAmount: number;
+  /** 变更前已用余额(分) */
+  useBalanceBefore: number;
+  /** 变更后已用余额(分) */
+  useBalanceAfter: number;
+  /** 关联订单ID */
+  orderId?: number;
+  /** 关联审批ID */
+  approvalId?: number;
+  /** 关联订单商品ID */
+  orderGoodsId?: number;
+  /** 创建者ID */
+  creatorId: number;
+  /** 创建时间 */
+  createTime: string;
+  /** 更新者ID */
+  updaterId: number;
+  /** 更新时间 */
+  updateTime: string;
+  /** 删除标志 */
+  deleted: boolean;
+}
+
+export interface UserBalanceLogListParams {
+  pageNum?: number;
+  pageSize?: number;
+  userBalanceId?: number;
+  changeType?: number;
+  orderId?: number;
+  approvalId?: number;
+  orderGoodsId?: number;
+  creatorId?: number;
+}
+
+// 新增用户余额变更日志请求参数
+export interface AddUserBalanceLogCommand {
+  /** 用户余额ID */
+  userBalanceId: number;
+  /** 变更类型(1-消费,2-审批归还,3-系统调整) */
+  changeType: number;
+  /** 变更金额(分) */
+  changeAmount: number;
+  /** 变更前已用余额(分) */
+  useBalanceBefore: number;
+  /** 变更后已用余额(分) */
+  useBalanceAfter: number;
+  /** 关联订单ID */
+  orderId?: number;
+  /** 关联审批ID */
+  approvalId?: number;
+  /** 关联订单商品ID */
+  orderGoodsId?: number;
+}
+
+// 修改用户余额变更日志请求参数
+export interface UpdateUserBalanceLogCommand extends AddUserBalanceLogCommand {
+  /** 主键ID */
+  logId: number;
+}
+
+// 根据用户余额ID查询参数
+export interface QueryByUserBalanceIdParams {
+  userBalanceId: number;
+}
+
+// 根据订单ID查询参数
+export interface QueryByOrderIdParams {
+  orderId: number;
+}
+
+// 根据审批ID查询参数
+export interface QueryByApprovalIdParams {
+  approvalId: number;
+}
+
+// 根据订单商品ID查询参数
+export interface QueryByOrderGoodsIdParams {
+  orderGoodsId: number;
+}
+
+// 根据变更类型查询参数
+export interface QueryByChangeTypeParams {
+  changeType: number;
+}
+
+// 批量删除参数
+export interface BatchDeleteParams {
+  ids: number[];
+}
+
+// 用户余额变更日志相关API
+export const getUserBalanceLogListApi = (params: UserBalanceLogListParams) => {
+  return http.request<ResponseData<PageDTO<UserBalanceLog>>>("get", "/ab98/balance-log", { params });
+};
+
+export const getUserBalanceLogDetailApi = (id: number) => {
+  return http.request<ResponseData<UserBalanceLog>>("get", `/ab98/balance-log/${id}`);
+};
+
+export const getUserBalanceLogByUserBalanceIdApi = (userBalanceId: number) => {
+  return http.request<ResponseData<UserBalanceLog[]>>("get", `/ab98/balance-log/byUserBalanceId/${userBalanceId}`);
+};
+
+export const getUserBalanceLogByOrderIdApi = (orderId: number) => {
+  return http.request<ResponseData<UserBalanceLog[]>>("get", `/ab98/balance-log/byOrderId/${orderId}`);
+};
+
+export const getUserBalanceLogByApprovalIdApi = (approvalId: number) => {
+  return http.request<ResponseData<UserBalanceLog[]>>("get", `/ab98/balance-log/byApprovalId/${approvalId}`);
+};
+
+export const getUserBalanceLogByOrderGoodsIdApi = (orderGoodsId: number) => {
+  return http.request<ResponseData<UserBalanceLog[]>>("get", `/ab98/balance-log/byOrderGoodsId/${orderGoodsId}`);
+};
+
+export const getUserBalanceLogByChangeTypeApi = (changeType: number) => {
+  return http.request<ResponseData<UserBalanceLog[]>>("get", `/ab98/balance-log/byChangeType/${changeType}`);
+};
+
+export const addUserBalanceLogApi = (data: AddUserBalanceLogCommand) => {
+  return http.request<ResponseData<UserBalanceLog>>("post", "/ab98/balance-log", { data });
+};
+
+export const updateUserBalanceLogApi = (id: number, data: UpdateUserBalanceLogCommand) => {
+  return http.request<ResponseData<UserBalanceLog>>("put", `/ab98/balance-log/${id}`, { data });
+};
+
+export const deleteUserBalanceLogApi = (id: number) => {
+  return http.request<ResponseData<void>>("delete", `/ab98/balance-log/${id}`);
+};
+
+export const batchDeleteUserBalanceLogApi = (ids: number[]) => {
+  return http.request<ResponseData<void>>("delete", `/ab98/balance-log/batch/${ids.join(',')}`);
+};

src/views/user/ab98/detail.vue

@@ -11,6 +11,7 @@ import { PureTableBar } from "@/components/RePureTableBar";
 import { useWxStore } from "@/store/modules/wx";
 import { formatFenToYuan } from "@/utils/currency";
 import BalanceEditModal from "./BalanceEditModal.vue";
+import { getUserBalanceLogListApi, type UserBalanceLog, type UserBalanceLogListParams } from "@/api/ab98/balanceLog";
 
 defineOptions({
   name: "Ab98UserDetail"
@@ -48,6 +49,15 @@ const pagination = ref({
 const orderLoading = ref(false);
 const activeTab = ref('basic');
 
+// 借呗记录
+const balanceLogRecords = ref<UserBalanceLog[]>([]);
+const balanceLogPagination = ref({
+  pageSize: 10,
+  currentPage: 1,
+  total: 0
+});
+const balanceLogLoading = ref(false);
+
 const openid = computed(() => {
   if (userType.value === 'ab98') {
     return (userInfo.value as Ab98UserDetailDTO).wxUserList?.[0]?.openid || '';
@@ -80,9 +90,34 @@ async function fetchOrders() {
   }
 }
 
+async function fetchBalanceLogs() {
+  try {
+    if (userType.value !== 'ab98') return;
+    const userBalanceId = (userInfo.value as Ab98UserDetailDTO).userBalanceEntity?.userBalanceId;
+    if (!userBalanceId) {
+      balanceLogRecords.value = [];
+      return;
+    }
+
+    balanceLogLoading.value = true;
+    const params: UserBalanceLogListParams = {
+      pageSize: balanceLogPagination.value.pageSize,
+      pageNum: balanceLogPagination.value.currentPage,
+      userBalanceId
+    };
+    const { data } = await getUserBalanceLogListApi(params);
+    balanceLogRecords.value = data.rows;
+    balanceLogPagination.value.total = data.total;
+  } finally {
+    balanceLogLoading.value = false;
+  }
+}
+
 watch(activeTab, (newVal) => {
   if (newVal === 'orders') {
     fetchOrders();
+  } else if (newVal === 'balanceLog') {
+    fetchBalanceLogs();
   }
 });
 
@@ -203,14 +238,16 @@ async function handleShowAddTagDialog() {
     <div class="flex-container">
       <el-card class="user-info-card">
         <div class="user-header">
-          <el-avatar :size="100" :src="userType === 'ab98' ? (userInfo as Ab98UserDetailDTO).faceImg : undefined" fit="cover" shape="square">
+          <el-avatar :size="100" :src="userType === 'ab98' ? (userInfo as Ab98UserDetailDTO).faceImg : undefined"
+            fit="cover" shape="square">
             <svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
               <circle cx="50" cy="50" r="48" fill="#f5f5f5" stroke="#e0e0e0" stroke-width="1" />
               <circle cx="50" cy="40" r="12" fill="#9e9e9e" />
               <rect x="40" y="52" width="20" height="30" rx="2" fill="#9e9e9e" />
             </svg>
           </el-avatar>
-          <div class="user-name">{{ userType === 'ab98' ? (userInfo as Ab98UserDetailDTO).name : (userInfo as WxUserDTO).nickName }}</div>
+          <div class="user-name">{{ userType === 'ab98' ? (userInfo as Ab98UserDetailDTO).name : (userInfo as
+            WxUserDTO).nickName }}</div>
         </div>
 
         <el-divider />
@@ -226,7 +263,8 @@ async function handleShowAddTagDialog() {
             <el-descriptions-item label="OpenID">{{ (userInfo as WxUserDTO).openid }}</el-descriptions-item>
             <el-descriptions-item label="昵称">{{ (userInfo as WxUserDTO).nickName }}</el-descriptions-item>
             <el-descriptions-item label="手机号">{{ userInfo.tel }}</el-descriptions-item>
-            <el-descriptions-item label="微信余额">{{ formatFenToYuan((userInfo as WxUserDTO).wxBalance) }}</el-descriptions-item>
+            <el-descriptions-item label="微信余额">{{ formatFenToYuan((userInfo as WxUserDTO).wxBalance)
+              }}</el-descriptions-item>
           </template>
         </el-descriptions>
       </el-card>
@@ -236,6 +274,7 @@ async function handleShowAddTagDialog() {
             <el-tab-pane label="基础信息" name="basic"></el-tab-pane>
 
             <el-tab-pane label="订单记录" name="orders"></el-tab-pane>
+            <el-tab-pane v-if="userType === 'ab98'" label="借呗记录" name="balanceLog"></el-tab-pane>
           </el-tabs>
         </div>
 
@@ -245,13 +284,16 @@ async function handleShowAddTagDialog() {
               <el-descriptions-item label="会员ID">{{ (userInfo as Ab98UserDetailDTO).ab98UserId }}</el-descriptions-item>
               <el-descriptions-item label="微信openid">{{ openid }}</el-descriptions-item>
               <el-descriptions-item label="注册时间" :span="2">{{ userInfo.createTime }}</el-descriptions-item>
-              <el-descriptions-item label="借呗额度" :span="2">{{ formatFenToYuan((userInfo as Ab98UserDetailDTO).balanceLimit) }}
+              <el-descriptions-item label="借呗额度" :span="2">{{ formatFenToYuan((userInfo as
+                Ab98UserDetailDTO).balanceLimit) }}
                 <el-button type="primary" size="small" @click="handleModifyBalance">
                   修改
                 </el-button>
               </el-descriptions-item>
-              <el-descriptions-item label="剩余借呗">{{ formatFenToYuan((userInfo as Ab98UserDetailDTO).balance) }}</el-descriptions-item>
+              <el-descriptions-item label="剩余借呗">{{ formatFenToYuan((userInfo as Ab98UserDetailDTO).balance)
-              <el-descriptions-item label="已使用借呗">{{ formatFenToYuan((userInfo as Ab98UserDetailDTO).useBalance) }}</el-descriptions-item>
+                }}</el-descriptions-item>
+              <el-descriptions-item label="已使用借呗">{{ formatFenToYuan((userInfo as Ab98UserDetailDTO).useBalance)
+                }}</el-descriptions-item>
               <el-descriptions-item label="标签" :span="2">
                 <div class="tag-container">
                   <div class="user-tags" v-if="tags.length > 0">
@@ -270,8 +312,10 @@ async function handleShowAddTagDialog() {
               <el-descriptions-item label="微信用户ID">{{ (userInfo as WxUserDTO).wxUserId }}</el-descriptions-item>
               <el-descriptions-item label="OpenID">{{ openid }}</el-descriptions-item>
               <el-descriptions-item label="创建时间" :span="2">{{ userInfo.createTime }}</el-descriptions-item>
-              <el-descriptions-item label="微信余额" :span="2">{{ formatFenToYuan((userInfo as WxUserDTO).wxBalance) }}</el-descriptions-item>
+              <el-descriptions-item label="微信余额" :span="2">{{ formatFenToYuan((userInfo as WxUserDTO).wxBalance)
-              <el-descriptions-item label="备注" :span="2">{{ (userInfo as WxUserDTO).remark || '无' }}</el-descriptions-item>
+                }}</el-descriptions-item>
+              <el-descriptions-item label="备注" :span="2">{{ (userInfo as WxUserDTO).remark || '无'
+                }}</el-descriptions-item>
             </el-descriptions>
           </template>
         </template>
@@ -279,61 +323,93 @@ async function handleShowAddTagDialog() {
 
 
         <div class="info-details" v-if="activeTab === 'orders'">
-          <PureTableBar title="订单列表" @refresh="fetchOrders">
+          <el-table ref="tableRef" v-loading="orderLoading" :data="orderRecords" row-key="orderId" border>
-            <el-table ref="tableRef" v-loading="orderLoading" :data="orderRecords" row-key="orderId" border>
+            <el-table-column label="订单ID" prop="orderId" width="120" />
-              <el-table-column label="订单ID" prop="orderId" width="120" />
+            <el-table-column label="商品名称" prop="goodsNames" width="180">
-              <el-table-column label="商品名称" prop="goodsNames" width="180">
+              <template #default="{ row }">
-                <template #default="{ row }">
+                <span v-if="row.goodsNames">
-                  <span v-if="row.goodsNames">
+                  {{ row.goodsNames.split(',').join(', ') }}
-                    {{ row.goodsNames.split(',').join(', ') }}
+                </span>
-                  </span>
+                <span v-else>-</span>
-                  <span v-else>-</span>
+              </template>
-                </template>
+            </el-table-column>
-              </el-table-column>
+            <el-table-column label="商品封面" prop="coverImgs" width="100">
-              <el-table-column label="商品封面" prop="coverImgs" width="100">
+              <template #default="{ row }">
-                <template #default="{ row }">
+                <div v-if="row.coverImgs" class="flex gap-2">
-                  <div v-if="row.coverImgs" class="flex gap-2">
+                  <el-image v-for="(img, index) in row.coverImgs.split(',')" :key="index" :src="img"
-                    <el-image v-for="(img, index) in row.coverImgs.split(',')" :key="index" :src="img"
+                    :preview-src-list="row.coverImgs.split(',')" :z-index="9999" :preview-teleported="true"
-                      :preview-src-list="row.coverImgs.split(',')" :z-index="9999" :preview-teleported="true"
+                    :hide-on-click-modal="true" fit="cover" class="rounded" width="60" height="60" />
-                      :hide-on-click-modal="true" fit="cover" class="rounded" width="60" height="60" />
+                </div>
-                  </div>
+                <span v-else>-</span>
-                  <span v-else>-</span>
+              </template>
-                </template>
+            </el-table-column>
-              </el-table-column>
+            <el-table-column label="姓名" prop="name" width="120" />
-              <el-table-column label="姓名" prop="name" width="120" />
+            <el-table-column label="手机号" prop="mobile" width="120" />
-              <el-table-column label="手机号" prop="mobile" width="120" />
+            <el-table-column label="订单金额" prop="totalAmount" width="120">
-              <el-table-column label="订单金额" prop="totalAmount" width="120">
+              <template #default="{ row }">{{ row.totalAmount }}元</template>
-                <template #default="{ row }">{{ row.totalAmount }}元</template>
+            </el-table-column>
-              </el-table-column>
+            <el-table-column label="订单状态" prop="status" width="120">
-              <el-table-column label="订单状态" prop="status" width="120">
+              <template #default="{ row }">
-                <template #default="{ row }">
+                <el-tag :type="row.status === 2 ? 'success' : row.status === 5 ? 'danger' : 'info'">
-                  <el-tag :type="row.status === 2 ? 'success' : row.status === 5 ? 'danger' : 'info'">
+                  {{ { 1: '待付款', 2: '已付款', 3: '已发货', 4: '已完成', 5: '已取消' }[row.status] }}
-                    {{ { 1: '待付款', 2: '已付款', 3: '已发货', 4: '已完成', 5: '已取消' }[row.status] }}
+                </el-tag>
-                  </el-tag>
+              </template>
-                </template>
+            </el-table-column>
-              </el-table-column>
+            <el-table-column label="支付状态" prop="payStatus" width="120">
-              <el-table-column label="支付状态" prop="payStatus" width="120">
+              <template #default="{ row }">
-                <template #default="{ row }">
+                <el-tag :type="row.payStatus === 2 ? 'success' : 'info'">
-                  <el-tag :type="row.payStatus === 2 ? 'success' : 'info'">
+                  {{ { 1: '未支付', 2: '已支付', 3: '退款中', 4: '已退款' }[row.payStatus] }}
-                    {{ { 1: '未支付', 2: '已支付', 3: '退款中', 4: '已退款' }[row.payStatus] }}
+                </el-tag>
-                  </el-tag>
+              </template>
-                </template>
+            </el-table-column>
-              </el-table-column>
+            <el-table-column label="支付方式" prop="paymentMethod" width="120">
-              <el-table-column label="支付方式" prop="paymentMethod" width="120">
+              <template #default="{ row }">
-                <template #default="{ row }">
+                {{ { wechat: '微信支付', balance: '借呗支付' }[row.paymentMethod] || row.paymentMethod }}
-                  {{ { wechat: '微信支付', balance: '借呗支付' }[row.paymentMethod] || row.paymentMethod }}
+              </template>
-                </template>
+            </el-table-column>
-              </el-table-column>
+            <el-table-column label="支付时间" prop="payTime" width="180">
-              <el-table-column label="支付时间" prop="payTime" width="180">
+              <template #default="{ row }">
-                <template #default="{ row }">
+                {{ row.payTime ? new Date(row.payTime).toLocaleString() : '-' }}
-                  {{ row.payTime ? new Date(row.payTime).toLocaleString() : '-' }}
+              </template>
-                </template>
+            </el-table-column>
-              </el-table-column>
+          </el-table>
-            </el-table>
+          <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
-            <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"
-              :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
+            @size-change="fetchOrders" @current-change="fetchOrders" />
-              @size-change="fetchOrders" @current-change="fetchOrders" />
+        </div>
-          </PureTableBar>
+
+        <div class="info-details" v-if="activeTab === 'balanceLog' && userType === 'ab98'">
+          <el-table v-loading="balanceLogLoading" :data="balanceLogRecords" row-key="logId" border>
+            <el-table-column label="日志ID" prop="logId" width="100" />
+            <el-table-column label="变更类型" prop="changeType" width="120">
+              <template #default="{ row }">
+                {{ { 1: '消费', 2: '审批归还', 3: '系统调整' }[row.changeType] || row.changeType }}
+              </template>
+            </el-table-column>
+            <el-table-column label="变更金额" prop="changeAmount" width="120">
+              <template #default="{ row }">{{ formatFenToYuan(row.changeAmount) }}</template>
+            </el-table-column>
+            <el-table-column label="变更前已用余额" prop="useBalanceBefore" width="150">
+              <template #default="{ row }">{{ formatFenToYuan(row.useBalanceBefore) }}</template>
+            </el-table-column>
+            <el-table-column label="变更后已用余额" prop="useBalanceAfter" width="150">
+              <template #default="{ row }">{{ formatFenToYuan(row.useBalanceAfter) }}</template>
+            </el-table-column>
+            <el-table-column label="关联订单ID" prop="orderId" width="120">
+              <template #default="{ row }">{{ row.orderId || '-' }}</template>
+            </el-table-column>
+            <el-table-column label="关联审批ID" prop="approvalId" width="120">
+              <template #default="{ row }">{{ row.approvalId || '-' }}</template>
+            </el-table-column>
+            <el-table-column label="创建时间" prop="createTime" width="180">
+              <template #default="{ row }">{{ row.createTime ? new Date(row.createTime).toLocaleString() : '-'
+                }}</template>
+            </el-table-column>
+          </el-table>
+          <el-pagination v-model:current-page="balanceLogPagination.currentPage"
+            v-model:page-size="balanceLogPagination.pageSize" :page-sizes="[10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper" :total="balanceLogPagination.total"
+            @size-change="fetchBalanceLogs" @current-change="fetchBalanceLogs" />
         </div>
       </el-card>
     </div>
@@ -349,7 +425,8 @@ async function handleShowAddTagDialog() {
         <el-button type="primary" @click="handleAddTag">确定</el-button>
       </template>
     </el-dialog>
-    <BalanceEditModal v-if="userType === 'ab98'" v-model:visible="balanceVisible" :row="userInfo" @refresh="fetchUserDetail" />
+    <BalanceEditModal v-if="userType === 'ab98'" v-model:visible="balanceVisible" :row="userInfo"
+      @refresh="fetchUserDetail" />
   </div>
 </template>
 
@@ -468,5 +545,9 @@ async function handleShowAddTagDialog() {
       color: #303133;
     }
   }
+
+  .el-pagination {
+    margin-top: 10px;
+  }
 }
 </style>