差柱状图、退款审核

# Conflicts:
#	src/views/managerecharge/rate.vue

.env.development

@@ -1,5 +1,5 @@
 # VITE_API_BASE='http://54.251.137.151:10704/'
-# VITE_API_BASE='http://192.168.8.94:8080/'
 # VITE_API_BASE='https://hwjb.homilychart.com/gold_htms_dev'
 # VITE_API_BASE='http://54.251.137.151:10704/'
-VITE_API_BASE='http://192.168.8.225:8080/'
+VITE_API_BASE='http://192.168.8.94:8081/'
+

src/router/index.js

@@ -2,15 +2,14 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 
 const router = createRouter({
     history: createWebHashHistory(),
-    routes: [
-        { path: '/login', name: "login", component: () => import("../views/login.vue") },
-        { path: '/', redirect: "/login" },
+    routes: [//此处在做登录之前做成默认跳转工作台
+        { path: '/workspace', name: "workspace", component: () => import("../views/workspace/index.vue") },
+        { path: '/', redirect: "/workspace" },
         // { path: '/test', component: () => import("../views/z.vue") },
         {
             meta: { requireAuth: true },
-            path: '/index', component: () => import("../views/index.vue"),
+            path: '/', component: () => import("../views/home.vue"),
             children: [
-
                 // 工作台
                 { path: '/workspace/:area?', name: "workspace", component: () => import("../views/workspace/index.vue") },
                 // 充值审核
@@ -19,6 +18,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 +31,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 +65,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 +75,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/audit/rechargeAudit.vue

@@ -7,246 +7,51 @@ import axios from 'axios'
 import request from '@/util/http'
 import moment from 'moment'
 
-// 变量
-// 这是动态表头，
-const columnOptions = ref([
-  { prop: 'username', label: '姓名', width: 125 },
-  { prop: 'jwcode', label: '精网号', width: 125 },
-  { prop: 'area', label: '所属地区', width: 125 },
-  { prop: 'activityName', label: '活动名称', width: 150 },
-  { prop: 'rechargeGold', label: '充值金额', width: 125, sortable: true },
-  { prop: 'rechargeWay', label: '充值方式', width: 125 },
-  { prop: 'paidGold', label: '永久金币', width: 125, sortable: true },
-  { prop: 'freeGold', label: '免费金币', width: 125, sortable: true },
-  { prop: 'remark', label: '备注', width: 200, showOverflowTooltip: true },
-  { prop: 'payWay', label: '支付方式', width: 125 },
-  { prop: 'rechargeVoucher', label: '支付凭证', width: 125 },
-  { prop: 'name', label: '提交人', width: 125 },
-  { prop: 'status', label: '审核状态', width: 125 },
-  { prop: 'reson', label: '驳回理由', width: 200 },
-  { prop: 'rechargeTime', label: '交款时间', width: 200, sortable: true },
-  { prop: 'createTime', label: '提交时间', width: 200, sortable: true },
-  { prop: 'auditTime', label:'审核时间', width:200, sortable:true}
-])
-
-// 默认显示
-const defaultColumns = ['username', 'jwcode', 'area', 'activityName', 'rechargeGold', 'rechargeWay', 'paidGold', 'freeGold', 
-                       'remark', 'payWay', 'rechargeVoucher', 'name', 'status', 'reson', 'rechargeTime',  'createTime', 'auditTime']
-const selectedColumns = ref([...defaultColumns])
-//这是获取用户信息的接口
 const adminData = ref({})
+const Ref = ref(null)
+const rechargeVo = ref({
+  
+})
 const getAdminData = async function () {
   try {
     const result = await request({
-      url: '/admin/userinfo',
+      url: '',
       data: {}
     })
     adminData.value = result
-    console.log('请求成功', result)
     console.log('用户信息', adminData.value)
   } catch (error) {
     console.log('请求失败', error)
   }
 }
-
-// 充值明细表格
-const tableData = ref([])
-// 搜索======================================
-// 搜索rechargeVo
-const rechargeVo = ref({
-  rechargeWay: '客服充值'
-})
 // 搜索对象
 const getObj = ref({
   pageNum: 1,
   pageSize: 50
 })
-//分页总条目
 const total = ref(100)
 // 搜索对象时间
 const getTime = ref([])
-// 搜索活动列表
 const activity = ref([])
-// 所有信息
-const allData = ref([])
-// 搜索地区列表
 const area = ref([])
-
-// 编辑======================================
 // 驳回弹出框
 const rejectVisible = ref(false)
 // 驳回对象
 const rejectObj = ref({})
 // 通过对象
 const passObj = ref({})
-
-//标签页默认高亮选项
-const activeName = ref('all')
-
+const activeName = ref('wait')
 // 支付方式选项
 const payWay = [
   {
     value: '微信',
     label: '微信'
-  },
-  {
-    value: '支付宝',
-    label: '支付宝'
-  },
-  {
-    value: '银联',
-    label: '银联'
-  },
-  {
-    value: '信用卡',
-    label: '信用卡'
-  },
-  {
-    value: '借记卡',
-    label: '借记卡'
+  },{
+    value:'.....................................'// 待补充
   }
 ]
 
-// //表格高度
-// const tableHeight = computed(function () {
-//   return (getObj.value.pageSize + 2) * 60 + "px";
-// });
-
-// 表单验证ref
-const Ref = ref(null)
-
-// 方法
-// 合计数存储
-// 统计合计数
-const trueGold = ref(0)
-const trueCount = ref(0)
-const trueRGold = ref(0)
-const trueFGold = ref(0)
-// 转化一下，保留两位小数，展示时填充转化后的变量名
-const formattedTrueGold = computed(() => trueGold.value.toFixed(2))
-const formattedTrueRGold = computed(() => trueRGold.value.toFixed(2))
-const formattedTrueFGold = computed(() => trueFGold.value.toFixed(2))
-// 待审核条数
-const pendingCount = ref(0)
-// 待审核金币数
-const pendingGold = ref(0)
-const pendingRGold = ref(0)
-const pendingFGold = ref(0)
-// 已通过条数
-const approvedCount = ref(0)
-// 已通过金币数
-const approvedGold = ref(0)
-const approvedRGold = ref(0)
-const approvedFGold = ref(0)
-// 已驳回条数
-const rejectedCount = ref(0)
-// 已驳回金币数
-const rejectedGold = ref(0)
-const rejectedRGold = ref(0)
-const rejectedFGold = ref(0)
-// 搜索==============================================================
-// 搜索方法
-const get = async function (val) {
-  try {
-    // 地区赋值
-    if (adminData.value.area === '泰国') {
-      rechargeVo.value.areas = ['泰国', '越南']
-    } else if (adminData.value.area !== '总部') {
-      rechargeVo.value.area = adminData.value.area
-    }
-    // 搜索参数页码赋值
-    if (typeof val === 'number') {
-      getObj.value.pageNum = val
-    }
-    // 搜索参数时间赋值
-    if (getTime.value != null) {
-      if (getTime.value.startDate != '' && getTime.value.endDate != '') {
-        rechargeVo.value.startDate = getTime.value[0]
-        rechargeVo.value.endDate = getTime.value[1]
-      }
-    } else {
-      rechargeVo.value.startDate = ''
-      rechargeVo.value.endDate = ''
-    }
-    rechargeVo.value.sortField = sortField.value
-    rechargeVo.value.sortOrder = sortOrder.value
-    console.log('搜索参数', getObj.value)
-    // 发送POST请求
-    const result = await request({
-      url: '/recharge/recharge',
-      data: {
-        pageNum: getObj.value.pageNum,
-        pageSize: getObj.value.pageSize,
-        rechargeVo: { ...rechargeVo.value }
-      }
-    })
-    // 合计数的接口
-    // 复制一份 rechargeVo.value 并移除排序字段和排序方式
-    const detailWithoutSort = { ...rechargeVo.value }
-    delete detailWithoutSort.sortField
-    delete detailWithoutSort.sortOrder
-    delete detailWithoutSort.status
-    const result2 = await request({
-      url: '/recharge/recharge/RechargeA',
-      data: detailWithoutSort
-    })
-    // 做一个判断，如果result2.data[i].flag="待审核"，那么 totalData.value = result2.data[i]，否则就赋值为0
-    // 统计合计数
-    if (result2.data) {
-      result2.data.forEach((item) => {
-        switch (item.auditStatus) {
-          case '待审核':
-            // 若 item.raudit 为空则赋值为 0
-            pendingCount.value = item.raudit || 0
-            // 若 item.sumRaudit 为空则赋值为 0
-            pendingGold.value = item.sumRaudit || 0
-            pendingRGold.value = item.sumRaudit1 || 0
-            pendingFGold.value = item.sumRaudit2 || 0
-            break
-          case '已通过':
-            approvedCount.value = item.raudit || 0
-            approvedGold.value = item.sumRaudit || 0
-            approvedRGold.value = item.sumRaudit1 || 0
-            approvedFGold.value = item.sumRaudit2 || 0
-            break
-          case '已驳回':
-            rejectedCount.value = item.raudit || 0
-            rejectedGold.value = item.sumRaudit || 0
-            rejectedRGold.value = item.sumRaudit1 || 0
-            rejectedFGold.value = item.sumRaudit2 || 0
-            break
-        }
-      })
-    }
-
-    trueGold.value = pendingGold.value + approvedGold.value + rejectedGold.value
-    trueCount.value =
-      pendingCount.value + approvedCount.value + rejectedCount.value
-    trueRGold.value =
-      pendingRGold.value + approvedRGold.value + rejectedRGold.value
-    trueFGold.value =
-      pendingFGold.value + approvedFGold.value + rejectedFGold.value
 
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    console.log('这是分页', getObj.value)
-    // 存储表格数据
-    tableData.value = result.data.list
-    console.log('tableData', tableData.value)
-    // 存储分页总数
-    total.value = result.data.total
-    console.log('total', total.value)
-  } catch (error) {
-    console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-}
-// 搜索
-const search = function () {
-  trimJwCode();
-  getObj.value.pageNum = 1
-  get()
-}
 // 重置
 const reset = function () {
   delete rechargeVo.value.activityId
@@ -309,51 +114,9 @@ const get7Days = function () {
   console.log('getTime', getTime.value)
   get()
 }
-//全部充值明细
-const adminAll = function () {
-  console.log('adminAll')
-  rechargeVo.value.status = ''
-  getObj.value.pageNum = 1
-  get()
-}
-//待审核充值明细
-const adminWait = async function () {
-  rechargeVo.value.status = 0
-  getObj.value.pageNum = 1
-  await get()
-  console.log('adminWait')
-  trueCount.value = pendingCount.value
-  trueGold.value = pendingGold.value
-  trueRGold.value = pendingRGold.value
-  trueFGold.value = pendingFGold.value
-}
-//已通过充值明细
-const adminPass = async function () {
-  rechargeVo.value.status = 1
-  getObj.value.pageNum = 1
-  await get()
-  console.log('adminPass')
-  trueCount.value = approvedCount.value
-  trueGold.value = approvedGold.value
-  trueRGold.value = approvedRGold.value
-  trueFGold.value = approvedFGold.value
-}
-//已驳回充值明细
-const adminReject = async function () {
-  rechargeVo.value.status = 2
-  getObj.value.pageNum = 1
-  await get()
-  console.log('adminReject')
-  trueCount.value = rejectedCount.value
-  trueGold.value = rejectedGold.value
-  trueRGold.value = rejectedRGold.value
-  trueFGold.value = rejectedFGold.value
-}
-//点击标签页
-const handleClick = function (tab, event) {
-  if (tab.props.name === 'all') {
-    adminAll()
-  } else if (tab.props.name === 'wait') {
+
+const handleClick = function (tab) {
+  if (tab.props.name === 'wait') {
     adminWait()
   } else if (tab.props.name === 'pass') {
     adminPass()
@@ -361,67 +124,30 @@ const handleClick = function (tab, event) {
     adminReject()
   }
 }
-// 获取活动名称
+
 const getActivity = async function () {
   try {
-    // 发送POST请求
     const result = await request({
-      url: '/recharge/activity/select',
+      url: '',
       data: {}
     })
-
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    // 存储表格数据
     activity.value = result.data
     console.log('activity', activity.value)
   } catch (error) {
     console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
-// 获取地区
+// 地区下拉框
 const getArea = async function () {
   try {
-    // 发送POST请求
     const result = await request({
-      url: '/recharge/user/search',
+      url: '',
       data: {}
     })
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    // 存储地区信息
     area.value = result.data
     console.log('地区', area.value)
   } catch (error) {
     console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-}
-// 验证跳转输入框的数字是否合法
-const checkNumber = function () {
-  if (typeof parseInt(getObj.value.pageNum) === 'number') {
-    console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
-    if (
-      getObj.value.pageNum > 0 &&
-      getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
-    ) {
-      console.log('输入的数字合法')
-      getObj.value.pageNum = parseInt(getObj.value.pageNum)
-      get()
-    } else {
-      //提示
-      ElMessage({
-        type: 'error',
-        message: '请检查输入内容'
-      })
-    }
-  } else {
-    //提示
-    ElMessage({
-      type: 'error',
-      message: '请检查输入内容'
-    })
   }
 }
 const handlePageSizeChange = function (val) {
@@ -432,117 +158,16 @@ const handleCurrentChange = function (val) {
   getObj.value.pageNum = val
   get()
 }
-// 编辑====================================
-// 通过按钮
-const pass = function (row) {
-  // 通过初始化
-  passObj.value = row
-  passObj.value.adminId = adminData.value.adminId
-  passObj.value.auditId = row.auditId
-  // passObj.value.status = 1
-  passObj.value.rechargeId = row.rechargeId
-  passObj.value.detailId = row.detailId
-  passObj.value.jwcode = row.jwcode
-  passObj.value.paidGold = row.paidGold
-  passObj.value.freeGold = row.freeGold
-  passObj.value.adminName = adminData.value.adminName
-
-  console.log('通过对象', passObj.value)
-}
-
-// 通过确认
-const passConfirm = async function () {
-  try {
-    // 也许大概应该在点击确认时改变状态
-    passObj.value.status = 1
-    console.log('通过对象', passObj.value)
-    // 发送POST请求
-    // passObj.value.flag = 0;
-    const result = await request({
-      url: '/audit/audit/goldedit',
-      data: passObj.value
-    })
-
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    // 刷新表格数据
-    get()
-    //提示
-    ElMessage({
-      type: 'success',
-      message: '通过成功！'
-    })
-  } catch (error) {
-    console.error('请求失败', error);
-    ElMessage({
-      type: 'error',
-      message: '出错了，不知道咋回事'
-    });
-  }
-}
 
 // 打开驳回弹出框
-const openRejectVisible = function () {
+const openRej = function () {
   rejectVisible.value = true
 }
 // 关闭驳回弹出框
-const closeRejectVisible = function () {
+const closeRej = function () {
   rejectVisible.value = false
 }
-// 驳回按钮
-const reject = function (row) {
-  // 驳回初始化
-  rejectObj.value.adminId = adminData.value.adminId
-  rejectObj.value.auditId = row.auditId
-  rejectObj.value.status = 2
-  rejectObj.value.reson = ''
-  rejectObj.value.rechargeId = row.rechargeId
-  rejectObj.value.detailId = row.detailId
-  console.log('驳回对象', rejectObj.value)
-  openRejectVisible()
-}
-// 驳回确认
-const rejectConfirm = async function () {
-  Ref.value.validate(async (valid) => {
-    if (valid) {
-      try {
-        console.log('驳回对象', rejectObj.value)
-        // 发送POST请求
-        const result = await request({
-          url: '/audit/audit/goldedit',
-          data: rejectObj.value
-        })
-
-        // 将响应结果存储到响应式数据中
-        console.log('请求成功', result)
-        // 刷新表格数据
-        get()
-        // 关闭弹出框
-        closeRejectVisible()
-        //提示
-        ElMessage({
-          type: 'success',
-          message: '驳回成功！'
-        })
-      } catch (error) {
-        console.log('请求失败', error)
-        // 在这里可以处理错误逻辑，比如显示错误提示等
-      }
-    } else {
-      //提示
-      ElMessage({
-        type: 'error',
-        message: '请检查输入内容'
-      })
-    }
-  })
-}
-
-// 表单验证
 
-const rules = reactive({
-  reson: [{ required: true, message: '请输入驳回理由', trigger: 'blur' }]
-})
 
 // 挂载
 onMounted(async function () {
@@ -558,18 +183,8 @@ const sortOrder = ref('')
 const handleSortChange = (column) => {
   console.log('排序字段：', column.prop)
   console.log('排序方式：', column.order)
-  if (column.prop === 'rechargeGold') {
-    sortField.value = 'recharge_gold'
-  } else if (column.prop === 'freeGold') {
-    sortField.value = 'free_gold'
-  } else if (column.prop === 'rechargeTime') {
-    sortField.value = 'recharge_time'
-  } else if (column.prop === 'createTime') {
-    sortField.value = 'create_time'
-  } else if (column.prop === 'paidGold') {
-    sortField.value = 'paid_gold'
-  }else if (column.prop === 'auditTime') {
-    sortField.value = 'audit_time'
+  if (column.prop === '待补充') {
+    sortField.value = ''
   }
   sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC'
   get()
@@ -586,35 +201,27 @@ const trimJwCode = () => {
 <template>
   <el-row>
     <el-col>
-      <el-card style="margin-bottom: 20px">
-        <el-row style="margin-bottom: 10px">
+      <el-card style="margin-bottom: 5px">
+        <el-row style="margin-bottom: 5px">
           <el-col :span="6">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">精网号：</el-text>
+              <el-text   size="large">精网号：</el-text>
               <el-input v-model="rechargeVo.jwcode" placeholder="请输入精网号" style="width: 240px" clearable />
-            </div>
           </el-col>
           <el-col :span="6">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">活动名称：</el-text>
-              <el-select v-model="rechargeVo.activityId" placeholder="请选择活动名称"  style="width: 240px" 
-                clearable>
-                <el-option v-for="item in activity" :key="item.activityId" :label="item.activityName"
-                  :value="item.activityId" />
+              <el-text   size="large">活动名称：</el-text>
+              <el-select v-model="rechargeVo.activityId" placeholder="请选择活动名称" style="width: 240px" clearable>
+                <el-option v-for="item in activity" :key="item.activityId" :label="item.activityName" :value="item.activityId" />
               </el-select>
-            </div>
           </el-col>
           <el-col :span="6">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">支付方式：</el-text>
+              <el-text   size="large">支付方式：</el-text>
               <el-select v-model="rechargeVo.payWay" placeholder="请选择支付方式" style="width: 240px" clearable>
                 <el-option v-for="item in payWay" :key="item.value" :label="item.label" :value="item.value" />
               </el-select>
-            </div>
           </el-col>
           <el-col :span="6">
             <div class="head-card-element" v-if="adminData.area == '总部'">
-              <el-text class="mx-1" size="large">所属地区：</el-text>
+              <el-text   size="large">所属地区：</el-text>
               <el-select v-model="rechargeVo.area" placeholder="请选择所属地区" style="width: 240px" clearable>
                 <el-option v-for="item in area" :key="item" :label="item" :value="item" />
               </el-select>
@@ -622,38 +229,22 @@ const trimJwCode = () => {
           </el-col>
         </el-row>
         <el-row>
-        <el-col :span="16">
-          <div class="time-controls">
-            <div class="time-group">
-              <el-text class="mx-1" size="large">充值时间：</el-text>
-              <el-date-picker
-                v-model="getTime"
-                type="datetimerange"
-                range-separator="至"
-                start-placeholder="起始时间"
-                end-placeholder="结束时间"
-                style="width: 400px"
-              />
-                  <el-button @click="getToday()" style="margin-left: 10px"> 今 </el-button>
-                  <el-button @click="getYesterday()" style="margin-left: 10px"> 昨 </el-button>
-                  <el-button @click="get7Days()" style="margin-left: 10px"> 近7天 </el-button>
+          <el-col :span="12">
+            <div class="time-controls">
+              <div class="time-group">
+                <el-text   size="large">添加时间：</el-text>
+                <el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间"
+                  end-placeholder="结束时间" style="width: 400px" />
+                <el-button @click="getToday()" style="margin-left: 10px">今</el-button>
+                <el-button @click="getYesterday()" style="margin-left: 10px">昨</el-button>
+                <el-button @click="get7Days()" style="margin-left: 10px">近7天</el-button>
+              </div>
             </div>
-          </div>
-        </el-col>
+          </el-col>
 
-        <el-col :span="8">
-            <el-button @click="reset()" type="success" style="margin-right: 10px">重置</el-button>
-            <el-button type="primary" @click="search()">查询</el-button>
-        </el-col>
-      </el-row>
-        <el-row>
-          <el-col :span="21">
-            <div style="margin-top: 10px">
-              <el-text class="mx-1" size="large">请选择您想看到的数据：</el-text>
-              <el-select v-model="selectedColumns" multiple placeholder="请选择您想看到的数据" size="large" style="width: 800px">
-                <el-option v-for="item in columnOptions" :key="item.prop" :label="item.label" :value="item.prop" />
-              </el-select>
-            </div>
+          <el-col :span="8">
+            <el-button @click="reset()" type="success">重置</el-button>
+            <el-button type="primary" @click="get()">查询</el-button>
           </el-col>
         </el-row>
       </el-card>
@@ -662,94 +253,66 @@ const trimJwCode = () => {
   <el-row>
     <el-col>
       <el-card>
-        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
-          <el-tab-pane label="全部" name="all"></el-tab-pane>
+        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
           <el-tab-pane label="待审核" name="wait"></el-tab-pane>
           <el-tab-pane label="已通过" name="pass"></el-tab-pane>
           <el-tab-pane label="已驳回" name="reject"></el-tab-pane>
 
           <div>
-            总条数：{{ trueCount }}条，总金币数：{{
-              formattedTrueGold
-            }}金币，永久金币：{{ formattedTrueRGold }}金币，免费金币：{{ formattedTrueFGold }}金币
+            总条数：{{ trueCount }}条&nbsp;&nbsp;&nbsp;&nbsp;
+            总金币数：{{ formattedTrueGold }}金币&nbsp;&nbsp;&nbsp;&nbsp;
+            永久金币：{{ formattedTrueRGold }}金币&nbsp;&nbsp;&nbsp;&nbsp;
+            免费金币：{{ formattedTrueFGold }}金币
           </div>
         </el-tabs>
         <div style="height: 540px; overflow-y: auto">
           <el-table :data="tableData" style="width: 100%" height="540px" @sort-change="handleSortChange" :row-style="{ height: '50px' }">
             <el-table-column type="index" label="序号" width="100px" fixed="left">
               <template #default="scope">
-                <span>{{
-                  scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
-                }}</span>
+                <span>{{ scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize }}</span>
               </template>
             </el-table-column>
-            <!-- 动态列 -->
-            <template v-for="col in columnOptions" :key="col.prop">
-              <el-table-column v-if="selectedColumns.includes(col.prop)" :prop="col.prop" :label="col.label"
-                :width="col.width" :sortable="col.sortable ? 'custom' : false"
-                :show-overflow-tooltip="true" >
-                <template #default="scope">
-                  <!-- 特殊列模板 -->
-                  <template v-if="col.prop === 'rechargeTime'">
-                    {{ moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss') }}
-                  </template>
-                  <template v-else-if="col.prop === 'createTime'">
-                    {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
-                  </template>
-                  <template v-else-if="col.prop === 'auditTime'">
-                    {{ scope.row.auditTime ? moment(scope.row.auditTime).format('YYYY-MM-DD HH:mm:ss') : '----' }}
-                  </template>
-                  <template v-else-if="col.prop === 'remark'">
-                    <span>{{ scope.row[col.prop] }}</span>
-                  </template>
-                  <template v-else-if="col.prop === 'rechargeVoucher'">
-                    <el-image :src="scope.row.rechargeVoucher" style="width: 50px; height: 50px" />
-                  </template>
-                  <template v-else-if="col.prop === 'status'">
-                    <div class="status">
-                      <span :class="{
-                        'green-dot': scope.row.status === 1,
-                        'grey-dot': scope.row.status === 0,
-                        'red-dot': scope.row.status === 2
-                      }"></span>
-                      <span>{{
-                        scope.row.status === 1 ? '已通过' :
-                          scope.row.status === 0 ? '待审核' : '已驳回'
-                      }}</span>
-                    </div>
-                  </template>
-                  <template v-else-if="['paidGold', 'freeGold'].includes(col.prop)">
-                    {{ scope.row[col.prop] / 100 }}
-                  </template>
-                  <span v-else>
-                    {{ scope.row[col.prop] }}
-                  </span>
-                </template>
+            <el-table-column fixed="left" prop="username" label="姓名" width="150px" />
+            <el-table-column fixed="left" prop="jwcode" label="精网号" width="110px" />
+            <el-table-column prop="area" label="所属地区" width="100px" />
+            <el-table-column prop="refundType" label="活动名称" width="100px" />
+            <el-table-column prop="refundGoods" label="充值金额" width="100px" />
+            <el-table-column prop="rechargeCoin" label="永久金币" width="110px" sortable="custom">
+              <template #default="scope">{{ scope.row.rechargeCoin }}</template>
+            </el-table-column>
+            <el-table-column prop="freeCoin" label="免费金币" sortable="custom" width="110px">
+              <template #default="scope">{{ scope.row.freeCoin }}</template>
+            </el-table-column>
+            <el-table-column prop="remark" label="备注" width="200px" show-overflow-tooltip />
+            <el-table-column prop="freeCoin" label="支付凭证" width="110px" />
+            <el-table-column prop="adminName" label="提交人" width="100px" />
+            <el-table-column prop="status" label="付款时间" width="200px" >
+            <template #default="scope">
+                {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
+              </template>
               </el-table-column>
-            </template>
+            <el-table-column prop="createTime" sortable="custom" label="提交时间" width="200px">
+              <template #default="scope">
+                {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
+              </template>
+            </el-table-column>
             <el-table-column fixed="right" prop="operation" label="操作" width="150px">
               <template #default="scope">
                 <div class="operation">
                   <el-popconfirm title="确定要通过此条记录吗？" @confirm="passConfirm">
                     <template #reference>
-                      <el-button :disabled="scope.row.status === 1 || scope.row.status === 2
-                        ? true
-                        : false
-                        " type="primary" text @click="pass(scope.row)">
+                      <el-button :disabled="scope.row.status === 1 || scope.row.status === 2 ? true : false" 
+                      type="primary" text @click="pass(scope.row)">
                         通过
                       </el-button>
                     </template>
                     <template #actions="{ confirm, cancel }">
                       <el-button size="small" @click="cancel">取消</el-button>
-                      <el-button type="primary" size="small" @click="confirm">
-                        确定
-                      </el-button>
+                      <el-button type="primary" size="small" @click="confirm">确定</el-button>
                     </template>
                   </el-popconfirm>
-                  <el-button :disabled="scope.row.status === 1 || scope.row.status === 2
-                    ? true
-                    : false
-                    " type="primary" text @click="reject(scope.row)">
+                  <el-button :disabled="scope.row.status === 1 || scope.row.status === 2 ? true : false" 
+                  type="primary" text @click="reject(scope.row)">
                     驳回
                   </el-button>
                 </div>
@@ -758,7 +321,6 @@ const trimJwCode = () => {
           </el-table>
         </div>
 
-        <!-- 分页 -->
         <div class="pagination">
           <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
             layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
@@ -768,8 +330,7 @@ const trimJwCode = () => {
     </el-col>
   </el-row>
 
-  <!-- 驳回弹出框 -->
-  <el-dialog v-model="rejectVisible" title="驳回理由" width="500" :before-close="closeRejectVisible">
+  <el-dialog v-model="rejectVisible" title="驳回理由" width="500" :before-close="closeRej">
     <template #footer>
       <el-form :model="rejectObj" ref="Ref" :rules="rules" label-width="auto" style="max-width: 600px">
         <el-form-item prop="reson" label="驳回理由:">
@@ -779,7 +340,7 @@ const trimJwCode = () => {
       </el-form>
 
       <div class="dialog-footer">
-        <el-button @click="closeRejectVisible()">取消</el-button>
+        <el-button @click="closeRej()">取消</el-button>
         <el-button type="primary" @click="rejectConfirm()"> 确定 </el-button>
       </div>
     </template>
@@ -825,17 +386,23 @@ const trimJwCode = () => {
 
 .status {
   display: flex;
-  align-items: center; /* 确保子元素垂直居中对齐 */
-  gap: 6px; /* 设置圆点和文字之间的间距 */
+  align-items: center;
+  /* 确保子元素垂直居中对齐 */
+  gap: 6px;
+  /* 设置圆点和文字之间的间距 */
 }
 
-.green-dot, .grey-dot, .red-dot {
+.green-dot,
+.grey-dot,
+.red-dot {
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  flex-shrink: 0; /* 防止圆点在空间不足时缩小 */
-  margin: 0; /* 移除原有的 margin-right */
+  flex-shrink: 0;
+  /* 防止圆点在空间不足时缩小 */
+  margin: 0;
+  /* 移除原有的 margin-right */
 }
 
 /* 备注列样式 */
@@ -846,6 +413,7 @@ const trimJwCode = () => {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
 /* 设置单元格内容溢出隐藏 */
 .el-table .el-table__cell {
   overflow: hidden;

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,13 +1,18 @@
 <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({
@@ -21,139 +26,184 @@ const getAdminData = async function () {
     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 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 sumGold = computed(() => permanentGolds.value + freeGolds.value + taskGolds.value)
+// 方法
+
 // 搜索=========================================================================================================================================================
 // 搜索方法
-const get = async function (val) {
+
+const ConsumeSelectBy = async function (val) {
   try {
-    // 地区赋值
-    if (adminData.value.area != '总部') {
-      detailVo.value.area = adminData.value.area
-    }
+
     // 搜索参数页码赋值
     if (typeof val === 'number') {
       getObj.value.pageNum = val
     }
     // 搜索参数时间赋值
+
     if (getTime.value != null) {
-      if (getTime.value.startDate != '' && getTime.value.endDate != '') {
-        detailVo.value.startDate = getTime.value[0]
-        detailVo.value.endDate = getTime.value[1]
+      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: 'consumeUser/selectBy',
+      url: 'http://192.168.8.247:8081/consume/selectBy',
       data: {
-        ...getObj.value,
-        consumeDetail: { ...detailVo.value }
+        pageNum: getObj.value.pageNum,
+        pageSize: getObj.value.pageSize,
+        consumeUser: consumeUser.value
       }
     })
+
     // 合计数的接口
     // 复制一份 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
-      }
+// 这个接口不知道传什么
+    const resultTotalGold = await request({
+      // url: 'http://192.168.8.247:8081/consume/statsGold',
+      url: 'http://192.168.8.247:8081/consume/statsGold',
+      // data: {
+      //   pageNum: getObj.value.pageNum,
+      //   pageSize: getObj.value.pageSize,
+      //   consumeUser: consumeUser.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 +215,91 @@ 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()
-}
-//点击标签页
-const handleClick = function (tab, event) {
-  if (tab.props.name === 'all') {
-    adminAll()
-  } else if (tab.props.name === 'wait') {
-    adminWait()
-  } else if (tab.props.name === 'pass') {
-    adminPass()
-  } else if (tab.props.name === 'reject') {
-    adminReject()
-  }
+  ConsumeSelectBy()
 }
 
-// 挂载
-onMounted(async function () {
-  await getAdminData()
-  await get()
-  // getActivity();
-  await getArea();
-})
-
-// 验证跳转输入框的数字是否合法
-const checkNumber = function () {
-  if (typeof parseInt(getObj.value.pageNum) === 'number') {
-    console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
-    if (
-      getObj.value.pageNum > 0 &&
-      getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
-    ) {
-      getObj.value.pageNum = parseInt(getObj.value.pageNum)
-      console.log('输入的数字合法')
-      get()
-    } else {
-      //提示
-      ElMessage({
-        type: 'error',
-        message: '请检查输入内容'
-      })
-    }
-  } else {
-    //提示
-    ElMessage({
-      type: 'error',
-      message: '请检查输入内容'
-    })
-  }
-}
 // 查询商品的接口
 const goods = ref([])
 const getGoods = async function () {
   try {
     // 发送POST请求
     const result = await request({
-      url: '/product/findProductName',
+      url: 'http://192.168.8.247:8081/general/goods',
       data: {}
     })
     // 将响应结果存储到响应式数据中
@@ -297,20 +312,20 @@ const getGoods = async function () {
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
-getGoods()
 
-// 获取地区列表的方法，虚拟接口，替换为实际的地区列表接口地址
-const getArea = async function () {
+// 获取地区列表的方法
+const getMarket = async function () {
   try {
     // 发送请求获取地区列表
     const result = await request({
-      url: '/area/list', 
+      // url: '/general/market',
+      url: 'http://192.168.8.247:8081/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({
@@ -321,33 +336,68 @@ 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') {
+  if (column.prop === 'permanentGold') {
     sortField.value = 'recharge_coin'
-  } else if (column.prop === 'taskCoin') {
+  } else if (column.prop === 'taskGold') {
     sortField.value = 'task_coin'
-  } else if (column.prop === 'freeCoin') {
+  } else if (column.prop === 'freeGold') {
     sortField.value = 'free_coin'
   } else if (column.prop === 'createTime') {
     sortField.value = 'create_time'
   }
   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: '请检查输入内容'
+    })
+  }
 }
+// 挂载
+onMounted(async function () {
+  await getAdminData()
+  await ConsumeSelectBy()
+  // getActivity();
+  await getMarket()
+  await getGoods()
+})
+
+
 </script>
 
 <template>
@@ -359,18 +409,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 +429,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 +448,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 +467,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 +488,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 +518,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) }}新币，永久金币：{{ Math.abs(permanentGolds) }}，免费金币：{{
+            Math.abs(freeGolds)
+          }}，任务金币：{{ Math.abs(taskGolds) }}
         </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"/>
             <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 +576,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)
                 }}
               </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 }}
               </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 }}
               </template>
             </el-table-column>
             <el-table-column
-              prop="taskCoin"
-              label="任务金币"
-              sortable="“custom”"
-              width="110px"
+                prop="taskCold"
+                label="任务金币"
+                sortable="“custom”"
+                width="110px"
             >
               <template #default="scope">
-                {{ (scope.row.taskCoin * -1) / 100 }}
+                {{ scope.row.taskGold }}
               </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 +639,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: 'http://192.168.8.247:8081/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

@@ -56,16 +56,16 @@ const message = function () {
 
 // 获取machineId
 
-function logout() {
-  const machineId = localStorage.getItem('machineId')
-  console.log('machineId:', machineId)
-  localStorage.removeItem('token')
-  // localStorage.clear();
-  router.push('/login?machineId=' + machineId)
-  //添加刷新页面的代码
-  // window.location.reload();
-  ElMessage.success('退出成功')
-}
+// function logout() {
+//   const machineId = localStorage.getItem('machineId')
+//   console.log('machineId:', machineId)
+//   localStorage.removeItem('token')
+//   // localStorage.clear();
+//   router.push('/login?machineId=' + machineId)
+//   //添加刷新页面的代码
+//   // window.location.reload();
+//   ElMessage.success('退出成功')
+// }
 
 // 挂载
 onMounted(async function () {

src/views/login.vue

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

src/views/managerecharge/rate.vue

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

src/views/permissions/permission.vue

@@ -0,0 +1,617 @@
+<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({})
+// 搜索对象
+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)
+    // 发送POST请求
+    const result = await request({
+      url: '/permission/getPermission',
+      data: {
+        ...getObj.value,
+        admin: { ...admin.value }
+      }
+    })
+    tableData.value = result.data.list
+    console.log('tableData', tableData.value)
+    total.value = result.data.total
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+// 精网号去空格
+const trimJwCode = () => {
+  if (admin.value.account) {
+    admin.value.account = admin.value.account.replace(/\s/g, '');
+  }
+}
+// 搜索
+const search = function () {
+  trimJwCode();
+  getObj.value.pageNum = 1
+  get()
+}
+// 重置
+const reset = function () {
+  admin.value = {}
+  //   addAdmin.value = {}//用在新增表单的重置方法，但现在采用Ref.value.resetFields()方法，不需要reset
+}
+
+// 获取地区
+const getArea = async function () {
+  try {
+    const result = await request({
+      url: '/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="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 === '4'"> 地区负责人 </span>
+                <span v-if="scope.row.permission === '5'"> 地区财务 </span>
+                <span v-if="scope.row.permission === '6'"> 客服专员 </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.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/coinRechargeDetail.vue

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

src/views/refund/addCoinRefund.vue

@@ -0,0 +1,560 @@
+<script setup>
+import { onMounted, reactive } from 'vue'
+import { ref, computed, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import axios from 'axios'
+import { ElMessageBox } from 'element-plus'
+import API from '@/util/http'
+import moment from 'moment'
+// import _ from 'lodash'
+
+const addRe = ref({
+  typeR: '0'
+})
+//这是获取用户信息的接口
+const adminData = ref({})
+const getAdminData = async function () {
+  try {
+    const result = await API({ url: '/admin/userinfo', data: {} })
+    adminData.value = result
+    addRefund.value.adminId = adminData.value.adminId
+    console.log('请求成功', result)
+    console.log('用户信息', user.value)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+// 精网号去空格
+const trimJwCode = () => {
+  if (addRefund.value.jwcode) {
+    addRefund.value.jwcode = addRefund.value.jwcode.replace(/\s/g, ''); 
+  }
+}
+// 这是添加退款信息的表单
+const addRefund = ref({
+  updateType: '3',
+  allCoin: 0,
+  orderCode: '',
+  refundGoods: '',
+  freeCoin: 0,
+  rechargeCoin: 0,
+  taskCoin: 0
+})
+// 取消按钮
+const cancel = function () {
+  addRefund.value = {}
+  addRefund.value.updateType = '3'
+  addRefund.value.rechargeCoin = 0
+  addRefund.value.freeCoin = 0
+  addRefund.value.taskCoin = 0
+  addRefund.value.allCoin = 0
+  addRe.value.typeR = 0
+  addRefund.value.adminId = adminData.value.adminId
+}
+// 这是添加退款信息的接口
+const add = async function () {
+  try {
+    // 发送POST请求
+    const result = await API({ url: '/refund/add', data: addRefund.value })
+    if (result.code === 0) {
+      ElMessage.error(result.msg)
+      return
+    }
+    console.log('请求成功', result)
+    ElMessage.success('添加成功')
+    // 重置表单
+    addRefund.value = {}
+    addRefund.value.adminId = adminData.value.adminId
+    addRefund.value.updateType = '3'
+    addRefund.value.allCoin = 0
+    addRefund.value.orderCode = ''
+    addRefund.value.refundGoods = ''
+    addRefund.value.freeCoin = 0
+    addRefund.value.rechargeCoin = 0
+    addRefund.value.taskCoin = 0
+    addRefund.value.typeR = 0
+    user.value = {}
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+const addBefore = () => {
+  Ref.value.validate(async (valid) => {
+    if (valid) {
+      ElMessageBox.confirm('确认添加？')
+        .then(() => {
+          add()
+          console.log('添加成功')
+          addRefund.value.allCoin = 0
+          ;(addRefund.value.freeCoin = 0),
+            (addRefund.value.rechargeCoin = 0),
+            (addRefund.value.taskCoin = 0),
+            (addRefund.value = {})
+        })
+        .catch(() => {
+          console.log('取消添加')
+        })
+    } else {
+      //提示
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      })
+    }
+  })
+}
+
+// 表单验证
+// 开始时间改变时，重新验证结束时间
+const Ref = ref(null)
+const startChange = (val) => {}
+
+const rules = reactive({
+  jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }],
+  refundType: [{ required: true, message: '请选择退款类型', trigger: 'blur' }],
+  orderCode: [{ required: true, message: '请选择退款商品', trigger: 'blur' }],
+  taskCoin: [{ required: true, message: '请输入任务金币', trigger: 'blur' }],
+  freeCoin: [{ required: true, message: '请输入免费金币', trigger: 'blur' }],
+  rechargeCoin: [
+    { required: true, message: '请输入永久金币', trigger: 'blur' }
+  ],
+  allCoin: [
+    { required: true, message: '请选择付款方式', trigger: 'blur' },
+    {
+      validator: (rule, value) => {
+        if (value === 0) {
+          return Promise.reject(new Error('总金币不能为0'))
+        }
+        return Promise.resolve()
+      },
+      trigger: 'blur'
+    }
+  ]
+})
+
+// 查找客户信息的方法
+const user = ref({
+  firstRechargeTime: ''
+})
+const getUser = async function (jwcode) {
+  trimJwCode();
+  try {
+    // 发送POST请求
+    const result = await API({
+      url: 'http://192.168.8.247:8081/user/selectUser',
+      data: {
+        jwcode: addRefund.value.jwcode
+      }
+    })
+    console.log('请求成功', result)
+
+    //在此处错误逻辑的提示做了注释，在后续商品查询接口返回错误时，提示信息会显示在弹窗中
+    if (result.code === 0) {
+      ElMessage.error(result.msg);
+    } else if (result.data === null) {
+      ElMessage.error("用户不存在");
+    } else {
+      user.value = result.data;
+      console.log("用户信息", user.value);
+      ElMessage.success(result.msg);
+    }
+  } catch (error) {
+    console.log("请求失败", error);
+    ElMessage.error("查询失败，请检查精网号是否正确");
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+const calculatedAllGold = computed(() => {
+  const sum =
+    Number(addRefund.value.freeCoin) +
+    Number(addRefund.value.rechargeCoin) +
+    Number(addRefund.value.taskCoin)
+  return !isNaN(sum) ? sum : 0
+})
+
+watch(calculatedAllGold, (newVal) => {
+  addRefund.value.allCoin = newVal
+})
+
+const AAA = computed(() => {
+  return addRefund.value.jwcode
+})
+
+watch(AAA, (newVal) => {})
+
+// 退款类型选项
+// const refundType = [
+//   {
+//     value: '退款商品',
+//     label: '退款商品'
+//   }
+// ]
+
+// 退款类型
+const refundType = ref([])
+
+// 获取退款类型
+const getRefundTypes = async function () {
+  try {
+    // 发送请求获取退款类型
+    const result = await API({ 
+      // url: 'http://192.168.8.247:8081/', //这里应该写上一个退款类型的接口
+      data: {} })
+    console.log('退款类型请求成功', result)
+    // 将响应结果存储到 refundType 中
+    refundType.value = result.data.map(item => ({
+      value: item.value,
+      label: item.label
+    }))
+    console.log('退款类型', refundType.value)
+  } catch (error) {
+    console.log('退款类型请求失败', error)
+  }
+}
+
+// 根据精网号查询商品
+const goods = ref([])
+const getGoods = async function (jwcode) {
+  trimJwCode();
+  try {
+    // 发送POST请求
+    const result = await API({
+      url: 'http://39.101.133.168:8828/live_mall/api/product/all',
+      data: {
+        jwcode: addRefund.value.jwcode,
+        market: adminData.value.market
+      }
+    })
+    console.log('请求成功', result)
+
+    if (result.code === 0) {
+      ElMessage.error(result.msg)
+    } else {
+      // 存储表格数据
+      goods.value = result.data
+      console.log('用户信息', goods.value)
+      //ElMessage.success(result.msg)
+    }
+  } catch (error) {
+    console.log('请求失败', error)
+    ElMessage.error('查询失败，请检查精网号是否正确')
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+const calculatedRechargeGoods = computed(() => {
+  return (
+    +addRefund.value.freeCoin +
+    +addRefund.value.rechargeCoin +
+    +addRefund.value.taskCoin
+  )
+})
+watch(calculatedRechargeGoods, (newVal) => {
+  addRefund.value.allCoin = newVal
+})
+watch(calculatedRechargeGoods, (newVal) => {
+  addRefund.value.allCoin = newVal
+  console.log('计算的总金币', newVal)
+})
+
+// 绑定两个数据
+
+// 这是根据订单号查询消费信息的方法
+const getProductByOrderCode = async function (item) {
+  try {
+    // 发送POST请求
+    const result = await API({
+      url: '/refund/searchByOrderCode?orderCode=' + item,
+      data: {}
+    })
+    addRefund.value.contactId = result.data.detailyId
+    addRefund.value.refundGoods = result.data.productName
+    addRefund.value.orderCode = result.data.orderCode
+    addRefund.value.taskCoin = (result.data.taskCoin * -1) / 100
+    addRefund.value.freeCoin = (result.data.freeCoin * -1) / 100
+    addRefund.value.rechargeCoin = (result.data.rechargeCoin * -1) / 100
+    addRefund.value.allCoin =
+      (result.data.taskCoin * -1 +
+        result.data.freeCoin * -1 +
+        result.data.rechargeCoin * -1) /
+      100
+    console.log('请求成功', addRefund.value)
+    if (result.data.code === 0) {
+      ElMessage.error(result.data.msg)
+    } else {
+      ElMessage.success('选择成功')
+    }
+  } catch (error) {
+    console.log('请求失败', error)
+    ElMessage.error('查询失败，请检查精网号是否正确')
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+const handleSelectionChange = (value) => {
+  getProductByOrderCode(value)
+  console.log('选择的订单号', value)
+  const selectedItem = goods.value.find((item) => item.detailId === value)
+}
+// 挂载
+onMounted(async function () {
+  await getAdminData()
+})
+</script>
+
+<template>
+  <div >
+
+  <el-form
+    :model="addRefund"
+    ref="Ref"
+    :rules="rules"
+    label-width="auto"
+    style="max-width: 750px"
+    class="form-style"
+  >
+    <el-form-item prop="jwcode" label="精网号">
+      <el-input
+        v-model="addRefund.jwcode"
+        style="width: 220px"
+        @change="getGoods(addRefund.jwcode)"
+      />
+      <el-button
+        type="primary"
+        @click="getUser(addRefund.jwcode)"
+        style="margin-left: 20px"
+        >查询</el-button
+      >
+    </el-form-item>
+    <el-form-item prop="refundType" label="退款类型">
+      <el-select
+        v-model="addRefund.refundType"
+        placeholder="请选择"
+        style="width: 300px"
+      >
+        <el-option
+          v-for="item in refundType"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item prop="orderCode" label="商品名">
+      <el-select
+        v-model="addRefund.orderCode"
+        placeholder="请选择"
+        style="width: 300px"
+        @change="handleSelectionChange"
+      >
+        <el-option
+          v-for="item in goods"
+          :key="item.value"
+          :label="item.productName + item.orderCode"
+          :value="item.orderCode"
+        />
+      </el-select>
+    </el-form-item>
+
+    <el-form-item prop="typeR" label="退款方式:">
+      <el-radio-group v-model="addRe.typeR">
+        <el-radio value="0" @change="addRe.typeR = '0'">全部退款</el-radio>
+        <el-radio value="1">部分退款</el-radio>
+      </el-radio-group>
+    </el-form-item>
+
+    <div style="display: flex; align-items: center">
+      <el-form-item prop="rechargeCoin" label="永久金币" style="float: left">
+        <el-input
+          v-model="addRefund.rechargeCoin"
+          style="width: 100px"
+          :disabled="addRe.typeR === '0' ? true : false"
+        >
+        </el-input>
+        <p>个</p>
+      </el-form-item>
+      <el-form-item
+        prop="freeCoin"
+        label="免费金币"
+        style="margin-left: -20px; float: left"
+      >
+        <el-input
+          v-model="addRefund.freeCoin"
+          style="float: left; width: 100px"
+          :disabled="addRe.typeR === '0' ? true : false"
+        />
+        <p>个</p>
+      </el-form-item>
+      <el-form-item prop="taskCoin" label="任务金币" style="margin-left: -20px">
+        <el-input
+          v-model="addRefund.taskCoin"
+          style="float: left; width: 100px"
+          :disabled="addRe.typeR === '0' ? true : false"
+        />
+        <p>个</p>
+      </el-form-item>
+    </div>
+    <el-form-item prop="allCoin" label="退款金币总数">
+      <el-input disabled v-model="addRefund.allCoin" style="width: 100px">
+      </el-input>
+    </el-form-item>
+    <el-form-item prop="remark" label="备注">
+      <el-input
+        v-model="addRefund.remark"
+        style="width: 300px"
+        :rows="2"
+        maxlength="100"
+        show-word-limit
+        type="textarea"
+      />
+    </el-form-item>
+    <el-form-item prop="commitName" label="提交人">
+      <el-input
+        style="width: 300px"
+        :value="adminData.name"
+        disabled
+        placeholder="提交人姓名"
+      />
+    </el-form-item>
+    <el-button type="success" @click="cancel()" style="margin-left: 280px">重置</el-button>
+    <el-button type="primary" @click="addBefore"> 提交 </el-button>
+  </el-form>
+
+  <!-- 客户信息栏 -->
+  <el-card v-if=user.jwcode style="width: 850px; float: right" class="customer-info">
+    <el-form
+      :model="user"
+      label-width="auto"
+      style="max-width: 1000px"
+      label-position="left"
+    >
+      <el-text size="large" style="margin-left: 20px">客户信息</el-text>
+      <el-row style="margin-top: 20px">
+        <el-col :span="10">
+          <el-form-item label="姓名:">
+            <p>{{ user.name }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="14">
+          <el-form-item label="历史金币总数">
+            <!-- 检查 user.totalRechargeGold 是否为有效的数字 -->
+            <p v-if="!isNaN(Number(user.historySumGold))">
+              {{ Number(user.historySumGold) }}
+            </p>
+            <!-- 如果不是有效的数字，显示默认值 -->
+            <p v-else></p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item label="精网号">
+            <p>{{ user.jwcode }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="14">
+          <el-form-item label="当前金币总数" style="width: 500px">
+            <span
+              style="color: #2fa1ff; margin-right: 5px"
+              v-if="user.nowSumGold !== undefined"
+              >{{
+                (user.nowSumGold)
+              }}</span
+            >
+            <span
+              style="display: inline; white-space: nowrap; color: #b1b1b1"
+              v-if="user.nowPermanentGold !== undefined"
+              >(永久金币:{{ user.nowPermanentGold }};免费金币:{{
+                (user.nowFreeGold)
+              }};任务金币:{{ user.nowTaskGold}})</span
+            >
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item label="首次充值日期">
+            <p v-if="user.firstRecharge">
+              {{ moment(user.firstRecharge).format('YYYY-MM-DD HH:mm:ss') }}
+            </p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="14">
+          <el-form-item label="充值次数">
+            <p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
+          </el-form-item>
+        </el-col>
+        <!-- <el-col :span="10">
+          <el-form-item label="负责客服">
+            <p>{{ adminData.name }}</p>
+          </el-form-item>
+        </el-col> -->
+        <el-col :span="10">
+          <el-form-item label="消费次数">
+            <p style="color: #2fa1ff">{{ user.consumeNum }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item label="所属门店">
+            <p>{{ user.market }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="14">
+          
+        </el-col>
+      </el-row>
+    </el-form>
+  </el-card>
+  </div>
+</template>
+
+<style scoped>
+p {
+  margin: 0px;
+}
+
+.el-form-item {
+  margin-left: 50px;
+}
+
+/* 上传图片的格式 */
+.avatar-uploader .avatar {
+  width: 50px;
+  height: 50px;
+  display: block;
+}
+</style>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+}
+
+.form-style {
+  margin-top: 50px;
+  max-width: 50%;
+  float: left;
+}
+
+.form-style2 {
+  max-width: 60%;
+}
+
+p {
+  font-size: 13px;
+  transform: scale(1);
+}
+</style>

src/views/refund/coinRefundDetail.vue

@@ -0,0 +1,612 @@
+<script setup>
+// 这是退款明细页面
+import {ref, onMounted, reactive, computed} from 'vue'
+import ElementPlus from 'element-plus'
+import {AiFillRead} from 'vue-icons-plus/ai'
+import {ElMessage, ElMessageBox} from 'element-plus'
+import axios from 'axios'
+import moment from 'moment'
+import API from '@/util/http'
+import request from '@/util/http'
+
+// 精网号去空格
+const trimJwCode = () => {
+  if (refundUser.value.jwcode) {
+    // 去除所有空格，并尝试转换为整数
+    const trimmed = refundUser.value.jwcode.toString().replace(/\s/g, '');
+    const numeric = Number(trimmed);
+
+    // 如果转换为数字成功，保存为数字，否则提示错误
+    if (!isNaN(numeric)) {
+      refundUser.value.jwcode = numeric;
+    } else {
+      ElMessage.error("精网号格式不正确，请输入数字");
+    }
+  }
+}
+
+// 变量
+//这是获取用户信息的接口
+const adminData = ref({})
+const getAdminData = async function () {
+  try {
+    const result = await API({url: '/admin/userinfo', data: {}})
+
+    adminData.value = result
+    console.log('请求成功', result)
+    console.log('用户信息', adminData.value)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+// 充值明细表格
+const tableData = ref([])
+// 搜索======================================
+// 搜索detail
+const refundUser = ref({})
+// 搜索对象
+const getObj = ref({
+  pageNum: 1,
+  pageSize: 50
+})
+//分页总条目
+const total = ref(100)
+// 搜索对象时间
+const getTime = ref([])
+
+// 搜索地区列表
+const market = ref([])
+
+// 定义响应式变量存储金币合计数
+const permanentGolds = ref(0)
+const freeGolds = ref(0)
+const taskGolds = ref(0)
+
+// 计算总金币数
+const sumGold = computed(() => permanentGolds.value + freeGolds.value + taskGolds.value)
+
+// 退款类型
+const refundType = ref([])
+
+//时间格式化
+const formatTime = (val) => val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ''
+
+// 获取退款类型
+const getRefundTypes = async function () {
+  try {
+    // 发送请求获取退款类型
+    const result = await API({ 
+      // url: 'http://192.168.8.247:8081/', //这里应该写上一个退款类型的接口
+      data: {} })
+    console.log('退款类型请求成功', result)
+    // 将响应结果存储到 refundType 中
+    refundType.value = result.data.map(item => ({
+      value: item.value,
+      label: item.label
+    }))
+    console.log('退款类型', refundType.value)
+  } catch (error) {
+    console.log('退款类型请求失败', error)
+  }
+}
+
+// 搜索==============================================================
+// 搜索方法
+const getSelectBy = async function (val) {
+  try {
+    // 搜索参数页码赋值
+    if (typeof val === 'number') {
+      getObj.value.pageNum = val
+    }
+
+    // todo 时间格式化
+    // 搜索参数时间赋值
+    if (getTime.value != null) {
+      if (getTime.value.startTime != '' && getTime.value.endTime != '') {
+        refundUser.value.startTime = formatTime(getTime.value[0])
+        refundUser.value.endTime = formatTime(getTime.value[1])
+      }
+    } else {
+      refundUser.value.startTime = ''
+      refundUser.value.endTime = ''
+    }
+
+    // todo 排序后端还没有弄
+    // 添加排序字段和排序方式到请求参数
+    refundUser.value.sortField = sortField.value
+    refundUser.value.sortOrder = sortOrder.value
+    console.log('搜索参数', getObj.value)
+    // 发送POST请求
+    const result = await API({
+      url: 'http://192.168.8.247:8081/refund/selectBy',
+      data: {
+        ...getObj.value,
+        refundUser: { ...refundUser.value }
+      }
+    })
+    // 复制一份 refundUser.value 并移除排序字段和排序方式
+    const detailWithoutSort = { ...refundUser.value }
+    delete detailWithoutSort.sortField
+    delete detailWithoutSort.sortOrder
+
+    const resultTotalGold = await API({
+      url: 'http://192.168.8.247:8081/refund/statsGold',
+      data: {
+         ...detailWithoutSort
+      }
+    })
+    // 将响应结果存储到响应式数据中
+     console.log('resultTotalGold请求成功', resultTotalGold)
+    // 检查响应的 code 是否为 200 且 data 存在
+    if (resultTotalGold.code === 200 && resultTotalGold.data) {
+      const data = resultTotalGold.data
+      console.log('获取到的金币数据:', data)
+
+      permanentGolds.value = Number(data.permanentGolds) || 0
+      freeGolds.value = Number(data.freeGolds) || 0
+      taskGolds.value = Number(data.taskGolds) || 0
+    }
+
+    // 存储表格数据
+    tableData.value = result.data.list
+    console.log('tableData', tableData.value)
+    // 存储分页总数
+    total.value = result.data.total
+    console.log('total', total.value)
+    // 调用分类的方法
+    handleClick()
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// 搜索
+const search = function () {
+  getObj.value.pageNum = 1
+  getSelectBy()
+}
+// 重置
+const reset = function () {
+  refundUser.value = {}
+  sortField.value = ''
+  sortOrder.value = ''
+  getTime.value = {}
+}
+// 今天
+const getToday = function () {
+  const today = new Date()
+  const startTime = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate()
+  )
+  const endTime = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startTime, endTime]
+  console.log('getTime', getTime.value)
+  getSelectBy()
+}
+// 昨天
+const getYesterday = function () {
+  const yesterday = new Date()
+  yesterday.setDate(yesterday.getDate() - 1)
+  const startTime = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate()
+  )
+  const endTime = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate() + 1
+  )
+  getTime.value = [startTime, endTime]
+  console.log('getTime', getTime.value)
+  getSelectBy()
+}
+// 近7天
+const get7Days = function () {
+  const today = new Date()
+  const startTime = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() - 6
+  )
+  const endTime = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startTime, endTime]
+  console.log('getTime', getTime.value)
+  getSelectBy()
+}
+
+//点击标签页
+// 设置tab.props.name默认为all
+const tabName = ref('all')
+const handleClick = function (tab, event) {
+  if (tab.props.name === 'all') {
+    adminAll()
+  } else if (tab.props.name === 'wait') {
+    adminWait()
+  } else if (tab.props.name === 'pass') {
+    adminPass()
+  } else if (tab.props.name === 'reject') {
+    adminReject()
+  }
+}
+
+// 获取地区列表的方法
+const getMarket = async function () {
+  try {
+    // 发送POST请求
+    const result = await API({ url: 'http://192.168.8.247:8081/general/market', data: {} })
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 存储地区信息
+    market.value = result.data
+    console.log('地区', market.value)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+
+//删除气泡
+const delObj = ref({})
+const del = function (row) {
+  delObj.value.detailId = row.detailId
+  console.log('delObj', delObj.value)
+}
+// 删除按钮的气泡弹出框确认按钮
+const delConfirm = async function () {
+  try {
+    console.log('delObj', delObj.value)
+    // 发送POST请求
+    const result = await API({
+      url: '/refund/softDelete?detailId=' + delObj.value.detailId,
+      data: {}
+    })
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 刷新表格数据
+    getSelectBy()
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+// 查询商品的接口
+const goods = ref([])
+const getGoods = async function () {
+  try {
+    // 发送POST请求
+    const result = await request({
+      url: 'http://192.168.8.247:8081/general/goods',
+      data: {}
+    })
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功product', result)
+    // 存储全部数据
+    goods.value = result.data
+    
+    console.log('地区', market.value)
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+
+// 验证跳转输入框的数字是否合法
+const checkNumber = function () {
+  if (typeof parseInt(getObj.value.pageNum) === 'number') {
+    console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
+    if (
+        getObj.value.pageNum > 0 &&
+        getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
+    ) {
+      getObj.value.pageNum = parseInt(getObj.value.pageNum)
+      console.log('输入的数字合法')
+      getSelectBy()
+    } else {
+      //提示
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      })
+    }
+  } else {
+    //提示
+    ElMessage({
+      type: 'error',
+      message: '请检查输入内容'
+    })
+  }
+}
+// 挂载
+onMounted(async function () {
+  await getAdminData()
+  await getSelectBy()
+  await getArea()
+  await getRefundTypes()
+})
+// 新增排序字段和排序方式
+const sortField = ref('')
+const sortOrder = ref('')
+// 处理排序事件
+const handleSortChange = (column) => {
+  console.log('排序字段：', column.prop)
+  console.log('排序方式：', column.order)
+  if (column.prop === 'permanentGold') {
+    sortField.value = 'permanent_gold'
+  } else if (column.prop === 'taskGold') {
+    sortField.value = 'task_gold'
+  } else if (column.prop === 'freeGold') {
+    sortField.value = 'free_gold'
+  } else if (column.prop === 'createTime') {
+    sortField.value = 'create_time'
+  } else if (column.prop === 'auditTime') {
+    sortField.value = 'audit_time'
+  }
+  sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC'
+  getSelectBy()
+}
+const handlePageSizeChange = function (val) {
+  getObj.value.pageSize = val
+  getSelectBy()
+}
+const handleCurrentChange = function (val) {
+  getObj.value.pageNum = val
+  getSelectBy()
+}
+</script>
+
+<template>
+  <el-row>
+    <el-col>
+      <el-card style="margin-bottom: 20px;margin-top:10px">
+        <el-row style="margin-bottom: 10px">
+          <el-col :span="5">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">精网号：</el-text>
+
+              <el-input
+                v-model="refundUser.jwcode"
+                placeholder="请输入精网号"
+                size="large"
+                style="width: 150px"
+                clearable
+              />
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">退款类型：</el-text>
+              <el-select
+                v-model="refundUser.refundType"
+                placeholder="请选择退款类型"
+                size="large"
+                style="width: 180px"
+                clearable
+              >
+<!--                todo 这需要改-->
+                <el-option
+                  v-for="item in refundType"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">退款商品：</el-text>
+              <el-select
+                v-model="refundUser.goodsName"
+                placeholder="请选择退款商品"
+                size="large"
+                style="width: 180px"
+                clearable
+                
+              >
+                <el-option
+                    v-for="item in goods"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.name"
+                />
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">所属地区：</el-text>
+              <el-select
+                v-model="refundUser.market"
+                placeholder="请选择所属地区"
+                size="large"
+                style="width: 180px"
+                clearable
+              >
+                <el-option
+                  v-for="item in market"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="21">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">退款时间：</el-text>
+              <el-date-picker
+                  v-model="getTime"
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="起始时间"
+                  end-placeholder="结束时间"
+              />
+              <el-button style="margin-left: 10px" @click="getToday()"
+              >今
+              </el-button
+              >
+              <el-button @click="getYesterday()">昨</el-button>
+              <el-button @click="get7Days()">近7天</el-button>
+
+              <el-button type="success" @click="reset()">重置</el-button>
+              <el-button type="primary" @click="search()">查询</el-button>
+              <el-button type="primary" @click="exportExcel">导出Excel</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-col>
+  </el-row>
+  <el-row>
+    <el-col>
+      <el-card>
+        <div>
+          退款金币总数：{{ Math.abs(sumGold) }}，永久金币：{{
+            Math.abs(permanentGolds)
+          }}，免费金币：{{ Math.abs(freeGolds) }}，任务金币：{{
+            Math.abs(taskGolds)
+          }}
+        </div>
+        <!-- 设置表格容器的高度和滚动样式 -->
+        <div style="height: 520px; overflow-y: auto;margin-top:10px">
+          <el-table
+              :data="tableData"
+              style="width: 100%"
+              @sort-change="handleSortChange"
+              height="520px"
+          >
+            <el-table-column
+                type="index"
+                label="序号"
+                width="100px"
+                fixed="left"
+            >
+              <template #default="scope">
+                <span>{{
+                    scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
+                  }}</span>
+
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="姓名"
+              fixed="left"
+              width="100px"
+            />
+            <el-table-column
+                prop="jwcode"
+                label="精网号"
+                fixed="left"
+                width="110px"
+            />
+            <el-table-column prop="market" label="所属地区" width="110px" />
+            <el-table-column prop="goodsName" label="商品名称" width="100px" />
+            <el-table-column prop="refundType" label="退款类型" width="100px" />
+
+            <el-table-column label="退款金币总数" width="110px">
+              <template #default="scope">
+                {{
+                  scope.row.sumGold
+                }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="refundModel" label="退款方式" width="110px">
+              <template #default="scope">
+                {{ scope.row.refundModel === 1 ? '全部退款' : scope.row.refundModel === 2 ? '部分退款' : '' }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="permanentGold"
+              label="永久金币"
+              width="110px"
+              sortable="“custom”"
+            />
+            <el-table-column
+              prop="freeGold"
+              sortable="“custom”"
+              label="免费金币"
+              width="110px"
+            />
+            <el-table-column
+              prop="taskGold"
+              sortable="“custom”"
+              label="任务金币"
+              width="110px"
+            />
+            <!-- 修改prop为taskGold -->
+            <el-table-column
+                prop="remark"
+                label="退款原因"
+                width="160px"
+                show-overflow-tooltip
+            />
+            <el-table-column prop="adminName" label="提交人" width="100px" />
+             
+            <el-table-column
+              prop="createTime"
+              sortable="“custom”"
+              label="提交时间"
+              width="180px"
+            >
+              <template #default="scope">
+                {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
+        <!-- 分页 -->
+        <div class="pagination" style="margin-top: 20px">
+          <el-pagination
+              background
+              :page-size="getObj.pageSize"
+              :page-sizes="[5, 10, 20, 50, 100]"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="total"
+              @size-change="handlePageSizeChange"
+              @current-change="handleCurrentChange"
+              @jump="checkPageNumber"
+          ></el-pagination>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<style scoped>
+.status {
+  display: flex;
+}
+
+.head-card {
+  display: flex;
+}
+
+.head-card-element {
+  margin-right: 20px;
+}
+
+.head-card-btn {
+  margin-left: auto;
+}
+
+.pagination {
+  display: flex;
+  margin-top: 20px;
+}
+</style>

src/views/usergold/clientCountBalance.vue

@@ -1,3 +1,466 @@
+<script setup>
+// 这是客户金币余额页面
+import { ref, onMounted, reactive, computed } from 'vue'
+import ElementPlus from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import axios from 'axios'
+import moment from 'moment'
+import { ta } from 'element-plus/es/locales.mjs'
+import API from '@/util/http'
+
+// 变量
+//这是获取用户信息的接口
+const adminData = ref({})
+const dialogVisible = ref(false)
+const getAdminData = async function () {
+  try {
+    const result = await API({ url: '/admin/userinfo', data: {} })
+    adminData.value = result
+    // console.log('请求成功', result)
+    console.log('管理员用户信息', adminData.value)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+
+// 定义加载状态，获取地区数据
+const isLoadingmarket = ref(false);
+const market = ref([])
+const getmarket = async () => {
+  isLoadingmarket.value = true;
+  try {
+    const result = await API({
+      url: 'http://192.168.8.220:8081/general/market'
+    });
+    console.log('获取地区数据成功',result)
+    // 假设后端返回的是字符串数组，转换为 { value, label } 格式
+    if (Array.isArray(result.data) && typeof result.data[0] === 'string') {
+      market.value = result.data.map(item => ({ value: item, label: item }));
+    } else {
+      market.value = result.data;
+    }
+  } catch (error) {
+    console.error('获取地区数据失败:', error);
+    ElMessage.error('获取地区数据失败，请稍后重试');
+    // 可以提供默认数据
+    market.value = []; 
+  } finally {
+    isLoadingmarket.value = false;
+  }
+};
+
+
+// 充值明细表格
+const tableData = ref([])
+
+// 新增金币总数变量
+const goldtotal = ref(0)
+
+// 计算用户各金币总数的不分页对象
+const tableAllData = ref([])
+// 各金币字段
+const permanentGold = ref(0) // 修改为 currentPermanentGold 对应字段
+const freeJuneGold = ref(0) // 修改为 currentFreeJune 对应字段
+const freeDecemberGold = ref(0) // 修改为 currentFreeDecember 对应字段
+const taskGold = ref(0) // 修改为 currentTaskGold 对应字段
+const freeGold = ref(0) // 计算免费金币总数
+
+
+
+//客户消费记录
+const tableCountData = ref([])
+const userInfo = ref({})
+
+
+
+// 搜索===========================================
+//分页总条目
+const total = ref(100)
+// 搜索对象时间
+const getTime = ref([])
+// 搜索User
+const user = ref({})
+// 不分页的搜索对象
+const getAllObj = ref({})
+// 搜索对象
+const getObj = ref({
+  pageNum: 1,
+  pageSize: 50
+})
+// 新增排序字段和排序方式
+const sortField = ref('')
+const sortOrder = ref('')
+
+
+
+
+
+// 方法
+// 搜索===========================================================================
+// 搜索方法
+const get = async function (val) {
+  try {
+    // 搜索参数页码赋值
+    if (typeof val === 'number') {
+      getObj.value.pageNum = val
+    }
+    
+    // 添加排序字段和排序方式到请求参数
+    user.value.sortField = sortField.value
+    user.value.sortOrder = sortOrder.value
+    console.log('搜索参数', getObj.value)
+    
+    // 发送POST请求
+
+    const requestData = { ...getObj.value, user: { ...user.value } };//控制台打印请求的参数
+    console.log('最终请求参数', JSON.stringify(requestData, null, 2)); // 打印格式化后的请求参数
+
+    //console.log('请求参数', requestData);
+
+    const result = await API({
+      url: 'http://192.168.8.220:8081/goldDetail/getGold',
+      method: 'post',
+      data: { ...getObj.value, user: { ...user.value } }
+    })
+    console.log('响应数据', result)
+    tableData.value = result.data.list
+    total.value = result.data.total
+
+    
+    // 获取合计数
+    const resultGoldTotal = await API({
+      url: 'http://192.168.8.220:8081/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) }}  
+          永久金币：{{ Math.abs(permanentGold) }}  
+          免费金币：{{ Math.abs(freeGold) }}  
+          任务金币：{{ Math.abs(taskGold) }}
+        </div>
+        <!-- 设置表格容器的高度和滚动样式 -->
+        <div style="height: 626px; overflow-y: auto">
+          <el-table
+            :data="tableData"
+            @cellClick="cellClick"
+            style="width: 100%"
+            height="626px"
+            @sort-change="handleSortChange"
+          >
+            <el-table-column
+              type="index"
+              label="序号"
+              width="100px"
+              fixed="left"
+            >
+              <template #default="scope">
+                <span>{{
+                  scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="姓名" width="120" />
+            <el-table-column prop="jwcode" label="精网号" width="120" />
+            <el-table-column prop="market" label="所属地区" width="120" />
+            <el-table-column
+              prop="allJb"
+              label="金币总数"
+              width="120"
+              aligh="center"
+            >
+              <template #default="scope">
+                <span>{{
+                  (scope.row.currentPermanentGold +
+                    scope.row.currentFreeJune +
+                    scope.row.currentFreeDecember +
+                    scope.row.currentTaskGold)  
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="currentPermanentGold"
+              label="永久金币"
+              sortable="custom"
+              width="110"
+            >
+              <template #default="scope">
+                <span>{{ Math.abs(scope.row.currentPermanentGold)   }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="currentFreeJune"
+              label="6月份到期免费金币"
+              sortable="custom"
+              width="110"
+            >
+              <template #default="scope">
+                <span>{{ scope.row.currentFreeJune   }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="currentFreeDecember"
+              label="12月份到期免费金币"
+              sortable="custom"
+              width="110"
+            >
+              <template #default="scope">
+                <span>{{ scope.row.currentFreeDecember   }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="currentTaskGold"
+              label="任务金币"
+              sortable="custom"
+              width="130"
+            >
+              <template #default="scope">
+                <span>{{ Math.abs(scope.row.currentTaskGold)   }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="rcoin" label="历史金币" width="150">
+              <template #default="scope">
+                <!-- 计算四个字段的和并显示 -->
+                <span>{{ 
+                  (scope.row.sumPermanentGold || 0) + 
+                  (scope.row.sumFreeJune || 0) + 
+                  (scope.row.sumFreeDecember || 0) + 
+                  (scope.row.sumTaskGold || 0) 
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="sumConsume" label="历史消费" width="150">
+              <template #default="scope">
+                <span>{{ Math.abs(scope.row.sumConsume)   }}</span>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
+        <!-- 分页 -->
+        <div class="pagination" style="margin-top: 20px">
+          <el-pagination
+            background
+            :page-size="getObj.pageSize"
+            :page-sizes="[5, 10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            @size-change="handlePageSizeChange"
+            @current-change="handleCurrentChange"
+          ></el-pagination>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+  
+</template>
+
+<style scoped lang="scss">
+.pagination {
+  display: flex;
+}
+
+.status {
+  display: flex;
+}
+
+.head-card {
+  display: flex;
+}
+
+.head-card-element {
+  margin-right: 20px;
+}
+
+.head-card-btn {
+  margin-left: auto;
+}
+.custom-box {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 5px;
+  div:nth-child(1) {
+    flex: 1 0 100%;
+  }
+  div {
+    margin-right: 20px;
+  }
+}
+</style>

src/views/usergold/clientCountDetail.vue

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

vite.config.ts

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