删除异常显示

充值审核 改为服务器地址

.env.development

@@ -1,5 +1,5 @@
-# VITE_API_BASE='http://54.251.137.151:10704/'
-# VITE_API_BASE='http://192.168.8.94:8080/'
+# VITE_API_BASE='https://hwjb.homilychart.com/admin/'
 # 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.242:8081/'
+# VITE_API_BASE='http://18.143.76.3:10704/'
+

.env.production

@@ -1,5 +1,5 @@
 # VITE_API_BASE='http://54.251.137.151:10702/'
-VITE_API_BASE='https://hwjb.homilychart.com/gold_htms_prod'
+VITE_API_BASE='https://hwjb.homilychart.com/admin/'
 # VITE_API_BASE='https://hwjb.homilychart.com/gold_htms_dev'
 # VITE_API_BASE='http://192.168.8.232:8080/'
 

.env.test

@@ -1,6 +1,3 @@
 # VITE_API_BASE='https://hwjb.homilychart.com/gold_htms_prod'
-#VITE_API_BASE='http://54.251.137.151:10704/'
- VITE_API_BASE='http://192.168.8.94:8080/'
-#VITE_API_BASE='https://hwjb.homilychart.com/gold_htms_dev'
-# VITE_API_BASE='http://192.168.8.225:8080/'
-
+VITE_API_BASE='https://hwjb.homilychart.com/admin/'
+# VITE_API_BASE='http://18.143.76.3:10704/'

src/router/index.js

@@ -3,14 +3,14 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 const router = createRouter({
     history: createWebHashHistory(),
     routes: [
-        { path: '/login', name: "login", component: () => import("../views/login.vue") },
+        { path: '/workspace', name: "workspace", component: () => import("../views/workspace/index.vue") },
         { path: '/', redirect: "/login" },
+        {path: "/login",name: "login",component: () => import("../views/login.vue"),},
         // { path: '/test', component: () => import("../views/z.vue") },
         {
             meta: { requireAuth: true },
-            path: '/index', component: () => import("../views/index.vue"),
+            path: '/', component: () => import("../views/home.vue"),
             children: [
-
                 // 工作台
                 { path: '/workspace/:area?', name: "workspace", component: () => import("../views/workspace/index.vue") },
                 // 充值审核
@@ -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自己看
 })
 
 // 请求拦截器
@@ -19,7 +19,7 @@ service.interceptors.request.use(config => {
     } else {
       config.data = { token };
     }
-    // config.headers.Authorization = `${token}`
+    config.headers.token = `${token}`
   }
   return config
 }, error => {

src/views/consume/addCoinConsume.vue

@@ -1,22 +1,81 @@
 <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({
@@ -24,8 +83,10 @@ const getAdminData = async function () {
       data: {},
     });
     adminData.value = result;
-    addConsume.value.adminId = adminData.value.adminId;
-    addConsume.value.name = adminData.value.name;
+    addConsume.value.adminId = adminData.value.id;
+
+    addConsume.value.name = adminData.value.adminName;
+
     console.log("请求成功", result);
     console.log("用户信息", adminData.value);
   } catch (error) {
@@ -33,64 +94,170 @@ const getAdminData = async function () {
   }
 };
 
-// 这是添加消费信息的表单
-const addConsume = ref({
-  freeCoin: 0,
-  rechargeCoin: 0,
-  taskCoin: 0,
-  updateType: "1",
-  indexName:"", //这个是指标字段，后面绑定
-});
+// 输入验证函数
+function validateInput() {
+  const sumGold = parseFloat(addConsume.value.sumGold);
+  trimJwCode();
+  if (user.value.jwcode == null) {
+    ElMessage.error("请先查询用户信息");
+    addConsume.value.sumGold = null;
+    return false;
+  }
+
+  // 验证金币数值
+  if (user.value.jwcode && (isNaN(sumGold) || sumGold <= 0)) {
+    ElMessage.error("消费金币总数必须是大于0的数字");
+    // 将sumGold设置为null
+    addConsume.value.sumGold = null;
+    return false;
+  }
+
+  // 验证金币总和
+  const totalAvailableGold = (user.value.nowSumGold)
+  if (user.value.jwcode && sumGold > totalAvailableGold) {
+    ElMessage.error("消费金币总数超过可用金币总和");
+    // 将sumGold设置为null
+    addConsume.value.sumGold = null;
+    return false;
+  }
+
+  return true;
+}
+
+// 消耗金币计算函数
+function calculateCoins(sumGold) {
+  console.log("消耗金币计算函数:计算金币", sumGold);
+  const parsedSumGold = parseFloat(sumGold);
+  if (isNaN(parsedSumGold) || parsedSumGold <= 0 || !user.value.jwcode) {
+    return {free: 0, permanent: 0, task: 0};
+  }
+
+  const {nowFreeGold, nowPermanentGold, nowTaskGold} = user.value;
+  let remaining = parsedSumGold;
+  let freeUsed = 0, permanentUsed = 0, taskUsed = 0;
+
+  // 优先消耗免费金币
+  if (nowFreeGold > 0) {
+    freeUsed = Math.min(parseFloat(nowFreeGold.toFixed(2)), remaining);
+    remaining = parseFloat((remaining - freeUsed).toFixed(2));
+  }
+
+  // 其次消耗永久金币
+  if (remaining > 0 && nowPermanentGold > 0) {
+    permanentUsed = Math.min(parseFloat(nowPermanentGold.toFixed(2)), remaining);
+    remaining = parseFloat((remaining - permanentUsed).toFixed(2));
+  }
+
+  // 最后消耗任务金币
+  if (remaining > 0 && nowTaskGold > 0) {
+    taskUsed = parseFloat(remaining.toFixed(2));
+  }
+
+  // 更新金币值
+  addConsume.value.freeGold = freeUsed;
+  addConsume.value.permanentGold = permanentUsed;
+  addConsume.value.taskGold = taskUsed;
+
+  return {free: freeUsed, permanent: permanentUsed, task: taskUsed};
+}
+
 // 这是添加消费信息的接口
 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",
       url: "/consume/add",
-      data: addConsume.value,
-    });
-    if (result.code === 0) {
-      ElMessage.error(result.msg);
-      return;
-    } else {
-      ElMessage.success("添加成功");
+      data: {
+        ...addConsume.value,
+        jwcode: addConsume.value.jwcode,
+        adminId: addConsume.value.adminId,
+        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.id,
+    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
+  }
+}
+
+// 添加前验证
 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 +272,40 @@ 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: "/user/selectUser", // todo 服务器改回无ip的
       data: {
+        // 只需要传精网号
         jwcode: addConsume.value.jwcode,
-        area: adminData.value.area,
       },
     });
     console.log("请求成功", result);
 
+    if (result.code === 200) {
+      user.value = result.data;
+      user.value.nowPermanentGold = result.data.nowPermanentGold / 100;
+      user.value.nowFreeGold = result.data.nowFreeGold / 100;
+      user.value.nowSumGold = result.data.nowSumGold / 100;
+      user.value.nowTaskGold = result.data.nowTaskGold / 100;
+      user.value.nowFreeJune = (result.data.nowFreeJune) / 100;
+      user.value.nowFreeDecember = (result.data.nowFreeDecember) / 100;
+
+      user.value.historySumGold = (result.data.historySumGold) / 100;
+      user.value.historyPermanentGold = (result.data.historyPermanentGold) / 100;
+      user.value.historyFreeGold = (result.data.historyFreeGold) / 100;
+      user.value.historyTaskGold = (result.data.historyTaskGold) / 100;
+    }
     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,244 +315,64 @@ const getUser = async function (jwcode) {
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 };
-
-
-//下面这个也是校验精网号是否存在的方法，通过脱离文本框实现，但是上面方法绑定了信息面板，在输入正确的精网号后能显示。
-//这是查询用户金币信息的接口
-const userGold = ref({});
-const getUserGold = async function (jwcode) {
-  trimJwCode();
-  try {
-    // 发送POST请求
-    const result = await request({
-      url: "/recharge/user",
-      data: {
-        jwcode: addConsume.value.jwcode,
-        area: adminData.value.area,
-      },
-    });
-    // 将响应结果存储到响应式数据中
-    console.log("请求成功", result);
-    if (result.code === 0) {
-      //ElMessage.error(result.msg);
-    } else {
-      // 存储表格数据
-      userGold.value = result.data;
-      addConsume.value.username = result.data.name;
-      addConsume.value.area = result.data.area;
-     // ElMessage.success(result.msg);
-    }
-  } catch (error) {
-    console.log("请求失败", error);
-    //ElMessage.error("无此精网号");
-    addConsume.value.jwcode = "";
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-};
-
-function calculateCoins() {
-  if (
-    (userGold.value.coreJb +
-      userGold.value.free6 +
-      userGold.value.free12 +
-      userGold.value.buyJb) /
-      100 <
-    addConsume.value.allGold
-  ) {
-    addConsume.value.allGold = 0;
-    addConsume.value.taskCoin = 0;
-    addConsume.value.freeCoin = 0;
-    addConsume.value.rechargeCoin = 0;
-    ElMessage.error("金币不足，请充值");
-    return;
-  }
-  // 这是计算用户的三种金币的接口
-  else {
-    // 保存原始的allGold值
-    const originalAllGold = addConsume.value.allGold;
-
-    // 确保todayTask和todayFree是有效的数字
-    const todayTask =
-      typeof userGold.value.coreJb === "number"
-        ? userGold.value.coreJb / 100
-        : 0;
-    const todayFree =
-      typeof (userGold.value.free6 + userGold.value.free12) === "number"
-        ? (userGold.value.free6 + userGold.value.free12) / 100
-        : 0;
-
-    // 根据用户输入的消费金币总数和已有的金币数量进行计算
-    addConsume.value.taskCoin = Math.min(originalAllGold, todayTask);
-    let remainingGold = originalAllGold - addConsume.value.taskCoin;
-
-    addConsume.value.freeCoin = Math.min(remainingGold, todayFree);
-    remainingGold -= addConsume.value.freeCoin;
-
-    addConsume.value.rechargeCoin = remainingGold; // 剩余的都算作永久金币
-
-    // 恢复allGold的原始值
-    addConsume.value.allGold = originalAllGold;
-
-    // 确保taskCoin, freeCoin, rechargeCoin不是NaN，如果是，则设置为0
-    if (isNaN(addConsume.value.taskCoin)) addConsume.value.taskCoin = 0;
-    if (isNaN(addConsume.value.freeCoin)) addConsume.value.freeCoin = 0;
-    if (isNaN(addConsume.value.rechargeCoin)) addConsume.value.rechargeCoin = 0;
-
-    console.log("计算结果", addConsume.value);
-  }
-}
-
-// 查询商品的接口
-const goods = ref([]);
+// 获取商品信息(三楼接口)
 const getGoods = async function () {
   try {
     // 发送POST请求
     const result = await request({
-      url: "/product",
-      data: {},
-    });
-    // 将响应结果存储到响应式数据中
-
-    console.log("请求成功", result);
-    // 存储全部数据
-    goods.value = result.data;
-  } catch (error) {
-    console.log("请求失败", error);
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-};
-// 获取指标的方法
-const index = ref([]);
-const getIndexs = async function (type) {
-  try {
-    // 发送POST请求
-    const result = await request({
-      url: "/product/index",
-      data: {
-        type: type,
-      },
+      // 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);
-    // 存储全部数据
-    index.value = result.data;
+    goods.value = result.data.map(item => ({
+      id: item.id,
+      label: item.name,
+      value: item.name
+    }));
   } 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) => {
+      const parsedNewValue = parseFloat(newValue);
+      if (!isNaN(parsedNewValue) && parsedNewValue > 0) {
+        const {free, permanent, task} = calculateCoins(parsedNewValue);
+        addConsume.value.freeGold = free;
+        addConsume.value.permanentGold = permanent;
+        addConsume.value.taskGold = task;
       } else {
-    isHC.value = 0;
-    addConsume.value.productName = productName;
-    addConsume.value.indexName = "";
-  }
-};
-
-// 指标选择处理（重点修改）
-const handleIndexSelect = (selectedItem) => {
-  if (isHC.value === 1) {
-    const indexName = typeof selectedItem === 'string' 
-      ? selectedItem 
-      : selectedItem?.name || '';
-    // 仅更新指标名称字段
-    addConsume.value.indexName = indexName;
+        addConsume.value.freeGold = null;
+        addConsume.value.permanentGold = null;
+        addConsume.value.taskGold = null;
       }
-};
-
-// 处理自由输入指标
-const handleIndexBlur = (e) => {
-  if (isHC.value === 1 && e.target.value) {
-    // 仅更新指标名称字段
-    addConsume.value.indexName = e.target.value;
     }
-};
-
-
-
+);
 
+/*
+====================挂载=================================
+*/
 // 挂载
 onMounted(async function () {
   await getAdminData();
   await getGoods();
-  await getIndexs(1);
 });
 
-const handleSelectBlur = (value) => {
-  // 这里可以根据需求添加额外逻辑，比如验证输入值是否有效
-  // 目前直接将输入值同步到 v-model 绑定的值上
-  if (value) {
-    // 若选择的是商品名称
-    if (addConsume.value.productName === value) {
-      addConsume.value.productName = value;
-    } 
-    // 若选择的是指标名称
-    else if (indexs.value.name === value) {
-      indexs.value.name = value;
-    }
-  }
-};
 </script>
 
 <template>
 
   <div>
 
-
     <!-- 根据activeTab切换显示内容 -->
     <!-- 新增消耗的布局---------------------------------------------------------- -->
     <!-- <div v-if="activeTab === 'addConsume'"> -->
@@ -442,75 +387,60 @@ const handleSelectBlur = (value) => {
         class="form-style"
     >
       <el-form-item prop="jwcode" label="精网号">
+
         <el-input
             v-model="addConsume.jwcode"
             style="width: 220px"
-        @change="getUserGold(addConsume.jwcode)"
         />
         <el-button
             type="primary"
             @click="getUser(addConsume.jwcode)"
             style="margin-left: 20px"
-        >查询</el-button
+        >查询
+        </el-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"
-        @change="calculateCoins()"
+            @input="validateInput()"
+            @change="calculateCoins(addConsume.sumGold)"
         />
       </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
+              v-model="addConsume.permanentGold"
               disabled
-          v-model="addConsume.rechargeCoin"
               style="width: 100px; margin-left: -5px"
-        />
+          >
+            <template #default="scope">{{ scope.row.permanentGold }}</template>
+          </el-input>
           <p style="margin-right: 0px">个</p>
         </el-form-item>
         <el-form-item
@@ -520,20 +450,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,20 +475,23 @@ const handleSelectBlur = (value) => {
             type="textarea"
         />
       </el-form-item>
+
       <el-form-item prop="commitName" label="提交人">
         <el-input
             style="width: 300px"
-        :value="adminData.name"
+            :value="adminData.adminName"
             disabled
             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: 950px; float: right" class="customer-info">
       <el-form
           :model="user"
           label-width="auto"
@@ -573,12 +507,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 }}</p>
+
             </el-form-item>
           </el-col>
           <el-col :span="10">
@@ -590,57 +520,47 @@ 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 }}</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 }};免费金币:{{
+                  (user.nowFreeGold)
+                }};任务金币:{{ user.nowTaskGold }})</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>
 
   <!-- 金币消耗明细的布局------------------------------------------------------- -->
@@ -648,8 +568,10 @@ const handleSelectBlur = (value) => {
 
   <!-- </div>
   </div> -->
+
 </template>
 
+
 <style scoped>
 p {
   margin: 0px;

src/views/consume/beanConsume.vue

@@ -1,586 +1,4 @@
-<script setup>
-import { ref, onMounted, reactive, computed } from 'vue'
-import ElementPlus from 'element-plus'
-import { AiFillRead } from 'vue-icons-plus/ai'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import axios from 'axios'
-import request from '@/util/http'
-// 变量
-//这是获取用户信息的接口
-const adminData = ref({})
-const getAdminData = async function () {
-  try {
-    const result = await request({
-      url: '/admin/userinfo',
-      data: {}
-    })
-    adminData.value = result
-    console.log('请求成功', result)
-    console.log('用户信息', adminData.value)
-  } catch (error) {
-    console.log('请求失败', error)
-  }
-}
-// 充值明细表格
-const tableData = ref([])
-// 搜索======================================
-// 搜索detailVo
-const detailVo = ref({})
-// 搜索对象
-const getObj = ref({
-  pageNum: 1,
-  pageSize: 50
-})
-//分页总条目
-const total = ref(100)
-// 搜索对象时间
-const getTime = ref([])
-// 搜索活动列表
-const activity = ref([])
-// 所有信息
-const allData = ref([])
-// 搜索地区列表
-const area = ref([])
-
-//标签页默认高亮选项
-const activeName = ref('all')
-
-// 消费平台选项
-const consumePlatform = [
-  {
-    value: '4',
-    label: '金币系统'
-  },
-
-  {
-    value: '1',
-    label: 'Homily Chart'
-  },
-  {
-    value: '2',
-    label: 'Homily Link'
-  },
-  {
-    value: '3',
-    label: 'ERP系统'
-  }
-]
-
-// //表格高度
-// const tableHeight = computed(function () {
-//   return (getObj.value.pageSize + 1) * 41 + "px";
-// });
-// 方法
-// 合计数的显示数据
-const tableDataTotal = ref({})
-const rechargeCoin = ref(0)
-const freeCoin = ref(0)
-const taskCoin = ref(0)
-const totalCoin = ref(0)
-// 搜索=========================================================================================================================================================
-// 搜索方法
-const get = async function (val) {
-  try {
-    // 地区赋值
-    if (adminData.value.area != '总部') {
-      detailVo.value.area = adminData.value.area
-    }
-    // 搜索参数页码赋值
-    if (typeof val === 'number') {
-      getObj.value.pageNum = val
-    }
-    // 搜索参数时间赋值
-    if (getTime.value != null) {
-      if (getTime.value.startDate != '' && getTime.value.endDate != '') {
-        detailVo.value.startDate = getTime.value[0]
-        detailVo.value.endDate = getTime.value[1]
-      }
-    } else {
-      detailVo.value.startDate = ''
-      detailVo.value.endDate = ''
-    }
-    detailVo.value.sortField = sortField.value
-    detailVo.value.sortOrder = sortOrder.value
-    console.log('搜索参数', getObj.value)
-    // 发送POST请求
-    const result = await request({
-      url: '/consume/select',
-      data: {
-        ...getObj.value,
-        consumeDetail: { ...detailVo.value }
-      }
-    })
-    // 合计数的接口
-    // 复制一份 detail.value 并移除排序字段和排序方式
-    const detailWithoutSort = { ...detailVo.value }
-    delete detailWithoutSort.sortField
-    delete detailWithoutSort.sortOrder
-    const result2 = await request({
-      url: '/consume/SumConsume',
-      data: {
-        ...detailWithoutSort
-      }
-    })
-
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    console.log('请求成功2', result2)
-    // 存储表格数据
-    tableData.value = result.data.list
-    tableDataTotal.value = result2.data
-    if (result2.data == null) {
-      console.log('请求成功2', result2)
-      tableDataTotal.value = {
-        sumRcion: 0,
-        sumFcion: 0,
-        sumTcion: 0,
-        sumcion: 0
-      }
-    }
-
-    console.log('tableDataT', tableDataTotal)
-
-    // 修改为保留两位小数
-    rechargeCoin.value = parseFloat(
-      (tableDataTotal.value.sumRcion / 100).toFixed(2)
-    )
-    freeCoin.value = parseFloat(
-      (tableDataTotal.value.sumFcion / 100).toFixed(2)
-    )
-    taskCoin.value = parseFloat(
-      (tableDataTotal.value.sumTcion / 100).toFixed(2)
-    )
-    totalCoin.value = parseFloat(
-      (tableDataTotal.value.sumcion / 100).toFixed(2)
-    )
-    console.log('tableData', tableData.value)
-    // 存储分页总数
-    total.value = result.data.total
-    console.log('total', total.value)
-  } catch (error) {
-    console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-}
-// 搜索
-const search = function () {
-  getObj.value.pageNum = 1
-  get()
-}
-// 重置
-const reset = function () {
-  detailVo.value.productName = ''
-  detailVo.value.consumePlatform = ''
-  detailVo.value.consumeType = ''
-  detailVo.value.startDate = ''
-  detailVo.value.endDate = ''
-  sortField.value = ''
-  sortOrder.value = ''
-  getTime.value = {}
-}
-// 今天
-const getToday = function () {
-  const today = new Date()
-  const startDate = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate()
-  )
-  const endDate = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate() + 1
-  )
-  getTime.value = [startDate, endDate]
-  console.log('getTime', getTime.value)
-  get()
-}
-// 昨天
-const getYesterday = function () {
-  const yesterday = new Date()
-  yesterday.setDate(yesterday.getDate() - 1)
-  const startDate = new Date(
-    yesterday.getFullYear(),
-    yesterday.getMonth(),
-    yesterday.getDate()
-  )
-  const endDate = new Date(
-    yesterday.getFullYear(),
-    yesterday.getMonth(),
-    yesterday.getDate() + 1
-  )
-  getTime.value = [startDate, endDate]
-  console.log('getTime', getTime.value)
-  get()
-}
-// 近7天
-const get7Days = function () {
-  const today = new Date()
-  const startDate = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate() - 6
-  )
-  const endDate = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate() + 1
-  )
-  getTime.value = [startDate, endDate]
-  console.log('getTime', getTime.value)
-  get()
-}
-//点击标签页
-const handleClick = function (tab, event) {
-  if (tab.props.name === 'all') {
-    adminAll()
-  } else if (tab.props.name === 'wait') {
-    adminWait()
-  } else if (tab.props.name === 'pass') {
-    adminPass()
-  } else if (tab.props.name === 'reject') {
-    adminReject()
-  }
-}
-
-// 挂载
-onMounted(async function () {
-  await getAdminData()
-  await get()
-  // getActivity();
-  // await getArea();
-})
-
-// 验证跳转输入框的数字是否合法
-const checkNumber = function () {
-  if (typeof parseInt(getObj.value.pageNum) === 'number') {
-    console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
-    if (
-      getObj.value.pageNum > 0 &&
-      getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
-    ) {
-      getObj.value.pageNum = parseInt(getObj.value.pageNum)
-      console.log('输入的数字合法')
-      get()
-    } else {
-      //提示
-      ElMessage({
-        type: 'error',
-        message: '请检查输入内容'
-      })
-    }
-  } else {
-    //提示
-    ElMessage({
-      type: 'error',
-      message: '请检查输入内容'
-    })
-  }
-}
-// 查询商品的接口
-const goods = ref([])
-const getGoods = async function () {
-  try {
-    // 发送POST请求
-    const result = await request({
-      url: '/product/findProductName',
-      data: {}
-    })
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功product', result)
-    // 存储全部数据
-    goods.value = result.data
-    console.log('goods 数据', goods.value) // 修改日志输出
-  } catch (error) {
-    console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-}
-getGoods()
-
-// 新增排序字段和排序方式
-const sortField = ref('')
-const sortOrder = ref('')
-// 处理排序事件
-const handleSortChange = (column) => {
-  console.log('排序字段：', column.prop)
-  console.log('排序方式：', column.order)
-  if (column.prop === 'rechargeCoin') {
-    sortField.value = 'recharge_coin'
-  } else if (column.prop === 'taskCoin') {
-    sortField.value = 'task_coin'
-  } else if (column.prop === 'freeCoin') {
-    sortField.value = 'free_coin'
-  } else if (column.prop === 'createTime') {
-    sortField.value = 'create_time'
-  }
-  sortOrder.value = column.order === 'ascending' ? 'DESC' : 'ASC'
-  get()
-}
-const handlePageSizeChange = function (val) {
-  getObj.value.pageSize = val
-  get()
-}
-const handleCurrentChange = function (val) {
-  getObj.value.pageNum = val
-  get()
-}
-</script>
-
 <template> 
-  <el-row>
-    <el-col>
-      <el-card style="margin-bottom: 20px">
-        <el-row style="margin-bottom: 10px">
-          <el-col :span="8">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">商品名称：</el-text>
-              <el-select
-                v-model="detailVo.productName"
-                placeholder="请选择商品名称"
-                size="large"
-                style="width: 240px"
-                clearable
-              >
-                <!-- 修改 v-for 绑定逻辑 -->
-                <el-option
-                  v-for="(item, index) in goods"
-                  :key="index"
-                  :label="item"
-                  :value="item"
-                />
-              </el-select>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">消费平台：</el-text>
-              <el-select
-                v-model="detailVo.consumePlatform"
-                placeholder="请选择消费平台"
-                size="large"
-                style="width: 240px"
-                clearable
-              >
-                <el-option
-                  v-for="item in consumePlatform"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <!-- <div class="head-card-element">
-              <el-text class="mx-1" size="large">消费类型：</el-text>
-              <el-select
-                v-model="detailVo.consumeType"
-                placeholder="请选择消费类型"
-                size="large"
-                style="width: 240px"
-                clearable
-              >
-                <el-option
-                  v-for="item in consumeType"
-                  :key="item"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-            </div> -->
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="21">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">消费时间：</el-text>
-              <el-date-picker
-                v-model="getTime"
-                type="datetimerange"
-                range-separator="至"
-                start-placeholder="起始时间"
-                end-placeholder="结束时间"
-              />
-              <el-button style="margin-left: 10px" @click="getToday()"
-                >今</el-button
-              >
-              <el-button @click="getYesterday()">昨</el-button>
-              <el-button @click="get7Days()">近7天</el-button>
-            </div>
-          </el-col>
-          <el-col :span="3">
-            <div class="head-card-btn">
-              <el-button type="success" @click="reset()">重置</el-button>
-              <el-button type="primary" @click="search()">查询</el-button>
-            </div>
-          </el-col>
-        </el-row>
-      </el-card>
-    </el-col>
-  </el-row>
-  <el-row>
-    <el-col>
-      <el-card>
-        <div>
-          消费金币总数：{{ Math.abs(totalCoin) }}，永久金币：{{
-            Math.abs(rechargeCoin)
-          }}，免费金币：{{ Math.abs(freeCoin) }}，任务金币：{{
-            Math.abs(taskCoin)
-          }}
-        </div>
-        <!-- 设置表格容器的高度和滚动样式 -->
-        <div style="height: 576px; overflow-y: auto">
-          <el-table
-            :data="tableData"
-            style="width: 100%"
-            height="576px"
-            @sort-change="handleSortChange"
-          >
-            <el-table-column
-              type="index"
-              label="序号"
-              width="100px"
-              fixed="left"
-            >
-              <template #default="scope">
-                <span>{{
-                  scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
-                }}</span>
-              </template>
-            </el-table-column>
-            <!-- 固定姓名列 -->
-            <el-table-column
-              prop="username"
-              label="姓名"
-              width="150px"
-              fixed="left"
-            />
-            <!-- 固定精网号列 -->
-            <el-table-column
-              prop="jwcode"
-              label="精网号"
-              width="110px"
-              fixed="left"
-            />
-            <el-table-column prop="area" label="所属地区" width="110px" />
-            <el-table-column prop="productName" label="商品" width="160px" />
-            <el-table-column
-              prop="consumePlatform"
-              label="消费平台"
-              width="120px"
-            >
-              <template #default="scope">
-                <!-- 使用非严格相等比较 -->
-                <span v-if="scope.row.consumePlatform == 1">Homily Chart</span>
-                <span v-if="scope.row.consumePlatform == 2">Homily Link</span>
-                <span v-if="scope.row.consumePlatform == 3">ERP系统</span>
-                <span v-if="scope.row.consumePlatform == 4">金币系统</span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="consumeType"
-              label="消费类型"
-              width="120px"
-            />
-            <el-table-column
-              prop="rechargeTotal"
-              label="消费金币总数"
-              width="120px"
-            >
-              <template #default="scope">
-                {{
-                  (scope.row.taskCoin * -1 +
-                    scope.row.freeCoin * -1 +
-                    scope.row.rechargeCoin * -1) /
-                  100
-                }}
-              </template>
-            </el-table-column>
-
-            <el-table-column
-              prop="rechargeCoin"
-              label="永久金币"
-              sortable="“custom”"
-              width="110px"
-            >
-              <template #default="scope">
-                {{ (scope.row.rechargeCoin * -1) / 100 }}
 </template>
-            </el-table-column>
-            <el-table-column
-              prop="freeCoin"
-              label="免费金币"
-              sortable="“custom”"
-              width="110px"
-            >
-              <template #default="scope">
-                {{ (scope.row.freeCoin * -1) / 100 }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="taskCoin"
-              label="任务金币"
-              sortable="“custom”"
-              width="110px"
-            >
-              <template #default="scope">
-                {{ (scope.row.taskCoin * -1) / 100 }}
-              </template>
-            </el-table-column>
-
-            <el-table-column
-              prop="remark"
-              label="备注"
-              width="200px"
-              show-overflow-tooltip
-            />
-            <el-table-column prop="name" label="提交人" width="110px" />
-            <el-table-column
-              prop="createTime"
-              label="消费时间"
-              sortable="“custom”"
-              width="180px"
-            />
-          </el-table>
-        </div>
-
-        <!-- 分页 -->
-        <div class="pagination">
-          <el-pagination
-            background
-            :page-size="getObj.pageSize"
-            :page-sizes="[5, 10, 20, 50, 100]"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="total"
-            @size-change="handlePageSizeChange"
-            @current-change="handleCurrentChange"
-          ></el-pagination>
-        </div>
-      </el-card>
-    </el-col>
-  </el-row>
-</template>
-
-<style scoped>
-.status {
-  display: flex;
-}
-
-.head-card {
-  display: flex;
-}
-
-.head-card-element {
-  margin-right: 20px;
-}
-
-.head-card-btn {
-  margin-left: auto;
-}
-
-.pagination {
-  display: flex;
-  margin-top: 20px;
-}
-</style>
+<script>
+</script>

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'
-// 变量
+import API 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',
-    label: 'ERP系统'
+    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: '/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: '/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: '/consume/statsGold',
+      url: '/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()
-  }
+  ConsumeSelectBy()
 }
-
-// 挂载
-onMounted(async function () {
-  await getAdminData()
-  await get()
-  // getActivity();
-  await getArea();
-})
-
-// 验证跳转输入框的数字是否合法
-const checkNumber = function () {
-  if (typeof parseInt(getObj.value.pageNum) === 'number') {
-    console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
-    if (
-      getObj.value.pageNum > 0 &&
-      getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
-    ) {
-      getObj.value.pageNum = parseInt(getObj.value.pageNum)
-      console.log('输入的数字合法')
-      get()
-    } else {
-      //提示
-      ElMessage({
-        type: 'error',
-        message: '请检查输入内容'
-      })
-    }
-  } else {
-    //提示
-    ElMessage({
-      type: 'error',
-      message: '请检查输入内容'
-    })
-  }
-}
-// 查询商品的接口
-const goods = ref([])
+// 获取商品列表
 const getGoods = async function () {
   try {
     // 发送POST请求
     const result = await request({
-      url: '/product/findProductName',
+      url: '/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: '/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,70 @@ 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 exportExcel = async function () { 
+  const params = {
+    text:'',
+    deptid:'',
+    sort:1,
+    field:'',
+    page:getObj.pageNum,
+    size:getObj.pageSize
+  }
+  const res = await API({ url: '/export/exportConsume', data: params })
+  if (res.code === 200) { 
+    ElMessage.success('导出成功')
+  }
 }
 const handlePageSizeChange = function (val) {
   getObj.value.pageSize = val
-  get()
+  ConsumeSelectBy()
 }
+
 const handleCurrentChange = function (val) {
   getObj.value.pageNum = val
-  get()
+  ConsumeSelectBy()
 }
+/*
+====================计算属性=================================
+*/
+
+// 计算总金币数
+const sumGold = computed(() => permanentGolds.value + freeGolds.value + taskGolds.value)
+
+/*
+====================监听=================================
+*/
+
+/*
+====================挂载=================================
+*/
+
+
+onMounted(async function () {
+  await getAdminData()
+  await ConsumeSelectBy()
+  // getActivity();
+  await getMarket()
+  await getGoods()
+})
+
+
 </script>
 
 <template>
@@ -358,95 +431,39 @@ const handleCurrentChange = function (val) {
           <el-col :span="6">
             <div class="head-card-element">
               <el-text class="mx-1" size="large">商品名称：</el-text>
-              <el-select
-                v-model="detailVo.productName"
-                placeholder="请选择商品名称"
-                size="large"
-                style="width: 180px"
-                clearable
-              >
+              <el-select v-model="consumeUser.goodsName" placeholder="请选择商品名称" size="large" style="width: 180px"
+                clearable>
                 <!-- 修改 v-for 绑定逻辑 -->
-                <el-option
-                  v-for="(item, index) in goods"
-                  :key="index"
-                  :label="item"
-                  :value="item"
-                />
+                <el-option v-for="(item, index) in goods" :key="index" :label="item" :value="item" />
               </el-select>
             </div>
           </el-col>
           <el-col :span="6">
             <div class="head-card-element">
               <el-text class="mx-1" size="large">所属地区：</el-text>
-              <el-select
-                v-model="detailVo.area"
-                placeholder="请选择所属地区"
-                size="large"
-                style="width: 180px"
-                clearable
-              >
-                <el-option
-                  v-for="(item, index) in area"
-                  :key="index"
-                  :label="item"
-                  :value="item"
-                />
+              <el-select v-model="consumeUser.market" placeholder="请选择所属地区" size="large" style="width: 180px" clearable>
+                <el-option v-for="(item, index) in market" :key="index" :label="item" :value="item" />
               </el-select>
             </div>
           </el-col>
           <el-col :span="6">
             <div class="head-card-element">
               <el-text class="mx-1" size="large">消耗平台：</el-text>
-              <el-select
-                v-model="detailVo.consumePlatform"
-                placeholder="请选择消耗平台"
-                size="large"
-                style="width: 180px"
-                clearable
-              >
-                <el-option
-                  v-for="item in consumePlatform"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
+              <el-select v-model="consumeUser.payPlatform" placeholder="请选择消耗平台" size="large" style="width: 180px"
+                clearable>
+                <el-option v-for="item in consumePlatform" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
             </div>
           </el-col>
-          <!-- <el-col :span="8">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">消费类型：</el-text>
-              <el-select
-                v-model="detailVo.consumeType"
-                placeholder="请选择消费类型"
-                size="large"
-                style="width: 240px"
-                clearable
-              >
-                <el-option
-                  v-for="item in consumeType"
-                  :key="item"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-            </div>
-          </el-col> -->
         </el-row>
         <el-row>
           <el-col :span="21">
             <div class="head-card-element">
               <el-text class="mx-1" size="large">消费时间：</el-text>
-              <el-date-picker
-                v-model="getTime"
-                type="datetimerange"
-                range-separator="至"
-                start-placeholder="起始时间"
-                end-placeholder="结束时间"
-              />
-              <el-button style="margin-left: 10px" @click="getToday()"
-                >今</el-button
-              >
+              <el-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>
@@ -455,6 +472,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,26 +484,14 @@ 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">
-          <el-table
-            :data="tableData"
-            style="width: 100%"
-            height="576px"
-            @sort-change="handleSortChange"
-          >
-            <el-table-column
-              type="index"
-              label="序号"
-              width="100px"
-              fixed="left"
-            >
+          <el-table :data="tableData" style="width: 100%" height="576px" @sort-change="handleSortChange">
+            <el-table-column type="index" label="序号" width="100px" fixed="left">
               <template #default="scope">
                 <span>{{
                   scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
@@ -493,32 +499,17 @@ const handleCurrentChange = function (val) {
               </template>
             </el-table-column>
             <!-- 固定姓名列 -->
-            <el-table-column
-              prop="username"
-              label="姓名"
-              width="150px"
-              fixed="left"
-            />
+            <el-table-column prop="name" label="姓名" width="150px" fixed="left" />
             <!-- 固定精网号列 -->
-            <el-table-column
-              prop="jwcode"
-              label="精网号"
-              width="110px"
-              fixed="left"
-            />
-            <el-table-column prop="area" label="所属地区" width="110px" />
-            <el-table-column prop="productName" label="商品" width="160px" />
-            <el-table-column
-              prop="consumePlatform"
-              label="消费平台"
-              width="120px"
-            >
+            <el-table-column prop="jwcode" label="精网号" width="110px" fixed="left" />
+            <el-table-column prop="market" label="所属地区" width="110px" />
+            <el-table-column prop="goodsName" label="商品" width="160px" show-overflow-tooltip />
+            <el-table-column 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
@@ -526,79 +517,43 @@ const handleCurrentChange = function (val) {
               label="消费类型"
               width="120px"
             /> -->
-            <el-table-column
-              prop="rechargeTotal"
-              label="消费金币总数"
-              width="120px"
-            >
+            <el-table-column 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"
-              label="永久金币"
-              sortable="“custom”"
-              width="110px"
-            >
+            <el-table-column 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"
-              label="免费金币"
-              sortable="“custom”"
-              width="110px"
-            >
+            <el-table-column 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"
-              label="任务金币"
-              sortable="“custom”"
-              width="110px"
-            >
+            <el-table-column prop="taskGold" label="任务金币" sortable="“custom”" width="110px">
               <template #default="scope">
-                {{ (scope.row.taskCoin * -1) / 100 }}
+                {{ scope.row.taskGold / 100 }}
               </template>
             </el-table-column>
 
-            <el-table-column
-              prop="remark"
-              label="备注"
-              width="200px"
-              show-overflow-tooltip
-            />
-            <el-table-column prop="name" label="提交人" width="110px" />
-            <el-table-column
-              prop="createTime"
-              label="消费时间"
-              sortable="“custom”"
-              width="180px"
-            />
+            <el-table-column prop="remark" label="备注" width="200px" show-overflow-tooltip />
+            <el-table-column prop="adminName" label="提交人" width="110px" />
+            <el-table-column prop="createTime" label="消费时间" sortable="custom" width="180px" />
           </el-table>
         </div>
 
         <!-- 分页 -->
         <div class="pagination">
-          <el-pagination
-            background
-            :page-size="getObj.pageSize"
-            :page-sizes="[5, 10, 20, 50, 100]"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="total"
-            @size-change="handlePageSizeChange"
-            @current-change="handleCurrentChange"
-          ></el-pagination>
+          <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>

src/views/home.vue

@@ -0,0 +1,332 @@
+<script setup>
+// 导航栏在这
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import ElementPlus from 'element-plus'
+import { VscGlobe } from 'vue-icons-plus/vsc'
+import { ElMessage } from 'element-plus'
+import axios from 'axios'
+import API from '@/util/http'
+import dmmn from '../assets/blue.png'
+import { useRoute } from 'vue-router'
+import moment from 'moment'
+
+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: '/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()
+}
+
+// 导出列表数据
+const exportList = ref([])
+// 导出列表加载状态
+const exportListLoading = ref(false)
+
+// 获取导出列表
+const getExportList = async () => {
+  exportListLoading.value = true
+  try {
+    const result = await API({ url: '/export/export' })
+    if (result.code === 200) {
+      exportList.value = result.data
+    } else {
+      ElMessage.error(result.msg || '获取导出列表失败')
+    }
+  } catch (error) {
+    console.error('获取导出列表出错:', error)
+    ElMessage.error('获取导出列表失败，请稍后重试')
+  } finally {
+    exportListLoading.value = false
+  }
+}
+
+// 下载导出文件
+const downloadExportFile = (item) => {
+  if (item.state === 2) {
+    const link = document.createElement('a')
+    link.href = item.url
+    link.download = item.fileName
+    link.click()
+  } else {
+    ElMessage.warning('文件还在导出中，请稍后再试')
+  }
+}
+
+function logout() {
+  const machineId = localStorage.getItem('machineId')
+  localStorage.removeItem('token')
+  // localStorage.clear();
+  router.push('/login?machineId=' + machineId)
+  ElMessage.success('退出成功')
+}
+
+// 挂载
+onMounted(async function () {
+  // 获取用户信息
+  getAdminData()
+  // 初始化获取导出列表
+  await getExportList()
+})
+// 处理地区点击事件，直接在组件内更新当前地区，包老师改的，直接传参
+const changeDataByArea = (item) => {
+  currentArea.value = item
+}
+
+// 控制导出列表弹窗显示状态
+const exportListVisible = ref(false)
+
+// 打开导出列表弹窗
+const openExportList = () => {
+  getExportList()
+  exportListVisible.value = true
+}
+</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-menu :router="true" class="el-menu-vertical-demo">
+            <el-menu-item index="/workspace">
+              <el-icon>
+                <Folder />
+              </el-icon>
+              <span>工作台</span>
+            </el-menu-item>
+
+            <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>
+            <el-menu-item index="/rate">
+              <el-icon>
+                <Folder />
+              </el-icon>
+              <span>汇率管理</span>
+            </el-menu-item>
+            <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>
+            <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>
+            <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>
+            <el-menu-item index="/usergold">
+              <el-icon>
+                <Folder />
+              </el-icon>
+              <span>客户账户明细</span>
+            </el-menu-item>
+            <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-menu-item index="1-3" @click="openExportList">查看下载列表</el-menu-item>
+            </el-sub-menu>
+          </el-menu>
+        </el-header>
+        <el-main style="margin-top: 60px">
+          <!-- 60px 是 el-header 的大致高度，可根据实际情况调整 -->
+          <router-view></router-view>
+        </el-main>
+      </el-container>
+    </el-container>
+    <!-- 查看个人信息 -->
+    <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.adminName }}</span>
+        </el-form-item>
+        <el-form-item label="精网号" label-width="100px" label-position="left">
+          <span class="message-font">{{ adminData.account }}</span>
+        </el-form-item>
+        <el-form-item label="地区" label-width="100px" label-position="left">
+          <span class="message-font">{{ adminData.market }}</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>
+
+    <!-- 导出列表弹窗 -->
+    <el-dialog v-model="exportListVisible" title="导出列表" width="80%">
+      <el-table :data="exportList" style="width: 100%" :loading="exportListLoading">
+        <el-table-column prop="fileName" label="文件名" />
+        <el-table-column prop="state" label="状态">
+          <template #default="scope">
+            <el-tag :type="scope.row.state === 2 ? 'success' : 'warning'">
+              {{ scope.row.state === 2 ? '已完成' : '处理中' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间">
+          <template #default="scope">
+            {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template #default="scope">
+            <el-button type="primary" size="small" @click="downloadExportFile(scope.row)"
+              :disabled="scope.row.state !== 2">
+              下载
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button text @click="exportListVisible = false">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</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

@@ -1,296 +0,0 @@
-<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: '/recharge/user/search', 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">
-          <el-menu-item
-          index="/workspace"
-          v-if="
-            adminData.permission == 1 ||
-            adminData.permission == 2 ||
-            adminData.permission == 3 ||
-            adminData.permission == 5
-          ">
-            <el-icon><Folder /></el-icon>
-            <span>工作台</span>
-          </el-menu-item>
-
-          <el-sub-menu index="2" v-if="
-            adminData.permission == 1 ||
-            adminData.permission == 3 ||
-            adminData.permission == 5
-          ">
-            <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>
-
-          <el-menu-item
-          index="/rate"
-          v-if="
-            adminData.permission == 1 ||
-            adminData.permission == 2 ||
-            adminData.permission == 3 ||
-            adminData.permission == 5
-          ">
-            <el-icon><Folder /></el-icon>
-            <span>汇率管理</span>
-          </el-menu-item>
-
-          <el-sub-menu index="4" v-if="
-            adminData.permission == 1 ||
-            adminData.permission == 2 ||
-            adminData.permission == 5
-          ">
-            <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>
-
-          <el-sub-menu index="6" v-if="
-            adminData.permission == 1 ||
-            adminData.permission == 2 ||
-            adminData.permission == 5
-          ">
-            <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>
-
-          <el-sub-menu index="8" v-if="
-            adminData.permission == 1 ||
-            adminData.permission == 2 ||
-            adminData.permission == 5
-          ">
-            <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>
-          <el-menu-item index="/usergold" v-if="
-            adminData.permission == 1 ||
-            adminData.permission == 2 ||
-            adminData.permission == 3 ||
-            adminData.permission == 5
-          ">
-            <el-icon><Folder /></el-icon>
-            <span>客户账户明细</span>
-          </el-menu-item>
-
-          <el-menu-item index="/permissions" v-if="adminData.permission == 1">
-            <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/login.vue

@@ -6,32 +6,25 @@ import request from '@/util/http'
 import { useRouter } from 'vue-router'
 import { VscGlobe } from 'vue-icons-plus/vsc'
 
+const router = useRouter() // 获取路由实例
 //获取当前浏览器地址
 var url = window.location.href //上传服务器时打开注释并注释掉下一行
-//截取machineId=后的字符串
-var machineId = null
-// 从浏览器地址获取machineId的方法
+var machineId1 = ref(null)
+// 获取machineId
 function getMachineId() {
   var parts = url.split('machineId=')
   if (parts.length > 1) {
-    machineId = parts[1].split('&')[0] // 进一步截取 & 之前的字符串
+    machineId1 = parts[1].split('&')[0] // 进一步截取 & 之前的字符串
   }
-  // machineId = decodeURIComponent(machineId); //如果machineId需要前端转码可以打开注释
-  console.log('MachineId字符串:', machineId) // 输出 machineId 的值
+  // machineId1 = decodeURIComponent(machineId1); //如果machineId需要前端转码可以打开注释
+  console.log('机器码获取到了吗:', machineId1)
+  form.value.machineId = machineId1
+  if (machineId1) {
       // 将 machineId 存储到本地存储中
-  if (machineId) {
-    localStorage.setItem('machineId', machineId)
+    localStorage.setItem('machineId', machineId1)
   }
 }
-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 })
+const form = ref({ account: null, password: '', token: '', machineId: machineId1.value })
 //调用方法
 const login = async function () {
   try {
@@ -39,92 +32,65 @@ const login = async function () {
       url: '/admin/login',
       data: form.value
     })
-    console.log('resultresult', result)
+    console.log('看看传给后端的参数', form.value)
     if (result.code == 200) {
       localStorage.setItem('token', result.msg)
-      localStorage.setItem('permission', result.data.permission)
-      if (
-        result.data.permission == '5' ||
-        result.data.permission == '1' ||
-        result.data.permission == '2' ||
-        result.data.permission == '3'
-      ) {
+      // localStorage.setItem('permission', result.data.permission)
       router.push('/workspace')
-      } else if (result.data.permission == '4') {
-        router.push('/noPermission')
-      }
       ElMessage.success('登录成功')
       console.log('请求成功', result)
     } else {
       form.value.password = ''
-      form.value.jwcode = ''
+      form.value.account = ''
       ElMessage.error(result.msg)
     }
   } catch (error) {
     console.log('请求失败', error)
     ElMessage.error('登录失败，请检查账号密码')
-    // 在这里可以处理错误逻辑，比如显示错误提示等
+
   }
 }
 
+onMounted(() => { 
+  getMachineId()
+})
 
 </script>
 <template>
   <el-row class="login-page">
-    <img
-      :span="12"
-      src="../assets/background.jpg"
-      alt="logo"
-      class="bg"
-      fit="fit"
-    />
-    <!-- <div style="height: 100vh; width: 1000px" class="container"></div> -->
+    <img :span="12" src="../assets/background.jpg" alt="logo" class="bg" fit="fit" />
     <el-col :span="6" :offset="3" class="form">
       <!-- 登录表单 -->
       <el-form :model="form" size="large" autocomplete="off" >
         <el-form-item>
           <h1 style="color: #409eff">金币系统登录</h1>
         </el-form-item>
-        <el-form-item prop="jwcode">
-          <el-input v-model="form.jwcode" placeholder="请输入精网号" @keyup.enter="login"></el-input>
+        <el-form-item prop="account" required>
+          <el-input v-model="form.account" placeholder="请输入账号" @keyup.enter="login" required></el-input>
         </el-form-item>
-        <el-form-item prop="password" @keyup.enter="login">
+        <el-form-item prop="password" @keyup.enter="login" required>
           <el-input
             v-model="form.password"
             type="password"
             placeholder="请输入密码"
+            required
           />
         </el-form-item>
         <el-form-item class="flex"> </el-form-item>
         <!-- 登录按钮 -->
         <el-form-item>
           <button type="button" class="button" @click="login()">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              height="30"
-              width="24"
-            >
-              <path
-                fill="white"
-                d="M23.15 2.587L18.21 0.210001C17.9308 0.075557 17.6167 0.031246 17.3113 0.083204C17.0058 0.135162 16.724 0.280818 16.505 0.500001L7.04499 9.13L2.92499 6.002C2.73912 5.86101 2.50976 5.78953 2.27669 5.79994C2.04363 5.81035 1.82156 5.902 1.64899 6.059L0.326993 7.261C0.223973 7.35465 0.141644 7.46878 0.0852761 7.59608C0.0289081 7.72339 -0.00025659 7.86106 -0.000350724 8.00028C-0.000444857 8.1395 0.0285336 8.27721 0.0847294 8.40459C0.140925 8.53197 0.2231 8.64621 0.325993 8.74L3.89899 12L0.325993 15.26C0.2231 15.3538 0.140925 15.468 0.0847294 15.5954C0.0285336 15.7228 -0.000444857 15.8605 -0.000350724 15.9997C-0.00025659 16.1389 0.0289081 16.2766 0.0852761 16.4039C0.141644 16.5312 0.223973 16.6454 0.326993 16.739L1.64999 17.94C1.82256 18.097 2.04463 18.1887 2.27769 18.1991C2.51076 18.2095 2.74012 18.138 2.92599 17.997L7.04599 14.869L16.506 23.499C16.7248 23.7182 17.0064 23.8639 17.3117 23.9159C17.6171 23.9679 17.931 23.9235 18.21 23.789L23.152 21.412C23.4062 21.2893 23.6207 21.0973 23.7707 20.8581C23.9207 20.619 24.0002 20.3423 24 20.06V3.939C24 3.65647 23.9203 3.37967 23.7699 3.14048C23.6195 2.90129 23.4046 2.70943 23.15 2.587ZM18.004 17.448L10.826 12L18.004 6.552V17.448Z"
-              ></path>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="30" width="24">
+              <path fill="white" d="M23.15 2.587L18.21 0.210001C17.9308 0.075557 17.6167 0.031246 17.3113 0.083204C17.0058 0.135162 16.724 0.280818 16.505 0.500001L7.04499 9.13L2.92499 6.002C2.73912 5.86101 2.50976 5.78953 2.27669 5.79994C2.04363 5.81035 1.82156 5.902 1.64899 6.059L0.326993 7.261C0.223973 7.35465 0.141644 7.46878 0.0852761 7.59608C0.0289081 7.72339 -0.00025659 7.86106 -0.000350724 8.00028C-0.000444857 8.1395 0.0285336 8.27721 0.0847294 8.40459C0.140925 8.53197 0.2231 8.64621 0.325993 8.74L3.89899 12L0.325993 15.26C0.2231 15.3538 0.140925 15.468 0.0847294 15.5954C0.0285336 15.7228 -0.000444857 15.8605 -0.000350724 15.9997C-0.00025659 16.1389 0.0289081 16.2766 0.0852761 16.4039C0.141644 16.5312 0.223973 16.6454 0.326993 16.739L1.64999 17.94C1.82256 18.097 2.04463 18.1887 2.27769 18.1991C2.51076 18.2095 2.74012 18.138 2.92599 17.997L7.04599 14.869L16.506 23.499C16.7248 23.7182 17.0064 23.8639 17.3117 23.9159C17.6171 23.9679 17.931 23.9235 18.21 23.789L23.152 21.412C23.4062 21.2893 23.6207 21.0973 23.7707 20.8581C23.9207 20.619 24.0002 20.3423 24 20.06V3.939C24 3.65647 23.9203 3.37967 23.7699 3.14048C23.6195 2.90129 23.4046 2.70943 23.15 2.587ZM18.004 17.448L10.826 12L18.004 6.552V17.448Z"></path>
             </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 +167,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%;
@@ -225,19 +176,3 @@ More comprehensive version at shenanigans.shoghisimon.ca/collection/css
   background-size: 100% 2px, 100% 100%, 100% 100%;
 }
 </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/permissions/index.vue

@@ -1,909 +0,0 @@
-<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)
-// 搜索detailY
-const admin = ref({})
-// 搜索对象
-const getObj = ref({
-  pageNum: 1,
-  pageSize: 10
-})
-// 新增用户权限弹窗
-const permissionAddVisible = ref(false)
-// 编辑用户权限弹窗
-const permissionEditVisible = ref(false)
-//选地区
-const area = ref([])
-// 选部门
-const store = ref([])
-// 新增用户权限对象
-const permissionAddObj = ref({})
-// 新增用户权限对象
-const addAdmin = ref({})
-// 编辑用户权限对象
-const permissionEditObj = ref({})
-// 删除权限对象
-const delObj = ref({})
-
-// 搜索接口
-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.jwcode) {
-    admin.value.jwcode = admin.value.jwcode.replace(/\s/g, ''); 
-  }
-}  
-// 搜索
-const search = function () {
-  trimJwCode();
-  getObj.value.pageNum = 1
-  get()
-}
-// 重置
-const reset = function () {
-  admin.value = {}
-}
-
-// 获取地区
-const getArea = async function () {
-  try {
-    const result = await request({
-      url: '/admin/area',
-      data: {}
-    })
-    area.value = result.data
-  } catch (error) {
-    console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-}
-// 获取部门
-const getStore = async function () {
-  try {
-    const result = await request({
-      url: '/admin/store',
-      data: {}
-    })
-    store.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 () {
-  permissionAddVisible.value = false
-}
-// 新增用户权限初始化
-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.jwcode == "" ||
-//       permissionAddObj.value.jwcode == 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({
-  jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }],
-  name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
-  store: [{ required: true, message: '请输入职称', trigger: 'blur' }],
-  machineId: [{ required: true, message: '请输入精网号', trigger: 'blur' }],
-  area: [{ 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('地区', area.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.jwcode = row.jwcode
-  permissionEditObj.value.name = row.name
-  permissionEditObj.value.area = row.area
-  permissionEditObj.value.store = row.store
-  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.jwcode = row.jwcode
-}
-// 删除权限
-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.jwcode = row.jwcode
-    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">精网号：</el-text>
-            <el-input
-              v-model="admin.jwcode"
-              style="width: 240px"
-              placeholder="请输入精网号"
-              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.area"
-              placeholder="请选择所属地区"
-              style="width: 240px"
-              clearable
-            >
-              <el-option
-                v-for="item in area"
-                :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.store"
-              placeholder="请选择职位名称"
-              style="width: 240px"
-              clearable
-            >
-              <el-option
-                v-for="item in store"
-                :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="jwcode" label="精网号" />
-            <el-table-column prop="name" label="姓名" />
-            <el-table-column prop="area" label="所属地区" />
-            <el-table-column prop="store" 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="jwcode" label="精网号:">
-          <el-input
-            v-model="addAdmin.jwcode"
-            placeholder="请输入精网号"
-            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="area" label="所属地区:">
-          <el-select
-            v-model="addAdmin.area"
-            placeholder="请选择所属地区"
-            style="width: 220px"
-            @change="() => Ref.value.validateField('area')"
-          >
-            <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="store" label="职位:">
-          <el-input
-            v-model="addAdmin.store"
-            placeholder="请输入职称"
-            style="width: 220px"
-          />
-        </el-form-item>
-        <el-form-item prop="machineId" label="机器码:">
-          <el-input
-            v-model="addAdmin.machineId"
-            placeholder="请输入机器码"
-            style="width: 220px"
-          />
-        </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.jwcode"
-        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.jwcode }}
-      </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.area }}
-      </el-descriptions-item>
-      <el-descriptions-item>
-        <template #label>
-          <div class="permissionVisible">
-            <el-icon>
-              <OfficeBuilding />
-            </el-icon>
-            部门
-          </div>
-        </template>
-        {{ permissionAddObj.store }}
-      </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.jwcode }}
-      </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.area }}
-      </el-descriptions-item>
-      <el-descriptions-item>
-        <template #label>
-          <div class="permissionVisible">
-            <el-icon>
-              <OfficeBuilding />
-            </el-icon>
-            部门
-          </div>
-        </template>
-        {{ permissionEditObj.store }}
-      </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/permissions/permission.vue

@@ -0,0 +1,614 @@
+<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 { 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({
+  account: '',
+  market: '',
+  postiton: ''
+})
+// 搜索对象
+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 () {  //  为啥>=1？？？？？？？？？？？？？？
+  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,admin.value)
+    // 发送POST请求
+    const result = await request({
+      url: '/permission/getPermission',
+      data: {
+        ...getObj.value,
+        permission: {
+          ...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: '/permission/getmarket',
+      data: {}
+    })
+    market.value = result.data
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// 获取部门
+const getStore = async function () {
+  try {
+    const result = await request({
+      url: '/permission/getposition',
+      data: {}
+    })
+    postiton.value = result.data
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+
+// 打开新增用户权限弹窗
+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 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: '/permission/addPermission',
+          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: '请检查输入内容'
+      })
+    }
+  })
+}
+// 表单验证ref
+const Ref = ref(null)
+// 使用 _.throttle 并设置 trailing 为 false 实现严格节流，只执行一次
+const throttledPermissionAdd = _.throttle(permissionAdd, 5000, {
+  trailing: false
+})
+// 权限类别
+const permissionList = [
+  {
+    label: '管理员',
+    value: '1'
+  },
+  {
+    label: '总部财务',
+    value: '2'
+  },
+  {
+    label: '总部客服',
+    value: '3'
+  },
+  {
+    label: '地区负责人',
+    value: '4'
+  },
+  {
+    label: '地区财务',
+    value: '5'
+  },
+  {
+    label: '客服专员',
+    value: '6'
+  }
+]
+
+// 打开编辑用户权限弹窗
+const openPermissionEditVisible = function () {
+  permissionEditVisible.value = true
+}
+// 关闭编辑用户权限弹窗
+const closePermissionEditVisible = function () {
+  permissionEditVisible.value = false
+}
+// 编辑用户权限初始化
+const permissionEditInit = function (row) {
+  permissionEditObj.value = {}
+  permissionEditObj.value.id = row.id
+  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
+  permissionEditObj.value.roleId = row.roleId
+  console.log('编辑用户权限', permissionEditObj.value)
+  openPermissionEditVisible()
+}
+// 编辑用户权限提交
+const permissionEdit = async function () {
+  try {
+    const result = await request({
+      url: '/permission/updateAdminRole',
+      data: permissionEditObj.value
+    })
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功3', 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
+  delObj.value.id = row.id
+}
+// 删除权限
+const delConfirm = async function () {
+  try {
+    const result = await request({
+      url: '/permission/deleteAdmin',
+      data: delObj.value
+    })
+    console.log('看看删除对象', delObj.value)
+    console.log('请求成功1', 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.id = row.id
+    permissionEditObj.value.account = row.account
+    permissionEditObj.value.adminStatus = row.adminStatus
+    console.log('修改用户权限状态', permissionEditObj.value)
+
+    const result = await request({
+      url: '/permission/upadatePermission',
+      data: permissionEditObj.value
+    })
+
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功2', result)
+
+    ElMessage.success(
+      permissionEditObj.value.adminStatus == 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="roleName" label="部门权限">
+            </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.adminStatus === 0">
+                  修改权限
+                </el-button>
+                <el-popconfirm title="确定将此用户删除吗？" @confirm="delConfirm">
+                  <template #reference>
+                    <el-button type="danger" text @click="del(scope.row)" :disabled="scope.row.adminStatus === 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="adminStatus" label="状态">
+              <template #default="scope">
+                <el-switch v-model="scope.row.adminStatus" :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" :model="addAdmin" label-width="auto" style="max-width: 600px; align-items: center">
+        <el-form-item prop="account" label="OA号:" required>
+          <el-input v-model="addAdmin.account" placeholder="请输入OA号" style="width: 220px" />
+        </el-form-item>
+
+        <el-form-item prop="name" label="用户名:" required>
+          <el-input v-model="addAdmin.name" placeholder="请输入用户名" style="width: 220px" />
+        </el-form-item>
+
+        <el-form-item prop="market" label="所属地区:"   required>
+          <el-select v-model="addAdmin.market" placeholder="请选择所属地区" style="width: 220px"
+            @change="() => Ref.value.validateField('market')">
+            <el-option v-for="item in market" :key="item" :label="item" :value="item" />
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="permission" label="权限类别:" required>
+          <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="职位:" required>
+          <el-input v-model="addAdmin.postiton" placeholder="请输入职称" style="width: 220px" />
+        </el-form-item>
+        <el-form-item prop="machineId" label="机器码:" required>
+          <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="permissionEditVisible" title="编辑用户权限" width="800px" :close-on-click-modal="false">
+    <el-descriptions class="margin-top" :column="2" 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>
+              <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.roleId">
+        <el-radio value="1" border>管理员</el-radio>
+        <el-radio value="2" border>总部财务</el-radio>
+        <el-radio value="3" border>总部客服</el-radio>
+        <el-radio value="4" border>地区负责人</el-radio>
+        <el-radio value="5" border>地区财务</el-radio>
+        <el-radio value="6" 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,695 @@
+<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'
+// 定义 fixedAdminId
+// const fixedAdminId = 1;
+
+// 精网号去空格
+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.id
+    recharge.value.market = adminData.value.market
+    console.log('请求成功', result)
+    console.log('用户信息', user.value)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+
+// 这是添加充值信息的表单
+const recharge = ref({
+  jwcode: '', // jwcode 字段
+  activity: '', // activity 字段
+  voucher: '',
+  rechargeWay: '客服充值',
+  freeGold: '',
+  money: null,
+  permanentGold: '',
+  Rate: null,
+  rateId: null,
+  payModel: '', // payModel 字段
+  payTime: null, // payTime 字段
+  remark: '', // remark 字段
+  rechargeRatio: ''
+})
+// 这是添加充值信息的接口
+const add = async function () {
+  try {
+
+    const formattedRecharge = { ...recharge.value}
+
+     // 将永久金币数、免费金币数和充值金额数乘以 100
+    if (formattedRecharge.permanentGold) {
+      formattedRecharge.permanentGold = Number(formattedRecharge.permanentGold) * 100;
+    }
+    if (formattedRecharge.freeGold) {
+      formattedRecharge.freeGold = Number(formattedRecharge.freeGold) * 100;
+    }
+    if (formattedRecharge.money) {
+      formattedRecharge.money = Number(formattedRecharge.money) * 100;
+    }
+
+    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: '/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.id
+    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: '/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: '/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: '其他(各地区电子支付)'
+  }
+]
+
+
+// }
+function handleActivityChange(value) {
+  // 在这里执行你的逻辑，例如获取选中的值
+  console.log('选中的值：', value)
+  getActivityById(value)
+  console.log('看看', recharge.value)
+}
+
+//这是重置重置表单的方法
+const deleteRecharge = function () {
+  recharge.value = {
+    adminId: adminData.value.id,
+    //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="activity" label="活动名称">
+      <el-input
+        v-model="recharge.activity"
+        placeholder="请输入活动名称"
+        style="width: 300px"
+      />
+    </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 ) /100 }}
+            </p>
+            <span
+              style="display: inline; white-space: nowrap; color: #b1b1b1"
+              v-if="user.historyPermanentGold !== undefined"
+              >(永久金币:{{ user.historyPermanentGold /100 }};免费金币:{{
+                (user.historyFreeGold) /100
+              }};任务金币:{{ user.historyTaskGold /100}})</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) /100
+              }}</span
+            >
+            <span
+              style="display: inline; white-space: nowrap; color: #b1b1b1"
+              v-if="user.nowPermanentGold !== undefined"
+              >(永久金币:{{ 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.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

@@ -1,796 +1,4 @@
-<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
-    rechargeVo.value.adminId = adminData.value.adminId
-    console.log('请求成功', result)
-    console.log('用户信息', adminData.value)
-  } catch (error) {
-    console.log('请求失败', error)
-  }
-}
-// 变量
-// 充值明细表格
-const tableData = ref([])
-// 搜索===========================================
-// 搜索recharge
-const rechargeVo = ref({
-  adminId: adminData.value.adminId
-})
-// 搜索对象
-const getObj = ref({
-  pageNum: 1,
-  pageSize: 50
-})
-//分页总条目
-const total = ref(100)
-// 搜索对象时间
-const getTime = ref([])
-// 搜索活动列表
-const activity = ref([])
-// 所有信息
-const allData = ref([])
-// 搜索地区列表
-const area = ref([])
-//标签页默认高亮选项
-const activeName = ref('all')
-// 支付方式选项
-const payWay = [
-  {
-    value: '微信',
-    label: '微信'
-  },
-  {
-    value: '支付宝',
-    label: '支付宝'
-  },
-  {
-    value: '银联',
-    label: '银联'
-  },
-  {
-    value: '信用卡',
-    label: '信用卡'
-  },
-  {
-    value: '借记卡',
-    label: '借记卡'
-  },
-  {
-    value: '现金充值',
-    label: '现金充值'
-  }
-]
-// 删除==========================================================
-// 删除对象
-const delObj = ref({})
-
-// //表格高度
-// const tableHeight = computed(function () {
-//   return (getObj.value.pageSize + 2) * 60 + "px";
-// });
-
-// 方法
-// 合计数存储
-const trueGold = ref(0)
-const trueRGold = ref(0)
-const trueFGold = ref(0)
-//全部
-const totalmoney = ref(0)
-const totalRcoin = ref(0)
-const totalFcoin = ref(0)
-//待审核
-const pendingGold = ref(0)
-const pendingRGold = ref(0)
-const pendingFGold = ref(0)
-// 已通过金币数
-const approvedGold = ref(0)
-const approvedRGold = ref(0)
-const approvedFGold = ref(0)
-// 已驳回金币数
-const rejectedGold = ref(0)
-const rejectedRGold = ref(0)
-const rejectedFGold = ref(0)
-// 搜索===========================================================================
-// 搜索方法
-const get = async function (val) {
-  try {
-    // 地区赋值
-    if (adminData.value.area === '泰国') {
-      rechargeVo.value.areas = ['泰国', '越南']
-    } else if (adminData.value.area !== '总部') {
-      rechargeVo.value.area = adminData.value.area
-    }
-
-    // 搜索参数页码赋值
-    if (typeof val === 'number') {
-      getObj.value.pageNum = val
-    }
-    // 搜索参数时间赋值
-    if (getTime.value != null) {
-      if (getTime.value.startDate != '' && getTime.value.endDate != '') {
-        rechargeVo.value.startDate = getTime.value[0]
-        rechargeVo.value.endDate = getTime.value[1]
-      }
-    } else {
-      rechargeVo.value.startDate = ''
-      rechargeVo.value.endDate = ''
-    }
-    // 搜索参数赋值
-    rechargeVo.value.sortField = sortField.value
-    rechargeVo.value.sortOrder = sortOrder.value
-    console.log('搜索参数', getObj.value)
-    // 发送POST请求
-    const result = await API({
-      url: '/recharge/recharge',
-      data: { ...getObj.value, rechargeVo: { ...rechargeVo.value } }
-    })
-    // 复制一份 rechargeVo.value 并移除排序字段和排序方式
-    const detailWithoutSort = ref({
-      area: rechargeVo.value.area,
-      adminId: rechargeVo.value.adminId,
-      startDate: rechargeVo.value.startDate,
-      endDate: rechargeVo.value.endDate
-    })
-    const result2 = await API({
-      url: '/recharge/recharge/RechargeA',
-      data: {
-        ...detailWithoutSort.value
-      }
-    })
-    // 检查 result2 是否为空
-    if (!result2 || !result2.data || result2.data.length === 0) {
-      totalmoney.value = 0
-      totalRcoin.value = 0
-      totalFcoin.value = 0
-    }
-    if (result2.data) {
-      result2.data.forEach((item) => {
-        switch (item.auditStatus) {
-          case '待审核':
-            // 若 item.raudit 为空则赋值为 0
-            // 若 item.sumRaudit 为空则赋值为 0
-            pendingGold.value = item.sumRaudit || 0
-            pendingRGold.value = item.sumRaudit1 || 0
-            pendingFGold.value = item.sumRaudit2 || 0
-            break
-          case '已通过':
-            approvedGold.value = item.sumRaudit || 0
-            approvedRGold.value = item.sumRaudit1 || 0
-            approvedFGold.value = item.sumRaudit2 || 0
-            break
-          case '已驳回':
-            rejectedGold.value = item.sumRaudit || 0
-            rejectedRGold.value = item.sumRaudit1 || 0
-            rejectedFGold.value = item.sumRaudit2 || 0
-            break
-        }
-      })
-    }
-    trueGold.value = pendingGold.value + approvedGold.value + rejectedGold.value
-    trueRGold.value =
-      pendingRGold.value + approvedRGold.value + rejectedRGold.value
-    trueFGold.value =
-      pendingFGold.value + approvedFGold.value + rejectedFGold.value
-
-    // 将响应结果存储到响应式数据中
-    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 rechargeVo.value.activityId
-  delete rechargeVo.value.payWay
-  delete rechargeVo.value.area
-  delete rechargeVo.value.startDate
-  delete rechargeVo.value.endDate
-  delete sortField.value
-  delete sortOrder.value
-  getTime.value = {}
-}
-// 今天
-const getToday = function () {
-  const today = new Date()
-  const startDate = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate()
-  )
-  const endDate = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate() + 1
-  )
-  getTime.value = [startDate, endDate]
-  console.log('getTime', getTime.value)
-  get()
-}
-const handlePageSizeChange = function (val) {
-  getObj.value.pageSize = val
-  get()
-}
-const handleCurrentChange = function (val) {
-  getObj.value.pageNum = val
-  get()
-}
-// 昨天
-const getYesterday = function () {
-  const yesterday = new Date()
-  yesterday.setDate(yesterday.getDate() - 1)
-  const startDate = new Date(
-    yesterday.getFullYear(),
-    yesterday.getMonth(),
-    yesterday.getDate()
-  )
-  const endDate = new Date(
-    yesterday.getFullYear(),
-    yesterday.getMonth(),
-    yesterday.getDate() + 1
-  )
-  getTime.value = [startDate, endDate]
-  console.log('getTime', getTime.value)
-  get()
-}
-// 近7天
-const get7Days = function () {
-  const today = new Date()
-  const startDate = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate() - 6
-  )
-  const endDate = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate() + 1
-  )
-  getTime.value = [startDate, endDate]
-  console.log('getTime', getTime.value)
-  get()
-}
-//全部充值明细
-const adminAll = function () {
-  console.log('adminAll')
-  rechargeVo.value.status = ''
-  getObj.value.pageNum = 1
-  get()
-}
-//待审核充值明细
-const adminWait = async function () {
-  rechargeVo.value.status = 0
-  getObj.value.pageNum = 1
-  await get()
-  console.log('adminWait')
-
-  trueGold.value = pendingGold.value
-  trueRGold.value = pendingRGold.value
-  trueFGold.value = pendingFGold.value
-}
-//已通过充值明细
-const adminPass = async function () {
-  rechargeVo.value.status = 1
-  getObj.value.pageNum = 1
-  await get()
-  trueGold.value = approvedGold.value
-  trueRGold.value = approvedRGold.value
-  trueFGold.value = approvedFGold.value
-  console.log('adminPass')
-}
-//已驳回充值明细
-const adminReject = async function () {
-  rechargeVo.value.status = 2
-  getObj.value.pageNum = 1
-  await get()
-  console.log('adminReject')
-  trueGold.value = rejectedGold.value
-  trueRGold.value = rejectedRGold.value
-  trueFGold.value = rejectedFGold.value
-}
-//点击标签页
-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 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: 'recharge/user/search', data: {} })
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    // 存储地区信息
-    area.value = result.data
-    console.log('地区', area.value)
-  } catch (error) {
-    console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-}
-// 删除=================================
-// 点击删除按钮
-const del = function (row) {
-  delObj.value.rechargeId = row.rechargeId
-  console.log('delObj1', delObj.value)
-}
-// 确认删除按钮
-const delConfirm = async function () {
-  try {
-    console.log('delObj2', delObj.value)
-    const result = await API({
-      url: '/recharge/recharge/edit',
-      data: delObj.value
-    })
-    console.log('删除成功', result)
-    // 刷新表格数据
-    get()
-  } catch (error) {
-    console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-}
-
-// 验证跳转输入框的数字是否合法
-const checkNumber = function () {
-  if (typeof 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()
-})
-// 新增排序字段和排序方式
-const sortField = ref('')
-const sortOrder = ref('')
-// 处理排序事件
-const handleSortChange = (column) => {
-
-  console.log('排序字段：', column.prop)
-  console.log('排序方式：', column.order)
-  if (column.prop === 'paidGold') {
-    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">
-        <el-row style="margin-bottom: 10px">
-          <el-col :span="8">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">活动名称：</el-text>
-              <el-select
-                v-model="rechargeVo.activityId"
-                placeholder="请选择活动名称"
-                size="large"
-                style="width: 240px"
-                clearable
-              >
-                <el-option
-                  v-for="item in activity"
-                  :key="item.activityId"
-                  :label="item.activityName"
-                  :value="item.activityId"
-                />
-              </el-select>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <!-- <div class="head-card-element">
-              <el-text class="mx-1" size="large">支付方式：</el-text>
-              <el-select
-                v-model="rechargeVo.payWay"
-                placeholder="请选择支付方式"
-                size="large"
-                style="width: 240px"
-                clearable
-              >
-                <el-option
-                  v-for="item in payWay"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-            </div> -->
-          </el-col>
-          <el-col :span="8">
-            <div class="head-card-element" v-if="adminData.area == '总部'">
-              <el-text class="mx-1" size="large">所属地区：</el-text>
-              <el-select
-                v-model="rechargeVo.area"
-                placeholder="请选择所属地区"
-                size="large"
-                style="width: 240px"
-                clearable
-              >
-                <el-option
-                  v-for="item in area"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-                />
-              </el-select>
-            </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="21">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">充值时间：</el-text>
-              <el-date-picker
-                v-model="getTime"
-                type="datetimerange"
-                range-separator="至"
-                start-placeholder="起始时间"
-                end-placeholder="结束时间"
-              />
-              <el-button style="margin-left: 10px" @click="getToday()"
-                >今</el-button
-              >
-              <el-button @click="getYesterday()">昨</el-button>
-              <el-button @click="get7Days()">近7天</el-button>
-            </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>
-            </div>
-          </el-col>
-        </el-row>
-      </el-card>
-    </el-col>
-  </el-row>
-  <el-row>
-    <el-col>
-      <el-card>
-        <el-tabs
-          v-model="activeName"
-          type="card"
-          class="demo-tabs"
-          @tab-click="handleClick"
-        >
-          <el-tab-pane label="全部" name="all"></el-tab-pane>
-          <el-tab-pane label="待审核" name="wait"></el-tab-pane>
-          <el-tab-pane label="已通过" name="pass"></el-tab-pane>
-          <el-tab-pane label="已驳回" name="reject"></el-tab-pane>
-          <div>
-            充值金额：{{ trueRGold.toFixed(2) }}新币，永久金币：{{
-              trueRGold.toFixed(2)
-            }}金币，免费金币：{{ trueFGold }}金币
-          </div>
-        </el-tabs>
-        <!-- 设置表格容器的高度和滚动样式 -->
-        <div style="height: 520px; overflow-y: auto">
-          <el-table
-            :data="tableData"
-            style="width: 100%"
-            height="520px"
-            @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
-              fixed="left"
-              prop="username"
-              label="姓名"
-              width="100px"
-            />
-            <el-table-column
-              fixed="left"
-              prop="jwcode"
-              label="精网号"
-              width="110px"
-            />
-            <el-table-column prop="area" label="所属地区" width="100px" />
-            <el-table-column
-              prop="activityName"
-              label="活动名称"
-              width="150px"
-            />
-            <!-- <el-table-column prop="" label="货币名称" width="120px" /> -->
-            <el-table-column
-              prop="paidGold"
-              sortable="custom"
-              label="充值金额"
-              width="120px"
-            />
-            <el-table-column
-              prop="rechargeGold"
-              label="永久金币"
-              sortable="custom"
-              width="110px"
-            />
-            <el-table-column
-              prop="freeGold"
-              label="免费金币"
-              sortable="custom"
-              width="110px"
-            />
-            <el-table-column
-              prop="remark"
-              label="备注"
-              width="200px"
-              show-overflow-tooltip
-            />
-            <el-table-column prop="payWay" label="支付方式" width="100px" />
-            <el-table-column
-              prop="rechargeVoucher"
-              label="支付凭证"
-              width="150px"
-            >
-              <template #default="scope">
-                <el-image
-                  :preview-src-list="[scope.row.rechargeVoucher]"
-                  preview-teleported="true"
-                  :src="scope.row.rechargeVoucher"
-                  alt="凭证"
-                  style="width: 50px; height: 50px"
-                />
-              </template>
-            </el-table-column>
-            <el-table-column prop="name" label="提交人" width="100px" />
-            <el-table-column prop="status" label="状态" width="100px">
-              <template #default="scope">
-                <span v-if="scope.row.status === 1">
-                  <div class="status">
-                    <span class="green-dot"></span>
-                    <span>已通过</span>
-                  </div>
-                </span>
-                <span v-if="scope.row.status === 0">
-                  <div class="status">
-                    <span class="grey-dot"></span>
-                    <span>待审核</span>
-                  </div>
-                </span>
-                <span v-if="scope.row.status === 2">
-                  <div class="status">
-                    <span class="red-dot"></span>
-                    <span>已驳回</span>
-                  </div>
-                </span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="reson"
-              label="驳回理由"
-              width="200px"
-              show-overflow-tooltip
-            />
-            <el-table-column
-              prop="createTime"
-              sortable
-              label="交款时间"
-              width="200px"
-            >
-              <!-- <template #default="scope">
-                {{
-                  moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss')
-                }}
-              </template> -->
-            </el-table-column>
-            <el-table-column
-              prop="rechargeTime"
-              sortable="custom"
-              label="提交时间"
-              width="200px"
-            />
-            <el-table-column
-              fixed="right"
-              prop="operation"
-              label="操作"
-              width="150px"
-            >
-              <template #default="scope">
-                <el-popconfirm
-                  title="确定将此条活动删除吗？"
-                  @confirm="delConfirm"
-                >
-                  <template #reference>
-                    <el-button type="primary" text @click="del(scope.row)">
-                      删除
-                    </el-button>
-                  </template>
-                  <template #actions="{ confirm, cancel }">
-                    <el-button size="small" @click="cancel">取消</el-button>
-                    <el-button type="primary" size="small" @click="confirm">
-                      确定
-                    </el-button>
 </template>
-                </el-popconfirm>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-
-        <!-- 分页 -->
-        <div class="pagination" style="margin-top: 20px">
-          <el-pagination
-            background
-            :page-size="getObj.pageSize"
-            :page-sizes="[5, 10, 20, 50, 100]"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="total"
-            @size-change="handlePageSizeChange"
-            @current-change="handleCurrentChange"
-          ></el-pagination>
-        </div>
-      </el-card>
-    </el-col>
-  </el-row>
-
-  <!-- 编辑弹窗 -->
-  <el-dialog
-    v-model="editRechargeVisible"
-    title="新增活动"
-    width="500"
-    :before-close="closeEditRechargeVisible"
-  >
-    <template #footer>
-      <el-form :model="editObj" label-width="auto" style="max-width: 600px">
-        <el-form-item label="活动名称:">
-          <el-input
-            v-model="addObj.activityName"
-            placeholder="请输入活动名称"
-            style="width: 220px"
-          />
-        </el-form-item>
-
-        <el-form-item label="免费金币:">
-          <el-radio-group v-model="addObj.freeGold">
-            <el-radio value="0">无赠送</el-radio>
-            <el-radio value="1">有赠送</el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item label="免费金币兑换比:">
-          <el-input
-            v-model="addObj.rechargeRatio"
-            placeholder="请输入"
-            style="width: 80px"
-          />：1
-          <div style="color: grey">(提示：当前规则每10新币可兑换1免费金币)</div>
-        </el-form-item>
-
-        <el-form-item label="开始时间:">
-          <el-time-picker v-model="addObj.startTime" />
-        </el-form-item>
-
-        <el-form-item label="结束时间:">
-          <el-time-picker v-model="addObj.endTime" />
-        </el-form-item>
-
-        <el-form-item label="添加人:">
-          <el-input v-model="addObj.adminName" disabled style="width: 220px" />
-        </el-form-item>
-      </el-form>
-
-      <div class="dialog-footer">
-        <el-button @click="closeAddActivityVisible">取消</el-button>
-        <el-button type="primary" @click="closeAddActivityVisible">
-          提交
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-</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>
+<script>
+</script>

src/views/recharge/coinRechargeDetail.vue

@@ -0,0 +1,485 @@
+<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.id
+    console.log('请求成功', result)
+    console.log('用户信息', adminData.value)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+// 变量
+// 充值明细表格
+const tableData = ref([])
+// 搜索===========================================
+// 搜索recharge
+const rechargeUser = ref({
+  adminId: adminData.value.id
+})
+// 搜索对象
+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: '/general/activity', data: {} })
+
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+
+    // 检查返回的数据是否为数组
+    if (Array.isArray(result.data)) {
+      // 将字符串数组转换为 { value, label } 格式
+      activity.value = result.data.map(item => ({ value: item, label: item }));
+    } else {
+      console.error('活动数据格式错误', result)
+      ElMessage.error('活动数据格式错误，请联系管理员')
+    }
+
+    console.log('activity', activity.value)
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// 获取地区
+// 获取地区
+const getArea = async function () {
+  try {
+    // 发送POST请求
+    const result = await API({ url: '/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: '/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: '/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: '/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
+    // 处理表格中的充值金额、永久金币和免费金币数据，除以 100
+    tableData.value = tableData.value.map(item => ({
+      ...item,
+      // 处理永久金币
+      permanentGold: (Number(item.permanentGold) || 0) / 100,
+      // 处理免费金币
+      freeGold: (Number(item.freeGold) || 0) / 100,
+      // 处理充值金额
+      money: (Number(item.money) || 0) / 100
+    }))
+    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 exportExcel = async function () { 
+  const params = {
+    text:'',
+    deptid:'',
+    sort:1,
+    field:'',
+    page:getObj.pageNum,
+    size:getObj.pageSize
+  }
+  const res = await API({ url: '/export/exportRecharge', data: params })
+  if (res.code === 200) { 
+    ElMessage.success('导出成功')
+  }
+}
+
+// 挂载
+onMounted(async function () {
+  await get()
+  await getActivity()
+  await getArea()
+  await getPlatform()
+})
+// 新增排序字段和排序方式
+const sortField = ref()
+const sortOrder = ref(1)
+// 处理排序事件
+const handleSortChange = (column) => {
+
+  console.log('排序字段：', column.prop)
+  console.log('排序方式：', column.order)
+  if (column.prop === 'money') {
+    sortField.value = 'money'
+  } else if (column.prop === 'freeGold') {
+    sortField.value = 'freeGold'
+  } else if (column.prop === 'payTime') {
+    sortField.value = 'payTime'
+  } else if (column.prop === 'createTime') {
+    sortField.value = 'createTime'
+  } else if (column.prop === 'permanentGold') {
+    sortField.value = 'permanentGold'
+  }
+  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.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="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>
+              <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 ) /100 }}新币，永久金币：{{
+            permanentGolds /100
+          }}金币，免费金币：{{ freeGolds /100 }}金币
+        </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="payTime" sortable label="充值时间" width="200px">
+              <template #default="scope">
+                {{ moment(scope.row.payTime).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,613 @@
+
+<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.id
+    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({
+  jwcode: '',
+  goodsName: '',
+  refundType: '',
+  refundModel: 0, 
+  permanentGold: '',
+  freeGold: '', 
+  taskGold: '', 
+  sumGold: 0, 
+  remark: '',
+  adminId: null
+})
+
+// 取消按钮
+const cancel = function () {
+  addRefund.value = {
+    jwcode: '',
+    goodsName: '',
+    refundType: '',
+    refundModel: 0,
+    permanentGold: '',
+    freeGold: '',
+    taskGold: '',
+    sumGold: 0,
+    remark: '',
+    adminId: adminData.value.id
+  }
+  addRe.value.typeR = '0'
+}
+
+
+// 这是添加退款信息的接口
+const add = async function () {
+  try {
+
+    // 更新 refundModel
+    addRefund.value.refundModel = parseInt(addRe.value.typeR);
+
+
+    // 对提交的金币数乘以 100
+    const processedRefund = {
+      ...addRefund.value,
+      permanentGold: (Number(addRefund.value.permanentGold) || 0) * 100,
+      freeGold: (Number(addRefund.value.freeGold) || 0) * 100,
+      taskGold: (Number(addRefund.value.taskGold) || 0) * 100,
+      sumGold: (Number(addRefund.value.sumGold) || 0) * 100
+    }
+
+    // 发送POST请求
+    const result = await API({ url: '/refund/add', 
+    data: processedRefund
+    })
+    if (result.code === 0) {
+      ElMessage.error(result.msg)
+      return
+    }
+    console.log('请求成功', result)
+    ElMessage.success('添加成功')
+    // 重置表单
+    cancel()
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+// 提交退款信息前的表单验证
+const addBefore = () => {
+  Ref.value.validate(async (valid) => {
+    if (valid) {
+      ElMessageBox.confirm('确认添加？')
+        .then(() => {
+          add()
+          console.log('添加成功')
+        })
+        .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' }],
+  goodsName: [{ required: true, message: '请选择退款商品', trigger: 'blur' }],
+  taskGold: [{ required: true, message: '请输入任务金币', trigger: 'blur' }],
+  freeGold: [{ required: true, message: '请输入免费金币', trigger: 'blur' }],
+  permanentGold: [
+    { required: true, message: '请输入永久金币', trigger: 'blur' }
+  ],
+  sumGold: [
+    { 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: '/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 {
+      // 对传过来的金币数除以 100
+      const processedData = {
+        ...result.data,
+        historySumGold: (Number(result.data.historySumGold) || 0) / 100,
+        nowSumGold: (Number(result.data.nowSumGold) || 0) / 100,
+        nowPermanentGold: (Number(result.data.nowPermanentGold) || 0) / 100,
+        nowFreeGold: (Number(result.data.nowFreeGold) || 0) / 100,
+        nowTaskGold: (Number(result.data.nowTaskGold) || 0) / 100
+      }
+      user.value = processedData;
+      console.log("用户信息", user.value);
+      ElMessage.success(result.msg);
+    }
+  } catch (error) {
+    console.log("请求失败", error);
+    ElMessage.error("查询失败，请检查精网号是否正确");
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+
+
+
+// 退款类型
+const refundType = ref([])
+
+// 获取退款类型
+const getRefundTypes = async function () {
+  try {
+    // 发送请求获取退款类型
+    const result = await API({ 
+      url: '/refund/refundType', //这里应该写上一个退款类型的接口
+      data: {} })
+    console.log('退款类型请求成功', result)
+    // 检查返回的数据是否为数组
+    if (Array.isArray(result.data)) {
+      // 将字符串数组转换为 { value, label } 格式
+      refundType.value = result.data.map(item => ({ value: item, label: item }));
+    } else {
+      console.error('退款类型数据格式错误', result)
+      ElMessage.error('退款类型数据格式错误，请联系管理员')
+    }
+    console.log('退款类型', refundType.value)
+  } catch (error) {
+    console.log('退款类型请求失败', error)
+  }
+}
+
+// 根据精网号查询商品
+const goodsName = ref([])
+const getGoods = async function (jwcode) {
+  trimJwCode();
+  // 只有精网号存在时才发送请求
+  if (!addRefund.value.jwcode) {
+    goodsName.value = []; // 清空商品数据
+    return;
+  }
+  try {
+    // 发送POST请求
+    const result = await API({
+      // url: 'http://39.101.133.168:8828/live_mall/api/product/all', //需要接口
+      url: '/refund/selectGoods',
+      data: {
+        jwcode: addRefund.value.jwcode
+      }
+    })
+    console.log('请求成功', result)
+    // 检查返回的数据是否为数组
+    if (Array.isArray(result.data)) {
+      // 将字符串数组转换为 { value, label } 格式
+      goodsName.value = result.data.map(item => ({ 
+        value: item.goodsName,  // 使用商品名称作为 value
+        label: item.goodsName, 
+        key: item.goodsName,
+        // 保留其他字段
+        permanentGold: (Number(item.permanentGold) || 0) / 100,
+        freeGold: (Number(item.freeGold) || 0) / 100,
+        taskGold: (Number(item.taskGold) || 0) / 100
+      }));
+    } else {
+      console.error('退款类型数据格式错误', result)
+      ElMessage.error('退款类型数据格式错误，请联系管理员')
+    }
+  } catch (error) {
+    console.log('请求失败', error)
+    ElMessage.error('查询商品失败，请检查精网号是否正确')
+    goodsName.value = []; // 请求失败时清空商品数据
+  }
+}
+
+// 存储选中商品的金币花费信息
+const selectedGoodsGold = ref({
+  permanentGold: 0,
+  freeGold: 0,
+  taskGold: 0
+})
+
+// 处理退款方式切换，当部分退款切换全部退款时，退款金额应自动重新填充
+const handleRefundModelChange = () =>{
+  if (addRe.value.typeR === '0') {
+    // 全部退款时
+    addRefund.value.permanentGold = selectedGoodsGold.value.permanentGold;
+    addRefund.value.freeGold = selectedGoodsGold.value.freeGold;
+    addRefund.value.taskGold = selectedGoodsGold.value.taskGold;
+  }
+}
+
+const handleSelectionChange = (selectedOption) => {
+  if (selectedOption) {
+    // 更新商品名称
+    addRefund.value.goodsName = selectedOption.value;
+    
+    // 更新金币字段
+    addRefund.value.permanentGold = selectedOption.permanentGold || 0;
+    addRefund.value.freeGold = selectedOption.freeGold || 0;
+    addRefund.value.taskGold = selectedOption.taskGold || 0;
+    
+    // 记录选中商品的金币花费
+    selectedGoodsGold.value.permanentGold = Number(selectedOption.permanentGold) || 0;
+    selectedGoodsGold.value.freeGold = Number(selectedOption.freeGold) || 0;
+    selectedGoodsGold.value.taskGold = Number(selectedOption.taskGold) || 0;
+  } else {
+    // 清空逻辑保持不变
+  }
+  console.log('选择的商品', selectedOption);
+}
+// 验证输入的金币数量是否超过商品花费的金币数量
+const validateGoldInput = (type, value) => {
+  const maxValue = selectedGoodsGold.value[type];
+  const inputValue = Number(value);
+  if (isNaN(inputValue)) {
+    return 0;
+  }
+  if (inputValue > maxValue) {
+    // 当输入金额大于商品金额时，显示提示信息
+    ElMessage.warning('所填金额大于该类金币余额');
+    return maxValue;
+  }
+  return Math.min(inputValue, maxValue);
+}
+
+// 处理永久金币输入
+const handlePermanentGoldInput = (value) => {
+  addRefund.value.permanentGold = validateGoldInput('permanentGold', value);
+}
+
+// 处理免费金币输入
+const handleFreeGoldInput = (value) => {
+  addRefund.value.freeGold = validateGoldInput('freeGold', value);
+}
+
+// 处理任务金币输入
+const handleTaskGoldInput = (value) => {
+  addRefund.value.taskGold = validateGoldInput('taskGold', value);
+}
+
+// 计算总金币
+const calculatedRechargeGoods = computed(() => {
+  const permanentGold = addRefund.value.permanentGold === '' ? 0 : +addRefund.value.permanentGold;
+  const freeGold = addRefund.value.freeGold === '' ? 0 : +addRefund.value.freeGold;
+  const taskGold = addRefund.value.taskGold === '' ? 0 : +addRefund.value.taskGold;
+  return Number((permanentGold + freeGold + taskGold).toFixed(8)); 
+})
+
+watch(calculatedRechargeGoods, (newVal) => {
+  addRefund.value.sumGold = newVal
+  console.log('计算的总金币', newVal)
+})
+// 绑定两个数据
+
+// 挂载
+onMounted(async function () {
+  await getAdminData()
+  await getRefundTypes()
+  // await getGoods()
+})
+</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="goodsName" label="商品名">
+      <el-select
+        v-model="addRefund.goodsName"
+        placeholder="请选择"
+        style="width: 300px"
+        @change="handleSelectionChange"
+      >
+        <el-option
+          v-for="item in goodsName"
+          :key="item.key"
+    :label="item.label"
+    :value="item"
+        />
+      </el-select>
+    </el-form-item>
+
+    <el-form-item prop="refundModel" label="退款方式:">
+      <el-radio-group v-model="addRe.typeR" @change="handleRefundModelChange">
+        <el-radio value="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="permanentGold" label="永久金币" style="float: left">
+        <el-input
+          v-model="addRefund.permanentGold"
+          style="width: 100px"
+          :disabled="addRe.typeR === '0' ? true : false"
+          @input="handlePermanentGoldInput($event)"
+        >
+        </el-input>
+        <p>个</p>
+      </el-form-item>
+      <el-form-item
+        prop="freeGold"
+        label="免费金币"
+        style="margin-left: -20px; float: left"
+      >
+        <el-input
+          v-model="addRefund.freeGold"
+          style="float: left; width: 100px"
+          :disabled="addRe.typeR === '0' ? true : false"
+          @input="handleFreeGoldInput($event)"
+        />
+        <p>个</p>
+      </el-form-item>
+      <el-form-item prop="taskGold" label="任务金币" style="margin-left: -20px">
+        <el-input
+          v-model="addRefund.taskGold"
+          style="float: left; width: 100px"
+          :disabled="addRe.typeR === '0' ? true : false"
+          @input="handleTaskGoldInput($event)"
+        />
+        <p>个</p>
+      </el-form-item>
+    </div>
+    <el-form-item prop="sumGold" label="退款金币总数">
+      <el-input disabled v-model="addRefund.sumGold" 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="adminName" label="提交人">
+      <el-input
+        style="width: 300px"
+        :value="adminData.adminName"
+        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

@@ -1,734 +1,4 @@
-<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'
-// 变量
-//这是获取用户信息的接口
-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 detail = ref({})
-// 搜索对象
-const getObj = ref({
-  pageNum: 1,
-  pageSize: 50
-})
-//分页总条目
-const total = ref(100)
-// 搜索对象时间
-const getTime = ref([])
-// 所有信息
-const allData = ref([])
-// 搜索地区列表
-const area = ref([])
-
-//标签页默认高亮选项
-const activeName = ref('all')
-
-// 退款类型
-const consumeType = [
-  {
-    value: '退款商品',
-    label: '退款商品'
-  }
-]
-
-// //表格高度
-// const tableHeight = computed(function () {
-//   return (getObj.value.pageSize + 2) * 45 + "px";
-// });
-
-// 方法
-// 统计合计数
-const trueGold = ref(0)
-const trueRgold = ref(0)
-const trueFgold = ref(0)
-const trueTgold = ref(0)
-// 待审核各种类金币数
-const pendingRgold = ref(0)
-const pendingFgold = ref(0)
-const pendingTgold = ref(0)
-// 待审核金币数
-const pendingGold = ref(0)
-// 已通过各种类金币数
-const approvedRgold = ref(0)
-const approvedFgold = ref(0)
-const approvedTgold = ref(0)
-// 已通过金币数
-const approvedGold = ref(0)
-// 已驳回各种类金币数
-const rejectedRgold = ref(0)
-const rejectedFgold = ref(0)
-const rejectedTgold = ref(0)
-// 已驳回金币数
-const rejectedGold = ref(0)
-// 搜索==============================================================
-// 搜索方法
-const get = async function (val) {
-  try {
-    // 地区赋值
-    if (adminData.value.area === '泰国') {
-      detail.value.areas = ['泰国', '越南']
-    } else if (adminData.value.area !== '总部') {
-      detail.value.area = adminData.value.area
-    }
-    // 搜索参数页码赋值
-    if (typeof val === 'number') {
-      getObj.value.pageNum = val
-    }
-    // 搜索参数时间赋值
-    if (getTime.value != null) {
-      if (getTime.value.startDate != '' && getTime.value.endDate != '') {
-        detail.value.startDate = getTime.value[0]
-        detail.value.endDate = getTime.value[1]
-      }
-    } else {
-      detail.value.startDate = ''
-      detail.value.endDate = ''
-    }
-    // 添加排序字段和排序方式到请求参数
-    detail.value.sortField = sortField.value
-    detail.value.sortOrder = sortOrder.value
-    console.log('搜索参数', getObj.value)
-    // 发送POST请求
-    const result = await API({
-      url: '/refund/search',
-      data: {
-        ...getObj.value,
-        detail: { ...detail.value }
-      }
-    })
-    // 复制一份 detail.value 并移除排序字段和排序方式
-    const detailWithoutSort = { ...detail.value }
-    delete detailWithoutSort.sortField
-    delete detailWithoutSort.sortOrder
-
-    const result2 = await API({
-      url: '/refund/RefundA',
-      data: {
-        ...detailWithoutSort
-      }
-    })
-    // 统计合计数
-    if (result2.data) {
-      result2.data.forEach((item) => {
-        switch (item.status) {
-          case '待审核':
-            // 若 item.raudit 为空则赋值为 0
-            pendingRgold.value = item.sumRaudit1 || 0
-            pendingFgold.value = item.sumRaudit2 || 0
-            pendingTgold.value = item.sumRaudit3 || 0
-            // 若 item.sumRaudit 为空则赋值为 0
-            pendingGold.value = item.sumRaudit || 0
-            break
-          case '已通过':
-            approvedRgold.value = item.sumRaudit1 || 0
-            approvedFgold.value = item.sumRaudit2 || 0
-            approvedTgold.value = item.sumRaudit3 || 0
-            approvedGold.value = item.sumRaudit || 0
-            break
-          case '已驳回':
-            rejectedRgold.value = item.sumRaudit1 || 0
-            rejectedFgold.value = item.sumRaudit2 || 0
-            rejectedTgold.value = item.sumRaudit3 || 0
-            rejectedGold.value = item.sumRaudit || 0
-            break
-        }
-      })
-    }
-
-    trueFgold.value =
-      pendingFgold.value + approvedFgold.value + rejectedFgold.value
-    trueRgold.value =
-      pendingRgold.value + approvedRgold.value + rejectedRgold.value
-    trueTgold.value =
-      pendingTgold.value + approvedTgold.value + rejectedTgold.value
-    trueGold.value = pendingGold.value + approvedGold.value + rejectedGold.value
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    // 存储表格数据
-    tableData.value = result.data.list
-    console.log('tableData', tableData.value)
-    // 存储分页总数
-    total.value = result.data.total
-    console.log('total', total.value)
-    // 调用分类的方法
-    handleClick()
-  } catch (error) {
-    console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-}
-// 搜索
-const search = function () {
-  getObj.value.pageNum = 1
-  get()
-}
-// 重置
-const reset = function () {
-  detail.value.refundGoods = ''
-  detail.value.refundType = ''
-  detail.value.area = ''
-  detail.value.startDate = ''
-  detail.value.endDate = ''
-  sortField.value = ''
-  sortOrder.value = ''
-  getTime.value = {}
-}
-// 今天
-const getToday = function () {
-  const today = new Date()
-  const startDate = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate()
-  )
-  const endDate = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate() + 1
-  )
-  getTime.value = [startDate, endDate]
-  console.log('getTime', getTime.value)
-  get()
-}
-// 昨天
-const getYesterday = function () {
-  const yesterday = new Date()
-  yesterday.setDate(yesterday.getDate() - 1)
-  const startDate = new Date(
-    yesterday.getFullYear(),
-    yesterday.getMonth(),
-    yesterday.getDate()
-  )
-  const endDate = new Date(
-    yesterday.getFullYear(),
-    yesterday.getMonth(),
-    yesterday.getDate() + 1
-  )
-  getTime.value = [startDate, endDate]
-  console.log('getTime', getTime.value)
-  get()
-}
-// 近7天
-const get7Days = function () {
-  const today = new Date()
-  const startDate = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate() - 6
-  )
-  const endDate = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate() + 1
-  )
-  getTime.value = [startDate, endDate]
-  console.log('getTime', getTime.value)
-  get()
-}
-//全部充值明细
-const adminAll = function () {
-  console.log('adminAll')
-  detail.value.status = ''
-  getObj.value.pageNum = 1
-
-  get()
-  trueFgold.value =
-    pendingFgold.value + approvedFgold.value + rejectedFgold.value
-  trueRgold.value =
-    pendingRgold.value + approvedRgold.value + rejectedRgold.value
-  trueTgold.value =
-    pendingTgold.value + approvedTgold.value + rejectedTgold.value
-  trueGold.value = pendingGold.value + approvedGold.value + rejectedGold.value
-}
-//待审核充值明细
-const adminWait = async function () {
-  detail.value.status = 0
-  getObj.value.pageNum = 1
-  await get()
-  console.log('adminWait')
-  trueFgold.value = pendingFgold.value
-  trueRgold.value = pendingRgold.value
-  trueTgold.value = pendingTgold.value
-  trueGold.value = pendingGold.value
-}
-//已通过充值明细
-const adminPass = async function () {
-  detail.value.status = 1
-  getObj.value.pageNum = 1
-  await get()
-  console.log('adminPass')
-  trueFgold.value = approvedFgold.value
-  trueRgold.value = approvedRgold.value
-  trueTgold.value = approvedTgold.value
-  trueGold.value = approvedGold.value
-}
-//已驳回充值明细
-const adminReject = async function () {
-  detail.value.status = 2
-  getObj.value.pageNum = 1
-  await get()
-  console.log('adminReject')
-  trueFgold.value = rejectedFgold.value
-  trueRgold.value = rejectedRgold.value
-  trueTgold.value = rejectedTgold.value
-  trueGold.value = rejectedGold.value
-}
-//点击标签页
-// 设置tab.props.name默认为all
-const tabName = ref('all')
-const handleClick = function (tab, event) {
-  if (tab.props.name === 'all') {
-    adminAll()
-  } else if (tab.props.name === 'wait') {
-    adminWait()
-  } else if (tab.props.name === 'pass') {
-    adminPass()
-  } else if (tab.props.name === 'reject') {
-    adminReject()
-  }
-}
-
-// 获取地区
-const getArea = async function () {
-  try {
-    // 发送POST请求
-    const result = await API({ url: '/recharge/user/search', data: {} })
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    // 存储地区信息
-    area.value = result.data
-    console.log('地区', area.value)
-  } catch (error) {
-    console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-}
-
-//删除气泡
-const delObj = ref({})
-const del = function (row) {
-  delObj.value.detailId = row.detailId
-  console.log('delObj', delObj.value)
-}
-// 删除按钮的气泡弹出框确认按钮
-const delConfirm = async function () {
-  try {
-    console.log('delObj', delObj.value)
-    // 发送POST请求
-    const result = await API({
-      url: '/refund/softDelete?detailId=' + delObj.value.detailId,
-      data: {}
-    })
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    // 刷新表格数据
-    get()
-  } catch (error) {
-    console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-}
-
-// 查询商品的接口
-const goods = ref([])
-const getGoods = async function () {
-  try {
-    // 发送POST请求
-    const result = await API({ url: '/product', data: {} })
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    // 存储全部数据
-    goods.value = result.data
-    console.log('allData', allData.value)
-    console.log('地区', area.value)
-  } catch (error) {
-    console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-}
-getGoods()
-
-// 验证跳转输入框的数字是否合法
-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 getArea()
-})
-// 新增排序字段和排序方式
-const sortField = ref('')
-const sortOrder = ref('')
-// 处理排序事件
-const handleSortChange = (column) => {
-  console.log('排序字段：', column.prop)
-  console.log('排序方式：', column.order)
-  if (column.prop === 'rechargeCoin') {
-    sortField.value = 'recharge_coin'
-  } else if (column.prop === 'taskCoin') {
-    sortField.value = 'task_coin'
-  } else if (column.prop === 'freeCoin') {
-    sortField.value = 'free_coin'
-  } else if (column.prop === 'createTime') {
-    sortField.value = 'create_time'
-  } else if (column.prop === 'auditTime') {
-    sortField.value = 'audit_time'
-  }
-  sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC'
-  get()
-}
-const handlePageSizeChange = function (val) {
-  getObj.value.pageSize = val
-  get()
-}
-const handleCurrentChange = function (val) {
-  getObj.value.pageNum = val
-  get()
-}
-</script>
-
 <template> 
-  <el-row>
-    <el-col>
-      <el-card style="margin-bottom: 20px">
-        <el-row style="margin-bottom: 10px">
-          <el-col :span="8">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">退款类型：</el-text>
-              <el-select
-                v-model="detail.refundType"
-                placeholder="请选择退款类型"
-                size="large"
-                style="width: 240px"
-                clearable
-              >
-                <el-option
-                  v-for="item in consumeType"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">退款商品：</el-text>
-              <el-select
-                v-model="detail.refundGoods"
-                placeholder="请选择退款商品"
-                size="large"
-                style="width: 240px"
-                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="8">
-            <div class="head-card-element" v-if="adminData.area == '总部'">
-              <el-text class="mx-1" size="large">所属地区：</el-text>
-              <el-select
-                v-model="detail.area"
-                placeholder="请选择所属地区"
-                size="large"
-                style="width: 240px"
-                clearable
-              >
-                <el-option
-                  v-for="item in area"
-                  :key="item"
-                  :label="item"
-                  :value="item"
-                />
-              </el-select>
-            </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="21">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">退款时间：</el-text>
-              <el-date-picker
-                v-model="getTime"
-                type="datetimerange"
-                range-separator="至"
-                start-placeholder="起始时间"
-                end-placeholder="结束时间"
-              />
-              <el-button style="margin-left: 10px" @click="getToday()"
-                >今</el-button
-              >
-              <el-button @click="getYesterday()">昨</el-button>
-              <el-button @click="get7Days()">近7天</el-button>
-            </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>
-            </div>
-          </el-col>
-        </el-row>
-      </el-card>
-    </el-col>
-  </el-row>
-  <el-row>
-    <el-col>
-      <el-card>
-        <el-tabs
-          v-model="activeName"
-          type="card"
-          class="demo-tabs"
-          @tab-click="handleClick"
-        >
-          <el-tab-pane label="全部" name="all"></el-tab-pane>
-          <el-tab-pane label="待审核" name="wait"></el-tab-pane>
-          <el-tab-pane label="已通过" name="pass"></el-tab-pane>
-          <el-tab-pane label="已驳回" name="reject"></el-tab-pane>
-        </el-tabs>
-
-        <div>
-          退款金币总数：{{ Math.abs(trueGold) }}，永久金币：{{
-            Math.abs(trueRgold)
-          }}，免费金币：{{ Math.abs(trueFgold) }}，任务金币：{{
-            Math.abs(trueTgold)
-          }}
-        </div>
-        <!-- 设置表格容器的高度和滚动样式 -->
-        <div style="height: 520px; overflow-y: auto">
-          <el-table
-            :data="tableData"
-            style="width: 100%"
-            @sort-change="handleSortChange"
-            height="520px"
-          >
-            <el-table-column
-              type="index"
-              label="序号"
-              width="100px"
-              fixed="left"
-            >
-              <template #default="scope">
-                <span>{{
-                  scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
-                }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="username"
-              label="姓名"
-              fixed="left"
-              width="150px"
-            />
-            <el-table-column
-              prop="jwcode"
-              label="精网号"
-              fixed="left"
-              width="110px"
-            />
-            <el-table-column prop="area" label="所属地区" width="110px" />
-            <el-table-column prop="refundType" label="退款类型" width="100px" />
-            <el-table-column prop="refundGoods" label="退款商品" width="110px">
-            </el-table-column>
-            <el-table-column label="退款金币数" width="110px">
-              <template #default="scope">
-                {{
-                  scope.row.rechargeCoin +
-                  scope.row.freeCoin +
-                  scope.row.taskCoin
-                }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="rechargeCoin"
-              label="永久金币"
-              width="110px"
-              sortable="“custom”"
-            />
-            <el-table-column
-              prop="freeCoin"
-              sortable="“custom”"
-              label="免费金币"
-              width="110px"
-            />
-            <el-table-column
-              prop="taskCoin"
-              sortable="“custom”"
-              label="任务金币"
-              width="110px"
-            />
-            <!-- 修改prop为taskGold -->
-            <el-table-column
-              prop="remark"
-              label="备注"
-              width="160px"
-              show-overflow-tooltip
-            />
-            <el-table-column prop="adminName" label="提交人" width="100px" />
-            <el-table-column prop="status" label="审核状态" width="120px">
-              <!-- 模板内容 -->
-              <template #default="scope">
-                <span v-if="scope.row.status == 1">
-                  <div class="status">
-                    <span class="green-dot"></span>
-                    <span>已通过</span>
-                  </div>
-                </span>
-                <span v-if="scope.row.status == 0">
-                  <div class="status">
-                    <span class="grey-dot"></span>
-                    <span>待审核</span>
-                  </div>
-                </span>
-                <span v-if="scope.row.status == 2">
-                  <div class="status">
-                    <span class="red-dot"></span>
-                    <span>已驳回</span>
-                  </div>
-                </span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="reson"
-              label="驳回理由"
-              width="200px"
-              show-overflow-tooltip
-            />
-            <el-table-column
-              prop="createTime"
-              sortable="“custom”"
-              label="提交时间"
-              width="180px"
-            >
-              <template #default="scope">
-                {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="auditTime"
-              sortable="custom"
-              label="审核时间"
-              width="180px"
-            >
-              <template #default="scope">
-                {{ moment(scope.row.auditTime).format('YYYY-MM-DD HH:mm:ss') }}
 </template>
-            </el-table-column>
-            <el-table-column
-              prop="operation"
-              label="操作"
-              fixed="right"
-              width="120px"
-            >
-              <template #default="scope">
-                <el-popconfirm
-                  title="确定将此条活动删除吗？"
-                  @confirm="delConfirm"
-                >
-                  <template #reference>
-                    <el-button type="primary" text @click="del(scope.row)">
-                      删除
-                    </el-button>
-                  </template>
-                  <template #actions="{ delConfirm, cancel }">
-                    <el-button size="small" @click="cancel">取消</el-button>
-                    <el-button type="primary" size="small" @click="delConfirm">
-                      确定
-                    </el-button>
-                  </template>
-                </el-popconfirm>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-
-        <!-- 分页 -->
-        <!-- 分页 -->
-        <div class="pagination" style="margin-top: 20px">
-          <el-pagination
-            background
-            :page-size="getObj.pageSize"
-            :page-sizes="[5, 10, 20, 50, 100]"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="total"
-            @size-change="handlePageSizeChange"
-            @current-change="handleCurrentChange"
-          ></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>
+<script>
+</script>

src/views/refund/coinRefundDetail.vue

@@ -0,0 +1,626 @@
+<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 sumGolds = 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: '/refund/refundType', //这里应该写上一个退款类型的接口
+      data: {} })
+    console.log('退款类型请求成功', result)
+    // 检查返回的数据是否为数组
+    if (Array.isArray(result.data)) {
+      // 将字符串数组转换为 { value, label } 格式
+      refundType.value = result.data.map(item => ({ value: item, label: item }));
+    } else {
+      console.error('退款类型数据格式错误', result)
+      ElMessage.error('退款类型数据格式错误，请联系管理员')
+    }
+    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: '/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: '/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
+    // 对表格中的金币数据除以 100
+    tableData.value = tableData.value.map(item => ({
+      ...item,
+      sumGold: (Number(item.sumGold) || 0) / 100,
+      permanentGold: (Number(item.permanentGold) || 0) / 100,
+      freeGold: (Number(item.freeGold) || 0) / 100,
+      taskGold: (Number(item.taskGold) || 0) / 100
+    }))
+    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 = {}
+  getSelectBy()
+}
+// 今天
+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: '/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: '/general/goods',
+      data: {}
+    })
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功product', result)
+    if (Array.isArray(result.data)) {
+      // 过滤掉空字符串和 null 值
+      const validGoods = result.data.filter(item => item && item.trim() !== '');
+      // 直接使用后端返回的字符串作为 value 和 label
+      goods.value = validGoods.map(item => ({
+        value: item,
+        label: item
+      }));
+    }
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+const exportExcel = async function () { 
+  const params = {
+    text:'',
+    deptid:'',
+    sort:1,
+    field:'',
+    page:getObj.pageNum,
+    size:getObj.pageSize
+  }
+  const res = await API({ url: '/export/exportRefund', data: params })
+  if (res.code === 200) { 
+    ElMessage.success('导出成功')
+  }
+}
+// 挂载
+onMounted(async function () {
+  await getAdminData()
+  await getSelectBy()
+  await getMarket()
+  await getRefundTypes()
+  await getGoods()
+})
+// 新增排序字段和排序方式
+const sortField = ref('')
+const sortOrder = ref('')
+// 处理排序事件
+const handleSortChange = (column) => {
+  console.log('排序字段：', column.prop)
+  console.log('排序方式：', column.order)
+  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 = 'createTime'
+  } else if (column.prop === 'auditTime') {
+    sortField.value = 'auditTime'
+  } else if (column.prop === 'sumGold') { 
+    sortField.value = 'sumGold'
+  }
+  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.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.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(sumGolds) / 100 }}，永久金币：{{
+            Math.abs(permanentGolds) / 100
+          }}，免费金币：{{ Math.abs(freeGolds) / 100 }}，任务金币：{{
+            Math.abs(taskGolds) / 100
+          }}
+        </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="sumGold"
+              label="金额总数"
+              width="110px"
+              sortable="custom"
+            />
+
+            <el-table-column prop="refundModel" label="退款方式" width="110px">
+              <template #default="scope">
+                {{ scope.row.refundModel === 0 ? '全部退款' : scope.row.refundModel === 1 ? '部分退款' : '' }}
+              </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,387 @@
+<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: '/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: '/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: '/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 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()
+}
+const exportExcel = async function () { 
+  const params = {
+    text:'',
+    deptid:'',
+    sort:1,
+    field:'',
+    page:getObj.pageNum,
+    size:getObj.pageSize
+  }
+  const res = await API({ url: '/goldDetail/exportGold', data: params })
+  if (res.code === 200) { 
+    ElMessage.success('导出成功')
+  }
+}
+</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) / 100 }}
+          永久金币：{{ Math.abs(permanentGold) / 100 }}
+          免费金币：{{ Math.abs(freeGold) / 100 }}
+          任务金币：{{ Math.abs(taskGold) / 100 }}
+        </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) / 100
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="currentPermanentGold" label="永久金币" sortable="custom" width="110">
+              <template #default="scope">
+                <span>{{ Math.abs(scope.row.currentPermanentGold) / 100 }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="currentFreeJune" label="6月份到期免费金币" sortable="custom" width="110">
+              <template #default="scope">
+                <span>{{ scope.row.currentFreeJune / 100 }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="currentFreeDecember" label="12月份到期免费金币" sortable="custom" width="110">
+              <template #default="scope">
+                <span>{{ scope.row.currentFreeDecember / 100 }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="currentTaskGold" label="任务金币" sortable="custom" width="130">
+              <template #default="scope">
+                <span>{{ Math.abs(scope.row.currentTaskGold) / 100 }}</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) / 100
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="sumConsume" label="历史消费" width="150">
+              <template #default="scope">
+                <span>{{ Math.abs(scope.row.sumConsume) / 100 }}</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,3 @@
-<!-- 这是客户金币明细页面 -->
 <script setup>
 import { ref, onMounted, computed, nextTick } from 'vue'
 
@@ -18,33 +17,99 @@ 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)
+  }
+}
+const exportExcel = async function () { 
+  const params = {
+    text:'',
+    deptid:'',
+    sort:1,
+    field:'',
+    page:getObj.pageNum,
+    size:getObj.pageSize
+  }
+  const res = await API({ url: '/goldDetail/export', data: params })
+  if (res.code === 200) { 
+    ElMessage.success('导出成功')
+  }
+}
+// 精网号去空格，处理 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: '/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: '/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 +117,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 +144,78 @@ 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 (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) {//检查是否同时选择了开始时间和结束时间，如果不是则置空
+      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 = ''
     }
     // 添加排序字段和排序方式到请求参数
-    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请求
+    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)); // 打印格式化后的请求参数
     const result = await API({
-      url: '/detailY',
+      url: '/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
+  search()
 }
+
+// 搜索，点击查询按钮后触发
+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 +223,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))
@@ -197,267 +281,26 @@ const checkNumber = function () {
     //提示
     ElMessage({
       type: 'error',
-      message: '请检查输入内容'
-    })
-  }
-}
-
-// 计算金币数量的方法
-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') || ''
-        ]
+      message: '输入非法'
     })
-      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'
   }
@@ -477,108 +320,16 @@ const handleCurrentChange = function (val) {
   getObj.value.pageNum = val
   get()
 }
-
-
-// 用于控制显示内容的变量
-const activeTab = ref('detailY')
-
-// 切换标签页的方法
-const changeTab = (tabName) => {
-  activeTab.value = tabName
-}
-
 // 挂载
 onMounted(async function () {
+  await get()
   await getArea()
   await getAdminData()
-  await get()
+  await getPlatform() // 调用获取平台信息的函数
 })
-
 </script>
-
-
 <template>
-
-
   <div>
-  <!-- <el-button-group>
-      <el-button 
-        :type="activeTab === 'detailY' ? 'primary' : 'default'" 
-        @click="changeTab('detailY')"
-      >
-        金币明细
-      </el-button>
-      <el-button 
-        :type="activeTab === 'goldInfo' ? 'primary' : 'default'" 
-        @click="changeTab('goldInfo')"
-      >
-        金币余额
-      </el-button>
-    </el-button-group> -->
-
-  <!-- 根据activeTab切换显示内容 -->
-   <!-- 客户金币明细的布局---------------------------------------------------------- -->
-<!-- <div v-if="activeTab === 'detailY'"> -->
-  <!-- 导出excel提前展示的信息面板 -->
-  <el-dialog
-    v-model="showExportInfoPanel"
-    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>
@@ -587,66 +338,33 @@ onMounted(async function () {
             <el-col :span="5">
               <div class="head-card-element">
                 <el-text class="mx-1" size="large">精网号：</el-text>
-              <el-input
-                v-model="detailY.jwcode"
-                style="width: 150px"
-                placeholder="请输入精网号"
-                clearable
-              />
+                <el-input v-model="goldDetail.jwcode" style="width: 150px" placeholder="请输入精网号" 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="detailY.consumePlatform"
-                placeholder="请选择平台信息"
-                style="width: 180px"
-                clearable
-              >
-                <el-option
-                  v-for="item in platform"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
+                <el-select v-model="goldDetail.payPlatform" placeholder="请选择平台信息" style="width: 160px" clearable
+                  :loading="isLoadingPlatform">
+                  <el-option v-for="item in platform" :key="item.value" :label="item.label" :value="item.value" />
                 </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"
-                placeholder="请选择更新类型"
-                style="width: 180px"
-                clearable
-              >
-                <el-option
-                  v-for="item in num"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
+                <el-select v-model="goldDetail.type" placeholder="请选择更新类型" style="width: 160px" clearable>
+                  <el-option v-for="item in type" :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="detailY.area"
-                placeholder="请选择所属地区"
-                style="width: 180px"
-                clearable
-                :loading="isLoadingArea"
-              >
-                <el-option
-                  v-for="item in area"
-                  :key="item.value || item"
-                  :label="item.label || item"
-                  :value="item.value || item"
-                />
+                <el-select v-model="goldDetail.market" placeholder="请选择所属地区" style="width: 180px" clearable
+                  :loading="isLoadingArea">
+                  <el-option v-for="item in market" :key="item.value || item" :label="item.label || item"
+                    :value="item.value || item" />
                 </el-select>
               </div>
             </el-col>
@@ -654,14 +372,8 @@ onMounted(async function () {
 
           <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="结束时间"
-            style="margin-right: 50px"
-          />
+            <el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间"
+              end-placeholder="结束时间" style="margin-right: 50px" />
             <el-button @click="getToday()">今</el-button>
             <el-button @click="getYesterday()">昨</el-button>
             <el-button @click="get7Days()">近7天</el-button>
@@ -676,119 +388,69 @@ onMounted(async function () {
     <el-row>
       <el-col>
         <el-card>
+          <div>
+            金币总数：{{ Math.abs(sumGoldTotal) / 100 }}
+            永久金币：{{ Math.abs(permanentGold) / 100 }}
+            免费金币：{{ Math.abs(totalFreeGold) / 100 }}
+            任务金币：{{ Math.abs(taskGold) / 100 }}
+          </div>
           <div style="height: 584px; overflow-y: auto">
-          <el-table
-            :data="tableData"
-            style="width: 100%"
-            @sort-change="handleSortChange"
-            height="584px"
-          >
-            <el-table-column
-              type="index"
-              label="序号"
-              width="100px"
-              fixed="left"
-            >
+            <el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" height="584px">
+              <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
-              fixed="left"
-              prop="username"
-              label="姓名"
-              width="150"
-            />
-            <el-table-column
-              fixed="left"
-              prop="jwcode"
-              label="精网号"
-              width="120"
-            />
-            <el-table-column prop="area" label="所属地区" width="120" />
-            <el-table-column
-              prop="consumePlatform"
-              label="平台信息"
-              width="140"
-            >
-              <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>
-              </template>
+              <el-table-column fixed="left" prop="name" label="姓名" width="150" />
+              <el-table-column fixed="left" prop="jwcode" label="精网号" width="120" />
+              <el-table-column prop="market" label="所属地区" width="120" />
+              <el-table-column prop="payPlatform" label="平台信息" width="140">
+
               </el-table-column>
-            <!-- <el-table-column
-              prop="gold"
-              label="更新数量"
-              width="120"
-              sortable="custom"
-            >
-              <template #default="scope">
-                <span>{{ scope.row.gold / 100 }}</span>
-              </template>
-            </el-table-column> -->
-            <el-table-column prop="updateType" label="更新类型" width="110">
-              <!-- 模板内容 -->
+
+              <el-table-column prop="type" 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>
+                  <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 label="金币数量" width="120">
+              <el-table-column prop="sumGold" sortable="custom" label="金币数量" width="110">
                 <template #default="scope">
-                <span>{{ calculateGoldAmount(scope.row) }}</span>
+
+                  <span>
+                    {{
+                      scope.row.type === 1 // 消费类型
+                        ? - scope.row.sumGold / 100
+                        : scope.row.sumGold / 100
+                    }}
+                  </span>
                 </template>
               </el-table-column>
 
-            <el-table-column
-              prop="rechargeCoin"
-              sortable="custom"
-              label="永久金币"
-              width="110"
-            >
+              <el-table-column prop="permanentGold" sortable="custom" label="永久金币" width="110">
                 <template #default="scope">
-                <span>{{ scope.row.rechargeCoin / 100 }}</span>
+                  <span>{{ scope.row.permanentGold / 100 }}</span>
                 </template>
               </el-table-column>
-            <el-table-column
-              prop="freeCoin"
-              sortable="custom"
-              label="免费金币"
-              width="110"
-            >
+              <el-table-column prop="freeGold" sortable="custom" label="免费金币" width="110">
                 <template #default="scope">
-                <span>{{ scope.row.freeCoin / 100 }}</span>
+                  <span>{{ calculateFreeGold(scope.row) / 100 }}</span>
                 </template>
               </el-table-column>
-            <el-table-column
-              prop="taskCoin"
-              sortable="custom"
-              label="任务金币"
-              width="110"
-            >
+              <el-table-column prop="taskGold" sortable="custom" label="任务金币" width="110">
                 <template #default="scope">
-                <span>{{ scope.row.taskCoin / 100 }}</span>
+                  <span>{{ scope.row.taskGold / 100 }}</span>
                 </template>
               </el-table-column>
-            <el-table-column prop="name" label="提交人" width="110" />
-            <el-table-column
-              prop="createTime"
-              sortable="custom"
-              label="更新时间"
-              width="210"
-              show-overflow-tooltip
-            >
+              <el-table-column prop="adminName" label="提交人" width="110" />
+              <el-table-column prop="auditTime" sortable="custom" label="更新时间" width="210" show-overflow-tooltip>
                 <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>
@@ -797,24 +459,14 @@ onMounted(async function () {
 
           <!-- 此处分页 -->
           <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>
+            <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>
-  <!-- </div> -->
-  <!-- 客户金币余额的布局---------------------------------------------------------- -->
-  <!-- <div v-else-if="activeTab === 'goldInfo'"> -->
 
-  <!-- </div> -->
   </div>
 </template>
 
@@ -850,5 +502,4 @@ onMounted(async function () {
 .el-progress-bar__inner {
   transition: width 0.5s ease;
 }
-
 </style>

vite.config.ts

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