Merge branch 'lihuilin/feature-20250623164044-金币前端' into milestone-20250623-金币前端

fix:修改合并出现问题

.env.development

@@ -1,5 +1,6 @@
-# VITE_API_BASE='http://54.251.137.151:10704/'
-# VITE_API_BASE='http://192.168.8.94:8080/'
+VITE_API_BASE='http://192.168.8.94:8081/'
 # 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.9.28:8081/'
+# VITE_API_BASE='18.143.76.3:10703/'
+

src/router/index.js

@@ -2,15 +2,15 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 
 const router = createRouter({
     history: createWebHashHistory(),
-    routes: [
-        { path: '/login', name: "login", component: () => import("../views/login.vue") },
-        { path: '/', redirect: "/login" },
+    routes: [//此处在做登录之前做成默认跳转工作台
+        { path: '/workspace', name: "workspace", component: () => import("../views/workspace/index.vue") },
+        { path: '/', redirect: "/login-hxl" },
+        {path: "/login-hxl",name: "login-hxl",component: () => import("../views/login-hxl.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自己看
 })
 
 // 请求拦截器

src/views/consume/beanConsume.vue

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

src/views/consume/coinConsume.vue

@@ -3,14 +3,14 @@
     <!-- 这里放置标签切换的按钮 -->
     <el-button-group>
     <!-- 切换后状态显示 primary 样式否则是默认样式 -->
-      <el-button 
-        :type="activeTab === 'add' ? 'primary' : 'default'" 
+      <el-button
+        :type="activeTab === 'add' ? 'primary' : 'default'"
         @click="goToAdd"
       >
         新增消耗
       </el-button>
-      <el-button 
-        :type="activeTab === 'detail' ? 'primary' : 'default'" 
+      <el-button
+        :type="activeTab === 'detail' ? 'primary' : 'default'"
         @click="goToDetail"
       >
         金币消耗明细

src/views/consume/coinConsumeDetail.vue

@@ -1,159 +1,233 @@
 <script setup>
-import { ref, onMounted, reactive, computed } from 'vue'
-import ElementPlus from 'element-plus'
-import { AiFillRead } from 'vue-icons-plus/ai'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import axios from 'axios'
+import {computed, onMounted, ref} from 'vue'
+import {dayjs, ElMessage} from 'element-plus'
 import request from '@/util/http'
-// 变量
+
+// 之后整理一下
+
+/*
+====================工具方法==============================
+*/
+
+// 时间格式化
+const formatTime = (val) => val ? dayjs(val).format('YYYY-MM-DD HH:mm:ss') : ''
+
+/*
+====================数据=================================
+*/
 //这是获取用户信息的接口
 const adminData = ref({})
-const getAdminData = async function () {
-  try {
-    const result = await request({
-      url: '/admin/userinfo',
-      data: {}
-    })
-    adminData.value = result
-    console.log('请求成功', result)
-    console.log('用户信息', adminData.value)
-  } catch (error) {
-    console.log('请求失败', error)
-  }
-}
 // 充值明细表格
 const tableData = ref([])
-// 搜索======================================
-// 搜索detailVo
-const detailVo = ref({})
+
+// 搜索consumeUser 表单
+const consumeUser = ref({
+  jwcode: null,
+  payPlatform: "",
+  market: "",
+
+  startTime: '',
+  endTime: '',
+
+  goodsName: '',
+
+
+})
+
+
 // 搜索对象
 const getObj = ref({
   pageNum: 1,
   pageSize: 50
 })
+
 //分页总条目
 const total = ref(100)
+
 // 搜索对象时间
-const getTime = ref([])
+const getTime = ref({
+  startTime: '',
+  endTime: ''
+})
 // 搜索活动列表
 const activity = ref([])
-// 所有信息
-const allData = ref([])
+
 // 搜索地区列表
-const area = ref([])
+const market = ref([])
 
-//标签页默认高亮选项
-const activeName = ref('all')
+// 新增排序字段和排序方式
+const sortField = ref('')
+const sortOrder = ref('')
 
 // 消费平台选项
 const consumePlatform = [
   {
-    value: '4',
+    value: '金币系统',
     label: '金币系统'
   },
 
   {
-    value: '1',
+    value: 'Homily Chart',
     label: 'Homily Chart'
   },
   {
-    value: '2',
+    value: 'Homily Link',
     label: 'Homily Link'
   },
   {
-    value: '3',
+    value: 'ERP系统',
     label: 'ERP系统'
   }
 ]
 
-// //表格高度
-// const tableHeight = computed(function () {
-//   return (getObj.value.pageSize + 1) * 41 + "px";
-// });
-// 方法
 // 合计数的显示数据
 const tableDataTotal = ref({})
-const rechargeCoin = ref(0)
-const freeCoin = ref(0)
-const taskCoin = ref(0)
-const totalCoin = ref(0)
-// 搜索=========================================================================================================================================================
-// 搜索方法
-const get = async function (val) {
+
+const permanentGold = ref(0)
+const freeGold = ref(0)
+const taskGold = ref(0)
+const totalGold = ref(0)
+// 定义响应式变量存储金币合计数
+const permanentGolds = ref(0)
+const freeGolds = ref(0)
+const taskGolds = ref(0)
+// 查询商品的接口的表单
+const goods = ref([])
+
+const totalGoldSearch = ref({
+  payPlatform: "",
+  market: "",
+  startTime: "",
+  endTime: "",
+  goodsName: ""
+})
+
+/*
+====================方法=================================
+*/
+// 获取登录用户信息
+const getAdminData = async function () {
   try {
-    // 地区赋值
-    if (adminData.value.area != '总部') {
-      detailVo.value.area = adminData.value.area
-    }
+    const result = await request({
+      url: '/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)
-
-    // 修改为保留两位小数
-    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)
-    )
+    const sumGoldList = tableData.value.map(item => item.sumGold);
+    console.log("sumGold", sumGoldList); // 输出包含所有 sumGold 值的数组
+
+    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(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate()
+  const startTime = new Date(
+      today.getFullYear(),
+      today.getMonth(),
+      today.getDate()
   )
-  const endDate = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate() + 1
+  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(
-    yesterday.getFullYear(),
-    yesterday.getMonth(),
-    yesterday.getDate()
+  const startTime = new Date(
+      yesterday.getFullYear(),
+      yesterday.getMonth(),
+      yesterday.getDate()
   )
-  const endDate = new Date(
-    yesterday.getFullYear(),
-    yesterday.getMonth(),
-    yesterday.getDate() + 1
+  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(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate() - 6
+  const startTime = new Date(
+      today.getFullYear(),
+      today.getMonth(),
+      today.getDate() - 6
   )
-  const endDate = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate() + 1
+  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 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',
+      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,84 @@ const getArea = async function () {
   }
 }
 
-
-// 新增排序字段和排序方式
-const sortField = ref('')
-const sortOrder = ref('')
 // 处理排序事件
 const handleSortChange = (column) => {
   console.log('排序字段：', column.prop)
   console.log('排序方式：', column.order)
-  if (column.prop === 'rechargeCoin') {
-    sortField.value = 'recharge_coin'
-  } else if (column.prop === 'taskCoin') {
-    sortField.value = 'task_coin'
-  } else if (column.prop === 'freeCoin') {
-    sortField.value = 'free_coin'
+  if (column.prop === 'permanentGold') {
+    sortField.value = 'permanentGold'
+  } else if (column.prop === 'taskGold') {
+    sortField.value = 'taskGold'
+  } else if (column.prop === 'freeGold') {
+    sortField.value = 'freeGold'
   } else if (column.prop === 'createTime') {
-    sortField.value = 'create_time'
+    sortField.value = 'createTime'
   }
   sortOrder.value = column.order === 'ascending' ? 'DESC' : 'ASC'
-  get()
+  ConsumeSelectBy()
 }
+
 const handlePageSizeChange = function (val) {
   getObj.value.pageSize = val
-  get()
+  ConsumeSelectBy()
 }
+
 const handleCurrentChange = function (val) {
   getObj.value.pageNum = val
-  get()
+  ConsumeSelectBy()
+}
+// 验证跳转输入框的数字是否合法
+const checkNumber = function () {
+  if (typeof parseInt(getObj.value.pageNum) === 'number') {
+    console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
+    if (
+        getObj.value.pageNum > 0 &&
+        getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
+    ) {
+      getObj.value.pageNum = parseInt(getObj.value.pageNum)
+      console.log('输入的数字合法')
+      ConsumeSelectBy()
+    } else {
+      //提示
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      })
+    }
+  } else {
+    //提示
+    ElMessage({
+      type: 'error',
+      message: '请检查输入内容'
+    })
+  }
 }
+
+/*
+====================计算属性=================================
+*/
+
+// 计算总金币数
+const sumGold = computed(() => permanentGolds.value + freeGolds.value + taskGolds.value)
+
+/*
+====================监听=================================
+*/
+
+/*
+====================挂载=================================
+*/
+
+
+onMounted(async function () {
+  await getAdminData()
+  await ConsumeSelectBy()
+  // getActivity();
+  await getMarket()
+  await getGoods()
+})
+
+
 </script>
 
 <template>
@@ -359,18 +446,18 @@ const handleCurrentChange = function (val) {
             <div class="head-card-element">
               <el-text class="mx-1" size="large">商品名称：</el-text>
               <el-select
-                v-model="detailVo.productName"
-                placeholder="请选择商品名称"
-                size="large"
-                style="width: 180px"
-                clearable
+                  v-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"
+                    v-for="(item, index) in goods"
+                    :key="index"
+                    :label="item"
+                    :value="item"
                 />
               </el-select>
             </div>
@@ -379,17 +466,17 @@ const handleCurrentChange = function (val) {
             <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
+                  v-model="consumeUser.market"
+                  placeholder="请选择所属地区"
+                  size="large"
+                  style="width: 180px"
+                  clearable
               >
                 <el-option
-                  v-for="(item, index) in area"
-                  :key="index"
-                  :label="item"
-                  :value="item"
+                    v-for="(item, index) in market"
+                    :key="index"
+                    :label="item"
+                    :value="item"
                 />
               </el-select>
             </div>
@@ -398,17 +485,17 @@ const handleCurrentChange = function (val) {
             <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
+                  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"
+                    v-for="item in consumePlatform"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
                 />
               </el-select>
             </div>
@@ -417,7 +504,7 @@ const handleCurrentChange = function (val) {
             <div class="head-card-element">
               <el-text class="mx-1" size="large">消费类型：</el-text>
               <el-select
-                v-model="detailVo.consumeType"
+                v-model="consumeUser.consumeType"
                 placeholder="请选择消费类型"
                 size="large"
                 style="width: 240px"
@@ -438,23 +525,25 @@ const handleCurrentChange = function (val) {
             <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="结束时间"
+                  v-model="getTime"
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="起始时间"
+                  end-placeholder="结束时间"
               />
               <el-button style="margin-left: 10px" @click="getToday()"
-                >今</el-button
+              >今
+              </el-button
               >
               <el-button @click="getYesterday()">昨</el-button>
               <el-button @click="get7Days()">近7天</el-button>
-            <!-- </div>
-          </el-col>
-          <el-col :span="3">
-            <div class="head-card-btn"> -->
+              <!-- </div>
+            </el-col>
+            <el-col :span="3">
+              <div class="head-card-btn"> -->
               <el-button type="success" @click="reset()">重置</el-button>
               <el-button type="primary" @click="search()">查询</el-button>
+
               <el-button type="primary" @click="exportExcel()">导出excel</el-button>
             </div>
           </el-col>
@@ -466,59 +555,56 @@ 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"
+              :data="tableData"
+              style="width: 100%"
+              height="576px"
+              @sort-change="handleSortChange"
           >
             <el-table-column
-              type="index"
-              label="序号"
-              width="100px"
-              fixed="left"
+                type="index"
+                label="序号"
+                width="100px"
+                fixed="left"
             >
               <template #default="scope">
                 <span>{{
-                  scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
-                }}</span>
+                    scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
+                  }}</span>
               </template>
             </el-table-column>
             <!-- 固定姓名列 -->
             <el-table-column
-              prop="username"
-              label="姓名"
-              width="150px"
-              fixed="left"
+                prop="name"
+                label="姓名"
+                width="150px"
+                fixed="left"
             />
             <!-- 固定精网号列 -->
             <el-table-column
-              prop="jwcode"
-              label="精网号"
-              width="110px"
-              fixed="left"
+                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="market" label="所属地区" width="110px"/>
+            <el-table-column prop="goodsName" label="商品" width="160px"  show-overflow-tooltip/>
             <el-table-column
-              prop="consumePlatform"
-              label="消费平台"
-              width="120px"
+                prop="payPlatform"
+                label="消费平台"
+                width="120px"
             >
               <template #default="scope">
                 <!-- 使用非严格相等比较 -->
-                <span v-if="scope.row.consumePlatform == 1">Homily Chart</span>
-                <span v-if="scope.row.consumePlatform == 2">Homily Link</span>
-                <span v-if="scope.row.consumePlatform == 3">ERP系统</span>
-                <span v-if="scope.row.consumePlatform == 4">金币系统</span>
+                {{ scope.row.payPlatform }}
+                <!--                <span scope.row.consumePlatform == 1">Homily Chart</span>-->
+
               </template>
             </el-table-column>
             <!-- <el-table-column
@@ -527,63 +613,62 @@ const handleCurrentChange = function (val) {
               width="120px"
             /> -->
             <el-table-column
-              prop="rechargeTotal"
-              label="消费金币总数"
-              width="120px"
+                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"
+                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"
+                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"
+                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
+                prop="remark"
+                label="备注"
+                width="200px"
+                show-overflow-tooltip
             />
-            <el-table-column prop="name" label="提交人" width="110px" />
+            <el-table-column prop="adminName" label="提交人" width="110px"/>
             <el-table-column
-              prop="createTime"
-              label="消费时间"
-              sortable="“custom”"
-              width="180px"
+                prop="createTime"
+                label="消费时间"
+                sortable="“custom”"
+                width="180px"
             />
           </el-table>
         </div>
@@ -591,13 +676,13 @@ const handleCurrentChange = function (val) {
         <!-- 分页 -->
         <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"
+              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>

src/views/home.vue

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

src/views/index.vue

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

src/views/login-hxl.vue

@@ -0,0 +1,277 @@
+<template>
+  <div class="total">
+    <div
+      class="box"
+      :class="{ 'box-animaToR': isAnimating, 'box-animaToL': !isAnimating }"
+      @click="startAnimation1"
+    >
+      <div v-if="!isTextAnimating">
+        <span class="title" :class="{ 'title-animaT': isAnimating }"
+          >管理员登录</span
+        >
+        <el-icon
+          class="right"
+          :class="{ 'arrow-anima': !isAnimating, 'title-animaT': isAnimating }"
+        >
+          <Right />
+        </el-icon>
+      </div>
+
+      <div v-else>
+        <span class="title" :class="{ 'title-animaT': !isAnimating }"
+          >用户登录</span
+        >
+        <el-icon
+          class="left"
+          :class="{ 'arrow-anima': isAnimating, 'title-animaT': !isAnimating }"
+        >
+          <Back />
+        </el-icon>
+      </div>
+    </div>
+
+    
+    <div class="login admin">
+      <div class="loginTitle">管理员登录</div>
+      <el-form :model="userInfo" label-width="auto" style="max-width: 600px">
+        <el-form-item label="账号">
+          <el-input v-model="userInfo.username" />
+        </el-form-item>
+        <el-form-item label="密码">
+          <el-input v-model="userInfo.password" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="success" style="width: 100%" @click="login()"
+            >登录</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import axios from "axios";
+import API from "@/util/http";
+import { useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+const router = useRouter();
+const firstAnimating = ref(false);
+const isAnimating = ref(false);
+const isTextAnimating = ref(false);
+const startAnimation = () => {
+  isAnimating.value = !isAnimating.value;
+  setTimeout(() => {
+    isTextAnimating.value = !isTextAnimating.value;
+  }, 400);
+};
+
+const userInfo = ref({
+  username: "12345678",
+  password: "123456",
+});
+
+const getQueryVariable = (variable) => {
+  const href = window.location.href;
+  const query = href.split("?")[1];
+  console.log("query", query);
+  const vars = query.split("&");
+  for (let i = 0; i < vars.length; i++) {
+    const pair = vars[i].split("=");
+    if (pair[0] === variable) {
+      return pair[1];
+    }
+  }
+  return "";
+};
+
+const login = async function () {
+  const machineId = getQueryVariable("machineId");
+  console.log(machineId);
+  try {
+    const result = await axios.post(`http://18.143.76.3:10704/admin/login`, {
+      account: userInfo.value.username,
+      password: userInfo.value.password,
+      machineId: machineId,
+    });
+    // const result = await API({
+    //   url: "/admin/login",
+    //   data: {
+    //     account: userInfo.username,
+    //     password: userInfo.password,
+    //     machineId: "",
+    //   },
+    // });
+
+    console.log("请求成功", result);
+    if (result.data.code == 200) {
+      ElMessage.success('登录成功');
+      router.push({
+        name: "workspace",
+      });
+    } else {
+      ElMessage.error(result.data.msg);
+    }
+  } catch (error) {
+    console.log("请求失败", error);
+  }
+};
+</script>
+
+<style scoped>
+.login {
+  position: absolute;
+  z-index: 1;
+  width: 30%;
+}
+
+.loginTitle {
+  font-size: 48px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.user {
+  top: 30%;
+  left: 10%;
+}
+
+.admin {
+  top: 30%;
+  left: 55%;
+}
+
+.total {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.title {
+  position: absolute;
+  font-size: 48px;
+  font-weight: bold;
+  top: 40%;
+  left: 30%;
+  z-index: 2;
+}
+
+.title-animaT {
+  animation: textAnimaT 0.7s forwards;
+}
+
+.title-animaF {
+  animation: textAnimaF 0.7s forwards;
+}
+
+@keyframes textAnimaF {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes textAnimaT {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.box {
+  width: 50%;
+  height: 100%;
+  margin: 0;
+  background: linear-gradient(90deg, #ffae00, #ffffff);
+  border-radius: 5%;
+  z-index: 99;
+}
+
+.box-animaToR {
+  animation: animaToR 1s forwards;
+}
+
+.box-animaToL {
+  animation: animaToL 1s forwards;
+}
+
+@keyframes animaToR {
+  0% {
+    transform: translateX(0) scaleX(1);
+    background: linear-gradient(90deg, #ffffff, #29e6ff);
+  }
+
+  /* 50% {
+        transform: translateX(50%) scaleX(2);
+    } */
+
+  100% {
+    transform: translateX(100%) scaleX(1);
+    background: linear-gradient(90deg, #ffffff, #29e6ff);
+  }
+}
+
+@keyframes animaToL {
+  0% {
+    transform: translateX(100%) scaleX(1);
+  }
+
+  /* 50% {
+        transform: translateX(50%) scaleX(2);
+    } */
+
+  100% {
+    transform: translateX(0%) scaleX(1);
+    background: linear-gradient(90deg, #ffae00, #ffffff);
+  }
+}
+
+.right {
+  position: absolute;
+  right: 10%;
+  top: 40%;
+  font-size: 72px;
+}
+
+.left {
+  position: absolute;
+  left: 10%;
+  top: 40%;
+  font-size: 72px;
+  z-index: 2;
+}
+
+.arrow-anima {
+  animation: arrowAnima 1s infinite;
+}
+
+@keyframes arrowAnima {
+  0% {
+    transform: translateX(0);
+  }
+
+  50% {
+    transform: translateX(10px);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+</style>

src/views/login.vue

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

src/views/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,690 @@
+<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.adminId
+    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,
+      // 添加固定的 adminId
+      adminId: fixedAdminId 
+     }
+
+     // 将永久金币数、免费金币数和充值金额数乘以 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.adminId
+    recharge.value.market = adminData.value.market
+    recharge.value.voucher = ''
+    recharge.value.rechargeWay = '客服充值'
+    recharge.value.freeGold = ''
+    recharge.value.money = null
+    recharge.value.permanentGold = ''
+    recharge.value.rateId = null
+    imageUrl.value = ''
+    Rate.value = null
+    user.value = {}
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+//添加充值信息前的按钮点击事件，进行表单验证和用户确认操作
+const addBefore = () => {
+  Ref.value.validate(async (valid) => {
+    if (valid) {
+      if (Rate.value == null || Rate.value == '' || Rate.value == undefined) {
+        ElMessage({
+          type: 'error',
+          message: '请选择币种'
+        })
+        return
+      }
+      if(recharge.value.money == null || recharge.value.money == '' || recharge.value.money == undefined){
+        ElMessage({
+          type: 'error',
+          message: '请输入充值金额'
+        })
+        return
+      }
+      // 根据选择的货币名称找到对应的 rateId
+      const selectedRate = rateName.find(item => item.value === Rate.value)
+      if (selectedRate) {
+        recharge.value.rateId = selectedRate.rateId
+      }
+      ElMessageBox.confirm('确认添加？')
+        .then(() => {
+          add()
+          console.log('添加成功')
+        })
+        .catch(() => {
+          console.log('取消添加')
+        })
+    } else {
+      //提示
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      })
+    }
+  })
+}
+
+// 表单验证
+// 开始时间改变时，重新验证结束时间
+const Ref = ref(null)
+
+
+const rules = reactive({
+  jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }],
+  activity: [{ required: true, message: '请选择活动名称', trigger: 'blur' }],
+  permanentGold: [{ required: true, message: '请输入永久金币数', trigger: 'blur' },
+    {validator: (rule, value, callback) => {
+        if (value >= 0) {
+          callback()
+        } else {
+          callback(new Error('输入金额至少为0'))
+        }}}],
+  freeGold: [{required: true, message: '请输入免费金币数', trigger: 'blur' },
+    {
+      validator: (rule, value, callback) => {
+        // 将值转换为数字(可行吗？？)
+        // 好的不可行
+        const numValue = Number(value);
+        if (isNaN(numValue)) {
+          callback(new Error('请输入有效的数字'));
+        } else if (numValue >= 0) {
+          callback();
+        } else {
+          callback(new Error('输入金额至少为 0'));
+        }
+      },
+      trigger: 'blur'
+    }
+  ],
+  money: [
+    {
+      required: true,
+      message: '请选择货币名称',
+      trigger: 'blur'
+    }
+  ],
+  'recharge.money': [
+    {
+      required: true,
+      message: '请输入充值金额',
+      trigger: 'blur'
+    }
+    
+  ],
+  payModel: [{ required: true, message: '请选择付款方式', trigger: 'blur' }],
+  payTime: [{ required: true, message: '请选择交款时间', trigger: 'blur' }]
+})
+
+// 查找客户信息的方法
+const user = ref({})
+const getUser = async function (jwcode) {
+  trimJwCode();
+  try {
+
+    // 发送POST请求
+    const result = await API({
+      url: '/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.adminId,
+    adminId: fixedAdminId,
+    market: adminData.value.market,
+    voucher: '',
+    rechargeWay: '客服充值',
+    freeGold: Number(),
+    money: null,
+    permanentGold: Number(),
+    rateId: null
+  }
+  imageUrl.value = ''
+  Rate.value = ''
+}
+
+
+onMounted(async function () {
+  await getAdminData()
+  // await getCurrency()
+  await getActivity()
+  
+})
+</script>
+
+<template>
+  <div>
+
+  <el-form
+    :model="recharge"
+    ref="Ref"
+    :rules="rules"
+    label-width="auto"
+    style="max-width: 600px"
+    class="add-form"
+  >
+    <el-form-item prop="jwcode" label="精网号">
+      <el-input v-model="recharge.jwcode" style="width: 220px" />
+      <el-button
+        type="primary"
+        @click="getUser(recharge.jwcode)"
+        style="margin-left: 20px"
+        
+        >查询</el-button
+      >
+    </el-form-item>
+    <el-form-item prop="activity" label="活动名称">
+      <el-select
+        v-model="recharge.activity"
+        placeholder="请选择"
+        style="width: 300px"
+        @change="handleActivityChange"
+      >
+        <el-option
+          v-for="(item, index) in activity"
+          :key="index"
+          :label="item"
+          :value="item"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item prop="permanentGold" label="永久金币">
+      <el-input v-model="recharge.permanentGold" style="width: 100px" />
+      <p style="margin-right: 20px">个</p>
+      <p>免费金币</p>
+      <el-input v-model="recharge.freeGold" style="width: 100px" />
+      <p>个</p>
+    </el-form-item>
+    <el-form-item label="充值金额">
+      <el-select
+        prop="money"
+        v-model="Rate"
+        placeholder="货币名称"
+        style="width: 95px; margin-right: 5px"
+        aria-required="true"
+      >
+        <el-option
+          v-for="item in rateName"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      <el-input prop="recharge.money" v-model="recharge.money" style="width: 200px" aria-required="true"/>
+    </el-form-item>
+    <el-form-item prop="payModel" label="收款方式">
+      <el-select
+        v-model="recharge.payModel"
+        placeholder="请选择"
+        style="width: 300px"
+      >
+        <el-option
+          v-for="item in payModel"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item prop="payTime" label="交款时间">
+      <!-- 修改 type 属性为 datetime 以支持时分秒选择 -->
+      <el-date-picker
+        v-model="recharge.payTime"
+        type="datetime"
+        style="width: 300px"
+      />
+    </el-form-item>
+    <el-form-item
+      prop="voucher"
+      label="交款凭证"
+      style="margin-bottom: 5px"
+    >
+      <el-upload
+        action="http://39.101.133.168:8828/hljw/api/aws/upload"
+        class="avatar-uploader"
+        :show-file-list="false"
+        :on-success="handleAvatarSuccess"
+        :before-upload="beforeAvatarUpload"
+        style="width: 100px; height: 115px"
+      >
+        <img
+          v-if="imageUrl"
+          :src="imageUrl"
+          class="avatar"
+          style="width: 100px; height: 115px"
+        />
+        <el-icon
+          v-else
+          class="avatar-uploader-icon"
+          style="width: 100px; height: 100px"
+        >
+          <Plus />
+        </el-icon>
+      </el-upload>
+      <p style="margin-left: 10px; color: rgb(177, 176, 176)">
+        仅支持.jpg .png格式，文件≤1MB
+      </p>
+    </el-form-item>
+    <el-form-item prop="remark" label="备注">
+      <el-input
+        v-model="recharge.remark"
+        style="width: 300px"
+        :rows="2"
+        maxlength="100"
+        show-word-limit
+        type="textarea"
+      />
+    </el-form-item>
+    <el-form-item prop="adminId" label="提交人">
+      <el-input
+        style="width: 300px"
+        :value="adminData.adminId"
+        disabled
+        placeholder="提交人姓名"
+      />
+    </el-form-item>
+    <el-button @click="deleteRecharge" style="margin-left: 280px" type="success"
+      >重置</el-button
+    >
+    <el-button type="primary" @click="addBefore"> 提交 </el-button>
+  </el-form>
+
+  <!-- 客户信息栏 -->
+  <el-card v-if="user.jwcode"
+    style="width: 1200px; float: right"
+    class="customer-info"
+    width="3000px"
+  >
+    <el-form
+      :model="user"
+      label-width="auto"
+      style="max-width: 1200px"
+      label-position="left"
+    >
+      <el-text size="large" style="margin-left: 20px">客户信息</el-text>
+      <el-row style="margin-top: 20px">
+        <el-col :span="10">
+          <el-form-item label="姓名:">
+            <p>{{ user.name }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="14">
+          <el-form-item label="历史金币总数">
+            <!-- 检查 user.historySumGold 是否为有效的数字 -->
+            <p style="color: #2fa1ff; margin-right: 5px" v-if="!isNaN(Number(user.historySumGold))">
+              {{ Number(user.historySumGold ) }}
+            </p>
+            <span
+              style="display: inline; white-space: nowrap; color: #b1b1b1"
+              v-if="user.historyPermanentGold !== undefined"
+              >(永久金币:{{ user.historyPermanentGold }};免费金币:{{
+                (user.historyFreeGold)
+              }};任务金币:{{ user.historyTaskGold }})</span>
+            <!-- 如果不是有效的数字，显示默认值 -->
+            <p v-else></p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item label="精网号">
+            <p>{{ user.jwcode }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="14">
+          <el-form-item label="当前金币总数" style="width: 500px">
+            <span
+              style="color: #2fa1ff; margin-right: 5px"
+              v-if="user.nowPermanentGold !== undefined"
+              >{{
+                (user.nowSumGold)
+              }}</span
+            >
+            <span
+              style="display: inline; white-space: nowrap; color: #b1b1b1"
+              v-if="user.nowPermanentGold !== undefined"
+              >(永久金币:{{ user.nowPermanentGold}};免费金币:{{
+                (user.nowFreeGold)
+              }};任务金币:{{ user.nowTaskGold }})</span
+            >
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item label="首次充值日期">
+            <p v-if="user.firstRecharge">
+              {{ moment(user.firstRecharge).format('YYYY-MM-DD HH:mm:ss') }}
+            </p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="14">
+          <el-form-item label="充值次数">
+            <p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
+          </el-form-item>
+        </el-col>
+        <!-- <el-col :span="10">
+          <el-form-item label="负责客服">
+            <p>{{ adminData.name }}</p>
+          </el-form-item>
+        </el-col> -->
+        <el-col :span="10">
+          <el-form-item label="消费次数">
+            <p style="color: #2fa1ff">{{ user.consumeNum }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item label="所属门店">
+            <p>{{ user.market }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="14">
+          <!-- <el-form-item label="待审核">
+            <p style="color: #2fa1ff">
+              {{ user.A }}
+            </p>
+          </el-form-item> -->
+        </el-col>
+      </el-row>
+    </el-form>
+  </el-card>
+
+  
+</div>
+</template>
+
+<style scoped>
+p {
+  margin: 0px;
+}
+
+.batch-btn {
+  margin-top: 20px;
+  margin-left: auto;
+}
+
+.el-form-item {
+  margin-left: 50px;
+}
+
+/* 上传图片的格式 */
+.avatar-uploader .avatar {
+  width: 50px;
+  height: 50px;
+  display: block;
+}
+</style>
+
+<style>
+.error-message {
+  color: red;
+  font-size: 8px;
+}
+
+.is-invalid .el-input__inner {
+  border-color: red;
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+}
+
+.add-form {
+  margin-top: 50px;
+  max-width: 50%;
+  float: left;
+}
+
+.customer-info {
+  max-width: 60%;
+}
+</style>

src/views/recharge/beanRecharge.vue

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

src/views/recharge/coinRechargeDetail.vue

@@ -0,0 +1,587 @@
+<script setup>
+import { ref, onMounted, reactive, computed } from 'vue'
+import ElementPlus from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { AiFillRead } from 'vue-icons-plus/ai'
+import axios from 'axios'
+import moment from 'moment'
+import API from '@/util/http'
+//这是获取用户信息的接口
+const adminData = ref({})
+const getAdminData = async function () {
+  try {
+    const result = await API({ url: '/admin/userinfo', data: {} })
+    adminData.value = result
+    rechargeUser.value.adminId = adminData.value.adminId
+    console.log('请求成功', result)
+    console.log('用户信息', adminData.value)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+// 变量
+// 充值明细表格
+const tableData = ref([])
+// 搜索===========================================
+// 搜索recharge
+const rechargeUser = ref({
+  adminId: adminData.value.adminId
+})
+// 搜索对象
+const getObj = ref({
+  pageNum: 1,
+  pageSize: 50
+})
+//分页总条目
+const total = ref(100)
+// 搜索对象时间
+const getTime = ref([])
+// 搜索活动列表
+const activity = ref([])
+// 所有信息
+const allData = ref([])
+// 搜索地区列表
+const market = ref([])
+
+//时间格式化
+const formatTime = (val) => val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ''
+
+// 初始化 money 和 permanentGold 和 freeGold
+const money = ref(0)
+const permanentGold = ref(0)
+const freeGold = ref(0)
+
+
+// 定义响应式变量存储金币合计数
+const permanentGolds = ref(0)
+const freeGolds = ref(0)
+
+
+// 支付方式选项
+const payModel = [
+  {
+    value: '微信',
+    label: '微信'
+  },
+  {
+    value: '支付宝',
+    label: '支付宝'
+  },
+  {
+    value: '银联',
+    label: '银联'
+  },
+  {
+    value: '信用卡',
+    label: '信用卡'
+  },
+  {
+    value: '借记卡',
+    label: '借记卡'
+  },
+  {
+    value: '现金充值',
+    label: '现金充值'
+  }
+]
+// 删除==========================================================
+// 删除对象
+const delObj = ref({})
+
+// 获取活动名称
+const getActivity = async function () {
+  try {
+    // 发送POST请求
+    const result = await API({ url: '/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)/100
+      freeGolds.value = (Number(data.freeGolds) || 0)/100
+      
+    }
+    
+    // 将响应结果存储到响应式数据中
+    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 checkNumber = function () {
+  if (typeof parseInt(getObj.value.pageNum) === 'number') {
+    console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
+    if (
+      getObj.value.pageNum > 0 &&
+      getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
+    ) {
+      getObj.value.pageNum = parseInt(getObj.value.pageNum)
+      console.log('输入的数字合法')
+      get()
+    } else {
+      //提示
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      })
+    }
+  } else {
+    //提示
+    ElMessage({
+      type: 'error',
+      message: '数字输入有误'
+    })
+  }
+}
+
+// 挂载
+onMounted(async function () {
+  await getAdminData()
+  await get()
+  await getActivity()
+  await getArea()
+  await getPlatform()
+})
+// 新增排序字段和排序方式
+const sortField = ref('')
+const sortOrder = ref('')
+// 处理排序事件
+const handleSortChange = (column) => {
+
+  console.log('排序字段：', column.prop)
+  console.log('排序方式：', column.order)
+  if (column.prop === 'money') {
+    sortField.value = '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>
+            <!-- </div>
+          </el-col>
+          <el-col :span="3">
+            <div class="head-card-btn"> -->
+              <el-button type="success" @click="reset()">重置</el-button>
+              <el-button type="primary" @click="search()">查询</el-button>
+              <el-button type="primary" @click="exportExcel()">导出Excel</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-col>
+  </el-row>
+  <el-row>
+    <el-col>
+      <el-card>
+        <div>
+          充值金额：{{ permanentGolds.toFixed(2) }}新币，永久金币：{{
+            permanentGolds.toFixed(2)
+          }}金币，免费金币：{{ freeGolds }}金币
+        </div>
+        <!-- 设置表格容器的高度和滚动样式 -->
+        <div style="height: 520px; overflow-y: auto;margin-top: 10px;">
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+            height="520px"
+            @sort-change="handleSortChange"
+          >
+            <el-table-column
+              type="index"
+              label="序号"
+              width="80px"
+              fixed="left"
+            >
+              <template #default="scope">
+                <span>{{
+                  scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              fixed="left"
+              prop="name"
+              label="姓名"
+              width="80px"
+            />
+            <el-table-column
+              fixed="left"
+              prop="jwcode"
+              label="精网号"
+              width="80px"
+            />
+            <el-table-column prop="market" label="所属地区" width="100px" />
+            <el-table-column
+              prop="activity"
+              label="活动名称"
+              width="100px"
+            />
+            <el-table-column prop="rateName" label="货币名称" width="110px" />
+            <el-table-column
+              prop="money"
+              sortable="custom"
+              label="充值金额"
+              width="110px"
+            />
+            <el-table-column
+              prop="permanentGold"
+              label="永久金币"
+              sortable="custom"
+              width="110px"
+            />
+            <el-table-column
+              prop="freeGold"
+              label="免费金币"
+              sortable="custom"
+              width="110px"
+            />
+            <el-table-column
+              prop="payPlatform"
+              label="充值方式"
+              width="100px"
+            />
+            <el-table-column prop="payModel" label="支付方式" width="100px" />
+            <el-table-column
+              prop="remark"
+              label="备注"
+              width="150px"
+              show-overflow-tooltip
+            />
+            
+          
+            <el-table-column prop="adminName" label="提交人" width="100px" />
+            
+            <el-table-column
+              prop="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,599 @@
+
+<script setup>
+import { onMounted, reactive } from 'vue'
+import { ref, computed, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import axios from 'axios'
+import { ElMessageBox } from 'element-plus'
+import API from '@/util/http'
+import moment from 'moment'
+// import _ from 'lodash'
+
+const addRe = ref({
+  typeR: '0'
+})
+
+
+
+//这是获取用户信息的接口
+const adminData = ref({})
+const getAdminData = async function () {
+  try {
+    const result = await API({ url: '/admin/userinfo', data: {} })
+    adminData.value = result
+    addRefund.value.adminId = adminData.value.adminId
+    console.log('请求成功', result)
+    console.log('用户信息', user.value)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+// 精网号去空格
+const trimJwCode = () => {
+  if (addRefund.value.jwcode) {
+    addRefund.value.jwcode = addRefund.value.jwcode.replace(/\s/g, ''); 
+  }
+}
+// 这是添加退款信息的表单
+const addRefund = ref({
+  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.adminId
+  }
+  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,
+      adminId: 1
+    }
+
+    // 发送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 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;
+  }
+  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 permanentGold + freeGold + taskGold;
+})
+
+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">
+        <el-radio value="0" @change="addRe.typeR = '0'">全部退款</el-radio>
+        <el-radio value="1">部分退款</el-radio>
+      </el-radio-group>
+    </el-form-item>
+
+    <div style="display: flex; align-items: center">
+      <el-form-item prop="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

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

src/views/refund/coinRefundDetail.vue

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

vite.config.ts

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