feat: 1.充值审核（缺总计接口、缺排序）2.消费传给后端*100 拿到数据/100 3.修改请求地址为测试服务器

fix:修改合并出现问题

.env.development

@@ -2,4 +2,7 @@
 # VITE_API_BASE='http://192.168.8.94:8080/'
 # VITE_API_BASE='https://hwjb.homilychart.com/gold_htms_dev'
 # VITE_API_BASE='http://54.251.137.151:10704/'
-VITE_API_BASE='http://192.168.8.225:8080/'
+# VITE_API_BASE='http://192.168.8.225:8080/'
+# VITE_API_BASE='http://192.168.8.94:8080/'
+VITE_API_BASE='http://18.143.76.3:10704/'
+

src/router/index.js

@@ -2,13 +2,13 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 
 const router = createRouter({
     history: createWebHashHistory(),
-    routes: [
-        { path: '/login', name: "login", component: () => import("../views/login.vue") },
-        { path: '/', redirect: "/login" },
+    routes: [//此处在做登录之前做成默认跳转工作台
+        { path: '/workspace', name: "workspace", component: () => import("../views/workspace/index.vue") },
+        { path: '/', redirect: "/workspace" },
         // { path: '/test', component: () => import("../views/z.vue") },
         {
             meta: { requireAuth: true },
-            path: '/index', component: () => import("../views/index.vue"),
+            path: '/', component: () => import("../views/home.vue"),
             children: [
 
                 // 工作台
@@ -19,6 +19,7 @@ const router = createRouter({
                 { path: '/refundAudit', name: "refundAudit", component: () => import("../views/audit/refundAudit.vue") },
                 // 金币消耗
                 { path: '/coinConsume', name: "coinConsume", component: () => import("../views/consume/coinConsume.vue"),
+                    redirect: '/coinConsume/add',// 重定向到新增消耗页面
                     children: [
                         // 金币新增消耗
                         { path: 'add', name: "addCoinConsume", component: () => import("../views/consume/addCoinConsume.vue") },
@@ -31,15 +32,32 @@ const router = createRouter({
                 // 汇率管理
                 { path: '/rate', name: "rate", component: () => import("../views/managerecharge/rate.vue") },
                 // 金币充值
-                { path: '/coinRecharge', name: "coinRecharge", component: () => import("../views/recharge/coinRecharge.vue") },
+                { path: '/coinRecharge', name: "coinRecharge", component: () => import("../views/recharge/coinRecharge.vue"),
+                    redirect: '/coinRecharge/add',// 重定向到新增充值页面
+                    children: [
+                        // 金币新增充值
+                        { path: 'add', name: "addCoinRecharge", component: () => import("../views/recharge/addCoinRecharge.vue") },
+                        // 金币充值明细详情
+                        { path: 'detail', name: "coinRechargeDetail", component: () => import("../views/recharge/coinRechargeDetail.vue") }
+                    ]
+                },
                 // 金豆充值
                 { path: '/beanRecharge', name: "beanRecharge", component: () => import("../views/recharge/beanRecharge.vue") },
                 // 金币退款
-                { path: '/coinRefund', name: "coinRefund", component: () => import("../views/refund/coinRefund.vue") },
+                { path: '/coinRefund', name: "coinRefund", component: () => import("../views/refund/coinRefund.vue"),
+                    redirect: '/coinRefund/add',// 重定向到新增退款页面
+                    children: [
+                        // 金币新增消耗
+                        { path: 'add', name: "addCoinRefund", component: () => import("../views/refund/addCoinRefund.vue") },
+                        // 金币消耗明细详情
+                        { path: 'detail', name: "coinRefundDetail", component: () => import("../views/refund/coinRefundDetail.vue") }
+                    ]
+                 },
                 // 金豆退款
                 { path: '/beanRefund', name: "beanRefund", component: () => import("../views/refund/beanRefund.vue") },
                 // 客户账户明细
                 { path: '/usergold', name: "usergold", component: () => import("../views/usergold/clientCount.vue"),
+                    redirect: '/usergold/detail',// 重定向到客户账户明细页面
                     children: [
                         // 金币明细
                         { path: 'detail', name: "clientCountDetail", component: () => import("../views/usergold/clientCountDetail.vue") },
@@ -48,7 +66,7 @@ const router = createRouter({
                     ]
                  },
                 // 权限管理
-                { path: '/permissions', name: "permissions", component: () => import("../views/permissions/index.vue") },
+                { path: '/permissions', name: "permissions", component: () => import("../views/permissions/permission.vue") },
                 // 没有权限
                 { path: '/noPermission', name: "noPermission", component: () => import("../views/noPermissionPage.vue") }
             ]
@@ -58,42 +76,43 @@ const router = createRouter({
 });
 
 router.beforeEach((to, from, next) => {
-    const token = localStorage.getItem("token");
-    const permission = localStorage.getItem("permission");
-    if (to.name != "login" && !token) {
-        next({ name: "login" });
-    } else {
-        if (permission == "4" && to.name != "noPermission") {
-            next({ name: "noPermission" });
-        } else if (permission == "3") {
-            if (to.name == "addConsume" || to.name == "allConsume"
-                || to.name == "addRecharge" || to.name == "adminRecharge" || to.name == "allRecharge"
-                || to.name == "addRefund" || to.name == "allRefund"
-                || to.name == "permissions") {
-                next({ name: "workspace" });
-            } else {
-                next();
-            }
-        } else if (permission == '2') {
-            if (to.name == "rechargeAudit" || to.name == "refundAudit"
-                || to.name == "activity" || to.name == "rate"
-                || to.name == "permissions") {
-                next({ name: "workspace" })
-            } else {
-                next();
-            }
-        } else if (permission == '5') {
-            if (to.name == "permissions") {
-                next({ name: "workspace" })
-            } else {
-                next();
-            }
-        }
-        else {
-            next();
-        }
+    // const token = localStorage.getItem("token");
+    // const permission = localStorage.getItem("permission");
+    // if (to.name != "login" && !token) {
+    //     next({ name: "login" });
+    // } else {
+    //     if (permission == "4" && to.name != "noPermission") {
+    //         next({ name: "noPermission" });
+    //     } else if (permission == "3") {
+    //         if (to.name == "addConsume" || to.name == "allConsume"
+    //             || to.name == "addRecharge" || to.name == "adminRecharge" || to.name == "allRecharge"
+    //             || to.name == "addRefund" || to.name == "allRefund"
+    //             || to.name == "permissions") {
+    //             next({ name: "workspace" });
+    //         } else {
+    //             next();
+    //         }
+    //     } else if (permission == '2') {
+    //         if (to.name == "rechargeAudit" || to.name == "refundAudit"
+    //             || to.name == "activity" || to.name == "rate"
+    //             || to.name == "permissions") {
+    //             next({ name: "workspace" })
+    //         } else {
+    //             next();
+    //         }
+    //     } else if (permission == '5') {
+    //         if (to.name == "permissions") {
+    //             next({ name: "workspace" })
+    //         } else {
+    //             next();
+    //         }
+    //     }
+    //     else {
+    //         next();
+    //     }
 
-    }
+    // }
+    next();
 })
 
 export default router;

src/util/request.js

@@ -1,13 +1,13 @@
 import axios from 'axios'
 // 创建axios实例
 const service = axios.create({
-  baseURL: import.meta.env.VITE_API_BASE,
+  baseURL: import.meta.env.VITE_API_BASE,//.env.development
   timeout: 10000,
   headers: {
     'Content-Type': 'application/json'
   },
   // 设置请求头，指定请求体的格式为 JSON
-    // 设置默认请求方法为 POST  这行对应的代码搁哪呢？
+    // 设置默认请求方法为 POST  这行对应的代码搁哪呢？ util/http.js自己看
 })
 
 // 请求拦截器

src/views/consume/addCoinConsume.vue

@@ -1,22 +1,85 @@
 <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 {onMounted, reactive, ref, watch} from "vue";
+import {ElMessage, 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 trimmed = addConsume.value.jwcode.toString().replace(/\s/g, '');
+    const numeric = Number(trimmed);
+
+    // 如果转换为数字成功，保存为数字，否则提示错误
+    if (!isNaN(numeric)) {
+      addConsume.value.jwcode = numeric;
+    } else {
+      ElMessage.error("精网号格式不正确，请输入数字");
+    }
   }
 }
-//这是获取用户信息的接口
+
+/*
+====================数据=================================
+*/
+//这是获取当前登录的用户信息
 const adminData = ref({});
+// 通过精网号查询用户（客户）信息 表单
+const user = ref({
+  jwcode: null,
+  name: "",
+  market: "",
+  historySumGold: null,
+  historyPermanentGold: null,
+  historyFreeGold: null,
+  historyTaskGold: null,
+  rechargeNum: null,
+  consumeNum: null,
+  firstRecharge: "",
+  nowPermanentGold: null,
+  nowFreeJune: null,
+  nowTaskGold: null,
+  nowFreeDecember: null,
+  nowFreeGold: null,
+  nowSumGold: null
+})
+// 这是添加消费信息的表单（金币）
+const addConsume = ref({
+  // jwcode 是数字
+  jwcode: null, //精网号
+  goodsName: "",// 商品名称
+  sumGold: null, // 消费金币总数
+  freeGold: null, // 免费金币
+  permanentGold: null, // 永久金币
+  taskGold: null, // 任务金币
+  remark: "",//备注
+  adminId: null,// 当前管理员id
+
+});
+// 表单验证
+const Ref = ref(null);
+// 表单验证规则
+const rules = reactive({
+  jwcode: [{required: true, message: "请输入精网号", trigger: "blur"}],
+  goodsName: [{required: true, message: "请选择消费商品", trigger: "change"}], // 修改为 change
+  sumGold: [
+    {required: true, message: "消费金币总数不能为空", trigger: "blur"},
+
+  ],
+
+});
+// 查询商品的表单
+const goods = ref([]);
+
+
+/*
+====================方法=================================
+*/
 const getAdminData = async function () {
   try {//await 暂停函数执行，直到请求完成
     const result = await request({
@@ -33,64 +96,178 @@ const getAdminData = async function () {
   }
 };
 
-// 这是添加消费信息的表单
-const addConsume = ref({
-  freeCoin: 0,
-  rechargeCoin: 0,
-  taskCoin: 0,
-  updateType: "1",
-  indexName:"", //这个是指标字段，后面绑定
-});
+// 消耗金币计算函数
+function calculateCoins(sumGold) {
+  const {nowFreeGold, nowPermanentGold, nowTaskGold} = user.value;
+  if (user.value.jwcode) {
+    if (sumGold <= 0) return {free: 0, permanent: 0, task: 0};
+
+    let remaining = sumGold;
+    let freeUsed = 0, permanentUsed = 0, taskUsed = 0;
+
+    // 优先消耗免费金币
+    if (nowFreeGold > 0) {
+      freeUsed = Math.min(nowFreeGold, remaining);
+      remaining -= freeUsed;
+    }
+
+    // 其次消耗永久金币
+    if (remaining > 0 && nowPermanentGold > 0) {
+      permanentUsed = Math.min(nowPermanentGold, remaining);
+      remaining -= permanentUsed;
+    }
+
+    // 最后消耗任务金币
+    if (remaining > 0 && nowTaskGold > 0) {
+      taskUsed = remaining;
+    }
+
+    return {free: freeUsed, permanent: permanentUsed, task: taskUsed};
+
+  }
+  // 提示
+  return {free: 0, permanent: 0, task: 0};
+
+}
+
+// 输入验证函数
+function validateInput() {
+  const sumGold = addConsume.value.sumGold;
+  trimJwCode();
+  trimJwCode();
+  if (user.value.jwcode == null) {
+    ElMessage.error("请先查询用户信息");
+    addConsume.value.sumGold = null;
+  }
+
+  // 验证金币数值
+  if (user.value.jwcode && sumGold <= 0) {
+    ElMessage.error("消费金币总数必须大于0");
+    // 将sunGold设置为null
+    addConsume.value.sumGold = null;
+    return false;
+  }
+
+  // 验证金币总和
+  const totalAvailableGold = user.value.nowSumGold
+
+  console.log("可用金币总和", totalAvailableGold);
+  console.log("可用金币总和", sumGold);
+
+  if (user.value.jwcode && sumGold > totalAvailableGold) {
+    ElMessage.error("消费金币总数超过可用金币总和");
+    // 将sunGold设置为null
+    addConsume.value.sumGold = null;
+    return false;
+  }
+
+  return true;
+}
+
 // 这是添加消费信息的接口
 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;
+    // 验证输入数据 再验证一次
+    if (!validateInput()) {
+      return;
+    }
+    // 计算金币使用情况
+    calculateCoins(addConsume.value.sumGold);
+
+    console.log("addConsume.value", addConsume.value)
     // 发送POST请求
     const result = await request({
-      url: "/consume/add",
-      data: addConsume.value,
-    });
-    if (result.code === 0) {
-      ElMessage.error(result.msg);
-      return;
-    } else {
-      ElMessage.success("添加成功");
+      // url: "/consume/add",
+      url: "http://18.143.76.3:10704/consume/add",
+      data: {
+        ...addConsume.value,
+        jwcode: addConsume.value.jwcode,
+        // adminId: addConsume.value.adminId,
+        // todo 一定要删除 换成上面的
+        adminId: 1,
+
+
+        sumGold: addConsume.value.sumGold * 100,
+        freeGold: addConsume.value.freeGold * 100,
+        taskGold: addConsume.value.taskGold * 100,
+        permanentGold: addConsume.value.permanentGold * 100,
+        goodsName: addConsume.value.goodsName,
+        remark: addConsume.value.remark
       }
+
+    });
+
+    console.log("add请求", result);
+    // 处理响应
+    handleResponse(result);
     // 重置表单
-    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("添加失败，请检查输入内容是否正确");
+    resetForm();
 
-    // 在这里可以处理错误逻辑，比如显示错误提示等
+  } catch (error) {
+    console.error("请求失败", error);
+    ElMessage.error("添加失败，请检查网络连接或联系管理员");
   }
 };
+
+// 响应处理函数
+function handleResponse(result) {
+  console.log("响应结果", result)
+  if (result.code === 200) {
+    ElMessage.success("添加成功");
+    console.log("请求成功", result);
+  } else {
+    ElMessage.error(result.msg || "添加失败，未知错误");
+  }
+}
+
+// 重置表单函数
+function resetForm() {
+  // 清空表单数据
+  addConsume.value = {
+    jwcode: null,
+    goodsName: "",
+    sumGold: null,
+    freeGold: null,
+    permanentGold: null,
+    taskGold: null,
+    remark: "",
+    adminId: adminData.value.adminId,
+    adminName: adminData.value.adminName,
+  };
+
+  console.log("重置表单")
+
+  user.value = {
+    jwcode: null,
+    name: "",
+    market: "",
+    historySumGold: null,
+    historyPermanentGold: null,
+    historyFreeGold: null,
+    historyTaskGold: null,
+    rechargeNum: null,
+    consumeNum: null,
+    firstRecharge: "",
+    nowPermanentGold: null,
+    nowFreeJune: null,
+    nowTaskGold: null,
+    nowFreeDecember: null,
+    nowFreeGold: null,
+    nowSumGold: null
+  }
+  // user.value.jwcode = null;
+  // user.value = null;
+}
+
+// 添加前验证
 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);
+            console.log("这里是jwcode", addConsume.value.jwcode)
             add();
-          console.log("添加成功");
-          imageUrl.value = "";
+            console.log("添加成功",);
             addConsume.value = {};
           })
           .catch(() => {
@@ -105,82 +282,27 @@ const addBefore = () => {
     }
   });
 };
-
-// 表单验证
-// 开始时间改变时，重新验证结束时间
-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",
+      // url: "user/selectUser",
+      url: "http://18.143.76.3:10704/user/selectUser", // todo 服务器改回无ip的
       data: {
+        // 只需要传精网号
         jwcode: addConsume.value.jwcode,
-        area: adminData.value.area,
       },
     });
     console.log("请求成功", result);
 
     if (result.code === 0) {
       ElMessage.error(result.msg);
+    } else if (result.data === null) {
+      ElMessage.error("用户不存在");
     } else {
       user.value = result.data;
-      user.value.A =
-        Number(user.value.pendingRechargeTimes) +
-        Number(user.value.pendingSpendTimes);
       console.log("用户信息", user.value);
       ElMessage.success(result.msg);
     }
@@ -190,237 +312,62 @@ const getUser = async function (jwcode) {
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 };
-
-
-//下面这个也是校验精网号是否存在的方法，通过脱离文本框实现，但是上面方法绑定了信息面板，在输入正确的精网号后能显示。
-//这是查询用户金币信息的接口
-const userGold = ref({});
-const getUserGold = async function (jwcode) {
-  trimJwCode();
+// 获取商品信息(三楼接口)
+const getGoods = async function () {
   try {
     // 发送POST请求
     const result = await request({
-      url: "/recharge/user",
-      data: {
-        jwcode: addConsume.value.jwcode,
-        area: adminData.value.area,
-      },
+      // url: "/product", // todo 后续换3楼的 2025年6月27日10:38:26 解决
+      url: "http://39.101.133.168:8828/live_mall/api/product/all",
     });
     // 将响应结果存储到响应式数据中
     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;
+    goods.value = result.data.map(item => ({
+      id: item.id,
+      label: item.name,
+      value: item.name
+    }));
 
-    // 确保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;
+    // // 存储全部数据
+    // goods.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");
+/*
+====================监听=================================
+*/
+
+// 监听消费总金额变化，自动计算三类金币
+watch(
+    () => addConsume.value.sumGold,
+    (newValue) => {
+      if (newValue > 0) {
+        const {free, permanent, task} = calculateCoins(newValue);
+        addConsume.value.freeGold = free;
+        addConsume.value.permanentGold = permanent;
+        addConsume.value.taskGold = task;
       } else {
-    isHC.value = 0;
-    addConsume.value.productName = productName;
-    addConsume.value.indexName = "";
+        addConsume.value.freeGold = null;
+        addConsume.value.permanentGold = null;
+        addConsume.value.taskGold = null;
       }
-};
-
-// 指标选择处理（重点修改）
-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>
@@ -441,74 +388,60 @@ const handleSelectBlur = (value) => {
         style="max-width: 750px;"
         class="form-style"
     >
+      <!--      todo 添加错误提示-->
+
       <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-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
+          <el-select
+              v-model="addConsume.goodsName"
+              placeholder="请选择商品"
+              style="width: 450px"
           >
-      <template #default="{ item }">
-        <div>{{ item.name }}</div>
-      </template>
-    </el-autocomplete>
+            <el-option
+                v-for="item in goods"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+            />
+          </el-select>
+
         </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"
+            v-model="addConsume.sumGold"
             style="width: 100px"
+            @input="validateInput()"
             @change="calculateCoins()"
         />
       </el-form-item>
+
+
+      <!-- 三类金币自动计算（禁用状态，不可编辑） -->
       <div style="display: flex; align-items: center">
-      <el-form-item prop="rechargeCoin" label="永久金币" style="float: left">
+        <el-form-item prop="permanentGold" label="永久金币" style="float: left">
           <el-input
               disabled
-          v-model="addConsume.rechargeCoin"
+              v-model="addConsume.permanentGold"
               style="width: 100px; margin-left: -5px"
           />
           <p style="margin-right: 0px">个</p>
@@ -520,20 +453,21 @@ const handleSelectBlur = (value) => {
         >
           <el-input
               disabled
-          v-model="addConsume.freeCoin"
+              v-model="addConsume.freeGold"
               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-form-item prop="taskGold" label="任务金币" style="margin-left: -20px">
           <el-input
               disabled
-          v-model="addConsume.taskCoin"
+              v-model="addConsume.taskGold"
               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"
@@ -544,6 +478,7 @@ const handleSelectBlur = (value) => {
             type="textarea"
         />
       </el-form-item>
+
       <el-form-item prop="commitName" label="提交人">
         <el-input
             style="width: 300px"
@@ -552,12 +487,15 @@ const handleSelectBlur = (value) => {
             placeholder="提交人姓名"
         />
       </el-form-item>
-    <el-button type="success" @click="delteConsume" style="margin-left: 280px">重置</el-button>
+
+      <el-button type="success" @click="resetForm()" 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-card v-if="user.jwcode" style="width: 850px; float: right" class="customer-info">
       <el-form
           :model="user"
           label-width="auto"
@@ -573,12 +511,8 @@ const handleSelectBlur = (value) => {
           </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>
+              <p>{{ user.historySumGold / 100 }}</p>
+
             </el-form-item>
           </el-col>
           <el-col :span="10">
@@ -590,66 +524,59 @@ const handleSelectBlur = (value) => {
             <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
+                v-if="user.nowSumGold !== undefined"
+            >
+              {{ user.nowSumGold / 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
-            >
+                  v-if="user.nowSumGold !== null "
+              >(永久金币:{{ user.nowPermanentGold / 100 }};免费金币:{{
+                  (user.nowFreeGold) / 100
+                }};任务金币:{{ user.nowTaskGold / 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 v-if="user.firstRecharge">
+                {{ moment(user.firstRecharge).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>
+              <p style="color: #2fa1ff">{{ user.rechargeNum }}</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>
+              <p style="color: #2fa1ff">{{ user.consumeNum }}</p>
             </el-form-item>
           </el-col>
           <el-col :span="10">
             <el-form-item label="所属门店">
-            <p>{{ adminData.area }}</p>
+              <p>{{ user.market }}</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;

src/views/consume/beanConsume.vue

@@ -91,13 +91,13 @@ const get = async function (val) {
     }
     // 搜索参数时间赋值
     if (getTime.value != null) {
-      if (getTime.value.startDate != '' && getTime.value.endDate != '') {
-        detailVo.value.startDate = getTime.value[0]
-        detailVo.value.endDate = getTime.value[1]
+      if (getTime.value.startTime != '' && getTime.value.endTime != '') {
+        detailVo.value.startTime = getTime.value[0]
+        detailVo.value.endTime = getTime.value[1]
       }
     } else {
-      detailVo.value.startDate = ''
-      detailVo.value.endDate = ''
+      detailVo.value.startTime = ''
+      detailVo.value.endTime = ''
     }
     detailVo.value.sortField = sortField.value
     detailVo.value.sortOrder = sortOrder.value
@@ -172,8 +172,8 @@ const reset = function () {
   detailVo.value.productName = ''
   detailVo.value.consumePlatform = ''
   detailVo.value.consumeType = ''
-  detailVo.value.startDate = ''
-  detailVo.value.endDate = ''
+  detailVo.value.startTime = ''
+  detailVo.value.endTime = ''
   sortField.value = ''
   sortOrder.value = ''
   getTime.value = {}
@@ -181,17 +181,17 @@ const reset = function () {
 // 今天
 const getToday = function () {
   const today = new Date()
-  const startDate = new Date(
+  const startTime = new Date(
     today.getFullYear(),
     today.getMonth(),
     today.getDate()
   )
-  const endDate = new Date(
+  const endTime = new Date(
     today.getFullYear(),
     today.getMonth(),
     today.getDate() + 1
   )
-  getTime.value = [startDate, endDate]
+  getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
   get()
 }
@@ -199,34 +199,34 @@ const getToday = function () {
 const getYesterday = function () {
   const yesterday = new Date()
   yesterday.setDate(yesterday.getDate() - 1)
-  const startDate = new Date(
+  const startTime = new Date(
     yesterday.getFullYear(),
     yesterday.getMonth(),
     yesterday.getDate()
   )
-  const endDate = new Date(
+  const endTime = new Date(
     yesterday.getFullYear(),
     yesterday.getMonth(),
     yesterday.getDate() + 1
   )
-  getTime.value = [startDate, endDate]
+  getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
   get()
 }
 // 近7天
 const get7Days = function () {
   const today = new Date()
-  const startDate = new Date(
+  const startTime = new Date(
     today.getFullYear(),
     today.getMonth(),
     today.getDate() - 6
   )
-  const endDate = new Date(
+  const endTime = new Date(
     today.getFullYear(),
     today.getMonth(),
     today.getDate() + 1
   )
-  getTime.value = [startDate, endDate]
+  getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
   get()
 }

src/views/consume/coinConsumeDetail.vue

@@ -1,159 +1,233 @@
 <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 {computed, onMounted, ref} from 'vue'
+import {dayjs, ElMessage} from 'element-plus'
 import request from '@/util/http'
-// 变量
+
+// 之后整理一下
+
+/*
+====================工具方法==============================
+*/
+
+// 时间格式化
+const formatTime = (val) => val ? dayjs(val).format('YYYY-MM-DD HH:mm:ss') : ''
+
+/*
+====================数据=================================
+*/
 //这是获取用户信息的接口
 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({})
+
+// 搜索consumeUser 表单
+const consumeUser = ref({
+  jwcode: null,
+  payPlatform: "",
+  market: "",
+
+  startTime: '',
+  endTime: '',
+
+  goodsName: '',
+
+
+})
+
+
 // 搜索对象
 const getObj = ref({
   pageNum: 1,
   pageSize: 50
 })
+
 //分页总条目
 const total = ref(100)
+
 // 搜索对象时间
-const getTime = ref([])
+const getTime = ref({
+  startTime: '',
+  endTime: ''
+})
 // 搜索活动列表
 const activity = ref([])
-// 所有信息
-const allData = ref([])
+
 // 搜索地区列表
-const area = ref([])
+const market = ref([])
 
-//标签页默认高亮选项
-const activeName = ref('all')
+// 新增排序字段和排序方式
+const sortField = ref('')
+const sortOrder = ref('')
 
 // 消费平台选项
 const consumePlatform = [
   {
-    value: '4',
+    value: '金币系统',
     label: '金币系统'
   },
 
   {
-    value: '1',
+    value: 'Homily Chart',
     label: 'Homily Chart'
   },
   {
-    value: '2',
+    value: 'Homily Link',
     label: 'Homily Link'
   },
   {
-    value: '3',
+    value: 'ERP系统',
     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) {
+
+const permanentGold = ref(0)
+const freeGold = ref(0)
+const taskGold = ref(0)
+const totalGold = ref(0)
+// 定义响应式变量存储金币合计数
+const permanentGolds = ref(0)
+const freeGolds = ref(0)
+const taskGolds = ref(0)
+// 查询商品的接口的表单
+const goods = ref([])
+
+const totalGoldSearch = ref({
+  payPlatform: "",
+  market: "",
+  startTime: "",
+  endTime: "",
+  goodsName: ""
+})
+
+/*
+====================方法=================================
+*/
+// 获取登录用户信息
+const getAdminData = async function () {
   try {
-    // 地区赋值
-    if (adminData.value.area != '总部') {
-      detailVo.value.area = adminData.value.area
+    const result = await request({
+      url: 'http://18.143.76.3:10704/admin/userinfo',
+      data: {}
+    })
+    adminData.value = result
+    console.log('请求成功', result)
+    console.log('用户信息', adminData.value)
+  } catch (error) {
+    console.log('请求失败', error)
   }
+}
+
+
+const ConsumeSelectBy = async function (val) {
+  try {
+
     // 搜索参数页码赋值
     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]
+      if (getTime.value.startTime != '' && getTime.value.endTime != '') {
+        consumeUser.value.startTime = formatTime(getTime.value[0])
+        consumeUser.value.endTime = formatTime(getTime.value[1])
       }
     } else {
-      detailVo.value.startDate = ''
-      detailVo.value.endDate = ''
+      consumeUser.value.startTime = ''
+      consumeUser.value.endTime = ''
     }
-    detailVo.value.sortField = sortField.value
-    detailVo.value.sortOrder = sortOrder.value
-    console.log('搜索参数', getObj.value)
+    consumeUser.value.sortField = sortField.value
+    consumeUser.value.sortOrder = sortOrder.value
+
+    console.log('搜索参数_时间', consumeUser.value.startTime)
+
+    console.log('搜索参数1', getObj.value)
+
+    console.log('搜索参数2', consumeUser.value)
+
     // 发送POST请求
     const result = await request({
-      url: '/consume/select',
+      url: 'http://18.143.76.3:10704/consume/selectBy',
       data: {
-        ...getObj.value,
-        consumeDetail: { ...detailVo.value }
+        pageNum: getObj.value.pageNum,
+        pageSize: getObj.value.pageSize,
+        consumeUser: {
+          ...consumeUser.value,
+          sortField: sortField.value,
+          sortOrder: sortOrder.value
+        }
       }
     })
+
+    console.log('请求成功2', sortField)
+
     // 合计数的接口
     // 复制一份 detail.value 并移除排序字段和排序方式
-    const detailWithoutSort = { ...detailVo.value }
+    const detailWithoutSort = {...consumeUser.value}
     delete detailWithoutSort.sortField
     delete detailWithoutSort.sortOrder
-    const result2 = await request({
-      url: '/consume/SumConsume',
-      data: {
-        ...detailWithoutSort
-      }
+
+
+    // 赋值
+    totalGoldSearch.value.startTime = consumeUser.value.startTime
+    totalGoldSearch.value.endTime = consumeUser.value.endTime
+    totalGoldSearch.value.payPlatform = consumeUser.value.payPlatform
+    totalGoldSearch.value.market = consumeUser.value.market
+    totalGoldSearch.value.goodsName = consumeUser.value.goodsName
+//
+    const resultTotalGold = await request({
+      // url: 'http://18.143.76.3:10704/consume/statsGold',
+      url: 'http://18.143.76.3:10704/consume/statsGold',
+      data: totalGoldSearch.value
+
     })
 
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    console.log('请求成功2', result2)
+    console.log("总计", resultTotalGold)
+
+    if (resultTotalGold.code === 200 && resultTotalGold.data) {
+      const data = resultTotalGold.data
+      console.log('获取到的金币数据:', data)
+
+      permanentGolds.value = Number(data.permanentGolds) || 0
+      freeGolds.value = Number(data.freeGolds) || 0
+      taskGolds.value = Number(data.taskGolds) || 0
+    }
+
     // 存储表格数据
     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
-      }
+    tableDataTotal.value = resultTotalGold.data
+    if (resultTotalGold.data == null) {
+      console.log('请求成功2', resultTotalGold)
+      // 这是啥东西啊
+      tableDataTotal.value = resultTotalGold.data
     }
 
-    console.log('tableDataT', tableDataTotal)
+    const sumGoldList = tableData.value.map(item => item.sumGold);
+    console.log("sumGold", sumGoldList); // 输出包含所有 sumGold 值的数组
 
-    // 修改为保留两位小数
-    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('@@@@@@@@@@tableDataT', tableDataTotal.value.list)
+
+
+    // totalGold.value = tableData.value.sum
+
+    // // 修改为保留两位小数
+    // permanentGold.value = parseFloat(
+    //     (tableDataTotal.value.list.sumGold / 100).toFixed(2)
+    // )
+    // freeGold.value = parseFloat(
+    //     (tableDataTotal.value.sumFcion / 100).toFixed(2)
+    // )
+    // taskGold.value = parseFloat(
+    //     (tableDataTotal.value.sumTcion / 100).toFixed(2)
+    // )
+    // totalGold.value = parseFloat(
+    //     (tableDataTotal.value.sumcion / 100).toFixed(2)
+    // )
     console.log('tableData', tableData.value)
+
     // 存储分页总数
     total.value = result.data.total
     console.log('total', total.value)
@@ -165,126 +239,89 @@ const get = async function (val) {
 // 搜索
 const search = function () {
   getObj.value.pageNum = 1
-  get()
+  ConsumeSelectBy()
 }
 // 重置
 const reset = function () {
-  detailVo.value.productName = ''
-  detailVo.value.area = ''
-  detailVo.value.consumePlatform = ''
-  detailVo.value.consumeType = ''
-  detailVo.value.startDate = ''
-  detailVo.value.endDate = ''
+  console.log('兄弟，你点了重置')
+
+  consumeUser.value.goodsName = ''
+
+  consumeUser.value.market = ''
+
+  consumeUser.value.payPlatform = ''
+
+  consumeUser.value.startTime = ''
+
+  consumeUser.value.endTime = ''
+
+
   sortField.value = ''
   sortOrder.value = ''
   getTime.value = {}
+
+  // 点完重置后，重新请求数据
+  ConsumeSelectBy()
+  console.log('consumeUser', consumeUser.value)
 }
 // 今天
 const getToday = function () {
   const today = new Date()
-  const startDate = new Date(
+  const startTime = new Date(
       today.getFullYear(),
       today.getMonth(),
       today.getDate()
   )
-  const endDate = new Date(
+  const endTime = new Date(
       today.getFullYear(),
       today.getMonth(),
       today.getDate() + 1
   )
-  getTime.value = [startDate, endDate]
+  getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
-  get()
+  ConsumeSelectBy()
 }
 // 昨天
 const getYesterday = function () {
   const yesterday = new Date()
   yesterday.setDate(yesterday.getDate() - 1)
-  const startDate = new Date(
+  const startTime = new Date(
       yesterday.getFullYear(),
       yesterday.getMonth(),
       yesterday.getDate()
   )
-  const endDate = new Date(
+  const endTime = new Date(
       yesterday.getFullYear(),
       yesterday.getMonth(),
       yesterday.getDate() + 1
   )
-  getTime.value = [startDate, endDate]
+  getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
-  get()
+  ConsumeSelectBy()
 }
 // 近7天
 const get7Days = function () {
   const today = new Date()
-  const startDate = new Date(
+  const startTime = new Date(
       today.getFullYear(),
       today.getMonth(),
       today.getDate() - 6
   )
-  const endDate = new Date(
+  const endTime = new Date(
       today.getFullYear(),
       today.getMonth(),
       today.getDate() + 1
   )
-  getTime.value = [startDate, endDate]
+  getTime.value = [startTime, endTime]
   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: '请检查输入内容'
-      })
+  ConsumeSelectBy()
 }
-  } else {
-    //提示
-    ElMessage({
-      type: 'error',
-      message: '请检查输入内容'
-    })
-  }
-}
-// 查询商品的接口
-const goods = ref([])
+// 获取商品列表
 const getGoods = async function () {
   try {
     // 发送POST请求
     const result = await request({
-      url: '/product/findProductName',
+      url: 'http://18.143.76.3:10704/general/goods',
       data: {}
     })
     // 将响应结果存储到响应式数据中
@@ -297,20 +334,20 @@ const getGoods = async function () {
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
-getGoods()
 
-// 获取地区列表的方法，虚拟接口，替换为实际的地区列表接口地址
-const getArea = async function () {
+// 获取地区列表的方法
+const getMarket = async function () {
   try {
     // 发送请求获取地区列表
     const result = await request({
-      url: '/area/list', 
+      // url: '/general/market',
+      url: 'http://18.143.76.3:10704/general/market', // todo 换成实际接口地址
       data: {}
     })
     console.log('请求地区列表成功', result)
     // 存储地区数据
-    area.value = result.data
-    console.log('地区数据', area.value)
+    market.value = result.data
+    console.log('地区数据', market.value)
   } catch (error) {
     console.log('请求地区列表失败', error)
     ElMessage({
@@ -320,34 +357,84 @@ const getArea = async function () {
   }
 }
 
-
-// 新增排序字段和排序方式
-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'
+  if (column.prop === 'permanentGold') {
+    sortField.value = 'permanentGold'
+  } else if (column.prop === 'taskGold') {
+    sortField.value = 'taskGold'
+  } else if (column.prop === 'freeGold') {
+    sortField.value = 'freeGold'
   } else if (column.prop === 'createTime') {
-    sortField.value = 'create_time'
+    sortField.value = 'createTime'
   }
   sortOrder.value = column.order === 'ascending' ? 'DESC' : 'ASC'
-  get()
+  ConsumeSelectBy()
 }
+
 const handlePageSizeChange = function (val) {
   getObj.value.pageSize = val
-  get()
+  ConsumeSelectBy()
 }
+
 const handleCurrentChange = function (val) {
   getObj.value.pageNum = val
-  get()
+  ConsumeSelectBy()
 }
+// 验证跳转输入框的数字是否合法
+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('输入的数字合法')
+      ConsumeSelectBy()
+    } else {
+      //提示
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      })
+    }
+  } else {
+    //提示
+    ElMessage({
+      type: 'error',
+      message: '请检查输入内容'
+    })
+  }
+}
+
+/*
+====================计算属性=================================
+*/
+
+// 计算总金币数
+const sumGold = computed(() => permanentGolds.value + freeGolds.value + taskGolds.value)
+
+/*
+====================监听=================================
+*/
+
+/*
+====================挂载=================================
+*/
+
+
+onMounted(async function () {
+  await getAdminData()
+  await ConsumeSelectBy()
+  // getActivity();
+  await getMarket()
+  await getGoods()
+})
+
+
 </script>
 
 <template>
@@ -359,7 +446,7 @@ const handleCurrentChange = function (val) {
             <div class="head-card-element">
               <el-text class="mx-1" size="large">商品名称：</el-text>
               <el-select
-                v-model="detailVo.productName"
+                  v-model="consumeUser.goodsName"
                   placeholder="请选择商品名称"
                   size="large"
                   style="width: 180px"
@@ -379,14 +466,14 @@ const handleCurrentChange = function (val) {
             <div class="head-card-element">
               <el-text class="mx-1" size="large">所属地区：</el-text>
               <el-select
-                v-model="detailVo.area"
+                  v-model="consumeUser.market"
                   placeholder="请选择所属地区"
                   size="large"
                   style="width: 180px"
                   clearable
               >
                 <el-option
-                  v-for="(item, index) in area"
+                    v-for="(item, index) in market"
                     :key="index"
                     :label="item"
                     :value="item"
@@ -398,7 +485,7 @@ const handleCurrentChange = function (val) {
             <div class="head-card-element">
               <el-text class="mx-1" size="large">消耗平台：</el-text>
               <el-select
-                v-model="detailVo.consumePlatform"
+                  v-model="consumeUser.payPlatform"
                   placeholder="请选择消耗平台"
                   size="large"
                   style="width: 180px"
@@ -417,7 +504,7 @@ const handleCurrentChange = function (val) {
             <div class="head-card-element">
               <el-text class="mx-1" size="large">消费类型：</el-text>
               <el-select
-                v-model="detailVo.consumeType"
+                v-model="consumeUser.consumeType"
                 placeholder="请选择消费类型"
                 size="large"
                 style="width: 240px"
@@ -445,7 +532,8 @@ const handleCurrentChange = function (val) {
                   end-placeholder="结束时间"
               />
               <el-button style="margin-left: 10px" @click="getToday()"
-                >今</el-button
+              >今
+              </el-button
               >
               <el-button @click="getYesterday()">昨</el-button>
               <el-button @click="get7Days()">近7天</el-button>
@@ -455,6 +543,7 @@ const handleCurrentChange = function (val) {
               <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>
@@ -466,11 +555,9 @@ const handleCurrentChange = function (val) {
     <el-col>
       <el-card>
         <div>
-          消费金币总数：{{ Math.abs(totalCoin) }}，永久金币：{{
-            Math.abs(rechargeCoin)
-          }}，免费金币：{{ Math.abs(freeCoin) }}，任务金币：{{
-            Math.abs(taskCoin)
-          }}
+          消耗金额：{{ Math.abs(sumGold)  / 100 }}新币，永久金币：{{ Math.abs(permanentGolds) / 100 }}，免费金币：{{
+            Math.abs(freeGolds) / 100
+          }}，任务金币：{{ Math.abs(taskGolds) / 100 }}
         </div>
         <!-- 设置表格容器的高度和滚动样式 -->
         <div style="height: 576px; overflow-y: auto">
@@ -494,7 +581,7 @@ const handleCurrentChange = function (val) {
             </el-table-column>
             <!-- 固定姓名列 -->
             <el-table-column
-              prop="username"
+                prop="name"
                 label="姓名"
                 width="150px"
                 fixed="left"
@@ -506,19 +593,18 @@ const handleCurrentChange = function (val) {
                 width="110px"
                 fixed="left"
             />
-            <el-table-column prop="area" label="所属地区" width="110px" />
-            <el-table-column prop="productName" label="商品" width="160px" />
+            <el-table-column prop="market" label="所属地区" width="110px"/>
+            <el-table-column prop="goodsName" label="商品" width="160px"/>
             <el-table-column
-              prop="consumePlatform"
+                prop="payPlatform"
                 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>
+                {{ scope.row.payPlatform }}
+                <!--                <span scope.row.consumePlatform == 1">Homily Chart</span>-->
+
               </template>
             </el-table-column>
             <!-- <el-table-column
@@ -527,48 +613,47 @@ const handleCurrentChange = function (val) {
               width="120px"
             /> -->
             <el-table-column
-              prop="rechargeTotal"
+                prop="sumGold"
                 label="消费金币总数"
                 width="120px"
             >
               <template #default="scope">
                 {{
-                  (scope.row.taskCoin * -1 +
-                    scope.row.freeCoin * -1 +
-                    scope.row.rechargeCoin * -1) /
-                  100
+                  (scope.row.taskGold +
+                      scope.row.freeGold +
+                      scope.row.permanentGold) / 100
                 }}
               </template>
             </el-table-column>
 
             <el-table-column
-              prop="rechargeCoin"
+                prop="permanentGold"
                 label="永久金币"
                 sortable="“custom”"
                 width="110px"
             >
               <template #default="scope">
-                {{ (scope.row.rechargeCoin * -1) / 100 }}
+                {{ scope.row.permanentGold / 100 }}
               </template>
             </el-table-column>
             <el-table-column
-              prop="freeCoin"
+                prop="freeGold"
                 label="免费金币"
                 sortable="“custom”"
                 width="110px"
             >
               <template #default="scope">
-                {{ (scope.row.freeCoin * -1) / 100 }}
+                {{ scope.row.freeGold  / 100 }}
               </template>
             </el-table-column>
             <el-table-column
-              prop="taskCoin"
+                prop="taskGold"
                 label="任务金币"
                 sortable="“custom”"
                 width="110px"
             >
               <template #default="scope">
-                {{ (scope.row.taskCoin * -1) / 100 }}
+                {{ scope.row.taskGold / 100 }}
               </template>
             </el-table-column>
 
@@ -578,7 +663,7 @@ const handleCurrentChange = function (val) {
                 width="200px"
                 show-overflow-tooltip
             />
-            <el-table-column prop="name" label="提交人" width="110px" />
+            <el-table-column prop="adminName" label="提交人" width="110px"/>
             <el-table-column
                 prop="createTime"
                 label="消费时间"

src/views/home.vue

@@ -0,0 +1,270 @@
+<script setup>
+// 导航栏在这
+import { ref, onMounted, reactive, computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import ElementPlus from 'element-plus'
+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/blue.png'
+import { useRoute } from 'vue-router'
+
+const router = useRouter()
+const imgrule1 = dmmn
+const messageVisible = ref(false)
+
+// 这是获取用户信息的接口
+const adminData = ref({
+  name: ''
+})
+
+const getAdminData = async function () {
+  try {
+    const result = await API({ url: '/admin/userinfo', data: {} })
+    adminData.value = result
+    console.log('请求成功', result)
+    console.log('用户信息', adminData.value)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+// 获取地区
+const areas = ref([])
+
+const currentArea = ref('全部')
+
+const getAreas = async function () {
+  try {
+    const result = await API({ url: 'http://18.143.76.3:10704/general/market', data: {} })
+    areas.value = result.data
+    console.log('请求成功', result)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+// 查看个人信息弹出框
+const openMessage = function () {
+  messageVisible.value = true
+}
+const closeMessage = function () {
+  messageVisible.value = false
+}
+const message = function () {
+  openMessage()
+}
+
+// 获取machineId
+
+// function logout() {
+//   const machineId = localStorage.getItem('machineId')
+//   console.log('machineId:', machineId)
+//   localStorage.removeItem('token')
+//   // localStorage.clear();
+//   router.push('/login?machineId=' + machineId)
+//   //添加刷新页面的代码
+//   // window.location.reload();
+//   ElMessage.success('退出成功')
+// }
+
+// 挂载
+onMounted(async function () {
+  // 获取用户信息
+  getAdminData()
+  // 获取地区
+  getAreas()
+})
+// 处理地区点击事件，直接在组件内更新当前地区，包老师改的，直接传参
+const changeDataByArea = (item) => {
+  currentArea.value = item
+}
+//官网折叠
+const isCollapse = ref(false)
+const handleOpen = (key, keyPath) => {
+  console.log(key, keyPath)
+}
+const handleClose = (key, keyPath) => {
+  console.log(key, keyPath)
+}
+</script>
+
+<template>
+  <div class="common-layout">
+    <el-container>
+      <el-aside style="
+          width: 15%;
+          min-width: 180px;
+          position: fixed; /* 固定位置 */
+          top: 0;
+          left: 0;
+          height: 100vh; /* 高度占满视口 */
+          z-index: 100; /* 确保侧边栏在其他元素之上 */
+        ">
+        <div class="logo">
+          <img src="../assets/新logo.png" alt="logo" style="width: 80px; height: 80px" />
+          <!-- <div style="font-size: 16px; font-weight: bold; color: black; text-align: center;" ><h1>海外金币管理系统</h1></div> -->
+        </div>
+        <el-card style="min-height: 90%;">
+        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
+          <el-radio-button :value="false">扩展</el-radio-button>
+          <el-radio-button :value="true">收缩</el-radio-button>
+        </el-radio-group>
+
+        <el-menu  :router="true" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen" @close="handleClose">
+          <!-- 移除 v-if 权限验证 -->
+          <el-menu-item index="/workspace">
+            <el-icon><Folder /></el-icon>
+            <span>工作台</span>
+          </el-menu-item>
+
+          <!-- 移除 v-if 权限验证 -->
+          <el-sub-menu index="2">
+            <template #title>
+              <el-icon><Folder /></el-icon>
+              <span>财务审核</span>
+            </template>
+            <el-menu-item index="/rechargeAudit">充值审核</el-menu-item>
+            <el-menu-item index="/refundAudit">退款审核</el-menu-item>
+          </el-sub-menu>
+
+          <!-- 移除 v-if 权限验证 -->
+          <el-menu-item index="/rate">
+            <el-icon><Folder /></el-icon>
+            <span>汇率管理</span>
+          </el-menu-item>
+
+          <!-- 移除 v-if 权限验证 -->
+          <el-sub-menu index="4">
+            <template #title>
+              <el-icon><Folder /></el-icon>
+              <span>充值管理</span>
+            </template>
+              <el-menu-item index="/coinRecharge">金币充值</el-menu-item>
+              <el-menu-item index="/beanRecharge">金豆充值</el-menu-item>
+          </el-sub-menu>
+
+          <!-- 移除 v-if 权限验证 -->
+          <el-sub-menu index="6">
+            <template #title>
+              <el-icon>
+                <Folder />
+              </el-icon>
+              <span>消耗管理</span>
+            </template>
+              <el-menu-item index="/coinConsume">金币消耗</el-menu-item>
+              <el-menu-item index="/beanConsume">金豆消耗</el-menu-item>
+          </el-sub-menu>
+
+          <!-- 移除 v-if 权限验证 -->
+          <el-sub-menu index="8">
+            <template #title>
+              <el-icon>
+                <Folder />
+              </el-icon>
+              <span>退款管理</span>
+            </template>
+              <el-menu-item index="/coinRefund">金币退款</el-menu-item>
+              <el-menu-item index="/beanRefund">金豆退款</el-menu-item>
+          </el-sub-menu>
+
+          <!-- 移除 v-if 权限验证 -->
+          <el-menu-item index="/usergold">
+            <el-icon><Folder /></el-icon>
+            <span>客户账户明细</span>
+          </el-menu-item>
+
+          <!-- 移除 v-if 权限验证 -->
+          <el-menu-item index="/permissions">
+            <el-icon><Folder /></el-icon>
+            <span>权限管理</span>
+          </el-menu-item>
+        </el-menu>
+      </el-card>
+      </el-aside>
+      <el-container style="margin-left: 15%; min-width: 180px">
+        <!-- 修改 el-header 样式 -->
+        <el-header style="
+            position: fixed;
+            top: 0;
+            left: 15%;
+            right: 0;
+            z-index: 80;
+            background: white;
+          ">
+
+          <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
+            <el-sub-menu index="1" class="admin">
+              <template #title>
+                <el-image :src="imgrule1" alt="错误" style="width: 50px; height: 50px" />
+                <span style="margin-left: 10px">{{ adminData.name }}</span>
+              </template>
+              <el-menu-item @click="message()">查看个人信息</el-menu-item>
+              <el-menu-item index="1-2" @click="logout">退出登录</el-menu-item>
+            </el-sub-menu>
+          </el-menu>
+        </el-header>
+        <!-- 修改 el-main 样式 -->
+        <el-main style="margin-top: 60px">
+          <!-- 60px 是 el-header 的大致高度，可根据实际情况调整 -->
+          <router-view></router-view>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+  <!-- 查看个人信息 -->
+  <el-dialog v-model="messageVisible" title="查看个人信息" width="500px">
+    <el-form :model="adminData">
+      <el-form-item label="用户姓名" label-width="100px" label-position="left">
+        <span class="message-font">{{ adminData.name }}</span>
+      </el-form-item>
+      <el-form-item label="精网号" label-width="100px" label-position="left">
+        <span class="message-font">{{ adminData.jwcode }}</span>
+      </el-form-item>
+      <el-form-item label="地区" label-width="100px" label-position="left">
+        <span class="message-font">{{ adminData.area }}</span>
+      </el-form-item>
+      <el-form-item label="注册时间" label-width="100px" label-position="left">
+        <span class="message-font">{{ adminData.createTime }}</span>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button text @click="closeMessage()">关闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.message-font {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.admin {
+  margin-left: auto;
+}
+
+.el-aside {
+  min-height: 100vh;
+  width: 200px;
+}
+/* background-color: #BFD8D2; */
+.logo {
+  margin: 20px 0px 20px 20px;
+  display: flex;
+}
+
+.el-menu-demo {
+  border: none;  /* 去除边框 */
+  padding: 0;  /* 去除内边距 */
+  float: right;
+  /* 将菜单向右浮动 */
+}
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 240px;
+  min-height: 400px;
+  border: none;  /* 去除边框 */
+}
+
+</style>

src/views/index.vue

@@ -36,7 +36,7 @@ const currentArea = ref('全部')
 
 const getAreas = async function () {
   try {
-    const result = await API({ url: '/recharge/user/search', data: {} })
+    const result = await API({ url: 'http://18.143.76.3:10704/general/market', data: {} })
     areas.value = result.data
     console.log('请求成功', result)
   } catch (error) {
@@ -56,16 +56,16 @@ const message = function () {
 
 // 获取machineId
 
-function logout() {
-  const machineId = localStorage.getItem('machineId')
-  console.log('machineId:', machineId)
-  localStorage.removeItem('token')
-  // localStorage.clear();
-  router.push('/login?machineId=' + machineId)
-  //添加刷新页面的代码
-  // window.location.reload();
-  ElMessage.success('退出成功')
-}
+// function logout() {
+//   const machineId = localStorage.getItem('machineId')
+//   console.log('machineId:', machineId)
+//   localStorage.removeItem('token')
+//   // localStorage.clear();
+//   router.push('/login?machineId=' + machineId)
+//   //添加刷新页面的代码
+//   // window.location.reload();
+//   ElMessage.success('退出成功')
+// }
 
 // 挂载
 onMounted(async function () {

src/views/login.vue

@@ -27,9 +27,7 @@ getMachineId()
 
 const router = useRouter() // 获取路由实例
 let formData = new FormData()
-// 添加表单数据到FormData对象中
-// formData.append("jwcode", form.value.jwcode);
-// formData.append("password", form.value.password);
+
 
 const form = ref({ jwcode: '', password: '', token: '', machineId: machineId })
 //调用方法
@@ -63,7 +61,7 @@ const login = async function () {
   } catch (error) {
     console.log('请求失败', error)
     ElMessage.error('登录失败，请检查账号密码')
-    // 在这里可以处理错误逻辑，比如显示错误提示等
+    
   }
 }
 
@@ -78,7 +76,7 @@ const login = async function () {
       class="bg"
       fit="fit"
     />
-    <!-- <div style="height: 100vh; width: 1000px" class="container"></div> -->
+    
     <el-col :span="6" :offset="3" class="form">
       <!-- 登录表单 -->
       <el-form :model="form" size="large" autocomplete="off" >
@@ -113,18 +111,13 @@ const login = async function () {
             </svg>
             <p class="text">登录</p>
           </button>
-          <!-- <el-button
-            class="button"
-            type="primary"
-            auto-insert-space
-            @click="login()"
-            >登录</el-button
-          > -->
+          
         </el-form-item>
       </el-form>
     </el-col>
   </el-row>
 </template>
+
 <style scoped>
 .bg {
   border-radius: 0 20px 20px 0;
@@ -201,21 +194,6 @@ const login = async function () {
   fill: #007acc;
 }
 
-/* .box {
-  padding: 20px;
-  border-radius: 10px;
-  background-color: #fff;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-} */
-/* From Uiverse.io by marsella_3472 */
-/*
-More comprehensive version at shenanigans.shoghisimon.ca/collection/css
- */
-/* From Uiverse.io by SelfMadeSystem */
 .container {
   width: 100%;
   height: 100%;
@@ -226,18 +204,3 @@ More comprehensive version at shenanigans.shoghisimon.ca/collection/css
 }
 </style>
 
-<!-- 这是补救
-  const run = () => {
-    const width = window.innerWidth;
-    const height = window.innerHeight;
-   
-    const chartNode = document.querySelector("main");
-    drawChart.default(chartNode,data,width,height);
-  };
-  window.addEventListener("resize", run);
-  document.addEventListener("DOMContentLoaded", run);
-
-  </script>
-  </body>
-  </html>
--->

src/views/managerecharge/rate.vue

@@ -1,38 +1,32 @@
 <script setup>
-import { ref, onMounted, computed, reactive } from 'vue'
+import {onMounted, reactive, ref} from 'vue'
 import {ElMessage, ElMessageBox} from 'element-plus'
-import axios from 'axios'
-import { createApp } from 'vue'
-import moment from 'moment'
-
-import _ from 'lodash'
 import request from '@/util/http'
 
-// 查询用户接口
+/*
+====================工具方法=========================
+*/
+
+/*
+====================数据===================================
+*/
+
+// 查询当前登录的信息
 const adminData = ref({
+  adminId: '',
   name: ''
 })
-const getAdminData = async function () {
-  try {
-    const result = await request({
-      url: '/admin/userinfo',
-      data: {}
-    })
-    adminData.value = result
-    rateAdd.value.adminId = adminData.value.adminId
-    rateEdit.value.adminId = adminData.value.adminId
-    console.log('请求成功', result)
-    // console.log('用户信息', user.value)
-  } catch (error) {
-    console.log('请求失败', error)
-  }
-}
-getAdminData()
 
-const regeAdd = ref(false)
+// 默认 编辑板块是关的
 const regeEdit = ref(false)
+
+// 表单引用(根据id获取信息后 将内容存到编辑表单)
+const editFormRef = ref(null)
+
+
 //汇率表格数据
 const tableData = ref([])
+
 //搜索对象
 const getObj = ref({
   pageNum: 1,
@@ -40,226 +34,179 @@ const getObj = ref({
 })
 
 const total = ref(0)
-//分页总条目
-
 
-// 替换原来的time，用数组
-const timeRange = ref([])
-
-// 格式化日期为YYYY-MM-DD HH:mm:ss，否则格式不对无法填充日期时间选择器
-const formatDateTime = (date) => {
-  return moment(date).format('YYYY-MM-DD HH:mm:ss')
+// 编辑方法 表单
+const rateEdit = ref({
+  id: null,
+  rateName: '',
+  num: null,
+  adminId: null,
+  updateTime: Date.now(),
+})
+//货币条目
+const rateNames = [
+  {
+    value: 'USD',
+    label: 'USD'
+  },
+  {
+    value: 'HKD',
+    label: 'HKD'
+  },
+  {
+    value: 'THB',
+    label: 'THB'
+  },
+  {
+    value: 'VND',
+    label: 'VND'
+  },
+  {
+    value: 'CAD',
+    label: 'CAD'
+  },
+  {
+    value: 'MYR',
+    label: 'MYR'
+  },
+  {
+    value: 'KRW',
+    label: 'KRW'
+  },
+  {
+    value: 'JPY',
+    label: 'JPY'
+  },
+  {
+    value: 'CNY',
+    label: 'CNY'
   }
-
-// 今天
-const getToday = () => {
-  const today = new Date()
-  const start = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0)
-  const end = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 0, 0, 0)
-  timeRange.value = [formatDateTime(start), formatDateTime(end)]
-  search()
+]
+// 汇率校验
+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 getYesterday = () => {
-  const yesterday = new Date()
-  yesterday.setDate(yesterday.getDate() - 1)
-  const start = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate(), 0, 0, 0)
-  const end = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate() + 1, 0, 0, 0)
-  timeRange.value = [formatDateTime(start), formatDateTime(end)]
-  search()
 }
+// 定义表单验证规则
+const rules = reactive({
+  rateName: [{required: true, message: '请选择货币名称', trigger: 'blur'}],
+  num: [{validator: checkFreeGoldRadio, trigger: 'blur'}],
+})
+
+// 表单大小
+const formSize = ref('default')
+
+/*
+====================方法=========================
+*/
 
-// 近 7 天
-const get7Days = () => {
-  const today = new Date()
-  const start = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6, 0, 0, 0)
-  const end = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 0, 0, 0)
-  timeRange.value = [formatDateTime(start), formatDateTime(end)]
-  search()
+// 获取当前登录信息
+const getAdminData = async function () {
+  try {
+    const result = await request({
+      url: '/admin/userinfo',
+      data: {}
+    })
+    adminData.value = result
+    rateEdit.value.adminId = adminData.value.adminId
+    console.log('请求成功', result)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
 }
 
-const get = async function (val) {
+// 获取所有汇率 列表
+const getAllRate = async function (val) {
   try {
     // 搜索参数页码赋值
     if (typeof val === 'number') {
       getObj.value.pageNum = val;
     }
 
-    // 时间赋值
-    const time = {}
-    if (timeRange.value.length === 2) {
-      time.startTime = moment(timeRange.value[0]).format('YYYY-MM-DD HH:mm:ss')
-      time.endTime = moment(timeRange.value[1]).format('YYYY-MM-DD HH:mm:ss')
-    } else {
-      time.startTime = ''
-      time.endTime = ''
-    }
-
-    console.log('搜索参数', {
-      ...getObj.value,
-      rate: { ...time }
-    });
     // 发送POST请求
     const result = await request({
-      url: '/rates/search',
+      url: 'http://18.143.76.3:10704/rate/selectAll',
       method: 'POST',
       data: {
-        ...getObj.value,
-        rate: { ...time }
+        pageNum: getObj.value.pageNum,
+        pageSize: getObj.value.pageSize,
       }
     });
 
     // 将响应结果存储到响应式数据中
-    console.log('请求成功', result);
+    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('请求失败', error);
     ElMessage.error('请求失败');
   }
 }
 
-// 搜索
-const search = function () {
-  getObj.value.pageNum = 1
-  get()
-}
-// 添加方法
-const rateAdd = ref({})
-const addRate = async function () {
-  rateAdd.value.adminId = adminData.value.adminId
-  if (rateAdd.value.startTime) {
-    const date = new Date(rateAdd.value.startTime)
-    date.setHours(0, 0, 0, 0)
-    rateAdd.value.startTime = `${date.getFullYear()}-${String(
-      date.getMonth() + 1
-    ).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} 00:00:00`
-  }
-  if (rateAdd.value.endTime) {
-    const date = new Date(rateAdd.value.endTime)
-    date.setHours(23, 59, 59, 999)
-    rateAdd.value.endTime = `${date.getFullYear()}-${String(
-      date.getMonth() + 1
-    ).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} 23:59:59`
-  }
-  try {
-    console.log('搜索参数', getObj.value)
-    // 发送POST请求
-    const result = await request({
-      url: '/rates/add',
-      data: rateAdd.value
-    })
-    if (result.code == 0) {
-      ElMessage.error(result.msg)
-    }else{
-      ElMessage({
-        type: 'success',
-        message: '新增汇率成功'
-      })
-    }
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    get()
-  } catch (error) {
-    console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-}
-
-const add = () => {
-  Ref.value.validate(async (valid) => {
-    if (valid) {
-      ElMessageBox.confirm('确认添加？')
-        .then(() => {
-          addRate()
-          rateAdd.value = {}
-          timeRange.value = {
-            startTime: '',
-            endTime: ''
-          }
-          regeAdd.value = false
-        })
-        .catch(() => {
-          regeAdd.value = false
-        })
-    } else {
-      //提示
-      ElMessage({
-        type: 'error',
-        message: '请检查输入内容'
-      })
-    }
-  })
-}
+// 获取分页数据
 const handlePageSizeChange = function (val) {
   getObj.value.pageSize = val
-  get()
+  getAllRate()
 }
+
+// 获取分页数据
 const handleCurrentChange = function (val) {
   getObj.value.pageNum = val
-  get()
+  getAllRate()
 }
-// 使用 _.throttle 并设置 trailing 为 false 实现严格节流，只执行一次
-const throttledAdd = _.throttle(add, 5000, { trailing: false })
-// 编辑方法
-const rateEdit = ref({})
-//查询已有的数据
+
+//查询已有的数据（根据id）
 const getEditData = async function (row) {
   try {
     console.log('搜索参数', getObj.value)
     // 发送POST请求
     const result = await request({
-      url: '/rates/searchById?rateId=' + row.rateId,
-      data: {}
+      url: 'http://18.143.76.3:10704/rate/selectById',
+      data: {id: row.id}
     })
 
     // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
+    console.log('根据id查 请求成功', result)
     // 存储表格数据
-
-    rateEdit.value = result.data
+    // rateEdit.value = result.data
+    // 只赋部分的
+    rateEdit.value.id = row.id
+    rateEdit.value.rateName = row.rateName
+    rateEdit.value.num = row.num
+    console.log('根据id获取的数据', rateEdit.value)
     rateEdit.value.adminId = adminData.value.adminId
-    console.log('这是编辑的数值', rateEdit.value)
+
   } catch (error) {
     console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
+// 编辑汇率
 const editRate = async function () {
-  if (rateEdit.value.startTime) {
-    const date = new Date(rateEdit.value.startTime)
-    date.setHours(0, 0, 0, 0)
-    rateEdit.value.startTime = `${date.getFullYear()}-${String(
-      date.getMonth() + 1
-    ).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} 00:00:00`
-  }
-  if (rateEdit.value.endTime) {
-    const date = new Date(rateEdit.value.endTime)
-    date.setHours(23, 59, 59, 999)
-    rateEdit.value.endTime = `${date.getFullYear()}-${String(
-      date.getMonth() + 1
-    ).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} 23:59:59`
-  }
   try {
     console.log('搜索参数', rateEdit.value)
     // 发送POST请求
     const result = await request({
-      url: '/rates/update',
+      url: 'http://18.143.76.3:10704/rate/update',
       data: rateEdit.value
     })
     // 将响应结果存储到响应式数据中
     console.log('请求成功', result)
-    get()
+    await getAllRate()
   } catch (error) {
     console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
+
+// 编辑确认
 const edit = () => {
   ElMessageBox.confirm('确认修改？')
       .then(() => {
@@ -271,71 +218,20 @@ const edit = () => {
       })
 }
 
-// 删除方法
-const deleteRate = async function (row) {
-  try {
-    // 发送POST请求
-    const result = await request({
-      url: '/rates/delete/ ' + row.rateId,
-      data: {}
-    })
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    get()
-  } catch (error) {
-    console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
+// 关闭编辑弹窗时重置表单
+const cancelEdit = () => {
+  regeEdit.value = false
+
 }
 
-// 挂载
-onMounted(async function () {
-  get()
-})
-//分页
-function handlePageChange(currentPage, pageSize) {
-  get()
+// 关闭编辑弹窗
+const handleEditDialogClose = () => {
+  if (editFormRef.value) {
+    getAllRate()
   }
-//货币条目
-const options = [
-  {
-    value: 'USD',
-    label: 'USD'
-  },
-  {
-    value: 'HKD',
-    label: 'HKD'
-  },
-  {
-    value: 'THB',
-    label: 'THB'
-  },
-  {
-    value: 'VND',
-    label: 'VND'
-  },
-  {
-    value: 'CAD',
-    label: 'CAD'
-  },
-  {
-    value: 'MYR',
-    label: 'MYR'
-  },
-  {
-    value: 'KRW',
-    label: 'KRW'
-  },
-  {
-    value: 'JPY',
-    label: 'JPY'
-  },
-  {
-    value: 'CNY',
-    label: 'CNY'
 }
-]
 
+// 日期格式化
 function formatDate(value) {
   if (!value) return ''
   const date = new Date(value)
@@ -347,200 +243,70 @@ function formatDate(value) {
   const seconds = date.getSeconds().toString().padStart(2, '0')
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
 }
-function formatDateTwe(value) {
-  if (!value) return ''
-  const date = new Date(value)
-  const year = date.getFullYear()
-  const month = (date.getMonth() + 1).toString().padStart(2, '0')
-  const day = date.getDate().toString().padStart(2, '0')
-  return `${year}-${month}-${day}`
-}
 
-// //表格高度
-// const tableHeight = computed(function () {
-//   return (getObj.value.pageSize + 1) * 50 + "px";
-// });
 
-// 新增数据规则
-// 表单验证ref
-const Ref = ref(null)
-const handleStartTimeChange = () => {
-  Ref.value.validateField('endTime')
-}
-const checkStartTime = function (rule, value, callback) {
-  if (value <= new Date()) {
-    callback(new Error('开始时间不能小于当前时间'))
-  } else {
-    callback()
-  }
-}
-const checkEndTime = function (rule, value, callback) {
-  if (value <= new Date()) {
-    callback(new Error('结束时间不能小于当前时间'))
-  } else if (value <= rateAdd.value.startTime) {
-    callback(new Error('结束时间不能小于开始时间'))
-  } else {
-    callback()
-  }
-}
-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()
+
+// 输入框过滤
+function handleInput(value) {
+  // 检查是否使用了中文句号
+  if (value.includes('。') || /[^\d.]/g.test(value)) {
+    ElMessage.warning('请输入正确的符号');
+    // value = value.replace('。', '.');
   }
+
+
+  // 处理多个小数点的情况，保留第一个，移除后续的
+  const parts = value.split('.');
+  if (parts.length > 2) {
+    value = parts[0] + '.' + parts.slice(1).join('');
+    ElMessage.warning('只能包含一个小数点');
   }
-const rules = reactive({
-  currency: [{ required: true, message: '请选择货币名称', trigger: 'blur' }],
-  exchangeRate: [{ validator: checkFreeGoldRadio, trigger: 'blur' }],
-  startTime: [
-    { required: true, message: '请选择开始时间', trigger: 'blur' },
-    { validator: checkStartTime, trigger: 'blur' }
-  ],
-  endTime: [
-    { required: true, message: '请选择结束时间', trigger: 'blur' },
-    { validator: checkEndTime, trigger: 'blur' }
-  ]
-})
 
-// 重置的按钮
-const handledelete = function () {
-  timeRange.value={}
-  getObj.value.pageNum = 1
-}
-// 验证跳转输入框的数字是否合法
-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: '请检查输入内容'
-      })
+  // 禁止输入负数
+  if (value.startsWith('-')) {
+    ElMessage.warning('不允许输入负数');
+    value = value.substring(1);
   }
-  } else {
-    //提示
-    ElMessage({
-      type: 'error',
-      message: '请检查输入内容'
-    })
+
+  // 小数点前没有数字时补0
+  if (value.startsWith('.')) {
+    value = '0' + value;
+    ElMessage.info('已自动补充前导0');
   }
+
+  // 更新表单值
+  rateEdit.value.num = value;
+  return value;
 }
 
-// 删除=========================================================
-// 删除按钮
+/*
+====================监听=========================
+*/
 
-// 删除按钮的气泡弹出框确认按钮
-const delConfirm = async function (row) {
-  try {
-    // 发送POST请求
-    const result = await request({
-      url: '/rates/delete/ ' + row.rateId,
-      data: {}
-    })
-    if (result.code == 200) {
-      ElMessage({
-        type: 'success',
-        message: '删除成功'
-      })
-      // 将响应结果存储到响应式数据中
-      console.log('请求成功', result)
-      // 刷新表格数据
-      get()
-    } else {
-      ElMessage({
-        type: 'error',
-        message: '删除失败'
+/*
+====================挂载=========================
+*/
+
+// 挂载
+onMounted(async function () {
+  await getAllRate()
+  await getAdminData()
 })
-    }
-  } catch (error) {
-    console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-}
 
-//这是限制输入小数不超过七位的限制方法
-function handleInput(value) {
-  // 限制小数点后7位，这里使用正则表达式来实现
-  rateAdd.value.exchangeRate = value
-    .replace(/(\.\d{7})\d+/, '$1')
-    .replace(/^(\d+)(\.\d{0,7})?$/, '$1$2')
-}
+
 </script>
 
+
 <template>
   <!-- 这是主页面 -->
   <el-row>
     <el-col>
-      <el-card>
-        <!-- 这是时间 -->
-        <div class="demo-range">
-          <el-row>
-            <el-col :span="9">
-              <el-form-item>
-                <el-text class="mx-1" size="large">时间范围：</el-text>
-                <el-date-picker
-                  v-model="timeRange"
-                  type="datetimerange"
-                  range-separator="至"
-                  start-placeholder="开始日期"
-                  end-placeholder="结束日期"
-                  style="width: 300px"
-                  format="YYYY-MM-DD HH:mm:ss"
-                  value-format="YYYY-MM-DD HH:mm:ss"
-                />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-button @click="getToday">今</el-button>
-              <el-button @click="getYesterday">昨</el-button>
-              <el-button @click="get7Days">近7天</el-button>
-            </el-col>
-            <el-col :span="4">
-              <el-button
-                class="button-item"
-                type="success"
-                @click="handledelete()"
-              >重置</el-button>
-              <el-button
-                type="primary"
-                @click="search"
-              >查询</el-button>
-            </el-col>
-          </el-row>
-        </div>
-      </el-card>
-    </el-col>
-  </el-row>
-
-  <el-row>
-    <el-col>
       <el-card class="box-card" style="max-width: 100%">
-        <!-- 添加 -->
-        <div class="add-item">
-          <el-button
-            style="color: #048efb; border: 1px solid #048efb"
-            @click="regeAdd = true"
-            >新增汇率</el-button
-          >
-        </div>
         <!-- 表格 -->
         <div>
           <el-table
               :data="tableData"
               v-if="(tableData.flag = 1)"
-            :height="tableHeight"
-            style="width: 100%"
           >
             <el-table-column
                 type="index"
@@ -554,48 +320,18 @@ function handleInput(value) {
                   }}</span>
               </template>
             </el-table-column>
-            <el-table-column prop="currency" label="货币名称" :span="2" />
-            <el-table-column prop="exchangeRate" label="汇率" :span="2">
+            <el-table-column prop="rateName" label="货币名称" :span="2"/>
+            <el-table-column prop="num" label="汇率" :span="2">
               <template #default="scope">
                 <p>
-                  {{ scope.row.exchangeRate }}{{ scope.row.currency }} ：1新币
+                  {{ scope.row.num }} ：1
                 </p>
               </template>
             </el-table-column>
 
-            <el-table-column prop="createTime" label="添加时间" :span="3">
+            <el-table-column prop="updateTime" label="添加时间" :span="3">
               <template #default="scope">
-                <span>{{ formatDate(scope.row.createTime) }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="adminName" label="提交人" :span="1" />
-            <el-table-column prop="status" label="状态">
-              <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="red-dot"></span>
-                    <span>未开始</span>
-                  </div>
-                </span>
-                <span v-if="scope.row.status === 2">
-                  <div class="status">
-                    <span class="grey-dot"></span>
-                    <span>已过期</span>
-                  </div>
-                </span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="startTime" label="持续时间" :span="10">
-              <template #default="scope">
-                <span>{{ formatDateTwe(scope.row.startTime) }}</span>
-                <span>---</span>
-                <span>{{ formatDateTwe(scope.row.endTime) }}</span>
+                <span>{{ formatDate(scope.row.updateTime) }}</span>
               </template>
             </el-table-column>
             <el-table-column label="操作" :span="3">
@@ -608,30 +344,14 @@ function handleInput(value) {
                       getEditData(scope.row)
                     }
                   "
-                  >编辑</el-button
-                >
-                <el-popconfirm
-                  title="确定将此条活动删除吗？"
-                  @confirm="delConfirm"
-                >
-                  <template #reference>
-                    <el-button type="primary" text> 删除 </el-button>
-                  </template>
-                  <template #actions="{ confirm, cancel }">
-                    <el-button size="small" @click="cancel">取消</el-button>
-                    <el-button
-                      type="primary"
-                      size="small"
-                      @click="confirm(scope.row)"
+                >编辑
+                </el-button
                 >
-                      确定
-                    </el-button>
-                  </template>
-                </el-popconfirm>
               </template>
             </el-table-column>
           </el-table>
         </div>
+
         <!-- 分页 -->
         <div class="pagination">
           <el-pagination
@@ -648,92 +368,17 @@ function handleInput(value) {
     </el-col>
   </el-row>
 
-  <!-- 这是添加弹窗 -->
-  <el-dialog
-    v-model="regeAdd"
-    title="新增汇率"
-    width="500"
-    :close-on-click-modal="false"
-  >
-    <template #footer>
-      <el-form
-        ref="Ref"
-        style="max-width: 600px"
-        :model="rateAdd"
-        :rules="rules"
-        label-width="auto"
-        class="demo-ruleForm"
-        :size="formSize"
-        status-icon
-      >
-        <el-form-item prop="currency" label="货币名称:">
-          <el-select
-            v-model.number="rateAdd.currency"
-            placeholder="请选择"
-            style="width: 240px"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item prop="exchangeRate" label="汇率:">
-          <el-input
-            v-model="rateAdd.exchangeRate"
-            @update:modelValue="handleInput"
-            style="width: 120px"
-          />
-          <p class="unit">:1</p>
-          <p>
-            (提示：当前规则每 {{ rateAdd.exchangeRate }}
-            {{ rateAdd.currency }}可兑换 1 新币)
-          </p>
-        </el-form-item>
-        <el-form-item prop="adminId" label="提交人:">
-          <el-input :value="adminData.name" disabled style="width: 240px" />
-        </el-form-item>
-        <el-form-item prop="startTime" label="开始时间:">
-          <el-date-picker
-            v-model="rateAdd.startTime"
-            type="date"
-            placeholder="请选择时间"
-            :default-value="new Date()"
-            @change="handleStartTimeChange"
-            value-format="YYYY-MM-DD"
-          />
-        </el-form-item>
-        <el-form-item prop="endTime" label="结束时间:">
-          <el-date-picker
-            v-model="rateAdd.endTime"
-            type="date"
-            placeholder="请选择时间"
-            :default-value="new Date()"
-            value-format="YYYY-MM-DD"
-          />
-        </el-form-item>
-        <el-form-item>
-          <div class="dialog-footer">
-            <el-button type="primary" @click="throttledAdd">添加</el-button>
-            <el-button @click="regeAdd = false">取消</el-button>
-          </div>
-        </el-form-item>
-      </el-form>
-    </template>
-  </el-dialog>
-
   <!-- 这是编辑弹窗 -->
   <el-dialog
       v-model="regeEdit"
       title="修改汇率"
       width="500"
       :close-on-click-modal="false"
+      @close="handleEditDialogClose"
   >
     <template #footer>
       <el-form
-        ref="ruleFormRef"
+          ref="editFormRef"
           style="max-width: 600px"
           :model="rateEdit"
           :rules="rules"
@@ -742,53 +387,41 @@ function handleInput(value) {
           :size="formSize"
           status-icon
       >
-        <el-form-item label="货币名称:">
+        <el-form-item prop="rateName" label="货币名称:">
           <el-select
-            v-model="rateEdit.currency"
+              v-model="rateEdit.rateName"
               placeholder="请选择"
               style="width: 240px"
           >
             <el-option
-              v-for="item in options"
+                v-for="item in rateNames"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="汇率:">
-          <el-input v-model="rateEdit.exchangeRate" style="width: 120px" />
+        <el-form-item prop="num" label="汇率:">
+          <el-input
+              v-model="rateEdit.num"
+              @update:modelValue="handleInput"
+              style="width: 120px"
+          />
           <p class="unit">:1</p>
-          <p>
-            (提示：当前规则每 {{ rateEdit.exchangeRate }}
-            {{ rateEdit.currency }}可兑换 1 新币)
+          <p class="rate-tip">
+            (提示：当前规则每
+            <span>{{ rateEdit.num }}</span>
+            <span>{{ rateEdit.rateName }}</span>
+            可兑换 1 新币)
           </p>
         </el-form-item>
         <el-form-item label="提交人:">
           <el-input disabled :value="adminData.name" style="width: 240px"/>
         </el-form-item>
-        <el-form-item label="开始时间:">
-          <el-date-picker
-            v-model="rateEdit.startTime"
-            type="date"
-            placeholder="请选择时间"
-            :default-value="new Date()"
-            value-format="YYYY-MM-DD"
-          />
-        </el-form-item>
-        <el-form-item label="结束时间:">
-          <el-date-picker
-            v-model="rateEdit.endTime"
-            type="date"
-            placeholder="请选择时间"
-            :default-value="new Date()"
-            value-format="YYYY-MM-DD"
-          />
-        </el-form-item>
         <el-form-item>
           <div class="dialog-footer">
             <el-button type="primary" @click="edit">修改</el-button>
-            <el-button @click="regeEdit = false">取消</el-button>
+            <el-button @click="cancelEdit">取消</el-button>
           </div>
         </el-form-item>
       </el-form>
@@ -796,6 +429,7 @@ function handleInput(value) {
   </el-dialog>
 </template>
 
+
 <style scoped>
 p {
   margin: 0px;
@@ -840,10 +474,16 @@ p {
 .el-card {
   padding: 0px;
 }
+
 .pagination {
   display: flex;
 }
+
 .status {
   display: flex;
 }
+
+.rate-tip {
+  hyphens: auto;
+}
 </style>

src/views/permissions/index.vue

@@ -9,12 +9,12 @@ import { UserFilled } from '@element-plus/icons-vue'
 import _ from 'lodash'
 import request from '@/util/http'
 
-// 充值明细表格
+// 客户明细表格
 const tableData = ref([])
 // 搜索===========================================
 //分页总条目
 const total = ref(100)
-// 搜索detailY
+// 搜索admin
 const admin = ref({})
 // 搜索对象
 const getObj = ref({
@@ -38,7 +38,7 @@ const permissionEditObj = ref({})
 // 删除权限对象
 const delObj = ref({})
 
-// 搜索接口
+// 搜索接口search
 const get = async function (val) {
   try {
     // 搜索参数页码赋值

src/views/permissions/permission.vue

@@ -0,0 +1,953 @@
+<script setup>
+import { ref, onMounted, reactive, computed } from 'vue'
+import ElementPlus from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import axios from 'axios'
+import moment from 'moment'
+import { ta } from 'element-plus/es/locales.mjs'
+import { UserFilled } from '@element-plus/icons-vue'
+import _ from 'lodash'
+import request from '@/util/http'
+
+// 客户明细表格
+const tableData = ref([])
+// 搜索===========================================
+//分页总条目
+const total = ref(100)
+// 搜索admin
+const admin = ref({})
+// 搜索对象
+const getObj = ref({
+  pageNum: 1,
+  pageSize: 10
+})
+// 新增用户权限弹窗
+const permissionAddVisible = ref(false)
+// 编辑用户权限弹窗
+const permissionEditVisible = ref(false)
+//选地区
+const market = ref([])
+// 选部门
+const postiton = ref([])
+// 新增用户权限对象
+const permissionAddObj = ref({})
+// 新增用户权限对象，机器码要实现存储多个，addMachineIdInput方法实现
+const addAdmin = ref({ 
+    account: '',
+    name: '',
+    market: '',
+    permission: '',
+    postiton: '',
+    machineId: '', // 初始机器码输入框
+    machineIds: [], // 动态添加的机器码输入框
+    remark: ''
+})
+const addMachineIdInput = function () {
+  if (addAdmin.value.machineIds.length >= 1) {
+    ElMessage.warning('设备数量已达上限')
+    return
+  }
+  addAdmin.value.machineIds.push('')
+}
+
+// 编辑用户权限对象
+const permissionEditObj = ref({})
+// 删除权限对象
+const delObj = ref({})
+
+// 搜索接口search
+const get = async function (val) {
+  try {
+    // 搜索参数页码赋值
+    if (typeof val === 'number') {
+      getObj.value.pageNum = val
+    }
+    console.log('搜索参数', getObj.value)
+    // 发送POST请求
+    const result = await request({
+      url: '/admin/search',
+      data: {
+        ...getObj.value,
+        admin: { ...admin.value }
+      }
+    })
+    tableData.value = result.data.list
+    console.log('tableData', tableData.value)
+    total.value = result.data.total
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+// 精网号去空格
+const trimJwCode = () => {
+  if (admin.value.account) {
+    admin.value.account = admin.value.account.replace(/\s/g, ''); 
+  }
+}  
+// 搜索
+const search = function () {
+  trimJwCode();
+  getObj.value.pageNum = 1
+  get()
+}
+// 重置
+const reset = function () {
+  admin.value = {}
+//   addAdmin.value = {}//用在新增表单的重置方法，但现在采用Ref.value.resetFields()方法，不需要reset
+}
+
+// 获取地区
+const getArea = async function () {
+  try {
+    const result = await request({
+      url: '/admin/market',
+      data: {}
+    })
+    market.value = result.data
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// 获取部门
+const getStore = async function () {
+  try {
+    const result = await request({
+      url: '/admin/postiton',
+      data: {}
+    })
+    postiton.value = result.data
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+// 验证跳转输入框的数字是否合法
+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 openPermissionAddVisible = function () {
+  permissionAddVisible.value = true
+}
+// 关闭新增用户权限弹窗，并刷新表单
+const closePermissionAddVisible = function () {
+    // reset() ，下面这个方法还可以重置表单验证（请输入...），reset只能重置输入，修改reset方法
+    // 重置表单数据，当我们在新增表单点击添加后会弹出一个文本框，再点击取消，弹出的文本框应该是不显示出来的
+    addAdmin.value = {
+    account: '',
+    name: '',
+    market: '',
+    permission: '',
+    postiton: '',
+    machineId: '', 
+    machineIds: [], 
+    remark: ''
+  };
+  permissionAddVisible.value = false;
+  // 清除表单验证状态
+    Ref.value.resetFields();
+  
+}
+// 新增用户权限初始化
+const permissionAddInit = function () {
+  permissionAddObj.value = {}
+  openPermissionAddVisible()
+}
+// 通过精网号查询没有权限的用户
+const getAdminByJwcodeWithoutPermission = async function () {
+  try {
+    const result = await request({
+      url: '/admin/selectNo',
+      data: permissionAddObj.value
+    })
+    if (result.code == 200) {
+      permissionAddObj.value = result.data[0]
+      ElMessage.success('精网号查询成功')
+    } else {
+      ElMessage.error(result.msg)
+    }
+    console.log('精网号查询没有权限的用户', permissionAddObj.value)
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// 新增用户权限提交
+// const permissionAdd = async function () {
+//   try {
+//     if (
+//       permissionAddObj.value.account == "" ||
+//       permissionAddObj.value.account == null ||
+//       permissionAddObj.value.name == "" ||
+//       permissionAddObj.value.name == null
+//     ) {
+//       ElMessage.error("请选择要添加权限的用户");
+//       return;
+//     }
+//     if (
+//       permissionAddObj.value.permisson == "" ||
+//       permissionAddObj.value.permission == null
+//     ) {
+//       ElMessage.error("请选择权限");
+//       return;
+//     }
+//     console.log("新增用户权限提交", permissionAddObj.value);
+
+//     const result = await request(
+//       {
+// url: "/admin/update",
+//       data: permissionAddObj.value}
+//     );
+
+//     // 将响应结果存储到响应式数据中
+//     console.log("请求成功", result);
+
+//     ElMessage.success("添加成功");
+
+//     get();
+
+//     closePermissionAddVisible();
+//   } catch (error) {
+//     console.log("新增用户权限失败", error);
+//     // 在这里可以处理错误逻辑，比如显示错误提示等
+
+//     ElMessage.error("新增用户权限失败");
+//     closePermissionAddVisible();
+//   }
+// };
+const permissionAdd = async function () {
+  Ref.value.validate(async (valid) => {
+    console.log('valid', valid)
+    if (valid) {
+      try {
+        addAdmin.value.adminFlag = 1
+        addAdmin.value.status1 = 1
+        const result = await request({
+          url: '/admin/add',
+          data: addAdmin.value
+        })
+
+        if (result.code == 200) {
+          ElMessage.success('添加成功')
+        } else {
+          ElMessage.error(result.msg)
+        }
+
+        addAdmin.value = {}
+        get()
+
+        closePermissionAddVisible()
+      } catch (error) {
+        console.log('新增用户权限失败', error)
+        // 在这里可以处理错误逻辑，比如显示错误提示等
+
+        ElMessage.error('新增用户权限失败')
+        closePermissionAddVisible()
+      }
+    } else {
+      //提示
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      })
+    }
+  })
+}
+// 表格添加的条件
+const rules = reactive({
+  account: [{ required: true, message: '请输入OA号', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+  postiton: [{ required: true, message: '请输入职称', trigger: 'blur' }],
+  machineId: [{ required: true, message: '请输入机器码', trigger: 'blur' }],
+  market: [{ required: true, message: '请选择所属地区', trigger: 'blur' }],
+  permission: [{ required: true, message: '请选择权限', trigger: 'blur' }]
+})
+// 验证表单
+// 表单验证ref
+const Ref = ref(null)
+// 使用 _.throttle 并设置 trailing 为 false 实现严格节流，只执行一次
+const throttledPermissionAdd = _.throttle(permissionAdd, 5000, {
+  trailing: false
+})
+// 权限类别
+const permissionList = [
+  {
+    label: '总部',
+    value: '1'
+  },
+  {
+    label: '地区经理',
+    value: '5'
+  },
+  {
+    label: '财务',
+    value: '3'
+  },
+  {
+    label: '客服',
+    value: '2'
+  }
+]
+// 获取地区
+// 获取地区
+const areaList = ref([])
+const getAreas = async function () {
+  try {
+    // 发送POST请求
+    const result = await request({
+      url: '/recharge/user/search',
+      data: {}
+    })
+
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 存储地区信息
+    areaList.value = result.data
+    console.log('地区', market.value)
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+getAreas()
+// 打开编辑用户权限弹窗
+const openPermissionEditVisible = function () {
+  permissionEditVisible.value = true
+}
+// 关闭编辑用户权限弹窗
+const closePermissionEditVisible = function () {
+  permissionEditVisible.value = false
+}
+// 编辑用户权限初始化
+const permissionEditInit = function (row) {
+  permissionEditObj.value = {}
+  permissionEditObj.value.account = row.account
+  permissionEditObj.value.name = row.name
+  permissionEditObj.value.market = row.market
+  permissionEditObj.value.postiton = row.postiton
+  permissionEditObj.value.permission = row.permission
+  console.log('编辑用户权限', permissionEditObj.value)
+  openPermissionEditVisible()
+}
+// 编辑用户权限提交
+const permissionEdit = async function () {
+  try {
+    const result = await request({
+      url: '/admin/update',
+      data: permissionEditObj.value
+    })
+
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+
+    ElMessage.success('编辑用户权限成功')
+
+    get()
+
+    closePermissionEditVisible()
+  } catch (error) {
+    console.log('编辑用户权限失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+    ElMessage.error('编辑用户权限失败')
+
+    closePermissionEditVisible()
+  }
+}
+const throttledPermissionEdit = _.throttle(permissionEdit, 5000, {
+  trailing: false
+})
+// 删除初始化
+const del = function (row) {
+  delObj.value = {}
+  console.log(row, '删除初始化')
+  delObj.value.account = row.account
+}
+// 删除权限
+const delConfirm = async function () {
+  try {
+    delObj.value.permission = '4'
+    console.log(delObj.value)
+
+    const result = await request({
+      url: '/admin/update',
+      data: delObj.value
+    })
+
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+
+    ElMessage.success('删除权限成功')
+    delObj.value = {}
+    get()
+  } catch (error) {
+    console.log('删除权限失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+    ElMessage.error('删除权限失败')
+  }
+}
+// 禁用启用用户权限
+const editStatus = async function (row) {
+  try {
+    console.log(row)
+
+    permissionEditObj.value = {}
+    permissionEditObj.value.account = row.account
+    permissionEditObj.value.status1 = row.status1
+
+    console.log('修改用户权限状态', permissionEditObj.value)
+
+    const result = await request({
+      url: '/admin/update',
+      data: permissionEditObj.value
+    })
+
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+
+    ElMessage.success(
+      permissionEditObj.value.status1 == 1 ? '启用成功' : '禁用成功'
+    )
+    permissionEditObj.value = {}
+    get()
+  } catch (error) {
+    console.log('修改用户权限失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+// 挂载
+onMounted(async function () {
+  await get()
+  await getArea()
+  await getStore()
+})
+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">
+        <div class="head-card">
+          <div class="head-card-element">
+            <el-text class="mx-1" size="large">OA号：</el-text>
+            <el-input
+              v-model="admin.account"
+              style="width: 240px"
+              placeholder="请输入OA号"
+              clearable
+            />
+          </div>
+          <div class="head-card-element" style="margin-left: 50px">
+            <el-text class="mx-1" size="large">所属地区：</el-text>
+            <el-select
+              v-model="admin.market"
+              placeholder="请选择所属地区"
+              style="width: 240px"
+              clearable
+            >
+              <el-option
+                v-for="item in market"
+                :key="item"
+                :label="item"
+                :value="item"
+              />
+            </el-select>
+          </div>
+
+          <div class="head-card-element" style="margin-left: 50px">
+            <el-text class="mx-1" size="large">职位名称：</el-text>
+            <el-select
+              v-model="admin.postiton"
+              placeholder="请选择职位名称"
+              style="width: 240px"
+              clearable
+            >
+              <el-option
+                v-for="item in postiton"
+                :key="item"
+                :label="item"
+                :value="item"
+              />
+            </el-select>
+          </div>
+
+          <div class="head-card-btn">
+            <el-button type="success" @click="reset()">重置</el-button>
+            <el-button type="primary" @click="search()">查询</el-button>
+          </div>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+  <el-row>
+    <el-col>
+      <el-card>
+        <!-- 添加 -->
+        <div class="add-item">
+          <el-button
+            style="color: #048efb; border: 1px solid #048efb"
+            @click="permissionAddInit()"
+            >新增用户</el-button
+          >
+        </div>
+
+        <div>
+          <el-table :data="tableData" style="width: 100%">
+            <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="account" label="OA号" />
+            <el-table-column prop="name" label="姓名" />
+            <el-table-column prop="market" label="所属地区" />
+            <el-table-column prop="postiton" label="职位" />
+            <el-table-column prop="permission" label="部门权限">
+              <template #default="scope">
+                <span v-if="scope.row.permission === '1'"> 总部管理员 </span>
+                <span v-if="scope.row.permission === '2'"> 分部财务 </span>
+                <span v-if="scope.row.permission === '3'"> 分部客服 </span>
+                <span v-if="scope.row.permission === '5'"> 分部经理 </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="remark" label="备注" />
+            <el-table-column prop="operation" label="操作" width="200px">
+              <template #default="scope">
+                <el-button
+                  type="warning"
+                  text
+                  @click="permissionEditInit(scope.row)"
+                  :disabled="scope.row.status1 === 0"
+                >
+                  修改权限
+                </el-button>
+                <el-popconfirm
+                  title="确定将此用户删除吗？"
+                  @confirm="delConfirm"
+                >
+                  <template #reference>
+                    <el-button
+                      type="danger"
+                      text
+                      @click="del(scope.row)"
+                      :disabled="scope.row.status1 === 0"
+                    >
+                      删除
+                    </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-column prop="status1" label="状态">
+              <template #default="scope">
+                <el-switch
+                  v-model="scope.row.status1"
+                  :active-value="1"
+                  :inactive-value="0"
+                  size="large"
+                  @change="editStatus(scope.row)"
+                  style="
+                    --el-switch-on-color: #13ce66;
+                    --el-switch-off-color: #ff4949;
+                  "
+                  active-text="启用"
+                  inactive-text="禁用"
+                  inline-prompt
+                />
+              </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="permissionAddVisible"
+    title="新增用户权限"
+    width="800px"
+    :close-on-click-modal="false"
+  >
+    <template #footer>
+      <!-- 居中显示 -->
+
+      <el-form
+        ref="Ref"
+        :rules="rules"
+        :model="addAdmin"
+        label-width="auto"
+        style="max-width: 600px; align-items: center"
+      >
+        <el-form-item prop="account" label="OA号:">
+          <el-input
+            v-model="addAdmin.account"
+            placeholder="请输入OA号"
+            style="width: 220px"
+          />
+        </el-form-item>
+
+        <el-form-item prop="name" label="用户名:">
+          <el-input
+            v-model="addAdmin.name"
+            placeholder="请输入用户名"
+            style="width: 220px"
+          />
+        </el-form-item>
+
+        <el-form-item prop="market" label="所属地区:">
+          <el-select
+            v-model="addAdmin.market"
+            placeholder="请选择所属地区"
+            style="width: 220px"
+            @change="() => Ref.value.validateField('market')"
+          >
+            <el-option
+              v-for="item in areaList"
+              :key="item"
+              :label="item"
+              :value="item"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="permission" label="权限类别:">
+          <el-select
+            v-model="addAdmin.permission"
+            placeholder="请选择权限"
+            style="width: 220px"
+            @change="() => Ref.value.validateField('permission')"
+          >
+            <el-option
+              v-for="item in permissionList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="postiton" label="职位:">
+          <el-input
+            v-model="addAdmin.postiton"
+            placeholder="请输入职称"
+            style="width: 220px"
+          />
+        </el-form-item>
+        <el-form-item prop="machineId" label="机器码:">
+        <div style="display: flex; align-items: center; flex-wrap: wrap;">
+          <el-input
+            v-model="addAdmin.machineId"
+            placeholder="请输入机器码"
+            style="width: 220px; margin-right: 10px;"
+          />
+          <el-button type="primary" @click="addMachineIdInput">添加</el-button>
+          <!-- 动态添加的机器码输入框 -->
+          <div v-for="(item, index) in addAdmin.machineIds" :key="index" style="margin-left: 10px;">
+            <el-input
+              v-model="addAdmin.machineIds[index]"
+              placeholder="请输入机器码"
+              style="width: 180px; margin-right: 10px;"
+            />
+          </div>
+        </div>
+      </el-form-item>
+        <el-form-item prop="remark" label="备注">
+          <el-input
+            v-model="addAdmin.remark"
+            style="width: 300px"
+            :rows="2"
+            maxlength="100"
+            show-word-limit
+            type="textarea"
+          />
+        </el-form-item>
+      </el-form>
+
+      <div>
+        <el-button @click="closePermissionAddVisible()">取消</el-button>
+        <el-button type="primary" @click="throttledPermissionAdd()">
+          提交
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+  <!-- 这是新增用户权限弹窗
+  <el-dialog
+    v-model="permissionAddVisible"
+    title="新增用户权限"
+    width="800px"
+    :close-on-click-modal="false"
+  >
+    <div style="display: flex; margin: 20px 0px 20px 0px">
+      <span class="permissionVisible" style="margin-right: 10px">精网号:</span>
+      <el-input
+        placeholder="请输入精网号"
+        v-model="permissionAddObj.account"
+        style="width: 240px; margin-right: 10px"
+        clearable
+      ></el-input>
+      <el-button type="primary" @click="getAdminByJwcodeWithoutPermission()"
+        >查询</el-button
+      >
+    </div>
+
+    <el-descriptions
+      class="margin-top"
+      :column="2"
+      :size="size"
+      border
+      label-width="200px"
+    >
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon>
+              <UserFilled />
+            </el-icon>
+            员工精网号
+          </div>
+        </template>
+        {{ permissionAddObj.account }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon>
+              <User />
+            </el-icon>
+            员工姓名
+          </div>
+        </template>
+        {{ permissionAddObj.name }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon :style="iconStyle">
+              <location />
+            </el-icon>
+            所属地区
+          </div>
+        </template>
+        {{ permissionAddObj.market }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon>
+              <OfficeBuilding />
+            </el-icon>
+            部门
+          </div>
+        </template>
+        {{ permissionAddObj.postiton }}
+      </el-descriptions-item>
+    </el-descriptions>
+
+    <el-divider>
+      <el-icon><star-filled /></el-icon>
+    </el-divider>
+    <div>
+      <span class="permissionVisible" style="margin-right: 20px"
+        >权限设置:</span
+      >
+      <el-radio-group v-model="permissionAddObj.permission">
+        <el-radio value="1" border>总部管理员</el-radio>
+        <el-radio value="5" border>分部经理</el-radio>
+        <el-radio value="2" border>分部财务</el-radio>
+        <el-radio value="3" border>分部客服</el-radio>
+      </el-radio-group>
+    </div>
+    <template #footer>
+      <div>
+        <el-button @click="closePermissionAddVisible()">取消</el-button>
+        <el-button type="primary" @click="throttledPermissionAdd()">
+          提交
+        </el-button>
+      </div>
+    </template>
+  </el-dialog> -->
+
+  <!-- 这是编辑用户权限弹窗 -->
+  <el-dialog
+    v-model="permissionEditVisible"
+    title="编辑用户权限"
+    width="800px"
+    :close-on-click-modal="false"
+  >
+    <el-descriptions
+      class="margin-top"
+      :column="2"
+      :size="size"
+      border
+      label-width="200px"
+    >
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon>
+              <UserFilled />
+            </el-icon>
+            员工精网号
+          </div>
+        </template>
+        {{ permissionEditObj.account }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon>
+              <User />
+            </el-icon>
+            员工姓名
+          </div>
+        </template>
+        {{ permissionEditObj.name }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon :style="iconStyle">
+              <location />
+            </el-icon>
+            所属地区
+          </div>
+        </template>
+        {{ permissionEditObj.market }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon>
+              <OfficeBuilding />
+            </el-icon>
+            部门
+          </div>
+        </template>
+        {{ permissionEditObj.postiton }}
+      </el-descriptions-item>
+    </el-descriptions>
+
+    <el-divider>
+      <el-icon><star-filled /></el-icon>
+    </el-divider>
+    <div>
+      <span class="permissionVisible" style="margin-right: 20px"
+        >权限设置:</span
+      >
+      <el-radio-group v-model="permissionEditObj.permission">
+        <el-radio value="1" border>总部管理员</el-radio>
+        <el-radio value="5" border>分部经理</el-radio>
+        <el-radio value="2" border>分部财务</el-radio>
+        <el-radio value="3" border>分部客服</el-radio>
+      </el-radio-group>
+    </div>
+    <template #footer>
+      <div>
+        <el-button @click="closePermissionEditVisible()">取消</el-button>
+        <el-button type="primary" @click="throttledPermissionEdit()">
+          提交
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+
+.permissionVisible {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.pagination {
+  display: flex;
+}
+
+.status {
+  display: flex;
+}
+
+.head-card {
+  display: flex;
+}
+
+.head-card-element {
+  margin-right: 20px;
+}
+
+.head-card-btn {
+  margin-left: auto;
+}
+
+/* 新增样式让弹窗内容居中 */
+.el-dialog__body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.el-dialog__footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>

src/views/recharge/addCoinRecharge.vue

@@ -0,0 +1,701 @@
+<script setup>
+import { ref, onMounted, reactive, computed, watch, nextTick } 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 '@/util/http'
+import moment from 'moment'
+import { range, re } from 'mathjs'
+import { utils, read } from 'xlsx'
+import throttle from 'lodash/throttle'
+// 精网号去空格
+const trimJwCode = () => {
+  if (recharge.value.jwcode) {
+    recharge.value.jwcode = recharge.value.jwcode.replace(/\s/g, ''); 
+  }
+}
+// 上传图片前的验证函数
+const beforeAvatarUpload = (file) => {
+  const isJPG = file.type === 'image/jpeg'
+  const isPNG = file.type === 'image/png'
+  const isLt2M = file.size / 1024 / 1024 < 2
+
+  if (!isJPG && !isPNG) {
+    ElMessage.error('上传头像图片只能是 JPG 或 PNG 格式!')
+  }
+  if (!isLt2M) {
+    ElMessage.error('上传头像图片大小不能超过 2MB!')
+  }
+  return (isJPG || isPNG) && isLt2M
+}
+// 这是添加上传图片的接口
+const imageUrl = ref('')
+const voucher = ref('')
+const Rate = ref()
+const adminData = ref({})
+const getAdminData = async function () {
+  try {
+    const result = await API({
+      url: '/admin/userinfo',
+      data: {}
+    })
+    adminData.value = result
+    recharge.value.adminId = adminData.value.adminId
+    recharge.value.market = adminData.value.market
+    console.log('请求成功', result)
+    console.log('用户信息', user.value)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+
+// 这是添加充值信息的表单
+const recharge = ref({
+  voucher: '',
+  rechargeWay: '客服充值',
+  freeGold: '',
+  money: null,
+  permanentGold: '',
+  Rate: null,
+  rechargeRatio: '',
+  rateId: null
+})
+// 这是添加充值信息的接口
+const add = async function () {
+  try {
+
+    const formattedRecharge = { ...recharge.value,
+      // 添加固定的 adminId
+      adminId: fixedAdminId 
+     }
+    if (formattedRecharge.payTime) {
+      // 使用 moment.js 格式化 payTime
+      formattedRecharge.payTime = moment(formattedRecharge.payTime).format('YYYY-MM-DD HH:mm:ss')
+    }
+
+    console.log('开始添加充值信息', recharge.value)
+    // 发送POST请求
+    const result = await API({
+      url: 'http://192.168.8.247:8081/recharge/add',
+      data: formattedRecharge
+    })
+    if (result.code === 0) {
+      ElMessage.error(result.msg)
+      return
+    }
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 显示成功消息
+    ElMessage.success('添加成功')
+    // 重置表单
+    recharge.value = {}
+    recharge.value.adminId = adminData.value.adminId
+    recharge.value.market = adminData.value.market
+    recharge.value.voucher = ''
+    recharge.value.rechargeWay = '客服充值'
+    recharge.value.freeGold = ''
+    recharge.value.money = null
+    recharge.value.permanentGold = ''
+    recharge.value.rateId = null
+    imageUrl.value = ''
+    Rate.value = null
+    user.value = {}
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+//添加充值信息前的按钮点击事件，进行表单验证和用户确认操作
+const addBefore = () => {
+  Ref.value.validate(async (valid) => {
+    if (valid) {
+      if (Rate.value == null || Rate.value == '' || Rate.value == undefined) {
+        ElMessage({
+          type: 'error',
+          message: '请选择币种'
+        })
+        return
+      }
+      if(recharge.value.money == null || recharge.value.money == '' || recharge.value.money == undefined){
+        ElMessage({
+          type: 'error',
+          message: '请输入充值金额'
+        })
+        return
+      }
+      // 根据选择的货币名称找到对应的 rateId
+      const selectedRate = rateName.find(item => item.value === Rate.value)
+      if (selectedRate) {
+        recharge.value.rateId = selectedRate.rateId
+      }
+      ElMessageBox.confirm('确认添加？')
+        .then(() => {
+          add()
+          console.log('添加成功')
+        })
+        .catch(() => {
+          console.log('取消添加')
+        })
+    } else {
+      //提示
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      })
+    }
+  })
+}
+
+// 表单验证
+// 开始时间改变时，重新验证结束时间
+const Ref = ref(null)
+
+
+const rules = reactive({
+  jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }],
+  activity: [{ required: true, message: '请选择活动名称', trigger: 'blur' }],
+  permanentGold: [{ required: true, message: '请输入永久金币数', trigger: 'blur' },
+    {validator: (rule, value, callback) => {
+        if (value >= 0) {
+          callback()
+        } else {
+          callback(new Error('输入金额至少为0'))
+        }}}],
+  freeGold: [{required: true, message: '请输入免费金币数', trigger: 'blur' },
+    {
+      validator: (rule, value, callback) => {
+        // 将值转换为数字(可行吗？？)
+        // 好的不可行
+        const numValue = Number(value);
+        if (isNaN(numValue)) {
+          callback(new Error('请输入有效的数字'));
+        } else if (numValue >= 0) {
+          callback();
+        } else {
+          callback(new Error('输入金额至少为 0'));
+        }
+      },
+      trigger: 'blur'
+    }
+  ],
+  money: [
+    {
+      required: true,
+      message: '请选择货币名称',
+      trigger: 'blur'
+    }
+  ],
+  'recharge.money': [
+    {
+      required: true,
+      message: '请输入充值金额',
+      trigger: 'blur'
+    }
+    
+  ],
+  payModel: [{ required: true, message: '请选择付款方式', trigger: 'blur' }],
+  payTime: [{ required: true, message: '请选择交款时间', trigger: 'blur' }]
+})
+
+// 查找客户信息的方法
+const user = ref({})
+const getUser = async function (jwcode) {
+  trimJwCode();
+  try {
+
+    // 发送POST请求
+    const result = await API({
+      url: 'http://192.168.8.247:8081/user/selectUser',
+      data: {
+        jwcode: recharge.value.jwcode
+      }
+    })
+    console.log('请求成功', result)
+
+    if (result.code === 0) {
+      ElMessage.error(result.msg);
+    } else if (result.data === null) {
+      ElMessage.error("用户不存在");
+    } else {
+      user.value = result.data;
+      console.log("用户信息", user.value);
+      ElMessage.success(result.msg);
+    }
+  } catch (error) {
+    console.log("请求失败", error);
+    ElMessage.error("查询失败，请检查精网号是否正确");
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+// 这是查询活动的接口
+const activity = ref([])
+const getActivity = async function () {
+  try {
+    // 发送POST请求
+    const result = await API({
+      url: 'http://192.168.8.247:8081/general/activity',
+      data: {
+        
+      }
+    })
+
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 存储表格数据
+    activity.value = result.data
+    console.log('活动信息', activity.value)
+  } catch (error) {
+    console.log('activity请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+
+
+//货币条目
+const rateName = [
+  {
+    value: 'USD',
+    label: 'USD',
+    rateId: 1 
+  },
+  {
+    value: 'HKD',
+    label: 'HKD',
+    rateId: 2
+  },
+  {
+    value: 'THB',
+    label: 'THB',
+    rateId: 3
+  },
+  {
+    value: 'VND',
+    label: 'VND',
+    rateId: 4
+  },
+  {
+    value: 'CAD',
+    label: 'CAD',
+    rateId: 5
+  },
+  {
+    value: 'MYR',
+    label: 'MYR',
+    rateId: 6
+  },
+  {
+    value: 'KRW',
+    label: 'KRW',
+    rateId: 7
+  },
+  {
+    value: 'JPY',
+    label: 'JPY',
+    rateId: 8
+  },
+  {
+    value: 'CNY',
+    label: 'CNY',
+    rateId: 9
+  }
+]
+
+
+// 上传图片成功的回调函数
+const handleAvatarSuccess = (response, uploadFile) => {
+  imageUrl.value = URL.createObjectURL(uploadFile.raw)
+  console.log('图片上传成功', response, uploadFile)
+  recharge.value.voucher = `http://39.101.133.168:8828/hljw/api/aws/upload`
+  console.log('图片名称', recharge.value.voucher)
+}
+
+//充值方式条目
+const payModel = [
+  {
+    value: '现金',
+    label: '现金'
+  },
+  {
+    value: '支票',
+    label: '支票'
+  },
+  {
+    value: '刷卡',
+    label: '刷卡'
+  },
+  {
+    value: '其他(各地区电子支付)',
+    label: '其他(各地区电子支付)'
+  }
+]
+
+// //根据活动id获取汇率
+// const getActivityById = async function (row) {
+//   try {
+//     // 发送POST请求
+//     const result = await API({
+//       url: '/recharge/activity/select',
+//       data: {
+//         activity: { activity: row }
+//       }
+//     })
+//     recharge.value.rechargeRatio = result.data[0].rechargeRatio
+//     console.log('看看有了吗', recharge.value.rechargeRatio)
+//   } catch (error) {
+//     console.log('请求失败', error)
+//   }
+// }
+function handleActivityChange(value) {
+  // 在这里执行你的逻辑，例如获取选中的值
+  console.log('选中的值：', value)
+  getActivityById(value)
+  console.log('看看', recharge.value)
+}
+// 监听 permanentGold 的变化
+// const calculatedFree = computed(() => {
+//   const result = recharge.value.permanentGold / recharge.value.rechargeRatio
+//   if (isNaN(result) || result < 1 || recharge.value.rechargeRatio == 0) {
+//     return 0
+//   } else {
+//     return Math.trunc(result)
+//   }
+// })
+// watch(calculatedFree, (newVal) => {
+//   recharge.value.freeGold = newVal
+// })
+// const calculatedRecharge = computed(() => {
+//   return recharge.value.permanentGold * Rate.value
+// })
+// watch(calculatedRecharge, (newVal) => {
+//   recharge.value.money = newVal
+// })
+//这是重置重置表单的方法
+const deleteRecharge = function () {
+  recharge.value = {
+    // adminId: adminData.value.adminId,
+    adminId: fixedAdminId,
+    market: adminData.value.market,
+    voucher: '',
+    rechargeWay: '客服充值',
+    freeGold: Number(),
+    money: null,
+    permanentGold: Number(),
+    rateId: null
+  }
+  imageUrl.value = ''
+  Rate.value = ''
+}
+
+
+onMounted(async function () {
+  await getAdminData()
+  // await getCurrency()
+  await getActivity()
+  
+})
+</script>
+
+<template>
+  <div>
+
+  <el-form
+    :model="recharge"
+    ref="Ref"
+    :rules="rules"
+    label-width="auto"
+    style="max-width: 600px"
+    class="add-form"
+  >
+    <el-form-item prop="jwcode" label="精网号">
+      <el-input v-model="recharge.jwcode" style="width: 220px" />
+      <el-button
+        type="primary"
+        @click="getUser(recharge.jwcode)"
+        style="margin-left: 20px"
+        
+        >查询</el-button
+      >
+    </el-form-item>
+    <el-form-item prop="activity" label="活动名称">
+      <el-select
+        v-model="recharge.activity"
+        placeholder="请选择"
+        style="width: 300px"
+        @change="handleActivityChange"
+      >
+        <el-option
+          v-for="(item, index) in activity"
+          :key="index"
+          :label="item"
+          :value="item"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item prop="permanentGold" label="永久金币">
+      <el-input v-model="recharge.permanentGold" style="width: 100px" />
+      <p style="margin-right: 20px">个</p>
+      <p>免费金币</p>
+      <el-input v-model="recharge.freeGold" style="width: 100px" />
+      <p>个</p>
+    </el-form-item>
+    <el-form-item label="充值金额">
+      <el-select
+        prop="money"
+        v-model="Rate"
+        placeholder="货币名称"
+        style="width: 95px; margin-right: 5px"
+        aria-required="true"
+      >
+        <el-option
+          v-for="item in rateName"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      <el-input prop="recharge.money" v-model="recharge.money" style="width: 200px" aria-required="true"/>
+    </el-form-item>
+    <el-form-item prop="payModel" label="收款方式">
+      <el-select
+        v-model="recharge.payModel"
+        placeholder="请选择"
+        style="width: 300px"
+      >
+        <el-option
+          v-for="item in payModel"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item prop="payTime" label="交款时间">
+      <!-- 修改 type 属性为 datetime 以支持时分秒选择 -->
+      <el-date-picker
+        v-model="recharge.payTime"
+        type="datetime"
+        style="width: 300px"
+      />
+    </el-form-item>
+    <el-form-item
+      prop="voucher"
+      label="交款凭证"
+      style="margin-bottom: 5px"
+    >
+      <el-upload
+        action="http://39.101.133.168:8828/hljw/api/aws/upload"
+        class="avatar-uploader"
+        :show-file-list="false"
+        :on-success="handleAvatarSuccess"
+        :before-upload="beforeAvatarUpload"
+        style="width: 100px; height: 115px"
+      >
+        <img
+          v-if="imageUrl"
+          :src="imageUrl"
+          class="avatar"
+          style="width: 100px; height: 115px"
+        />
+        <el-icon
+          v-else
+          class="avatar-uploader-icon"
+          style="width: 100px; height: 100px"
+        >
+          <Plus />
+        </el-icon>
+      </el-upload>
+      <p style="margin-left: 10px; color: rgb(177, 176, 176)">
+        仅支持.jpg .png格式，文件≤1MB
+      </p>
+    </el-form-item>
+    <el-form-item prop="remark" label="备注">
+      <el-input
+        v-model="recharge.remark"
+        style="width: 300px"
+        :rows="2"
+        maxlength="100"
+        show-word-limit
+        type="textarea"
+      />
+    </el-form-item>
+    <el-form-item prop="adminId" label="提交人">
+      <el-input
+        style="width: 300px"
+        :value="adminData.adminId"
+        disabled
+        placeholder="提交人姓名"
+      />
+    </el-form-item>
+    <el-button @click="deleteRecharge" style="margin-left: 280px" type="success"
+      >重置</el-button
+    >
+    <el-button type="primary" @click="addBefore"> 提交 </el-button>
+  </el-form>
+
+  <!-- 客户信息栏 -->
+  <el-card v-if="user.jwcode"
+    style="width: 1200px; float: right"
+    class="customer-info"
+    width="3000px"
+  >
+    <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.historySumGold 是否为有效的数字 -->
+            <p style="color: #2fa1ff; margin-right: 5px" v-if="!isNaN(Number(user.historySumGold))">
+              {{ Number(user.historySumGold ) }}
+            </p>
+            <span
+              style="display: inline; white-space: nowrap; color: #b1b1b1"
+              v-if="user.historyPermanentGold !== undefined"
+              >(永久金币:{{ user.historyPermanentGold }};免费金币:{{
+                (user.historyFreeGold)
+              }};任务金币:{{ user.historyTaskGold }})</span>
+            <!-- 如果不是有效的数字，显示默认值 -->
+            <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.nowPermanentGold !== undefined"
+              >{{
+                (user.nowSumGold)
+              }}</span
+            >
+            <span
+              style="display: inline; white-space: nowrap; color: #b1b1b1"
+              v-if="user.nowPermanentGold !== undefined"
+              >(永久金币:{{ user.nowPermanentGold}};免费金币:{{
+                (user.nowFreeGold)
+              }};任务金币:{{ user.nowTaskGold }})</span
+            >
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item label="首次充值日期">
+            <p v-if="user.firstRecharge">
+              {{ moment(user.firstRecharge).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.rechargeNum }}</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.consumeNum }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item label="所属门店">
+            <p>{{ user.market }}</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>
+</template>
+
+<style scoped>
+p {
+  margin: 0px;
+}
+
+.batch-btn {
+  margin-top: 20px;
+  margin-left: auto;
+}
+
+.el-form-item {
+  margin-left: 50px;
+}
+
+/* 上传图片的格式 */
+.avatar-uploader .avatar {
+  width: 50px;
+  height: 50px;
+  display: block;
+}
+</style>
+
+<style>
+.error-message {
+  color: red;
+  font-size: 8px;
+}
+
+.is-invalid .el-input__inner {
+  border-color: red;
+}
+
+.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;
+}
+
+.add-form {
+  margin-top: 50px;
+  max-width: 50%;
+  float: left;
+}
+
+.customer-info {
+  max-width: 60%;
+}
+</style>

src/views/recharge/beanRecharge.vue

@@ -118,13 +118,13 @@ const get = async function (val) {
     }
     // 搜索参数时间赋值
     if (getTime.value != null) {
-      if (getTime.value.startDate != '' && getTime.value.endDate != '') {
-        rechargeVo.value.startDate = getTime.value[0]
-        rechargeVo.value.endDate = getTime.value[1]
+      if (getTime.value.startTime != '' && getTime.value.endTime != '') {
+        rechargeVo.value.startTime = getTime.value[0]
+        rechargeVo.value.endTime = getTime.value[1]
       }
     } else {
-      rechargeVo.value.startDate = ''
-      rechargeVo.value.endDate = ''
+      rechargeVo.value.startTime = ''
+      rechargeVo.value.endTime = ''
     }
     // 搜索参数赋值
     rechargeVo.value.sortField = sortField.value
@@ -139,8 +139,8 @@ const get = async function (val) {
     const detailWithoutSort = ref({
       area: rechargeVo.value.area,
       adminId: rechargeVo.value.adminId,
-      startDate: rechargeVo.value.startDate,
-      endDate: rechargeVo.value.endDate
+      startTime: rechargeVo.value.startTime,
+      endTime: rechargeVo.value.endTime
     })
     const result2 = await API({
       url: '/recharge/recharge/RechargeA',
@@ -206,8 +206,8 @@ const reset = function () {
   delete rechargeVo.value.activityId
   delete rechargeVo.value.payWay
   delete rechargeVo.value.area
-  delete rechargeVo.value.startDate
-  delete rechargeVo.value.endDate
+  delete rechargeVo.value.startTime
+  delete rechargeVo.value.endTime
   delete sortField.value
   delete sortOrder.value
   getTime.value = {}
@@ -215,17 +215,17 @@ const reset = function () {
 // 今天
 const getToday = function () {
   const today = new Date()
-  const startDate = new Date(
+  const startTime = new Date(
     today.getFullYear(),
     today.getMonth(),
     today.getDate()
   )
-  const endDate = new Date(
+  const endTime = new Date(
     today.getFullYear(),
     today.getMonth(),
     today.getDate() + 1
   )
-  getTime.value = [startDate, endDate]
+  getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
   get()
 }
@@ -241,34 +241,34 @@ const handleCurrentChange = function (val) {
 const getYesterday = function () {
   const yesterday = new Date()
   yesterday.setDate(yesterday.getDate() - 1)
-  const startDate = new Date(
+  const startTime = new Date(
     yesterday.getFullYear(),
     yesterday.getMonth(),
     yesterday.getDate()
   )
-  const endDate = new Date(
+  const endTime = new Date(
     yesterday.getFullYear(),
     yesterday.getMonth(),
     yesterday.getDate() + 1
   )
-  getTime.value = [startDate, endDate]
+  getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
   get()
 }
 // 近7天
 const get7Days = function () {
   const today = new Date()
-  const startDate = new Date(
+  const startTime = new Date(
     today.getFullYear(),
     today.getMonth(),
     today.getDate() - 6
   )
-  const endDate = new Date(
+  const endTime = new Date(
     today.getFullYear(),
     today.getMonth(),
     today.getDate() + 1
   )
-  getTime.value = [startDate, endDate]
+  getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
   get()
 }
@@ -343,7 +343,7 @@ const getActivity = async function () {
 const getArea = async function () {
   try {
     // 发送POST请求
-    const result = await API({ url: 'recharge/user/search', data: {} })
+    const result = await API({ url: 'http://18.143.76.3:10704/general/market', data: {} })
     // 将响应结果存储到响应式数据中
     console.log('请求成功', result)
     // 存储地区信息

src/views/recharge/coinRechargeDetail.vue

@@ -0,0 +1,592 @@
+<script setup>
+import { ref, onMounted, reactive, computed } from 'vue'
+import ElementPlus from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { AiFillRead } from 'vue-icons-plus/ai'
+import axios from 'axios'
+import moment from 'moment'
+import API from '@/util/http'
+//这是获取用户信息的接口
+const adminData = ref({})
+const getAdminData = async function () {
+  try {
+    const result = await API({ url: '/admin/userinfo', data: {} })
+    adminData.value = result
+    rechargeUser.value.adminId = adminData.value.adminId
+    console.log('请求成功', result)
+    console.log('用户信息', adminData.value)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+// 变量
+// 充值明细表格
+const tableData = ref([])
+// 搜索===========================================
+// 搜索recharge
+const rechargeUser = ref({
+  adminId: adminData.value.adminId
+})
+// 搜索对象
+const getObj = ref({
+  pageNum: 1,
+  pageSize: 50
+})
+//分页总条目
+const total = ref(100)
+// 搜索对象时间
+const getTime = ref([])
+// 搜索活动列表
+const activity = ref([])
+// 所有信息
+const allData = ref([])
+// 搜索地区列表
+const market = ref([])
+
+//时间格式化
+const formatTime = (val) => val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ''
+
+// 初始化 money 和 permanentGold 和 freeGold
+const money = ref(0)
+const permanentGold = ref(0)
+const freeGold = ref(0)
+
+
+// 定义响应式变量存储金币合计数
+const permanentGolds = ref(0)
+const freeGolds = ref(0)
+
+
+// 支付方式选项
+const payModel = [
+  {
+    value: '微信',
+    label: '微信'
+  },
+  {
+    value: '支付宝',
+    label: '支付宝'
+  },
+  {
+    value: '银联',
+    label: '银联'
+  },
+  {
+    value: '信用卡',
+    label: '信用卡'
+  },
+  {
+    value: '借记卡',
+    label: '借记卡'
+  },
+  {
+    value: '现金充值',
+    label: '现金充值'
+  }
+]
+// 删除==========================================================
+// 删除对象
+const delObj = ref({})
+
+// 获取活动名称
+const getActivity = async function () {
+  try {
+    // 发送POST请求
+    const result = await API({ url: '/recharge/activity/select', data: {} })
+
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 存储表格数据
+    activity.value = result.data
+    console.log('activity', activity.value)
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// 获取地区
+// 获取地区
+const getArea = async function () {
+  try {
+    // 发送POST请求
+    const result = await API({ url: 'http://18.143.76.3:10704/general/market', data: {} })
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 存储地区信息
+    market.value = result.data
+    console.log('地区', market.value)
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+//定义充值类型的加载状态
+const isLoadingPlatform = ref(false)
+// 充值类型
+const platform = ref([])
+//获取充值类型的函数
+const getPlatform = async () => {
+  isLoadingPlatform.value = true;
+  try {
+    const result = await API({
+      url: 'http://18.143.76.3:10704/general/platform',
+      method: 'post',
+      data: {}// 这里添加参数
+    })
+    // 假设后端返回的是字符串数组，转换为 { value, label } 格式
+    if(Array.isArray(result.data)) {
+      platform.value = result.data.map(item => ({ value: item, label: item }));
+    } else {
+      console.error('充值类型格式错误',result)
+      ElMessage.error('充值类型格式错误，请联系管理员')
+    } 
+  } catch (error) {
+    console.error('获取充值类型失败:', error);
+    ElMessage.error('获取充值类型失败，请稍后重试');
+    } finally {
+    isLoadingPlatform.value = false
+  }
+}
+
+// 搜索===========================================================================
+// 搜索方法
+const get = async function (val) {
+  try {
+    // 搜索参数页码赋值
+    if (typeof val === 'number') {
+      getObj.value.pageNum = val
+    }
+    // 搜索参数时间赋值
+    if (getTime.value != null) {
+      if (getTime.value.startTime != '' && getTime.value.endTime != '') {
+        rechargeUser.value.startTime = formatTime(getTime.value[0])
+        rechargeUser.value.endTime = formatTime(getTime.value[1])
+      }
+    } else {
+      rechargeUser.value.startTime = ''
+      rechargeUser.value.endTime = ''
+    }
+    // 搜索参数赋值
+    rechargeUser.value.sortField = sortField.value
+    rechargeUser.value.sortOrder = sortOrder.value
+    console.log('搜索参数', getObj.value)
+    // 发送POST请求
+    const result = await API({
+      url: 'http://18.143.76.3:10704/recharge/selectBy',
+      data: { 
+        ...getObj.value, 
+        rechargeUser: { ...rechargeUser.value } 
+      }
+    })
+    // 复制一份 rechargeUser.value 并移除排序字段和排序方式
+    const detailWithoutSort = ref({
+      market: rechargeUser.value.market,
+      adminId: rechargeUser.value.adminId,
+      startTime: rechargeUser.value.startTime,
+      endTime: rechargeUser.value.endTime,
+       jwcode: rechargeUser.value.jwcode,
+       goodsName: rechargeUser.value.goodsName,
+      payPlatform: rechargeUser.value.payPlatform
+    })
+    const resultTotalGold = await API({
+      url: 'http://18.143.76.3:10704/recharge/statsGold',
+      data: {
+        ...detailWithoutSort.value
+      }
+    })
+
+    if (resultTotalGold.code === 200 && resultTotalGold.data) {
+      const data = resultTotalGold.data
+      console.log('获取到的金币数据:', data)
+
+      permanentGolds.value = Number(data.permanentGolds) || 0
+      freeGolds.value = Number(data.freeGolds) || 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('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// 搜索
+const search = function () {
+  getObj.value.pageNum = 1
+  get()
+}
+// 重置
+const reset = function () {
+  delete rechargeUser.value.jwcode
+  delete rechargeUser.value.activity
+  delete rechargeUser.value.payPlatform
+  delete rechargeUser.value.market
+  delete rechargeUser.value.startTime
+  delete rechargeUser.value.endTime
+  delete sortField.value
+  delete sortOrder.value
+  getTime.value = {}
+  get()
+}
+// 今天
+const getToday = function () {
+  const today = new Date()
+  const startTime = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate()
+  )
+  const endTime = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startTime, endTime]
+  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 startTime = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate()
+  )
+  const endTime = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate() + 1
+  )
+  getTime.value = [startTime, endTime]
+  console.log('getTime', getTime.value)
+  get()
+}
+// 近7天
+const get7Days = function () {
+  const today = new Date()
+  const startTime = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() - 6
+  )
+  const endTime = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startTime, endTime]
+  console.log('getTime', getTime.value)
+  get()
+}
+
+// 删除=================================
+// 点击删除按钮
+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 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: '数字输入有误'
+    })
+  }
+}
+
+// 挂载
+onMounted(async function () {
+  await getAdminData()
+  await get()
+  await getActivity()
+  await getArea()
+  await getPlatform()
+})
+// 新增排序字段和排序方式
+const sortField = ref('')
+const sortOrder = ref('')
+// 处理排序事件
+const handleSortChange = (column) => {
+
+  console.log('排序字段：', column.prop)
+  console.log('排序方式：', column.order)
+  if (column.prop === 'money') {
+    sortField.value = 'paid_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'
+  } else if(column.prop === 'rechargeGold'){
+    sortField.value = 'recharge_gold'
+  }
+  sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC'
+  console.log('传递给后端的排序字段：', sortField.value)
+
+  console.log('传递给后端的排序方式：', sortOrder.value)
+  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="5">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">精网号：</el-text>
+              <el-input v-model="rechargeUser.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="rechargeUser.activity" placeholder="请选择活动名称"  style="width: 180px" 
+                clearable>
+                <el-option v-for="item in activity" :key="item.activity" :label="item.activity"
+                  :value="item.activity" />
+              </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="rechargeUser.market" placeholder="请选择所属地区" style="width: 180px" clearable>
+                <el-option v-for="item in market" :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="rechargeUser.payPlatform" placeholder="请选择充值方式" style="width: 180px" clearable>
+                <el-option v-for="item in platform" :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>
+          充值金额：{{ permanentGolds.toFixed(2) }}新币，永久金币：{{
+            permanentGolds.toFixed(2)
+          }}金币，免费金币：{{ freeGolds }}金币
+        </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="name"
+              label="姓名"
+              width="80px"
+            />
+            <el-table-column
+              fixed="left"
+              prop="jwcode"
+              label="精网号"
+              width="80px"
+            />
+            <el-table-column prop="market" label="所属地区" width="100px" />
+            <el-table-column
+              prop="activity"
+              label="活动名称"
+              width="100px"
+            />
+            <el-table-column prop="rateName" label="货币名称" width="110px" />
+            <el-table-column
+              prop="money"
+              sortable="custom"
+              label="充值金额"
+              width="110px"
+            />
+            <el-table-column
+              prop="permanentGold"
+              label="永久金币"
+              sortable="custom"
+              width="110px"
+            />
+            <el-table-column
+              prop="freeGold"
+              label="免费金币"
+              sortable="custom"
+              width="110px"
+            />
+            <el-table-column
+              prop="payPlatform"
+              label="充值方式"
+              width="100px"
+            />
+            <el-table-column prop="payModel" label="支付方式" width="100px" />
+            <el-table-column
+              prop="remark"
+              label="备注"
+              width="150px"
+              show-overflow-tooltip
+            />
+            
+          
+            <el-table-column prop="adminName" label="提交人" width="100px" />
+            
+            <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>
+        </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>
+
+
+  
+</template>
+
+<style scoped>
+.pagination {
+  display: flex;
+}
+
+.status {
+  display: flex;
+}
+
+.head-card {
+  display: flex;
+}
+
+.head-card-element {
+  margin-right: 20px;
+}
+
+.head-card-btn {
+  margin-left: auto;
+}
+</style>

src/views/refund/addCoinRefund.vue

@@ -0,0 +1,560 @@
+<script setup>
+import { onMounted, reactive } 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 '@/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)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+// 精网号去空格
+const trimJwCode = () => {
+  if (addRefund.value.jwcode) {
+    addRefund.value.jwcode = addRefund.value.jwcode.replace(/\s/g, ''); 
+  }
+}
+// 这是添加退款信息的表单
+const addRefund = ref({
+  updateType: '3',
+  allCoin: 0,
+  orderCode: '',
+  refundGoods: '',
+  freeCoin: 0,
+  rechargeCoin: 0,
+  taskCoin: 0
+})
+// 取消按钮
+const cancel = function () {
+  addRefund.value = {}
+  addRefund.value.updateType = '3'
+  addRefund.value.rechargeCoin = 0
+  addRefund.value.freeCoin = 0
+  addRefund.value.taskCoin = 0
+  addRefund.value.allCoin = 0
+  addRe.value.typeR = 0
+  addRefund.value.adminId = adminData.value.adminId
+}
+// 这是添加退款信息的接口
+const add = async function () {
+  try {
+    // 发送POST请求
+    const result = await API({ url: '/refund/add', data: addRefund.value })
+    if (result.code === 0) {
+      ElMessage.error(result.msg)
+      return
+    }
+    console.log('请求成功', result)
+    ElMessage.success('添加成功')
+    // 重置表单
+    addRefund.value = {}
+    addRefund.value.adminId = adminData.value.adminId
+    addRefund.value.updateType = '3'
+    addRefund.value.allCoin = 0
+    addRefund.value.orderCode = ''
+    addRefund.value.refundGoods = ''
+    addRefund.value.freeCoin = 0
+    addRefund.value.rechargeCoin = 0
+    addRefund.value.taskCoin = 0
+    addRefund.value.typeR = 0
+    user.value = {}
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+const addBefore = () => {
+  Ref.value.validate(async (valid) => {
+    if (valid) {
+      ElMessageBox.confirm('确认添加？')
+        .then(() => {
+          add()
+          console.log('添加成功')
+          addRefund.value.allCoin = 0
+          ;(addRefund.value.freeCoin = 0),
+            (addRefund.value.rechargeCoin = 0),
+            (addRefund.value.taskCoin = 0),
+            (addRefund.value = {})
+        })
+        .catch(() => {
+          console.log('取消添加')
+        })
+    } else {
+      //提示
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      })
+    }
+  })
+}
+
+// 表单验证
+// 开始时间改变时，重新验证结束时间
+const Ref = ref(null)
+const startChange = (val) => {}
+
+const rules = reactive({
+  jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }],
+  refundType: [{ required: true, message: '请选择退款类型', trigger: 'blur' }],
+  orderCode: [{ required: true, message: '请选择退款商品', trigger: 'blur' }],
+  taskCoin: [{ required: true, message: '请输入任务金币', trigger: 'blur' }],
+  freeCoin: [{ required: true, message: '请输入免费金币', trigger: 'blur' }],
+  rechargeCoin: [
+    { required: true, message: '请输入永久金币', trigger: 'blur' }
+  ],
+  allCoin: [
+    { required: true, message: '请选择付款方式', trigger: 'blur' },
+    {
+      validator: (rule, value) => {
+        if (value === 0) {
+          return Promise.reject(new Error('总金币不能为0'))
+        }
+        return Promise.resolve()
+      },
+      trigger: 'blur'
+    }
+  ]
+})
+
+// 查找客户信息的方法
+const user = ref({
+  firstRechargeTime: ''
+})
+const getUser = async function (jwcode) {
+  trimJwCode();
+  try {
+    // 发送POST请求
+    const result = await API({
+      url: 'http://18.143.76.3:10704/user/selectUser',
+      data: {
+        jwcode: addRefund.value.jwcode
+      }
+    })
+    console.log('请求成功', result)
+
+    //在此处错误逻辑的提示做了注释，在后续商品查询接口返回错误时，提示信息会显示在弹窗中
+    if (result.code === 0) {
+      ElMessage.error(result.msg);
+    } else if (result.data === null) {
+      ElMessage.error("用户不存在");
+    } else {
+      user.value = result.data;
+      console.log("用户信息", user.value);
+      ElMessage.success(result.msg);
+    }
+  } catch (error) {
+    console.log("请求失败", error);
+    ElMessage.error("查询失败，请检查精网号是否正确");
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// const calculatedAllGold = computed(() => {
+//   const sum =
+//     Number(addRefund.value.freeCoin) +
+//     Number(addRefund.value.rechargeCoin) +
+//     Number(addRefund.value.taskCoin)
+//   return !isNaN(sum) ? sum : 0
+// })
+
+// watch(calculatedAllGold, (newVal) => {
+//   addRefund.value.allCoin = newVal
+// })
+
+// const AAA = computed(() => {
+//   return addRefund.value.jwcode
+// })
+
+// watch(AAA, (newVal) => {})
+
+// 退款类型选项
+// const refundType = [
+//   {
+//     value: '退款商品',
+//     label: '退款商品'
+//   }
+// ]
+
+// 退款类型
+const refundType = ref([])
+
+// 获取退款类型
+const getRefundTypes = async function () {
+  try {
+    // 发送请求获取退款类型
+    const result = await API({ 
+      // url: 'http://18.143.76.3:10704/', //这里应该写上一个退款类型的接口
+      data: {} })
+    console.log('退款类型请求成功', result)
+    // 将响应结果存储到 refundType 中
+    refundType.value = result.data.map(item => ({
+      value: item.value,
+      label: item.label
+    }))
+    console.log('退款类型', refundType.value)
+  } catch (error) {
+    console.log('退款类型请求失败', error)
+  }
+}
+
+// 根据精网号查询商品
+const goods = ref([])
+const getGoods = async function (jwcode) {
+  trimJwCode();
+  try {
+    // 发送POST请求
+    const result = await API({
+      // url: 'http://39.101.133.168:8828/live_mall/api/product/all', //需要接口
+      data: {
+        jwcode: addRefund.value.jwcode,
+        market: adminData.value.market
+      }
+    })
+    console.log('请求成功', result)
+
+    if (result.code === 0) {
+      ElMessage.error(result.msg)
+    } else {
+      // 存储表格数据
+      goods.value = result.data
+      console.log('用户信息', goods.value)
+      //ElMessage.success(result.msg)
+    }
+  } catch (error) {
+    console.log('请求失败', error)
+    ElMessage.error('查询商品失败，请检查精网号是否正确')
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+const calculatedRechargeGoods = computed(() => {
+  return (
+    +addRefund.value.freeCoin +
+    +addRefund.value.rechargeCoin +
+    +addRefund.value.taskCoin
+  )
+})
+watch(calculatedRechargeGoods, (newVal) => {
+  addRefund.value.allCoin = newVal
+})
+watch(calculatedRechargeGoods, (newVal) => {
+  addRefund.value.allCoin = newVal
+  console.log('计算的总金币', newVal)
+})
+
+// 绑定两个数据
+
+// 这是根据订单号查询消费信息的方法
+const getProductByOrderCode = async function (item) {
+  try {
+    // 发送POST请求
+    const result = await API({
+      url: '/refund/searchByOrderCode?orderCode=' + item,
+      data: {}
+    })
+    addRefund.value.contactId = result.data.detailyId
+    addRefund.value.refundGoods = result.data.productName
+    addRefund.value.orderCode = result.data.orderCode
+    addRefund.value.taskCoin = (result.data.taskCoin * -1) / 100
+    addRefund.value.freeCoin = (result.data.freeCoin * -1) / 100
+    addRefund.value.rechargeCoin = (result.data.rechargeCoin * -1) / 100
+    addRefund.value.allCoin =
+      (result.data.taskCoin * -1 +
+        result.data.freeCoin * -1 +
+        result.data.rechargeCoin * -1) /
+      100
+    console.log('请求成功', addRefund.value)
+    if (result.data.code === 0) {
+      ElMessage.error(result.data.msg)
+    } else {
+      ElMessage.success('选择成功')
+    }
+  } catch (error) {
+    console.log('请求失败', error)
+    ElMessage.error('查询订单失败，请检查精网号是否正确')
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+const handleSelectionChange = (value) => {
+  getProductByOrderCode(value)
+  console.log('选择的订单号', value)
+  const selectedItem = goods.value.find((item) => item.detailId === value)
+}
+// 挂载
+onMounted(async function () {
+  await getAdminData()
+})
+</script>
+
+<template>
+  <div >
+
+  <el-form
+    :model="addRefund"
+    ref="Ref"
+    :rules="rules"
+    label-width="auto"
+    style="max-width: 750px"
+    class="form-style"
+  >
+    <el-form-item prop="jwcode" label="精网号">
+      <el-input
+        v-model="addRefund.jwcode"
+        style="width: 220px"
+        @change="getGoods(addRefund.jwcode)"
+      />
+      <el-button
+        type="primary"
+        @click="getUser(addRefund.jwcode)"
+        style="margin-left: 20px"
+        >查询</el-button
+      >
+    </el-form-item>
+    <el-form-item prop="refundType" label="退款类型">
+      <el-select
+        v-model="addRefund.refundType"
+        placeholder="请选择"
+        style="width: 300px"
+      >
+        <el-option
+          v-for="item in refundType"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item prop="orderCode" label="商品名">
+      <el-select
+        v-model="addRefund.orderCode"
+        placeholder="请选择"
+        style="width: 300px"
+        @change="handleSelectionChange"
+      >
+        <el-option
+          v-for="item in goods"
+          :key="item.value"
+          :label="item.productName + item.orderCode"
+          :value="item.orderCode"
+        />
+      </el-select>
+    </el-form-item>
+
+    <el-form-item prop="typeR" label="退款方式:">
+      <el-radio-group v-model="addRe.typeR">
+        <el-radio value="0" @change="addRe.typeR = '0'">全部退款</el-radio>
+        <el-radio value="1">部分退款</el-radio>
+      </el-radio-group>
+    </el-form-item>
+
+    <div style="display: flex; align-items: center">
+      <el-form-item prop="rechargeCoin" label="永久金币" style="float: left">
+        <el-input
+          v-model="addRefund.rechargeCoin"
+          style="width: 100px"
+          :disabled="addRe.typeR === '0' ? true : false"
+        >
+        </el-input>
+        <p>个</p>
+      </el-form-item>
+      <el-form-item
+        prop="freeCoin"
+        label="免费金币"
+        style="margin-left: -20px; float: left"
+      >
+        <el-input
+          v-model="addRefund.freeCoin"
+          style="float: left; width: 100px"
+          :disabled="addRe.typeR === '0' ? true : false"
+        />
+        <p>个</p>
+      </el-form-item>
+      <el-form-item prop="taskCoin" label="任务金币" style="margin-left: -20px">
+        <el-input
+          v-model="addRefund.taskCoin"
+          style="float: left; width: 100px"
+          :disabled="addRe.typeR === '0' ? true : false"
+        />
+        <p>个</p>
+      </el-form-item>
+    </div>
+    <el-form-item prop="allCoin" label="退款金币总数">
+      <el-input disabled v-model="addRefund.allCoin" style="width: 100px">
+      </el-input>
+    </el-form-item>
+    <el-form-item prop="remark" label="备注">
+      <el-input
+        v-model="addRefund.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="cancel()" style="margin-left: 280px">重置</el-button>
+    <el-button type="primary" @click="addBefore"> 提交 </el-button>
+  </el-form>
+
+  <!-- 客户信息栏 -->
+  <el-card v-if=user.jwcode style="width: 850px; float: right" class="customer-info">
+    <el-form
+      :model="user"
+      label-width="auto"
+      style="max-width: 1000px"
+      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.historySumGold))">
+              {{ Number(user.historySumGold) }}
+            </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.nowSumGold !== undefined"
+              >{{
+                (user.nowSumGold)
+              }}</span
+            >
+            <span
+              style="display: inline; white-space: nowrap; color: #b1b1b1"
+              v-if="user.nowPermanentGold !== undefined"
+              >(永久金币:{{ user.nowPermanentGold }};免费金币:{{
+                (user.nowFreeGold)
+              }};任务金币:{{ user.nowTaskGold}})</span
+            >
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item label="首次充值日期">
+            <p v-if="user.firstRecharge">
+              {{ moment(user.firstRecharge).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.rechargeNum }}</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.consumeNum }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item label="所属门店">
+            <p>{{ user.market }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="14">
+          
+        </el-col>
+      </el-row>
+    </el-form>
+  </el-card>
+  </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>

src/views/refund/beanRefund.vue

@@ -96,13 +96,13 @@ const get = async function (val) {
     }
     // 搜索参数时间赋值
     if (getTime.value != null) {
-      if (getTime.value.startDate != '' && getTime.value.endDate != '') {
-        detail.value.startDate = getTime.value[0]
-        detail.value.endDate = getTime.value[1]
+      if (getTime.value.startTime != '' && getTime.value.endTime != '') {
+        detail.value.startTime = getTime.value[0]
+        detail.value.endTime = getTime.value[1]
       }
     } else {
-      detail.value.startDate = ''
-      detail.value.endDate = ''
+      detail.value.startTime = ''
+      detail.value.endTime = ''
     }
     // 添加排序字段和排序方式到请求参数
     detail.value.sortField = sortField.value
@@ -187,8 +187,8 @@ const reset = function () {
   detail.value.refundGoods = ''
   detail.value.refundType = ''
   detail.value.area = ''
-  detail.value.startDate = ''
-  detail.value.endDate = ''
+  detail.value.startTime = ''
+  detail.value.endTime = ''
   sortField.value = ''
   sortOrder.value = ''
   getTime.value = {}
@@ -196,17 +196,17 @@ const reset = function () {
 // 今天
 const getToday = function () {
   const today = new Date()
-  const startDate = new Date(
+  const startTime = new Date(
     today.getFullYear(),
     today.getMonth(),
     today.getDate()
   )
-  const endDate = new Date(
+  const endTime = new Date(
     today.getFullYear(),
     today.getMonth(),
     today.getDate() + 1
   )
-  getTime.value = [startDate, endDate]
+  getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
   get()
 }
@@ -214,34 +214,34 @@ const getToday = function () {
 const getYesterday = function () {
   const yesterday = new Date()
   yesterday.setDate(yesterday.getDate() - 1)
-  const startDate = new Date(
+  const startTime = new Date(
     yesterday.getFullYear(),
     yesterday.getMonth(),
     yesterday.getDate()
   )
-  const endDate = new Date(
+  const endTime = new Date(
     yesterday.getFullYear(),
     yesterday.getMonth(),
     yesterday.getDate() + 1
   )
-  getTime.value = [startDate, endDate]
+  getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
   get()
 }
 // 近7天
 const get7Days = function () {
   const today = new Date()
-  const startDate = new Date(
+  const startTime = new Date(
     today.getFullYear(),
     today.getMonth(),
     today.getDate() - 6
   )
-  const endDate = new Date(
+  const endTime = new Date(
     today.getFullYear(),
     today.getMonth(),
     today.getDate() + 1
   )
-  getTime.value = [startDate, endDate]
+  getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
   get()
 }

src/views/refund/coinRefundDetail.vue

@@ -0,0 +1,612 @@
+<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 moment from 'moment'
+import API from '@/util/http'
+import request from '@/util/http'
+
+// 精网号去空格
+const trimJwCode = () => {
+  if (refundUser.value.jwcode) {
+    // 去除所有空格，并尝试转换为整数
+    const trimmed = refundUser.value.jwcode.toString().replace(/\s/g, '');
+    const numeric = Number(trimmed);
+
+    // 如果转换为数字成功，保存为数字，否则提示错误
+    if (!isNaN(numeric)) {
+      refundUser.value.jwcode = numeric;
+    } else {
+      ElMessage.error("精网号格式不正确，请输入数字");
+    }
+  }
+}
+
+// 变量
+//这是获取用户信息的接口
+const adminData = ref({})
+const getAdminData = async function () {
+  try {
+    const result = await API({url: '/admin/userinfo', data: {}})
+
+    adminData.value = result
+    console.log('请求成功', result)
+    console.log('用户信息', adminData.value)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+// 充值明细表格
+const tableData = ref([])
+// 搜索======================================
+// 搜索detail
+const refundUser = ref({})
+// 搜索对象
+const getObj = ref({
+  pageNum: 1,
+  pageSize: 50
+})
+//分页总条目
+const total = ref(100)
+// 搜索对象时间
+const getTime = ref([])
+
+// 搜索地区列表
+const market = ref([])
+
+// 定义响应式变量存储金币合计数
+const permanentGolds = ref(0)
+const freeGolds = ref(0)
+const taskGolds = ref(0)
+
+// 计算总金币数
+const sumGold = computed(() => permanentGolds.value + freeGolds.value + taskGolds.value)
+
+// 退款类型
+const refundType = ref([])
+
+//时间格式化
+const formatTime = (val) => val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ''
+
+// 获取退款类型
+const getRefundTypes = async function () {
+  try {
+    // 发送请求获取退款类型
+    const result = await API({ 
+      // url: 'http://18.143.76.3:10704/', //这里应该写上一个退款类型的接口
+      data: {} })
+    console.log('退款类型请求成功', result)
+    // 将响应结果存储到 refundType 中
+    refundType.value = result.data.map(item => ({
+      value: item.value,
+      label: item.label
+    }))
+    console.log('退款类型', refundType.value)
+  } catch (error) {
+    console.log('退款类型请求失败', error)
+  }
+}
+
+// 搜索==============================================================
+// 搜索方法
+const getSelectBy = async function (val) {
+  try {
+    // 搜索参数页码赋值
+    if (typeof val === 'number') {
+      getObj.value.pageNum = val
+    }
+
+    // todo 时间格式化
+    // 搜索参数时间赋值
+    if (getTime.value != null) {
+      if (getTime.value.startTime != '' && getTime.value.endTime != '') {
+        refundUser.value.startTime = formatTime(getTime.value[0])
+        refundUser.value.endTime = formatTime(getTime.value[1])
+      }
+    } else {
+      refundUser.value.startTime = ''
+      refundUser.value.endTime = ''
+    }
+
+    // todo 排序后端还没有弄
+    // 添加排序字段和排序方式到请求参数
+    refundUser.value.sortField = sortField.value
+    refundUser.value.sortOrder = sortOrder.value
+    console.log('搜索参数', getObj.value)
+    // 发送POST请求
+    const result = await API({
+      url: 'http://18.143.76.3:10704/refund/selectBy',
+      data: {
+        ...getObj.value,
+        refundUser: { ...refundUser.value }
+      }
+    })
+    // 复制一份 refundUser.value 并移除排序字段和排序方式
+    const detailWithoutSort = { ...refundUser.value }
+    delete detailWithoutSort.sortField
+    delete detailWithoutSort.sortOrder
+
+    const resultTotalGold = await API({
+      url: 'http://18.143.76.3:10704/refund/statsGold',
+      data: {
+         ...detailWithoutSort
+      }
+    })
+    // 将响应结果存储到响应式数据中
+     console.log('resultTotalGold请求成功', resultTotalGold)
+    // 检查响应的 code 是否为 200 且 data 存在
+    if (resultTotalGold.code === 200 && resultTotalGold.data) {
+      const data = resultTotalGold.data
+      console.log('获取到的金币数据:', data)
+
+      permanentGolds.value = Number(data.permanentGolds) || 0
+      freeGolds.value = Number(data.freeGolds) || 0
+      taskGolds.value = Number(data.taskGolds) || 0
+    }
+
+    // 存储表格数据
+    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)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// 搜索
+const search = function () {
+  getObj.value.pageNum = 1
+  getSelectBy()
+}
+// 重置
+const reset = function () {
+  refundUser.value = {}
+  sortField.value = ''
+  sortOrder.value = ''
+  getTime.value = {}
+}
+// 今天
+const getToday = function () {
+  const today = new Date()
+  const startTime = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate()
+  )
+  const endTime = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startTime, endTime]
+  console.log('getTime', getTime.value)
+  getSelectBy()
+}
+// 昨天
+const getYesterday = function () {
+  const yesterday = new Date()
+  yesterday.setDate(yesterday.getDate() - 1)
+  const startTime = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate()
+  )
+  const endTime = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate() + 1
+  )
+  getTime.value = [startTime, endTime]
+  console.log('getTime', getTime.value)
+  getSelectBy()
+}
+// 近7天
+const get7Days = function () {
+  const today = new Date()
+  const startTime = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() - 6
+  )
+  const endTime = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startTime, endTime]
+  console.log('getTime', getTime.value)
+  getSelectBy()
+}
+
+//点击标签页
+// 设置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 getMarket = async function () {
+  try {
+    // 发送POST请求
+    const result = await API({ url: 'http://18.143.76.3:10704/general/market', data: {} })
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 存储地区信息
+    market.value = result.data
+    console.log('地区', market.value)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+
+//删除气泡
+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)
+    // 刷新表格数据
+    getSelectBy()
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+// 查询商品的接口
+const goods = ref([])
+const getGoods = async function () {
+  try {
+    // 发送POST请求
+    const result = await request({
+      url: 'http://18.143.76.3:10704/general/goods',
+      data: {}
+    })
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功product', result)
+    // 存储全部数据
+    goods.value = result.data
+    
+    console.log('地区', market.value)
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+
+// 验证跳转输入框的数字是否合法
+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('输入的数字合法')
+      getSelectBy()
+    } else {
+      //提示
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      })
+    }
+  } else {
+    //提示
+    ElMessage({
+      type: 'error',
+      message: '请检查输入内容'
+    })
+  }
+}
+// 挂载
+onMounted(async function () {
+  await getAdminData()
+  await getSelectBy()
+  await getMarket()
+  await getRefundTypes()
+})
+// 新增排序字段和排序方式
+const sortField = ref('')
+const sortOrder = ref('')
+// 处理排序事件
+const handleSortChange = (column) => {
+  console.log('排序字段：', column.prop)
+  console.log('排序方式：', column.order)
+  if (column.prop === 'permanentGold') {
+    sortField.value = 'permanent_gold'
+  } else if (column.prop === 'taskGold') {
+    sortField.value = 'task_gold'
+  } else if (column.prop === 'freeGold') {
+    sortField.value = 'free_gold'
+  } else if (column.prop === 'createTime') {
+    sortField.value = 'create_time'
+  } else if (column.prop === 'auditTime') {
+    sortField.value = 'audit_time'
+  }
+  sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC'
+  getSelectBy()
+}
+const handlePageSizeChange = function (val) {
+  getObj.value.pageSize = val
+  getSelectBy()
+}
+const handleCurrentChange = function (val) {
+  getObj.value.pageNum = val
+  getSelectBy()
+}
+</script>
+
+<template>
+  <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="refundUser.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="refundUser.refundType"
+                placeholder="请选择退款类型"
+                size="large"
+                style="width: 180px"
+                clearable
+              >
+<!--                todo 这需要改-->
+                <el-option
+                  v-for="item in refundType"
+                  :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="refundUser.goodsName"
+                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">
+              <el-text class="mx-1" size="large">所属地区：</el-text>
+              <el-select
+                v-model="refundUser.market"
+                placeholder="请选择所属地区"
+                size="large"
+                style="width: 180px"
+                clearable
+              >
+                <el-option
+                  v-for="item in market"
+                  :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>
+        <div>
+          退款金币总数：{{ Math.abs(sumGold) }}，永久金币：{{
+            Math.abs(permanentGolds)
+          }}，免费金币：{{ Math.abs(freeGolds) }}，任务金币：{{
+            Math.abs(taskGolds)
+          }}
+        </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="name"
+              label="姓名"
+              fixed="left"
+              width="100px"
+            />
+            <el-table-column
+                prop="jwcode"
+                label="精网号"
+                fixed="left"
+                width="110px"
+            />
+            <el-table-column prop="market" label="所属地区" width="110px" />
+            <el-table-column prop="goodsName" label="商品名称" width="100px" />
+            <el-table-column prop="refundType" label="退款类型" width="100px" />
+
+            <el-table-column label="退款金币总数" width="110px">
+              <template #default="scope">
+                {{
+                  scope.row.sumGold
+                }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="refundModel" label="退款方式" width="110px">
+              <template #default="scope">
+                {{ scope.row.refundModel === 1 ? '全部退款' : scope.row.refundModel === 2 ? '部分退款' : '' }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="permanentGold"
+              label="永久金币"
+              width="110px"
+              sortable="custom"
+            />
+            <el-table-column
+              prop="freeGold"
+              sortable="custom"
+              label="免费金币"
+              width="110px"
+            />
+            <el-table-column
+              prop="taskGold"
+              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="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>
+        </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>
+</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>

src/views/usergold/clientCountBalance.vue

@@ -1,3 +1,466 @@
+<script setup>
+// 这是客户金币余额页面
+import { ref, onMounted, reactive, computed } from 'vue'
+import ElementPlus from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import axios from 'axios'
+import moment from 'moment'
+import { ta } from 'element-plus/es/locales.mjs'
+import API from '@/util/http'
+
+// 变量
+//这是获取用户信息的接口
+const adminData = ref({})
+const dialogVisible = ref(false)
+const getAdminData = async function () {
+  try {
+    const result = await API({ url: '/admin/userinfo', data: {} })
+    adminData.value = result
+    // console.log('请求成功', result)
+    console.log('管理员用户信息', adminData.value)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+
+// 定义加载状态，获取地区数据
+const isLoadingmarket = ref(false);
+const market = ref([])
+const getmarket = async () => {
+  isLoadingmarket.value = true;
+  try {
+    const result = await API({
+      url: 'http://18.143.76.3:10704/general/market'
+    });
+    console.log('获取地区数据成功',result)
+    // 假设后端返回的是字符串数组，转换为 { value, label } 格式
+    if (Array.isArray(result.data) && typeof result.data[0] === 'string') {
+      market.value = result.data.map(item => ({ value: item, label: item }));
+    } else {
+      market.value = result.data;
+    }
+  } catch (error) {
+    console.error('获取地区数据失败:', error);
+    ElMessage.error('获取地区数据失败，请稍后重试');
+    // 可以提供默认数据
+    market.value = []; 
+  } finally {
+    isLoadingmarket.value = false;
+  }
+};
+
+
+// 充值明细表格
+const tableData = ref([])
+
+// 新增金币总数变量
+const goldtotal = ref(0)
+
+// 计算用户各金币总数的不分页对象
+const tableAllData = ref([])
+// 各金币字段
+const permanentGold = ref(0) // 修改为 currentPermanentGold 对应字段
+const freeJuneGold = ref(0) // 修改为 currentFreeJune 对应字段
+const freeDecemberGold = ref(0) // 修改为 currentFreeDecember 对应字段
+const taskGold = ref(0) // 修改为 currentTaskGold 对应字段
+const freeGold = ref(0) // 计算免费金币总数
+
+
+
+//客户消费记录
+const tableCountData = ref([])
+const userInfo = ref({})
+
+
+
+// 搜索===========================================
+//分页总条目
+const total = ref(100)
+// 搜索对象时间
+const getTime = ref([])
+// 搜索User
+const user = ref({})
+// 不分页的搜索对象
+const getAllObj = ref({})
+// 搜索对象
+const getObj = ref({
+  pageNum: 1,
+  pageSize: 50
+})
+// 新增排序字段和排序方式
+const sortField = ref('')
+const sortOrder = ref('')
+
+
+
+
+
+// 方法
+// 搜索===========================================================================
+// 搜索方法
+const get = async function (val) {
+  try {
+    // 搜索参数页码赋值
+    if (typeof val === 'number') {
+      getObj.value.pageNum = val
+    }
+    
+    // 添加排序字段和排序方式到请求参数
+    user.value.sortField = sortField.value
+    user.value.sortOrder = sortOrder.value
+    console.log('搜索参数', getObj.value)
+    
+    // 发送POST请求
+
+    const requestData = { ...getObj.value, user: { ...user.value } };//控制台打印请求的参数
+    console.log('最终请求参数', JSON.stringify(requestData, null, 2)); // 打印格式化后的请求参数
+
+    //console.log('请求参数', requestData);
+
+    const result = await API({
+      url: 'http://18.143.76.3:10704/goldDetail/getGold',
+      method: 'post',
+      data: { ...getObj.value, user: { ...user.value } }
+    })
+    console.log('响应数据', result)
+    tableData.value = result.data.list
+    total.value = result.data.total
+
+    
+    // 获取合计数
+    const resultGoldTotal = await API({
+      url: 'http://18.143.76.3:10704/goldDetail/goldTotal',
+      data: {
+        ...getAllObj.value,
+        user: { ...user.value }
+      }
+    })
+    // 判断精网号是否存在，假设精网号不存在时 result.data.list 为空数组
+    if (result.data.list.length === 0) {
+      // 将表格数据设置为空数组
+      tableData.value = []
+      // 将合计数设置为 0
+      permanentGold.value = 0
+      freeJuneGold.value = 0
+      freeDecemberGold.value = 0
+      taskGold.value = 0
+      goldtotal.value = 0
+
+      // // 新增金币总数变量
+      // const goldtotal = ref(0)
+
+      // 分页总数设置为 0
+      total.value = 0
+      // ElMessage.warning('精网号不存在，请检查输入')
+    } else {
+      // 将响应结果存储到响应式数据中
+      console.log('总数据请求成功', result)
+      // 存储表格数据
+      tableData.value = result.data.list
+      console.log('tableData', tableData.value)
+      
+      // 从接口返回数据中获取各金币数值
+      if (resultGoldTotal.data) {
+        permanentGold.value = parseFloat(resultGoldTotal.data.permanentGold.toFixed(2))
+        freeGold.value = parseFloat(resultGoldTotal.data.freeGold.toFixed(2))
+        taskGold.value = parseFloat(resultGoldTotal.data.taskGold.toFixed(2))
+        goldtotal.value = parseFloat(resultGoldTotal.data.goldtotal.toFixed(2))
+      } else {
+        console.error('合计数数据格式错误', resultGoldTotal)
+        ElMessage.error('获取合计数失败，请稍后重试')
+      }
+      // 存储分页总数
+      total.value = result.data.total
+      console.log('total', total.value)
+    }
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// 精网号去空格，同时处理 user 和 putExcel 中的 jwcode
+const trimJwCode = () => {
+  if (user.value.jwcode) {
+    user.value.jwcode = user.value.jwcode.replace(/\s/g, ''); 
+  }
+
+}
+// 搜索
+const search = function () {
+  trimJwCode();
+  getObj.value.pageNum = 1
+  get()
+}
+// 重置
+const reset = function () {
+  user.value = {}
+  sortField.value = ''
+  sortOrder.value = ''
+  get()
+}
+const cellClick = function (row, column) {
+  console.log('cellClick', column.label)
+  if (column.label === '姓名') {
+    dialogVisible.value = true
+    
+    userInfo.value = row
+  }
+}
+// 验证跳转输入框的数字是否合法
+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 handleSortChange = (column) => {
+  console.log('排序字段：', column.prop)
+  console.log('排序方式：', column.order)
+  if (column.prop === 'currentPermanentGold') {
+    sortField.value = 'current_permanent_gold'
+  } else if (column.prop === 'currentTaskGold') {
+    sortField.value = 'current_task_gold'
+  } else if (column.prop === 'currentFreeJune') {
+    sortField.value = 'current_free_june'
+  } else if (column.prop === 'currentFreeDecember') {
+    sortField.value = 'current_free_december'
+  }
+  sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC'
+  get()
+}
+
+
+// 挂载
+onMounted(async function () {
+  await getAdminData()
+  await get()
+  await getmarket()
+})
+const handlePageSizeChange = function (val) {
+  getObj.value.pageSize = val
+  get()
+}
+const handleCurrentChange = function (val) {
+  getObj.value.pageNum = val
+  get()
+}
+</script>
+
 <template>
-    <p>1111</p>
+  <el-row>
+    <el-col>
+      <el-card style="margin-bottom: 20px;margin-top: 10px">
+        <div class="head-card">
+          <div class="head-card-element">
+            <el-text class="mx-1" size="large">精网号：</el-text>
+            <el-input
+              v-model="user.jwcode"
+              style="width: 160px"
+              placeholder="请输入精网号"
+              clearable
+            />
+          </div>
+          <div
+            class="head-card-element"
+          >
+            <el-text class="mx-1" size="large">所属地区：</el-text>
+            <el-select
+              v-model="user.market"
+              placeholder="请选择所属地区"
+              style="width: 180px"
+              clearable
+            >
+              <el-option
+                v-for="item in market"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </div>
+            <el-button type="primary" @click="search()">查询</el-button>
+            <el-button type="primary" @click="exportExcel()">导出Excel</el-button>
+          </div>
+        <!-- </div> -->
+      </el-card>
+    </el-col>
+  </el-row>
+  <el-row>
+    <el-col>
+      <el-card>
+        <div>
+          金币总数：{{ Math.abs(goldtotal) }}  
+          永久金币：{{ Math.abs(permanentGold) }}  
+          免费金币：{{ Math.abs(freeGold) }}  
+          任务金币：{{ Math.abs(taskGold) }}
+        </div>
+        <!-- 设置表格容器的高度和滚动样式 -->
+        <div style="height: 626px; overflow-y: auto">
+          <el-table
+            :data="tableData"
+            @cellClick="cellClick"
+            style="width: 100%"
+            height="626px"
+            @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="name" label="姓名" width="120" />
+            <el-table-column prop="jwcode" label="精网号" width="120" />
+            <el-table-column prop="market" label="所属地区" width="120" />
+            <el-table-column
+              prop="allJb"
+              label="金币总数"
+              width="120"
+              aligh="center"
+            >
+              <template #default="scope">
+                <span>{{
+                  (scope.row.currentPermanentGold +
+                    scope.row.currentFreeJune +
+                    scope.row.currentFreeDecember +
+                    scope.row.currentTaskGold)  
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="currentPermanentGold"
+              label="永久金币"
+              sortable="custom"
+              width="110"
+            >
+              <template #default="scope">
+                <span>{{ Math.abs(scope.row.currentPermanentGold)   }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="currentFreeJune"
+              label="6月份到期免费金币"
+              sortable="custom"
+              width="110"
+            >
+              <template #default="scope">
+                <span>{{ scope.row.currentFreeJune   }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="currentFreeDecember"
+              label="12月份到期免费金币"
+              sortable="custom"
+              width="110"
+            >
+              <template #default="scope">
+                <span>{{ scope.row.currentFreeDecember   }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="currentTaskGold"
+              label="任务金币"
+              sortable="custom"
+              width="130"
+            >
+              <template #default="scope">
+                <span>{{ Math.abs(scope.row.currentTaskGold)   }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="rcoin" label="历史金币" width="150">
+              <template #default="scope">
+                <!-- 计算四个字段的和并显示 -->
+                <span>{{ 
+                  (scope.row.sumPermanentGold || 0) + 
+                  (scope.row.sumFreeJune || 0) + 
+                  (scope.row.sumFreeDecember || 0) + 
+                  (scope.row.sumTaskGold || 0) 
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="sumConsume" label="历史消费" width="150">
+              <template #default="scope">
+                <span>{{ Math.abs(scope.row.sumConsume)   }}</span>
+              </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>
+  
+</template>
+
+<style scoped lang="scss">
+.pagination {
+  display: flex;
+}
+
+.status {
+  display: flex;
+}
+
+.head-card {
+  display: flex;
+}
+
+.head-card-element {
+  margin-right: 20px;
+}
+
+.head-card-btn {
+  margin-left: auto;
+}
+.custom-box {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 5px;
+  div:nth-child(1) {
+    flex: 1 0 100%;
+  }
+  div {
+    margin-right: 20px;
+  }
+}
+</style>

src/views/usergold/clientCountDetail.vue

@@ -1,4 +1,4 @@
-<!-- 这是客户金币明细页面 -->
+
 <script setup>
 import { ref, onMounted, computed ,nextTick} from 'vue'
 
@@ -18,33 +18,86 @@ const getAdminData = async function () {
       data: {}
     })
     adminData.value = result
-    console.log('请求成功', result)
-    console.log('用户信息', adminData.value)
+    // console.log('请求成功', result)
+    console.log('管理员用户信息', adminData.value)
   } catch (error) {
-    console.log('请求失败', error)
+    console.log('管理员用户信息请求失败', error)
+  }
+}
+
+// 精网号去空格，处理 goldDetail 中的 jwcode
+const trimJwCode = () => {
+  if (goldDetail.value.jwcode) {
+    goldDetail.value.jwcode = goldDetail.value.jwcode.replace(/\s/g, ''); 
   }
 }
 
-// 定义加载状态
+
+//定义平台信息的加载状态
+const isLoadingPlatform = ref(false)
+// 平台信息
+const platform = ref([])
+//获取平台信息的函数
+const getPlatform = async () => {
+  isLoadingPlatform.value = true;
+  try {
+    const result = await API({
+      url: 'http://18.143.76.3:10704/general/platform',
+      method: 'post',
+      data: {}// 这里添加参数
+    })
+    // 假设后端返回的是字符串数组，转换为 { value, label } 格式
+    if(Array.isArray(result.data)) {
+      platform.value = result.data.map(item => ({ value: item, label: item }));
+    } else {
+      console.error('平台信息格式错误',result)
+      ElMessage.error('平台信息格式错误，请联系管理员')
+    } 
+  } catch (error) {
+    console.error('获取平台信息失败:', error);
+    ElMessage.error('获取平台信息失败，请稍后重试');
+    } finally {
+    isLoadingPlatform.value = false
+  }
+}
+
+// 数量更新类型选项
+const type = [
+  {
+    value: '0',
+    label: '充值'
+  },
+  {
+    value: '1',
+    label: '消耗'
+  },
+  {
+    value: '2',
+    label: '退款'
+  }
+]
+
+
+// 定义加载状态，获取地区数据
 const isLoadingArea = ref(false);
-const area = ref([])
+const market = ref([])
 const getArea = async () => {
   isLoadingArea.value = true;
   try {
     const result = await API({
-      url: '/detailY/getarea'
+      url: 'http://18.143.76.3:10704/general/market'
     });
     // 假设后端返回的是字符串数组，转换为 { value, label } 格式
     if (Array.isArray(result.data) && typeof result.data[0] === 'string') {
-      area.value = result.data.map(item => ({ value: item, label: item }));
+      market.value = result.data.map(item => ({ value: item, label: item }));
     } else {
-      area.value = result.data;
+      market.value = result.data;
     }
   } catch (error) {
     console.error('获取地区数据失败:', error);
     ElMessage.error('获取地区数据失败，请稍后重试');
     // 可以提供默认数据
-    area.value = []; 
+    market.value = []; 
   } finally {
     isLoadingArea.value = false;
   }
@@ -52,36 +105,26 @@ const getArea = async () => {
 
 // 充值明细表格
 const tableData = ref([])
-// 各金币总数
-const rechargeCoin = ref(0)
-const freeCoin = ref(0)
-const taskCoin = ref(0)
+// 各金币字段变量
+// const sumGoldTotal = ref(0)
+const  permanentGold = ref(0)
+//const freeGold = ref(0)
+const taskGold = ref(0)
 // 搜索===========================================
 //分页总条目
 const total = ref(100)
 // 搜索对象时间
 const getTime = ref([])
-// 搜索detailY
-const detailY = ref({})
+// 搜索goldDetail
+const goldDetail = ref({})
 // 搜索对象
 const getObj = ref({
   pageNum: 1,
   pageSize: 50
 })
-// 开启条件筛选导出excel
-const getPutEX = ref(false)
 
-// 支付方式选项
-const num = [
-  {
-    value: '1',
-    label: '增加'
-  },
-  {
-    value: '2',
-    label: '减少'
-  }
-]
+// 开启条件筛选导出excel
+// const getPutEX = ref(false)
 
 
 // 方法
@@ -89,71 +132,96 @@ const num = [
 // 搜索方法
 const get = async function (val) {
   try {
-    // 地区赋值
-    if (adminData.value.area === '泰国') {
-      detailY.value.areas = ['泰国', '越南']
-    } else if (adminData.value.area !== '总部') {
-      detailY.value.area = adminData.value.area
-    }
+    // 地区赋值，这一期需求用不上
+    // if (adminData.value.market === '泰国') {
+    //   goldDetail.value.markets = ['泰国', '越南']
+    // } else if (adminData.value.market !== '总部') {
+    //   goldDetail.value.market = adminData.value.market
+    // }
     // 搜索参数页码赋值
     if (typeof val === 'number') {
       getObj.value.pageNum = val
     }
-    if (getTime.value.length === 2) {
-      detailY.value.startDate = getTime.value[0]
-      detailY.value.endDate = getTime.value[1]
+    if (getTime.value.length === 2) {//检查是否同时选择了开始时间和结束时间，如果不是则置空
+      // 使用 YYYY-MM-DD HH:mm:ss 格式
+      goldDetail.value.startTime = moment(getTime.value[0]).format('YYYY-MM-DD HH:mm:ss');
+      goldDetail.value.endTime = moment(getTime.value[1]).format('YYYY-MM-DD HH:mm:ss');
     } else {
-      detailY.value.startDate = ''
-      detailY.value.endDate = ''
+      goldDetail.value.startTime = ''
+      goldDetail.value.endTime = ''
     }
+    // console.log('moment 库是否正确加载:', moment);能正常加载
     // 添加排序字段和排序方式到请求参数
-    detailY.value.sortField = sortField.value
-    detailY.value.sortOrder = sortOrder.value
+    goldDetail.value.sortField = sortField.value
+    goldDetail.value.sortOrder = sortOrder.value
     console.log('搜索参数', getObj.value)
     // 发送POST请求
+
+
+      // 打印 jwcode 的类型和值，用于调试
+    console.log('jwcode 类型:', typeof goldDetail.value.jwcode);
+    console.log('jwcode 值:', goldDetail.value.jwcode);
+
+    const requestData = { ...getObj.value, goldDetail: { ...goldDetail.value } };
+    console.log('最终请求参数', JSON.stringify(requestData, null, 2)); // 打印格式化后的请求参数
+
+    //console.log('请求参数', requestData);
+
     const result = await API({
-      url: '/detailY',
+      url: 'http://18.143.76.3:10704/goldDetail/getGoldDetail',
       method: 'post',
-      data: { ...getObj.value, detailY: { ...detailY.value } }
+      data: { ...getObj.value, goldDetail: { ...goldDetail.value } }
     })
+    console.log('响应数据', result)
     tableData.value = result.data.list
     total.value = result.data.total
+
+
+    
+    // 更新永久金币、任务金币
+     permanentGold.value = tableData.value.reduce((total, row) => {
+      return total + (Number(row. permanentGold) || 0);
+    }, 0);
+
+    taskGold.value = tableData.value.reduce((total, row) => {
+      return total + (Number(row.taskGold) || 0);
+    }, 0);
+    //由于免费金币的计算方式是6月免费+12月免费，所以需要单独处理，以及计算总的免费金币和总的金币数放在一块
+    
+
   } catch (error) {
     console.log('请求失败', error)
   }
 }
-// 精网号去空格，处理 detailY 中的 jwcode
-const trimJwCode = () => {
-  if (detailY.value.jwcode) {
-    detailY.value.jwcode = detailY.value.jwcode.replace(/\s/g, ''); 
-  }
-}
 
-// 搜索
-const search = function () {
-  trimJwCode();
-  getObj.value.pageNum = 1
-  get()
-}
 
 // 重置
 const reset = function () {
-  delete detailY.value.jwcode
-  delete detailY.value.num
-  delete detailY.value.startDate
-  delete detailY.value.endDate
-  delete detailY.value.area
+  delete goldDetail.value.jwcode
+  delete goldDetail.value.type
+  delete goldDetail.value.startTime
+  delete goldDetail.value.endTime
+  delete goldDetail.value.market
   delete sortField.value
   delete sortOrder.value
   getTime.value = []
-  delete detailY.value.consumePlatform
+  delete goldDetail.value.payPlatform
 }
+
+// 搜索，点击查询按钮后触发
+const search = function () {
+  trimJwCode();
+  getObj.value.pageNum = 1
+  get()
+}
+
+
 // 今天
 const getToday = function () {
   const today = moment()
-  const startDate = today.startOf('day').toDate()
-  const endDate = today.add(1, 'days').startOf('day').toDate()
-  getTime.value = [startDate, endDate]
+  const startTime = today.startOf('day').toDate()
+  const endTime = today.add(1, 'days').startOf('day').toDate()
+  getTime.value = [startTime, endTime]
   search()
 }
 
@@ -161,21 +229,43 @@ const getToday = function () {
 const getYesterday = function () {
   const today = moment()
   const yesterday = moment().subtract(1, 'day')
-  const startDate = yesterday.startOf('day').toDate()
-  const endDate = today.startOf('day').toDate()
-  getTime.value = [startDate, endDate]
+  const startTime = yesterday.startOf('day').toDate()
+  const endTime = today.startOf('day').toDate()
+  getTime.value = [startTime, endTime]
   search()
 }
 
 // 近7天
 const get7Days = function () {
-  const startDate = moment().subtract(6, 'day').startOf('day').toDate()
-  const endDate = moment().add(1,'days').startOf('day').toDate()
-  getTime.value = [startDate, endDate]
+  const startTime = moment().subtract(6, 'day').startOf('day').toDate()
+  const endTime = moment().add(1,'days').startOf('day').toDate()
+  getTime.value = [startTime, endTime]
   search()
 }
 
-// 验证跳转输入框的数字是否合法
+// 计算所有记录的金币总数
+const sumGoldTotal = computed(() => {
+  return tableData.value.reduce((total, row) => {
+    return total + (Number(row.sumGold) || 0);
+  }, 0);
+});
+
+
+// 计算每行免费金币6月+12月的方法
+const calculateFreeGold = (row) => {
+  const freeJune = row.freeJune || 0;
+  const freeDecember = row.freeDecember || 0;
+  return (freeJune + freeDecember);
+};
+
+// 计算总免费金币的计算属性
+const totalFreeGold = computed(() => {
+  return tableData.value.reduce((total, row) => {
+    return total + calculateFreeGold(row);
+  }, 0);
+});
+
+// 验证页码跳转输入框的数字是否合法
 const checkNumber = function () {
   if (typeof parseInt(getObj.value.pageNum) === 'number') {
     console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
@@ -202,262 +292,24 @@ const checkNumber = function () {
   }
 }
 
-// 计算金币数量的方法
-const calculateGoldAmount = (row) => {
-  const totalGold = (row.rechargeCoin + row.freeCoin + row.taskCoin) / 100;
-  if (row.updateType === 1) { // 消费
-    return -totalGold;
-  } 
-  return totalGold;
-}
-
-// 导出Excel的方法
-const headers = [
-  '序号',
-  '姓名',
-  '精网号',
-  '所属地区',
-  '平台信息',
-  //'更新数量',
-  '更新类型',
-  '金币数量',
-  '永久金币',
-  '免费金币',
-  '任务金币',
-  '提交人',
-  '更新时间'
-]
-
-const showExportInfoPanel = ref(false)
-
-// 点击导出按钮直接显示信息面板
-const exportExcel = async () => {
-  try {
-    console.log('点击导出按钮，尝试显示信息面板');
-    showExportInfoPanel.value = true;
-    await nextTick();//组件更新显示信息面板
-  } catch (error) {
-    console.error('显示信息面板失败:', error);
-    ElMessage.error('显示信息面板失败，请稍后重试');
-  }
-};
-
-// 新增导出状态相关变量
-const exportProgress = ref(0)
-const isExporting = ref(false)
-const exportCancelToken = ref(null)
-
-// 优化后的导出方法
-const doExportExcel = async () => {
-  try {
-    isExporting.value = true
-    exportProgress.value = 0
-    showExportInfoPanel.value = false
-
-    // 初始化Excel
-    const wb = utils.book_new()
-    const ws = utils.aoa_to_sheet([headers])
-    utils.book_append_sheet(wb, ws, 'Sheet1')
-
-    // 流式写入配置
-    const writer = {
-      write: (d, o) => {
-        if (!d) return
-        utils.sheet_add_aoa(ws, d, { origin: -1 })
-      }
-    }
-
-    let page = 1
-    let totalExported = 0
-    const pageSize = 5000 // 每次请求5000条
-    let totalRecords = 0
-
-    // 首次请求获取总记录数
-    const firstResult = await API({
-      url: '/detailY',
-      method: 'post',
-      data: { 
-        pageNum: 1,
-        pageSize,
-        detailY: { ...detailY.value }
-      }
-    })
-    totalRecords = firstResult.data.total
-
-    // 创建取消令牌
-    const CancelToken = axios.CancelToken
-    exportCancelToken.value = CancelToken.source()
-
-    // 平台信息映射
-    const platformMap = {
-      0: '初始化金币',
-      1: 'ERP系统',
-      2: 'Homily Chart',
-      3: 'Homily Link',
-      4: '金币系统'
-    };
-    // 更新类型映射
-    const updateTypeMap = {
-      0: '充值',
-      1: '消费',
-      2: '退款',
-      3: '其他'
-    };
-
-    // 处理首次请求的数据
-    const firstData = firstResult.data.list
-    if (firstData.length) {
-      const rows = firstData.map((row, index) => {
-        const consumePlatform = parseInt(row.consumePlatform, 10); // 转换为数字类型
-        const platformInfo = platformMap[consumePlatform] || '';
-        return [
-          totalExported + index + 1,
-          row.username || '',
-          row.jwcode || '',
-          row.area || '',
-          platformInfo,
-          (row.gold / 100).toFixed(2) || '0.00',
-          updateTypeMap[row.updateType] || '',
-          (row.rechargeCoin / 100).toFixed(2) || '0.00',
-          (row.freeCoin / 100).toFixed(2) || '0.00',
-          (row.taskCoin / 100).toFixed(2) || '0.00',
-          row.name || '',
-          moment(row.createTime).format('YYYY-MM-DD HH:mm:ss') || ''
-        ]
-      })
-      writer.write(rows)
-      totalExported += firstData.length
-      exportProgress.value = Math.round((totalExported / totalRecords) * 100)
-      page++
-    }
-
-    while (totalExported < totalRecords) {
-      const result = await API({
-        url: '/detailY',
-        method: 'post',
-        data: { 
-          pageNum: page,
-          pageSize,
-          detailY: { ...detailY.value }
-        },
-        cancelToken: exportCancelToken.value.token
-      })
-
-      const data = result.data.list
-      if (!data.length) break
-
-      // 转换数据
-      const rows = data.map((row, index) => [
-        totalExported + index + 1,
-        row.username || '',
-        row.jwcode || '',
-        row.area || '',
-        platformMap[row.consumePlatform] || '',
-        (row.gold / 100).toFixed(2) || '0.00',
-        updateTypeMap[row.updateType] || '',
-        (row.rechargeCoin / 100).toFixed(2) || '0.00',
-        (row.freeCoin / 100).toFixed(2) || '0.00',
-        (row.taskCoin / 100).toFixed(2) || '0.00',
-        row.name || '',
-        moment(row.createTime).format('YYYY-MM-DD HH:mm:ss') || ''
-      ])
-
-      // 流式写入
-      writer.write(rows)
-      totalExported += data.length
-      exportProgress.value = Math.round((totalExported / totalRecords) * 100)
-
-      // 内存控制：每500页释放内存
-      if (page % 500 === 0) {
-        await new Promise(resolve => setTimeout(resolve, 0))
-      }
-
-      page++
-    }
-
-    // 生成最终文件
-    writeFile(wb, '客户金币明细.xlsx')
-    ElMessage.success(`导出成功，共${totalExported}条数据`)
-  } catch (error) {
-    if (!axios.isCancel(error)) {
-      ElMessage.error(`导出失败: ${error.message}`)
-    }
-  } finally {
-    isExporting.value = false
-    exportCancelToken.value = null
-  }
-}
-
-// 新增取消导出方法
-const cancelExport = () => {
-  if (exportCancelToken.value) {
-    exportCancelToken.value.cancel('用户取消导出')
-    ElMessage.warning('导出已取消')
-    isExporting.value = false
-  }
-}
 
-const putExcel = ref({
-  startDate: new Date(),
-  endDate: new Date(new Date().setDate(new Date().getDate() + 1))
-})
 
-// 新增校验精网号的方法
-const checkJwCode = async (jwcode) => {
-  try {
-    const result = await API({
-      url: '/recharge/user',
-      method: 'post',
-      data: {
-        jwcode,
-        area: adminData.value.area
-      }
-    })
-    // 根据后端返回的 code 判断精网号是否存在
-    return result.code !== 0 
-  } catch (error) {
-    console.log('校验精网号失败', error)
-    return false
-  }
-}
-
-// 选消费平台
-const platform = [
-  {
-    value: '4',
-    label: '金币系统'
-  },
-  {
-    value: '1',
-    label: 'ERP系统'
-  },
-  {
-    value: '2',
-    label: 'Homily Chart'
-  },
-  {
-    value: '3',
-    label: 'Homily Link'
-  },
-  {
-    value: '0',
-    label: '初始化金币'
-  }
-]
 
 // 新增排序字段和排序方式
 const sortField = ref('')
 const sortOrder = ref('')
 // 处理排序事件
 const handleSortChange = (column) => {
-  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'
+  if (column.prop === 'sumGold') {//新增金币总数字段排序
+    sortField.value = 'sum_gold'
+  } else if(column.prop === ' permanentGold') {
+    sortField.value = 'permanent_gold'
+  } else if (column.prop === 'taskGold') {
+    sortField.value = 'task_gold'
+  } else if (column.prop === 'freeGold') {
+    sortField.value = 'free_gold'
+  } else if (column.prop === 'auditTime') {//删除了更新时间的creatTime
+    sortField.value = 'audit_time'
   } else if (column.prop === 'gold') {
     sortField.value = 'gold'
   }
@@ -479,19 +331,14 @@ const handleCurrentChange = function (val) {
 }
 
 
-// 用于控制显示内容的变量
-const activeTab = ref('detailY')
-
-// 切换标签页的方法
-const changeTab = (tabName) => {
-  activeTab.value = tabName
-}
 
 // 挂载
 onMounted(async function () {
+  await get()
   await getArea()
   await getAdminData()
-  await get()
+  await getPlatform() // 调用获取平台信息的函数
+  
 })
 
 </script>
@@ -501,84 +348,6 @@ onMounted(async function () {
 
 
 <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"
-    title="导出信息确认"
-    width="400px"
-    :close-on-click-modal="false"
-  >
-    <div class="info-panel-header">导出信息</div>
-    <!-- 直接使用 detailY 显示信息，添加可选链操作符 -->
-    <!-- detailY是一个ref，所以在模板中应该直接使用detailY.consumePlatform，
-     而不是detailY.value.consumePlatform。
-     因为在模板中，ref变量会自动解包，不需要.value。
-     例如，在代码中，我们可能错误地在模板中使用了detailY.value，但实际上应该直接使用detailY。 -->
-    <div v-if="!detailY.jwcode && !detailY.consumePlatform && !detailY.num && !detailY.area && (getTime.length < 2)">
-      你正在导出所有数据
-    </div>
-    <div v-else>
-      你正在导出以下数据
-    </div>
-    <div v-if="detailY.jwcode">精网号：{{ detailY.jwcode || '' }}</div>
-    <div v-if="detailY.consumePlatform">平台信息：{{ detailY.consumePlatform ? (platform.find(item => item.value === detailY.consumePlatform)?.label) : '' }}</div>
-    <div v-if="detailY.num">数量更新类型：{{ detailY.num ? (num.find(item => item.value === detailY.num)?.label || '') : '' }}</div>
-    <div v-if="detailY.area">所属地区：{{ detailY.area || '' }}</div>
-    <div v-if="Array.isArray(getTime) && getTime.length >= 2">
-      <span>更新时间：</span>
-      <!-- 修改时间格式为精确到秒 -->
-      <span v-if="Array.isArray(getTime) && getTime.length >= 2">
-        {{ moment(getTime[0]).format('YYYY-MM-DD HH:mm:ss') }} 至 {{ moment(getTime[1]).format('YYYY-MM-DD HH:mm:ss') }}
-      </span>
-      <span v-else></span>
-    </div>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="showExportInfoPanel = false">取消</el-button>
-        <el-button type="primary" @click="doExportExcel">导出</el-button>
-      </span>
-    </template>
-  </el-dialog>
-
-  <!-- 导出进度弹窗 -->
-  <el-dialog
-    v-model="isExporting"
-    title="正在导出"
-    width="400px"
-    :close-on-click-modal="false"
-    :show-close="false"
-  >
-    <el-progress 
-      :percentage="exportProgress" 
-      :stroke-width="15"
-      striped
-      animated
-    />
-    <div class="export-status">
-      已导出 {{ Math.round((exportProgress / 100) * total) }} 条 / 共 {{ total }} 条
-    </div>
-    <template #footer>
-      <el-button type="danger" @click="cancelExport">取消导出</el-button>
-    </template>
-  </el-dialog>
 
   <el-row>
     <el-col>
@@ -588,7 +357,7 @@ onMounted(async function () {
             <div class="head-card-element">
               <el-text class="mx-1" size="large">精网号：</el-text>
               <el-input
-                v-model="detailY.jwcode"
+                v-model="goldDetail.jwcode"
                 style="width: 150px"
                 placeholder="请输入精网号"
                 clearable
@@ -599,10 +368,11 @@ onMounted(async function () {
             <div class="head-card-element">
               <el-text class="mx-1" size="large">平台信息：</el-text>
               <el-select
-                v-model="detailY.consumePlatform"
+                v-model="goldDetail.payPlatform"
                 placeholder="请选择平台信息"
-                style="width: 180px"
+                style="width: 160px"
                 clearable
+                :loading="isLoadingPlatform"
               >
                 <el-option
                   v-for="item in platform"
@@ -613,17 +383,17 @@ onMounted(async function () {
               </el-select>
             </div>
           </el-col>
-          <el-col :span="6">
+          <el-col :span="7">
             <div class="head-card-element">
               <el-text class="mx-1" size="large">数量更新类型：</el-text>
               <el-select
-                v-model="detailY.num"
+                v-model="goldDetail.type"
                 placeholder="请选择更新类型"
-                style="width: 180px"
+                style="width: 160px"
                 clearable
               >
                 <el-option
-                  v-for="item in num"
+                  v-for="item in type"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"
@@ -635,14 +405,14 @@ onMounted(async function () {
             <div class="head-card-element">
               <el-text class="mx-1" size="large">所属地区：</el-text>
               <el-select
-                v-model="detailY.area"
+                v-model="goldDetail.market"
                 placeholder="请选择所属地区"
                 style="width: 180px"
                 clearable
                 :loading="isLoadingArea"
               >
                 <el-option
-                  v-for="item in area"
+                  v-for="item in market"
                   :key="item.value || item"
                   :label="item.label || item"
                   :value="item.value || item"
@@ -676,6 +446,12 @@ onMounted(async function () {
   <el-row>
     <el-col>
       <el-card>
+        <div>
+          金币总数：{{ Math.abs(sumGoldTotal) }}  
+          永久金币：{{ Math.abs( permanentGold) }}  
+          免费金币：{{ Math.abs(totalFreeGold) }}
+          任务金币：{{ Math.abs(taskGold) }}
+        </div>
         <div style="height: 584px; overflow-y: auto">
           <el-table
             :data="tableData"
@@ -697,7 +473,7 @@ onMounted(async function () {
             </el-table-column>
             <el-table-column
               fixed="left"
-              prop="username"
+              prop="name"
               label="姓名"
               width="150"
             />
@@ -707,80 +483,73 @@ onMounted(async function () {
               label="精网号"
               width="120"
             />
-            <el-table-column prop="area" label="所属地区" width="120" />
+            <el-table-column prop="market" label="所属地区" width="120" />
             <el-table-column
-              prop="consumePlatform"
+              prop="payPlatform"
               label="平台信息"
               width="140"
             >
+              
+            </el-table-column>
+            
+            <el-table-column prop="type" label="更新类型" width="110">
               <template #default="scope">
-                <!-- 使用非严格相等比较 -->
-                <span v-if="scope.row.consumePlatform == 0">初始化金币</span>
-                <span v-if="scope.row.consumePlatform == 1">ERP系统</span>
-                <span v-if="scope.row.consumePlatform == 3">Homily Link</span>
-                <span v-if="scope.row.consumePlatform == 2">Homily Chart</span>
-                <span v-if="scope.row.consumePlatform == 4">金币系统</span>
+                <span v-if="scope.row.type === 0">充值</span>
+                <span v-if="scope.row.type === 1">消耗</span>
+                <span v-if="scope.row.type === 2">退款</span>
               </template>
             </el-table-column>
-            <!-- <el-table-column
-              prop="gold"
-              label="更新数量"
-              width="120"
+
+            <el-table-column
+              prop="sumGold"
               sortable="custom"
+              label="金币数量"
+              width="110"
             >
               <template #default="scope">
-                <span>{{ scope.row.gold / 100 }}</span>
-              </template>
-            </el-table-column> -->
-            <el-table-column prop="updateType" label="更新类型" width="110">
-              <!-- 模板内容 -->
-              <template #default="scope">
-                <span v-if="scope.row.updateType == 1">消费</span>
-                <span v-if="scope.row.updateType == 0">充值</span>
-                <span v-if="scope.row.updateType == 2">退款</span>
-                <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>
+                <span>
+                {{ 
+                  scope.row.type === 1 // 消费类型
+                    ? -  scope.row.sumGold 
+                    : scope.row.sumGold 
+                }}
+              </span>
               </template>
             </el-table-column>
 
             <el-table-column
-              prop="rechargeCoin"
+              prop=" permanentGold"
               sortable="custom"
               label="永久金币"
               width="110"
             >
               <template #default="scope">
-                <span>{{ scope.row.rechargeCoin / 100 }}</span>
+                <span>{{ scope.row. permanentGold }}</span>
               </template>
             </el-table-column>
             <el-table-column
-              prop="freeCoin"
               sortable="custom"
               label="免费金币"
               width="110"
             >
               <template #default="scope">
-                <span>{{ scope.row.freeCoin / 100 }}</span>
+                <span>{{ calculateFreeGold(scope.row) }}</span>
               </template>
             </el-table-column>
             <el-table-column
-              prop="taskCoin"
+              prop="taskGold"
               sortable="custom"
               label="任务金币"
               width="110"
             >
               <template #default="scope">
-                <span>{{ scope.row.taskCoin / 100 }}</span>
+                <span>{{ scope.row.taskGold }}</span>
               </template>
             </el-table-column>
-            <el-table-column prop="name" label="提交人" width="110" />
+            <el-table-column prop="adminName" label="提交人" width="110" />
             <el-table-column
-              prop="createTime"
+              prop="auditTime"
               sortable="custom"
               label="更新时间"
               width="210"
@@ -788,7 +557,7 @@ onMounted(async function () {
             >
               <template #default="scope">
                 <span>{{
-                  moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss')
+                  moment(scope.row.auditTime).format('YYYY-MM-DD HH:mm:ss')
                 }}</span>
               </template>
             </el-table-column>
@@ -810,11 +579,7 @@ onMounted(async function () {
       </el-card>
     </el-col>
   </el-row>
-  <!-- </div> -->
-  <!-- 客户金币余额的布局---------------------------------------------------------- -->
-  <!-- <div v-else-if="activeTab === 'goldInfo'"> -->
   
-  <!-- </div> -->
   </div>
 </template>
 

vite.config.ts

@@ -39,6 +39,9 @@ export default defineConfig(({ mode }) => {
         ]
       })
     ],
+    server: {
+    host: true // 允许外部设备访问
+  },
     resolve: {
       alias: {
         '@': path.resolve(__dirname, './src')