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

src/api/account/shopUser.ts

@@ -55,6 +55,14 @@ const API = {
       method: "get",
       params
     });
+  },
+  //获取店铺用户充值记录
+  flow(params: getRequest) {
+    return request({
+      url: `${baseURL}/flow`,
+      method: "get",
+      params
+    });
   }
 }
 export default API;

src/components/CURD/PageContent.vue

@@ -564,7 +564,7 @@ const showPagination = props.contentConfig.pagination !== false;
 const defalutPagination = {
   background: true,
   layout: "total, sizes, prev, pager, next, jumper",
-  pageSize: 20,
+  pageSize: 10,
   pageSizes: [10, 20, 30, 50],
   total: 0,
   currentPage: 1,

src/views/user/charge/data.ts

@@ -0,0 +1,20 @@
+// cashIn 现金充值，
+// wechatIn 微信小程序充值，
+// alipayIn 支付宝小程序充值，
+// awardIn 充值奖励，
+// rechargeRefund 充值退款
+// orderPay 订单消费，
+// orderRefund 订单退款，
+// adminIn 管理员充值
+// adminOut管理员消费
+export const $bizCode = {
+  cashIn: "现金充值",
+  wechatIn: "微信小程序充值",
+  alipayIn: "支付宝小程序充值",
+  awardIn: "充值奖励",
+  rechargeRefund: "充值退款",
+  orderPay: "订单消费",
+  orderRefund: "订单退款",
+  adminIn: "管理员充值",
+  adminOut: "管理员消费",
+}

src/views/user/charge/index.vue

@@ -0,0 +1,393 @@
+<template>
+  <div class="app-container">
+    <!-- <el-tabs v-model="orderType" @tab-click="getTableData">
+      <el-tab-pane label="收款" name="1"></el-tab-pane>
+      <el-tab-pane label="销量" name="2"></el-tab-pane>
+    </el-tabs> -->
+    <div class="head-container">
+      <el-form :model="query" :inline="false" label-position="left">
+        <el-form-item label="时间">
+          <el-radio-group v-model="timeValue" @change="timeChange">
+            <el-radio-button label="">全部</el-radio-button>
+            <el-radio-button label="0">今天</el-radio-button>
+            <el-radio-button label="-1">昨天</el-radio-button>
+            <el-radio-button label="-7">最近7天</el-radio-button>
+            <el-radio-button label="-30">最近30天</el-radio-button>
+            <el-radio-button label="week">本周</el-radio-button>
+            <el-radio-button label="month">本月</el-radio-button>
+            <el-radio-button label="custom">自定义</el-radio-button>
+          </el-radio-group>
+          <div class="u-m-l-10">
+            <el-date-picker
+              v-if="timeValue == 'custom'"
+              style="width: 300px"
+              v-model="query.createdAt"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              value-format="YYYY-MM-DD"
+            ></el-date-picker>
+          </div>
+        </el-form-item>
+        <el-form-item label="充值类型">
+          <el-radio-group v-model="query.bizCode" @change="timeChange">
+            <el-radio-button label="">全部</el-radio-button>
+            <el-radio-button
+              :label="item"
+              :value="index"
+              v-for="(item, index) in bizCode"
+              :key="index"
+            ></el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getTableData">查询</el-button>
+          <el-button @click="resetHandle">重置</el-button>
+          <!-- <el-button icon="download" v-loading="downloadLoading" @click="downloadHandle">
+            <span v-if="!downloadLoading">导出Excel</span>
+            <span v-else>下载中...</span>
+          </el-button> -->
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- <div class="head-container">
+      <div class="collect_wrap">
+        <div class="item" v-for="item in payCountList" :key="item.id">
+          <div class="icon_wrap" style="--bg-color:#C978EE">
+            <i class="icon" :class="item.icon"></i>
+          </div>
+          <div class="info">
+            <div class="m">
+              <template v-if="item.isAmount == 1">￥</template>
+              {{ item.payAmount }}
+            </div>
+            <div class="t">{{ item.payType }}</div>
+          </div>
+        </div>
+      </div>
+    </div> -->
+    <div class="head-container">
+      <el-table :data="tableData.data" v-loading="tableData.loading" v-if="orderType == 1">
+        <el-table-column type="index" width="50"></el-table-column>
+        <el-table-column label="id" prop="id"></el-table-column>
+        <!-- <el-table-column label="头像地址" prop="headImg">
+          <template v-slot="scope">
+          <el-image :src="scope.row.headImg"
+            style="width:40px;height: 40px;border-radius: 4px;background-color: #efefef;">
+            <div class="img_error" slot="error">
+              <i class="icon el-icon-document-delete"></i>
+            </div>
+          </el-image>
+        </template>
+        </el-table-column> -->
+        <el-table-column label="门店" prop="shopName"></el-table-column>
+        <el-table-column label="用户手机号" prop="phone"></el-table-column>
+        <el-table-column label="用户名" prop="nickName"></el-table-column>
+        <el-table-column label="充值金额" prop="amount"></el-table-column>
+        <el-table-column label="已退款金额" prop="refundAmount"></el-table-column>
+
+        <el-table-column label="充值类型" prop="bizCode">
+          <template #default="scope">
+            {{ returnBizCode(scope.row.bizCode) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="充值时间" prop="createTime"></el-table-column>
+        <el-table-column label="备注" prop="remark"></el-table-column>
+      </el-table>
+    </div>
+    <div class="head-container">
+      <el-pagination
+        :total="tableData.total"
+        :current-page="tableData.page"
+        :page-size="tableData.size"
+        @current-change="paginationChange"
+        @size-change="sizeChange"
+        layout="total, sizes, prev, pager, next, jumper"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import shopUserApi from "@/api/account/shopUser";
+import dayjs from "dayjs";
+import { downloadFile } from "@/utils/tools";
+import { $bizCode } from "./data";
+export default {
+  data() {
+    return {
+      bizCode: $bizCode,
+      timeValue: "",
+      resetQuery: null,
+      orderType: "1",
+      categorys: [],
+      query: {
+        createdAt: [],
+        proName: "",
+        cateId: "",
+        userId: "",
+        bizCode: "",
+      },
+      tableData: {
+        data: [],
+        page: 1,
+        size: 10,
+        loading: false,
+        total: 0,
+      },
+      downloadLoading: false,
+      payCountList: "",
+      payCountTotal: 0,
+    };
+  },
+  filters: {
+    timeFilter(time) {
+      return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
+    },
+  },
+  mounted() {
+    this.query.userId = this.$route.query.userId || "";
+    this.resetQuery = { ...this.query };
+    this.getTableData();
+  },
+  methods: {
+    returnBizCode(key) {
+      return this.bizCode[key] || "";
+    },
+    //携带table id跳转到订单列表页面
+    toTableOrderList(data) {
+      console.log(data);
+      this.$router.push({
+        path: "/order_manage/order_list",
+        query: {
+          tableName: data.tableName,
+        },
+      });
+    },
+    // 导出Excel
+    async downloadHandle() {
+      try {
+        this.downloadLoading = true;
+        const file = await downloadTableRecharge({
+          startTime: this.query.createdAt[0],
+          endTime: this.query.createdAt[1],
+        });
+        downloadFile(file, "数据", "xlsx");
+        this.downloadLoading = false;
+      } catch (error) {
+        this.downloadLoading = false;
+        console.log(error);
+      }
+    },
+    // 重置查询
+    resetHandle() {
+      this.timeValue = "";
+      this.query = { ...this.resetQuery };
+      this.page = 0;
+      this.getTableData();
+    },
+    // 分页大小改变
+    sizeChange(e) {
+      this.tableData.size = e;
+      this.getTableData();
+    },
+    // 分页回调
+    paginationChange(e) {
+      this.tableData.page = e;
+      this.getTableData();
+    },
+    async getTableData() {
+      this.tableData.loading = true;
+      try {
+        const res = await shopUserApi.flow({
+          page: this.tableData.page,
+          size: this.tableData.size,
+          userId: this.query.userId,
+          bizCode: this.query.bizCode,
+          startTime: this.query.createdAt[0],
+          endTime: this.query.createdAt[1],
+        });
+        this.tableData.loading = false;
+        this.tableData.data = res.records;
+        this.tableData.total = res.totalRow * 1;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 切换时间
+    timeChange(e) {
+      const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"];
+      switch (e) {
+        case "":
+          // 全部
+          this.query.createdAt = [];
+          break;
+        case "0":
+          // 今天
+          this.query.createdAt = [dayjs().format(format[0]), dayjs().format(format[1])];
+          break;
+        case "-1":
+          // 昨天
+          this.query.createdAt = [
+            dayjs().add(-1, "d").format(format[0]),
+            dayjs().add(-1, "d").format(format[1]),
+          ];
+          break;
+        case "-7":
+          // 最近7天
+          this.query.createdAt = [
+            dayjs().add(-7, "d").format(format[0]),
+            dayjs().format(format[1]),
+          ];
+          break;
+        case "-30":
+          // 最近7天
+          this.query.createdAt = [
+            dayjs().add(-30, "d").format(format[0]),
+            dayjs().format(format[1]),
+          ];
+          break;
+        case "week":
+          // 本周
+          this.query.createdAt = [
+            dayjs().startOf("week").format(format[0]),
+            dayjs().endOf("week").format(format[1]),
+          ];
+          break;
+        case "month":
+          // 本周
+          this.query.createdAt = [
+            dayjs().startOf("month").format(format[0]),
+            dayjs().endOf("month").format(format[1]),
+          ];
+          break;
+        case "custom":
+          // 自定义
+          this.query.createdAt = [];
+          break;
+        default:
+          break;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.cursor-pointer {
+  cursor: pointer;
+  color: #1890ff;
+  transition: all 0.3s;
+}
+.cursor-pointer:hover {
+  opacity: 0.7;
+}
+
+.collect_wrap {
+  display: flex;
+  gap: 14px;
+
+  .item {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    background-color: #f5f5f5;
+    padding: 20px;
+
+    .icon_wrap {
+      $size: 34px;
+      $border: 6px;
+      width: $size;
+      height: $size;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--bg-color);
+      border-radius: 50%;
+      position: relative;
+
+      &::after {
+        content: "";
+        width: $size + $border;
+        height: $size + $border;
+        border-radius: 50%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: var(--bg-color);
+        opacity: 0.3;
+      }
+
+      .icon {
+        font-size: 16px;
+        color: #fff;
+      }
+
+      .img {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding-left: 10px;
+
+      .m {
+        font-weight: bold;
+      }
+
+      .t {
+        font-size: 12px;
+        color: #999;
+        padding-top: 4px;
+      }
+    }
+  }
+}
+
+.refund {
+  color: #ff9731;
+  font-weight: bold;
+}
+
+.table_order_info {
+  .order_no {
+    color: #999;
+  }
+
+  .type {
+    color: #e6a23c;
+  }
+}
+
+.goods_info {
+  .row {
+    display: flex;
+
+    &:not(:first-child) {
+      margin-top: 10px;
+    }
+
+    .cover {
+      width: 40px;
+      height: 40px;
+    }
+
+    .info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding-left: 10px;
+
+      .sku {
+        color: #999;
+      }
+    }
+  }
+}
+</style>

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;
   }
 }
 
-// 切换示例
+onMounted(() => {
-const isA = ref(true);
+  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>