feat: 客户余额管理页面新增扣费明细分页和消费金额汇总

src/common/api/user/user.js

@@ -32,3 +32,7 @@ export function getLogListApi(params) {
 export function getChargerRecordsApi(params) {
   return axios.post('/charge/customerChargeRecords/list_page', params)
 }
+// 客户余额管理 扣费明细金额汇总
+export function getChargerRecordsTotalApi(params) {
+  return axios.post('/charge/customerChargeRecords/total', params)
+}

src/views/user/balance.vue

@@ -296,20 +296,22 @@
       class="recordsDialog">
       <div class="search">
         <el-form :model="searchRecordsForm" size="small" :inline="true">
-          <el-form-item label="创建时间">
+          <el-form-item label="起始时间">
             <el-date-picker
               style="width: 360px"
-              v-model="searchRecordsForm.createTime"
+              v-model="searchRecordsForm.daterange"
               type="datetimerange"
               value-format="yyyy-MM-dd HH:ss:mm"
               range-separator="至"
               start-placeholder="开始日期"
-              end-placeholder="结束日期"></el-date-picker>
+              end-placeholder="结束日期"
+              clearable></el-date-picker>
           </el-form-item>
           <el-form-item label="支付款项">
             <el-select
               style="width: 150px"
               v-model="searchRecordsForm.chargeType"
+              clearable
               placeholder="请选择支付款项">
               <el-option
                 v-for="(item, index) in chargeTypeMap"
@@ -321,6 +323,7 @@
           <el-form-item label="支付方式">
             <el-select
               style="width: 150px"
+              clearable
               v-model="searchRecordsForm.payMode"
               placeholder="请选择支付方式">
               <el-option
@@ -332,13 +335,13 @@
           </el-form-item>
           <el-form-item label="订单号">
             <el-input
-              v-model="searchForm.bizNo"
+              v-model="searchRecordsForm.bizNo"
               placeholder="请输入订单号"
               clearable></el-input>
           </el-form-item>
           <el-form-item label="交易流水号">
             <el-input
-              v-model="searchForm.tradeNo"
+              v-model="searchRecordsForm.tradeNo"
               placeholder="请输入交易流水号"
               clearable></el-input>
           </el-form-item>
@@ -433,6 +436,9 @@
           :show-overflow-tooltip="true"></el-table-column>
       </el-table>
       <div class="pagination">
+        <div class="total-amount">
+          {{ '总消费金额：' + totalAmount + ' 元' }}
+        </div>
         <el-pagination
           layout="sizes, total, prev, pager, next, jumper"
           background
@@ -453,7 +459,8 @@ import {
   customerBalanceRechargeApi,
   customerBalanceDelete,
   getLogListApi,
-  getChargerRecordsApi
+  getChargerRecordsApi,
+  getChargerRecordsTotalApi
 } from '@/common/api/user/user'
 
 export default {
@@ -479,6 +486,7 @@ export default {
         3: '一件定制'
       },
       loading: false,
+      totalAmount: 0,
       total: 0,
       currentPage: 1,
       pageSize: 50,
@@ -652,7 +660,6 @@ export default {
     getChargeTypeText(type) {
       return this.chargeTypeMap[type]
     },
-    searchRecords() {},
     // 分页查看扣费明细
     async getChargerLog() {
       try {
@@ -662,8 +669,14 @@ export default {
           namespace: this.namespace,
           ...this.searchRecordsForm
         }
+        if (this.searchRecordsForm.daterange?.length) {
+          data.createTimeStart = this.searchRecordsForm.daterange[0]
+          data.createTimeEnd = this.searchRecordsForm.daterange[1]
+        }
         const res = await getChargerRecordsApi(data)
         this.chargerRecordsList = res.data.records
+        const totalRes = await getChargerRecordsTotalApi(data)
+        this.totalAmount = totalRes.data.feesSum
 
         if (this.chargerRecordsList.length) {
           this.totalRecords = res.data.total
@@ -729,11 +742,33 @@ export default {
     .el-input-group__append {
       padding-left: 0;
     }
+
+    .el-icon-time:before {
+      content: '';
+    }
   }
 }
 .recordsDialog {
   margin: 10px;
 
+  .pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center; /* 让el-pagination居中 */
+    position: relative;
+    min-height: 50px; /* 根据实际高度调整 */
+  }
+
+  .total-amount {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    /* 可加padding或字体样式 */
+    color: #333;
+    font-size: 14px;
+  }
+
   &::v-deep {
     .el-dialog {
       height: 85vh !important;