diff --git a/package-lock.json b/package-lock.json
index b68ad5c..b00b0eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "@element-plus/icons-vue": "^2.3.1",
         "axios": "^1.7.8",
-        "echarts": "^5.6.0",
+        "echarts": "^5.5.1",
         "element-plus": "^2.8.8",
         "lodash": "^4.17.21",
         "mathjs": "^14.0.1",
@@ -3499,13 +3499,13 @@
       "license": "MIT"
     },
     "node_modules/echarts": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz",
-      "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
+      "version": "5.5.1",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/echarts/-/echarts-5.5.1.tgz",
+      "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
       "license": "Apache-2.0",
       "dependencies": {
         "tslib": "2.3.0",
-        "zrender": "5.6.1"
+        "zrender": "5.6.0"
       }
     },
     "node_modules/electron-to-chromium": {
@@ -4662,7 +4662,7 @@
     },
     "node_modules/tslib": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/tslib/-/tslib-2.3.0.tgz",
       "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
       "license": "0BSD"
     },
@@ -5053,9 +5053,9 @@
       }
     },
     "node_modules/zrender": {
-      "version": "5.6.1",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.1.tgz",
-      "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
+      "version": "5.6.0",
+      "resolved": "https://mirrors.huaweicloud.com/repository/npm/zrender/-/zrender-5.6.0.tgz",
+      "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "tslib": "2.3.0"
diff --git a/package.json b/package.json
index 7f0b144..34155ed 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "axios": "^1.7.8",
-    "echarts": "^5.6.0",
+    "echarts": "^5.5.1",
     "element-plus": "^2.8.8",
     "lodash": "^4.17.21",
     "mathjs": "^14.0.1",
diff --git a/src/assets/blue.png b/src/assets/blue.png
new file mode 100644
index 0000000..87a1ed1
Binary files /dev/null and b/src/assets/blue.png differ
diff --git a/src/router/index.js b/src/router/index.js
index 5fbbb9b..8716011 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -18,7 +18,14 @@ const router = createRouter({
                 // 退款审核
                 { path: '/refundAudit', name: "refundAudit", component: () => import("../views/audit/refundAudit.vue") },
                 // 金币消耗
-                { path: '/coinConsume', name: "coinConsume", component: () => import("../views/consume/coinConsume.vue") },
+                { path: '/coinConsume', name: "coinConsume", component: () => import("../views/consume/coinConsume.vue"),
+                    children: [
+                        // 金币新增消耗
+                        { path: 'add', name: "addCoinConsume", component: () => import("../views/consume/addCoinConsume.vue") },
+                        // 金币消耗明细详情
+                        { path: 'detail', name: "coinConsumeDetail", component: () => import("../views/consume/coinConsumeDetail.vue") }
+                    ]
+                },
                 // 金豆消耗
                 { path: '/beanConsume', name: "beanConsume", component: () => import("../views/consume/beanConsume.vue") },
                 // 汇率管理
@@ -32,7 +39,14 @@ const router = createRouter({
                 // 金豆退款
                 { path: '/beanRefund', name: "beanRefund", component: () => import("../views/refund/beanRefund.vue") },
                 // 客户账户明细
-                { path: '/usergold', name: "usergold", component: () => import("../views/usergold/index.vue") },
+                { path: '/usergold', name: "usergold", component: () => import("../views/usergold/clientCount.vue"),
+                    children: [
+                        // 金币明细
+                        { path: 'detail', name: "clientCountDetail", component: () => import("../views/usergold/clientCountDetail.vue") },
+                        // 金币余额
+                        { path: 'balance', name: "clientCountBalance", component: () => import("../views/usergold/clientCountBalance.vue") },
+                    ]
+                 },
                 // 权限管理
                 { path: '/permissions', name: "permissions", component: () => import("../views/permissions/index.vue") },
                 // 没有权限
diff --git a/src/views/audit/rechargeAudit.vue b/src/views/audit/rechargeAudit.vue
index 553cfb8..f8914cf 100644
--- a/src/views/audit/rechargeAudit.vue
+++ b/src/views/audit/rechargeAudit.vue
@@ -7,6 +7,32 @@ 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 getAdminData = async function () {
@@ -16,6 +42,7 @@ const getAdminData = async function () {
       data: {}
     })
     adminData.value = result
+    console.log('请求成功', result)
     console.log('用户信息', adminData.value)
   } catch (error) {
     console.log('请求失败', error)
@@ -25,6 +52,7 @@ const getAdminData = async function () {
 // 充值明细表格
 const tableData = ref([])
 // 搜索======================================
+// 搜索rechargeVo
 const rechargeVo = ref({
   rechargeWay: '客服充值'
 })
@@ -39,16 +67,22 @@ 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('wait')
+
+//标签页默认高亮选项
+const activeName = ref('all')
+
 // 支付方式选项
 const payWay = [
   {
@@ -72,16 +106,23 @@ const payWay = [
     label: '借记卡'
   }
 ]
+
+// //表格高度
+// 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))
@@ -103,12 +144,15 @@ 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') {
@@ -127,6 +171,7 @@ const get = async function (val) {
     rechargeVo.value.sortField = sortField.value
     rechargeVo.value.sortOrder = sortOrder.value
     console.log('搜索参数', getObj.value)
+    // 发送POST请求
     const result = await request({
       url: '/recharge/recharge',
       data: {
@@ -136,15 +181,16 @@ const get = async function (val) {
       }
     })
     // 合计数的接口
-    // 复制一份rechargeVo.value，去掉排序和状态
-    const rechargeVo1 = { ...rechargeVo.value }
-    delete rechargeVo1.sortField
-    delete rechargeVo1.sortOrder
-    delete rechargeVo1.status
+    // 复制一份 rechargeVo.value 并移除排序字段和排序方式
+    const detailWithoutSort = { ...rechargeVo.value }
+    delete detailWithoutSort.sortField
+    delete detailWithoutSort.sortOrder
+    delete detailWithoutSort.status
     const result2 = await request({
       url: '/recharge/recharge/RechargeA',
-      data: rechargeVo1
+      data: detailWithoutSort
     })
+    // 做一个判断，如果result2.data[i].flag="待审核"，那么 totalData.value = result2.data[i]，否则就赋值为0
     // 统计合计数
     if (result2.data) {
       result2.data.forEach((item) => {
@@ -174,11 +220,16 @@ const get = async function (val) {
     }
 
     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
+    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('搜索对象', getObj.value)
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    console.log('这是分页', getObj.value)
     // 存储表格数据
     tableData.value = result.data.list
     console.log('tableData', tableData.value)
@@ -187,6 +238,7 @@ const get = async function (val) {
     console.log('total', total.value)
   } catch (error) {
     console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
 // 搜索
@@ -257,6 +309,13 @@ 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
@@ -290,9 +349,11 @@ const adminReject = async function () {
   trueRGold.value = rejectedRGold.value
   trueFGold.value = rejectedFGold.value
 }
-
+//点击标签页
 const handleClick = function (tab, event) {
-  if (tab.props.name === 'wait') {
+  if (tab.props.name === 'all') {
+    adminAll()
+  } else if (tab.props.name === 'wait') {
     adminWait()
   } else if (tab.props.name === 'pass') {
     adminPass()
@@ -300,30 +361,67 @@ const handleClick = function (tab, event) {
     adminReject()
   }
 }
-
+// 获取活动名称
 const getActivity = async function () {
   try {
+    // 发送POST请求
     const result = await request({
       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 request({
       url: '/recharge/user/search',
       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) {
@@ -364,7 +462,10 @@ const passConfirm = async function () {
       url: '/audit/audit/goldedit',
       data: passObj.value
     })
+
+    // 将响应结果存储到响应式数据中
     console.log('请求成功', result)
+    // 刷新表格数据
     get()
     //提示
     ElMessage({
@@ -411,17 +512,24 @@ const rejectConfirm = async function () {
           url: '/audit/audit/goldedit',
           data: rejectObj.value
         })
+
+        // 将响应结果存储到响应式数据中
         console.log('请求成功', result)
+        // 刷新表格数据
         get()
-        closeRejectVisible()// 关闭弹出框
+        // 关闭弹出框
+        closeRejectVisible()
+        //提示
         ElMessage({
           type: 'success',
           message: '驳回成功！'
         })
       } catch (error) {
         console.log('请求失败', error)
+        // 在这里可以处理错误逻辑，比如显示错误提示等
       }
     } else {
+      //提示
       ElMessage({
         type: 'error',
         message: '请检查输入内容'
@@ -431,6 +539,7 @@ const rejectConfirm = async function () {
 }
 
 // 表单验证
+
 const rules = reactive({
   reson: [{ required: true, message: '请输入驳回理由', trigger: 'blur' }]
 })
@@ -459,7 +568,7 @@ const handleSortChange = (column) => {
     sortField.value = 'create_time'
   } else if (column.prop === 'paidGold') {
     sortField.value = 'paid_gold'
-  } else if (column.prop === 'auditTime') {
+  }else if (column.prop === 'auditTime') {
     sortField.value = 'audit_time'
   }
   sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC'
@@ -477,27 +586,35 @@ const trimJwCode = () => {
 <template>
   <el-row>
     <el-col>
-      <el-card style="margin-bottom: 5px">
-        <el-row style="margin-bottom: 5px">
+      <el-card style="margin-bottom: 20px">
+        <el-row style="margin-bottom: 10px">
           <el-col :span="6">
-              <el-text   size="large">精网号：</el-text>
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">精网号：</el-text>
               <el-input v-model="rechargeVo.jwcode" placeholder="请输入精网号" style="width: 240px" clearable />
+            </div>
           </el-col>
           <el-col :span="6">
-              <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" />
+            <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-select>
+            </div>
           </el-col>
           <el-col :span="6">
-              <el-text   size="large">支付方式：</el-text>
+            <div class="head-card-element">
+              <el-text class="mx-1" 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   size="large">所属地区：</el-text>
+              <el-text class="mx-1" 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>
@@ -505,22 +622,38 @@ const trimJwCode = () => {
           </el-col>
         </el-row>
         <el-row>
-          <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>
+        <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>
             </div>
-          </el-col>
+          </div>
+        </el-col>
 
-          <el-col :span="8">
-            <el-button @click="reset()" type="success">重置</el-button>
+        <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>
         </el-row>
       </el-card>
@@ -529,49 +662,71 @@ const trimJwCode = () => {
   <el-row>
     <el-col>
       <el-card>
-        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
+          <el-tab-pane label="全部" name="all"></el-tab-pane>
           <el-tab-pane label="待审核" name="wait"></el-tab-pane>
           <el-tab-pane label="已通过" name="pass"></el-tab-pane>
           <el-tab-pane label="已驳回" name="reject"></el-tab-pane>
 
           <div>
-            总条数：{{ trueCount }}条&nbsp;&nbsp;&nbsp;&nbsp;
-            总金币数：{{ formattedTrueGold }}金币&nbsp;&nbsp;&nbsp;&nbsp;
-            永久金币：{{ formattedTrueRGold }}金币&nbsp;&nbsp;&nbsp;&nbsp;
-            免费金币：{{ formattedTrueFGold }}金币
+            总条数：{{ trueCount }}条，总金币数：{{
+              formattedTrueGold
+            }}金币，永久金币：{{ formattedTrueRGold }}金币，免费金币：{{ 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>
-            <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>
+            <!-- 动态列 -->
+            <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>
-            <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>
+            </template>
             <el-table-column fixed="right" prop="operation" label="操作" width="150px">
               <template #default="scope">
                 <div class="operation">
@@ -586,7 +741,9 @@ const trimJwCode = () => {
                     </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
@@ -601,6 +758,7 @@ 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"
@@ -610,6 +768,7 @@ const trimJwCode = () => {
     </el-col>
   </el-row>
 
+  <!-- 驳回弹出框 -->
   <el-dialog v-model="rejectVisible" title="驳回理由" width="500" :before-close="closeRejectVisible">
     <template #footer>
       <el-form :model="rejectObj" ref="Ref" :rules="rules" label-width="auto" style="max-width: 600px">
@@ -666,23 +825,17 @@ 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 */
 }
 
 /* 备注列样式 */
@@ -693,7 +846,6 @@ const trimJwCode = () => {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
 /* 设置单元格内容溢出隐藏 */
 .el-table .el-table__cell {
   overflow: hidden;
diff --git a/src/views/audit/refundAudit.vue b/src/views/audit/refundAudit.vue
index f4bd188..74a5ad2 100644
--- a/src/views/audit/refundAudit.vue
+++ b/src/views/audit/refundAudit.vue
@@ -1,409 +1,888 @@
-<template>
-  <el-row>
-    <el-col>
-      <div>
-        <el-card style="margin-bottom: 5px">
-          <el-row style="margin-bottom: 5px">
-            <el-col :span="6">
-              <el-text size="large">精网号：</el-text>
-              <el-input v-model="searchForm.jwcode" placeholder="请输入精网号" style="width: 240px" clearable />
-            </el-col>
-            <el-col :span="6">
-              <el-text size="large">退款类型：</el-text>
-              <el-select v-model="searchForm.refundType" placeholder="请选择" style="width: 240px" clearable>
-                <el-option label="商品退款" value="商品退款" />
-                <el-option label="退点啥？？" value="退点啥??" />
-              </el-select>
-            </el-col>
-            <el-col :span="6">
-              <el-text size="large">所属地区：</el-text>
-              <el-select v-model="searchForm.area" placeholder="请选择" style="width: 240px" clearable>
-                <el-option v-for="item in areaOptions" :key="item" :label="item" :value="item" />
-              </el-select>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="12">
-              <el-text size="large">退款时间：</el-text>
-                <el-date-picker v-model="dateRange" 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>
-            <el-col :span="6">
-              <el-button type="success" @click="resetSearch">重置</el-button>
-              <el-button type="primary" @click="handleSearch">查询</el-button>
-            </el-col>
-          </el-row>
-        </el-card>
-      </div>
-    </el-col>
-  </el-row>
-
-  <el-card>
-    <el-tabs v-model="checkTab" @tab-change="switchTab">
-      <el-tab-pane label="待审核" name="1" />
-      <el-tab-pane label="已通过" name="2" />
-      <el-tab-pane label="已驳回" name="3" />
-    </el-tabs>
-
-    <div class="stats-info">
-      退款记录条数: {{ stats.totalItems }}&nbsp;&nbsp;&nbsp;&nbsp;
-      退款金币总数: {{ stats.totalCoins }}&nbsp;&nbsp;&nbsp;&nbsp;
-      永久金币: {{ stats.permanentCoins }}&nbsp;&nbsp;&nbsp;&nbsp;
-      免费金币: {{ stats.freeCoins }}&nbsp;&nbsp;&nbsp;&nbsp;
-      任务金币: {{ stats.taskCoins }}
-    </div>
-
-    <el-table :data="tableData" height="540px" @sort-change="handleSortChange">
-      <el-table-column type="index" label="序号" width="60" />
-      <el-table-column prop="username" label="姓名" width="120" />
-      <el-table-column prop="jwcode" label="精网号" width="120" />
-      <el-table-column prop="area" label="所属地区" width="120" />
-      <el-table-column prop="refundType" label="退款类型" width="120" />
-      <el-table-column prop="refundMethod" label="退款方式" width="120" />
-      <el-table-column prop="refundGoods" label="退款商品" width="120" />
-      <el-table-column prop="refundAmount" label="退款金额" width="120" sortable="custom">
-        <template #default="{ row }">
-          {{ row.rechargeCoin + row.freeCoin + row.taskCoin }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="rechargeCoin" label="永久金币" width="120" sortable="custom" />
-      <el-table-column prop="freeCoin" label="免费金币" width="120" sortable="custom" />
-      <el-table-column prop="taskCoin" label="任务金币" width="120" sortable="custom" />
-      <el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip /><!-- 当内容过长被隐藏时显示 tooltip -->
-      <el-table-column prop="adminName" label="提交人" width="120" />
-      <el-table-column v-if="checkTab === 'rejected'" prop="reason" label="驳回理由" width="150" show-overflow-tooltip />
-      <el-table-column v-if="checkTab !== 'pending'" prop="auditName" label="审核人" width="120" />
-      <el-table-column prop="createTime" label="提交时间" width="180" sortable="custom">
-        <template #default="{ row }">
-          {{ moment(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
-        </template>
-      </el-table-column>
-
-      <el-table-column v-if="checkTab !== 'pending'" prop="auditTime" label="审核时间" width="180" sortable="custom">
-        <template #default="{ row }">
-          {{ row.auditTime ? moment(row.auditTime).format('YYYY-MM-DD HH:mm:ss') : '--' }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="操作" width="150" fixed="right" v-if="checkTab === 'pending'">
-        <template #default="{ row }">
-          <el-button type="success" size="small" @click="handleAction('approve', row)">通过</el-button>
-          <el-button type="danger" size="small" @click="handleAction('reject', row)">驳回</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
-      :total="pagination.total" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
-      @size-change="handlePagination('size', $event)" @current-change="handlePagination('page', $event)"
-      class="pagination" />
-  </el-card>
-
-  <!-- 驳回弹出框 -->
-  <el-dialog v-model="rejectDialog" title="驳回理由" width="500px">
-    <el-form :model="rejectForm">
-      <el-form-item label="驳回理由">
-        <el-input v-model="rejectForm.reason" type="textarea" :rows="4" placeholder="请输入驳回理由" maxlength="200"
-          show-word-limit />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button @click="rejectDialog=false">取消</el-button>
-      <el-button type="primary" @click="rejectRefund">确定</el-button>
-    </template>
-  </el-dialog>
-</template>
-
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, reactive, computed } from 'vue'
+import ElementPlus from 'element-plus'
 import request from '@/util/http'
 import { ElMessage } from 'element-plus'
+import { AiFillRead } from 'vue-icons-plus/ai'
+import axios from 'axios'
 import moment from 'moment'
-
-// 状态常量
-const STATUS = {
-  PENDING: 0,// 待审核
-  APPROVED: 1,// 通过
-  REJECTED: 2 // 驳回
-}
-
-// 搜索表单
-const searchForm = ref({
-  jwcode: '',
-  refundType: '',
-  refundGoods: '',
-  area: '',
-  startDate: '',
-  endDate: ''
+// 变量
+// 用户对象假的
+const admin = ref({
+  adminId: 1,
+  name: '赵刚',
+  area: '中国'
 })
-
-const checkTab = ref(1) // 能否不用STATUS常量，1是待审批，2是已通过，3是驳回，参数status需要Integer
-const dateRange = ref([])
-
-const pagination = ref({
-  pageNum: 1,
-  pageSize: 50,
-  total: 0
-})
-
-const tableData = ref([])
-const productOptions = ref([])
-const areaOptions = ref([])
-const adminInfo = ref({})
-const stats = ref({
-  totalItems: 0,
-  totalCoins: 0,
-  permanentCoins: 0,
-  freeCoins: 0,
-  taskCoins: 0
-})
-// 驳回
-const rejectDialog = ref(false) // 驳回对话框
-const rejectForm = ref({ reason: '' })
-const currentRecord = ref(null)
-// 获取用户信息
-const fetchAdminInfo = async () => {
+//这是获取用户信息的接口
+const adminData = ref({})
+const getAdminData = async function () {
   try {
-    const res = await request({ url: '/admin/userinfo' })
-    adminInfo.value = res
-    if (res.area !== '总部') {
-      searchForm.value.area = res.area
-    }
-  } catch (error) {
-    console.error('获取用户信息失败', error)
-  }
-}
-
-// 查商品
-const fetchProducts = async () => {
-  try {
-    const res = await request({ url: '/product' })
-    productOptions.value = res.data || []
+    const result = await request({
+      url: '/admin/userinfo',
+      data: {}
+    })
+    adminData.value = result
+    console.log('请求成功', result)
+    console.log('用户信息', adminData.value)
   } catch (error) {
-    console.error('获取商品列表失败', error)
+    console.log('请求失败', error)
   }
 }
-
-// 查地区
-const fetchAreas = async () => {
-  try {
-    const result = await request({ url: '/recharge/user/search' })
-    areaOptions.value = result.data || []
-  } catch (error) {
-    console.error('获取地区列表失败', error)
+// 充值明细表格
+const tableData = ref([])
+// 搜索======================================
+// 搜索detail
+const detail = ref({})
+// 搜索对象
+const getObj = ref({
+  pageNum: 1,
+  pageSize: 50
+})
+//分页总条目
+const total = ref(100)
+// 搜索对象时间
+const getTime = ref([])
+// 搜索活动列表
+const product = ref([])
+// 所有信息
+const allData = ref([])
+// 搜索地区列表
+const area = ref([])
+
+// 编辑======================================
+// 驳回弹出框
+const rejectVisible = ref(false)
+// 驳回对象
+const rejectObj = ref({})
+// 通过对象
+const passObj = ref({})
+
+//标签页默认高亮选项
+const activeName = ref('all')
+
+// 退款类型选项
+const refundType = [
+  {
+    value: '退款商品',
+    label: '退款商品'
   }
-}
-
-const get = async () => {
-  console.log('===========================================' + checkTab.value)
+]
+
+// //表格高度
+// const tableHeight = computed(function () {
+//   return (getObj.value.pageSize + 1) * 50 + "px";
+// });
+
+// 表单验证ref
+const Ref = ref(null)
+
+// 方法
+// 统计合计数
+// 统计合计数
+const trueGold = ref(0)
+const trueCount = ref(0)
+// 待审核条数
+const pendingCount = ref(0)
+// 待审核金币数
+const pendingGold = ref(0)
+// 已通过条数
+const approvedCount = ref(0)
+// 已通过金币数
+const approvedGold = ref(0)
+// 已驳回条数
+const rejectedCount = ref(0)
+// 已驳回金币数
+const rejectedGold = ref(0)
+
+// 搜索==================================================================
+// 搜索方法
+const get = async function (val) {
   try {
-    const params = {
-      pageNum: pagination.value.pageNum,
-      pageSize: pagination.value.pageSize,
-      detail: {
-        ...searchForm.value,
-        status: getCurrentStatus()
-      }
+    // 地区赋值
+    if (adminData.value.area === '泰国') {
+      rechargeVo.value.areas = ['泰国', '越南']
+    } else if (adminData.value.area !== '总部') {
+      rechargeVo.value.area = adminData.value.area
     }
-    // 时间格式化
-    if (dateRange.value?.length === 2) {
-      params.detail.startDate = moment(dateRange.value[0]).format('YYYY-MM-DD HH:mm:ss')
-      params.detail.endDate = moment(dateRange.value[1]).format('YYYY-MM-DD HH:mm:ss')
+    // 搜索参数页码赋值
+    if (typeof val === 'number') {
+      getObj.value.pageNum = val
     }
-
-    const res = await request({
+    // 搜索参数时间赋值
+    if (getTime.value != null) {
+      if (getTime.value.startDate != '' && getTime.value.endDate != '') {
+        detail.value.startDate = getTime.value[0]
+        detail.value.endDate = getTime.value[1]
+      }
+    } else {
+      detail.value.startDate = ''
+      detail.value.endDate = ''
+    }
+    detail.value.sortField = sortField.value
+    detail.value.sortOrder = sortOrder.value
+    console.log('搜索参数', getObj.value)
+    // 发送POST请求
+    const result = await request({
       url: '/audit/audit/refund',
-      data: params
+      data: {
+        pageNum: getObj.value.pageNum,
+        pageSize: getObj.value.pageSize,
+        detail: {
+          ...detail.value
+        }
+      }
     })
-
-    tableData.value = res.data?.list || []
-    pagination.value.total = res.data?.total || 0
-
-    fetchStats()
-  } catch (error) {
-    console.error('获取数据失败', error)
-  }
-}
-
-const fetchStats = async () => {
-  try {
-    const params = { ...searchForm.value, status: getCurrentStatus() }
-    const res = await request({
+    const detailWithoutSort = { ...detail.value }
+    delete detailWithoutSort.sortField
+    delete detailWithoutSort.sortOrder
+    const result2 = await request({
       url: '/refund/RefundA',
-      data: params
+      data: detailWithoutSort
     })
 
-    if (res.data) {
-      const data = res.data
-      stats.value = {
-        totalItems: data.raudit || 0,
-        totalCoins: data.sumRaudit || 0,
-        permanentCoins: data.permanentCoins || 0,
-        freeCoins: data.freeCoins || 0,
-        taskCoins: data.taskCoins || 0
-      }
+    // 统计合计数
+    if (result2.data) {
+      result2.data.forEach((item) => {
+        switch (item.status) {
+          case '待审核':
+            // 若 item.raudit 为空则赋值为 0
+            pendingCount.value = item.raudit || 0
+            // 若 item.sumRaudit 为空则赋值为 0
+            pendingGold.value = item.sumRaudit || 0
+            break
+          case '已通过':
+            approvedCount.value = item.raudit || 0
+            approvedGold.value = item.sumRaudit || 0
+            break
+          case '已驳回':
+            rejectedCount.value = item.raudit || 0
+            rejectedGold.value = item.sumRaudit || 0
+            break
+        }
+      })
     }
+
+    trueGold.value = pendingGold.value + approvedGold.value + rejectedGold.value
+    trueCount.value =
+      pendingCount.value + approvedCount.value + rejectedCount.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.error('获取统计信息失败', error)
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
-
-const handleSearch = () => {
-  pagination.value.pageNum = 1
+// 搜索
+const search = function () {
+  trimJwCode();
+  getObj.value.pageNum = 1
   get()
 }
-
-const resetSearch = () => {
-  searchForm.value = {
-    jwcode: '',
-    refundType: '',
-    refundGoods: '',
-    area: adminInfo.value.area === '总部' ? '' : adminInfo.value.area,
-    startDate: '',
-    endDate: ''
-  }
-  dateRange.value = []
-  handleSearch()
+// 重置
+const reset = function () {
+  detail.value.area = ''
+  detail.value.jwcode = ''
+  detail.value.refundType = ''
+  detail.value.refundGoods = ''
+  detail.value.startDate = ''
+  detail.value.endDate = ''
+  sortField.value = ''
+  sortOrder.value = ''
+  getTime.value = {}
 }
-
-// 转换格式 moment(param).format('YYYY-MM-DD HH:mm:ss')
 // 今天
-const getToday = () => {
+const getToday = function () {
   const today = new Date()
-  const start = moment(new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0)).format('YYYY-MM-DD HH:mm:ss')
-  const end = moment(new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 0, 0, 0)).format('YYYY-MM-DD HH:mm:ss')
-  dateRange.value = [start, end]
+  const startDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate()
+  )
+  const endDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('getTime', getTime.value)
   get()
 }
-
 // 昨天
-const getYesterday = () => {
+const getYesterday = function () {
   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)
-  dateRange.value = [moment(start).format('YYYY-MM-DD HH:mm:ss'), moment(end).format('YYYY-MM-DD HH:mm:ss')]
+  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 = () => {
+const get7Days = function () {
   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)
-  dateRange.value = [start,end]// 好像不转换也可以？？？？？？
+  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 switchTab = (tab) => {
-  checkTab.value = tab
-  pagination.value.pageNum = 1
+//全部充值明细
+const adminAll = function () {
+  console.log('adminAll')
+  detail.value.status = ''
+  getObj.value.pageNum = 1
   get()
 }
-
-// 当前状态
-const getCurrentStatus = () => {
-  switch (checkTab.value) {
-    case 'pending': return STATUS.PENDING
-    case 'approved': return STATUS.APPROVED
-    case 'rejected': return STATUS.REJECTED
-    default: return ''
-  }
+//待审核充值明细
+const adminWait = async function () {
+  detail.value.status = 0
+  getObj.value.pageNum = 1
+  await get()
+  console.log('adminWait')
+  trueGold.value = pendingGold.value
+  trueCount.value = pendingCount.value
 }
-
-const handlePagination = (type, val) => {
-  if (type === 'size') {
-    pagination.value.pageSize = val
-  } else {
-    pagination.value.pageNum = val
+//已通过充值明细
+const adminPass = async function () {
+  detail.value.status = 1
+  getObj.value.pageNum = 1
+  await get()
+  console.log('adminPass')
+  trueGold.value = approvedGold.value
+  trueCount.value = approvedCount.value
+}
+//已驳回充值明细
+const adminReject = async function () {
+  detail.value.status = 2
+  getObj.value.pageNum = 1
+  await get()
+  console.log('adminReject')
+  trueGold.value = rejectedGold.value
+  trueCount.value = rejectedCount.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()
   }
-  get()
 }
+// 获取活动名称
+const getProduct = async function () {
+  try {
+    // 发送POST请求
+    const result = await request({
+      url: '/product',
+      data: {}
+    })
 
-const handleAction = (type, row) => {
-  currentRecord.value = row
-  if (type === 'reject') {
-    rejectForm.value.reason = ''
-    rejectDialog.value = true
-  } else if (type === 'approve') {
-    approveRefund()
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 存储表格数据
+    product.value = result.data
+    console.log('产品', product.value)
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
 
-const approveRefund = async () => {
+// 获取地区
+const getArea = async function () {
   try {
-    const params = {
-      adminId: adminInfo.value.adminId,
-      auditId: currentRecord.value.auditId,
-      status: STATUS.APPROVED,
-      refundId: currentRecord.value.refundId
-    }
-
-    await request({
-      url: '/audit/audit/edit',
-      data: params
+    // 发送POST请求
+    const result = await request({
+      url: '/recharge/user/search',
+      data: {}
     })
-
-    ElMessage.success('退款已批准')
-    get()
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 存储地区信息
+    area.value = result.data
+    console.log('地区', area.value)
   } catch (error) {
-    console.error('批准失败', error)
-    ElMessage.error('操作失败')
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
-
-const rejectRefund = async () => {
-  if (!rejectForm.value.reason) {
-    ElMessage.warning('请输入驳回理由')
-    return
+// 验证跳转输入框的数字是否合法
+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: '请检查输入内容'
+    })
   }
+}
 
-  try {
-    const params = {
-      adminId: adminInfo.value.adminId,
-      auditId: currentRecord.value.auditId,
-      status: STATUS.REJECTED,
-      refundId: currentRecord.value.refundId,
-      reason: rejectForm.value.reason
-    }
+// 编辑====================================
+// 通过按钮
+const pass = function (row) {
+  // 通过初始化
+  passObj.value.adminId = adminData.value.adminId
+  passObj.value.auditId = row.auditId
+  passObj.value.status = 1
+  passObj.value.refundId = row.refundId
+  passObj.value.adminName = row.adminName
+  passObj.value.username = row.username
+  passObj.value.area = row.area
+  console.log('通过对象', passObj.value)
+}
 
-    await request({
+// 通过确认
+const passConfirm = async function () {
+  try {
+    console.log('通过对象', passObj.value)
+    // 发送POST请求
+    const result = await request({
       url: '/audit/audit/edit',
-      data: params
+      data: passObj.value
     })
 
-    ElMessage.success('退款已驳回')
-    rejectDialog.value = false
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 刷新表格数据
     get()
+    //提示
+    ElMessage({
+      type: 'success',
+      message: '通过成功！'
+    })
   } catch (error) {
-    console.error('驳回失败', error)
-    ElMessage.error('操作失败')
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
 
-onMounted(async () => {
-  await fetchAdminInfo()// 用户信息要挂吗
-
-  await fetchProducts()
-  await fetchAreas()
+// 打开驳回弹出框
+const openRejectVisible = function () {
+  rejectVisible.value = true
+}
+// 关闭驳回弹出框
+const closeRejectVisible = 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.refundId = row.refundId
+  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/edit',
+          data: rejectObj.value
+        })
+
+        // 将响应结果存储到响应式数据中
+        console.log('请求成功', result)
+        // 刷新表格数据
+        get()
+        // 关闭弹出框
+        closeRejectVisible()
+        //提示
+        ElMessage({
+          type: 'success',
+          message: '驳回成功！'
+        })
+      } catch (error) {
+        console.log('请求失败', error)
+        // 在这里可以处理错误逻辑，比如显示错误提示等
+      }
+    } else {
+      //提示
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      })
+    }
+  })
+}
+const handlePageSizeChange = function (val) {
+  getObj.value.pageSize = val
+  get()
+}
+const handleCurrentChange = function (val) {
+  getObj.value.pageNum = val
   get()
+}
+// 表单验证
+
+const rules = reactive({
+  reson: [{ required: true, message: '请输入驳回理由', trigger: 'blur' }]
+})
+
+// 挂载
+onMounted(async function () {
+  await getAdminData()
+  await get()
+  getProduct()
+  await getArea()
+  await getArea()
 })
+// 新增排序字段和排序方式
+const sortField = ref('')
+const sortOrder = ref('')
+// 处理排序事件
+const handleSortChange = (column) => {
+  console.log('排序字段：', column.prop)
+  console.log('排序方式：', column.order)
+  if (column.prop === 'rechargeCoin') {
+    sortField.value = 'recharge_coin'
+  } else if (column.prop === 'taskCoin') {
+    sortField.value = 'task_coin'
+  } else if (column.prop === 'freeCoin') {
+    sortField.value = 'free_coin'
+  } else if (column.prop === 'createTime') {
+    sortField.value = 'create_time'
+  }
+  sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC'
+  get()
+}
+// 精网号去空格
+const trimJwCode = () => {
+  if (detail.value.jwcode) {
+    // 使用正则表达式替换所有空格为空
+    detail.value.jwcode = detail.value.jwcode.replace(/\s/g, ''); 
+  }
+}
 </script>
 
+<template>
+  <el-row>
+    <el-col>
+      <el-card style="margin-bottom: 20px">
+        <el-row style="margin-bottom: 10px">
+          <el-col :span="6">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">精网号：</el-text>
+              <el-input
+                v-model="detail.jwcode"
+                placeholder="请输入精网号"
+                size="large"
+                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="detail.refundType"
+                placeholder="请选择退款类型"
+                size="large"
+                style="width: 240px"
+                clearable
+              >
+                <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="detail.refundGoods"
+                placeholder="请选择退款商品"
+                size="large"
+                style="width: 240px"
+                clearable
+              >
+                <el-option
+                  v-for="item in product"
+                  :key="item.name"
+                  :label="item.name"
+                  :value="item.name"
+                />
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="head-card-element" v-if="adminData.area == '总部'">
+              <el-text class="mx-1" size="large">所属地区：</el-text>
+              <el-select
+                v-model="detail.area"
+                placeholder="请选择所属地区"
+                size="large"
+                style="width: 240px"
+                clearable
+              >
+                <el-option
+                  v-for="item in area"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="21">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">退款时间：</el-text>
+              <el-date-picker
+                v-model="getTime"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="起始时间"
+                end-placeholder="结束时间"
+              />
+              <el-button style="margin-left: 10px" @click="getToday()"
+                >今</el-button
+              >
+              <el-button @click="getYesterday()">昨</el-button>
+              <el-button @click="get7Days()">近7天</el-button>
+            </div>
+          </el-col>
+          <el-col :span="3">
+            <div class="head-card-btn">
+              <el-button type="success" @click="reset()">重置</el-button>
+              <el-button type="primary" @click="search()">查询</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-col>
+  </el-row>
+  <el-row>
+    <el-col>
+      <el-card>
+        <el-tabs
+          v-model="activeName"
+          type="card"
+          class="demo-tabs"
+          @tab-click="handleClick"
+        >
+          <el-tab-pane label="全部" name="all"></el-tab-pane>
+          <el-tab-pane label="待审核" name="wait"></el-tab-pane>
+          <el-tab-pane label="已通过" name="pass"></el-tab-pane>
+          <el-tab-pane label="已驳回" name="reject"></el-tab-pane>
+          <div>
+            退款记录条数：{{ Math.abs(trueCount) }},退款金币总数：{{
+              Math.abs(trueGold)
+            }}
+          </div>
+        </el-tabs>
+        <!-- 设置表格容器的高度和滚动样式 -->
+        <div style="height: 540px; overflow-y: auto">
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+            height="540px"
+            @sort-change="handleSortChange"
+          >
+            <el-table-column
+              type="index"
+              label="序号"
+              width="100px"
+              fixed="left"
+            >
+              <template #default="scope">
+                <span>{{
+                  scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              fixed="left"
+              prop="username"
+              label="姓名"
+              width="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="200px"
+            />
+            <el-table-column prop="refundCoin" label="退款金币数" width="100px">
+              <template #default="scope">
+                <span>{{
+                  scope.row.rechargeCoin +
+                  scope.row.freeCoin +
+                  scope.row.taskCoin
+                }}</span>
+              </template>
+            </el-table-column>
+            <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="taskCoin"
+              label="任务金币"
+              sortable="“custom”"
+              width="110px"
+            >
+              <template #default="scope">
+                {{ scope.row.taskCoin }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="remark"
+              label="备注"
+              width="200px"
+              show-overflow-tooltip
+            />
+            <el-table-column prop="adminName" label="提交人" width="100px" />
+            <el-table-column prop="status" label="审核状态" width="100px">
+              <!-- 模板内容 -->
+              <template #default="scope">
+                <span v-if="scope.row.status == 1">
+                  <div class="status">
+                    <span class="green-dot"></span>
+                    <span>已通过</span>
+                  </div>
+                </span>
+                <span v-if="scope.row.status == 0">
+                  <div class="status">
+                    <span class="grey-dot"></span>
+                    <span>待审核</span>
+                  </div>
+                </span>
+                <span v-if="scope.row.status == 2">
+                  <div class="status">
+                    <span class="red-dot"></span>
+                    <span>已驳回</span>
+                  </div>
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="reson"
+              label="驳回理由"
+              width="200px"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              prop="createTime"
+              sortable="“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
+              prop="auditTime"
+              sortable="custom"
+              label="审核时间"
+              width="200px"
+            >
+              <template #default="scope">
+                {{scope.row.auditTime ? moment(scope.row.auditTime).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>
+                    </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>
+                  <el-button
+                    :disabled="
+                      scope.row.status === 1 || scope.row.status === 2
+                        ? true
+                        : false
+                    "
+                    type="primary"
+                    text
+                    @click="reject(scope.row)"
+                  >
+                    驳回
+                  </el-button>
+                </div>
+              </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"
+          ></el-pagination>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+
+  <!-- 驳回弹出框 -->
+  <el-dialog
+    v-model="rejectVisible"
+    title="驳回理由"
+    width="500"
+    :before-close="closeRejectVisible"
+  >
+    <template #footer>
+      <el-form
+        :model="rejectObj"
+        ref="Ref"
+        :rules="rules"
+        label-width="auto"
+        style="max-width: 600px"
+      >
+        <el-form-item prop="reson" label="驳回理由:">
+          <el-input
+            v-model="rejectObj.reson"
+            maxlength="150"
+            show-word-limit
+            style="width: 350px"
+            type="textarea"
+            placeholder="请输入内容"
+          />
+        </el-form-item>
+      </el-form>
+
+      <div class="dialog-footer">
+        <el-button @click="closeRejectVisible()">取消</el-button>
+        <el-button type="primary" @click="rejectConfirm()"> 确定 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
 <style scoped>
-.quickly-buttons {
-  margin-left: 10px;
+.pagination {
+  display: flex;
 }
 
-.stats-info {
-  padding: 3px;
-  background-color: #f5f7fa;
+.status {
+  display: flex;
 }
 
-.pagination {
-  margin-top: 20px;
-  justify-content: flex-end;
+.operation {
+  display: flex;
+}
+
+.head-card {
+  display: flex;
+}
+
+.head-card-element {
+  margin-right: 20px;
+}
+
+.head-card-btn {
+  margin-left: auto;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/consume/addCoinConsume.vue b/src/views/consume/addCoinConsume.vue
new file mode 100644
index 0000000..86f6a89
--- /dev/null
+++ b/src/views/consume/addCoinConsume.vue
@@ -0,0 +1,706 @@
+<script setup>
+import { reactive, onMounted } from "vue";
+import { ref, computed, watch } from "vue";
+import { ElMessage } from "element-plus";
+import { Plus } from "@element-plus/icons-vue";
+import axios from "axios";
+import { ElMessageBox } from "element-plus";
+
+import moment from "moment";
+import _ from "lodash";
+import request from "@/util/http";
+// 精网号去空格
+const trimJwCode = () => {
+  if (addConsume.value.jwcode) {
+    addConsume.value.jwcode = addConsume.value.jwcode.replace(/\s/g, ''); 
+  }
+}
+//这是获取用户信息的接口
+const adminData = ref({});
+const getAdminData = async function () {
+  try {//await 暂停函数执行，直到请求完成
+    const result = await request({
+      url: "/admin/userinfo",
+      data: {},
+    });
+    adminData.value = result;
+    addConsume.value.adminId = adminData.value.adminId;
+    addConsume.value.name = adminData.value.name;
+    console.log("请求成功", result);
+    console.log("用户信息", adminData.value);
+  } catch (error) {
+    console.log("请求失败", error);
+  }
+};
+
+// 这是添加消费信息的表单
+const addConsume = ref({
+  freeCoin: 0,
+  rechargeCoin: 0,
+  taskCoin: 0,
+  updateType: "1",
+  indexName:"", //这个是指标字段，后面绑定
+});
+// 这是添加消费信息的接口
+const add = async function () {
+  try {
+    // 处理数据，使用楼上接口后需要隐藏
+    addConsume.value.rechargeCoin = Number(addConsume.value.rechargeCoin * 100);
+    addConsume.value.freeCoin = Number(addConsume.value.freeCoin * 100);
+    addConsume.value.taskCoin = Number(addConsume.value.taskCoin * 100);
+    addConsume.value.productName = indexs.value.productName;
+    // 发送POST请求
+    const result = await request({
+      url: "/consume/add",
+      data: addConsume.value,
+    });
+    if (result.code === 0) {
+      ElMessage.error(result.msg);
+      return;
+    } else {
+      ElMessage.success("添加成功");
+    }
+    //重置表单
+    addConsume.value = {};
+    addConsume.value.adminId = adminData.value.adminId;
+    addConsume.value.adminName = adminData.value.adminName;
+    addConsume.value.updateType = "1";
+    addConsume.value.freeCoin = 0;
+    addConsume.value.rechargeCoin = 0;
+    addConsume.value.taskCoin = 0;
+    indexs.value = {};
+    console.log("请求成功", result);
+    user.value = {};
+  } catch (error) {
+    console.log("请求失败", error);
+    ElMessage.error("添加失败，请检查输入内容是否正确");
+
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+};
+const addBefore = () => {
+  Ref.value.validate(async (valid) => {
+    if (valid) {
+      ElMessageBox.confirm("确认添加？")
+        .then(() => {
+          addConsume.value.freeCoin = Number(-addConsume.value.freeCoin);
+          addConsume.value.rechargeCoin = Number(
+            -addConsume.value.rechargeCoin
+          );
+          addConsume.value.taskCoin = Number(-addConsume.value.taskCoin);
+          add();
+          console.log("添加成功");
+          imageUrl.value = "";
+          addConsume.value = {};
+        })
+        .catch(() => {
+          console.log("取消添加");
+        });
+    } else {
+      //提示
+      ElMessage({
+        type: "error",
+        message: "请检查输入内容",
+      });
+    }
+  });
+};
+
+// 表单验证
+// 开始时间改变时，重新验证结束时间
+const Ref = ref(null);
+
+const checkFreeGoldRadio = function (rule, value, callback) {
+  if (value == "0" || value == null || value == "") {
+    callback(new Error("请输入消费金币总数"));
+  } else if (value < 0 || isNaN(value)) {
+    callback(new Error("请输入正确的格式"));
+  } else {
+    callback();
+  }
+};
+const rules = reactive({
+  jwcode: [{ required: true, message: "请输入精网号", trigger: "blur" }],
+  productName: [{ required: true, message: "请选择消费商品", trigger: "change" }], // 修改为 change
+  taskCoin: [{ required: true, message: "请输入任务金币", trigger: "blur" }],
+  freeCoin: [{ required: true, message: "请输入免费金币", trigger: "blur" }],
+  rechargeCoin: [
+    { required: true, message: "请输入免费金币", trigger: "blur" },
+  ],
+  allGold: [
+    { required: true, message: "消费金币总数不能为空", trigger: "blur" },
+    { validator: checkFreeGoldRadio, trigger: "blur" },
+  ],
+  indexName: [
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        if (isHC.value === 1 && !value) {
+          callback(new Error("请选择指标"));
+        } else {
+          callback();
+        }
+      },
+      trigger: ["change", "blur"],
+    },
+  ]
+});
+//这是重置方法
+const delteConsume = function () {
+  addConsume.value = {};
+  addConsume.value.adminId = adminData.value.adminId;
+  addConsume.value.adminName = adminData.value.adminName;
+  addConsume.value.updateType = "1";
+  addConsume.value.freeCoin = 0;
+  addConsume.value.rechargeCoin = 0;
+  addConsume.value.taskCoin = 0;
+  indexs.value = {};
+  isHC.value = 0;
+};
+// 查找客户信息的方法
+const user = ref({
+  firstRechargeTime: "",
+});
+const getUser = async function (jwcode) {
+  trimJwCode();
+  try {
+    // 发送POST请求
+    const result = await request({
+      url: "/recharge/user",
+      data: {
+        jwcode: addConsume.value.jwcode,
+        area: adminData.value.area,
+      },
+    });
+    console.log("请求成功", result);
+
+    if (result.code === 0) {
+      ElMessage.error(result.msg);
+    } else {
+      user.value = result.data;
+      user.value.A =
+        Number(user.value.pendingRechargeTimes) +
+        Number(user.value.pendingSpendTimes);
+      console.log("用户信息", user.value);
+      ElMessage.success(result.msg);
+    }
+  } catch (error) {
+    console.log("请求失败", error);
+    ElMessage.error("查询失败，请检查精网号是否正确");
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+};
+
+
+//下面这个也是校验精网号是否存在的方法，通过脱离文本框实现，但是上面方法绑定了信息面板，在输入正确的精网号后能显示。
+//这是查询用户金币信息的接口
+const userGold = ref({});
+const getUserGold = async function (jwcode) {
+  trimJwCode();
+  try {
+    // 发送POST请求
+    const result = await request({
+      url: "/recharge/user",
+      data: {
+        jwcode: addConsume.value.jwcode,
+        area: adminData.value.area,
+      },
+    });
+    // 将响应结果存储到响应式数据中
+    console.log("请求成功", result);
+    if (result.code === 0) {
+      //ElMessage.error(result.msg);
+    } else {
+      // 存储表格数据
+      userGold.value = result.data;
+      addConsume.value.username = result.data.name;
+      addConsume.value.area = result.data.area;
+     // ElMessage.success(result.msg);
+    }
+  } catch (error) {
+    console.log("请求失败", error);
+    //ElMessage.error("无此精网号");
+    addConsume.value.jwcode = "";
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+};
+
+function calculateCoins() {
+  if (
+    (userGold.value.coreJb +
+      userGold.value.free6 +
+      userGold.value.free12 +
+      userGold.value.buyJb) /
+      100 <
+    addConsume.value.allGold
+  ) {
+    addConsume.value.allGold = 0;
+    addConsume.value.taskCoin = 0;
+    addConsume.value.freeCoin = 0;
+    addConsume.value.rechargeCoin = 0;
+    ElMessage.error("金币不足，请充值");
+    return;
+  }
+  // 这是计算用户的三种金币的接口
+  else {
+    // 保存原始的allGold值
+    const originalAllGold = addConsume.value.allGold;
+
+    // 确保todayTask和todayFree是有效的数字
+    const todayTask =
+      typeof userGold.value.coreJb === "number"
+        ? userGold.value.coreJb / 100
+        : 0;
+    const todayFree =
+      typeof (userGold.value.free6 + userGold.value.free12) === "number"
+        ? (userGold.value.free6 + userGold.value.free12) / 100
+        : 0;
+
+    // 根据用户输入的消费金币总数和已有的金币数量进行计算
+    addConsume.value.taskCoin = Math.min(originalAllGold, todayTask);
+    let remainingGold = originalAllGold - addConsume.value.taskCoin;
+
+    addConsume.value.freeCoin = Math.min(remainingGold, todayFree);
+    remainingGold -= addConsume.value.freeCoin;
+
+    addConsume.value.rechargeCoin = remainingGold; // 剩余的都算作永久金币
+
+    // 恢复allGold的原始值
+    addConsume.value.allGold = originalAllGold;
+
+    // 确保taskCoin, freeCoin, rechargeCoin不是NaN，如果是，则设置为0
+    if (isNaN(addConsume.value.taskCoin)) addConsume.value.taskCoin = 0;
+    if (isNaN(addConsume.value.freeCoin)) addConsume.value.freeCoin = 0;
+    if (isNaN(addConsume.value.rechargeCoin)) addConsume.value.rechargeCoin = 0;
+
+    console.log("计算结果", addConsume.value);
+  }
+}
+
+// 查询商品的接口
+const goods = ref([]);
+const getGoods = async function () {
+  try {
+    // 发送POST请求
+    const result = await request({
+      url: "/product",
+      data: {},
+    });
+    // 将响应结果存储到响应式数据中
+
+    console.log("请求成功", result);
+    // 存储全部数据
+    goods.value = result.data;
+  } catch (error) {
+    console.log("请求失败", error);
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+};
+// 获取指标的方法
+const index = ref([]);
+const getIndexs = async function (type) {
+  try {
+    // 发送POST请求
+    const result = await request({
+      url: "/product/index",
+      data: {
+        type: type,
+      },
+    });
+    // 将响应结果存储到响应式数据中
+    console.log("请求成功", result);
+    // 存储全部数据
+    index.value = result.data;
+  } catch (error) {
+    console.log("请求失败", error);
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+};
+
+// 选择商品名称是时触发的方法
+const isHC = ref(0);
+// const handleProductSelect = (productName) => {
+//   // 根据商品名称获取对应的商品信息
+//   // indexs.value.productName = productName;为什么直接绑定？？？
+//   if (productName === "homilychart") {
+//     isHC.value = 1;
+//     addConsume.value.productName = "homilychart"; // 商品名
+//     addConsume.value.indexName = ""; // 指标名
+//   } else {
+//     isHC.value = 0;
+//     addConsume.value.productName = productName;
+//     addConsume.value.indexName = "";
+//   }
+// };
+const indexs = ref([]);
+// const handleIndexSelect = () => {
+//   if (isHC.value === 1 && addConsume.value.indexName) {
+//     addConsume.value.productName = "homilychart" + addConsume.value.indexName;
+//   }
+// };
+
+// 商品搜索逻辑
+const queryProductSearch = (queryString, cb) => {
+  const results = queryString
+    ? goods.value.filter(item => 
+        item.name.toLowerCase().includes(queryString.toLowerCase())
+      )
+    : goods.value;
+  cb(results);
+};
+
+// 指标搜索逻辑
+const queryIndexSearch = (queryString, cb) => {
+  const results = queryString
+    ? index.value.filter(item => // 将 indexData 替换为 index
+        item.name.toLowerCase().includes(queryString.toLowerCase())
+      )
+    : index.value;
+  cb(results);
+};
+
+// 商品选择处理（重点修改）
+const handleProductSelect = async (selectedItem) => {
+  const productName = typeof selectedItem === 'string' 
+    ? selectedItem 
+    : selectedItem?.name || '';
+
+  if (productName === "homilychart") {
+    isHC.value = 1;
+    addConsume.value.productName = "homilychart";
+    addConsume.value.indexName = "";
+    // 动态获取指标数据
+    await getIndexs("homilychart");
+  } else {
+    isHC.value = 0;
+    addConsume.value.productName = productName;
+    addConsume.value.indexName = "";
+  }
+};
+
+// 指标选择处理（重点修改）
+const handleIndexSelect = (selectedItem) => {
+  if (isHC.value === 1) {
+    const indexName = typeof selectedItem === 'string' 
+      ? selectedItem 
+      : selectedItem?.name || '';
+    // 仅更新指标名称字段
+    addConsume.value.indexName = indexName;
+  }
+};
+
+// 处理自由输入指标
+const handleIndexBlur = (e) => {
+  if (isHC.value === 1 && e.target.value) {
+    // 仅更新指标名称字段
+    addConsume.value.indexName = e.target.value;
+  }
+};
+
+
+
+
+// 挂载
+onMounted(async function () {
+  await getAdminData();
+  await getGoods();
+  await getIndexs(1);
+});
+
+const handleSelectBlur = (value) => {
+  // 这里可以根据需求添加额外逻辑，比如验证输入值是否有效
+  // 目前直接将输入值同步到 v-model 绑定的值上
+  if (value) {
+    // 若选择的是商品名称
+    if (addConsume.value.productName === value) {
+      addConsume.value.productName = value;
+    } 
+    // 若选择的是指标名称
+    else if (indexs.value.name === value) {
+      indexs.value.name = value;
+    }
+  }
+};
+</script>
+
+<template>
+
+<div>
+  
+
+    <!-- 根据activeTab切换显示内容 -->
+   <!-- 新增消耗的布局---------------------------------------------------------- -->
+  <!-- <div v-if="activeTab === 'addConsume'"> -->
+  <!-- <div style="margin-bottom: 20px; font-weight: bolder">新增消费</div> -->
+
+  <el-form
+    :model="addConsume"
+    ref="Ref"
+    :rules="rules"
+    label-width="auto"
+    style="max-width: 750px;"
+    class="form-style"
+  >
+    <el-form-item prop="jwcode" label="精网号">
+      <el-input
+        v-model="addConsume.jwcode"
+        style="width: 220px"
+        @change="getUserGold(addConsume.jwcode)"
+      />
+      <el-button
+        type="primary"
+        @click="getUser(addConsume.jwcode)"
+        style="margin-left: 20px"
+        >查询</el-button
+      >
+    </el-form-item>
+     <div style="display: flex; align-items: center; gap: 20px;">
+    <el-form-item prop="productName" label="商品名称" style="flex: 1; margin-right: 0px">
+    <el-autocomplete
+      v-model="addConsume.productName"
+      :fetch-suggestions="queryProductSearch"
+      placeholder="请输入或选择商品"
+      style="width: 300px"
+      @select="handleProductSelect"
+      value-key="name"
+      clearable
+      :trigger-on-focus="true"
+    >
+      <template #default="{ item }">
+        <div>{{ item.name }}</div>
+      </template>
+    </el-autocomplete>
+  </el-form-item>
+
+  <!-- 指标选择 -->
+   <!-- 使用flex布局会使页面更灵活好用，修改之前选中商品名称后才会正常布局的bug -->
+  <!-- <el-form-item prop="indexName" label="指标" v-if="isHC == 1" style="flex: 1;margin-left: -20px">
+    <el-autocomplete
+      v-model="addConsume.indexName"
+      :fetch-suggestions="queryIndexSearch"
+      placeholder="请输入或选择指标"
+      style="width: 140px"
+      @select="handleIndexSelect"
+      @blur="handleIndexBlur"
+      value-key="name"
+      :disabled="isHC !== 1"
+      clearable
+      free-solo
+      allow-create
+    >
+      <template #default="{ item }">
+        <div>{{ item.name }}</div>
+      </template>
+    </el-autocomplete>
+  </el-form-item>
+  <el-form-item label="指标" v-else style="flex:1;margin-left: -5px;">
+    <el-input disabled placeholder="无" style="width: 100px" />
+  </el-form-item> -->
+</div>
+    <el-form-item prop="allGold" label="消费金币总数" >
+      <el-input
+        v-model="addConsume.allGold"
+        style="width: 100px"
+        @change="calculateCoins()"
+      />
+    </el-form-item>
+    <div style="display: flex; align-items: center">
+      <el-form-item prop="rechargeCoin" label="永久金币" style="float: left">
+        <el-input
+          disabled
+          v-model="addConsume.rechargeCoin"
+          style="width: 100px; margin-left: -5px"
+        />
+        <p style="margin-right: 0px">个</p>
+      </el-form-item>
+      <el-form-item
+        prop="freeCoin"
+        label="免费金币"
+        style="float: left; margin-left: -20px"
+      >
+        <el-input
+          disabled
+          v-model="addConsume.freeCoin"
+          style="width: 100px; margin-left: -5px"
+        />
+        <p style="margin-right: 0px">个</p>
+      </el-form-item>
+      <el-form-item prop="taskCoin" label="任务金币" style="margin-left: -20px">
+        <el-input
+          disabled
+          v-model="addConsume.taskCoin"
+          style="width: 100px; margin-left: -5px"
+        />
+        <p style="margin-right: 20px">个</p>
+      </el-form-item>
+    </div>
+    <el-form-item prop="remark" label="备注">
+      <el-input
+        v-model="addConsume.remark"
+        style="width: 300px"
+        :rows="2"
+        maxlength="100"
+        show-word-limit
+        type="textarea"
+      />
+    </el-form-item>
+    <el-form-item prop="commitName" label="提交人">
+      <el-input
+        style="width: 300px"
+        :value="adminData.name"
+        disabled
+        placeholder="提交人姓名"
+      />
+    </el-form-item>
+    <el-button type="success" @click="delteConsume" style="margin-left: 280px">重置</el-button>
+    <el-button type="primary" @click="addBefore"> 提交 </el-button>
+  </el-form>
+
+  <!-- 客户信息栏 -->
+  <el-card style="width: 850px; float: right" class="customer-info">
+    <el-form
+      :model="user"
+      label-width="auto"
+      style="max-width: 1200px"
+      label-position="left"
+    >
+      <el-text size="large" style="margin-left: 20px">客户信息</el-text>
+      <el-row style="margin-top: 20px">
+        <el-col :span="10">
+          <el-form-item label="姓名:">
+            <p>{{ user.name }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="14">
+          <el-form-item label="历史金币总数">
+            <!-- 检查 user.totalRechargeGold 是否为有效的数字 -->
+            <p v-if="!isNaN(Number(user.totalRechargeGold))">
+              {{ Number(user.totalRechargeGold / 100) }}
+            </p>
+            <!-- 如果不是有效的数字，显示默认值 -->
+            <p v-else></p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item label="精网号">
+            <p>{{ user.jwcode }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="14">
+          <el-form-item label="当前金币总数" style="width: 500px">
+            <span
+              style="color: #2fa1ff; margin-right: 5px"
+              v-if="user.buyJb !== undefined"
+              >{{
+                (user.buyJb + user.free6 + user.free12 + user.coreJb) / 100
+              }}</span
+            >
+            <span
+              style="display: inline; white-space: nowrap; color: #b1b1b1"
+              v-if="user.buyJb !== undefined"
+              >(永久金币:{{ user.buyJb / 100 }};免费金币:{{
+                (user.free6 + user.free12) / 100
+              }};任务金币:{{ user.coreJb / 100 }})</span
+            >
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item label="首次充值日期">
+            <p v-if="user.firstRechargeDate">
+              {{ moment(user.firstRechargeDate).format("YYYY-MM-DD HH:mm:ss") }}
+            </p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="14">
+          <el-form-item label="充值次数">
+            <p style="color: #2fa1ff">{{ user.rechargeTimes }}</p>
+          </el-form-item>
+        </el-col>
+        <!-- <el-col :span="10">
+          <el-form-item label="负责客服">
+            <p>{{ adminData.name }}</p>
+          </el-form-item>
+        </el-col> -->
+        <el-col :span="10">
+          <el-form-item label="消费次数">
+            <p style="color: #2fa1ff">{{ user.spendTimes }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="10">
+          <el-form-item label="所属门店">
+            <p>{{ adminData.area }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="14">
+          <!-- <el-form-item label="待审核">
+            <p style="color: #2fa1ff">
+              {{ user.A }}
+            </p>
+          </el-form-item> -->
+        </el-col>
+      </el-row>
+    </el-form>
+  </el-card>
+  </div>
+
+  <!-- 金币消耗明细的布局------------------------------------------------------- -->
+  <!-- <div v-else-if="activeTab === 'detail'"> -->
+    
+  <!-- </div>
+  </div> -->
+</template>
+
+<style scoped>
+p {
+  margin: 0px;
+}
+
+.el-form-item {
+  margin-left: 50px;
+}
+
+/* 上传图片的格式 */
+.avatar-uploader .avatar {
+  width: 50px;
+  height: 50px;
+  display: block;
+}
+</style>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+}
+
+.form-style {
+  margin-top: 50px;
+  max-width: 50%;
+  float: left;
+}
+
+.form-style2 {
+  max-width: 60%;
+}
+
+p {
+  font-size: 13px;
+  transform: scale(1);
+}
+</style>
diff --git a/src/views/consume/coinConsume.vue b/src/views/consume/coinConsume.vue
index 35ffcba..91086e2 100644
--- a/src/views/consume/coinConsume.vue
+++ b/src/views/consume/coinConsume.vue
@@ -1,602 +1,61 @@
-<script setup>
-import { reactive, onMounted } from "vue";
-import { ref, computed, watch } from "vue";
-import { ElMessage, ElMessageBox } from "element-plus";
-import { Plus } from "@element-plus/icons-vue";
-import axios from "axios";
-import moment from "moment";
-import _ from "lodash";
-import request from "@/util/http";
-// 精网号去空格
-const trimJwCode = () => {
-  if (addConsume.value.jwcode) {
-    addConsume.value.jwcode = addConsume.value.jwcode.replace(/\s/g, '');
-  }
-}
-//这是获取用户信息的接口
-const adminData = ref({});
-const getAdminData = async function () {
-  try {
-    const result = await request({
-      url: "/admin/userinfo",
-      data: {},
-    });
-    adminData.value = result;
-    addConsume.value.adminId = adminData.value.adminId;
-    addConsume.value.name = adminData.value.name;
-    console.log("请求成功", result);
-    console.log("用户信息", adminData.value);
-  } catch (error) {
-    console.log("请求失败", error);
-  }
-};
-
-// 这是添加消费信息的表单
-const addConsume = ref({
-  freeCoin: 0,
-  rechargeCoin: 0,
-  taskCoin: 0,
-  updateType: "1",
-  indexName: "", //这个是指标字段，后面绑定
-});
-// 这是添加消费信息的接口
-const add = async function () {
-  try {
-    // 处理数据，使用楼上接口后需要隐藏
-    addConsume.value.rechargeCoin = Number(addConsume.value.rechargeCoin * 100);
-    addConsume.value.freeCoin = Number(addConsume.value.freeCoin * 100);
-    addConsume.value.taskCoin = Number(addConsume.value.taskCoin * 100);
-    addConsume.value.productName = indexs.value.productName;
-    // 发送POST请求
-    const result = await request({
-      url: "/consume/add",
-      data: addConsume.value,
-    });
-    if (result.code === 0) {
-      ElMessage.error(result.msg);
-      return;
-    } else {
-      ElMessage.success("添加成功");
-    }
-    //重置表单
-    addConsume.value = {};
-    addConsume.value.adminId = adminData.value.adminId;
-    addConsume.value.adminName = adminData.value.adminName;
-    addConsume.value.updateType = "1";
-    addConsume.value.freeCoin = 0;
-    addConsume.value.rechargeCoin = 0;
-    addConsume.value.taskCoin = 0;
-    indexs.value = {};
-    console.log("请求成功", result);
-    user.value = {};
-  } catch (error) {
-    console.log("请求失败", error);
-    ElMessage.error("添加失败，请检查输入内容是否正确");
-
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-};
-const addBefore = () => {
-  Ref.value.validate(async (valid) => {
-    if (valid) {
-      ElMessageBox.confirm("确认添加？")
-        .then(() => {
-          addConsume.value.freeCoin = Number(-addConsume.value.freeCoin);
-          addConsume.value.rechargeCoin = Number(
-            -addConsume.value.rechargeCoin
-          );
-          addConsume.value.taskCoin = Number(-addConsume.value.taskCoin);
-          add();
-          console.log("添加成功");
-          imageUrl.value = "";
-          addConsume.value = {};
-        })
-        .catch(() => {
-          console.log("取消添加");
-        });
-    } else {
-      //提示
-      ElMessage({
-        type: "error",
-        message: "请检查输入内容",
-      });
-    }
-  });
-};
-
-// 表单验证
-// 开始时间改变时，重新验证结束时间
-const Ref = ref(null);
-
-const checkFreeGoldRadio = function (rule, value, callback) {
-  if (value == "0" || value == null || value == "") {
-    callback(new Error("请输入消费金币总数"));
-  } else if (value < 0 || isNaN(value)) {
-    callback(new Error("请输入正确的格式"));
-  } else {
-    callback();
-  }
-};
-const rules = reactive({
-  jwcode: [{ required: true, message: "请输入精网号", trigger: "blur" }],
-  productName: [{ required: true, message: "请选择消费商品", trigger: "change" }], // 修改为 change
-  taskCoin: [{ required: true, message: "请输入任务金币", trigger: "blur" }],
-  freeCoin: [{ required: true, message: "请输入免费金币", trigger: "blur" }],
-  rechargeCoin: [
-    { required: true, message: "请输入免费金币", trigger: "blur" },
-  ],
-  allGold: [
-    { required: true, message: "消费金币总数不能为空", trigger: "blur" },
-    { validator: checkFreeGoldRadio, trigger: "blur" },
-  ],
-  indexName: [
-    {
-      required: true,
-      validator: (rule, value, callback) => {
-        if (isHC.value === 1 && !value) {
-          callback(new Error("请选择指标"));
-        } else {
-          callback();
-        }
-      },
-      trigger: ["change", "blur"],
-    },
-  ]
-});
-//这是重置方法
-const delteConsume = function () {
-  addConsume.value = {};
-  addConsume.value.adminId = adminData.value.adminId;
-  addConsume.value.adminName = adminData.value.adminName;
-  addConsume.value.updateType = "1";
-  addConsume.value.freeCoin = 0;
-  addConsume.value.rechargeCoin = 0;
-  addConsume.value.taskCoin = 0;
-  indexs.value = {};
-  isHC.value = 0;
-};
-// 查找客户信息的方法
-const user = ref({
-  firstRechargeTime: "",
-});
-const getUser = async function (jwcode) {
-  trimJwCode();
-  try {
-    // 发送POST请求
-    const result = await request({
-      url: "/recharge/user",
-      data: {
-        jwcode: addConsume.value.jwcode,
-        area: adminData.value.area,
-      },
-    });
-    console.log("请求成功", result);
-
-    if (result.code === 0) {
-      ElMessage.error(result.msg);
-    } else {
-      user.value = result.data;
-      user.value.A =
-        Number(user.value.pendingRechargeTimes) +
-        Number(user.value.pendingSpendTimes);
-      console.log("用户信息", user.value);
-      ElMessage.success(result.msg);
-    }
-  } catch (error) {
-    console.log("请求失败", error);
-    ElMessage.error("查询失败，请检查精网号是否正确");
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-};
-
-
-//下面这个也是校验精网号是否存在的方法，通过脱离文本框实现，但是上面方法绑定了信息面板，在输入正确的精网号后能显示。
-//这是查询用户金币信息的接口
-const userGold = ref({});
-const getUserGold = async function (jwcode) {
-  trimJwCode();
-  try {
-    // 发送POST请求
-    const result = await request({
-      url: "/recharge/user",
-      data: {
-        jwcode: addConsume.value.jwcode,
-        area: adminData.value.area,
-      },
-    });
-    // 将响应结果存储到响应式数据中
-    console.log("请求成功", result);
-    if (result.code === 0) {
-      //ElMessage.error(result.msg);
-    } else {
-      // 存储表格数据
-      userGold.value = result.data;
-      addConsume.value.username = result.data.name;
-      addConsume.value.area = result.data.area;
-      // ElMessage.success(result.msg);
-    }
-  } catch (error) {
-    console.log("请求失败", error);
-    //ElMessage.error("无此精网号");
-    addConsume.value.jwcode = "";
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-};
-
-function calculateCoins() {
-  if (
-    (userGold.value.coreJb +
-      userGold.value.free6 +
-      userGold.value.free12 +
-      userGold.value.buyJb) /
-    100 <
-    addConsume.value.allGold
-  ) {
-    addConsume.value.allGold = 0;
-    addConsume.value.taskCoin = 0;
-    addConsume.value.freeCoin = 0;
-    addConsume.value.rechargeCoin = 0;
-    ElMessage.error("金币不足，请充值");
-    return;
-  }
-  // 这是计算用户的三种金币的接口
-  else {
-    // 保存原始的allGold值
-    const originalAllGold = addConsume.value.allGold;
-
-    // 确保todayTask和todayFree是有效的数字
-    const todayTask =
-      typeof userGold.value.coreJb === "number"
-        ? userGold.value.coreJb / 100
-        : 0;
-    const todayFree =
-      typeof (userGold.value.free6 + userGold.value.free12) === "number"
-        ? (userGold.value.free6 + userGold.value.free12) / 100
-        : 0;
-
-    // 根据用户输入的消费金币总数和已有的金币数量进行计算
-    addConsume.value.taskCoin = Math.min(originalAllGold, todayTask);
-    let remainingGold = originalAllGold - addConsume.value.taskCoin;
-
-    addConsume.value.freeCoin = Math.min(remainingGold, todayFree);
-    remainingGold -= addConsume.value.freeCoin;
-
-    addConsume.value.rechargeCoin = remainingGold; // 剩余的都算作永久金币
-
-    // 恢复allGold的原始值
-    addConsume.value.allGold = originalAllGold;
-
-    // 确保taskCoin, freeCoin, rechargeCoin不是NaN，如果是，则设置为0
-    if (isNaN(addConsume.value.taskCoin)) addConsume.value.taskCoin = 0;
-    if (isNaN(addConsume.value.freeCoin)) addConsume.value.freeCoin = 0;
-    if (isNaN(addConsume.value.rechargeCoin)) addConsume.value.rechargeCoin = 0;
-
-    console.log("计算结果", addConsume.value);
-  }
-}
-
-// 查询商品的接口
-const goods = ref([]);
-const getGoods = async function () {
-  try {
-    // 发送POST请求
-    const result = await request({
-      url: "/product",
-      data: {},
-    });
-    // 将响应结果存储到响应式数据中
-
-    console.log("请求成功", result);
-    // 存储全部数据
-    goods.value = result.data;
-  } catch (error) {
-    console.log("请求失败", error);
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-};
-// 获取指标的方法
-const index = ref([]);
-const getIndexs = async function (type) {
-  try {
-    // 发送POST请求
-    const result = await request({
-      url: "/product/index",
-      data: {
-        type: type,
-      },
-    });
-    // 将响应结果存储到响应式数据中
-    console.log("请求成功", result);
-    // 存储全部数据
-    index.value = result.data;
-  } catch (error) {
-    console.log("请求失败", error);
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-};
-
-// 选择商品名称是时触发的方法
-const isHC = ref(0);
-// const handleProductSelect = (productName) => {
-//   // 根据商品名称获取对应的商品信息
-//   // indexs.value.productName = productName;为什么直接绑定？？？
-//   if (productName === "homilychart") {
-//     isHC.value = 1;
-//     addConsume.value.productName = "homilychart"; // 商品名
-//     addConsume.value.indexName = ""; // 指标名
-//   } else {
-//     isHC.value = 0;
-//     addConsume.value.productName = productName;
-//     addConsume.value.indexName = "";
-//   }
-// };
-const indexs = ref([]);
-// const handleIndexSelect = () => {
-//   if (isHC.value === 1 && addConsume.value.indexName) {
-//     addConsume.value.productName = "homilychart" + addConsume.value.indexName;
-//   }
-// };
+<template>
+  <div>
+    <!-- 这里放置标签切换的按钮 -->
+    <el-button-group>
+    <!-- 切换后状态显示 primary 样式否则是默认样式 -->
+      <el-button 
+        :type="activeTab === 'add' ? 'primary' : 'default'" 
+        @click="goToAdd"
+      >
+        新增消耗
+      </el-button>
+      <el-button 
+        :type="activeTab === 'detail' ? 'primary' : 'default'" 
+        @click="goToDetail"
+      >
+        金币消耗明细
+      </el-button>
+    </el-button-group>
+    <!-- 渲染子路由组件 -->
+    <router-view></router-view>
+  </div>
+</template>
 
-// 商品搜索逻辑
-const queryProductSearch = (queryString, cb) => {
-  const results = queryString
-    ? goods.value.filter(item =>
-      item.name.toLowerCase().includes(queryString.toLowerCase())
-    )
-    : goods.value;
-  cb(results);
-};
+<script setup>
+import { ref, watch } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
 
-// 指标搜索逻辑
-const queryIndexSearch = (queryString, cb) => {
-  const results = queryString
-    ? index.value.filter(item => // 将 indexData 替换为 index
-      item.name.toLowerCase().includes(queryString.toLowerCase())
-    )
-    : index.value;
-  cb(results);
-};
+const router = useRouter();// 获取路由实例
+const route = useRoute();// 获取当前路由信息
+// 定义响应式变量 activeTab 来跟踪当前激活的标签
+const activeTab = ref(route.name === 'coinConsumeDetail' ? 'detail' : 'add');
+//也就是说如果当前在coinConsumeDetail页面，那么就是detail，否则默认情况都展示add页面
+//此时获取到的路由信息是coinConsume，所以默认是add
 
-// 商品选择处理（重点修改）
-const handleProductSelect = async (selectedItem) => {
-  const productName = typeof selectedItem === 'string'
-    ? selectedItem
-    : selectedItem?.name || '';
 
-  if (productName === "homilychart") {
-    isHC.value = 1;
-    addConsume.value.productName = "homilychart";
-    addConsume.value.indexName = "";
-    // 动态获取指标数据
-    await getIndexs("homilychart");
-  } else {
-    isHC.value = 0;
-    addConsume.value.productName = productName;
-    addConsume.value.indexName = "";
-  }
+const goToAdd = () => {
+  // 点击按钮时更新 activeTab 为 add
+  activeTab.value = 'add';
+  router.push({ name: 'addCoinConsume' });
 };
 
-// 指标选择处理（重点修改）
-const handleIndexSelect = (selectedItem) => {
-  if (isHC.value === 1) {
-    const indexName = typeof selectedItem === 'string'
-      ? selectedItem
-      : selectedItem?.name || '';
-    // 仅更新指标名称字段
-    addConsume.value.indexName = indexName;
-  }
+const goToDetail = () => {
+  // 点击按钮时更新 activeTab 为 detail
+  activeTab.value = 'detail';
+  router.push({ name: 'coinConsumeDetail' });
 };
 
-// 处理自由输入指标
-const handleIndexBlur = (e) => {
-  if (isHC.value === 1 && e.target.value) {
-    // 仅更新指标名称字段
-    addConsume.value.indexName = e.target.value;
+// 监听路由变化，更新 activeTab
+watch(() => route.name, (newName) => {
+  if (newName === 'addCoinConsume') {
+    activeTab.value = 'add';
+  } else if (newName === 'coinConsumeDetail') {
+    activeTab.value = 'detail';
   }
-};
-
-
-// 挂载
-onMounted(async function () {
-  await getAdminData();
-  await getGoods();
-  await getIndexs(1);
 });
 
-const handleSelectBlur = (value) => {
-  // 这里可以根据需求添加额外逻辑，比如验证输入值是否有效
-  // 目前直接将输入值同步到 v-model 绑定的值上
-  if (value) {
-    // 若选择的是商品名称
-    if (addConsume.value.productName === value) {
-      addConsume.value.productName = value;
-    }
-    // 若选择的是指标名称
-    else if (indexs.value.name === value) {
-      indexs.value.name = value;
-    }
-  }
-};
-</script>
-
-<template>
-  <div style="margin-bottom: 20px; font-weight: bolder">新增消费</div>
-
-  <el-form :model="addConsume" ref="Ref" :rules="rules" label-width="auto" style="max-width: 750px;" class="form-style">
-    <el-form-item prop="jwcode" label="精网号">
-      <el-input v-model="addConsume.jwcode" style="width: 220px" @change="getUserGold(addConsume.jwcode)" />
-      <el-button type="primary" @click="getUser(addConsume.jwcode)" style="margin-left: 20px">查询</el-button>
-    </el-form-item>
-    <div style="display: flex; align-items: center; gap: 20px;">
-      <el-form-item prop="productName" label="商品名称" style="flex: 1; margin-right: 0px">
-        <el-autocomplete v-model="addConsume.productName" :fetch-suggestions="queryProductSearch" placeholder="请输入或选择商品"
-          style="width: 300px" @select="handleProductSelect" value-key="name" clearable :trigger-on-focus="true">
-          <template #default="{ item }">
-            <div>{{ item.name }}</div>
-          </template>
-        </el-autocomplete>
-      </el-form-item>
-      <!-- 指标选择 -->
-      <el-form-item prop="indexName" label="指标" v-if="isHC == 1" style="flex: 1;margin-left: -20px">
-        <el-autocomplete v-model="addConsume.indexName" :fetch-suggestions="queryIndexSearch" placeholder="请输入或选择指标"
-          style="width: 140px" @select="handleIndexSelect" @blur="handleIndexBlur" value-key="name"
-          :disabled="isHC !== 1" clearable free-solo allow-create>
-          <template #default="{ item }">
-            <div>{{ item.name }}</div>
-          </template>
-        </el-autocomplete>
-      </el-form-item>
-      <el-form-item label="指标" v-else style="flex:1;margin-left: -5px;">
-        <el-input disabled placeholder="无" style="width: 100px" />
-      </el-form-item>
-    </div>
-    <el-form-item prop="allGold" label="消费金币总数">
-      <el-input v-model="addConsume.allGold" style="width: 100px" @change="calculateCoins()" />
-    </el-form-item>
-    <div style="display: flex; align-items: center">
-      <el-form-item prop="rechargeCoin" label="永久金币" style="float: left">
-        <el-input disabled v-model="addConsume.rechargeCoin" style="width: 100px; margin-left: -5px" />
-        <p style="margin-right: 0px">个</p>
-      </el-form-item>
-      <el-form-item prop="freeCoin" label="免费金币" style="float: left; margin-left: -20px">
-        <el-input disabled v-model="addConsume.freeCoin" style="width: 100px; margin-left: -5px" />
-        <p style="margin-right: 0px">个</p>
-      </el-form-item>
-      <el-form-item prop="taskCoin" label="任务金币" style="margin-left: -20px">
-        <el-input disabled v-model="addConsume.taskCoin" style="width: 100px; margin-left: -5px" />
-        <p style="margin-right: 20px">个</p>
-      </el-form-item>
-    </div>
-    <el-form-item prop="remark" label="备注">
-      <el-input v-model="addConsume.remark" style="width: 300px" :rows="2" maxlength="100" show-word-limit type="textarea" />
-    </el-form-item>
-    <el-form-item prop="commitName" label="提交人">
-      <el-input style="width: 300px" :value="adminData.name" disabled placeholder="提交人姓名" />
-    </el-form-item>
-    <el-button type="success" @click="delteConsume" style="margin-left: 280px">重置</el-button>
-    <el-button type="primary" @click="addBefore"> 提交 </el-button>
-  </el-form>
-
-  <el-card style="width: 850px; float: right" class="customer-info">
-    <el-form :model="user" label-width="auto" style="max-width: 1200px" label-position="left">
-      <el-text size="large" style="margin-left: 20px">客户信息</el-text>
-      <el-row style="margin-top: 20px">
-        <el-col :span="10">
-          <el-form-item label="姓名:">
-            <p>{{ user.name }}</p>
-          </el-form-item>
-        </el-col>
-        <el-col :span="14">
-          <el-form-item label="历史金币总数">
-            <!-- 检查 user.totalRechargeGold 是否为有效的数字 -->
-            <p v-if="!isNaN(Number(user.totalRechargeGold))">
-              {{ Number(user.totalRechargeGold / 100) }}
-            </p>
-            <!-- 如果不是有效的数字，显示默认值 -->
-            <p v-else></p>
-          </el-form-item>
-        </el-col>
-        <el-col :span="10">
-          <el-form-item label="精网号">
-            <p>{{ user.jwcode }}</p>
-          </el-form-item>
-        </el-col>
-        <el-col :span="14">
-          <el-form-item label="当前金币总数" style="width: 500px">
-            <span style="color: #2fa1ff; margin-right: 5px" v-if="user.buyJb !== undefined">{{
-              (user.buyJb + user.free6 + user.free12 + user.coreJb) / 100
-            }}</span>
-            <span style="display: inline; white-space: nowrap; color: #b1b1b1" v-if="user.buyJb !== undefined">(永久金币:{{
-              user.buyJb / 100 }};免费金币:{{
-                (user.free6 + user.free12) / 100
-              }};任务金币:{{ user.coreJb / 100 }})</span>
-          </el-form-item>
-        </el-col>
-        <el-col :span="10">
-          <el-form-item label="首次充值日期">
-            <p v-if="user.firstRechargeDate">
-              {{ moment(user.firstRechargeDate).format("YYYY-MM-DD HH:mm:ss") }}
-            </p>
-          </el-form-item>
-        </el-col>
-        <el-col :span="14">
-          <el-form-item label="充值次数">
-            <p style="color: #2fa1ff">{{ user.rechargeTimes }}</p>
-          </el-form-item>
-        </el-col>
-        <el-col :span="10">
-          <el-form-item label="消费次数">
-            <p style="color: #2fa1ff">{{ user.spendTimes }}</p>
-          </el-form-item>
-        </el-col>
-        <el-col :span="10">
-          <el-form-item label="所属门店">
-            <p>{{ adminData.area }}</p>
-          </el-form-item>
-        </el-col>
-        <el-col :span="14">
-          <!-- <el-form-item label="待审核">
-            <p style="color: #2fa1ff">
-              {{ user.A }}
-            </p>
-          </el-form-item> -->
-        </el-col>
-      </el-row>
-    </el-form>
-  </el-card>
-</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);
+// 当进入父路由时，默认跳转到新增消耗页面
+if (route.name === 'coinConsume') {
+  router.push({ name: 'addCoinConsume' });
 }
-
-.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>
+</script>
diff --git a/src/views/consume/coinConsumeDetail.vue b/src/views/consume/coinConsumeDetail.vue
new file mode 100644
index 0000000..d4fcd42
--- /dev/null
+++ b/src/views/consume/coinConsumeDetail.vue
@@ -0,0 +1,629 @@
+<script setup>
+import { ref, onMounted, reactive, computed } from 'vue'
+import ElementPlus from 'element-plus'
+import { AiFillRead } from 'vue-icons-plus/ai'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import axios from 'axios'
+import request from '@/util/http'
+// 变量
+//这是获取用户信息的接口
+const adminData = ref({})
+const getAdminData = async function () {
+  try {
+    const result = await request({
+      url: '/admin/userinfo',
+      data: {}
+    })
+    adminData.value = result
+    console.log('请求成功', result)
+    console.log('用户信息', adminData.value)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+// 充值明细表格
+const tableData = ref([])
+// 搜索======================================
+// 搜索detailVo
+const detailVo = ref({})
+// 搜索对象
+const getObj = ref({
+  pageNum: 1,
+  pageSize: 50
+})
+//分页总条目
+const total = ref(100)
+// 搜索对象时间
+const getTime = ref([])
+// 搜索活动列表
+const activity = ref([])
+// 所有信息
+const allData = ref([])
+// 搜索地区列表
+const area = ref([])
+
+//标签页默认高亮选项
+const activeName = ref('all')
+
+// 消费平台选项
+const consumePlatform = [
+  {
+    value: '4',
+    label: '金币系统'
+  },
+
+  {
+    value: '1',
+    label: 'Homily Chart'
+  },
+  {
+    value: '2',
+    label: 'Homily Link'
+  },
+  {
+    value: '3',
+    label: 'ERP系统'
+  }
+]
+
+// //表格高度
+// const tableHeight = computed(function () {
+//   return (getObj.value.pageSize + 1) * 41 + "px";
+// });
+// 方法
+// 合计数的显示数据
+const tableDataTotal = ref({})
+const rechargeCoin = ref(0)
+const freeCoin = ref(0)
+const taskCoin = ref(0)
+const totalCoin = ref(0)
+// 搜索=========================================================================================================================================================
+// 搜索方法
+const get = async function (val) {
+  try {
+    // 地区赋值
+    if (adminData.value.area != '总部') {
+      detailVo.value.area = adminData.value.area
+    }
+    // 搜索参数页码赋值
+    if (typeof val === 'number') {
+      getObj.value.pageNum = val
+    }
+    // 搜索参数时间赋值
+    if (getTime.value != null) {
+      if (getTime.value.startDate != '' && getTime.value.endDate != '') {
+        detailVo.value.startDate = getTime.value[0]
+        detailVo.value.endDate = getTime.value[1]
+      }
+    } else {
+      detailVo.value.startDate = ''
+      detailVo.value.endDate = ''
+    }
+    detailVo.value.sortField = sortField.value
+    detailVo.value.sortOrder = sortOrder.value
+    console.log('搜索参数', getObj.value)
+    // 发送POST请求
+    const result = await request({
+      url: '/consume/select',
+      data: {
+        ...getObj.value,
+        consumeDetail: { ...detailVo.value }
+      }
+    })
+    // 合计数的接口
+    // 复制一份 detail.value 并移除排序字段和排序方式
+    const detailWithoutSort = { ...detailVo.value }
+    delete detailWithoutSort.sortField
+    delete detailWithoutSort.sortOrder
+    const result2 = await request({
+      url: '/consume/SumConsume',
+      data: {
+        ...detailWithoutSort
+      }
+    })
+
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    console.log('请求成功2', result2)
+    // 存储表格数据
+    tableData.value = result.data.list
+    tableDataTotal.value = result2.data
+    if (result2.data == null) {
+      console.log('请求成功2', result2)
+      tableDataTotal.value = {
+        sumRcion: 0,
+        sumFcion: 0,
+        sumTcion: 0,
+        sumcion: 0
+      }
+    }
+
+    console.log('tableDataT', tableDataTotal)
+
+    // 修改为保留两位小数
+    rechargeCoin.value = parseFloat(
+      (tableDataTotal.value.sumRcion / 100).toFixed(2)
+    )
+    freeCoin.value = parseFloat(
+      (tableDataTotal.value.sumFcion / 100).toFixed(2)
+    )
+    taskCoin.value = parseFloat(
+      (tableDataTotal.value.sumTcion / 100).toFixed(2)
+    )
+    totalCoin.value = parseFloat(
+      (tableDataTotal.value.sumcion / 100).toFixed(2)
+    )
+    console.log('tableData', tableData.value)
+    // 存储分页总数
+    total.value = result.data.total
+    console.log('total', total.value)
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// 搜索
+const search = function () {
+  getObj.value.pageNum = 1
+  get()
+}
+// 重置
+const reset = function () {
+  detailVo.value.productName = ''
+  detailVo.value.area = ''
+  detailVo.value.consumePlatform = ''
+  detailVo.value.consumeType = ''
+  detailVo.value.startDate = ''
+  detailVo.value.endDate = ''
+  sortField.value = ''
+  sortOrder.value = ''
+  getTime.value = {}
+}
+// 今天
+const getToday = function () {
+  const today = new Date()
+  const startDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate()
+  )
+  const endDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('getTime', getTime.value)
+  get()
+}
+// 昨天
+const getYesterday = function () {
+  const yesterday = new Date()
+  yesterday.setDate(yesterday.getDate() - 1)
+  const startDate = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate()
+  )
+  const endDate = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('getTime', getTime.value)
+  get()
+}
+// 近7天
+const get7Days = function () {
+  const today = new Date()
+  const startDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() - 6
+  )
+  const endDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('getTime', getTime.value)
+  get()
+}
+//点击标签页
+const handleClick = function (tab, event) {
+  if (tab.props.name === 'all') {
+    adminAll()
+  } else if (tab.props.name === 'wait') {
+    adminWait()
+  } else if (tab.props.name === 'pass') {
+    adminPass()
+  } else if (tab.props.name === 'reject') {
+    adminReject()
+  }
+}
+
+// 挂载
+onMounted(async function () {
+  await getAdminData()
+  await get()
+  // getActivity();
+  await getArea();
+})
+
+// 验证跳转输入框的数字是否合法
+const checkNumber = function () {
+  if (typeof parseInt(getObj.value.pageNum) === 'number') {
+    console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
+    if (
+      getObj.value.pageNum > 0 &&
+      getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
+    ) {
+      getObj.value.pageNum = parseInt(getObj.value.pageNum)
+      console.log('输入的数字合法')
+      get()
+    } else {
+      //提示
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      })
+    }
+  } else {
+    //提示
+    ElMessage({
+      type: 'error',
+      message: '请检查输入内容'
+    })
+  }
+}
+// 查询商品的接口
+const goods = ref([])
+const getGoods = async function () {
+  try {
+    // 发送POST请求
+    const result = await request({
+      url: '/product/findProductName',
+      data: {}
+    })
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功product', result)
+    // 存储全部数据
+    goods.value = result.data
+    console.log('goods 数据', goods.value) // 修改日志输出
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+getGoods()
+
+// 获取地区列表的方法，虚拟接口，替换为实际的地区列表接口地址
+const getArea = async function () {
+  try {
+    // 发送请求获取地区列表
+    const result = await request({
+      url: '/area/list', 
+      data: {}
+    })
+    console.log('请求地区列表成功', result)
+    // 存储地区数据
+    area.value = result.data
+    console.log('地区数据', area.value)
+  } catch (error) {
+    console.log('请求地区列表失败', error)
+    ElMessage({
+      type: 'error',
+      message: '获取地区列表失败，请稍后重试'
+    })
+  }
+}
+
+
+// 新增排序字段和排序方式
+const sortField = ref('')
+const sortOrder = ref('')
+// 处理排序事件
+const handleSortChange = (column) => {
+  console.log('排序字段：', column.prop)
+  console.log('排序方式：', column.order)
+  if (column.prop === 'rechargeCoin') {
+    sortField.value = 'recharge_coin'
+  } else if (column.prop === 'taskCoin') {
+    sortField.value = 'task_coin'
+  } else if (column.prop === 'freeCoin') {
+    sortField.value = 'free_coin'
+  } else if (column.prop === 'createTime') {
+    sortField.value = 'create_time'
+  }
+  sortOrder.value = column.order === 'ascending' ? 'DESC' : 'ASC'
+  get()
+}
+const handlePageSizeChange = function (val) {
+  getObj.value.pageSize = val
+  get()
+}
+const handleCurrentChange = function (val) {
+  getObj.value.pageNum = val
+  get()
+}
+</script>
+
+<template>
+  <el-row>
+    <el-col>
+      <el-card style="margin-bottom: 20px;margin-top:10px">
+        <el-row style="margin-bottom: 10px">
+          <el-col :span="6">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">商品名称：</el-text>
+              <el-select
+                v-model="detailVo.productName"
+                placeholder="请选择商品名称"
+                size="large"
+                style="width: 180px"
+                clearable
+              >
+                <!-- 修改 v-for 绑定逻辑 -->
+                <el-option
+                  v-for="(item, index) in goods"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">所属地区：</el-text>
+              <el-select
+                v-model="detailVo.area"
+                placeholder="请选择所属地区"
+                size="large"
+                style="width: 180px"
+                clearable
+              >
+                <el-option
+                  v-for="(item, index) in area"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">消耗平台：</el-text>
+              <el-select
+                v-model="detailVo.consumePlatform"
+                placeholder="请选择消耗平台"
+                size="large"
+                style="width: 180px"
+                clearable
+              >
+                <el-option
+                  v-for="item in consumePlatform"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </div>
+          </el-col>
+          <!-- <el-col :span="8">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">消费类型：</el-text>
+              <el-select
+                v-model="detailVo.consumeType"
+                placeholder="请选择消费类型"
+                size="large"
+                style="width: 240px"
+                clearable
+              >
+                <el-option
+                  v-for="item in consumeType"
+                  :key="item"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </div>
+          </el-col> -->
+        </el-row>
+        <el-row>
+          <el-col :span="21">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">消费时间：</el-text>
+              <el-date-picker
+                v-model="getTime"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="起始时间"
+                end-placeholder="结束时间"
+              />
+              <el-button style="margin-left: 10px" @click="getToday()"
+                >今</el-button
+              >
+              <el-button @click="getYesterday()">昨</el-button>
+              <el-button @click="get7Days()">近7天</el-button>
+            <!-- </div>
+          </el-col>
+          <el-col :span="3">
+            <div class="head-card-btn"> -->
+              <el-button type="success" @click="reset()">重置</el-button>
+              <el-button type="primary" @click="search()">查询</el-button>
+              <el-button type="primary" @click="exportExcel()">导出excel</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-col>
+  </el-row>
+  <el-row>
+    <el-col>
+      <el-card>
+        <div>
+          消费金币总数：{{ Math.abs(totalCoin) }}，永久金币：{{
+            Math.abs(rechargeCoin)
+          }}，免费金币：{{ Math.abs(freeCoin) }}，任务金币：{{
+            Math.abs(taskCoin)
+          }}
+        </div>
+        <!-- 设置表格容器的高度和滚动样式 -->
+        <div style="height: 576px; overflow-y: auto">
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+            height="576px"
+            @sort-change="handleSortChange"
+          >
+            <el-table-column
+              type="index"
+              label="序号"
+              width="100px"
+              fixed="left"
+            >
+              <template #default="scope">
+                <span>{{
+                  scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
+                }}</span>
+              </template>
+            </el-table-column>
+            <!-- 固定姓名列 -->
+            <el-table-column
+              prop="username"
+              label="姓名"
+              width="150px"
+              fixed="left"
+            />
+            <!-- 固定精网号列 -->
+            <el-table-column
+              prop="jwcode"
+              label="精网号"
+              width="110px"
+              fixed="left"
+            />
+            <el-table-column prop="area" label="所属地区" width="110px" />
+            <el-table-column prop="productName" label="商品" width="160px" />
+            <el-table-column
+              prop="consumePlatform"
+              label="消费平台"
+              width="120px"
+            >
+              <template #default="scope">
+                <!-- 使用非严格相等比较 -->
+                <span v-if="scope.row.consumePlatform == 1">Homily Chart</span>
+                <span v-if="scope.row.consumePlatform == 2">Homily Link</span>
+                <span v-if="scope.row.consumePlatform == 3">ERP系统</span>
+                <span v-if="scope.row.consumePlatform == 4">金币系统</span>
+              </template>
+            </el-table-column>
+            <!-- <el-table-column
+              prop="consumeType"
+              label="消费类型"
+              width="120px"
+            /> -->
+            <el-table-column
+              prop="rechargeTotal"
+              label="消费金币总数"
+              width="120px"
+            >
+              <template #default="scope">
+                {{
+                  (scope.row.taskCoin * -1 +
+                    scope.row.freeCoin * -1 +
+                    scope.row.rechargeCoin * -1) /
+                  100
+                }}
+              </template>
+            </el-table-column>
+
+            <el-table-column
+              prop="rechargeCoin"
+              label="永久金币"
+              sortable="“custom”"
+              width="110px"
+            >
+              <template #default="scope">
+                {{ (scope.row.rechargeCoin * -1) / 100 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="freeCoin"
+              label="免费金币"
+              sortable="“custom”"
+              width="110px"
+            >
+              <template #default="scope">
+                {{ (scope.row.freeCoin * -1) / 100 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="taskCoin"
+              label="任务金币"
+              sortable="“custom”"
+              width="110px"
+            >
+              <template #default="scope">
+                {{ (scope.row.taskCoin * -1) / 100 }}
+              </template>
+            </el-table-column>
+
+            <el-table-column
+              prop="remark"
+              label="备注"
+              width="200px"
+              show-overflow-tooltip
+            />
+            <el-table-column prop="name" label="提交人" width="110px" />
+            <el-table-column
+              prop="createTime"
+              label="消费时间"
+              sortable="“custom”"
+              width="180px"
+            />
+          </el-table>
+        </div>
+
+        <!-- 分页 -->
+        <div class="pagination">
+          <el-pagination
+            background
+            :page-size="getObj.pageSize"
+            :page-sizes="[5, 10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            @size-change="handlePageSizeChange"
+            @current-change="handleCurrentChange"
+          ></el-pagination>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<style scoped>
+.status {
+  display: flex;
+}
+
+.head-card {
+  display: flex;
+}
+
+.head-card-element {
+  margin-right: 20px;
+}
+
+.head-card-btn {
+  margin-left: auto;
+}
+
+.pagination {
+  display: flex;
+  margin-top: 20px;
+}
+</style>
diff --git a/src/views/index.vue b/src/views/index.vue
index 239a9e2..b85908f 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -7,7 +7,7 @@ import { VscGlobe } from 'vue-icons-plus/vsc'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import axios from 'axios'
 import API from '@/util/http'
-import dmmn from '../assets/avator.png'
+import dmmn from '../assets/blue.png'
 import { useRoute } from 'vue-router'
 
 const router = useRouter()
@@ -31,6 +31,8 @@ const getAdminData = async function () {
 }
 // 获取地区
 const areas = ref([])
+// 直接在组件内维护当前地区状态，不太懂，包老师写的
+const currentArea = ref('全部')
 
 const getAreas = async function () {
   try {
@@ -72,6 +74,10 @@ onMounted(async function () {
   // 获取地区
   getAreas()
 })
+// 处理地区点击事件，直接在组件内更新当前地区，包老师改的，直接传参
+const changeDataByArea = (item) => {
+  currentArea.value = item
+}
 //官网折叠
 const isCollapse = ref(false)
 const handleOpen = (key, keyPath) => {
@@ -225,6 +231,7 @@ const handleClose = (key, keyPath) => {
         </el-header>
         <!-- 修改 el-main 样式 -->
         <el-main style="margin-top: 60px">
+          <!-- 60px 是 el-header 的大致高度，可根据实际情况调整 -->
           <router-view></router-view>
         </el-main>
       </el-container>
diff --git a/src/views/login.vue b/src/views/login.vue
index 9279e18..f764989 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -27,6 +27,10 @@ getMachineId()
 
 const router = useRouter() // 获取路由实例
 let formData = new FormData()
+// 添加表单数据到FormData对象中
+// formData.append("jwcode", form.value.jwcode);
+// formData.append("password", form.value.password);
+
 const form = ref({ jwcode: '', password: '', token: '', machineId: machineId })
 //调用方法
 const login = async function () {
@@ -59,6 +63,7 @@ const login = async function () {
   } catch (error) {
     console.log('请求失败', error)
     ElMessage.error('登录失败，请检查账号密码')
+    // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
 
@@ -66,9 +71,17 @@ const login = async function () {
 </script>
 <template>
   <el-row class="login-page">
-    <img :span="12" src="../assets/background.jpg" alt="logo" class="bg" fit="fit" />
+    <img
+      :span="12"
+      src="../assets/background.jpg"
+      alt="logo"
+      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">
+      <!-- 登录表单 -->
+      <el-form :model="form" size="large" autocomplete="off" >
         <el-form-item>
           <h1 style="color: #409eff">金币系统登录</h1>
         </el-form-item>
@@ -76,19 +89,37 @@ const login = async function () {
           <el-input v-model="form.jwcode" placeholder="请输入精网号" @keyup.enter="login"></el-input>
         </el-form-item>
         <el-form-item prop="password" @keyup.enter="login">
-          <el-input v-model="form.password" type="password" placeholder="请输入密码" />
+          <el-input
+            v-model="form.password"
+            type="password"
+            placeholder="请输入密码"
+          />
         </el-form-item>
         <el-form-item class="flex"> </el-form-item>
         <!-- 登录按钮 -->
         <el-form-item>
           <button type="button" class="button" @click="login()">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="30" width="24">
-              <path fill="white"
-                d="M23.15 2.587L18.21 0.210001C17.9308 0.075557 17.6167 0.031246 17.3113 0.083204C17.0058 0.135162 16.724 0.280818 16.505 0.500001L7.04499 9.13L2.92499 6.002C2.73912 5.86101 2.50976 5.78953 2.27669 5.79994C2.04363 5.81035 1.82156 5.902 1.64899 6.059L0.326993 7.261C0.223973 7.35465 0.141644 7.46878 0.0852761 7.59608C0.0289081 7.72339 -0.00025659 7.86106 -0.000350724 8.00028C-0.000444857 8.1395 0.0285336 8.27721 0.0847294 8.40459C0.140925 8.53197 0.2231 8.64621 0.325993 8.74L3.89899 12L0.325993 15.26C0.2231 15.3538 0.140925 15.468 0.0847294 15.5954C0.0285336 15.7228 -0.000444857 15.8605 -0.000350724 15.9997C-0.00025659 16.1389 0.0289081 16.2766 0.0852761 16.4039C0.141644 16.5312 0.223973 16.6454 0.326993 16.739L1.64999 17.94C1.82256 18.097 2.04463 18.1887 2.27769 18.1991C2.51076 18.2095 2.74012 18.138 2.92599 17.997L7.04599 14.869L16.506 23.499C16.7248 23.7182 17.0064 23.8639 17.3117 23.9159C17.6171 23.9679 17.931 23.9235 18.21 23.789L23.152 21.412C23.4062 21.2893 23.6207 21.0973 23.7707 20.8581C23.9207 20.619 24.0002 20.3423 24 20.06V3.939C24 3.65647 23.9203 3.37967 23.7699 3.14048C23.6195 2.90129 23.4046 2.70943 23.15 2.587ZM18.004 17.448L10.826 12L18.004 6.552V17.448Z">
-              </path>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              height="30"
+              width="24"
+            >
+              <path
+                fill="white"
+                d="M23.15 2.587L18.21 0.210001C17.9308 0.075557 17.6167 0.031246 17.3113 0.083204C17.0058 0.135162 16.724 0.280818 16.505 0.500001L7.04499 9.13L2.92499 6.002C2.73912 5.86101 2.50976 5.78953 2.27669 5.79994C2.04363 5.81035 1.82156 5.902 1.64899 6.059L0.326993 7.261C0.223973 7.35465 0.141644 7.46878 0.0852761 7.59608C0.0289081 7.72339 -0.00025659 7.86106 -0.000350724 8.00028C-0.000444857 8.1395 0.0285336 8.27721 0.0847294 8.40459C0.140925 8.53197 0.2231 8.64621 0.325993 8.74L3.89899 12L0.325993 15.26C0.2231 15.3538 0.140925 15.468 0.0847294 15.5954C0.0285336 15.7228 -0.000444857 15.8605 -0.000350724 15.9997C-0.00025659 16.1389 0.0289081 16.2766 0.0852761 16.4039C0.141644 16.5312 0.223973 16.6454 0.326993 16.739L1.64999 17.94C1.82256 18.097 2.04463 18.1887 2.27769 18.1991C2.51076 18.2095 2.74012 18.138 2.92599 17.997L7.04599 14.869L16.506 23.499C16.7248 23.7182 17.0064 23.8639 17.3117 23.9159C17.6171 23.9679 17.931 23.9235 18.21 23.789L23.152 21.412C23.4062 21.2893 23.6207 21.0973 23.7707 20.8581C23.9207 20.619 24.0002 20.3423 24 20.06V3.939C24 3.65647 23.9203 3.37967 23.7699 3.14048C23.6195 2.90129 23.4046 2.70943 23.15 2.587ZM18.004 17.448L10.826 12L18.004 6.552V17.448Z"
+              ></path>
             </svg>
             <p class="text">登录</p>
           </button>
+          <!-- <el-button
+            class="button"
+            type="primary"
+            auto-insert-space
+            @click="login()"
+            >登录</el-button
+          > -->
         </el-form-item>
       </el-form>
     </el-col>
@@ -130,6 +161,7 @@ const login = async function () {
   }
 }
 
+/* From Uiverse.io by kamehame-ha */
 .button {
   height: 50px;
   display: flex;
@@ -169,6 +201,21 @@ 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%;
@@ -177,4 +224,20 @@ const login = async function () {
     linear-gradient(in oklch longer hue -2deg, #a00, #a00);
   background-size: 100% 2px, 100% 100%, 100% 100%;
 }
-</style>
\ No newline at end of file
+</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>
+-->
\ No newline at end of file
diff --git a/src/views/managerecharge/rate.vue b/src/views/managerecharge/rate.vue
index ef4e6ac..503fd6e 100644
--- a/src/views/managerecharge/rate.vue
+++ b/src/views/managerecharge/rate.vue
@@ -70,7 +70,7 @@ const getYesterday = () => {
   search()
 }
 
-// 近7天
+// 近 7 天
 const get7Days = () => {
   const today = new Date()
   const start = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6, 0, 0, 0)
@@ -156,7 +156,7 @@ const addRate = async function () {
     })
     if (result.code == 0) {
       ElMessage.error(result.msg)
-    } else {
+    }else{
       ElMessage({
         type: 'success',
         message: '新增汇率成功'
@@ -407,7 +407,7 @@ const rules = reactive({
 
 // 重置的按钮
 const handledelete = function () {
-  timeRange.value = {}
+  timeRange.value={}
   getObj.value.pageNum = 1
 }
 // 验证跳转输入框的数字是否合法
@@ -479,17 +479,26 @@ function handleInput(value) {
 </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-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">
@@ -498,8 +507,15 @@ function handleInput(value) {
               <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-button
+                class="button-item"
+                type="success"
+                @click="handledelete()"
+              >重置</el-button>
+              <el-button
+                type="primary"
+                @click="search"
+              >查询</el-button>
             </el-col>
           </el-row>
         </div>
@@ -510,13 +526,28 @@ function handleInput(value) {
   <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>
+          <el-button
+            style="color: #048efb; border: 1px solid #048efb"
+            @click="regeAdd = true"
+            >新增汇率</el-button
+          >
         </div>
         <!-- 表格 -->
         <div>
-          <el-table :data="tableData" v-if="(tableData.flag = 1)" :height="tableHeight" style="width: 100%">
-            <el-table-column type="index" label="序号" width="100px" fixed="left">
+          <el-table
+            :data="tableData"
+            v-if="(tableData.flag = 1)"
+            :height="tableHeight"
+            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
@@ -537,22 +568,62 @@ function handleInput(value) {
                 <span>{{ formatDate(scope.row.createTime) }}</span>
               </template>
             </el-table-column>
-
+            <el-table-column prop="adminName" label="提交人" :span="1" />
+            <el-table-column prop="status" label="状态">
+              <template #default="scope">
+                <span v-if="scope.row.status === 1">
+                  <div class="status">
+                    <span class="green-dot"></span>
+                    <span>使用中</span>
+                  </div>
+                </span>
+                <span v-if="scope.row.status === 0">
+                  <div class="status">
+                    <span class="red-dot"></span>
+                    <span>未开始</span>
+                  </div>
+                </span>
+                <span v-if="scope.row.status === 2">
+                  <div class="status">
+                    <span class="grey-dot"></span>
+                    <span>已过期</span>
+                  </div>
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="startTime" label="持续时间" :span="10">
+              <template #default="scope">
+                <span>{{ formatDateTwe(scope.row.startTime) }}</span>
+                <span>---</span>
+                <span>{{ formatDateTwe(scope.row.endTime) }}</span>
+              </template>
+            </el-table-column>
             <el-table-column label="操作" :span="3">
               <template #default="scope">
-                <el-button type="text" @click="
-                  () => {
-                    regeEdit = true
-                    getEditData(scope.row)
-                  }
-                ">编辑</el-button>
-                <el-popconfirm title="确定将此条活动删除吗？" @confirm="delConfirm">
+                <el-button
+                  type="text"
+                  @click="
+                    () => {
+                      regeEdit = true
+                      getEditData(scope.row)
+                    }
+                  "
+                  >编辑</el-button
+                >
+                <el-popconfirm
+                  title="确定将此条活动删除吗？"
+                  @confirm="delConfirm"
+                >
                   <template #reference>
                     <el-button type="primary" text> 删除 </el-button>
                   </template>
                   <template #actions="{ confirm, cancel }">
                     <el-button size="small" @click="cancel">取消</el-button>
-                    <el-button type="primary" size="small" @click="confirm(scope.row)">
+                    <el-button
+                      type="primary"
+                      size="small"
+                      @click="confirm(scope.row)"
+                    >
                       确定
                     </el-button>
                   </template>
@@ -563,26 +634,58 @@ function handleInput(value) {
         </div>
         <!-- 分页 -->
         <div class="pagination">
-          <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
-            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
-            @current-change="handleCurrentChange"></el-pagination>
+          <el-pagination
+            background
+            :page-size="getObj.pageSize"
+            :page-sizes="[5, 10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            @size-change="handlePageSizeChange"
+            @current-change="handleCurrentChange"
+          ></el-pagination>
         </div>
       </el-card>
     </el-col>
   </el-row>
 
   <!-- 这是添加弹窗 -->
-  <el-dialog v-model="regeAdd" title="新增汇率" width="500" :close-on-click-modal="false">
+  <el-dialog
+    v-model="regeAdd"
+    title="新增汇率"
+    width="500"
+    :close-on-click-modal="false"
+  >
     <template #footer>
-      <el-form ref="Ref" style="max-width: 600px" :model="rateAdd" :rules="rules" label-width="auto"
-        class="demo-ruleForm" :size="formSize" status-icon>
+      <el-form
+        ref="Ref"
+        style="max-width: 600px"
+        :model="rateAdd"
+        :rules="rules"
+        label-width="auto"
+        class="demo-ruleForm"
+        :size="formSize"
+        status-icon
+      >
         <el-form-item prop="currency" label="货币名称:">
-          <el-select v-model.number="rateAdd.currency" placeholder="请选择" style="width: 240px">
-            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+          <el-select
+            v-model.number="rateAdd.currency"
+            placeholder="请选择"
+            style="width: 240px"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
           </el-select>
         </el-form-item>
         <el-form-item prop="exchangeRate" label="汇率:">
-          <el-input v-model="rateAdd.exchangeRate" @update:modelValue="handleInput" style="width: 120px" />
+          <el-input
+            v-model="rateAdd.exchangeRate"
+            @update:modelValue="handleInput"
+            style="width: 120px"
+          />
           <p class="unit">:1</p>
           <p>
             (提示：当前规则每 {{ rateAdd.exchangeRate }}
@@ -593,12 +696,23 @@ function handleInput(value) {
           <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-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-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">
@@ -611,13 +725,35 @@ function handleInput(value) {
   </el-dialog>
 
   <!-- 这是编辑弹窗 -->
-  <el-dialog v-model="regeEdit" title="修改汇率" width="500" :close-on-click-modal="false">
+  <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
+        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
+            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="汇率:">
@@ -632,12 +768,22 @@ function handleInput(value) {
           <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-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-date-picker
+            v-model="rateEdit.endTime"
+            type="date"
+            placeholder="请选择时间"
+            :default-value="new Date()"
+            value-format="YYYY-MM-DD"
+          />
         </el-form-item>
         <el-form-item>
           <div class="dialog-footer">
@@ -694,11 +840,9 @@ p {
 .el-card {
   padding: 0px;
 }
-
 .pagination {
   display: flex;
 }
-
 .status {
   display: flex;
 }
diff --git a/src/views/recharge/coinRecharge.vue b/src/views/recharge/coinRecharge.vue
index cb6fe31..358f45c 100644
--- a/src/views/recharge/coinRecharge.vue
+++ b/src/views/recharge/coinRecharge.vue
@@ -1,14 +1,18 @@
 <script setup>
 import { ref, onMounted, reactive, computed, watch, nextTick } from 'vue'
-import { ElMessage } from 'element-plus'
+import ElementPlus from 'element-plus'
+import { ElMessage,ElMessageBox } from 'element-plus'
+import { AiFillRead } from 'vue-icons-plus/ai'
 import { Plus } from '@element-plus/icons-vue'
 import axios from 'axios'
-import { ElMessageBox } from 'element-plus'
 import API from '@/util/http'
+import request from '@/util/http'
 import moment from 'moment'
 import { range, re } from 'mathjs'
 import { utils, read } from 'xlsx'
 import throttle from 'lodash/throttle'
+
+//新增充值------------------------------------------------------------------------------
 // 精网号去空格
 const trimJwCode = () => {
   if (addRecharge.value.jwcode) {
@@ -29,11 +33,13 @@ const beforeAvatarUpload = (file) => {
   }
   return (isJPG || isPNG) && isLt2M
 }
-// 这是添加上传图片的接口
-const imageUrl = ref('')
-const rechargeVoucher = ref('')
-const Rate = ref()
-const adminData = ref({})
+
+const imageUrl = ref('')//上传图片的url
+const rechargeVoucher = ref('')//充值凭证
+const Rate = ref()//汇率
+
+//请求管理员的接口，充值明细也需要获取到
+const adminData = ref({})//管理员信息
 const getAdminData = async function () {
   try {
     const result = await API({
@@ -43,8 +49,8 @@ const getAdminData = async function () {
     adminData.value = result
     addRecharge.value.adminId = adminData.value.adminId
     addRecharge.value.area = adminData.value.area
-    console.log('请求成功', result)
-    console.log('用户信息', user.value)
+    console.log('管理员信息请求成功', result)
+    // console.log('用户信息', user.value),user.value打印的没有什么意义
   } catch (error) {
     console.log('请求失败', error)
   }
@@ -74,7 +80,7 @@ const add = async function () {
       return
     }
     // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
+    console.log('/recharge/recharge/add请求成功', result)
     // 显示成功消息
     ElMessage.success('添加成功')
     // 重置表单
@@ -228,7 +234,7 @@ const getActivity = async function () {
     })
 
     // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
+    console.log('请求成功activity', result)
     // 存储表格数据
     activity.value = result.data
     console.log('活动信息', activity.value)
@@ -252,7 +258,7 @@ const getCurrency = async function () {
     console.log('货币请求成功', result)
     // 存储表格数据
     currency.value = result.data
-    console.log('tableData', currency.value)
+    console.log('currency', currency.value)
     // 在这里可以根据需求进一步处理成功后的逻辑，比如更新UI显示成功消息等
   } catch (error) {
     console.log('请求失败', error)
@@ -350,7 +356,7 @@ const getJwcodeList = async function () {
     jwcodeSet = new Set(jwcodeList.value)
     console.log('精网号set', jwcodeSet)
   } catch (error) {
-    console.log('请求失败', error)
+    console.log('请求失败jwcodelist', error)
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
@@ -376,7 +382,6 @@ const validateInput = function (row, index) {
 // 批量充值弹窗
 const batchRechargeVisible = ref(false)
 const i = ref(1)
-const delObj = ref({})
 const batchDelObj = ref([])
 const resetObj = ref({})
 // 批量充值表格数据
@@ -853,20 +858,360 @@ const batchSettingConfirm = function () {
   closeBatchSettingVisible()
 }
 
+//充值明细表单-------------------------------------------------------------------------------
+//获取管理员用户信息的接口*
+//变量
+//充值明细表格
+const tableData = ref([])
+//搜索=========================================
+//搜索recharge
+const rechargeVo = ref({
+  adminId: adminData.value.adminId
+})
+//搜索对象
+const getObj = ref({
+  pageNum: 1,
+  pageSize: 50
+})
+//分页总条目
+const total = ref(100)
+// 搜索对象时间
+const getTime = ref([])
+// 搜索活动列表*
+// 所有信息
+const allData = ref([])
+// 搜索地区列表
+const area = ref([])
+//标签页默认高亮选项
+const activeName = ref('all')
+//充值方式选项
+const rechargeWay = [
+  {
+    value: '客户储值',
+    label: '客户储值'
+  },
+  {
+    value: '平台充值',
+    label: '平台充值'
+  }
+]
+// 支付方式选项
+const payWay = [
+  {
+    value: '现金',
+    label: '现金'
+  },
+  {
+    value: '支票',
+    label: '支票'
+  },
+  {
+    value: '刷卡',
+    label: '刷卡'
+  },
+  {
+    value: '其他(各地区电子支付)',
+    label: '其他(各地区电子支付)'
+  }
+]
+// 删除==========================================================
+// 删除对象
+const delObj = ref({})
+
+// 方法
+// 合计数存储
+const trueGold = ref(0)
+const trueRGold = ref(0)
+const trueFGold = ref(0)
+
+// 搜索===========================================================================
+// 搜索方法
+const get = async function (val) {
+  try {
+    // 地区赋值
+    if (adminData.value.area === '泰国') {
+      rechargeVo.value.areas = ['泰国', '越南']
+    } else if (adminData.value.area !== '总部') {
+      rechargeVo.value.area = adminData.value.area
+    }
+
+    // 搜索参数页码赋值
+    if (typeof val === 'number') {
+      getObj.value.pageNum = val
+    }
+    // 搜索参数时间赋值
+    if (getTime.value != null) {
+      if (getTime.value.startDate != '' && getTime.value.endDate != '') {
+        rechargeVo.value.startDate = getTime.value[0]
+        rechargeVo.value.endDate = getTime.value[1]
+      }
+    } else {
+      rechargeVo.value.startDate = ''
+      rechargeVo.value.endDate = ''
+    }
+    // 搜索参数赋值
+    rechargeVo.value.sortField = sortField.value
+    rechargeVo.value.sortOrder = sortOrder.value
+    console.log('搜索参数', getObj.value)
+    // 发送POST请求
+    const result = await API({
+      url: '/recharge/recharge',
+      data: { ...getObj.value, rechargeVo: { ...rechargeVo.value } }
+    })
+
+    console.log('请求成功get',result)
+    // 计算充值金额、永久金币、免费金币总和
+    trueGold.value = 0
+    trueRGold.value = 0
+    trueFGold.value = 0
+    if (result.data && result.data.list) {
+      result.data.list.forEach((item) => {
+        trueGold.value += item.paidGold || 0
+        trueRGold.value += item.paidGold || 0
+        trueFGold.value += item.freeGold || 0
+      })
+    }
+
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 存储表格数据
+    tableData.value = result.data.list
+    console.log('tableData', tableData.value)
+    // 存储分页总数
+    total.value = result.data.total
+    console.log('total', total.value)
+  } catch (error) {
+    console.log('请求失败get', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// 搜索
+const search = function () {
+  getObj.value.pageNum = 1
+  get()
+}
+// 重置
+const reset = function () {
+  delete rechargeVo.value.jwcode
+  delete rechargeVo.value.activityId
+  delete rechargeVo.value.rechargeWay
+  delete rechargeVo.value.area
+  delete rechargeVo.value.startDate
+  delete rechargeVo.value.endDate
+  delete sortField.value
+  delete sortOrder.value
+  getTime.value = []
+}
+
+// 新增排序字段和排序方式
+const sortField = ref('')
+const sortOrder = ref('')
+// 处理排序事件
+const handleSortChange = (column) => {
+  get()
+  console.log('排序字段：', column.prop)
+  console.log('排序方式：', column.order)
+  if (column.prop === 'paidGold') {
+    sortField.value = 'recharge_gold'
+  } else if (column.prop === 'freeGold') {
+    sortField.value = 'free_gold'
+  } else if (column.prop === 'rechargeTime') {
+    sortField.value = 'recharge_time'
+  } else if (column.prop === 'createTime') {
+    sortField.value = 'create_time'
+  } 
+  sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC'
+  console.log('传递给后端的排序字段：', sortField.value)
+  console.log('传递给后端的排序方式：', sortOrder.value)
+  get()
+}
+
+// 今天
+const getToday = function () {
+  const today = new Date()
+  const startDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate()
+  )
+  const endDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('getTime', getTime.value)
+  get()
+}
+const handlePageSizeChange = function (val) {
+  getObj.value.pageSize = val
+  get()
+}
+const handleCurrentChange = function (val) {
+  getObj.value.pageNum = val
+  get()
+}
+// 昨天
+const getYesterday = function () {
+  const yesterday = new Date()
+  yesterday.setDate(yesterday.getDate() - 1)
+  const startDate = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate()
+  )
+  const endDate = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('getTime', getTime.value)
+  get()
+}
+// 近7天
+const get7Days = function () {
+  const today = new Date()
+  const startDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() - 6
+  )
+  const endDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('getTime', getTime.value)
+  get()
+}
+//获取活动名称*
+
+//获取地区
+const getArea = async function () {
+  try {
+    const result = await request({
+      url: '/recharge/user/search',
+      data: {}
+    })
+    //将响应结果存储到响应式数据中
+    console.log('area请求成功',result)
+      //存储地区信息
+      area.value = result.data
+      console.log('area',area.value)
+    } catch (error) {
+      console.log('area请求失败',error)
+      ElMessage.error('获取地区数据失败')
+    }
+}
+
+// 删除=================================
+// 点击删除按钮
+const del = function (row) {
+  delObj.value.rechargeId = row.rechargeId
+  console.log('delObj1', delObj.value)
+}
+// 确认删除按钮
+const delConfirm = async function () {
+  try {
+    console.log('delObj2', delObj.value)
+    const result = await API({
+      url: '/recharge/recharge/edit',
+      data: delObj.value
+    })
+    console.log('删除成功', result)
+    // 刷新表格数据
+    get()
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+// 验证跳转输入框的数字是否合法
+const checkNumber = function () {
+  if (typeof !isNaN(parseInt(getObj.value.pageNum)) === 'number') {
+    console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
+    if (
+      getObj.value.pageNum > 0 &&
+      getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
+    ) {
+      getObj.value.pageNum = parseInt(getObj.value.pageNum)
+      console.log('输入的数字合法')
+      get()
+    } else {
+      //提示
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      })
+    }
+  } else {
+    //提示
+    ElMessage({
+      type: 'error',
+      message: '输入内容非数字'
+    })
+  }
+}
+
+
+
+
+
+//新增充值和充值明细-------------------------------------------------------------------------
+
+// 用于控制显示内容的变量
+const activeTab = ref('addRecharge')
+
+// 切换标签页的方法
+const changeTab = async (tabName) => {
+  activeTab.value = tabName
+  if(tabName === 'detail'){
+    //切换至明细标签时调用get方法
+    await get()
+  }
+}
+
 // 挂载
 onMounted(async function () {
   await getAdminData()
   await getCurrency()
   await getActivity()
+  await getArea()
   await getJwcodeList()
+  //调用get方法获取明细数据
+  //await get()
 })
 </script>
 
 <template>
-  <div style="display: flex">
+
+  <div>
+  <el-button-group>
+    <!-- 切换后状态显示样式否则是默认样式 -->
+      <el-button 
+        :type="activeTab === 'addRecharge' ? 'primary' : 'default'" 
+        @click="changeTab('addRecharge')"
+      >
+        新增充值
+      </el-button>
+      <el-button 
+        :type="activeTab === 'detail' ? 'primary' : 'default'" 
+        @click="changeTab('detail')"
+      >
+        金币充值明细
+      </el-button>
+    </el-button-group>
+
+
+      <!-- 根据activeTab切换显示内容 -->
+   <!-- 新增充值的布局------------------------------------------------------------------- -->
+    <div v-if="activeTab === 'addRecharge'">
+  <!-- <div style="display: flex">
     <div style="margin-right: 20px">新增充值</div>
-    <!-- <el-button type="primary" plain @click="batchInit()">批量充值</el-button> -->
-  </div>
+  </div> -->
 
   <el-form
     :model="addRecharge"
@@ -956,7 +1301,7 @@ onMounted(async function () {
       style="margin-bottom: 5px"
     >
       <el-upload
-        action="http://54.251.137.151:10704/upload"
+        action="http://39.101.133.168:8828/hljw/api/aws/upload"
         class="avatar-uploader"
         :show-file-list="false"
         :on-success="handleAvatarSuccess"
@@ -978,7 +1323,7 @@ onMounted(async function () {
         </el-icon>
       </el-upload>
       <p style="margin-left: 10px; color: rgb(177, 176, 176)">
-        仅支持.jpg .png格式，文件≤1MB
+        仅支持.jpg .png格式，文件≤2MB
       </p>
     </el-form-item>
     <el-form-item prop="remark" label="备注">
@@ -1007,7 +1352,7 @@ onMounted(async function () {
 
   <!-- 客户信息栏 -->
   <el-card
-    style="width: 1200px; float: right"
+    style="width: 1200px; float: right;margin-bottom:20px;margin-top: 10px;"
     class="customer-info"
     width="3000px"
   >
@@ -1288,7 +1633,7 @@ onMounted(async function () {
         <el-table-column property="rechargeVoucher" label="充值凭证">
           <template #default="scope">
             <el-upload
-              action="http://54.251.137.151:10704/upload"
+              action="http://39.101.133.168:8828/hljw/api/aws/upload"
               class="avatar-uploader"
               :show-file-list="false"
               :on-success="handleBatchAvatarSuccess"
@@ -1453,7 +1798,7 @@ onMounted(async function () {
       </el-form-item>
       <el-form-item prop="rechargeVoucher" label="交款凭证">
         <el-upload
-          action="http://54.251.137.151:10704/upload"
+          action="http://39.101.133.168:8828/hljw/api/aws/upload"
           class="avatar-uploader"
           :show-file-list="false"
           :on-success="batchSettingHandleAvatarSuccess"
@@ -1488,6 +1833,319 @@ onMounted(async function () {
     >
     <el-button type="primary" @click="batchSettingConfirm()"> 确认 </el-button>
   </el-dialog>
+</div>
+<!-- 金币充值明细的布局---------------------------------------------------------- -->
+  <div v-else-if="activeTab === 'detail'">
+    <el-row>
+    <el-col>
+      <el-card style="margin-bottom: 20px;margin-top: 10px">
+        <el-row style="margin-bottom: 10px">
+          <el-col :span="5">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">精网号：</el-text>
+              <el-input v-model="rechargeVo.jwcode" placeholder="请输入精网号" style="width: 150px" clearable />
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">活动名称：</el-text>
+              <el-select v-model="rechargeVo.activityId" placeholder="请选择活动名称"  style="width: 180px" 
+                clearable>
+                <el-option v-for="item in activity" :key="item.activityId" :label="item.activityName"
+                  :value="item.activityId" />
+              </el-select>
+            </div>
+          </el-col>
+
+          <el-col :span="6">
+            <div class="head-card-element" v-if="adminData.area == '总部'">
+              <el-text class="mx-1" size="large">所属地区：</el-text>
+              <el-select v-model="rechargeVo.area" placeholder="请选择所属地区" style="width: 180px" clearable>
+                <el-option v-for="item in area" :key="item" :label="item" :value="item" />
+              </el-select>
+            </div>
+          </el-col>
+          
+          <el-col :span="6">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">充值类型：</el-text>
+              <el-select v-model="rechargeVo.rechargeWay" placeholder="请选择支付方式" style="width: 180px" clearable>
+                <el-option v-for="item in rechargeWay" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+          </el-col>
+          
+        </el-row>
+        <el-row>
+          <el-col :span="21">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">充值时间：</el-text>
+              <el-date-picker
+                v-model="getTime"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="起始时间"
+                end-placeholder="结束时间"
+              />
+              <el-button style="margin-left: 10px" @click="getToday()"
+                >今</el-button
+              >
+              <el-button @click="getYesterday()">昨</el-button>
+              <el-button @click="get7Days()">近7天</el-button>
+            <!-- </div>
+          </el-col>
+          <el-col :span="3">
+            <div class="head-card-btn"> -->
+              <el-button type="success" @click="reset()">重置</el-button>
+              <el-button type="primary" @click="search()">查询</el-button>
+              <el-button type="primary" @click="exportExcel()">导出Excel</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-col>
+  </el-row>
+  <el-row>
+    <el-col>
+      <el-card>
+        <div>
+          充值金额：{{ trueRGold.toFixed(2) }}新币，永久金币：{{
+            trueRGold.toFixed(2)
+          }}金币，免费金币：{{ trueFGold }}金币
+        </div>
+        <!-- 设置表格容器的高度和滚动样式 -->
+        <div style="height: 520px; overflow-y: auto;margin-top: 10px;">
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+            height="520px"
+            @sort-change="handleSortChange"
+          >
+            <el-table-column
+              type="index"
+              label="序号"
+              width="80px"
+              fixed="left"
+            >
+              <template #default="scope">
+                <span>{{
+                  scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              fixed="left"
+              prop="username"
+              label="姓名"
+              width="80px"
+            />
+            <el-table-column
+              fixed="left"
+              prop="jwcode"
+              label="精网号"
+              width="80px"
+            />
+            <el-table-column prop="area" label="所属地区" width="100px" />
+            <el-table-column
+              prop="activityName"
+              label="活动名称"
+              width="100px"
+            />
+            <el-table-column prop="" label="货币名称" width="110px" />
+            <el-table-column
+              prop="paidGold"
+              sortable="custom"
+              label="充值金额"
+              width="110px"
+            />
+            <el-table-column
+              prop="paidGold"
+              label="永久金币"
+              sortable="custom"
+              width="110px"
+            />
+            <el-table-column
+              prop="freeGold"
+              label="免费金币"
+              sortable="custom"
+              width="110px"
+            />
+            <el-table-column
+              prop="rechargeWay"
+              label="充值方式"
+              width="100px"
+            />
+            <el-table-column prop="payWay" label="支付方式" width="100px" />
+            <el-table-column
+              prop="remark"
+              label="备注"
+              width="150px"
+              show-overflow-tooltip
+            />
+            
+            <!-- <el-table-column
+              prop="rechargeVoucher"
+              label="支付凭证"
+              width="150px"
+            >
+              <template #default="scope">
+                <el-image
+                  :preview-src-list="[scope.row.rechargeVoucher]"
+                  preview-teleported="true"
+                  :src="scope.row.rechargeVoucher"
+                  alt="凭证"
+                  style="width: 50px; height: 50px"
+                />
+              </template>
+            </el-table-column> -->
+            <el-table-column prop="name" label="提交人" width="100px" />
+            <!-- <el-table-column prop="status" label="状态" width="100px">
+              <template #default="scope">
+                <span v-if="scope.row.status === 1">
+                  <div class="status">
+                    <span class="green-dot"></span>
+                    <span>已通过</span>
+                  </div>
+                </span>
+                <span v-if="scope.row.status === 0">
+                  <div class="status">
+                    <span class="grey-dot"></span>
+                    <span>待审核</span>
+                  </div>
+                </span>
+                <span v-if="scope.row.status === 2">
+                  <div class="status">
+                    <span class="red-dot"></span>
+                    <span>已驳回</span>
+                  </div>
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="reson"
+              label="驳回理由"
+              width="200px"
+              show-overflow-tooltip
+            /> -->
+            <el-table-column
+              prop="rechargeTime"
+              sortable
+              label="充值时间"
+              width="200px"
+            >
+              <template #default="scope">
+                {{
+                  moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss')
+                }}
+              </template>
+            </el-table-column>
+            <!-- <el-table-column
+              prop="createTime"
+              sortable="custom"
+              label="提交时间"
+              width="200px"
+            />
+            <el-table-column
+              fixed="right"
+              prop="operation"
+              label="操作"
+              width="150px"
+            >
+              <template #default="scope">
+                <el-popconfirm
+                  title="确定将此条活动删除吗？"
+                  @confirm="delConfirm"
+                >
+                  <template #reference>
+                    <el-button type="primary" text @click="del(scope.row)">
+                      删除
+                    </el-button>
+                  </template>
+                  <template #actions="{ confirm, cancel }">
+                    <el-button size="small" @click="cancel">取消</el-button>
+                    <el-button type="primary" size="small" @click="confirm">
+                      确定
+                    </el-button>
+                  </template>
+                </el-popconfirm>
+              </template>
+            </el-table-column> -->
+          </el-table>
+        </div>
+
+        <!-- 分页 -->
+        <div class="pagination" style="margin-top: 20px">
+          <el-pagination
+            background
+            :page-size="getObj.pageSize"
+            :page-sizes="[5, 10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            @size-change="handlePageSizeChange"
+            @current-change="handleCurrentChange"
+          ></el-pagination>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+
+  <!-- 编辑弹窗 -->
+  <el-dialog
+    v-model="editRechargeVisible"
+    title="新增活动"
+    width="500"
+    :before-close="closeEditRechargeVisible"
+  >
+    <template #footer>
+      <el-form :model="editObj" label-width="auto" style="max-width: 600px">
+        <el-form-item label="活动名称:">
+          <el-input
+            v-model="addObj.activityName"
+            placeholder="请输入活动名称"
+            style="width: 220px"
+          />
+        </el-form-item>
+
+        <el-form-item label="免费金币:">
+          <el-radio-group v-model="addObj.freeGold">
+            <el-radio value="0">无赠送</el-radio>
+            <el-radio value="1">有赠送</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="免费金币兑换比:">
+          <el-input
+            v-model="addObj.rechargeRatio"
+            placeholder="请输入"
+            style="width: 80px"
+          />：1
+          <div style="color: grey">(提示：当前规则每10新币可兑换1免费金币)</div>
+        </el-form-item>
+
+        <el-form-item label="开始时间:">
+          <el-time-picker v-model="addObj.startTime" />
+        </el-form-item>
+
+        <el-form-item label="结束时间:">
+          <el-time-picker v-model="addObj.endTime" />
+        </el-form-item>
+
+        <el-form-item label="添加人:">
+          <el-input v-model="addObj.adminName" disabled style="width: 220px" />
+        </el-form-item>
+      </el-form>
+
+      <div class="dialog-footer">
+        <el-button @click="closeAddActivityVisible">取消</el-button>
+        <el-button type="primary" @click="closeAddActivityVisible">
+          提交
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  </div>
+</div>
 </template>
 
 <style scoped>
diff --git a/src/views/refund/beanRefund.vue b/src/views/refund/beanRefund.vue
index a734a4c..36ab960 100644
--- a/src/views/refund/beanRefund.vue
+++ b/src/views/refund/beanRefund.vue
@@ -6,7 +6,7 @@ import { AiFillRead } from 'vue-icons-plus/ai'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import axios from 'axios'
 import moment from 'moment'
-
+import API from '@/util/http'
 // 变量
 //这是获取用户信息的接口
 const adminData = ref({})
diff --git a/src/views/refund/coinRefund.vue b/src/views/refund/coinRefund.vue
index 5fe44f8..e29bd2a 100644
--- a/src/views/refund/coinRefund.vue
+++ b/src/views/refund/coinRefund.vue
@@ -1,28 +1,31 @@
 <script setup>
 import { onMounted, reactive } from 'vue'
 import { ref, computed, watch } from 'vue'
-import { ElMessage } from 'element-plus'
+import { AiFillRead } from 'vue-icons-plus/ai'
+import { ElMessage,ElRadioGroup, ElRadio, } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import axios from 'axios'
 import { ElMessageBox } from 'element-plus'
-
+import API from '@/util/http'
 import moment from 'moment'
 // import _ from 'lodash'
 
+//新增退款相关逻辑---------------------------------------------------------------------------
 const addRe = ref({
   typeR: '0'
 })
-//这是获取用户信息的接口
+//这是获取用户信息的接口，金币退款明细也会用到
 const adminData = ref({})
 const getAdminData = async function () {
   try {
     const result = await API({ url: '/admin/userinfo', data: {} })
     adminData.value = result
     addRefund.value.adminId = adminData.value.adminId
-    console.log('请求成功', result)
-    console.log('用户信息', user.value)
+    console.log('用户信息请求成功', user.value)
+    console.log('adminData信息', adminData.value)
   } catch (error) {
-    console.log('请求失败', error)
+    console.log('用户信息请求失败', error)
+
   }
 }
 // 精网号去空格
@@ -61,7 +64,7 @@ const add = async function () {
       ElMessage.error(result.msg)
       return
     }
-    console.log('请求成功', result)
+    console.log('add请求成功', result)
     ElMessage.success('添加成功')
     // 重置表单
     addRefund.value = {}
@@ -76,7 +79,7 @@ const add = async function () {
     addRefund.value.typeR = 0
     user.value = {}
   } catch (error) {
-    console.log('请求失败', error)
+    console.log('添加退款请求失败', error)
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
@@ -190,9 +193,8 @@ const getUser = async function (jwcode) {
       //ElMessage.success(result.msg)
     }
   } catch (error) {
-    console.log('请求失败', error)
+    console.log('用户信息请求失败', error)
     ElMessage.error('查询失败，请检查精网号是否正确')
-    // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
 const calculatedAllGold = computed(() => {
@@ -222,7 +224,7 @@ const refundType = [
 ]
 
 // 根据精网号查询商品
-// 查什么？？？？？
+// 查询对应精网号购买过的商品
 const goods = ref([])
 const getGoods = async function (jwcode) {
   trimJwCode();
@@ -235,7 +237,7 @@ const getGoods = async function (jwcode) {
         area: adminData.value.area
       }
     })
-    console.log('请求成功', result)
+    console.log('goods请求成功', result)
 
     if (result.code === 0) {
       ElMessage.error(result.msg)
@@ -246,8 +248,8 @@ const getGoods = async function (jwcode) {
       ElMessage.success(result.msg)
     }
   } catch (error) {
-    console.log('请求失败', error)
-    ElMessage.error('查询失败，请检查精网号是否正确')
+    console.log('商品goods请求失败', error)
+    ElMessage.error('商品查询失败')
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
@@ -287,14 +289,14 @@ const getProductByOrderCode = async function (item) {
         result.data.freeCoin * -1 +
         result.data.rechargeCoin * -1) /
       100
-    console.log('请求成功', addRefund.value)
+    console.log('addRefund请求成功', addRefund.value)
     if (result.data.code === 0) {
       ElMessage.error(result.data.msg)
     } else {
       ElMessage.success('选择成功')
     }
   } catch (error) {
-    console.log('请求失败', error)
+    console.log('精网号查询请求失败', error)
     ElMessage.error('查询失败，请检查精网号是否正确')
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
@@ -304,14 +306,456 @@ const handleSelectionChange = (value) => {
   console.log('选择的订单号', value)
   const selectedItem = goods.value.find((item) => item.detailId === value)
 }
+
+
+// 金币退款明细相关逻辑----------------------------------------------------------------------
+//充值明细表格
+const tableData = ref([])
+//搜索==================================
+//搜索detail
+const detail = ref([])
+// 搜索对象
+const getObj = ref({
+  pageNum: 1,
+  pageSize: 50
+})
+//分页总条目
+const total = ref(100)
+// 搜索对象时间
+const getTime = ref([])
+// 所有信息
+const allData = ref([])
+// 搜索地区列表
+const area = ref([])
+
+//标签页默认高亮选项
+const activeName = ref('all')
+
+//退款类型
+const consumeType = [
+  {
+    value:"退款商品",
+    label:"退款商品"
+  }
+]
+// 方法
+// 统计合计数
+const trueGold = ref(0)
+const truePgold = ref(0)
+const trueFgold = ref(0)
+const trueTgold = ref(0)
+// 待审核各种类金币数
+const pendingPgold = ref(0)
+const pendingFgold = ref(0)
+const pendingTgold = ref(0)
+// 待审核金币数
+const pendingGold = ref(0)
+// 已通过各种类金币数
+const approvedPgold = ref(0)
+const approvedFgold = ref(0)
+const approvedTgold = ref(0)
+// 已通过金币数
+const approvedGold = ref(0)
+// 已驳回各种类金币数
+const rejectedPgold = ref(0)
+const rejectedFgold = ref(0)
+const rejectedTgold = ref(0)
+// 已驳回金币数
+const rejectedGold = ref(0)
+// 搜索==============================================================
+// 搜索方法
+const get = async function (val) {
+  try {
+    // 地区赋值
+    if (adminData.value.area === '泰国') {
+      detail.value.areas = ['泰国', '越南']
+    } else if (adminData.value.area !== '总部') {
+      detail.value.area = adminData.value.area
+    }
+    // 搜索参数页码赋值
+    if (typeof val === 'number') {
+      getObj.value.pageNum = val
+    }
+    // 搜索参数时间赋值
+    if (getTime.value != null) {
+      if (getTime.value.startDate != '' && getTime.value.endDate != '') {
+        detail.value.startDate = getTime.value[0]
+        detail.value.endDate = getTime.value[1]
+      }
+    } else {
+      detail.value.startDate = ''
+      detail.value.endDate = ''
+    }
+    // 添加排序字段和排序方式到请求参数
+    detail.value.sortField = sortField.value
+    detail.value.sortOrder = sortOrder.value
+    console.log('搜索参数', getObj.value)
+    // 发送POST请求
+    const result = await API({
+      url: '/refund/search',
+      data: {
+        ...getObj.value,
+        detail: { ...detail.value }
+      }
+    })
+    // 复制一份 detail.value 并移除排序字段和排序方式，这是不同审核状态时使用的参数
+    const detailWithoutSort = { ...detail.value }
+    delete detailWithoutSort.sortField
+    delete detailWithoutSort.sortOrder
+
+    const result2 = await API({
+      url: '/refund/RefundA',
+      data: {
+        ...detailWithoutSort
+      }
+    })
+    // 统计合计数
+    if (result2.data) {
+      result2.data.forEach((item) => {
+        switch (item.status) {
+          case '待审核':
+            // 若 item.raudit 为空则赋值为 0
+            pendingPgold.value = item.sumRaudit1 || 0
+            pendingFgold.value = item.sumRaudit2 || 0
+            pendingTgold.value = item.sumRaudit3 || 0
+            // 若 item.sumRaudit 为空则赋值为 0
+            pendingGold.value = item.sumRaudit || 0
+            break
+          case '已通过':
+            approvedPgold.value = item.sumRaudit1 || 0
+            approvedFgold.value = item.sumRaudit2 || 0
+            approvedTgold.value = item.sumRaudit3 || 0
+            approvedGold.value = item.sumRaudit || 0
+            break
+          case '已驳回':
+            rejectedPgold.value = item.sumRaudit1 || 0
+            rejectedFgold.value = item.sumRaudit2 || 0
+            rejectedTgold.value = item.sumRaudit3 || 0
+            rejectedGold.value = item.sumRaudit || 0
+            break
+        }
+      })
+    }
+
+    trueFgold.value =
+      pendingFgold.value + approvedFgold.value + rejectedFgold.value
+    truePgold.value =
+      pendingPgold.value + approvedPgold.value + rejectedPgold.value
+    trueTgold.value =
+      pendingTgold.value + approvedTgold.value + rejectedTgold.value
+    trueGold.value = pendingGold.value + approvedGold.value + rejectedGold.value
+    // 将响应结果存储到响应式数据中
+    //console.log('请求成功', result)
+    // 存储表格数据
+    tableData.value = result.data.list
+    console.log('tableData请求成功', tableData.value)
+    // 存储分页总数
+    total.value = result.data.total
+    console.log('total', total.value)
+    // 调用分类的方法
+    handleClick()
+  } catch (error) {
+    console.log('表格数据请求失败', error)
+
+  }
+}
+//搜索
+//每次搜索都执行对应搜索操作，并将页码重置为1
+const search = function () {
+  getObj.value.pageNum = 1
+  get()
+}
+//重置
+const reset = function () {
+  detail.value.jwcode = ''
+  detail.value.refundGoods = ''
+  detail.value.refundType = ''
+  detail.value.area = ''
+  detail.value.startDate = ''
+  detail.value.endDate = ''
+  sortField.value = ''
+  sortOrder.value = ''
+  getTime.value = {}
+}
+//今天
+const getToday = function (){
+  const today = new Date()
+  const startDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate()
+  )
+  const endDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('今天', getTime.value)
+  get()
+}
+//昨天
+const getYesterday = function (){
+  const yesterday = new Date()
+  yesterday.setDate(yesterday.getDate() - 1)
+  const startDate = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate()
+  )
+  const endDate = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('昨天', getTime.value)
+  get()
+}
+//近7天
+const get7Days = function (){
+  const today = new Date()
+  const startDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() - 6
+  )
+  const endDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('近7天', getTime.value)
+  get()
+}
+//全部充值明细 
+const adminAll = function () {
+  console.log('全部充值明细')
+  detail.value.status = ''
+  getObj.value.pageNum = 1
+  get()
+  //计算免费金币、永久金币、任务金币所有审核状态分别的总数以及总金币数
+  trueFgold.value = 
+    pendingFgold.value + approvedFgold.value + rejectedFgold.value
+  truePgold.value = 
+    pendingPgold.value + approvedPgold.value + rejectedPgold.value
+  trueTgold.value = 
+    pendingTgold.value + approvedTgold.value + rejectedTgold.value
+  trueGold.value =
+    pendingGold.value + approvedGold.value + rejectedGold.value
+}
+//三个审核状态采用的async和await方法，因为需要等待异步请求结果，才能计算总金币数；
+// 而上边的adminAll方法不需要等待异步请求结果，所以采用同步方法。
+//待审核充值明细
+const adminWait = async function () {
+  detail.value.status = 0
+  getObj.value.pageNum = 1
+  await get()
+  console.log('待审核充值明细')
+  trueFgold.value = pendingFgold.value
+  truePgold.value = pendingPgold.value
+  trueTgold.value = pendingTgold.value
+  trueGold.value = pendingGold.value
+}
+//已通过充值明细
+const adminPass = async function () {
+  detail.value.status = 1
+  getObj.value.pageNum = 1
+  await get()
+  console.log('已通过充值明细')
+  trueFgold.value = approvedFgold.value
+  truePgold.value = approvedPgold.value
+  trueTgold.value = approvedTgold.value
+  trueGold.value = approvedGold.value
+}
+//已驳回充值明细
+const adminReject = async function () {
+  detail.value.status = 2
+  getObj.value.pageNum = 1
+  await get()
+  console.log('已驳回充值明细')
+  trueFgold.value = rejectedFgold.value
+  truePgold.value = rejectedPgold.value
+  trueTgold.value = rejectedTgold.value
+  trueGold.value = rejectedGold.value
+}
+//点击标签页
+// 设置tab.props.name默认为all
+const tabName = ref('all')
+const handleClick = function (tab, event) {
+  if (tab.props.name === 'all') {
+    adminAll()
+  } else if (tab.props.name === 'wait') {
+    adminWait()
+  } else if (tab.props.name === 'pass') {
+    adminPass()
+  } else if (tab.props.name === 'reject') {
+    adminReject()
+  }
+}
+//获取地区
+const getArea = async function () {
+  try {
+    const result = await API({url:'/recharge/user/search',data:{}})
+    //console.log('地区请求成功', result)
+    area.value = result.data
+    console.log('地区请求成功', area.value)
+  }catch (error) {
+    console.log('地区请求失败', error)
+    ElMessage.error('获取地区失败')
+  }
+}
+
+//删除气泡的id标识
+const delObj = ref({})
+const del  = function (row) {
+  delObj.value.detailId = row.detailId
+  console.log('delObj', delObj.value)
+}
+//删除按钮的气泡弹框
+const delConfirm = async function () {
+  try {
+    console.log('delObj', delObj.value)
+    // 发送请求POST
+    const result = await API({
+      url: '/refund/softDelete?detailId=' + delObj.value.detailId,
+      data: {}
+    })
+    //将响应结果存储到响应式数据中
+    console.log('气泡弹窗请求成功', result)
+    get()
+  }catch(error){
+    console.log('删除的气泡弹窗请求失败', error)
+    ElMessage.error('删除失败')
+  }
+}
+
+// 查询商品的接口
+const allGoods = ref([])
+const getAllGoods = async function () {
+  try {
+    // 发送POST请求
+    const result = await API({ url: '/product', data: {} })
+    // 将响应结果存储到响应式数据中
+    console.log('allGoods请求成功', result)
+    // 存储全部数据
+    goods.value = result.data
+  } catch (error) {
+    console.log('商品请求失败', error)
+    ElMessage.error('商品查询失败')
+  }
+}
+getAllGoods()
+
+// 验证跳转输入框的数字是否合法，此处待检查是否用上
+const checPagekNumber = function () {
+  if (typeof parseInt(getObj.value.pageNum) === 'number') {
+    console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
+    if (
+      getObj.value.pageNum > 0 &&
+      getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
+    ) {
+      getObj.value.pageNum = parseInt(getObj.value.pageNum)
+      console.log('输入的数字合法')
+      get()
+    } else {
+      //提示
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      })
+    }
+  } else {
+    //提示
+    ElMessage({
+      type: 'error',
+      message: '非数字输入内容'
+    })
+  }
+}
+
+//新增排序字段和排序方式
+const sortField = ref('')
+const sortOrder = ref('')
+//处理排序事件
+const handleSortChange = (column) => {
+  console.log('column',column.prop)
+  console.log('column',column.order)
+  if(column.prop === 'rechargeCoin'){
+    sortField.value = 'recharge_coin'
+  } else if(column.prop === 'taskCoin'){
+    sortField.value = 'task_coin'
+  }else if(column.prop === 'freeCoin'){
+    sortField.value = 'free_coin'
+  }else if(column.prop === 'createTime'){
+    sortField.value = 'create_time'
+  }
+  sortOrder.value = column.order === 'ascending' ? 'asc' : 'desc'
+  get()
+}
+
+const handlePageSizeChange = function (val){
+  getObj.value.pageSize = val
+  get()
+}
+const handleCurrentChange = function (val){
+  getObj.value.pageNum = val
+  get()
+}
+
+//导出Excel，注意这里是虚拟接口，后端写完后替换正确的地址
+const exportExcel = function () {
+  window.open('/refund/exportExcel?detail=' + JSON.stringify(detail.value))
+}
+
+
+
+//切换新增退款和明细逻辑标签---------------------------------------------------------------
+// 用于控制显示内容的变量
+const activeTab = ref('addRefund')
+
+// 切换标签页的方法
+const changeTab = async (tabName) => {
+  activeTab.value = tabName
+  //切换至detail标签页时，再请求get方法，就不用挂载了，可减轻浏览器压力加快页面加载速度
+  if (activeTab.value === 'detail') {
+    await get()
+  }
+}
+
+
 // 挂载
 onMounted(async function () {
   await getAdminData()
+  await getArea()
+  //await get()
 })
 </script>
 
 <template>
-  <div style="font-weight: bold">新增退款</div>
+
+  <div>
+  <el-button-group>
+    <!-- 切换后状态显示样式否则是默认样式 -->
+      <el-button 
+        :type="activeTab === 'addRefund' ? 'primary' : 'default'" 
+        @click="changeTab('addRefund')"
+      >
+        新增退款
+      </el-button>
+      <el-button 
+        :type="activeTab === 'detail' ? 'primary' : 'default'" 
+        @click="changeTab('detail')"
+      >
+        金币退款明细
+      </el-button>
+    </el-button-group>
+
+  <!-- 根据activeTab切换显示内容 -->
+   <!-- 新增退款的布局---------------------------------------------------------- -->
+   <div v-if="activeTab === 'addRefund'">
+  <!-- <div style="font-weight: bold">新增退款</div> -->
 
   <el-form
     :model="addRefund"
@@ -488,11 +932,7 @@ onMounted(async function () {
             <p style="color: #2fa1ff">{{ user.rechargeTimes }}</p>
           </el-form-item>
         </el-col>
-        <!-- <el-col :span="10">
-          <el-form-item label="负责客服">
-            <p>{{ adminData.name }}</p>
-          </el-form-item>
-        </el-col> -->
+        
         <el-col :span="10">
           <el-form-item label="消费次数">
             <p style="color: #2fa1ff">{{ user.spendTimes }}</p>
@@ -503,19 +943,318 @@ onMounted(async function () {
             <p>{{ adminData.area }}</p>
           </el-form-item>
         </el-col>
-        <el-col :span="14">
-          <!-- <el-form-item label="待审核">
-            <p style="color: #2fa1ff">
-              {{ user.A }}
-            </p>
-          </el-form-item> -->
-        </el-col>
       </el-row>
     </el-form>
   </el-card>
+  </div>
+
+
+  <!-- 金币退款明细的布局---------------------------------------------------------- -->
+  <div v-else-if="activeTab === 'detail'">
+      <el-row>
+    <el-col>
+      <el-card style="margin-bottom: 20px;margin-top:10px">
+        <el-row style="margin-bottom: 10px">
+          <el-col :span="5">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">精网号：</el-text>
+              
+              <el-input
+                v-model="detail.jwcode"
+                placeholder="请输入精网号"
+                size="large"
+                style="width: 150px"
+                clearable
+              />
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">退款类型：</el-text>
+              <el-select
+                v-model="detail.refundType"
+                placeholder="请选择退款类型"
+                size="large"
+                style="width: 180px"
+                clearable
+              >
+                <el-option
+                  v-for="item in consumeType"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">退款商品：</el-text>
+              <el-select
+                v-model="detail.refundGoods"
+                placeholder="请选择退款商品"
+                size="large"
+                style="width: 180px"
+                clearable
+                
+              >
+                <el-option
+                  v-for="item in goods"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.name"
+                />
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="head-card-element" v-if="adminData.area == '总部'">
+              <el-text class="mx-1" size="large">所属地区：</el-text>
+              <el-select
+                v-model="detail.area"
+                placeholder="请选择所属地区"
+                size="large"
+                style="width: 180px"
+                clearable
+              >
+                <el-option
+                  v-for="item in area"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="21">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">退款时间：</el-text>
+              <el-date-picker
+                v-model="getTime"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="起始时间"
+                end-placeholder="结束时间"
+              />
+              <el-button style="margin-left: 10px" @click="getToday()"
+                >今</el-button
+              >
+              <el-button @click="getYesterday()">昨</el-button>
+              <el-button @click="get7Days()">近7天</el-button>
+            
+              <el-button type="success" @click="reset()">重置</el-button>
+              <el-button type="primary" @click="search()">查询</el-button>
+              <el-button type="primary" @click="exportExcel">导出Excel</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-col>
+  </el-row>
+  <el-row>
+    <el-col>
+      <el-card>
+        <!-- <el-tabs
+          v-model="activeName"
+          type="card"
+          class="demo-tabs"
+          @tab-click="handleClick"
+        >
+          <el-tab-pane label="全部" name="all"></el-tab-pane>
+          <el-tab-pane label="待审核" name="wait"></el-tab-pane>
+          <el-tab-pane label="已通过" name="pass"></el-tab-pane>
+          <el-tab-pane label="已驳回" name="reject"></el-tab-pane>
+        </el-tabs> -->
+
+        <div>
+          退款金币总数：{{ Math.abs(trueGold) }}，永久金币：{{
+            Math.abs(truePgold)
+          }}，免费金币：{{ Math.abs(trueFgold) }}，任务金币：{{
+            Math.abs(trueTgold)
+          }}
+        </div>
+        <!-- 设置表格容器的高度和滚动样式 -->
+        <div style="height: 520px; overflow-y: auto;margin-top:10px">
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+            @sort-change="handleSortChange"
+            height="520px"
+          >
+            <el-table-column
+              type="index"
+              label="序号"
+              width="100px"
+              fixed="left"
+            >
+              <template #default="scope">
+                <span>{{
+                  scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="username"
+              label="姓名"
+              fixed="left"
+              width="100px"
+            />
+            <el-table-column
+              prop="jwcode"
+              label="精网号"
+              fixed="left"
+              width="110px"
+            />
+            <el-table-column prop="area" label="所属地区" width="110px" />
+            <el-table-column prop="refundGoods" label="商品名称" width="100px" />
+            <el-table-column prop="refundType" label="退款类型" width="100px" />
+
+            <el-table-column label="退款金币总数" width="110px">
+              <template #default="scope">
+                {{
+                  scope.row.rechargeCoin +
+                  scope.row.freeCoin +
+                  scope.row.taskCoin
+                }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="typeR" label="退款方式" width="110px"/>
+            <el-table-column
+              prop="rechargeCoin"
+              label="永久金币"
+              width="110px"
+              sortable="“custom”"
+            />
+            <el-table-column
+              prop="freeCoin"
+              sortable="“custom”"
+              label="免费金币"
+              width="110px"
+            />
+            <el-table-column
+              prop="taskCoin"
+              sortable="“custom”"
+              label="任务金币"
+              width="110px"
+            />
+            <!-- 修改prop为taskGold -->
+            <el-table-column
+              prop="remark"
+              label="退款原因"
+              width="160px"
+              show-overflow-tooltip
+            />
+            <el-table-column prop="adminName" label="提交人" width="100px" />
+             <!-- <el-table-column prop="status" label="审核状态" width="120px">
+              <template #default="scope">
+                <span v-if="scope.row.status == 1">
+                  <div class="status">
+                    <span class="green-dot"></span>
+                    <span>已通过</span>
+                  </div>
+                </span>
+                <span v-if="scope.row.status == 0">
+                  <div class="status">
+                    <span class="grey-dot"></span>
+                    <span>待审核</span>
+                  </div>
+                </span>
+                <span v-if="scope.row.status == 2">
+                  <div class="status">
+                    <span class="red-dot"></span>
+                    <span>已驳回</span>
+                  </div>
+                </span>
+              </template>
+            </el-table-column> 
+            <el-table-column
+              prop="reson"
+              label="驳回理由"
+              width="200px"
+              show-overflow-tooltip
+            /> -->
+            <el-table-column
+              prop="createTime"
+              sortable="“custom”"
+              label="提交时间"
+              width="180px"
+            >
+              <template #default="scope">
+                {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
+              </template>
+            </el-table-column>
+            <!-- <el-table-column
+              prop="operation"
+              label="操作"
+              fixed="right"
+              width="120px"
+            >
+              <template #default="scope">
+                <el-popconfirm
+                  title="确定将此条活动删除吗？"
+                  @confirm="delConfirm"
+                >
+                  <template #reference>
+                    <el-button type="primary" text @click="del(scope.row)">
+                      删除
+                    </el-button>
+                  </template>
+                  <template #actions="{ delConfirm, cancel }">
+                    <el-button size="small" @click="cancel">取消</el-button>
+                    <el-button type="primary" size="small" @click="delConfirm">
+                      确定
+                    </el-button>
+                  </template>
+                </el-popconfirm>
+              </template>
+            </el-table-column> -->
+          </el-table>
+        </div>
+
+        <!-- 分页 -->
+        <div class="pagination" style="margin-top: 20px">
+          <el-pagination
+            background
+            :page-size="getObj.pageSize"
+            :page-sizes="[5, 10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            @size-change="handlePageSizeChange"
+            @current-change="handleCurrentChange"
+            @jump="checkPageNumber"
+          ></el-pagination>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+    </div>
+  </div>
 </template>
 
 <style scoped>
+
+.status {
+  display: flex;
+}
+
+.head-card {
+  display: flex;
+}
+
+.head-card-element {
+  margin-right: 10px;
+}
+
+.head-card-btn {
+  margin-left: auto;
+}
+.pagination {
+  display: flex;
+  margin-top: 20px;
+}
+
 p {
   margin: 0px;
 }
diff --git a/src/views/usergold/clientCount.vue b/src/views/usergold/clientCount.vue
new file mode 100644
index 0000000..ddc0e37
--- /dev/null
+++ b/src/views/usergold/clientCount.vue
@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <!-- 这里放置标签切换的按钮 -->
+    <el-button-group>
+    <!-- 切换后状态显示 primary 样式否则是默认样式 -->
+      <el-button 
+        :type="activeTab === 'detail' ? 'primary' : 'default'" 
+        @click="goToDetail"
+      >
+        金币明细
+      </el-button>
+      <el-button 
+        :type="activeTab === 'balance' ? 'primary' : 'default'" 
+        @click="goToBalance"
+      >
+        金币余额
+      </el-button>
+    </el-button-group>
+    <!-- 渲染子路由组件 -->
+    <router-view></router-view>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+
+const router = useRouter();// 获取路由实例
+const route = useRoute();// 获取当前路由信息
+// 定义响应式变量 activeTab 来跟踪当前激活的标签
+const activeTab = ref(route.name === 'clientCountBalance' ? 'balance' : 'detail');
+//也就是说如果当前在clientCountBalance页面，那么就是balance，否则默认情况都展示detail页面
+//此时获取到的路由信息是clientCountDetail，所以默认是detail
+
+
+const goToDetail = () => {
+  // 点击按钮时更新 activeTab 为 detail
+  activeTab.value = 'detail';
+  router.push({ name: 'clientCountDetail' });
+};
+
+const goToBalance = () => {
+  // 点击按钮时更新 activeTab 为balance
+  activeTab.value = 'balance';
+  router.push({ name: 'clientCountBalance' });
+};
+
+// 监听路由变化，更新 activeTab
+watch(() => route.name, (newName) => {
+  if (newName === 'clientCountDetail') {
+    activeTab.value = 'detail';
+  } else if (newName === 'clientCountBalance') {
+    activeTab.value = 'balance';
+}});
+
+// 当进入父路由时，默认跳转到金币明细页面
+if (route.name === 'usergold') {
+  router.push({ name: 'clientCountDetail' });
+}
+</script>
diff --git a/src/views/usergold/clientCountBalance.vue b/src/views/usergold/clientCountBalance.vue
new file mode 100644
index 0000000..d6c0e69
--- /dev/null
+++ b/src/views/usergold/clientCountBalance.vue
@@ -0,0 +1,3 @@
+<template>
+    <p>1111</p>
+</template>
\ No newline at end of file
diff --git a/src/views/usergold/index.vue b/src/views/usergold/clientCountDetail.vue
similarity index 92%
rename from src/views/usergold/index.vue
rename to src/views/usergold/clientCountDetail.vue
index e0bae00..cf07e03 100644
--- a/src/views/usergold/index.vue
+++ b/src/views/usergold/clientCountDetail.vue
@@ -202,12 +202,14 @@ const checkNumber = function () {
   }
 }
 
-// 挂载
-onMounted(async function () {
-  await getArea()
-  await getAdminData()
-  await get()
-})
+// 计算金币数量的方法
+const calculateGoldAmount = (row) => {
+  const totalGold = (row.rechargeCoin + row.freeCoin + row.taskCoin) / 100;
+  if (row.updateType === 1) { // 消费
+    return -totalGold;
+  } 
+  return totalGold;
+}
 
 // 导出Excel的方法
 const headers = [
@@ -216,8 +218,9 @@ const headers = [
   '精网号',
   '所属地区',
   '平台信息',
-  '更新数量',
+  //'更新数量',
   '更新类型',
+  '金币数量',
   '永久金币',
   '免费金币',
   '任务金币',
@@ -474,9 +477,48 @@ const handleCurrentChange = function (val) {
   getObj.value.pageNum = val
   get()
 }
+
+
+// 用于控制显示内容的变量
+const activeTab = ref('detailY')
+
+// 切换标签页的方法
+const changeTab = (tabName) => {
+  activeTab.value = tabName
+}
+
+// 挂载
+onMounted(async function () {
+  await getArea()
+  await getAdminData()
+  await get()
+})
+
 </script>
 
+
 <template>
+
+
+<div>
+  <!-- <el-button-group>
+      <el-button 
+        :type="activeTab === 'detailY' ? 'primary' : 'default'" 
+        @click="changeTab('detailY')"
+      >
+        金币明细
+      </el-button>
+      <el-button 
+        :type="activeTab === 'goldInfo' ? 'primary' : 'default'" 
+        @click="changeTab('goldInfo')"
+      >
+        金币余额
+      </el-button>
+    </el-button-group> -->
+
+  <!-- 根据activeTab切换显示内容 -->
+   <!-- 客户金币明细的布局---------------------------------------------------------- -->
+<!-- <div v-if="activeTab === 'detailY'"> -->
   <!-- 导出excel提前展示的信息面板 -->
   <el-dialog
     v-model="showExportInfoPanel"
@@ -540,14 +582,14 @@ const handleCurrentChange = function (val) {
 
   <el-row>
     <el-col>
-      <el-card style="margin-bottom: 20px">
+      <el-card style="margin-bottom: 20px;margin-top: 10px;">
         <el-row style="margin-bottom: 10px">
-          <el-col :span="6">
+          <el-col :span="5">
             <div class="head-card-element">
               <el-text class="mx-1" size="large">精网号：</el-text>
               <el-input
                 v-model="detailY.jwcode"
-                style="width: 240px"
+                style="width: 150px"
                 placeholder="请输入精网号"
                 clearable
               />
@@ -559,7 +601,7 @@ const handleCurrentChange = function (val) {
               <el-select
                 v-model="detailY.consumePlatform"
                 placeholder="请选择平台信息"
-                style="width: 200px"
+                style="width: 180px"
                 clearable
               >
                 <el-option
@@ -577,7 +619,7 @@ const handleCurrentChange = function (val) {
               <el-select
                 v-model="detailY.num"
                 placeholder="请选择更新类型"
-                style="width: 200px"
+                style="width: 180px"
                 clearable
               >
                 <el-option
@@ -595,7 +637,7 @@ const handleCurrentChange = function (val) {
               <el-select
                 v-model="detailY.area"
                 placeholder="请选择所属地区"
-                style="width: 240px"
+                style="width: 180px"
                 clearable
                 :loading="isLoadingArea"
               >
@@ -623,9 +665,10 @@ const handleCurrentChange = function (val) {
           <el-button @click="getToday()">今</el-button>
           <el-button @click="getYesterday()">昨</el-button>
           <el-button @click="get7Days()">近7天</el-button>
-          <el-button type="success" @click="exportExcel">导出Excel表格</el-button>
+          
           <el-button type="success" @click="reset()">重置</el-button>
           <el-button type="primary" @click="search()">查询</el-button>
+          <el-button type="primary" @click="exportExcel">导出Excel表格</el-button>
         </div>
       </el-card>
     </el-col>
@@ -679,7 +722,7 @@ const handleCurrentChange = function (val) {
                 <span v-if="scope.row.consumePlatform == 4">金币系统</span>
               </template>
             </el-table-column>
-            <el-table-column
+            <!-- <el-table-column
               prop="gold"
               label="更新数量"
               width="120"
@@ -688,7 +731,7 @@ const handleCurrentChange = function (val) {
               <template #default="scope">
                 <span>{{ scope.row.gold / 100 }}</span>
               </template>
-            </el-table-column>
+            </el-table-column> -->
             <el-table-column prop="updateType" label="更新类型" width="110">
               <!-- 模板内容 -->
               <template #default="scope">
@@ -698,6 +741,13 @@ const handleCurrentChange = function (val) {
                 <span v-if="scope.row.updateType == 3">其他</span>
               </template>
             </el-table-column>
+
+            <el-table-column label="金币数量" width="120">
+              <template #default="scope">
+                <span>{{ calculateGoldAmount(scope.row) }}</span>
+              </template>
+            </el-table-column>
+
             <el-table-column
               prop="rechargeCoin"
               sortable="custom"
@@ -760,6 +810,12 @@ const handleCurrentChange = function (val) {
       </el-card>
     </el-col>
   </el-row>
+  <!-- </div> -->
+  <!-- 客户金币余额的布局---------------------------------------------------------- -->
+  <!-- <div v-else-if="activeTab === 'goldInfo'"> -->
+
+  <!-- </div> -->
+  </div>
 </template>
 
 <style scoped>
diff --git a/src/views/workspace/index.vue b/src/views/workspace/index.vue
index ec6f7fc..5d84f70 100644
--- a/src/views/workspace/index.vue
+++ b/src/views/workspace/index.vue
@@ -1,318 +1,767 @@
-<template>
-  <el-col :span="4">
-    <el-card class="center-card margin-bottom">数据总览</el-card>
-  </el-col>
-  <el-row :span="24">
-    <!-- 第一个卡片 -->
-    <el-card class="card-item">
-      <template #header>
-        <div class="card-header">
-          <div class="card-title">当前金币余量</div>
-          <div>100&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;较前一日 -100</div>
-        </div>
-      </template>
-      <div>
-        <div class="margin-bottom">永久金币：100</div>
-        <div class="margin-bottom">免费金币：100</div>
-        <div class="margin-bottom">[六月到期|100]&nbsp;&nbsp;&nbsp;&nbsp;[12月到期|100]</div>
-        <div>任务金币：100</div>
-      </div>
-    </el-card>
-    <!-- 第二个卡片 -->
-    <el-card class="card-item">
-      <div class="card-title">全年累计充值金币数</div>
-      <div class="card-title">100</div>
-      <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
-      <div class="center-card">折合新币累计金额:100</div>
-      <template #footer >
-        <el-col class="margin-bottom center-card">昨日新增：100</el-col>
-        <el-col class="margin-bottom center-card">其中充值：100</el-col>
-      </template>
-    </el-card>
-    <!-- 第三个卡片 -->
-    <el-card class="card-item">
-      <div class="card-title">全年累计消耗金币数</div>
-      <div class="card-title">100</div>
-      <div class="center-card">消费：100</div>
-      <div class="center-card">退款：100</div>
-      <template #footer>
-        <div></div>
-        <div class="margin-bottom center-card">昨日新增消耗：100</div>
-        <div class="margin-bottom center-card">昨日新增消费：100</div>
-        <div class="margin-bottom center-card">昨日新增退款：100</div>
-      </template>
-    </el-card>
-    <!-- 第四个卡片 -->
-    <el-card class="card-item">
-      <el-col class="card-title">全年累计充值人头数</el-col>
-      <el-col class="card-title">100</el-col>
-      <el-col class="center-card">周同比:？？？</el-col>
-      <el-col class="center-card">日环比</el-col>
-      <template #footer>
-        <el-col class="margin-bottom center-card">昨日充值人数：100</el-col>
-        <el-col class="margin-bottom center-card">其中首充：100</el-col>
-      </template>
-    </el-card>
-  </el-row>
-
-
-  <el-row :gutter="10" style="margin-top: 20px">
-    <el-col :span="24">
-      <el-card style="width: 100%">
-        <el-row>
-          <el-col :span="15">
-            <el-tabs v-model="activeTab" @tab-change="handleTabChange">
-              <el-tab-pane label="金币充值" name="recharge"></el-tab-pane>
-              <el-tab-pane label="金币消费" name="consume"></el-tab-pane>
-            </el-tabs>
-          </el-col>
-          <el-col :span="9" style="text-align: right">
-            <el-radio-group v-model="timeRange" @change="handleTimeRangeChange" style="margin-right: 5px; margin-top:5px">
-              <el-radio-button label="day" style="border-color: white">今日</el-radio-button>
-              <el-radio-button label="week" style="border-color: white">本周</el-radio-button>
-              <el-radio-button label="month" style="border-color: white">本月</el-radio-button>
-              <el-radio-button label="year" style="border-color: white">本年</el-radio-button>
-            </el-radio-group>
-            <el-date-picker
-              v-model="dateRange"
-              type="daterange"
-              range-separator="→"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-              style="width: 200px"
-              @change="handleDateRangeChange"
-            />
-            <el-button style="margin-left: 5px" @click="loadChart">查询</el-button>
-          </el-col>
-        </el-row>
-        
-        <el-row :gutter="20" style="margin-top: 20px">
-          <el-col :span="18">
-            <div class="bar">
-              <div v-show="activeTab === 'recharge'" id="recharge" style="width: 100%; height: 400px"></div>
-              <div v-show="activeTab === 'consume'" id="consume" style="width: 100%; height: 400px"></div>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <el-card class="rank-card" style="width: 100%; height: 100%">
-              <div class="card-large margin-bottom">金币{{ activeTab === 'recharge' ? '充值' : '消费' }}排名</div>
-              <el-select v-model="selectedType" style="width: 100%; margin-bottom: 15px">
-                <el-option label="全部类型" value="all"></el-option>
-                <el-option label="永久金币" value="permanent"></el-option>
-                <el-option label="免费金币" value="free"></el-option>
-                <el-option label="任务金币" value="task"></el-option>
-              </el-select>
-              <el-table :data="tableData" height="320px">
-                <el-table-column prop="rank" label="排名" width="60" align="center"></el-table-column>
-                <el-table-column prop="region" label="地区" align="center"></el-table-column>
-                <el-table-column prop="coinAmount" label="金币数量" align="center">
-                  <template #default="{ row }">
-                    {{ row.coinAmount.toLocaleString() }}
-                  </template>
-                </el-table-column>
-              </el-table>
-            </el-card>
-          </el-col>
-        </el-row>
-      </el-card>
-    </el-col>
-  </el-row>
-</template>
-
 <script setup>
-import * as echarts from 'echarts'
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+ import * as echarts from 'echarts'
+// 这是工作台
+import { ref, onMounted, reactive, computed } from 'vue'
+import { VscInfo } from 'vue-icons-plus/vsc'
+import * as bs from 'vue-icons-plus/bs'
+import axios, { all } from 'axios'
 import API from '@/util/http'
+import moment from 'moment'
+import * as math from 'mathjs'
+import { getTime } from 'element-plus/es/components/countdown/src/utils.mjs'
+// const echarts = await import('echarts')
+// 变量
+// 加载对象
+const loading = ref(true)
+const areaRankLoading = ref(true)
+// 总览对象
+const getSumCoin = ref({})
+const statistics = ref({})
+// const getYearConsumeCoin = ref({});
+// const getDayConsumeCoin = ref({});
+
+// 中间统计图搜索参数
+const changeTimeRatio = ref('allDays')
+const searchTime = ref([])
 
-const histogramData = ref([])
+// 月份柱状图
+const getMiddleBarObj = ref({
+  updateType: 0
+})
+const getMiddleBarData = ref({})
+const middleTotalRecharge = ref(0)
+const middleTotalFree = ref(0)
+const middleTotalTask = ref(0)
 const middleCategory = ref([])
 const middleRecharge = ref([])
 const middleFree = ref([])
 const middleTask = ref([])
-const tableData = ref([])
-const area = ref([])
 
-// 变量
-const activeTab = ref('consume')
-const updateType = ref(1)
-const timeRange = ref('day')
-const dateRange = ref([])
-const selectedType = ref('all')
+// 地区排名
+const getAreaRankObj = ref({
+  updateType: 0
+})
+const getMediumArea = ref([])
+const areaRank = ref([])
+
+// 金币概览
+const option3Data = ref([])
+const option4Data = ref([])
+const option5Data = ref([])
+// 四大学科类别占比
+const platformData = ref([])
+const allData = ref([])
+const ERPData = ref([])
+const HCData = ref([])
+const LinkData = ref([])
+const goldData = ref([])
 
-// ECharts实例
+// 重构工作台，第一个方框类别
+const oneData = ref([])
+const twoData = ref([])
+const threeData = ref([])
+
+// 搜索对象
+const goldType = ref('全部类型')
+const platform = ref('全部平台')
+//默认高亮标签页
+const activeName = ref('recharge')
+// 金币分类选项
+const gold = [
+  {
+    value: '全部类型',
+    label: '全部类型'
+  },
+  {
+    value: '充值金币',
+    label: '永久金币'
+  },
+  {
+    value: '免费金币',
+    label: '免费金币'
+  },
+  {
+    value: '任务金币',
+    label: '任务金币'
+  }
+]
+
+const list = ref([])
+const token = localStorage.getItem('token')
 let rechargeBar = null
-let consumeBar = null
+// 方法
+// 搜索方法
+const get = async function () {
+  try {
+    getAreaRank()
+    getMiddleBar()
+    const result2 = await API({ url: '/statistics/a', data: {} })
+    const result9 = await API({ url: '/statistics/b', data: {} })
+    // 重构的工作台
+    const result10 = await API({
+      url: '/One/getOne',
+      data: {
+        token: token
+      }
+    })
+    const result11 = await API({
+      url: '/One/getTwo',
+      data: {
+        token: token
+      }
+    })
+    const result12 = await API({
+      url: '/One/getThree',
+      data: { token: token }
+    })
+    oneData.value = result10
+    twoData.value = result11
+    threeData.value = result12
+    console.log('oneData', oneData.value)
 
-const formatDate = (date) => {
-  const year = date.getFullYear()
-  const month = String(date.getMonth() + 1).padStart(2, '0')
-  const day = String(date.getDate()).padStart(2, '0')
-  return `${year}-${month}-${day}`
-}
+    statistics.value = result2.data
+    platformData.value = result9.data
 
-// 本周一
-const getWeekStart = (date) => {
-  const day = date.getDay()
-  const diff = date.getDate() - day + (day === 0 ? -6 : 1) // 如果周日，则返回上周一
-  return new Date(date.setDate(diff))
-}
+    console.log('statistics', statistics.value)
+    console.log('platformData', platformData.value)
 
-// 本周日
-const getWeekEnd = (date) => {
-  const start = getWeekStart(new Date(date))
-  const end = new Date(start)
-  end.setDate(start.getDate() + 6)
-  return end
-}
+    option3Data.value = [
+      {
+        value: Math.abs(twoData.value.rechargegold),
+        name: '永久金币' + ' | ' + formatNum(twoData.value.rechargegold / 100)
+      },
+      {
+        value: Math.abs(twoData.value.freegold),
+        name: '免费金币' + ' | ' + formatNum(twoData.value.freegold / 100)
+      },
+      {
+        value: Math.abs(twoData.value.taskgold),
+        name: '任务金币' + ' | ' + formatNum(twoData.value.taskgold / 100)
+      }
+    ]
 
-// 月份第一天
-const getMonthStart = (date) => {
-  return new Date(date.getFullYear(), date.getMonth(), 1)
-}
+    option4Data.value = [
+      {
+        value: Math.abs(threeData.value.rechargegold),
+        name:
+          '永久金币' +
+          ' | ' +
+          formatNum(Math.abs(threeData.value.rechargegold / 100))
+      },
+      {
+        value: Math.abs(threeData.value.freegold),
+        name:
+          '免费金币' +
+          ' | ' +
+          formatNum(Math.abs(threeData.value.freegold / 100))
+      },
+      {
+        value: Math.abs(threeData.value.taskgold),
+        name:
+          '任务金币' +
+          ' | ' +
+          formatNum(Math.abs(threeData.value.taskgold / 100))
+      }
+    ]
+    console.log('option4Data', option4Data.value)
 
-// 月份最后一天
-const getMonthEnd = (date) => {
-  return new Date(date.getFullYear(), date.getMonth() + 1, 0)
+    option5Data.value = [
+      {
+        value: Math.abs(oneData.value.rechargegold),
+        name: '永久金币' + ' | ' + formatNum(oneData.value.rechargegold / 100)
+      },
+      {
+        value: Math.abs(oneData.value.freegold),
+        name: '免费金币' + ' | ' + formatNum(oneData.value.freegold / 100)
+      },
+      {
+        value: Math.abs(oneData.value.taskgold),
+        name: '任务金币' + ' | ' + formatNum(oneData.value.taskgold / 100)
+      }
+    ]
+    console.log('option5Data', option5Data.value)
+  } catch (error) {
+    console.log('请求失败', error)
+    loading.value = false
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
 }
+// 获取中间柱状图数据
+const getMiddleBar = async function () {
+  const result = await API({
+    url: '/statistics/getCoinTime',
+    data: getMiddleBarObj.value
+  })
 
-// 年份第一天
-const getYearStart = (date) => {
-  return new Date(date.getFullYear(), 0, 1)
-}
+  getMiddleBarData.value = result.data
+  console.log('getMiddleBarData', getMiddleBarData.value)
+
+  // 柱状图数据处理
+  middleCategory.value = getMiddleBarData.value.map((item) =>
+    item.day == null ? item.month : item.day.substring(5, 10)
+  )
+  middleRecharge.value = getMiddleBarData.value.map((item) =>
+    Math.abs(item.rechargeSumCoin)
+  )
+  middleFree.value = getMiddleBarData.value.map((item) =>
+    Math.abs(item.freeSumCoin)
+  )
+  middleTask.value = getMiddleBarData.value.map((item) =>
+    Math.abs(item.taskSumCoin)
+  )
+  middleTotalRecharge.value = 0
+  middleTotalFree.value = 0
+  middleTotalTask.value = 0
+  middleRecharge.value.forEach((number) => {
+    middleTotalRecharge.value = math.add(
+      math.bignumber(middleTotalRecharge.value),
+      math.bignumber(number)
+    )
+  })
+  middleFree.value.forEach((number) => {
+    middleTotalFree.value = math.add(
+      math.bignumber(middleTotalFree.value),
+      math.bignumber(number)
+    )
+  })
+  middleTask.value.forEach((number) => {
+    middleTotalTask.value = math.add(
+      math.bignumber(middleTotalTask.value),
+      math.bignumber(number)
+    )
+  })
 
-// 年份最后一天
-const getYearEnd = (date) => {
-  return new Date(date.getFullYear(), 11, 31)
+  console.log('middleCategory', middleCategory.value)
+  console.log('middleRecharge', middleRecharge.value)
+  console.log('middleFree', middleFree.value)
+  console.log('middleTask', middleTask.value)
+  console.log('middleTotalRecharge', middleTotalRecharge.value)
+  console.log('middleTotalFree', middleTotalFree.value)
+  console.log('middleTotalTask', middleTotalTask.value)
+
+  if (getMiddleBarObj.value.updateType == 0) {
+    // 基于准备好的dom，初始化echarts实例
+    updateChart()
+    // var recharge = echarts.init(document.getElementById('recharge'))
+    // const option = {
+    //   tooltip: {
+    //     trigger: 'axis',
+    //     axisPointer: {
+    //       type: 'shadow'
+    //     },
+    //     formatter: function (params) {
+    //       let total = 0
+    //       let content = `${params[0].name}<br/>`
+    //       params.forEach((param) => {
+    //         content += `${param.seriesName}: ${param.value}<br/>`
+    //         total += param.value
+    //       })
+    //       content += `总和: ${total}`
+    //       return content
+    //     }
+    //   },
+    //   legend: {
+    //     right: '-5%',
+    //     orient: 'vertical'
+    //   },
+    //   grid: {
+    //     left: '3%',
+    //     right: '4%',
+    //     bottom: '3%',
+    //     containLabel: true
+    //   },
+    //   xAxis: {
+    //     type: 'category',
+    //     data: middleCategory.value
+    //   },
+    //   yAxis: {
+    //     type: 'value'
+    //   },
+    //   series: [
+    //     {
+    //       name: '永久金币',
+    //       color: '#35e383',
+    //       type: 'bar',
+    //       stack: 'total',
+    //       label: {
+    //         show: false
+    //       },
+    //       emphasis: {
+    //         focus: 'series'
+    //       },
+    //       data: middleRecharge.value
+    //     },
+    //     {
+    //       name: '免费金币',
+    //       color: '#5f8ff5',
+    //       type: 'bar',
+    //       stack: 'total',
+    //       label: {
+    //         show: false
+    //       },
+    //       emphasis: {
+    //         focus: 'series'
+    //       },
+    //       data: middleFree.value
+    //     },
+    //     {
+    //       name: '任务金币',
+    //       color: '#ffe733',
+    //       type: 'bar',
+    //       stack: 'total',
+    //       label: {
+    //         show: false
+    //       },
+    //       emphasis: {
+    //         focus: 'series'
+    //       },
+    //       data: middleTask.value
+    //     }
+    //   ]
+    // }
+
+    // // 使用刚指定的配置项和数据显示图表。
+    // recharge.setOption(option)
+  } else {
+    // 基于准备好的dom，初始化echarts实例
+    var consume = echarts.init(document.getElementById('consume'))
+    const option = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        },
+        formatter: function (params) {
+          let total = 0
+          let content = `${params[0].name}<br/>`
+          params.forEach((param) => {
+            content += `${param.seriesName}: ${param.value}<br/>`
+            total += param.value
+          })
+          content += `总和: ${total}`
+          return content
+        }
+      },
+      legend: {
+        right: '-5%',
+        orient: 'vertical'
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
+      xAxis: {
+        type: 'category',
+        data: middleCategory.value
+      },
+      yAxis: {
+        type: 'value'
+      },
+      series: [
+        {
+          name: '永久金币',
+          color: '#35e383',
+          type: 'bar',
+          stack: 'total',
+          label: {
+            show: false
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          data: middleRecharge.value
+        },
+        {
+          name: '免费金币',
+          color: '#5f8ff5',
+          type: 'bar',
+          stack: 'total',
+          label: {
+            show: false
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          data: middleFree.value
+        },
+        {
+          name: '任务金币',
+          color: '#ffe733',
+          type: 'bar',
+          stack: 'total',
+          label: {
+            show: false
+          },
+          emphasis: {
+            focus: 'series'
+          },
+          data: middleTask.value
+        }
+      ]
+    }
+    // 使用刚指定的配置项和数据显示图表。
+    consume.setOption(option)
+  }
 }
 
-const handleTimeRangeChange = (value) => {
-  const now = new Date()
-  let start, end
-  
-  switch (value) {
-    case 'day': // 今日
-      start = new Date(now)
-      end = new Date(now)
-      break
-    case 'week': // 本周
-      start = getWeekStart(new Date(now))
-      end = getWeekEnd(new Date(now))
-      break
-    case 'month': // 本月
-      start = getMonthStart(now)
-      end = getMonthEnd(now)
-      break
-    case 'year': // 本年
-      start = getYearStart(now)
-      end = getYearEnd(now)
-      break
-    default:
-      start = new Date()
-      end = new Date()
+// 获取门店排名
+const getAreaRank = async function () {
+  const result = await API({
+    url: '/statistics/getMee',
+    data: getAreaRankObj.value
+  })
+
+  getMediumArea.value = result.data
+
+  console.log('getMediumArea', getMediumArea.value)
+
+  if (getAreaRankObj.value.type == '充值金币') {
+    areaRank.value = getMediumArea.value.map((item) => ({
+      value: Math.abs(item.rechargeSumCoin).toFixed(2),
+      name: item.area
+    }))
+  } else if (getAreaRankObj.value.type == '免费金币') {
+    areaRank.value = getMediumArea.value.map((item) => ({
+      value: Math.abs(item.freeSumCoin).toFixed(2),
+      name: item.area
+    }))
+  } else if (getAreaRankObj.value.type == '任务金币') {
+    areaRank.value = getMediumArea.value.map((item) => ({
+      value: Math.abs(item.taskSumCoin).toFixed(2),
+      name: item.area
+    }))
+  } else {
+    areaRank.value = getMediumArea.value.map((item) => ({
+      value: Math.abs(item.totalRechargeSum).toFixed(2),
+      name: item.area
+    }))
   }
-  
-  dateRange.value = [start, end]
-  loadChart()
+  areaRank.value.sort((a, b) => b.value - a.value)
+  areaRankLoading.value = false
+  console.log('areaRank', areaRank.value)
 }
 
-const handleDateRangeChange = () => {
-  timeRange.value = ''
+// 金币类型
+
+// const findBsComponent = function (index) {
+//   let iconName
+//   if (index < 3) {
+//     iconName = `bs.Bs${index + 1}CircleFill` // 根据index拼接图标名称
+//   } else {
+//     iconName = `bs.Bs${index + 1}Circle` // 根据index拼接图标名称
+//   }
+//   return eval(iconName) // 动态执行图标名称，返回图标组件
+// }
+// 门店排名下拉框
+const changeGoldType = function () {
+  console.log('changeGoldType', goldType.value)
+  if (goldType.value == '全部类型') {
+    getAreaRankObj.value.type = ''
+  } else if (goldType.value == '充值金币') {
+    getAreaRankObj.value.type = '充值金币'
+  } else if (goldType.value == '免费金币') {
+    getAreaRankObj.value.type = '免费金币'
+  } else if (goldType.value == '任务金币') {
+    getAreaRankObj.value.type = '任务金币'
+  }
+  areaRankLoading.value = true
+  getAreaRank()
+}
+// 点击标签页初始化
+const handleChange = function () {
+  if (activeName.value == 'recharge') {
+    getMiddleBarObj.value.updateType = 0
+    getAreaRankObj.value.updateType = 0
+  } else {
+    getMiddleBarObj.value.updateType = 1
+    getAreaRankObj.value.updateType = 1
+  }
+  getAreaRankObj.value.type = ''
+  goldType.value = '全部类型'
+  getMiddleBar()
+  areaRankLoading.value = true
+  getAreaRank()
+}
+// 时间范围控制
+const disabledDate = function (date) {
+  const currentDate = new Date()
+  const startDate = new Date(
+    currentDate.getFullYear(),
+    currentDate.getMonth() - 1,
+    1
+  )
+  const endDate = new Date(
+    currentDate.getFullYear(),
+    currentDate.getMonth() + 1,
+    0
+  )
+  if (date >= startDate && date <= endDate) {
+    return false
+  }
+  return true
+}
+// 本日
+const today = function () {
+  const current = new Date()
+  const startDate = new Date(
+    current.getFullYear(),
+    current.getMonth(),
+    current.getDate()
+  )
+  const endDate = new Date(
+    current.getFullYear(),
+    current.getMonth(),
+    current.getDate()
+  )
+  searchTime.value = [startDate, endDate]
+  search()
+  // console.log("searchTime", moment(searchTime.value[0]).format("YYYY-MM-DD") + "至" + moment(searchTime.value[1]).format("YYYY-MM-DD"))
+}
+// 本周
+const thisWeek = function () {
+  const current = new Date()
+  const dayOfWeek = current.getDay() // 获取今天是星期几（0 表示周日，1 表示周一，以此类推）
+  const diff = current.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1) // 计算本周第一天的日期差值
+  const startDate = new Date(current.getFullYear(), current.getMonth(), diff)
+  const endDate = new Date()
+  searchTime.value = [startDate, endDate]
+  search()
+  // console.log("searchTime", moment(searchTime.value[0]).format("YYYY-MM-DD") + "至" + moment(searchTime.value[1]).format("YYYY-MM-DD"))
+}
+// 本月
+const thisMonth = function () {
+  const current = new Date()
+  const startDate = new Date(current.getFullYear(), current.getMonth(), 1)
+  const endDate = new Date()
+  searchTime.value = [startDate, endDate]
+  search()
+  // console.log("searchTime", moment(searchTime.value[0]).format("YYYY-MM-DD") + "至" + moment(searchTime.value[1]).format("YYYY-MM-DD"))
+}
+// 本年
+const thisYear = function () {
+  const current = new Date()
+  const startDate = new Date(current.getFullYear(), 0, 1)
+  const endDate = new Date(current.getFullYear(), current.getMonth() + 1, 0)
+  const year = 1
+  searchTime.value = [startDate, endDate, year]
+  search()
+  // console.log("searchTime", moment(searchTime.value[0]).format("YYYY-MM-DD") + "至" + moment(searchTime.value[1]).format("YYYY-MM-DD"))
+}
+// 全部
+const allTime = function () {
+  searchTime.value = ['', '']
+  search()
+}
+// 时间选择器
+const changeTime = function () {
+  console.log('changeTimeRatio', changeTimeRatio.value)
+  if (changeTimeRatio.value == 'allDays') {
+    allTime()
+  } else if (changeTimeRatio.value == 'week') {
+    thisWeek()
+  } else if (changeTimeRatio.value == 'month') {
+    thisMonth()
+  } else if (changeTimeRatio.value == 'year') {
+    thisYear()
+  } else if (changeTimeRatio.value == 'day') {
+    today()
+  }
 }
 
-// 获取地区数据
-const getAreas = async () => {
-  try {
-    const result = await API({
-      url: '/recharge/user/search',
-      data: {}
-    })
-    middleCategory.value = result.data.map(item => item.name)
-    
-    // 生成表格数据（模拟）
-    tableData.value = result.data.slice(0, 11).map((item, index) => ({
-      rank: index + 1,
-      region: item.name,
-      coinAmount: Math.floor(Math.random() * 1000000) + 500000
-    }))// D老师加的这一段（？？？？？？？？？？？？？？？？）
-  } catch (error) {
-    console.error('获取地区数据失败:', error)
+// 根据时间搜索
+const search = function () {
+  console.log(
+    'searchTime',
+    moment(searchTime.value[0]).format('YYYY-MM-DD') +
+      '至' +
+      moment(searchTime.value[1]).format('YYYY-MM-DD')
+  )
+
+  getMiddleBarObj.value.searchStartTime = moment(searchTime.value[0]).format(
+    'YYYY-MM-DD'
+  )
+  getMiddleBarObj.value.searchEndTime = moment(searchTime.value[1]).format(
+    'YYYY-MM-DD'
+  )
+  if (getMiddleBarObj.value.searchStartTime == 'Invalid date') {
+    delete getMiddleBarObj.value.searchStartTime
+  }
+  if (getMiddleBarObj.value.searchEndTime == 'Invalid date') {
+    delete getMiddleBarObj.value.searchEndTime
+  }
+  console.log('getMiddleBarObj', getMiddleBarObj.value)
+
+  getAreaRankObj.value.searchStartTime = moment(searchTime.value[0]).format(
+    'YYYY-MM-DD'
+  )
+  getAreaRankObj.value.searchEndTime = moment(searchTime.value[1]).format(
+    'YYYY-MM-DD'
+  )
+  if (getAreaRankObj.value.searchStartTime == 'Invalid date') {
+    delete getAreaRankObj.value.searchStartTime
+  }
+  if (getAreaRankObj.value.searchEndTime == 'Invalid date') {
+    delete getAreaRankObj.value.searchEndTime
   }
+  console.log('getAreaRankObj', getAreaRankObj.value)
+
+  if (searchTime.value[2] == 1) {
+    getMiddleBarObj.value.year = searchTime.value[2]
+  } else {
+    delete getMiddleBarObj.value.year
+  }
+  getMiddleBar()
+  areaRankLoading.value = true
+  getAreaRank()
 }
 
-const getChartData = async () => {
-  try {
-    const params = {
-      updateType: updateType.value
-    }
-    
-    if (dateRange.value && dateRange.value.length === 2) {
-      params.searchStartTime = formatDate(dateRange.value[0])
-      params.searchEndTime = formatDate(dateRange.value[1])
-    }
-    
-    const result = await API({
-      url: '/statistics/getCoinTime',
-      data: params
-    })
-    
-    histogramData.value = result.data || []
-    
-    middleRecharge.value = histogramData.value.map(item => 
-      Math.abs(item.rechargeSumCoin || 0)
-    )
-    middleFree.value = histogramData.value.map(item => 
-      Math.abs(item.freeSumCoin || 0)
-    )
-    middleTask.value = histogramData.value.map(item => 
-      Math.abs(item.taskSumCoin || 0)
-    )
-    
-    updateChart()
-  } catch (error) {
-    console.error('请求图表数据失败:', error)
+// 切换平台
+// const changePlatform = function () {
+//   console.log('changePlatform', platform.value)
+//   if (platform.value == '全部平台') {
+//     // 基于准备好的dom，初始化echarts实例
+//     var all = echarts.init(document.getElementById('all'))
+//     const option6 = {
+//       tooltip: {
+//         trigger: 'item'
+//       },
+//       series: [
+//         {
+//           name: '四大学科类别占比',
+//           type: 'pie',
+//           radius: ['40%', '60%'],
+//           avoidLabelOverlap: false,
+//           data: allData.value
+//         }
+//       ]
+//     }
+//     // 使用刚指定的配置项和数据显示图表。
+//     all.setOption(option6)
+//   } else if (platform.value == 'ERP') {
+//     // 基于准备好的dom，初始化echarts实例
+//     var ERP = echarts.init(document.getElementById('ERP'))
+//     const option7 = {
+//       tooltip: {
+//         trigger: 'item'
+//       },
+//       series: [
+//         {
+//           name: '四大学科类别占比',
+//           type: 'pie',
+//           radius: ['40%', '60%'],
+//           avoidLabelOverlap: false,
+//           data: ERPData.value
+//         }
+//       ]
+//     }
+//     // 使用刚指定的配置项和数据显示图表。
+//     ERP.setOption(option7)
+//   } else if (platform.value == 'HC') {
+//     // 第4-3个饼状图 基于准备好的dom，初始化echarts实例
+//     var HC = echarts.init(document.getElementById('HC'))
+//     const option8 = {
+//       tooltip: {
+//         trigger: 'item'
+//       },
+//       series: [
+//         {
+//           name: '四大学科类别占比',
+//           type: 'pie',
+//           radius: ['40%', '60%'],
+//           avoidLabelOverlap: false,
+//           data: HCData.value
+//         }
+//       ]
+//     }
+//     // 使用刚指定的配置项和数据显示图表。
+//     HC.setOption(option8)
+//   } else if (platform.value == 'Link') {
+//     // 第4-4个饼状图 基于准备好的dom，初始化echarts实例
+//     var Link = echarts.init(document.getElementById('Link'))
+//     const option9 = {
+//       tooltip: {
+//         trigger: 'item'
+//       },
+//       series: [
+//         {
+//           name: '四大学科类别占比',
+//           type: 'pie',
+//           radius: ['40%', '60%'],
+//           avoidLabelOverlap: false,
+//           data: LinkData.value
+//         }
+//       ]
+//     }
+//     // 使用刚指定的配置项和数据显示图表。
+//     Link.setOption(option9)
+//   } else if (platform.value == '金币系统') {
+//     // 第4-5个饼状图 基于准备好的dom，初始化echarts实例
+//     var gold = echarts.init(document.getElementById('gold'))
+//     const option10 = {
+//       tooltip: {
+//         trigger: 'item'
+//       },
+//       series: [
+//         {
+//           name: '四大学科类别占比',
+//           type: 'pie',
+//           radius: ['40%', '60%'],
+//           avoidLabelOverlap: false,
+//           data: goldData.value
+//         }
+//       ]
+//     }
+//     // 使用刚指定的配置项和数据显示图表。
+//     gold.setOption(option10)
+//   }
+// }
+
+// 计算属性
+// 格式化数字   这是一个方法
+const formatNum = function (val) {
+  if (val === undefined) {
+    return ''
+  }
+  const num = parseFloat(val)
+  // 判断是否为整数
+  if (Number.isInteger(num)) {
+    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  } else {
+    // 四舍五入保留两位小数
+    const roundedVal = num.toFixed(2)
+    return roundedVal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
   }
 }
 
-const updateChart = () => {
-  const option = {
+function updateChart() {
+  // 第一个柱状图 基于准备好的dom，初始化echarts实例
+  rechargeBar = echarts.init(document.getElementById('recharge'))
+  const option1 = {
     tooltip: {
       trigger: 'axis',
-      axisPointer: { type: 'shadow' },
-      formatter: function (params) {
-        let total = 0
-        let content = `${params[0].name}<br/>`
-        params.forEach((param) => {
-          content += `${param.seriesName}: ${param.value.toLocaleString()}<br/>`
-          total += param.value
-        })
-        content += `总和: ${total.toLocaleString()}`
-        return content
+      axisPointer: {
+        // Use axis to trigger tooltip
+        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
       }
     },
     legend: {
-      right: '2%',
-      orient: 'vertical',
-      itemGap: 10
+      right: 0,
+      orient: 'vertical'
     },
     grid: {
       left: '3%',
-      right: '10%',
+      right: '4%',
       bottom: '3%',
       containLabel: true
     },
     xAxis: {
       type: 'category',
-      data: middleCategory.value,
-      axisLabel: {
-        interval: 0,
-        rotate: 30
-      }
+      data: middleCategory.value
     },
     yAxis: {
-      type: 'value',
-      axisLabel: {
-        formatter: (value) => value.toLocaleString()
-      }
+      type: 'value'
     },
     series: [
       {
@@ -320,6 +769,12 @@ const updateChart = () => {
         color: '#35e383',
         type: 'bar',
         stack: 'total',
+        label: {
+          show: false
+        },
+        emphasis: {
+          focus: 'series'
+        },
         data: middleRecharge.value
       },
       {
@@ -327,6 +782,12 @@ const updateChart = () => {
         color: '#5f8ff5',
         type: 'bar',
         stack: 'total',
+        label: {
+          show: false
+        },
+        emphasis: {
+          focus: 'series'
+        },
         data: middleFree.value
       },
       {
@@ -334,91 +795,454 @@ const updateChart = () => {
         color: '#ffe733',
         type: 'bar',
         stack: 'total',
+        label: {
+          show: false
+        },
+        emphasis: {
+          focus: 'series'
+        },
         data: middleTask.value
       }
     ]
   }
-  
-  if (activeTab.value === 'recharge' && rechargeBar) {
-    rechargeBar.setOption(option)
-    rechargeBar.resize()
-  } else if (consumeBar) {
-    consumeBar.setOption(option)
-    consumeBar.resize()
-  }
+  // 使用刚指定的配置项和数据显示图表。
+  rechargeBar.setOption(option1)
 }
+onMounted(async function () {
+  await get()
+  updateChart()
+})
+</script>
 
-const initCharts = () => {
-  const rechargeDom = document.getElementById('recharge')
-  const consumeDom = document.getElementById('consume')
-  
-  if (rechargeDom) {
-    rechargeBar = echarts.init(rechargeDom)
-  }
-  
-  if (consumeDom) {
-    consumeBar = echarts.init(consumeDom)
-  }
+<template>
+  <div v-loading="loading">
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <el-card style="height: 260px">
+          <p>当前金币余量</p>
+          <p class="head-mid-font">
+            {{ formatNum(oneData.sumgold / 100) }}
+          </p>
+          <p>
+            <span v-if="oneData.differr > 0">
+              <div class="comparedWithYesterday">
+                <span>较前一天 {{ formatNum(oneData.differr / 100) }}</span>
+                <span
+                  class="red-triangle"
+                  style="margin: 6px 0px 0px 7px"
+                ></span>
+              </div>
+            </span>
+            <span v-if="oneData.differr < 0">
+              <div class="comparedWithYesterday">
+                <span>较前一天 {{ formatNum(oneData.differr / 100) }}</span>
+                <span
+                  class="green-triangle"
+                  style="margin: 6px 0px 0px 7px"
+                ></span>
+              </div>
+            </span>
+            <span v-if="oneData.differr == 0">
+              <div class="comparedWithYesterday">
+                <span>较前一天 {{ formatNum(oneData.differr / 100) }}</span>
+                <span
+                  class="grey-triangle"
+                  style="margin: 6px 0px 0px 7px"
+                ></span>
+              </div>
+            </span>
+          </p>
+          <template #footer>
+            <span style="font-size: 15px"
+              >永久{{ formatNum(oneData.rechargegold / 100) }} 免费{{
+                formatNum(oneData.freegold / 100)
+              }}
+              任务{{ formatNum(oneData.taskgold / 100) }}
+            </span>
+            <p style="font-size: 12px">
+              免费金币：6月到期 |
+              {{ formatNum(oneData.sfreegold / 100) }} ; 12月到期 |
+              {{ formatNum(oneData.dfreegold / 100) }}
+            </p>
+          </template>
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card style="height: 260px">
+          <p>全年累计金币数</p>
+          <p class="head-mid-font">
+            {{ formatNum(Math.abs(twoData.totalgold / 100)) }}
+          </p>
+          <p>
+            折合新币累计金额
+            {{ formatNum(Math.abs(twoData.totalcoin / 100)) }}
+          </p>
+          <template #footer
+            >昨日新增
+            {{ formatNum(Math.abs(twoData.yesterdaytotal / 100)) }}
+            ，其中充值{{
+              formatNum(Math.abs(twoData.yesterdayrecharge / 100))
+            }}</template
+          >
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card style="height: 260px">
+          <p>全年累计消耗金币数</p>
+          <p class="head-mid-font">
+            {{
+              formatNum(
+                Math.abs((threeData.consumeGold + threeData.refundCoin) / 100)
+              )
+            }}
+          </p>
+          <p>
+            消费
+            {{ formatNum(Math.abs(threeData.consumeGold / 100)) }}; 退款
+            {{ formatNum(Math.abs(threeData.refundCoin / 100)) }}
+          </p>
+          <template #footer
+            >昨日新增消耗{{
+              formatNum(
+                Math.abs(
+                  threeData.yesterdayGold + threeData.yesterdayrefund !==
+                    undefined &&
+                    threeData.yesterdayGold + threeData.yesterdayrefund !== null
+                    ? (threeData.yesterdayGold + threeData.yesterdayrefund) /
+                        100
+                    : 0
+                )
+              )
+            }}
+            ; 消费{{
+              formatNum(
+                Math.abs(
+                  threeData.yesterdayGold !== undefined &&
+                    threeData.yesterdayGold !== null
+                    ? threeData.yesterdayGold / 100
+                    : 0
+                )
+              )
+            }}
+            ; 退款{{
+              formatNum(
+                Math.abs(
+                  threeData.yesterdayrefund !== undefined &&
+                    threeData.yesterdayrefund !== null
+                    ? threeData.yesterdayrefund / 100
+                    : 0
+                )
+              )
+            }}</template
+          >
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card style="height: 260px">
+          <p>全年累计充值人数</p>
+          <p class="head-mid-font">
+            {{ formatNum(Math.abs(statistics.rechargeCount)) }}
+          </p>
+          <p style="display: flex">
+            <span v-if="statistics.weekOverWeekRate > 0">
+              <div class="comparedWithYesterday">
+                <span>周同比 {{ statistics.weekOverWeekRate }}%</span>
+                <span
+                  class="red-triangle"
+                  style="margin: 6px 0px 0px 7px"
+                ></span>
+              </div>
+            </span>
+            <span v-if="statistics.weekOverWeekRate < 0">
+              <div class="comparedWithYesterday">
+                <span>周同比 {{ statistics.weekOverWeekRate }}%</span>
+                <span
+                  class="green-triangle"
+                  style="margin: 6px 0px 0px 7px"
+                ></span>
+              </div>
+            </span>
+            <span v-if="statistics.weekOverWeekRate == 0">
+              <div class="comparedWithYesterday">
+                <span>周同比 {{ statistics.weekOverWeekRate }}%</span>
+                <span
+                  class="grey-triangle"
+                  style="margin: 6px 0px 0px 7px"
+                ></span>
+              </div>
+            </span>
+            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+            <span v-if="statistics.dayOverDayRate > 0">
+              <div class="comparedWithYesterday">
+                <span> 日环比{{ statistics.dayOverDayRate }}%</span>
+                <span
+                  class="red-triangle"
+                  style="margin: 6px 0px 0px 7px"
+                ></span>
+              </div>
+            </span>
+            <span v-if="statistics.dayOverDayRate < 0">
+              <div class="comparedWithYesterday">
+                <span> 日环比{{ statistics.dayOverDayRate }}%</span>
+                <span
+                  class="green-triangle"
+                  style="margin: 6px 0px 0px 7px"
+                ></span>
+              </div>
+            </span>
+            <span v-if="statistics.dayOverDayRate == 0">
+              <div class="comparedWithYesterday">
+                <span> 日环比{{ statistics.dayOverDayRate }}%</span>
+                <span
+                  class="grey-triangle"
+                  style="margin: 6px 0px 0px 7px"
+                ></span>
+              </div>
+            </span>
+          </p>
+          <template #footer
+            >昨日充值人数{{
+              formatNum(Math.abs(statistics.rechargeCountYesterday))
+            }}
+            ，其中首充{{
+              formatNum(Math.abs(statistics.firstRechargeCountYesterday))
+            }}人</template
+          >
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20">
+      <el-col>
+        <el-card>
+          <div style="margin-right: auto; text-align: right">
+            <el-radio-group
+              v-model="changeTimeRatio"
+              style="margin-right: 10px"
+              @change="changeTime()"
+            >
+              <el-radio-button
+                label="全部"
+                value="allDays"
+                style="border-color: white"
+              />
+              <el-radio-button
+                label="本日"
+                value="day"
+                style="border-color: white"
+              />
+              <el-radio-button
+                label="本周"
+                value="week"
+                style="border-color: white"
+              />
+              <el-radio-button
+                label="本月"
+                value="month"
+                style="border-color: white"
+              />
+              <el-radio-button
+                label="本年"
+                value="year"
+                style="border-color: white"
+              />
+            </el-radio-group>
+            <!-- <el-button text @click="allTime()" dark=true>全部</el-button>
+            <el-button text @click="today()">今日</el-button>
+            <el-button text @click="thisWeek()">本周</el-button>
+            <el-button text @click="thisMonth()">本月</el-button>
+            <el-button text @click="thisYear()">本年</el-button> -->
+            <el-date-picker
+              v-model="searchTime"
+              type="daterange"
+              range-separator="→"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              style="width: 200px"
+              :disabled-date="disabledDate"
+              @change="search"
+            />
+          </div>
+
+          <el-tabs
+            v-model="activeName"
+            class="demo-tabs"
+            @tab-change="handleChange"
+          >
+            <el-tab-pane label="金币充值" name="recharge">
+              <div>
+                合计：永久金币：
+                <span class="mid-head-font">{{
+                  formatNum(middleTotalRecharge)
+                }}</span>
+                ，免费金币：
+                <span class="mid-head-font">{{
+                  formatNum(middleTotalFree)
+                }}</span>
+                ，任务金币：
+                <span class="mid-head-font">{{
+                  formatNum(middleTotalTask)
+                }}</span>
+              </div>
+              <div class="bar">
+                <div id="recharge" style="width: 100%; height: 400px"></div>
+
+                <div style="width: 30%">
+                  <div class="ranking-header">
+                    <span style="width: 150px">地区金币充值排名</span>
+                    <el-select
+                      v-model="goldType"
+                      placeholder="请选择金币类型"
+                      size="small"
+                      style="margin-left: auto; width: 25%"
+                      @change="changeGoldType"
+                    >
+                      <el-option
+                        v-for="item in gold"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </div>
+                  <div v-loading="areaRankLoading">
+                    <el-scrollbar height="360px">
+                      <div
+                        v-for="(item, index) in areaRank"
+                        :key="item"
+                        class="ranking-item"
+                      >
+                        <!-- <component :is="findBsComponent(index)" /> -->
+                        <span style="width: 15px; text-align: center">{{
+                          index + 1
+                        }}</span>
+                        <span style="margin-left: 10px">{{ item.name }}</span>
+                        <span style="margin-left: auto; margin-right: 10px">{{
+                          formatNum(item.value)
+                        }}</span>
+                      </div>
+                    </el-scrollbar>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="金币消费" name="consume">
+              <div>
+                合计：永久金币：
+                <span class="mid-head-font">{{
+                  formatNum(middleTotalRecharge)
+                }}</span>
+                ，免费金币：
+                <span class="mid-head-font">{{
+                  formatNum(middleTotalFree)
+                }}</span>
+                ，任务金币：
+                <span class="mid-head-font">{{
+                  formatNum(middleTotalTask)
+                }}</span>
+              </div>
+              <div class="bar">
+                <div id="consume" style="width: 100%; height: 400px"></div>
+
+                <div style="width: 310px">
+                  <div class="ranking-header">
+                    <span style="margin-right: 90px; width: 150px"
+                      >地区金币消费排名</span
+                    >
+                    <el-select
+                      v-model="goldType"
+                      placeholder="请选择金币类型"
+                      size="small"
+                      style="width: 90px"
+                      @change="changeGoldType"
+                    >
+                      <el-option
+                        v-for="item in gold"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
+                    </el-select>
+                  </div>
+                  <div v-loading="areaRankLoading">
+                    <el-scrollbar height="360px">
+                      <div
+                        v-for="(item, index) in areaRank"
+                        :key="item"
+                        class="ranking-item"
+                      >
+                        <!-- <component :is="findBsComponent(index)" /> -->
+                        <span style="width: 15px; text-align: center">{{
+                          index + 1
+                        }}</span>
+                        <span style="margin-left: 10px">{{ item.name }}</span>
+                        <span style="margin-left: auto; margin-right: 10px">{{
+                          formatNum(item.value)
+                        }}</span>
+                      </div>
+                    </el-scrollbar>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<style scoped>
+.medium-button {
+  display: flex;
 }
 
-const loadChart = async () => {
-  await getAreas()
-  await getChartData()
+.head-mid-font {
+  font-size: 20px;
+  font-weight: bold;
 }
 
-// 页面切换
-const handleTabChange = (tab) => {
-  updateType.value = tab === 'recharge' ? 0 : 1
-  loadChart()
+.mid-head-font {
+  font-weight: bold;
+  color: #5eb7ff;
 }
 
-const handleResize = () => {
-  if (rechargeBar) rechargeBar.resize()
-  if (consumeBar) consumeBar.resize()
+.tail-head {
+  font-weight: bold;
 }
 
-onMounted(() => {
-  initCharts()
-  loadChart()
-  window.addEventListener('resize', handleResize)
-})
+.comparedWithYesterday {
+  display: flex;
+}
 
-onBeforeUnmount(() => {
-  if (rechargeBar) rechargeBar.dispose()
-  if (consumeBar) consumeBar.dispose()
-  window.removeEventListener('resize', handleResize)
-})
-</script>
+.ranking-item {
+  margin-bottom: 10px;
+  display: flex;
+}
 
-<style scoped>
-.center-card {
+.ranking-header {
+  margin-bottom: 10px;
   display: flex;
-  justify-content: center;
-  align-items: center;
 }
 
-.margin-bottom {
-  margin-bottom: 5px;
+.goldCategory {
+  margin-bottom: 4px;
+  margin-right: 20px;
+  display: flex;
 }
 
-.card-item {
-  width: 24%;
-  height: 260px;
-  margin-right: 10px;
+.bar {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
 }
 
-.card-title {
-  font-weight: bold;
-  margin-bottom: 10px;
+.pie {
   display: flex;
-  justify-content: center;
-  align-items: center;
 }
 
-.margin-top{
-  margin-top: 5px;
+.el-row {
+  margin-bottom: 20px;
+}
+
+.el-radio-button {
+  border: 1px solid grey;
 }
-</style>
\ No newline at end of file
+</style>