Przeglądaj źródła

feat: 添加支付明细页面总收款和总退款统计功能

xw 3 tygodni temu
rodzic
commit
141e2b4636
1 zmienionych plików z 33 dodań i 7 usunięć
  1. 33 7
      src/views/hisStore/storePayment/index.vue

+ 33 - 7
src/views/hisStore/storePayment/index.vue

@@ -209,13 +209,30 @@
       </el-table-column>
     </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <!-- 统计信息和分页器 -->
+    <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 0 10px;">
+      <!-- 左侧统计信息 -->
+      <div style="display: flex; gap: 30px;">
+        <div style="display: flex; align-items: center; padding: 8px 16px; background-color: #f0f9ff; border-radius: 4px;">
+          <span style="font-weight: bold; color: #606266; margin-right: 8px;">总收款:</span>
+          <span style="color: #67C23A; font-size: 18px; font-weight: bold;">{{ totalPayMoney.toFixed(2) }}</span>
+          <span style="color: #909399; margin-left: 4px;">元</span>
+        </div>
+        <div style="display: flex; align-items: center; padding: 8px 16px; background-color: #fef0f0; border-radius: 4px;">
+          <span style="font-weight: bold; color: #606266; margin-right: 8px;">总退款:</span>
+          <span style="color: #F56C6C; font-size: 18px; font-weight: bold;">{{ totalRefundMoney.toFixed(2) }}</span>
+          <span style="color: #909399; margin-left: 4px;">元</span>
+        </div>
+      </div>
+      <!-- 右侧分页器 -->
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
 
     <el-dialog :title="payNotify.title" :visible.sync="payNotify.open" width="600px" append-to-body>
       <el-form ref="payNotifyForm" :model="payNotifyForm" :rules="payNotifyRules" label-width="100px">
@@ -281,6 +298,9 @@ export default {
   name: "HisStorePayment",
   data() {
     return {
+      // 统计数据
+      totalPayMoney: 0,
+      totalRefundMoney: 0,
       payModeOptions:[
         { dictLabel: "微信支付", dictValue: "wx" },
         { dictLabel: "汇付", dictValue: "hf" }
@@ -437,6 +457,12 @@ export default {
         this.storePaymentList = response.rows;
         this.total = response.total;
         this.loading = false;
+        
+        // 从后端返回的ext字段中获取统计信息
+        if (response.ext) {
+          this.totalPayMoney = parseFloat(response.ext.totalPaymentAmount) || 0;
+          this.totalRefundMoney = parseFloat(response.ext.totalRefundAmount) || 0;
+        }
       });
     },
     // 取消按钮