From 9c1a2a1de7f030d85b439aa7144d59fd984ac913 Mon Sep 17 00:00:00 2001
From: YeMingfei666 <1619116647@qq.com>
Date: Tue, 9 Jul 2024 16:46:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=85=E5=80=BC=E8=AE=B0=E5=BD=95=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/user_manage/charge_list.vue | 376 ++++++++++++++++++++++++++
 1 file changed, 376 insertions(+)

diff --git a/src/views/user_manage/charge_list.vue b/src/views/user_manage/charge_list.vue
index e69de29..21b9359 100644
--- a/src/views/user_manage/charge_list.vue
+++ b/src/views/user_manage/charge_list.vue
@@ -0,0 +1,376 @@
+<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 label-position="left">
+           <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>
+            <el-date-picker v-model="query.createdAt" type="daterange" range-separator="至" start-placeholder="开始日期"
+              end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss"
+              >
+            </el-date-picker>
+          <el-form-item>
+            <el-button type="primary" @click="getTableData">查询</el-button>
+            <el-button @click="resetHandle">重置</el-button>
+            <el-button icon="el-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="userPhone"></el-table-column>
+          <el-table-column label="用户名" prop="userName"></el-table-column>
+          <el-table-column label="充值金额" prop="rechargeAmount"></el-table-column>
+          <el-table-column label="充值类型" prop="rechargeType"></el-table-column>
+          <el-table-column label="充值时间" prop="rechargeTime"></el-table-column>
+        </el-table>
+      </div>
+      <div class="head-container">
+        <el-pagination  :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
+          @current-change="paginationChange" @size-change="sizeChange"
+          layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { tbShopUserRecharge,downloadTableRecharge } from '@/api/shop'
+  import dayjs from "dayjs";
+  import { downloadFile } from "@/utils/index";
+  
+  export default {
+    data() {
+      return {
+        timeValue: "",
+        resetQuery: null,
+        orderType: "1",
+        categorys: [],
+        query: {
+          createdAt: [],
+          proName: '',
+          cateId: ''
+        },
+        tableData: {
+          data: [],
+          page: 0,
+          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.resetQuery = { ...this.query };
+      this.getTableData();
+    },
+    methods: {
+      //携带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 - 1;
+        this.getTableData();
+      },
+      async getTableData() {
+        this.tableData.loading = true;
+        try {
+          const res = await tbShopUserRecharge({
+            page: this.tableData.page+1,
+             size: this.tableData.size,
+            startTime:this.query.createdAt[0],
+            endTime:this.query.createdAt[1]
+          });
+          console.log(res.records)
+          this.tableData.loading = false;
+          this.tableData.data = res.records;
+          this.tableData.total = res.total;
+        } 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: .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>
+  
\ No newline at end of file