diff --git a/src/assets/blue.png b/src/assets/blue.png
new file mode 100644
index 0000000..87a1ed1
Binary files /dev/null and b/src/assets/blue.png differ
diff --git a/src/router/index.js b/src/router/index.js
index 6efd9a8..8716011 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -18,7 +18,14 @@ const router = createRouter({
                 // 退款审核
                 { path: '/refundAudit', name: "refundAudit", component: () => import("../views/audit/refundAudit.vue") },
                 // 金币消耗
-                { path: '/coinConsume', name: "coinConsume", component: () => import("../views/consume/coinConsume.vue") },
+                { path: '/coinConsume', name: "coinConsume", component: () => import("../views/consume/coinConsume.vue"),
+                    children: [
+                        // 金币新增消耗
+                        { path: 'add', name: "addCoinConsume", component: () => import("../views/consume/addCoinConsume.vue") },
+                        // 金币消耗明细详情
+                        { path: 'detail', name: "coinConsumeDetail", component: () => import("../views/consume/coinConsumeDetail.vue") }
+                    ]
+                },
                 // 金豆消耗
                 { path: '/beanConsume', name: "beanConsume", component: () => import("../views/consume/beanConsume.vue") },
                 // 汇率管理
@@ -31,8 +38,15 @@ const router = createRouter({
                 { path: '/coinRefund', name: "coinRefund", component: () => import("../views/refund/coinRefund.vue") },
                 // 金豆退款
                 { path: '/beanRefund', name: "beanRefund", component: () => import("../views/refund/beanRefund.vue") },
-                // 客户金币明细
-                { path: '/usergold', name: "usergold", component: () => import("../views/usergold/index.vue") },
+                // 客户账户明细
+                { path: '/usergold', name: "usergold", component: () => import("../views/usergold/clientCount.vue"),
+                    children: [
+                        // 金币明细
+                        { path: 'detail', name: "clientCountDetail", component: () => import("../views/usergold/clientCountDetail.vue") },
+                        // 金币余额
+                        { path: 'balance', name: "clientCountBalance", component: () => import("../views/usergold/clientCountBalance.vue") },
+                    ]
+                 },
                 // 权限管理
                 { path: '/permissions', name: "permissions", component: () => import("../views/permissions/index.vue") },
                 // 没有权限
diff --git a/src/views/consume/addCoinConsume.vue b/src/views/consume/addCoinConsume.vue
new file mode 100644
index 0000000..86f6a89
--- /dev/null
+++ b/src/views/consume/addCoinConsume.vue
@@ -0,0 +1,706 @@
+<script setup>
+import { reactive, onMounted } from "vue";
+import { ref, computed, watch } from "vue";
+import { ElMessage } from "element-plus";
+import { Plus } from "@element-plus/icons-vue";
+import axios from "axios";
+import { ElMessageBox } from "element-plus";
+
+import moment from "moment";
+import _ from "lodash";
+import request from "@/util/http";
+// 精网号去空格
+const trimJwCode = () => {
+  if (addConsume.value.jwcode) {
+    addConsume.value.jwcode = addConsume.value.jwcode.replace(/\s/g, ''); 
+  }
+}
+//这是获取用户信息的接口
+const adminData = ref({});
+const getAdminData = async function () {
+  try {//await 暂停函数执行，直到请求完成
+    const result = await request({
+      url: "/admin/userinfo",
+      data: {},
+    });
+    adminData.value = result;
+    addConsume.value.adminId = adminData.value.adminId;
+    addConsume.value.name = adminData.value.name;
+    console.log("请求成功", result);
+    console.log("用户信息", adminData.value);
+  } catch (error) {
+    console.log("请求失败", error);
+  }
+};
+
+// 这是添加消费信息的表单
+const addConsume = ref({
+  freeCoin: 0,
+  rechargeCoin: 0,
+  taskCoin: 0,
+  updateType: "1",
+  indexName:"", //这个是指标字段，后面绑定
+});
+// 这是添加消费信息的接口
+const add = async function () {
+  try {
+    // 处理数据，使用楼上接口后需要隐藏
+    addConsume.value.rechargeCoin = Number(addConsume.value.rechargeCoin * 100);
+    addConsume.value.freeCoin = Number(addConsume.value.freeCoin * 100);
+    addConsume.value.taskCoin = Number(addConsume.value.taskCoin * 100);
+    addConsume.value.productName = indexs.value.productName;
+    // 发送POST请求
+    const result = await request({
+      url: "/consume/add",
+      data: addConsume.value,
+    });
+    if (result.code === 0) {
+      ElMessage.error(result.msg);
+      return;
+    } else {
+      ElMessage.success("添加成功");
+    }
+    //重置表单
+    addConsume.value = {};
+    addConsume.value.adminId = adminData.value.adminId;
+    addConsume.value.adminName = adminData.value.adminName;
+    addConsume.value.updateType = "1";
+    addConsume.value.freeCoin = 0;
+    addConsume.value.rechargeCoin = 0;
+    addConsume.value.taskCoin = 0;
+    indexs.value = {};
+    console.log("请求成功", result);
+    user.value = {};
+  } catch (error) {
+    console.log("请求失败", error);
+    ElMessage.error("添加失败，请检查输入内容是否正确");
+
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+};
+const addBefore = () => {
+  Ref.value.validate(async (valid) => {
+    if (valid) {
+      ElMessageBox.confirm("确认添加？")
+        .then(() => {
+          addConsume.value.freeCoin = Number(-addConsume.value.freeCoin);
+          addConsume.value.rechargeCoin = Number(
+            -addConsume.value.rechargeCoin
+          );
+          addConsume.value.taskCoin = Number(-addConsume.value.taskCoin);
+          add();
+          console.log("添加成功");
+          imageUrl.value = "";
+          addConsume.value = {};
+        })
+        .catch(() => {
+          console.log("取消添加");
+        });
+    } else {
+      //提示
+      ElMessage({
+        type: "error",
+        message: "请检查输入内容",
+      });
+    }
+  });
+};
+
+// 表单验证
+// 开始时间改变时，重新验证结束时间
+const Ref = ref(null);
+
+const checkFreeGoldRadio = function (rule, value, callback) {
+  if (value == "0" || value == null || value == "") {
+    callback(new Error("请输入消费金币总数"));
+  } else if (value < 0 || isNaN(value)) {
+    callback(new Error("请输入正确的格式"));
+  } else {
+    callback();
+  }
+};
+const rules = reactive({
+  jwcode: [{ required: true, message: "请输入精网号", trigger: "blur" }],
+  productName: [{ required: true, message: "请选择消费商品", trigger: "change" }], // 修改为 change
+  taskCoin: [{ required: true, message: "请输入任务金币", trigger: "blur" }],
+  freeCoin: [{ required: true, message: "请输入免费金币", trigger: "blur" }],
+  rechargeCoin: [
+    { required: true, message: "请输入免费金币", trigger: "blur" },
+  ],
+  allGold: [
+    { required: true, message: "消费金币总数不能为空", trigger: "blur" },
+    { validator: checkFreeGoldRadio, trigger: "blur" },
+  ],
+  indexName: [
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        if (isHC.value === 1 && !value) {
+          callback(new Error("请选择指标"));
+        } else {
+          callback();
+        }
+      },
+      trigger: ["change", "blur"],
+    },
+  ]
+});
+//这是重置方法
+const delteConsume = function () {
+  addConsume.value = {};
+  addConsume.value.adminId = adminData.value.adminId;
+  addConsume.value.adminName = adminData.value.adminName;
+  addConsume.value.updateType = "1";
+  addConsume.value.freeCoin = 0;
+  addConsume.value.rechargeCoin = 0;
+  addConsume.value.taskCoin = 0;
+  indexs.value = {};
+  isHC.value = 0;
+};
+// 查找客户信息的方法
+const user = ref({
+  firstRechargeTime: "",
+});
+const getUser = async function (jwcode) {
+  trimJwCode();
+  try {
+    // 发送POST请求
+    const result = await request({
+      url: "/recharge/user",
+      data: {
+        jwcode: addConsume.value.jwcode,
+        area: adminData.value.area,
+      },
+    });
+    console.log("请求成功", result);
+
+    if (result.code === 0) {
+      ElMessage.error(result.msg);
+    } else {
+      user.value = result.data;
+      user.value.A =
+        Number(user.value.pendingRechargeTimes) +
+        Number(user.value.pendingSpendTimes);
+      console.log("用户信息", user.value);
+      ElMessage.success(result.msg);
+    }
+  } catch (error) {
+    console.log("请求失败", error);
+    ElMessage.error("查询失败，请检查精网号是否正确");
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+};
+
+
+//下面这个也是校验精网号是否存在的方法，通过脱离文本框实现，但是上面方法绑定了信息面板，在输入正确的精网号后能显示。
+//这是查询用户金币信息的接口
+const userGold = ref({});
+const getUserGold = async function (jwcode) {
+  trimJwCode();
+  try {
+    // 发送POST请求
+    const result = await request({
+      url: "/recharge/user",
+      data: {
+        jwcode: addConsume.value.jwcode,
+        area: adminData.value.area,
+      },
+    });
+    // 将响应结果存储到响应式数据中
+    console.log("请求成功", result);
+    if (result.code === 0) {
+      //ElMessage.error(result.msg);
+    } else {
+      // 存储表格数据
+      userGold.value = result.data;
+      addConsume.value.username = result.data.name;
+      addConsume.value.area = result.data.area;
+     // ElMessage.success(result.msg);
+    }
+  } catch (error) {
+    console.log("请求失败", error);
+    //ElMessage.error("无此精网号");
+    addConsume.value.jwcode = "";
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+};
+
+function calculateCoins() {
+  if (
+    (userGold.value.coreJb +
+      userGold.value.free6 +
+      userGold.value.free12 +
+      userGold.value.buyJb) /
+      100 <
+    addConsume.value.allGold
+  ) {
+    addConsume.value.allGold = 0;
+    addConsume.value.taskCoin = 0;
+    addConsume.value.freeCoin = 0;
+    addConsume.value.rechargeCoin = 0;
+    ElMessage.error("金币不足，请充值");
+    return;
+  }
+  // 这是计算用户的三种金币的接口
+  else {
+    // 保存原始的allGold值
+    const originalAllGold = addConsume.value.allGold;
+
+    // 确保todayTask和todayFree是有效的数字
+    const todayTask =
+      typeof userGold.value.coreJb === "number"
+        ? userGold.value.coreJb / 100
+        : 0;
+    const todayFree =
+      typeof (userGold.value.free6 + userGold.value.free12) === "number"
+        ? (userGold.value.free6 + userGold.value.free12) / 100
+        : 0;
+
+    // 根据用户输入的消费金币总数和已有的金币数量进行计算
+    addConsume.value.taskCoin = Math.min(originalAllGold, todayTask);
+    let remainingGold = originalAllGold - addConsume.value.taskCoin;
+
+    addConsume.value.freeCoin = Math.min(remainingGold, todayFree);
+    remainingGold -= addConsume.value.freeCoin;
+
+    addConsume.value.rechargeCoin = remainingGold; // 剩余的都算作永久金币
+
+    // 恢复allGold的原始值
+    addConsume.value.allGold = originalAllGold;
+
+    // 确保taskCoin, freeCoin, rechargeCoin不是NaN，如果是，则设置为0
+    if (isNaN(addConsume.value.taskCoin)) addConsume.value.taskCoin = 0;
+    if (isNaN(addConsume.value.freeCoin)) addConsume.value.freeCoin = 0;
+    if (isNaN(addConsume.value.rechargeCoin)) addConsume.value.rechargeCoin = 0;
+
+    console.log("计算结果", addConsume.value);
+  }
+}
+
+// 查询商品的接口
+const goods = ref([]);
+const getGoods = async function () {
+  try {
+    // 发送POST请求
+    const result = await request({
+      url: "/product",
+      data: {},
+    });
+    // 将响应结果存储到响应式数据中
+
+    console.log("请求成功", result);
+    // 存储全部数据
+    goods.value = result.data;
+  } catch (error) {
+    console.log("请求失败", error);
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+};
+// 获取指标的方法
+const index = ref([]);
+const getIndexs = async function (type) {
+  try {
+    // 发送POST请求
+    const result = await request({
+      url: "/product/index",
+      data: {
+        type: type,
+      },
+    });
+    // 将响应结果存储到响应式数据中
+    console.log("请求成功", result);
+    // 存储全部数据
+    index.value = result.data;
+  } catch (error) {
+    console.log("请求失败", error);
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+};
+
+// 选择商品名称是时触发的方法
+const isHC = ref(0);
+// const handleProductSelect = (productName) => {
+//   // 根据商品名称获取对应的商品信息
+//   // indexs.value.productName = productName;为什么直接绑定？？？
+//   if (productName === "homilychart") {
+//     isHC.value = 1;
+//     addConsume.value.productName = "homilychart"; // 商品名
+//     addConsume.value.indexName = ""; // 指标名
+//   } else {
+//     isHC.value = 0;
+//     addConsume.value.productName = productName;
+//     addConsume.value.indexName = "";
+//   }
+// };
+const indexs = ref([]);
+// const handleIndexSelect = () => {
+//   if (isHC.value === 1 && addConsume.value.indexName) {
+//     addConsume.value.productName = "homilychart" + addConsume.value.indexName;
+//   }
+// };
+
+// 商品搜索逻辑
+const queryProductSearch = (queryString, cb) => {
+  const results = queryString
+    ? goods.value.filter(item => 
+        item.name.toLowerCase().includes(queryString.toLowerCase())
+      )
+    : goods.value;
+  cb(results);
+};
+
+// 指标搜索逻辑
+const queryIndexSearch = (queryString, cb) => {
+  const results = queryString
+    ? index.value.filter(item => // 将 indexData 替换为 index
+        item.name.toLowerCase().includes(queryString.toLowerCase())
+      )
+    : index.value;
+  cb(results);
+};
+
+// 商品选择处理（重点修改）
+const handleProductSelect = async (selectedItem) => {
+  const productName = typeof selectedItem === 'string' 
+    ? selectedItem 
+    : selectedItem?.name || '';
+
+  if (productName === "homilychart") {
+    isHC.value = 1;
+    addConsume.value.productName = "homilychart";
+    addConsume.value.indexName = "";
+    // 动态获取指标数据
+    await getIndexs("homilychart");
+  } else {
+    isHC.value = 0;
+    addConsume.value.productName = productName;
+    addConsume.value.indexName = "";
+  }
+};
+
+// 指标选择处理（重点修改）
+const handleIndexSelect = (selectedItem) => {
+  if (isHC.value === 1) {
+    const indexName = typeof selectedItem === 'string' 
+      ? selectedItem 
+      : selectedItem?.name || '';
+    // 仅更新指标名称字段
+    addConsume.value.indexName = indexName;
+  }
+};
+
+// 处理自由输入指标
+const handleIndexBlur = (e) => {
+  if (isHC.value === 1 && e.target.value) {
+    // 仅更新指标名称字段
+    addConsume.value.indexName = e.target.value;
+  }
+};
+
+
+
+
+// 挂载
+onMounted(async function () {
+  await getAdminData();
+  await getGoods();
+  await getIndexs(1);
+});
+
+const handleSelectBlur = (value) => {
+  // 这里可以根据需求添加额外逻辑，比如验证输入值是否有效
+  // 目前直接将输入值同步到 v-model 绑定的值上
+  if (value) {
+    // 若选择的是商品名称
+    if (addConsume.value.productName === value) {
+      addConsume.value.productName = value;
+    } 
+    // 若选择的是指标名称
+    else if (indexs.value.name === value) {
+      indexs.value.name = value;
+    }
+  }
+};
+</script>
+
+<template>
+
+<div>
+  
+
+    <!-- 根据activeTab切换显示内容 -->
+   <!-- 新增消耗的布局---------------------------------------------------------- -->
+  <!-- <div v-if="activeTab === 'addConsume'"> -->
+  <!-- <div style="margin-bottom: 20px; font-weight: bolder">新增消费</div> -->
+
+  <el-form
+    :model="addConsume"
+    ref="Ref"
+    :rules="rules"
+    label-width="auto"
+    style="max-width: 750px;"
+    class="form-style"
+  >
+    <el-form-item prop="jwcode" label="精网号">
+      <el-input
+        v-model="addConsume.jwcode"
+        style="width: 220px"
+        @change="getUserGold(addConsume.jwcode)"
+      />
+      <el-button
+        type="primary"
+        @click="getUser(addConsume.jwcode)"
+        style="margin-left: 20px"
+        >查询</el-button
+      >
+    </el-form-item>
+     <div style="display: flex; align-items: center; gap: 20px;">
+    <el-form-item prop="productName" label="商品名称" style="flex: 1; margin-right: 0px">
+    <el-autocomplete
+      v-model="addConsume.productName"
+      :fetch-suggestions="queryProductSearch"
+      placeholder="请输入或选择商品"
+      style="width: 300px"
+      @select="handleProductSelect"
+      value-key="name"
+      clearable
+      :trigger-on-focus="true"
+    >
+      <template #default="{ item }">
+        <div>{{ item.name }}</div>
+      </template>
+    </el-autocomplete>
+  </el-form-item>
+
+  <!-- 指标选择 -->
+   <!-- 使用flex布局会使页面更灵活好用，修改之前选中商品名称后才会正常布局的bug -->
+  <!-- <el-form-item prop="indexName" label="指标" v-if="isHC == 1" style="flex: 1;margin-left: -20px">
+    <el-autocomplete
+      v-model="addConsume.indexName"
+      :fetch-suggestions="queryIndexSearch"
+      placeholder="请输入或选择指标"
+      style="width: 140px"
+      @select="handleIndexSelect"
+      @blur="handleIndexBlur"
+      value-key="name"
+      :disabled="isHC !== 1"
+      clearable
+      free-solo
+      allow-create
+    >
+      <template #default="{ item }">
+        <div>{{ item.name }}</div>
+      </template>
+    </el-autocomplete>
+  </el-form-item>
+  <el-form-item label="指标" v-else style="flex:1;margin-left: -5px;">
+    <el-input disabled placeholder="无" style="width: 100px" />
+  </el-form-item> -->
+</div>
+    <el-form-item prop="allGold" label="消费金币总数" >
+      <el-input
+        v-model="addConsume.allGold"
+        style="width: 100px"
+        @change="calculateCoins()"
+      />
+    </el-form-item>
+    <div style="display: flex; align-items: center">
+      <el-form-item prop="rechargeCoin" label="永久金币" style="float: left">
+        <el-input
+          disabled
+          v-model="addConsume.rechargeCoin"
+          style="width: 100px; margin-left: -5px"
+        />
+        <p style="margin-right: 0px">个</p>
+      </el-form-item>
+      <el-form-item
+        prop="freeCoin"
+        label="免费金币"
+        style="float: left; margin-left: -20px"
+      >
+        <el-input
+          disabled
+          v-model="addConsume.freeCoin"
+          style="width: 100px; margin-left: -5px"
+        />
+        <p style="margin-right: 0px">个</p>
+      </el-form-item>
+      <el-form-item prop="taskCoin" label="任务金币" style="margin-left: -20px">
+        <el-input
+          disabled
+          v-model="addConsume.taskCoin"
+          style="width: 100px; margin-left: -5px"
+        />
+        <p style="margin-right: 20px">个</p>
+      </el-form-item>
+    </div>
+    <el-form-item prop="remark" label="备注">
+      <el-input
+        v-model="addConsume.remark"
+        style="width: 300px"
+        :rows="2"
+        maxlength="100"
+        show-word-limit
+        type="textarea"
+      />
+    </el-form-item>
+    <el-form-item prop="commitName" label="提交人">
+      <el-input
+        style="width: 300px"
+        :value="adminData.name"
+        disabled
+        placeholder="提交人姓名"
+      />
+    </el-form-item>
+    <el-button type="success" @click="delteConsume" style="margin-left: 280px">重置</el-button>
+    <el-button type="primary" @click="addBefore"> 提交 </el-button>
+  </el-form>
+
+  <!-- 客户信息栏 -->
+  <el-card style="width: 850px; float: right" class="customer-info">
+    <el-form
+      :model="user"
+      label-width="auto"
+      style="max-width: 1200px"
+      label-position="left"
+    >
+      <el-text size="large" style="margin-left: 20px">客户信息</el-text>
+      <el-row style="margin-top: 20px">
+        <el-col :span="10">
+          <el-form-item label="姓名:">
+            <p>{{ user.name }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="14">
+          <el-form-item label="历史金币总数">
+            <!-- 检查 user.totalRechargeGold 是否为有效的数字 -->
+            <p v-if="!isNaN(Number(user.totalRechargeGold))">
+              {{ Number(user.totalRechargeGold / 100) }}
+            </p>
+            <!-- 如果不是有效的数字，显示默认值 -->
+            <p v-else></p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item label="精网号">
+            <p>{{ user.jwcode }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="14">
+          <el-form-item label="当前金币总数" style="width: 500px">
+            <span
+              style="color: #2fa1ff; margin-right: 5px"
+              v-if="user.buyJb !== undefined"
+              >{{
+                (user.buyJb + user.free6 + user.free12 + user.coreJb) / 100
+              }}</span
+            >
+            <span
+              style="display: inline; white-space: nowrap; color: #b1b1b1"
+              v-if="user.buyJb !== undefined"
+              >(永久金币:{{ user.buyJb / 100 }};免费金币:{{
+                (user.free6 + user.free12) / 100
+              }};任务金币:{{ user.coreJb / 100 }})</span
+            >
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item label="首次充值日期">
+            <p v-if="user.firstRechargeDate">
+              {{ moment(user.firstRechargeDate).format("YYYY-MM-DD HH:mm:ss") }}
+            </p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="14">
+          <el-form-item label="充值次数">
+            <p style="color: #2fa1ff">{{ user.rechargeTimes }}</p>
+          </el-form-item>
+        </el-col>
+        <!-- <el-col :span="10">
+          <el-form-item label="负责客服">
+            <p>{{ adminData.name }}</p>
+          </el-form-item>
+        </el-col> -->
+        <el-col :span="10">
+          <el-form-item label="消费次数">
+            <p style="color: #2fa1ff">{{ user.spendTimes }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item label="所属门店">
+            <p>{{ adminData.area }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="14">
+          <!-- <el-form-item label="待审核">
+            <p style="color: #2fa1ff">
+              {{ user.A }}
+            </p>
+          </el-form-item> -->
+        </el-col>
+      </el-row>
+    </el-form>
+  </el-card>
+  </div>
+
+  <!-- 金币消耗明细的布局------------------------------------------------------- -->
+  <!-- <div v-else-if="activeTab === 'detail'"> -->
+    
+  <!-- </div>
+  </div> -->
+</template>
+
+<style scoped>
+p {
+  margin: 0px;
+}
+
+.el-form-item {
+  margin-left: 50px;
+}
+
+/* 上传图片的格式 */
+.avatar-uploader .avatar {
+  width: 50px;
+  height: 50px;
+  display: block;
+}
+</style>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+}
+
+.form-style {
+  margin-top: 50px;
+  max-width: 50%;
+  float: left;
+}
+
+.form-style2 {
+  max-width: 60%;
+}
+
+p {
+  font-size: 13px;
+  transform: scale(1);
+}
+</style>
diff --git a/src/views/consume/coinConsume.vue b/src/views/consume/coinConsume.vue
index 94d86aa..91086e2 100644
--- a/src/views/consume/coinConsume.vue
+++ b/src/views/consume/coinConsume.vue
@@ -1,690 +1,61 @@
-<script setup>
-import { reactive, onMounted } from "vue";
-import { ref, computed, watch } from "vue";
-import { ElMessage } from "element-plus";
-import { Plus } from "@element-plus/icons-vue";
-import axios from "axios";
-import { ElMessageBox } from "element-plus";
-import API from "../../api/index.js";
-import moment from "moment";
-import _ from "lodash";
-import request from "@/util/http";
-// 精网号去空格
-const trimJwCode = () => {
-  if (addConsume.value.jwcode) {
-    addConsume.value.jwcode = addConsume.value.jwcode.replace(/\s/g, ''); 
-  }
-}
-//这是获取用户信息的接口
-const adminData = ref({});
-const getAdminData = async function () {
-  try {
-    const result = await request({
-      url: "/admin/userinfo",
-      data: {},
-    });
-    adminData.value = result;
-    addConsume.value.adminId = adminData.value.adminId;
-    addConsume.value.name = adminData.value.name;
-    console.log("请求成功", result);
-    console.log("用户信息", adminData.value);
-  } catch (error) {
-    console.log("请求失败", error);
-  }
-};
-
-// 这是添加消费信息的表单
-const addConsume = ref({
-  freeCoin: 0,
-  rechargeCoin: 0,
-  taskCoin: 0,
-  updateType: "1",
-  indexName:"", //这个是指标字段，后面绑定
-});
-// 这是添加消费信息的接口
-const add = async function () {
-  try {
-    // 处理数据，使用楼上接口后需要隐藏
-    addConsume.value.rechargeCoin = Number(addConsume.value.rechargeCoin * 100);
-    addConsume.value.freeCoin = Number(addConsume.value.freeCoin * 100);
-    addConsume.value.taskCoin = Number(addConsume.value.taskCoin * 100);
-    addConsume.value.productName = indexs.value.productName;
-    // 发送POST请求
-    const result = await request({
-      url: "/consume/add",
-      data: addConsume.value,
-    });
-    if (result.code === 0) {
-      ElMessage.error(result.msg);
-      return;
-    } else {
-      ElMessage.success("添加成功");
-    }
-    //重置表单
-    addConsume.value = {};
-    addConsume.value.adminId = adminData.value.adminId;
-    addConsume.value.adminName = adminData.value.adminName;
-    addConsume.value.updateType = "1";
-    addConsume.value.freeCoin = 0;
-    addConsume.value.rechargeCoin = 0;
-    addConsume.value.taskCoin = 0;
-    indexs.value = {};
-    console.log("请求成功", result);
-    user.value = {};
-  } catch (error) {
-    console.log("请求失败", error);
-    ElMessage.error("添加失败，请检查输入内容是否正确");
-
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-};
-const addBefore = () => {
-  Ref.value.validate(async (valid) => {
-    if (valid) {
-      ElMessageBox.confirm("确认添加？")
-        .then(() => {
-          addConsume.value.freeCoin = Number(-addConsume.value.freeCoin);
-          addConsume.value.rechargeCoin = Number(
-            -addConsume.value.rechargeCoin
-          );
-          addConsume.value.taskCoin = Number(-addConsume.value.taskCoin);
-          add();
-          console.log("添加成功");
-          imageUrl.value = "";
-          addConsume.value = {};
-        })
-        .catch(() => {
-          console.log("取消添加");
-        });
-    } else {
-      //提示
-      ElMessage({
-        type: "error",
-        message: "请检查输入内容",
-      });
-    }
-  });
-};
-
-// 表单验证
-// 开始时间改变时，重新验证结束时间
-const Ref = ref(null);
-
-const checkFreeGoldRadio = function (rule, value, callback) {
-  if (value == "0" || value == null || value == "") {
-    callback(new Error("请输入消费金币总数"));
-  } else if (value < 0 || isNaN(value)) {
-    callback(new Error("请输入正确的格式"));
-  } else {
-    callback();
-  }
-};
-const rules = reactive({
-  jwcode: [{ required: true, message: "请输入精网号", trigger: "blur" }],
-  productName: [{ required: true, message: "请选择消费商品", trigger: "change" }], // 修改为 change
-  taskCoin: [{ required: true, message: "请输入任务金币", trigger: "blur" }],
-  freeCoin: [{ required: true, message: "请输入免费金币", trigger: "blur" }],
-  rechargeCoin: [
-    { required: true, message: "请输入免费金币", trigger: "blur" },
-  ],
-  allGold: [
-    { required: true, message: "消费金币总数不能为空", trigger: "blur" },
-    { validator: checkFreeGoldRadio, trigger: "blur" },
-  ],
-  indexName: [
-    {
-      required: true,
-      validator: (rule, value, callback) => {
-        if (isHC.value === 1 && !value) {
-          callback(new Error("请选择指标"));
-        } else {
-          callback();
-        }
-      },
-      trigger: ["change", "blur"],
-    },
-  ]
-});
-//这是重置方法
-const delteConsume = function () {
-  addConsume.value = {};
-  addConsume.value.adminId = adminData.value.adminId;
-  addConsume.value.adminName = adminData.value.adminName;
-  addConsume.value.updateType = "1";
-  addConsume.value.freeCoin = 0;
-  addConsume.value.rechargeCoin = 0;
-  addConsume.value.taskCoin = 0;
-  indexs.value = {};
-  isHC.value = 0;
-};
-// 查找客户信息的方法
-const user = ref({
-  firstRechargeTime: "",
-});
-const getUser = async function (jwcode) {
-  trimJwCode();
-  try {
-    // 发送POST请求
-    const result = await request({
-      url: "/recharge/user",
-      data: {
-        jwcode: addConsume.value.jwcode,
-        area: adminData.value.area,
-      },
-    });
-    console.log("请求成功", result);
-
-    if (result.code === 0) {
-      ElMessage.error(result.msg);
-    } else {
-      user.value = result.data;
-      user.value.A =
-        Number(user.value.pendingRechargeTimes) +
-        Number(user.value.pendingSpendTimes);
-      console.log("用户信息", user.value);
-      ElMessage.success(result.msg);
-    }
-  } catch (error) {
-    console.log("请求失败", error);
-    ElMessage.error("查询失败，请检查精网号是否正确");
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-};
-
-
-//下面这个也是校验精网号是否存在的方法，通过脱离文本框实现，但是上面方法绑定了信息面板，在输入正确的精网号后能显示。
-//这是查询用户金币信息的接口
-const userGold = ref({});
-const getUserGold = async function (jwcode) {
-  trimJwCode();
-  try {
-    // 发送POST请求
-    const result = await request({
-      url: "/recharge/user",
-      data: {
-        jwcode: addConsume.value.jwcode,
-        area: adminData.value.area,
-      },
-    });
-    // 将响应结果存储到响应式数据中
-    console.log("请求成功", result);
-    if (result.code === 0) {
-      //ElMessage.error(result.msg);
-    } else {
-      // 存储表格数据
-      userGold.value = result.data;
-      addConsume.value.username = result.data.name;
-      addConsume.value.area = result.data.area;
-     // ElMessage.success(result.msg);
-    }
-  } catch (error) {
-    console.log("请求失败", error);
-    //ElMessage.error("无此精网号");
-    addConsume.value.jwcode = "";
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-};
-
-function calculateCoins() {
-  if (
-    (userGold.value.coreJb +
-      userGold.value.free6 +
-      userGold.value.free12 +
-      userGold.value.buyJb) /
-      100 <
-    addConsume.value.allGold
-  ) {
-    addConsume.value.allGold = 0;
-    addConsume.value.taskCoin = 0;
-    addConsume.value.freeCoin = 0;
-    addConsume.value.rechargeCoin = 0;
-    ElMessage.error("金币不足，请充值");
-    return;
-  }
-  // 这是计算用户的三种金币的接口
-  else {
-    // 保存原始的allGold值
-    const originalAllGold = addConsume.value.allGold;
-
-    // 确保todayTask和todayFree是有效的数字
-    const todayTask =
-      typeof userGold.value.coreJb === "number"
-        ? userGold.value.coreJb / 100
-        : 0;
-    const todayFree =
-      typeof (userGold.value.free6 + userGold.value.free12) === "number"
-        ? (userGold.value.free6 + userGold.value.free12) / 100
-        : 0;
-
-    // 根据用户输入的消费金币总数和已有的金币数量进行计算
-    addConsume.value.taskCoin = Math.min(originalAllGold, todayTask);
-    let remainingGold = originalAllGold - addConsume.value.taskCoin;
-
-    addConsume.value.freeCoin = Math.min(remainingGold, todayFree);
-    remainingGold -= addConsume.value.freeCoin;
-
-    addConsume.value.rechargeCoin = remainingGold; // 剩余的都算作永久金币
-
-    // 恢复allGold的原始值
-    addConsume.value.allGold = originalAllGold;
-
-    // 确保taskCoin, freeCoin, rechargeCoin不是NaN，如果是，则设置为0
-    if (isNaN(addConsume.value.taskCoin)) addConsume.value.taskCoin = 0;
-    if (isNaN(addConsume.value.freeCoin)) addConsume.value.freeCoin = 0;
-    if (isNaN(addConsume.value.rechargeCoin)) addConsume.value.rechargeCoin = 0;
-
-    console.log("计算结果", addConsume.value);
-  }
-}
-
-// 查询商品的接口
-const goods = ref([]);
-const getGoods = async function () {
-  try {
-    // 发送POST请求
-    const result = await request({
-      url: "/product",
-      data: {},
-    });
-    // 将响应结果存储到响应式数据中
-
-    console.log("请求成功", result);
-    // 存储全部数据
-    goods.value = result.data;
-  } catch (error) {
-    console.log("请求失败", error);
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-};
-// 获取指标的方法
-const index = ref([]);
-const getIndexs = async function (type) {
-  try {
-    // 发送POST请求
-    const result = await request({
-      url: "/product/index",
-      data: {
-        type: type,
-      },
-    });
-    // 将响应结果存储到响应式数据中
-    console.log("请求成功", result);
-    // 存储全部数据
-    index.value = result.data;
-  } catch (error) {
-    console.log("请求失败", error);
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-};
-
-// 选择商品名称是时触发的方法
-const isHC = ref(0);
-// const handleProductSelect = (productName) => {
-//   // 根据商品名称获取对应的商品信息
-//   // indexs.value.productName = productName;为什么直接绑定？？？
-//   if (productName === "homilychart") {
-//     isHC.value = 1;
-//     addConsume.value.productName = "homilychart"; // 商品名
-//     addConsume.value.indexName = ""; // 指标名
-//   } else {
-//     isHC.value = 0;
-//     addConsume.value.productName = productName;
-//     addConsume.value.indexName = "";
-//   }
-// };
-const indexs = ref([]);
-// const handleIndexSelect = () => {
-//   if (isHC.value === 1 && addConsume.value.indexName) {
-//     addConsume.value.productName = "homilychart" + addConsume.value.indexName;
-//   }
-// };
-
-// 商品搜索逻辑
-const queryProductSearch = (queryString, cb) => {
-  const results = queryString
-    ? goods.value.filter(item => 
-        item.name.toLowerCase().includes(queryString.toLowerCase())
-      )
-    : goods.value;
-  cb(results);
-};
-
-// 指标搜索逻辑
-const queryIndexSearch = (queryString, cb) => {
-  const results = queryString
-    ? index.value.filter(item => // 将 indexData 替换为 index
-        item.name.toLowerCase().includes(queryString.toLowerCase())
-      )
-    : index.value;
-  cb(results);
-};
-
-// 商品选择处理（重点修改）
-const handleProductSelect = async (selectedItem) => {
-  const productName = typeof selectedItem === 'string' 
-    ? selectedItem 
-    : selectedItem?.name || '';
-
-  if (productName === "homilychart") {
-    isHC.value = 1;
-    addConsume.value.productName = "homilychart";
-    addConsume.value.indexName = "";
-    // 动态获取指标数据
-    await getIndexs("homilychart");
-  } else {
-    isHC.value = 0;
-    addConsume.value.productName = productName;
-    addConsume.value.indexName = "";
-  }
-};
-
-// 指标选择处理（重点修改）
-const handleIndexSelect = (selectedItem) => {
-  if (isHC.value === 1) {
-    const indexName = typeof selectedItem === 'string' 
-      ? selectedItem 
-      : selectedItem?.name || '';
-    // 仅更新指标名称字段
-    addConsume.value.indexName = indexName;
-  }
-};
-
-// 处理自由输入指标
-const handleIndexBlur = (e) => {
-  if (isHC.value === 1 && e.target.value) {
-    // 仅更新指标名称字段
-    addConsume.value.indexName = e.target.value;
-  }
-};
-
-
-// 挂载
-onMounted(async function () {
-  await getAdminData();
-  await getGoods();
-  await getIndexs(1);
-});
-
-const handleSelectBlur = (value) => {
-  // 这里可以根据需求添加额外逻辑，比如验证输入值是否有效
-  // 目前直接将输入值同步到 v-model 绑定的值上
-  if (value) {
-    // 若选择的是商品名称
-    if (addConsume.value.productName === value) {
-      addConsume.value.productName = value;
-    } 
-    // 若选择的是指标名称
-    else if (indexs.value.name === value) {
-      indexs.value.name = value;
-    }
-  }
-};
-</script>
-
 <template>
-  <div style="margin-bottom: 20px; font-weight: bolder">新增消费</div>
-
-  <el-form
-    :model="addConsume"
-    ref="Ref"
-    :rules="rules"
-    label-width="auto"
-    style="max-width: 750px;"
-    class="form-style"
-  >
-    <el-form-item prop="jwcode" label="精网号">
-      <el-input
-        v-model="addConsume.jwcode"
-        style="width: 220px"
-        @change="getUserGold(addConsume.jwcode)"
-      />
-      <el-button
-        type="primary"
-        @click="getUser(addConsume.jwcode)"
-        style="margin-left: 20px"
-        >查询</el-button
+  <div>
+    <!-- 这里放置标签切换的按钮 -->
+    <el-button-group>
+    <!-- 切换后状态显示 primary 样式否则是默认样式 -->
+      <el-button 
+        :type="activeTab === 'add' ? 'primary' : 'default'" 
+        @click="goToAdd"
       >
-    </el-form-item>
-     <div style="display: flex; align-items: center; gap: 20px;">
-    <el-form-item prop="productName" label="商品名称" style="flex: 1; margin-right: 0px">
-    <el-autocomplete
-      v-model="addConsume.productName"
-      :fetch-suggestions="queryProductSearch"
-      placeholder="请输入或选择商品"
-      style="width: 300px"
-      @select="handleProductSelect"
-      value-key="name"
-      clearable
-      :trigger-on-focus="true"
-    >
-      <template #default="{ item }">
-        <div>{{ item.name }}</div>
-      </template>
-    </el-autocomplete>
-  </el-form-item>
-
-  <!-- 指标选择 -->
-   <!-- 使用flex布局会使页面更灵活好用，修改之前选中商品名称后才会正常布局的bug -->
-  <el-form-item prop="indexName" label="指标" v-if="isHC == 1" style="flex: 1;margin-left: -20px">
-    <el-autocomplete
-      v-model="addConsume.indexName"
-      :fetch-suggestions="queryIndexSearch"
-      placeholder="请输入或选择指标"
-      style="width: 140px"
-      @select="handleIndexSelect"
-      @blur="handleIndexBlur"
-      value-key="name"
-      :disabled="isHC !== 1"
-      clearable
-      free-solo
-      allow-create
-    >
-      <template #default="{ item }">
-        <div>{{ item.name }}</div>
-      </template>
-    </el-autocomplete>
-  </el-form-item>
-  <el-form-item label="指标" v-else style="flex:1;margin-left: -5px;">
-    <el-input disabled placeholder="无" style="width: 100px" />
-  </el-form-item>
-</div>
-    <el-form-item prop="allGold" label="消费金币总数" >
-      <el-input
-        v-model="addConsume.allGold"
-        style="width: 100px"
-        @change="calculateCoins()"
-      />
-    </el-form-item>
-    <div style="display: flex; align-items: center">
-      <el-form-item prop="rechargeCoin" label="永久金币" style="float: left">
-        <el-input
-          disabled
-          v-model="addConsume.rechargeCoin"
-          style="width: 100px; margin-left: -5px"
-        />
-        <p style="margin-right: 0px">个</p>
-      </el-form-item>
-      <el-form-item
-        prop="freeCoin"
-        label="免费金币"
-        style="float: left; margin-left: -20px"
+        新增消耗
+      </el-button>
+      <el-button 
+        :type="activeTab === 'detail' ? 'primary' : 'default'" 
+        @click="goToDetail"
       >
-        <el-input
-          disabled
-          v-model="addConsume.freeCoin"
-          style="width: 100px; margin-left: -5px"
-        />
-        <p style="margin-right: 0px">个</p>
-      </el-form-item>
-      <el-form-item prop="taskCoin" label="任务金币" style="margin-left: -20px">
-        <el-input
-          disabled
-          v-model="addConsume.taskCoin"
-          style="width: 100px; margin-left: -5px"
-        />
-        <p style="margin-right: 20px">个</p>
-      </el-form-item>
-    </div>
-    <el-form-item prop="remark" label="备注">
-      <el-input
-        v-model="addConsume.remark"
-        style="width: 300px"
-        :rows="2"
-        maxlength="100"
-        show-word-limit
-        type="textarea"
-      />
-    </el-form-item>
-    <el-form-item prop="commitName" label="提交人">
-      <el-input
-        style="width: 300px"
-        :value="adminData.name"
-        disabled
-        placeholder="提交人姓名"
-      />
-    </el-form-item>
-    <el-button type="success" @click="delteConsume" style="margin-left: 280px">重置</el-button>
-    <el-button type="primary" @click="addBefore"> 提交 </el-button>
-  </el-form>
-
-  <!-- 客户信息栏 -->
-  <el-card style="width: 850px; float: right" class="customer-info">
-    <el-form
-      :model="user"
-      label-width="auto"
-      style="max-width: 1200px"
-      label-position="left"
-    >
-      <el-text size="large" style="margin-left: 20px">客户信息</el-text>
-      <el-row style="margin-top: 20px">
-        <el-col :span="10">
-          <el-form-item label="姓名:">
-            <p>{{ user.name }}</p>
-          </el-form-item>
-        </el-col>
-        <el-col :span="14">
-          <el-form-item label="历史金币总数">
-            <!-- 检查 user.totalRechargeGold 是否为有效的数字 -->
-            <p v-if="!isNaN(Number(user.totalRechargeGold))">
-              {{ Number(user.totalRechargeGold / 100) }}
-            </p>
-            <!-- 如果不是有效的数字，显示默认值 -->
-            <p v-else></p>
-          </el-form-item>
-        </el-col>
-        <el-col :span="10">
-          <el-form-item label="精网号">
-            <p>{{ user.jwcode }}</p>
-          </el-form-item>
-        </el-col>
-        <el-col :span="14">
-          <el-form-item label="当前金币总数" style="width: 500px">
-            <span
-              style="color: #2fa1ff; margin-right: 5px"
-              v-if="user.buyJb !== undefined"
-              >{{
-                (user.buyJb + user.free6 + user.free12 + user.coreJb) / 100
-              }}</span
-            >
-            <span
-              style="display: inline; white-space: nowrap; color: #b1b1b1"
-              v-if="user.buyJb !== undefined"
-              >(永久金币:{{ user.buyJb / 100 }};免费金币:{{
-                (user.free6 + user.free12) / 100
-              }};任务金币:{{ user.coreJb / 100 }})</span
-            >
-          </el-form-item>
-        </el-col>
-        <el-col :span="10">
-          <el-form-item label="首次充值日期">
-            <p v-if="user.firstRechargeDate">
-              {{ moment(user.firstRechargeDate).format("YYYY-MM-DD HH:mm:ss") }}
-            </p>
-          </el-form-item>
-        </el-col>
-        <el-col :span="14">
-          <el-form-item label="充值次数">
-            <p style="color: #2fa1ff">{{ user.rechargeTimes }}</p>
-          </el-form-item>
-        </el-col>
-        <!-- <el-col :span="10">
-          <el-form-item label="负责客服">
-            <p>{{ adminData.name }}</p>
-          </el-form-item>
-        </el-col> -->
-        <el-col :span="10">
-          <el-form-item label="消费次数">
-            <p style="color: #2fa1ff">{{ user.spendTimes }}</p>
-          </el-form-item>
-        </el-col>
-        <el-col :span="10">
-          <el-form-item label="所属门店">
-            <p>{{ adminData.area }}</p>
-          </el-form-item>
-        </el-col>
-        <el-col :span="14">
-          <!-- <el-form-item label="待审核">
-            <p style="color: #2fa1ff">
-              {{ user.A }}
-            </p>
-          </el-form-item> -->
-        </el-col>
-      </el-row>
-    </el-form>
-  </el-card>
+        金币消耗明细
+      </el-button>
+    </el-button-group>
+    <!-- 渲染子路由组件 -->
+    <router-view></router-view>
+  </div>
 </template>
 
-<style scoped>
-p {
-  margin: 0px;
-}
+<script setup>
+import { ref, watch } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
 
-.el-form-item {
-  margin-left: 50px;
-}
+const router = useRouter();// 获取路由实例
+const route = useRoute();// 获取当前路由信息
+// 定义响应式变量 activeTab 来跟踪当前激活的标签
+const activeTab = ref(route.name === 'coinConsumeDetail' ? 'detail' : 'add');
+//也就是说如果当前在coinConsumeDetail页面，那么就是detail，否则默认情况都展示add页面
+//此时获取到的路由信息是coinConsume，所以默认是add
 
-/* 上传图片的格式 */
-.avatar-uploader .avatar {
-  width: 50px;
-  height: 50px;
-  display: block;
-}
-</style>
-
-<style>
-.avatar-uploader .el-upload {
-  border: 1px dashed var(--el-border-color);
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-  transition: var(--el-transition-duration-fast);
-}
 
-.avatar-uploader .el-upload:hover {
-  border-color: var(--el-color-primary);
-}
-
-.el-icon.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 50px;
-  height: 50px;
-  text-align: center;
-}
+const goToAdd = () => {
+  // 点击按钮时更新 activeTab 为 add
+  activeTab.value = 'add';
+  router.push({ name: 'addCoinConsume' });
+};
 
-.form-style {
-  margin-top: 50px;
-  max-width: 50%;
-  float: left;
-}
+const goToDetail = () => {
+  // 点击按钮时更新 activeTab 为 detail
+  activeTab.value = 'detail';
+  router.push({ name: 'coinConsumeDetail' });
+};
 
-.form-style2 {
-  max-width: 60%;
-}
+// 监听路由变化，更新 activeTab
+watch(() => route.name, (newName) => {
+  if (newName === 'addCoinConsume') {
+    activeTab.value = 'add';
+  } else if (newName === 'coinConsumeDetail') {
+    activeTab.value = 'detail';
+  }
+});
 
-p {
-  font-size: 13px;
-  transform: scale(1);
+// 当进入父路由时，默认跳转到新增消耗页面
+if (route.name === 'coinConsume') {
+  router.push({ name: 'addCoinConsume' });
 }
-</style>
+</script>
diff --git a/src/views/consume/coinConsumeDetail.vue b/src/views/consume/coinConsumeDetail.vue
new file mode 100644
index 0000000..d4fcd42
--- /dev/null
+++ b/src/views/consume/coinConsumeDetail.vue
@@ -0,0 +1,629 @@
+<script setup>
+import { ref, onMounted, reactive, computed } from 'vue'
+import ElementPlus from 'element-plus'
+import { AiFillRead } from 'vue-icons-plus/ai'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import axios from 'axios'
+import request from '@/util/http'
+// 变量
+//这是获取用户信息的接口
+const adminData = ref({})
+const getAdminData = async function () {
+  try {
+    const result = await request({
+      url: '/admin/userinfo',
+      data: {}
+    })
+    adminData.value = result
+    console.log('请求成功', result)
+    console.log('用户信息', adminData.value)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+// 充值明细表格
+const tableData = ref([])
+// 搜索======================================
+// 搜索detailVo
+const detailVo = ref({})
+// 搜索对象
+const getObj = ref({
+  pageNum: 1,
+  pageSize: 50
+})
+//分页总条目
+const total = ref(100)
+// 搜索对象时间
+const getTime = ref([])
+// 搜索活动列表
+const activity = ref([])
+// 所有信息
+const allData = ref([])
+// 搜索地区列表
+const area = ref([])
+
+//标签页默认高亮选项
+const activeName = ref('all')
+
+// 消费平台选项
+const consumePlatform = [
+  {
+    value: '4',
+    label: '金币系统'
+  },
+
+  {
+    value: '1',
+    label: 'Homily Chart'
+  },
+  {
+    value: '2',
+    label: 'Homily Link'
+  },
+  {
+    value: '3',
+    label: 'ERP系统'
+  }
+]
+
+// //表格高度
+// const tableHeight = computed(function () {
+//   return (getObj.value.pageSize + 1) * 41 + "px";
+// });
+// 方法
+// 合计数的显示数据
+const tableDataTotal = ref({})
+const rechargeCoin = ref(0)
+const freeCoin = ref(0)
+const taskCoin = ref(0)
+const totalCoin = ref(0)
+// 搜索=========================================================================================================================================================
+// 搜索方法
+const get = async function (val) {
+  try {
+    // 地区赋值
+    if (adminData.value.area != '总部') {
+      detailVo.value.area = adminData.value.area
+    }
+    // 搜索参数页码赋值
+    if (typeof val === 'number') {
+      getObj.value.pageNum = val
+    }
+    // 搜索参数时间赋值
+    if (getTime.value != null) {
+      if (getTime.value.startDate != '' && getTime.value.endDate != '') {
+        detailVo.value.startDate = getTime.value[0]
+        detailVo.value.endDate = getTime.value[1]
+      }
+    } else {
+      detailVo.value.startDate = ''
+      detailVo.value.endDate = ''
+    }
+    detailVo.value.sortField = sortField.value
+    detailVo.value.sortOrder = sortOrder.value
+    console.log('搜索参数', getObj.value)
+    // 发送POST请求
+    const result = await request({
+      url: '/consume/select',
+      data: {
+        ...getObj.value,
+        consumeDetail: { ...detailVo.value }
+      }
+    })
+    // 合计数的接口
+    // 复制一份 detail.value 并移除排序字段和排序方式
+    const detailWithoutSort = { ...detailVo.value }
+    delete detailWithoutSort.sortField
+    delete detailWithoutSort.sortOrder
+    const result2 = await request({
+      url: '/consume/SumConsume',
+      data: {
+        ...detailWithoutSort
+      }
+    })
+
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    console.log('请求成功2', result2)
+    // 存储表格数据
+    tableData.value = result.data.list
+    tableDataTotal.value = result2.data
+    if (result2.data == null) {
+      console.log('请求成功2', result2)
+      tableDataTotal.value = {
+        sumRcion: 0,
+        sumFcion: 0,
+        sumTcion: 0,
+        sumcion: 0
+      }
+    }
+
+    console.log('tableDataT', tableDataTotal)
+
+    // 修改为保留两位小数
+    rechargeCoin.value = parseFloat(
+      (tableDataTotal.value.sumRcion / 100).toFixed(2)
+    )
+    freeCoin.value = parseFloat(
+      (tableDataTotal.value.sumFcion / 100).toFixed(2)
+    )
+    taskCoin.value = parseFloat(
+      (tableDataTotal.value.sumTcion / 100).toFixed(2)
+    )
+    totalCoin.value = parseFloat(
+      (tableDataTotal.value.sumcion / 100).toFixed(2)
+    )
+    console.log('tableData', tableData.value)
+    // 存储分页总数
+    total.value = result.data.total
+    console.log('total', total.value)
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// 搜索
+const search = function () {
+  getObj.value.pageNum = 1
+  get()
+}
+// 重置
+const reset = function () {
+  detailVo.value.productName = ''
+  detailVo.value.area = ''
+  detailVo.value.consumePlatform = ''
+  detailVo.value.consumeType = ''
+  detailVo.value.startDate = ''
+  detailVo.value.endDate = ''
+  sortField.value = ''
+  sortOrder.value = ''
+  getTime.value = {}
+}
+// 今天
+const getToday = function () {
+  const today = new Date()
+  const startDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate()
+  )
+  const endDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('getTime', getTime.value)
+  get()
+}
+// 昨天
+const getYesterday = function () {
+  const yesterday = new Date()
+  yesterday.setDate(yesterday.getDate() - 1)
+  const startDate = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate()
+  )
+  const endDate = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('getTime', getTime.value)
+  get()
+}
+// 近7天
+const get7Days = function () {
+  const today = new Date()
+  const startDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() - 6
+  )
+  const endDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('getTime', getTime.value)
+  get()
+}
+//点击标签页
+const handleClick = function (tab, event) {
+  if (tab.props.name === 'all') {
+    adminAll()
+  } else if (tab.props.name === 'wait') {
+    adminWait()
+  } else if (tab.props.name === 'pass') {
+    adminPass()
+  } else if (tab.props.name === 'reject') {
+    adminReject()
+  }
+}
+
+// 挂载
+onMounted(async function () {
+  await getAdminData()
+  await get()
+  // getActivity();
+  await getArea();
+})
+
+// 验证跳转输入框的数字是否合法
+const checkNumber = function () {
+  if (typeof parseInt(getObj.value.pageNum) === 'number') {
+    console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
+    if (
+      getObj.value.pageNum > 0 &&
+      getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
+    ) {
+      getObj.value.pageNum = parseInt(getObj.value.pageNum)
+      console.log('输入的数字合法')
+      get()
+    } else {
+      //提示
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      })
+    }
+  } else {
+    //提示
+    ElMessage({
+      type: 'error',
+      message: '请检查输入内容'
+    })
+  }
+}
+// 查询商品的接口
+const goods = ref([])
+const getGoods = async function () {
+  try {
+    // 发送POST请求
+    const result = await request({
+      url: '/product/findProductName',
+      data: {}
+    })
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功product', result)
+    // 存储全部数据
+    goods.value = result.data
+    console.log('goods 数据', goods.value) // 修改日志输出
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+getGoods()
+
+// 获取地区列表的方法，虚拟接口，替换为实际的地区列表接口地址
+const getArea = async function () {
+  try {
+    // 发送请求获取地区列表
+    const result = await request({
+      url: '/area/list', 
+      data: {}
+    })
+    console.log('请求地区列表成功', result)
+    // 存储地区数据
+    area.value = result.data
+    console.log('地区数据', area.value)
+  } catch (error) {
+    console.log('请求地区列表失败', error)
+    ElMessage({
+      type: 'error',
+      message: '获取地区列表失败，请稍后重试'
+    })
+  }
+}
+
+
+// 新增排序字段和排序方式
+const sortField = ref('')
+const sortOrder = ref('')
+// 处理排序事件
+const handleSortChange = (column) => {
+  console.log('排序字段：', column.prop)
+  console.log('排序方式：', column.order)
+  if (column.prop === 'rechargeCoin') {
+    sortField.value = 'recharge_coin'
+  } else if (column.prop === 'taskCoin') {
+    sortField.value = 'task_coin'
+  } else if (column.prop === 'freeCoin') {
+    sortField.value = 'free_coin'
+  } else if (column.prop === 'createTime') {
+    sortField.value = 'create_time'
+  }
+  sortOrder.value = column.order === 'ascending' ? 'DESC' : 'ASC'
+  get()
+}
+const handlePageSizeChange = function (val) {
+  getObj.value.pageSize = val
+  get()
+}
+const handleCurrentChange = function (val) {
+  getObj.value.pageNum = val
+  get()
+}
+</script>
+
+<template>
+  <el-row>
+    <el-col>
+      <el-card style="margin-bottom: 20px;margin-top:10px">
+        <el-row style="margin-bottom: 10px">
+          <el-col :span="6">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">商品名称：</el-text>
+              <el-select
+                v-model="detailVo.productName"
+                placeholder="请选择商品名称"
+                size="large"
+                style="width: 180px"
+                clearable
+              >
+                <!-- 修改 v-for 绑定逻辑 -->
+                <el-option
+                  v-for="(item, index) in goods"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">所属地区：</el-text>
+              <el-select
+                v-model="detailVo.area"
+                placeholder="请选择所属地区"
+                size="large"
+                style="width: 180px"
+                clearable
+              >
+                <el-option
+                  v-for="(item, index) in area"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">消耗平台：</el-text>
+              <el-select
+                v-model="detailVo.consumePlatform"
+                placeholder="请选择消耗平台"
+                size="large"
+                style="width: 180px"
+                clearable
+              >
+                <el-option
+                  v-for="item in consumePlatform"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </div>
+          </el-col>
+          <!-- <el-col :span="8">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">消费类型：</el-text>
+              <el-select
+                v-model="detailVo.consumeType"
+                placeholder="请选择消费类型"
+                size="large"
+                style="width: 240px"
+                clearable
+              >
+                <el-option
+                  v-for="item in consumeType"
+                  :key="item"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </div>
+          </el-col> -->
+        </el-row>
+        <el-row>
+          <el-col :span="21">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">消费时间：</el-text>
+              <el-date-picker
+                v-model="getTime"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="起始时间"
+                end-placeholder="结束时间"
+              />
+              <el-button style="margin-left: 10px" @click="getToday()"
+                >今</el-button
+              >
+              <el-button @click="getYesterday()">昨</el-button>
+              <el-button @click="get7Days()">近7天</el-button>
+            <!-- </div>
+          </el-col>
+          <el-col :span="3">
+            <div class="head-card-btn"> -->
+              <el-button type="success" @click="reset()">重置</el-button>
+              <el-button type="primary" @click="search()">查询</el-button>
+              <el-button type="primary" @click="exportExcel()">导出excel</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-col>
+  </el-row>
+  <el-row>
+    <el-col>
+      <el-card>
+        <div>
+          消费金币总数：{{ Math.abs(totalCoin) }}，永久金币：{{
+            Math.abs(rechargeCoin)
+          }}，免费金币：{{ Math.abs(freeCoin) }}，任务金币：{{
+            Math.abs(taskCoin)
+          }}
+        </div>
+        <!-- 设置表格容器的高度和滚动样式 -->
+        <div style="height: 576px; overflow-y: auto">
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+            height="576px"
+            @sort-change="handleSortChange"
+          >
+            <el-table-column
+              type="index"
+              label="序号"
+              width="100px"
+              fixed="left"
+            >
+              <template #default="scope">
+                <span>{{
+                  scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
+                }}</span>
+              </template>
+            </el-table-column>
+            <!-- 固定姓名列 -->
+            <el-table-column
+              prop="username"
+              label="姓名"
+              width="150px"
+              fixed="left"
+            />
+            <!-- 固定精网号列 -->
+            <el-table-column
+              prop="jwcode"
+              label="精网号"
+              width="110px"
+              fixed="left"
+            />
+            <el-table-column prop="area" label="所属地区" width="110px" />
+            <el-table-column prop="productName" label="商品" width="160px" />
+            <el-table-column
+              prop="consumePlatform"
+              label="消费平台"
+              width="120px"
+            >
+              <template #default="scope">
+                <!-- 使用非严格相等比较 -->
+                <span v-if="scope.row.consumePlatform == 1">Homily Chart</span>
+                <span v-if="scope.row.consumePlatform == 2">Homily Link</span>
+                <span v-if="scope.row.consumePlatform == 3">ERP系统</span>
+                <span v-if="scope.row.consumePlatform == 4">金币系统</span>
+              </template>
+            </el-table-column>
+            <!-- <el-table-column
+              prop="consumeType"
+              label="消费类型"
+              width="120px"
+            /> -->
+            <el-table-column
+              prop="rechargeTotal"
+              label="消费金币总数"
+              width="120px"
+            >
+              <template #default="scope">
+                {{
+                  (scope.row.taskCoin * -1 +
+                    scope.row.freeCoin * -1 +
+                    scope.row.rechargeCoin * -1) /
+                  100
+                }}
+              </template>
+            </el-table-column>
+
+            <el-table-column
+              prop="rechargeCoin"
+              label="永久金币"
+              sortable="“custom”"
+              width="110px"
+            >
+              <template #default="scope">
+                {{ (scope.row.rechargeCoin * -1) / 100 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="freeCoin"
+              label="免费金币"
+              sortable="“custom”"
+              width="110px"
+            >
+              <template #default="scope">
+                {{ (scope.row.freeCoin * -1) / 100 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="taskCoin"
+              label="任务金币"
+              sortable="“custom”"
+              width="110px"
+            >
+              <template #default="scope">
+                {{ (scope.row.taskCoin * -1) / 100 }}
+              </template>
+            </el-table-column>
+
+            <el-table-column
+              prop="remark"
+              label="备注"
+              width="200px"
+              show-overflow-tooltip
+            />
+            <el-table-column prop="name" label="提交人" width="110px" />
+            <el-table-column
+              prop="createTime"
+              label="消费时间"
+              sortable="“custom”"
+              width="180px"
+            />
+          </el-table>
+        </div>
+
+        <!-- 分页 -->
+        <div class="pagination">
+          <el-pagination
+            background
+            :page-size="getObj.pageSize"
+            :page-sizes="[5, 10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            @size-change="handlePageSizeChange"
+            @current-change="handleCurrentChange"
+          ></el-pagination>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<style scoped>
+.status {
+  display: flex;
+}
+
+.head-card {
+  display: flex;
+}
+
+.head-card-element {
+  margin-right: 20px;
+}
+
+.head-card-btn {
+  margin-left: auto;
+}
+
+.pagination {
+  display: flex;
+  margin-top: 20px;
+}
+</style>
diff --git a/src/views/index.vue b/src/views/index.vue
index d594189..b85908f 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -7,7 +7,7 @@ import { VscGlobe } from 'vue-icons-plus/vsc'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import axios from 'axios'
 import API from '@/util/http'
-import dmmn from '../assets/avator.png'
+import dmmn from '../assets/blue.png'
 import { useRoute } from 'vue-router'
 
 const router = useRouter()
diff --git a/src/views/recharge/coinRecharge.vue b/src/views/recharge/coinRecharge.vue
index cb6fe31..358f45c 100644
--- a/src/views/recharge/coinRecharge.vue
+++ b/src/views/recharge/coinRecharge.vue
@@ -1,14 +1,18 @@
 <script setup>
 import { ref, onMounted, reactive, computed, watch, nextTick } from 'vue'
-import { ElMessage } from 'element-plus'
+import ElementPlus from 'element-plus'
+import { ElMessage,ElMessageBox } from 'element-plus'
+import { AiFillRead } from 'vue-icons-plus/ai'
 import { Plus } from '@element-plus/icons-vue'
 import axios from 'axios'
-import { ElMessageBox } from 'element-plus'
 import API from '@/util/http'
+import request from '@/util/http'
 import moment from 'moment'
 import { range, re } from 'mathjs'
 import { utils, read } from 'xlsx'
 import throttle from 'lodash/throttle'
+
+//新增充值------------------------------------------------------------------------------
 // 精网号去空格
 const trimJwCode = () => {
   if (addRecharge.value.jwcode) {
@@ -29,11 +33,13 @@ const beforeAvatarUpload = (file) => {
   }
   return (isJPG || isPNG) && isLt2M
 }
-// 这是添加上传图片的接口
-const imageUrl = ref('')
-const rechargeVoucher = ref('')
-const Rate = ref()
-const adminData = ref({})
+
+const imageUrl = ref('')//上传图片的url
+const rechargeVoucher = ref('')//充值凭证
+const Rate = ref()//汇率
+
+//请求管理员的接口，充值明细也需要获取到
+const adminData = ref({})//管理员信息
 const getAdminData = async function () {
   try {
     const result = await API({
@@ -43,8 +49,8 @@ const getAdminData = async function () {
     adminData.value = result
     addRecharge.value.adminId = adminData.value.adminId
     addRecharge.value.area = adminData.value.area
-    console.log('请求成功', result)
-    console.log('用户信息', user.value)
+    console.log('管理员信息请求成功', result)
+    // console.log('用户信息', user.value),user.value打印的没有什么意义
   } catch (error) {
     console.log('请求失败', error)
   }
@@ -74,7 +80,7 @@ const add = async function () {
       return
     }
     // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
+    console.log('/recharge/recharge/add请求成功', result)
     // 显示成功消息
     ElMessage.success('添加成功')
     // 重置表单
@@ -228,7 +234,7 @@ const getActivity = async function () {
     })
 
     // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
+    console.log('请求成功activity', result)
     // 存储表格数据
     activity.value = result.data
     console.log('活动信息', activity.value)
@@ -252,7 +258,7 @@ const getCurrency = async function () {
     console.log('货币请求成功', result)
     // 存储表格数据
     currency.value = result.data
-    console.log('tableData', currency.value)
+    console.log('currency', currency.value)
     // 在这里可以根据需求进一步处理成功后的逻辑，比如更新UI显示成功消息等
   } catch (error) {
     console.log('请求失败', error)
@@ -350,7 +356,7 @@ const getJwcodeList = async function () {
     jwcodeSet = new Set(jwcodeList.value)
     console.log('精网号set', jwcodeSet)
   } catch (error) {
-    console.log('请求失败', error)
+    console.log('请求失败jwcodelist', error)
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
@@ -376,7 +382,6 @@ const validateInput = function (row, index) {
 // 批量充值弹窗
 const batchRechargeVisible = ref(false)
 const i = ref(1)
-const delObj = ref({})
 const batchDelObj = ref([])
 const resetObj = ref({})
 // 批量充值表格数据
@@ -853,20 +858,360 @@ const batchSettingConfirm = function () {
   closeBatchSettingVisible()
 }
 
+//充值明细表单-------------------------------------------------------------------------------
+//获取管理员用户信息的接口*
+//变量
+//充值明细表格
+const tableData = ref([])
+//搜索=========================================
+//搜索recharge
+const rechargeVo = ref({
+  adminId: adminData.value.adminId
+})
+//搜索对象
+const getObj = ref({
+  pageNum: 1,
+  pageSize: 50
+})
+//分页总条目
+const total = ref(100)
+// 搜索对象时间
+const getTime = ref([])
+// 搜索活动列表*
+// 所有信息
+const allData = ref([])
+// 搜索地区列表
+const area = ref([])
+//标签页默认高亮选项
+const activeName = ref('all')
+//充值方式选项
+const rechargeWay = [
+  {
+    value: '客户储值',
+    label: '客户储值'
+  },
+  {
+    value: '平台充值',
+    label: '平台充值'
+  }
+]
+// 支付方式选项
+const payWay = [
+  {
+    value: '现金',
+    label: '现金'
+  },
+  {
+    value: '支票',
+    label: '支票'
+  },
+  {
+    value: '刷卡',
+    label: '刷卡'
+  },
+  {
+    value: '其他(各地区电子支付)',
+    label: '其他(各地区电子支付)'
+  }
+]
+// 删除==========================================================
+// 删除对象
+const delObj = ref({})
+
+// 方法
+// 合计数存储
+const trueGold = ref(0)
+const trueRGold = ref(0)
+const trueFGold = ref(0)
+
+// 搜索===========================================================================
+// 搜索方法
+const get = async function (val) {
+  try {
+    // 地区赋值
+    if (adminData.value.area === '泰国') {
+      rechargeVo.value.areas = ['泰国', '越南']
+    } else if (adminData.value.area !== '总部') {
+      rechargeVo.value.area = adminData.value.area
+    }
+
+    // 搜索参数页码赋值
+    if (typeof val === 'number') {
+      getObj.value.pageNum = val
+    }
+    // 搜索参数时间赋值
+    if (getTime.value != null) {
+      if (getTime.value.startDate != '' && getTime.value.endDate != '') {
+        rechargeVo.value.startDate = getTime.value[0]
+        rechargeVo.value.endDate = getTime.value[1]
+      }
+    } else {
+      rechargeVo.value.startDate = ''
+      rechargeVo.value.endDate = ''
+    }
+    // 搜索参数赋值
+    rechargeVo.value.sortField = sortField.value
+    rechargeVo.value.sortOrder = sortOrder.value
+    console.log('搜索参数', getObj.value)
+    // 发送POST请求
+    const result = await API({
+      url: '/recharge/recharge',
+      data: { ...getObj.value, rechargeVo: { ...rechargeVo.value } }
+    })
+
+    console.log('请求成功get',result)
+    // 计算充值金额、永久金币、免费金币总和
+    trueGold.value = 0
+    trueRGold.value = 0
+    trueFGold.value = 0
+    if (result.data && result.data.list) {
+      result.data.list.forEach((item) => {
+        trueGold.value += item.paidGold || 0
+        trueRGold.value += item.paidGold || 0
+        trueFGold.value += item.freeGold || 0
+      })
+    }
+
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 存储表格数据
+    tableData.value = result.data.list
+    console.log('tableData', tableData.value)
+    // 存储分页总数
+    total.value = result.data.total
+    console.log('total', total.value)
+  } catch (error) {
+    console.log('请求失败get', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// 搜索
+const search = function () {
+  getObj.value.pageNum = 1
+  get()
+}
+// 重置
+const reset = function () {
+  delete rechargeVo.value.jwcode
+  delete rechargeVo.value.activityId
+  delete rechargeVo.value.rechargeWay
+  delete rechargeVo.value.area
+  delete rechargeVo.value.startDate
+  delete rechargeVo.value.endDate
+  delete sortField.value
+  delete sortOrder.value
+  getTime.value = []
+}
+
+// 新增排序字段和排序方式
+const sortField = ref('')
+const sortOrder = ref('')
+// 处理排序事件
+const handleSortChange = (column) => {
+  get()
+  console.log('排序字段：', column.prop)
+  console.log('排序方式：', column.order)
+  if (column.prop === 'paidGold') {
+    sortField.value = 'recharge_gold'
+  } else if (column.prop === 'freeGold') {
+    sortField.value = 'free_gold'
+  } else if (column.prop === 'rechargeTime') {
+    sortField.value = 'recharge_time'
+  } else if (column.prop === 'createTime') {
+    sortField.value = 'create_time'
+  } 
+  sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC'
+  console.log('传递给后端的排序字段：', sortField.value)
+  console.log('传递给后端的排序方式：', sortOrder.value)
+  get()
+}
+
+// 今天
+const getToday = function () {
+  const today = new Date()
+  const startDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate()
+  )
+  const endDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('getTime', getTime.value)
+  get()
+}
+const handlePageSizeChange = function (val) {
+  getObj.value.pageSize = val
+  get()
+}
+const handleCurrentChange = function (val) {
+  getObj.value.pageNum = val
+  get()
+}
+// 昨天
+const getYesterday = function () {
+  const yesterday = new Date()
+  yesterday.setDate(yesterday.getDate() - 1)
+  const startDate = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate()
+  )
+  const endDate = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('getTime', getTime.value)
+  get()
+}
+// 近7天
+const get7Days = function () {
+  const today = new Date()
+  const startDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() - 6
+  )
+  const endDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('getTime', getTime.value)
+  get()
+}
+//获取活动名称*
+
+//获取地区
+const getArea = async function () {
+  try {
+    const result = await request({
+      url: '/recharge/user/search',
+      data: {}
+    })
+    //将响应结果存储到响应式数据中
+    console.log('area请求成功',result)
+      //存储地区信息
+      area.value = result.data
+      console.log('area',area.value)
+    } catch (error) {
+      console.log('area请求失败',error)
+      ElMessage.error('获取地区数据失败')
+    }
+}
+
+// 删除=================================
+// 点击删除按钮
+const del = function (row) {
+  delObj.value.rechargeId = row.rechargeId
+  console.log('delObj1', delObj.value)
+}
+// 确认删除按钮
+const delConfirm = async function () {
+  try {
+    console.log('delObj2', delObj.value)
+    const result = await API({
+      url: '/recharge/recharge/edit',
+      data: delObj.value
+    })
+    console.log('删除成功', result)
+    // 刷新表格数据
+    get()
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+// 验证跳转输入框的数字是否合法
+const checkNumber = function () {
+  if (typeof !isNaN(parseInt(getObj.value.pageNum)) === 'number') {
+    console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
+    if (
+      getObj.value.pageNum > 0 &&
+      getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
+    ) {
+      getObj.value.pageNum = parseInt(getObj.value.pageNum)
+      console.log('输入的数字合法')
+      get()
+    } else {
+      //提示
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      })
+    }
+  } else {
+    //提示
+    ElMessage({
+      type: 'error',
+      message: '输入内容非数字'
+    })
+  }
+}
+
+
+
+
+
+//新增充值和充值明细-------------------------------------------------------------------------
+
+// 用于控制显示内容的变量
+const activeTab = ref('addRecharge')
+
+// 切换标签页的方法
+const changeTab = async (tabName) => {
+  activeTab.value = tabName
+  if(tabName === 'detail'){
+    //切换至明细标签时调用get方法
+    await get()
+  }
+}
+
 // 挂载
 onMounted(async function () {
   await getAdminData()
   await getCurrency()
   await getActivity()
+  await getArea()
   await getJwcodeList()
+  //调用get方法获取明细数据
+  //await get()
 })
 </script>
 
 <template>
-  <div style="display: flex">
+
+  <div>
+  <el-button-group>
+    <!-- 切换后状态显示样式否则是默认样式 -->
+      <el-button 
+        :type="activeTab === 'addRecharge' ? 'primary' : 'default'" 
+        @click="changeTab('addRecharge')"
+      >
+        新增充值
+      </el-button>
+      <el-button 
+        :type="activeTab === 'detail' ? 'primary' : 'default'" 
+        @click="changeTab('detail')"
+      >
+        金币充值明细
+      </el-button>
+    </el-button-group>
+
+
+      <!-- 根据activeTab切换显示内容 -->
+   <!-- 新增充值的布局------------------------------------------------------------------- -->
+    <div v-if="activeTab === 'addRecharge'">
+  <!-- <div style="display: flex">
     <div style="margin-right: 20px">新增充值</div>
-    <!-- <el-button type="primary" plain @click="batchInit()">批量充值</el-button> -->
-  </div>
+  </div> -->
 
   <el-form
     :model="addRecharge"
@@ -956,7 +1301,7 @@ onMounted(async function () {
       style="margin-bottom: 5px"
     >
       <el-upload
-        action="http://54.251.137.151:10704/upload"
+        action="http://39.101.133.168:8828/hljw/api/aws/upload"
         class="avatar-uploader"
         :show-file-list="false"
         :on-success="handleAvatarSuccess"
@@ -978,7 +1323,7 @@ onMounted(async function () {
         </el-icon>
       </el-upload>
       <p style="margin-left: 10px; color: rgb(177, 176, 176)">
-        仅支持.jpg .png格式，文件≤1MB
+        仅支持.jpg .png格式，文件≤2MB
       </p>
     </el-form-item>
     <el-form-item prop="remark" label="备注">
@@ -1007,7 +1352,7 @@ onMounted(async function () {
 
   <!-- 客户信息栏 -->
   <el-card
-    style="width: 1200px; float: right"
+    style="width: 1200px; float: right;margin-bottom:20px;margin-top: 10px;"
     class="customer-info"
     width="3000px"
   >
@@ -1288,7 +1633,7 @@ onMounted(async function () {
         <el-table-column property="rechargeVoucher" label="充值凭证">
           <template #default="scope">
             <el-upload
-              action="http://54.251.137.151:10704/upload"
+              action="http://39.101.133.168:8828/hljw/api/aws/upload"
               class="avatar-uploader"
               :show-file-list="false"
               :on-success="handleBatchAvatarSuccess"
@@ -1453,7 +1798,7 @@ onMounted(async function () {
       </el-form-item>
       <el-form-item prop="rechargeVoucher" label="交款凭证">
         <el-upload
-          action="http://54.251.137.151:10704/upload"
+          action="http://39.101.133.168:8828/hljw/api/aws/upload"
           class="avatar-uploader"
           :show-file-list="false"
           :on-success="batchSettingHandleAvatarSuccess"
@@ -1488,6 +1833,319 @@ onMounted(async function () {
     >
     <el-button type="primary" @click="batchSettingConfirm()"> 确认 </el-button>
   </el-dialog>
+</div>
+<!-- 金币充值明细的布局---------------------------------------------------------- -->
+  <div v-else-if="activeTab === 'detail'">
+    <el-row>
+    <el-col>
+      <el-card style="margin-bottom: 20px;margin-top: 10px">
+        <el-row style="margin-bottom: 10px">
+          <el-col :span="5">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">精网号：</el-text>
+              <el-input v-model="rechargeVo.jwcode" placeholder="请输入精网号" style="width: 150px" clearable />
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">活动名称：</el-text>
+              <el-select v-model="rechargeVo.activityId" placeholder="请选择活动名称"  style="width: 180px" 
+                clearable>
+                <el-option v-for="item in activity" :key="item.activityId" :label="item.activityName"
+                  :value="item.activityId" />
+              </el-select>
+            </div>
+          </el-col>
+
+          <el-col :span="6">
+            <div class="head-card-element" v-if="adminData.area == '总部'">
+              <el-text class="mx-1" size="large">所属地区：</el-text>
+              <el-select v-model="rechargeVo.area" placeholder="请选择所属地区" style="width: 180px" clearable>
+                <el-option v-for="item in area" :key="item" :label="item" :value="item" />
+              </el-select>
+            </div>
+          </el-col>
+          
+          <el-col :span="6">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">充值类型：</el-text>
+              <el-select v-model="rechargeVo.rechargeWay" placeholder="请选择支付方式" style="width: 180px" clearable>
+                <el-option v-for="item in rechargeWay" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+          </el-col>
+          
+        </el-row>
+        <el-row>
+          <el-col :span="21">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">充值时间：</el-text>
+              <el-date-picker
+                v-model="getTime"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="起始时间"
+                end-placeholder="结束时间"
+              />
+              <el-button style="margin-left: 10px" @click="getToday()"
+                >今</el-button
+              >
+              <el-button @click="getYesterday()">昨</el-button>
+              <el-button @click="get7Days()">近7天</el-button>
+            <!-- </div>
+          </el-col>
+          <el-col :span="3">
+            <div class="head-card-btn"> -->
+              <el-button type="success" @click="reset()">重置</el-button>
+              <el-button type="primary" @click="search()">查询</el-button>
+              <el-button type="primary" @click="exportExcel()">导出Excel</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-col>
+  </el-row>
+  <el-row>
+    <el-col>
+      <el-card>
+        <div>
+          充值金额：{{ trueRGold.toFixed(2) }}新币，永久金币：{{
+            trueRGold.toFixed(2)
+          }}金币，免费金币：{{ trueFGold }}金币
+        </div>
+        <!-- 设置表格容器的高度和滚动样式 -->
+        <div style="height: 520px; overflow-y: auto;margin-top: 10px;">
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+            height="520px"
+            @sort-change="handleSortChange"
+          >
+            <el-table-column
+              type="index"
+              label="序号"
+              width="80px"
+              fixed="left"
+            >
+              <template #default="scope">
+                <span>{{
+                  scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              fixed="left"
+              prop="username"
+              label="姓名"
+              width="80px"
+            />
+            <el-table-column
+              fixed="left"
+              prop="jwcode"
+              label="精网号"
+              width="80px"
+            />
+            <el-table-column prop="area" label="所属地区" width="100px" />
+            <el-table-column
+              prop="activityName"
+              label="活动名称"
+              width="100px"
+            />
+            <el-table-column prop="" label="货币名称" width="110px" />
+            <el-table-column
+              prop="paidGold"
+              sortable="custom"
+              label="充值金额"
+              width="110px"
+            />
+            <el-table-column
+              prop="paidGold"
+              label="永久金币"
+              sortable="custom"
+              width="110px"
+            />
+            <el-table-column
+              prop="freeGold"
+              label="免费金币"
+              sortable="custom"
+              width="110px"
+            />
+            <el-table-column
+              prop="rechargeWay"
+              label="充值方式"
+              width="100px"
+            />
+            <el-table-column prop="payWay" label="支付方式" width="100px" />
+            <el-table-column
+              prop="remark"
+              label="备注"
+              width="150px"
+              show-overflow-tooltip
+            />
+            
+            <!-- <el-table-column
+              prop="rechargeVoucher"
+              label="支付凭证"
+              width="150px"
+            >
+              <template #default="scope">
+                <el-image
+                  :preview-src-list="[scope.row.rechargeVoucher]"
+                  preview-teleported="true"
+                  :src="scope.row.rechargeVoucher"
+                  alt="凭证"
+                  style="width: 50px; height: 50px"
+                />
+              </template>
+            </el-table-column> -->
+            <el-table-column prop="name" label="提交人" width="100px" />
+            <!-- <el-table-column prop="status" label="状态" width="100px">
+              <template #default="scope">
+                <span v-if="scope.row.status === 1">
+                  <div class="status">
+                    <span class="green-dot"></span>
+                    <span>已通过</span>
+                  </div>
+                </span>
+                <span v-if="scope.row.status === 0">
+                  <div class="status">
+                    <span class="grey-dot"></span>
+                    <span>待审核</span>
+                  </div>
+                </span>
+                <span v-if="scope.row.status === 2">
+                  <div class="status">
+                    <span class="red-dot"></span>
+                    <span>已驳回</span>
+                  </div>
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="reson"
+              label="驳回理由"
+              width="200px"
+              show-overflow-tooltip
+            /> -->
+            <el-table-column
+              prop="rechargeTime"
+              sortable
+              label="充值时间"
+              width="200px"
+            >
+              <template #default="scope">
+                {{
+                  moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss')
+                }}
+              </template>
+            </el-table-column>
+            <!-- <el-table-column
+              prop="createTime"
+              sortable="custom"
+              label="提交时间"
+              width="200px"
+            />
+            <el-table-column
+              fixed="right"
+              prop="operation"
+              label="操作"
+              width="150px"
+            >
+              <template #default="scope">
+                <el-popconfirm
+                  title="确定将此条活动删除吗？"
+                  @confirm="delConfirm"
+                >
+                  <template #reference>
+                    <el-button type="primary" text @click="del(scope.row)">
+                      删除
+                    </el-button>
+                  </template>
+                  <template #actions="{ confirm, cancel }">
+                    <el-button size="small" @click="cancel">取消</el-button>
+                    <el-button type="primary" size="small" @click="confirm">
+                      确定
+                    </el-button>
+                  </template>
+                </el-popconfirm>
+              </template>
+            </el-table-column> -->
+          </el-table>
+        </div>
+
+        <!-- 分页 -->
+        <div class="pagination" style="margin-top: 20px">
+          <el-pagination
+            background
+            :page-size="getObj.pageSize"
+            :page-sizes="[5, 10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            @size-change="handlePageSizeChange"
+            @current-change="handleCurrentChange"
+          ></el-pagination>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+
+  <!-- 编辑弹窗 -->
+  <el-dialog
+    v-model="editRechargeVisible"
+    title="新增活动"
+    width="500"
+    :before-close="closeEditRechargeVisible"
+  >
+    <template #footer>
+      <el-form :model="editObj" label-width="auto" style="max-width: 600px">
+        <el-form-item label="活动名称:">
+          <el-input
+            v-model="addObj.activityName"
+            placeholder="请输入活动名称"
+            style="width: 220px"
+          />
+        </el-form-item>
+
+        <el-form-item label="免费金币:">
+          <el-radio-group v-model="addObj.freeGold">
+            <el-radio value="0">无赠送</el-radio>
+            <el-radio value="1">有赠送</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="免费金币兑换比:">
+          <el-input
+            v-model="addObj.rechargeRatio"
+            placeholder="请输入"
+            style="width: 80px"
+          />：1
+          <div style="color: grey">(提示：当前规则每10新币可兑换1免费金币)</div>
+        </el-form-item>
+
+        <el-form-item label="开始时间:">
+          <el-time-picker v-model="addObj.startTime" />
+        </el-form-item>
+
+        <el-form-item label="结束时间:">
+          <el-time-picker v-model="addObj.endTime" />
+        </el-form-item>
+
+        <el-form-item label="添加人:">
+          <el-input v-model="addObj.adminName" disabled style="width: 220px" />
+        </el-form-item>
+      </el-form>
+
+      <div class="dialog-footer">
+        <el-button @click="closeAddActivityVisible">取消</el-button>
+        <el-button type="primary" @click="closeAddActivityVisible">
+          提交
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  </div>
+</div>
 </template>
 
 <style scoped>
diff --git a/src/views/refund/coinRefund.vue b/src/views/refund/coinRefund.vue
index e0dc670..e29bd2a 100644
--- a/src/views/refund/coinRefund.vue
+++ b/src/views/refund/coinRefund.vue
@@ -1,7 +1,8 @@
 <script setup>
 import { onMounted, reactive } from 'vue'
 import { ref, computed, watch } from 'vue'
-import { ElMessage } from 'element-plus'
+import { AiFillRead } from 'vue-icons-plus/ai'
+import { ElMessage,ElRadioGroup, ElRadio, } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import axios from 'axios'
 import { ElMessageBox } from 'element-plus'
@@ -9,20 +10,22 @@ import API from '@/util/http'
 import moment from 'moment'
 // import _ from 'lodash'
 
+//新增退款相关逻辑---------------------------------------------------------------------------
 const addRe = ref({
   typeR: '0'
 })
-//这是获取用户信息的接口
+//这是获取用户信息的接口，金币退款明细也会用到
 const adminData = ref({})
 const getAdminData = async function () {
   try {
     const result = await API({ url: '/admin/userinfo', data: {} })
     adminData.value = result
     addRefund.value.adminId = adminData.value.adminId
-    console.log('请求成功', result)
-    console.log('用户信息', user.value)
+    console.log('用户信息请求成功', user.value)
+    console.log('adminData信息', adminData.value)
   } catch (error) {
-    console.log('请求失败', error)
+    console.log('用户信息请求失败', error)
+
   }
 }
 // 精网号去空格
@@ -61,7 +64,7 @@ const add = async function () {
       ElMessage.error(result.msg)
       return
     }
-    console.log('请求成功', result)
+    console.log('add请求成功', result)
     ElMessage.success('添加成功')
     // 重置表单
     addRefund.value = {}
@@ -76,7 +79,7 @@ const add = async function () {
     addRefund.value.typeR = 0
     user.value = {}
   } catch (error) {
-    console.log('请求失败', error)
+    console.log('添加退款请求失败', error)
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
@@ -190,9 +193,8 @@ const getUser = async function (jwcode) {
       //ElMessage.success(result.msg)
     }
   } catch (error) {
-    console.log('请求失败', error)
+    console.log('用户信息请求失败', error)
     ElMessage.error('查询失败，请检查精网号是否正确')
-    // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
 const calculatedAllGold = computed(() => {
@@ -222,7 +224,7 @@ const refundType = [
 ]
 
 // 根据精网号查询商品
-// 查什么？？？？？
+// 查询对应精网号购买过的商品
 const goods = ref([])
 const getGoods = async function (jwcode) {
   trimJwCode();
@@ -235,7 +237,7 @@ const getGoods = async function (jwcode) {
         area: adminData.value.area
       }
     })
-    console.log('请求成功', result)
+    console.log('goods请求成功', result)
 
     if (result.code === 0) {
       ElMessage.error(result.msg)
@@ -246,8 +248,8 @@ const getGoods = async function (jwcode) {
       ElMessage.success(result.msg)
     }
   } catch (error) {
-    console.log('请求失败', error)
-    ElMessage.error('查询失败，请检查精网号是否正确')
+    console.log('商品goods请求失败', error)
+    ElMessage.error('商品查询失败')
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
@@ -287,14 +289,14 @@ const getProductByOrderCode = async function (item) {
         result.data.freeCoin * -1 +
         result.data.rechargeCoin * -1) /
       100
-    console.log('请求成功', addRefund.value)
+    console.log('addRefund请求成功', addRefund.value)
     if (result.data.code === 0) {
       ElMessage.error(result.data.msg)
     } else {
       ElMessage.success('选择成功')
     }
   } catch (error) {
-    console.log('请求失败', error)
+    console.log('精网号查询请求失败', error)
     ElMessage.error('查询失败，请检查精网号是否正确')
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
@@ -304,14 +306,456 @@ const handleSelectionChange = (value) => {
   console.log('选择的订单号', value)
   const selectedItem = goods.value.find((item) => item.detailId === value)
 }
+
+
+// 金币退款明细相关逻辑----------------------------------------------------------------------
+//充值明细表格
+const tableData = ref([])
+//搜索==================================
+//搜索detail
+const detail = ref([])
+// 搜索对象
+const getObj = ref({
+  pageNum: 1,
+  pageSize: 50
+})
+//分页总条目
+const total = ref(100)
+// 搜索对象时间
+const getTime = ref([])
+// 所有信息
+const allData = ref([])
+// 搜索地区列表
+const area = ref([])
+
+//标签页默认高亮选项
+const activeName = ref('all')
+
+//退款类型
+const consumeType = [
+  {
+    value:"退款商品",
+    label:"退款商品"
+  }
+]
+// 方法
+// 统计合计数
+const trueGold = ref(0)
+const truePgold = ref(0)
+const trueFgold = ref(0)
+const trueTgold = ref(0)
+// 待审核各种类金币数
+const pendingPgold = ref(0)
+const pendingFgold = ref(0)
+const pendingTgold = ref(0)
+// 待审核金币数
+const pendingGold = ref(0)
+// 已通过各种类金币数
+const approvedPgold = ref(0)
+const approvedFgold = ref(0)
+const approvedTgold = ref(0)
+// 已通过金币数
+const approvedGold = ref(0)
+// 已驳回各种类金币数
+const rejectedPgold = ref(0)
+const rejectedFgold = ref(0)
+const rejectedTgold = ref(0)
+// 已驳回金币数
+const rejectedGold = ref(0)
+// 搜索==============================================================
+// 搜索方法
+const get = async function (val) {
+  try {
+    // 地区赋值
+    if (adminData.value.area === '泰国') {
+      detail.value.areas = ['泰国', '越南']
+    } else if (adminData.value.area !== '总部') {
+      detail.value.area = adminData.value.area
+    }
+    // 搜索参数页码赋值
+    if (typeof val === 'number') {
+      getObj.value.pageNum = val
+    }
+    // 搜索参数时间赋值
+    if (getTime.value != null) {
+      if (getTime.value.startDate != '' && getTime.value.endDate != '') {
+        detail.value.startDate = getTime.value[0]
+        detail.value.endDate = getTime.value[1]
+      }
+    } else {
+      detail.value.startDate = ''
+      detail.value.endDate = ''
+    }
+    // 添加排序字段和排序方式到请求参数
+    detail.value.sortField = sortField.value
+    detail.value.sortOrder = sortOrder.value
+    console.log('搜索参数', getObj.value)
+    // 发送POST请求
+    const result = await API({
+      url: '/refund/search',
+      data: {
+        ...getObj.value,
+        detail: { ...detail.value }
+      }
+    })
+    // 复制一份 detail.value 并移除排序字段和排序方式，这是不同审核状态时使用的参数
+    const detailWithoutSort = { ...detail.value }
+    delete detailWithoutSort.sortField
+    delete detailWithoutSort.sortOrder
+
+    const result2 = await API({
+      url: '/refund/RefundA',
+      data: {
+        ...detailWithoutSort
+      }
+    })
+    // 统计合计数
+    if (result2.data) {
+      result2.data.forEach((item) => {
+        switch (item.status) {
+          case '待审核':
+            // 若 item.raudit 为空则赋值为 0
+            pendingPgold.value = item.sumRaudit1 || 0
+            pendingFgold.value = item.sumRaudit2 || 0
+            pendingTgold.value = item.sumRaudit3 || 0
+            // 若 item.sumRaudit 为空则赋值为 0
+            pendingGold.value = item.sumRaudit || 0
+            break
+          case '已通过':
+            approvedPgold.value = item.sumRaudit1 || 0
+            approvedFgold.value = item.sumRaudit2 || 0
+            approvedTgold.value = item.sumRaudit3 || 0
+            approvedGold.value = item.sumRaudit || 0
+            break
+          case '已驳回':
+            rejectedPgold.value = item.sumRaudit1 || 0
+            rejectedFgold.value = item.sumRaudit2 || 0
+            rejectedTgold.value = item.sumRaudit3 || 0
+            rejectedGold.value = item.sumRaudit || 0
+            break
+        }
+      })
+    }
+
+    trueFgold.value =
+      pendingFgold.value + approvedFgold.value + rejectedFgold.value
+    truePgold.value =
+      pendingPgold.value + approvedPgold.value + rejectedPgold.value
+    trueTgold.value =
+      pendingTgold.value + approvedTgold.value + rejectedTgold.value
+    trueGold.value = pendingGold.value + approvedGold.value + rejectedGold.value
+    // 将响应结果存储到响应式数据中
+    //console.log('请求成功', result)
+    // 存储表格数据
+    tableData.value = result.data.list
+    console.log('tableData请求成功', tableData.value)
+    // 存储分页总数
+    total.value = result.data.total
+    console.log('total', total.value)
+    // 调用分类的方法
+    handleClick()
+  } catch (error) {
+    console.log('表格数据请求失败', error)
+
+  }
+}
+//搜索
+//每次搜索都执行对应搜索操作，并将页码重置为1
+const search = function () {
+  getObj.value.pageNum = 1
+  get()
+}
+//重置
+const reset = function () {
+  detail.value.jwcode = ''
+  detail.value.refundGoods = ''
+  detail.value.refundType = ''
+  detail.value.area = ''
+  detail.value.startDate = ''
+  detail.value.endDate = ''
+  sortField.value = ''
+  sortOrder.value = ''
+  getTime.value = {}
+}
+//今天
+const getToday = function (){
+  const today = new Date()
+  const startDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate()
+  )
+  const endDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('今天', getTime.value)
+  get()
+}
+//昨天
+const getYesterday = function (){
+  const yesterday = new Date()
+  yesterday.setDate(yesterday.getDate() - 1)
+  const startDate = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate()
+  )
+  const endDate = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('昨天', getTime.value)
+  get()
+}
+//近7天
+const get7Days = function (){
+  const today = new Date()
+  const startDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() - 6
+  )
+  const endDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('近7天', getTime.value)
+  get()
+}
+//全部充值明细 
+const adminAll = function () {
+  console.log('全部充值明细')
+  detail.value.status = ''
+  getObj.value.pageNum = 1
+  get()
+  //计算免费金币、永久金币、任务金币所有审核状态分别的总数以及总金币数
+  trueFgold.value = 
+    pendingFgold.value + approvedFgold.value + rejectedFgold.value
+  truePgold.value = 
+    pendingPgold.value + approvedPgold.value + rejectedPgold.value
+  trueTgold.value = 
+    pendingTgold.value + approvedTgold.value + rejectedTgold.value
+  trueGold.value =
+    pendingGold.value + approvedGold.value + rejectedGold.value
+}
+//三个审核状态采用的async和await方法，因为需要等待异步请求结果，才能计算总金币数；
+// 而上边的adminAll方法不需要等待异步请求结果，所以采用同步方法。
+//待审核充值明细
+const adminWait = async function () {
+  detail.value.status = 0
+  getObj.value.pageNum = 1
+  await get()
+  console.log('待审核充值明细')
+  trueFgold.value = pendingFgold.value
+  truePgold.value = pendingPgold.value
+  trueTgold.value = pendingTgold.value
+  trueGold.value = pendingGold.value
+}
+//已通过充值明细
+const adminPass = async function () {
+  detail.value.status = 1
+  getObj.value.pageNum = 1
+  await get()
+  console.log('已通过充值明细')
+  trueFgold.value = approvedFgold.value
+  truePgold.value = approvedPgold.value
+  trueTgold.value = approvedTgold.value
+  trueGold.value = approvedGold.value
+}
+//已驳回充值明细
+const adminReject = async function () {
+  detail.value.status = 2
+  getObj.value.pageNum = 1
+  await get()
+  console.log('已驳回充值明细')
+  trueFgold.value = rejectedFgold.value
+  truePgold.value = rejectedPgold.value
+  trueTgold.value = rejectedTgold.value
+  trueGold.value = rejectedGold.value
+}
+//点击标签页
+// 设置tab.props.name默认为all
+const tabName = ref('all')
+const handleClick = function (tab, event) {
+  if (tab.props.name === 'all') {
+    adminAll()
+  } else if (tab.props.name === 'wait') {
+    adminWait()
+  } else if (tab.props.name === 'pass') {
+    adminPass()
+  } else if (tab.props.name === 'reject') {
+    adminReject()
+  }
+}
+//获取地区
+const getArea = async function () {
+  try {
+    const result = await API({url:'/recharge/user/search',data:{}})
+    //console.log('地区请求成功', result)
+    area.value = result.data
+    console.log('地区请求成功', area.value)
+  }catch (error) {
+    console.log('地区请求失败', error)
+    ElMessage.error('获取地区失败')
+  }
+}
+
+//删除气泡的id标识
+const delObj = ref({})
+const del  = function (row) {
+  delObj.value.detailId = row.detailId
+  console.log('delObj', delObj.value)
+}
+//删除按钮的气泡弹框
+const delConfirm = async function () {
+  try {
+    console.log('delObj', delObj.value)
+    // 发送请求POST
+    const result = await API({
+      url: '/refund/softDelete?detailId=' + delObj.value.detailId,
+      data: {}
+    })
+    //将响应结果存储到响应式数据中
+    console.log('气泡弹窗请求成功', result)
+    get()
+  }catch(error){
+    console.log('删除的气泡弹窗请求失败', error)
+    ElMessage.error('删除失败')
+  }
+}
+
+// 查询商品的接口
+const allGoods = ref([])
+const getAllGoods = async function () {
+  try {
+    // 发送POST请求
+    const result = await API({ url: '/product', data: {} })
+    // 将响应结果存储到响应式数据中
+    console.log('allGoods请求成功', result)
+    // 存储全部数据
+    goods.value = result.data
+  } catch (error) {
+    console.log('商品请求失败', error)
+    ElMessage.error('商品查询失败')
+  }
+}
+getAllGoods()
+
+// 验证跳转输入框的数字是否合法，此处待检查是否用上
+const checPagekNumber = function () {
+  if (typeof parseInt(getObj.value.pageNum) === 'number') {
+    console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
+    if (
+      getObj.value.pageNum > 0 &&
+      getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
+    ) {
+      getObj.value.pageNum = parseInt(getObj.value.pageNum)
+      console.log('输入的数字合法')
+      get()
+    } else {
+      //提示
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      })
+    }
+  } else {
+    //提示
+    ElMessage({
+      type: 'error',
+      message: '非数字输入内容'
+    })
+  }
+}
+
+//新增排序字段和排序方式
+const sortField = ref('')
+const sortOrder = ref('')
+//处理排序事件
+const handleSortChange = (column) => {
+  console.log('column',column.prop)
+  console.log('column',column.order)
+  if(column.prop === 'rechargeCoin'){
+    sortField.value = 'recharge_coin'
+  } else if(column.prop === 'taskCoin'){
+    sortField.value = 'task_coin'
+  }else if(column.prop === 'freeCoin'){
+    sortField.value = 'free_coin'
+  }else if(column.prop === 'createTime'){
+    sortField.value = 'create_time'
+  }
+  sortOrder.value = column.order === 'ascending' ? 'asc' : 'desc'
+  get()
+}
+
+const handlePageSizeChange = function (val){
+  getObj.value.pageSize = val
+  get()
+}
+const handleCurrentChange = function (val){
+  getObj.value.pageNum = val
+  get()
+}
+
+//导出Excel，注意这里是虚拟接口，后端写完后替换正确的地址
+const exportExcel = function () {
+  window.open('/refund/exportExcel?detail=' + JSON.stringify(detail.value))
+}
+
+
+
+//切换新增退款和明细逻辑标签---------------------------------------------------------------
+// 用于控制显示内容的变量
+const activeTab = ref('addRefund')
+
+// 切换标签页的方法
+const changeTab = async (tabName) => {
+  activeTab.value = tabName
+  //切换至detail标签页时，再请求get方法，就不用挂载了，可减轻浏览器压力加快页面加载速度
+  if (activeTab.value === 'detail') {
+    await get()
+  }
+}
+
+
 // 挂载
 onMounted(async function () {
   await getAdminData()
+  await getArea()
+  //await get()
 })
 </script>
 
 <template>
-  <div style="font-weight: bold">新增退款</div>
+
+  <div>
+  <el-button-group>
+    <!-- 切换后状态显示样式否则是默认样式 -->
+      <el-button 
+        :type="activeTab === 'addRefund' ? 'primary' : 'default'" 
+        @click="changeTab('addRefund')"
+      >
+        新增退款
+      </el-button>
+      <el-button 
+        :type="activeTab === 'detail' ? 'primary' : 'default'" 
+        @click="changeTab('detail')"
+      >
+        金币退款明细
+      </el-button>
+    </el-button-group>
+
+  <!-- 根据activeTab切换显示内容 -->
+   <!-- 新增退款的布局---------------------------------------------------------- -->
+   <div v-if="activeTab === 'addRefund'">
+  <!-- <div style="font-weight: bold">新增退款</div> -->
 
   <el-form
     :model="addRefund"
@@ -488,11 +932,7 @@ onMounted(async function () {
             <p style="color: #2fa1ff">{{ user.rechargeTimes }}</p>
           </el-form-item>
         </el-col>
-        <!-- <el-col :span="10">
-          <el-form-item label="负责客服">
-            <p>{{ adminData.name }}</p>
-          </el-form-item>
-        </el-col> -->
+        
         <el-col :span="10">
           <el-form-item label="消费次数">
             <p style="color: #2fa1ff">{{ user.spendTimes }}</p>
@@ -503,19 +943,318 @@ onMounted(async function () {
             <p>{{ adminData.area }}</p>
           </el-form-item>
         </el-col>
-        <el-col :span="14">
-          <!-- <el-form-item label="待审核">
-            <p style="color: #2fa1ff">
-              {{ user.A }}
-            </p>
-          </el-form-item> -->
-        </el-col>
       </el-row>
     </el-form>
   </el-card>
+  </div>
+
+
+  <!-- 金币退款明细的布局---------------------------------------------------------- -->
+  <div v-else-if="activeTab === 'detail'">
+      <el-row>
+    <el-col>
+      <el-card style="margin-bottom: 20px;margin-top:10px">
+        <el-row style="margin-bottom: 10px">
+          <el-col :span="5">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">精网号：</el-text>
+              
+              <el-input
+                v-model="detail.jwcode"
+                placeholder="请输入精网号"
+                size="large"
+                style="width: 150px"
+                clearable
+              />
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">退款类型：</el-text>
+              <el-select
+                v-model="detail.refundType"
+                placeholder="请选择退款类型"
+                size="large"
+                style="width: 180px"
+                clearable
+              >
+                <el-option
+                  v-for="item in consumeType"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">退款商品：</el-text>
+              <el-select
+                v-model="detail.refundGoods"
+                placeholder="请选择退款商品"
+                size="large"
+                style="width: 180px"
+                clearable
+                
+              >
+                <el-option
+                  v-for="item in goods"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.name"
+                />
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="head-card-element" v-if="adminData.area == '总部'">
+              <el-text class="mx-1" size="large">所属地区：</el-text>
+              <el-select
+                v-model="detail.area"
+                placeholder="请选择所属地区"
+                size="large"
+                style="width: 180px"
+                clearable
+              >
+                <el-option
+                  v-for="item in area"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="21">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">退款时间：</el-text>
+              <el-date-picker
+                v-model="getTime"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="起始时间"
+                end-placeholder="结束时间"
+              />
+              <el-button style="margin-left: 10px" @click="getToday()"
+                >今</el-button
+              >
+              <el-button @click="getYesterday()">昨</el-button>
+              <el-button @click="get7Days()">近7天</el-button>
+            
+              <el-button type="success" @click="reset()">重置</el-button>
+              <el-button type="primary" @click="search()">查询</el-button>
+              <el-button type="primary" @click="exportExcel">导出Excel</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-col>
+  </el-row>
+  <el-row>
+    <el-col>
+      <el-card>
+        <!-- <el-tabs
+          v-model="activeName"
+          type="card"
+          class="demo-tabs"
+          @tab-click="handleClick"
+        >
+          <el-tab-pane label="全部" name="all"></el-tab-pane>
+          <el-tab-pane label="待审核" name="wait"></el-tab-pane>
+          <el-tab-pane label="已通过" name="pass"></el-tab-pane>
+          <el-tab-pane label="已驳回" name="reject"></el-tab-pane>
+        </el-tabs> -->
+
+        <div>
+          退款金币总数：{{ Math.abs(trueGold) }}，永久金币：{{
+            Math.abs(truePgold)
+          }}，免费金币：{{ Math.abs(trueFgold) }}，任务金币：{{
+            Math.abs(trueTgold)
+          }}
+        </div>
+        <!-- 设置表格容器的高度和滚动样式 -->
+        <div style="height: 520px; overflow-y: auto;margin-top:10px">
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+            @sort-change="handleSortChange"
+            height="520px"
+          >
+            <el-table-column
+              type="index"
+              label="序号"
+              width="100px"
+              fixed="left"
+            >
+              <template #default="scope">
+                <span>{{
+                  scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="username"
+              label="姓名"
+              fixed="left"
+              width="100px"
+            />
+            <el-table-column
+              prop="jwcode"
+              label="精网号"
+              fixed="left"
+              width="110px"
+            />
+            <el-table-column prop="area" label="所属地区" width="110px" />
+            <el-table-column prop="refundGoods" label="商品名称" width="100px" />
+            <el-table-column prop="refundType" label="退款类型" width="100px" />
+
+            <el-table-column label="退款金币总数" width="110px">
+              <template #default="scope">
+                {{
+                  scope.row.rechargeCoin +
+                  scope.row.freeCoin +
+                  scope.row.taskCoin
+                }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="typeR" label="退款方式" width="110px"/>
+            <el-table-column
+              prop="rechargeCoin"
+              label="永久金币"
+              width="110px"
+              sortable="“custom”"
+            />
+            <el-table-column
+              prop="freeCoin"
+              sortable="“custom”"
+              label="免费金币"
+              width="110px"
+            />
+            <el-table-column
+              prop="taskCoin"
+              sortable="“custom”"
+              label="任务金币"
+              width="110px"
+            />
+            <!-- 修改prop为taskGold -->
+            <el-table-column
+              prop="remark"
+              label="退款原因"
+              width="160px"
+              show-overflow-tooltip
+            />
+            <el-table-column prop="adminName" label="提交人" width="100px" />
+             <!-- <el-table-column prop="status" label="审核状态" width="120px">
+              <template #default="scope">
+                <span v-if="scope.row.status == 1">
+                  <div class="status">
+                    <span class="green-dot"></span>
+                    <span>已通过</span>
+                  </div>
+                </span>
+                <span v-if="scope.row.status == 0">
+                  <div class="status">
+                    <span class="grey-dot"></span>
+                    <span>待审核</span>
+                  </div>
+                </span>
+                <span v-if="scope.row.status == 2">
+                  <div class="status">
+                    <span class="red-dot"></span>
+                    <span>已驳回</span>
+                  </div>
+                </span>
+              </template>
+            </el-table-column> 
+            <el-table-column
+              prop="reson"
+              label="驳回理由"
+              width="200px"
+              show-overflow-tooltip
+            /> -->
+            <el-table-column
+              prop="createTime"
+              sortable="“custom”"
+              label="提交时间"
+              width="180px"
+            >
+              <template #default="scope">
+                {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
+              </template>
+            </el-table-column>
+            <!-- <el-table-column
+              prop="operation"
+              label="操作"
+              fixed="right"
+              width="120px"
+            >
+              <template #default="scope">
+                <el-popconfirm
+                  title="确定将此条活动删除吗？"
+                  @confirm="delConfirm"
+                >
+                  <template #reference>
+                    <el-button type="primary" text @click="del(scope.row)">
+                      删除
+                    </el-button>
+                  </template>
+                  <template #actions="{ delConfirm, cancel }">
+                    <el-button size="small" @click="cancel">取消</el-button>
+                    <el-button type="primary" size="small" @click="delConfirm">
+                      确定
+                    </el-button>
+                  </template>
+                </el-popconfirm>
+              </template>
+            </el-table-column> -->
+          </el-table>
+        </div>
+
+        <!-- 分页 -->
+        <div class="pagination" style="margin-top: 20px">
+          <el-pagination
+            background
+            :page-size="getObj.pageSize"
+            :page-sizes="[5, 10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            @size-change="handlePageSizeChange"
+            @current-change="handleCurrentChange"
+            @jump="checkPageNumber"
+          ></el-pagination>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+    </div>
+  </div>
 </template>
 
 <style scoped>
+
+.status {
+  display: flex;
+}
+
+.head-card {
+  display: flex;
+}
+
+.head-card-element {
+  margin-right: 10px;
+}
+
+.head-card-btn {
+  margin-left: auto;
+}
+.pagination {
+  display: flex;
+  margin-top: 20px;
+}
+
 p {
   margin: 0px;
 }
diff --git a/src/views/usergold/clientCount.vue b/src/views/usergold/clientCount.vue
new file mode 100644
index 0000000..ddc0e37
--- /dev/null
+++ b/src/views/usergold/clientCount.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <!-- 这里放置标签切换的按钮 -->
+    <el-button-group>
+    <!-- 切换后状态显示 primary 样式否则是默认样式 -->
+      <el-button 
+        :type="activeTab === 'detail' ? 'primary' : 'default'" 
+        @click="goToDetail"
+      >
+        金币明细
+      </el-button>
+      <el-button 
+        :type="activeTab === 'balance' ? 'primary' : 'default'" 
+        @click="goToBalance"
+      >
+        金币余额
+      </el-button>
+    </el-button-group>
+    <!-- 渲染子路由组件 -->
+    <router-view></router-view>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+
+const router = useRouter();// 获取路由实例
+const route = useRoute();// 获取当前路由信息
+// 定义响应式变量 activeTab 来跟踪当前激活的标签
+const activeTab = ref(route.name === 'clientCountBalance' ? 'balance' : 'detail');
+//也就是说如果当前在clientCountBalance页面，那么就是balance，否则默认情况都展示detail页面
+//此时获取到的路由信息是clientCountDetail，所以默认是detail
+
+
+const goToDetail = () => {
+  // 点击按钮时更新 activeTab 为 detail
+  activeTab.value = 'detail';
+  router.push({ name: 'clientCountDetail' });
+};
+
+const goToBalance = () => {
+  // 点击按钮时更新 activeTab 为balance
+  activeTab.value = 'balance';
+  router.push({ name: 'clientCountBalance' });
+};
+
+// 监听路由变化，更新 activeTab
+watch(() => route.name, (newName) => {
+  if (newName === 'clientCountDetail') {
+    activeTab.value = 'detail';
+  } else if (newName === 'clientCountBalance') {
+    activeTab.value = 'balance';
+}});
+
+// 当进入父路由时，默认跳转到金币明细页面
+if (route.name === 'usergold') {
+  router.push({ name: 'clientCountDetail' });
+}
+</script>
diff --git a/src/views/usergold/clientCountBalance.vue b/src/views/usergold/clientCountBalance.vue
new file mode 100644
index 0000000..d6c0e69
--- /dev/null
+++ b/src/views/usergold/clientCountBalance.vue
@@ -0,0 +1,3 @@
+<template>
+    <p>1111</p>
+</template>
\ No newline at end of file
diff --git a/src/views/usergold/index.vue b/src/views/usergold/clientCountDetail.vue
similarity index 92%
rename from src/views/usergold/index.vue
rename to src/views/usergold/clientCountDetail.vue
index e0bae00..cf07e03 100644
--- a/src/views/usergold/index.vue
+++ b/src/views/usergold/clientCountDetail.vue
@@ -202,12 +202,14 @@ const checkNumber = function () {
   }
 }
 
-// 挂载
-onMounted(async function () {
-  await getArea()
-  await getAdminData()
-  await get()
-})
+// 计算金币数量的方法
+const calculateGoldAmount = (row) => {
+  const totalGold = (row.rechargeCoin + row.freeCoin + row.taskCoin) / 100;
+  if (row.updateType === 1) { // 消费
+    return -totalGold;
+  } 
+  return totalGold;
+}
 
 // 导出Excel的方法
 const headers = [
@@ -216,8 +218,9 @@ const headers = [
   '精网号',
   '所属地区',
   '平台信息',
-  '更新数量',
+  //'更新数量',
   '更新类型',
+  '金币数量',
   '永久金币',
   '免费金币',
   '任务金币',
@@ -474,9 +477,48 @@ const handleCurrentChange = function (val) {
   getObj.value.pageNum = val
   get()
 }
+
+
+// 用于控制显示内容的变量
+const activeTab = ref('detailY')
+
+// 切换标签页的方法
+const changeTab = (tabName) => {
+  activeTab.value = tabName
+}
+
+// 挂载
+onMounted(async function () {
+  await getArea()
+  await getAdminData()
+  await get()
+})
+
 </script>
 
+
 <template>
+
+
+<div>
+  <!-- <el-button-group>
+      <el-button 
+        :type="activeTab === 'detailY' ? 'primary' : 'default'" 
+        @click="changeTab('detailY')"
+      >
+        金币明细
+      </el-button>
+      <el-button 
+        :type="activeTab === 'goldInfo' ? 'primary' : 'default'" 
+        @click="changeTab('goldInfo')"
+      >
+        金币余额
+      </el-button>
+    </el-button-group> -->
+
+  <!-- 根据activeTab切换显示内容 -->
+   <!-- 客户金币明细的布局---------------------------------------------------------- -->
+<!-- <div v-if="activeTab === 'detailY'"> -->
   <!-- 导出excel提前展示的信息面板 -->
   <el-dialog
     v-model="showExportInfoPanel"
@@ -540,14 +582,14 @@ const handleCurrentChange = function (val) {
 
   <el-row>
     <el-col>
-      <el-card style="margin-bottom: 20px">
+      <el-card style="margin-bottom: 20px;margin-top: 10px;">
         <el-row style="margin-bottom: 10px">
-          <el-col :span="6">
+          <el-col :span="5">
             <div class="head-card-element">
               <el-text class="mx-1" size="large">精网号：</el-text>
               <el-input
                 v-model="detailY.jwcode"
-                style="width: 240px"
+                style="width: 150px"
                 placeholder="请输入精网号"
                 clearable
               />
@@ -559,7 +601,7 @@ const handleCurrentChange = function (val) {
               <el-select
                 v-model="detailY.consumePlatform"
                 placeholder="请选择平台信息"
-                style="width: 200px"
+                style="width: 180px"
                 clearable
               >
                 <el-option
@@ -577,7 +619,7 @@ const handleCurrentChange = function (val) {
               <el-select
                 v-model="detailY.num"
                 placeholder="请选择更新类型"
-                style="width: 200px"
+                style="width: 180px"
                 clearable
               >
                 <el-option
@@ -595,7 +637,7 @@ const handleCurrentChange = function (val) {
               <el-select
                 v-model="detailY.area"
                 placeholder="请选择所属地区"
-                style="width: 240px"
+                style="width: 180px"
                 clearable
                 :loading="isLoadingArea"
               >
@@ -623,9 +665,10 @@ const handleCurrentChange = function (val) {
           <el-button @click="getToday()">今</el-button>
           <el-button @click="getYesterday()">昨</el-button>
           <el-button @click="get7Days()">近7天</el-button>
-          <el-button type="success" @click="exportExcel">导出Excel表格</el-button>
+          
           <el-button type="success" @click="reset()">重置</el-button>
           <el-button type="primary" @click="search()">查询</el-button>
+          <el-button type="primary" @click="exportExcel">导出Excel表格</el-button>
         </div>
       </el-card>
     </el-col>
@@ -679,7 +722,7 @@ const handleCurrentChange = function (val) {
                 <span v-if="scope.row.consumePlatform == 4">金币系统</span>
               </template>
             </el-table-column>
-            <el-table-column
+            <!-- <el-table-column
               prop="gold"
               label="更新数量"
               width="120"
@@ -688,7 +731,7 @@ const handleCurrentChange = function (val) {
               <template #default="scope">
                 <span>{{ scope.row.gold / 100 }}</span>
               </template>
-            </el-table-column>
+            </el-table-column> -->
             <el-table-column prop="updateType" label="更新类型" width="110">
               <!-- 模板内容 -->
               <template #default="scope">
@@ -698,6 +741,13 @@ const handleCurrentChange = function (val) {
                 <span v-if="scope.row.updateType == 3">其他</span>
               </template>
             </el-table-column>
+
+            <el-table-column label="金币数量" width="120">
+              <template #default="scope">
+                <span>{{ calculateGoldAmount(scope.row) }}</span>
+              </template>
+            </el-table-column>
+
             <el-table-column
               prop="rechargeCoin"
               sortable="custom"
@@ -760,6 +810,12 @@ const handleCurrentChange = function (val) {
       </el-card>
     </el-col>
   </el-row>
+  <!-- </div> -->
+  <!-- 客户金币余额的布局---------------------------------------------------------- -->
+  <!-- <div v-else-if="activeTab === 'goldInfo'"> -->
+
+  <!-- </div> -->
+  </div>
 </template>
 
 <style scoped>