fix: 修复店铺用户列表未展示统计数据和跳转充值记录，增加充值记录页面

src/views/user/list/config/content.ts

@@ -10,7 +10,7 @@ const contentConfig: IContentConfig<any> = {
   pagination: {
     background: true,
     layout: "prev,pager,next,jumper,total,sizes",
-    pageSize: 20,
+    pageSize: 10,
     pageSizes: [10, 20, 30, 50],
   },
   indexAction: function (params: getListRequest) {
@@ -96,7 +96,8 @@ const contentConfig: IContentConfig<any> = {
           name: "more",
           text: "更多",
           options: [
-            { label: '增减余额', command: 'change-money' }
+            { label: '增减余额', command: 'change-money' },
+            { label: '充值记录', command: 'charge-list' },
           ]
         },
       ],

src/views/user/list/index.vue

@@ -5,9 +5,32 @@
     <page-search
       ref="searchRef"
       :search-config="searchConfig"
-      @query-click="handleQueryClick"
+      @query-click="searchQueryClick"
       @reset-click="handleResetClick"
     />
+    <div class="head-container">
+      <div class="card">
+        <!-- <div class="title">统计数据</div> -->
+        <div class="row">
+          <div class="item">
+            <div class="t">用户数量</div>
+            <div class="n">{{ summary.userTotal || 0 }}</div>
+          </div>
+          <div class="item">
+            <div class="t">用户总余额</div>
+            <div class="n">{{ summary.balanceTotal || 0 }}</div>
+          </div>
+          <div class="item">
+            <div class="t">充值金额</div>
+            <div class="n">{{ summary.chargeTotal || 0 }}</div>
+          </div>
+          <div class="item u-flex u-col-center">
+            <el-button type="success" @click="toCharge()">充值记录</el-button>
+            <!-- <el-button type="danger" @click="toCharge('cost')">消费记录</el-button> -->
+          </div>
+        </div>
+      </div>
+    </div>
     <!-- 列表 -->
     <page-content
       ref="contentRef"
@@ -96,6 +119,7 @@ import editModalConfig from "./config/edit";
 import editMoneyModalConfig, { addOptions, reduceOptions } from "./config/edit-money";
 import searchConfig from "./config/search";
 import { returnOptionsLabel } from "./config/config";
+import shopUserApi from "@/api/account/shopUser";
 const editMoneyModalRef = ref(null);
 const {
   searchRef,
@@ -112,6 +136,29 @@ const {
   handleFilterChange,
 } = usePage();
 
+function searchQueryClick(e) {
+  handleQueryClick(e);
+  // 获取统计数据
+  getSummary();
+}
+const summary = reactive({
+  userTotal: 0,
+  chargeTotal: 0,
+  balanceTotal: 0.0,
+});
+
+const router = useRouter();
+// 跳转页面
+function toCharge(params) {
+  console.log(params);
+  router.push({ path: "/user/charge-list", query: { ...params } });
+}
+async function getSummary(e) {
+  // 获取统计数据
+  const res = await shopUserApi.getSummary(e);
+  console.log(res);
+  Object.assign(summary, res);
+}
 // 修改金额表单类型
 function formDataChange(type, val) {
   if (type == "type") {
@@ -157,15 +204,52 @@ async function handleOperatClick(data) {
       editMoneyModalRef.value.setFormData({ ...row, headImg: row.headImg ? [row.headImg] : "" });
       return;
     }
+    if (data.command === "charge-list") {
+      console.log(data);
+      toCharge({ userId: data.row.userId });
+      return;
+    }
     return;
   }
 }
 
-// 切换示例
-const isA = ref(true);
+onMounted(() => {
+  getSummary(searchRef.value.getQueryParams());
+});
 </script>
-<style scoped>
+<style scoped lang="scss">
 .align-center {
   align-items: center;
 }
+.card {
+  background-color: #f5f5f5;
+  padding: 0 14px;
+
+  .title {
+    font-size: 22px;
+    padding-top: 14px;
+  }
+
+  .row {
+    display: flex;
+    padding: 20px 0;
+
+    .item {
+      flex: 1;
+
+      .t {
+        text-align: center;
+        color: #555;
+      }
+
+      .n {
+        color: #000;
+        font-size: 20px;
+        font-weight: bold;
+        padding-top: 6px;
+        text-align: center;
+      }
+    }
+  }
+}
 </style>