Forráskód Böngészése

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

xw 3 hete
szülő
commit
81b7f6b2df
1 módosított fájl, 33 hozzáadás és 7 törlés
  1. 33 7
      src/views/hisStore/storePayment/index.vue

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

@@ -178,13 +178,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>
 
 
     <!-- 添加或修改支付明细对话框 -->
@@ -264,6 +281,9 @@ export default {
       },
 
       statusOptions:[],
+      // 统计数据
+      totalPayMoney: 0,
+      totalRefundMoney: 0,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -366,6 +386,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;
+        }
       });
     },
     // 取消按钮