From 3ebc5d34832e43a10def4f1fb46e2d315b45d38f Mon Sep 17 00:00:00 2001
From: zry <18990852002@163.com>
Date: Fri, 27 Jun 2025 18:13:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=85=E5=80=BC=E3=80=81=E9=80=80=E6=AC=BE?=
 =?UTF-8?q?=E9=83=BD=E6=8D=A2=E6=88=90=E4=BA=86=E8=B7=AF=E7=94=B1=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=EF=BC=8C=E6=9D=83=E9=99=90=E6=94=B9=E4=BA=86=E4=B8=80?=
 =?UTF-8?q?=E4=BA=9B=EF=BC=8C=E5=AE=A2=E6=88=B7=E8=B4=A6=E6=88=B7=E6=98=8E?=
 =?UTF-8?q?=E7=BB=86=E3=80=81=E4=BD=99=E9=A2=9D=E5=9F=BA=E6=9C=AC=E6=97=A0?=
 =?UTF-8?q?=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                          |    2 +
 src/router/index.js                       |   24 +-
 src/views/consume/addCoinConsume.vue      |    3 +-
 src/views/permissions/index.vue           |    4 +-
 src/views/permissions/permission.vue      |  954 ++++++++++++
 src/views/recharge/addCoinRecharge.vue    | 1604 ++++++++++++++++++++
 src/views/recharge/coinRecharge.vue       | 2248 +----------------------------
 src/views/recharge/coinRechargeDetail.vue |  770 ++++++++++
 src/views/refund/addCoinRefund.vue        |  546 +++++++
 src/views/refund/coinRefund.vue           | 1345 +----------------
 src/views/refund/coinRefundDetail.vue     |  735 ++++++++++
 src/views/usergold/clientCountBalance.vue |   90 +-
 src/views/usergold/clientCountDetail.vue  |  331 +----
 13 files changed, 4738 insertions(+), 3918 deletions(-)
 create mode 100644 src/views/permissions/permission.vue
 create mode 100644 src/views/recharge/addCoinRecharge.vue
 create mode 100644 src/views/recharge/coinRechargeDetail.vue
 create mode 100644 src/views/refund/addCoinRefund.vue
 create mode 100644 src/views/refund/coinRefundDetail.vue

diff --git a/.env.development b/.env.development
index b17f756..cec78c3 100644
--- a/.env.development
+++ b/.env.development
@@ -4,3 +4,5 @@
 # VITE_API_BASE='http://54.251.137.151:10704/'
 # VITE_API_BASE='http://192.168.8.225:8080/'
 VITE_API_BASE='http://192.168.8.94:8080/'
+# VITE_API_BASE='http://192.168.8.247:8080/'
+
diff --git a/src/router/index.js b/src/router/index.js
index 222fbd7..94c51e8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -19,7 +19,7 @@ const router = createRouter({
                 { path: '/refundAudit', name: "refundAudit", component: () => import("../views/audit/refundAudit.vue") },
                 // 金币消耗
                 { path: '/coinConsume', name: "coinConsume", component: () => import("../views/consume/coinConsume.vue"),
-                    redirect: '/coinConsume/add',// 重定向到新增页面
+                    redirect: '/coinConsume/add',// 重定向到新增消耗页面
                     children: [
                         // 金币新增消耗
                         { path: 'add', name: "addCoinConsume", component: () => import("../views/consume/addCoinConsume.vue") },
@@ -32,11 +32,27 @@ const router = createRouter({
                 // 汇率管理
                 { path: '/rate', name: "rate", component: () => import("../views/managerecharge/rate.vue") },
                 // 金币充值
-                { path: '/coinRecharge', name: "coinRecharge", component: () => import("../views/recharge/coinRecharge.vue") },
+                { path: '/coinRecharge', name: "coinRecharge", component: () => import("../views/recharge/coinRecharge.vue"),
+                    redirect: '/coinRecharge/add',// 重定向到新增充值页面
+                    children: [
+                        // 金币新增充值
+                        { path: 'add', name: "addCoinRecharge", component: () => import("../views/recharge/addCoinRecharge.vue") },
+                        // 金币充值明细详情
+                        { path: 'detail', name: "coinRechargeDetail", component: () => import("../views/recharge/coinRechargeDetail.vue") }
+                    ]
+                },
                 // 金豆充值
                 { path: '/beanRecharge', name: "beanRecharge", component: () => import("../views/recharge/beanRecharge.vue") },
                 // 金币退款
-                { path: '/coinRefund', name: "coinRefund", component: () => import("../views/refund/coinRefund.vue") },
+                { path: '/coinRefund', name: "coinRefund", component: () => import("../views/refund/coinRefund.vue"),
+                    redirect: '/coinRefund/add',// 重定向到新增退款页面
+                    children: [
+                        // 金币新增消耗
+                        { path: 'add', name: "addCoinRefund", component: () => import("../views/refund/addCoinRefund.vue") },
+                        // 金币消耗明细详情
+                        { path: 'detail', name: "coinRefundDetail", component: () => import("../views/refund/coinRefundDetail.vue") }
+                    ]
+                 },
                 // 金豆退款
                 { path: '/beanRefund', name: "beanRefund", component: () => import("../views/refund/beanRefund.vue") },
                 // 客户账户明细
@@ -50,7 +66,7 @@ const router = createRouter({
                     ]
                  },
                 // 权限管理
-                { path: '/permissions', name: "permissions", component: () => import("../views/permissions/index.vue") },
+                { path: '/permissions', name: "permissions", component: () => import("../views/permissions/permission.vue") },
                 // 没有权限
                 { path: '/noPermission', name: "noPermission", component: () => import("../views/noPermissionPage.vue") }
             ]
diff --git a/src/views/consume/addCoinConsume.vue b/src/views/consume/addCoinConsume.vue
index d1c3cdc..c3cfc52 100644
--- a/src/views/consume/addCoinConsume.vue
+++ b/src/views/consume/addCoinConsume.vue
@@ -308,7 +308,8 @@ const getUser = async function (jwcode) {
   try {
     // 发送POST请求
     const result = await request({
-      url: "user/selectUser",
+      // url: "user/selectUser",
+      url: "http://192.168.8.247:8081/user/selectUser",
       data: {
         // 只需要传精网号
         jwcode: addConsume.value.jwcode,
diff --git a/src/views/permissions/index.vue b/src/views/permissions/index.vue
index fa5ed0a..6153e5c 100644
--- a/src/views/permissions/index.vue
+++ b/src/views/permissions/index.vue
@@ -9,12 +9,12 @@ import { UserFilled } from '@element-plus/icons-vue'
 import _ from 'lodash'
 import request from '@/util/http'
 
-// 充值明细表格
+// 客户明细表格
 const tableData = ref([])
 // 搜索===========================================
 //分页总条目
 const total = ref(100)
-// 搜索detailY
+// 搜索admin
 const admin = ref({})
 // 搜索对象
 const getObj = ref({
diff --git a/src/views/permissions/permission.vue b/src/views/permissions/permission.vue
new file mode 100644
index 0000000..32ca8ae
--- /dev/null
+++ b/src/views/permissions/permission.vue
@@ -0,0 +1,954 @@
+<script setup>
+import { ref, onMounted, reactive, computed } from 'vue'
+import ElementPlus from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import axios from 'axios'
+import moment from 'moment'
+import { ta } from 'element-plus/es/locales.mjs'
+import { UserFilled } from '@element-plus/icons-vue'
+import _ from 'lodash'
+import request from '@/util/http'
+
+// 客户明细表格
+const tableData = ref([])
+// 搜索===========================================
+//分页总条目
+const total = ref(100)
+// 搜索admin
+const admin = ref({})
+// 搜索对象
+const getObj = ref({
+  pageNum: 1,
+  pageSize: 10
+})
+// 新增用户权限弹窗
+const permissionAddVisible = ref(false)
+// 编辑用户权限弹窗
+const permissionEditVisible = ref(false)
+//选地区
+const market = ref([])
+// 选部门
+const postiton = ref([])
+// 新增用户权限对象
+const permissionAddObj = ref({})
+// 新增用户权限对象，机器码要实现存储多个，addMachineIdInput方法实现
+const addAdmin = ref({ 
+    account: '',
+    name: '',
+    market: '',
+    permission: '',
+    postiton: '',
+    machineId: '', // 初始机器码输入框
+    machineIds: [], // 动态添加的机器码输入框
+    remark: ''
+})
+const addMachineIdInput = function () {
+  if (addAdmin.value.machineIds.length >= 1) {
+    ElMessage.warning('设备数量已达上限')
+    return
+  }
+  addAdmin.value.machineIds.push('')
+}
+
+// 编辑用户权限对象
+const permissionEditObj = ref({})
+// 删除权限对象
+const delObj = ref({})
+
+// 搜索接口search
+const get = async function (val) {
+  try {
+    // 搜索参数页码赋值
+    if (typeof val === 'number') {
+      getObj.value.pageNum = val
+    }
+    console.log('搜索参数', getObj.value)
+    // 发送POST请求
+    const result = await request({
+      url: '/admin/search',
+      data: {
+        ...getObj.value,
+        admin: { ...admin.value }
+      }
+    })
+    tableData.value = result.data.list
+    console.log('tableData', tableData.value)
+    total.value = result.data.total
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+// 精网号去空格
+const trimJwCode = () => {
+  if (admin.value.account) {
+    admin.value.account = admin.value.account.replace(/\s/g, ''); 
+  }
+}  
+// 搜索
+const search = function () {
+  trimJwCode();
+  getObj.value.pageNum = 1
+  get()
+}
+// 重置
+const reset = function () {
+  admin.value = {}
+//   addAdmin.value = {}//用在新增表单的重置方法，但现在采用Ref.value.resetFields()方法，不需要reset
+}
+
+// 获取地区
+const getArea = async function () {
+  try {
+    const result = await request({
+      url: '/admin/market',
+      data: {}
+    })
+    market.value = result.data
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// 获取部门
+const getStore = async function () {
+  try {
+    const result = await request({
+      url: '/admin/postiton',
+      data: {}
+    })
+    postiton.value = result.data
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+// 验证跳转输入框的数字是否合法
+const checkNumber = function () {
+  if (typeof parseInt(getObj.value.pageNum) === 'number') {
+    console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
+    if (
+      getObj.value.pageNum > 0 &&
+      getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
+    ) {
+      getObj.value.pageNum = parseInt(getObj.value.pageNum)
+      console.log('输入的数字合法')
+      get()
+    } else {
+      //提示
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      })
+    }
+  } else {
+    //提示
+    ElMessage({
+      type: 'error',
+      message: '请检查输入内容'
+    })
+  }
+}
+
+// 打开新增用户权限弹窗
+const openPermissionAddVisible = function () {
+  permissionAddVisible.value = true
+}
+// 关闭新增用户权限弹窗，并刷新表单
+const closePermissionAddVisible = function () {
+    // reset() ，下面这个方法还可以重置表单验证（请输入...），reset只能重置输入，修改reset方法
+    // 重置表单数据
+    addAdmin.value = {
+    account: '',
+    name: '',
+    market: '',
+    permission: '',
+    postiton: '',
+    machineId: '', 
+    machineIds: [], 
+    remark: ''
+  };
+  permissionAddVisible.value = false;
+  // 清除表单验证状态
+  
+    Ref.value.resetFields();
+  
+}
+// 新增用户权限初始化
+const permissionAddInit = function () {
+  permissionAddObj.value = {}
+  openPermissionAddVisible()
+}
+// 通过精网号查询没有权限的用户
+const getAdminByJwcodeWithoutPermission = async function () {
+  try {
+    const result = await request({
+      url: '/admin/selectNo',
+      data: permissionAddObj.value
+    })
+    if (result.code == 200) {
+      permissionAddObj.value = result.data[0]
+      ElMessage.success('精网号查询成功')
+    } else {
+      ElMessage.error(result.msg)
+    }
+    console.log('精网号查询没有权限的用户', permissionAddObj.value)
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// 新增用户权限提交
+// const permissionAdd = async function () {
+//   try {
+//     if (
+//       permissionAddObj.value.account == "" ||
+//       permissionAddObj.value.account == null ||
+//       permissionAddObj.value.name == "" ||
+//       permissionAddObj.value.name == null
+//     ) {
+//       ElMessage.error("请选择要添加权限的用户");
+//       return;
+//     }
+//     if (
+//       permissionAddObj.value.permisson == "" ||
+//       permissionAddObj.value.permission == null
+//     ) {
+//       ElMessage.error("请选择权限");
+//       return;
+//     }
+//     console.log("新增用户权限提交", permissionAddObj.value);
+
+//     const result = await request(
+//       {
+// url: "/admin/update",
+//       data: permissionAddObj.value}
+//     );
+
+//     // 将响应结果存储到响应式数据中
+//     console.log("请求成功", result);
+
+//     ElMessage.success("添加成功");
+
+//     get();
+
+//     closePermissionAddVisible();
+//   } catch (error) {
+//     console.log("新增用户权限失败", error);
+//     // 在这里可以处理错误逻辑，比如显示错误提示等
+
+//     ElMessage.error("新增用户权限失败");
+//     closePermissionAddVisible();
+//   }
+// };
+const permissionAdd = async function () {
+  Ref.value.validate(async (valid) => {
+    console.log('valid', valid)
+    if (valid) {
+      try {
+        addAdmin.value.adminFlag = 1
+        addAdmin.value.status1 = 1
+        const result = await request({
+          url: '/admin/add',
+          data: addAdmin.value
+        })
+
+        if (result.code == 200) {
+          ElMessage.success('添加成功')
+        } else {
+          ElMessage.error(result.msg)
+        }
+
+        addAdmin.value = {}
+        get()
+
+        closePermissionAddVisible()
+      } catch (error) {
+        console.log('新增用户权限失败', error)
+        // 在这里可以处理错误逻辑，比如显示错误提示等
+
+        ElMessage.error('新增用户权限失败')
+        closePermissionAddVisible()
+      }
+    } else {
+      //提示
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      })
+    }
+  })
+}
+// 表格添加的条件
+const rules = reactive({
+  account: [{ required: true, message: '请输入OA号', trigger: 'blur' }],
+  name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+  postiton: [{ required: true, message: '请输入职称', trigger: 'blur' }],
+  machineId: [{ required: true, message: '请输入机器码', trigger: 'blur' }],
+  market: [{ required: true, message: '请选择所属地区', trigger: 'blur' }],
+  permission: [{ required: true, message: '请选择权限', trigger: 'blur' }]
+})
+// 验证表单
+// 表单验证ref
+const Ref = ref(null)
+// 使用 _.throttle 并设置 trailing 为 false 实现严格节流，只执行一次
+const throttledPermissionAdd = _.throttle(permissionAdd, 5000, {
+  trailing: false
+})
+// 权限类别
+const permissionList = [
+  {
+    label: '总部',
+    value: '1'
+  },
+  {
+    label: '地区经理',
+    value: '5'
+  },
+  {
+    label: '财务',
+    value: '3'
+  },
+  {
+    label: '客服',
+    value: '2'
+  }
+]
+// 获取地区
+// 获取地区
+const areaList = ref([])
+const getAreas = async function () {
+  try {
+    // 发送POST请求
+    const result = await request({
+      url: '/recharge/user/search',
+      data: {}
+    })
+
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 存储地区信息
+    areaList.value = result.data
+    console.log('地区', market.value)
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+getAreas()
+// 打开编辑用户权限弹窗
+const openPermissionEditVisible = function () {
+  permissionEditVisible.value = true
+}
+// 关闭编辑用户权限弹窗
+const closePermissionEditVisible = function () {
+  permissionEditVisible.value = false
+}
+// 编辑用户权限初始化
+const permissionEditInit = function (row) {
+  permissionEditObj.value = {}
+  permissionEditObj.value.account = row.account
+  permissionEditObj.value.name = row.name
+  permissionEditObj.value.market = row.market
+  permissionEditObj.value.postiton = row.postiton
+  permissionEditObj.value.permission = row.permission
+  console.log('编辑用户权限', permissionEditObj.value)
+  openPermissionEditVisible()
+}
+// 编辑用户权限提交
+const permissionEdit = async function () {
+  try {
+    const result = await request({
+      url: '/admin/update',
+      data: permissionEditObj.value
+    })
+
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+
+    ElMessage.success('编辑用户权限成功')
+
+    get()
+
+    closePermissionEditVisible()
+  } catch (error) {
+    console.log('编辑用户权限失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+    ElMessage.error('编辑用户权限失败')
+
+    closePermissionEditVisible()
+  }
+}
+const throttledPermissionEdit = _.throttle(permissionEdit, 5000, {
+  trailing: false
+})
+// 删除初始化
+const del = function (row) {
+  delObj.value = {}
+  console.log(row, '删除初始化')
+  delObj.value.account = row.account
+}
+// 删除权限
+const delConfirm = async function () {
+  try {
+    delObj.value.permission = '4'
+    console.log(delObj.value)
+
+    const result = await request({
+      url: '/admin/update',
+      data: delObj.value
+    })
+
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+
+    ElMessage.success('删除权限成功')
+    delObj.value = {}
+    get()
+  } catch (error) {
+    console.log('删除权限失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+    ElMessage.error('删除权限失败')
+  }
+}
+// 禁用启用用户权限
+const editStatus = async function (row) {
+  try {
+    console.log(row)
+
+    permissionEditObj.value = {}
+    permissionEditObj.value.account = row.account
+    permissionEditObj.value.status1 = row.status1
+
+    console.log('修改用户权限状态', permissionEditObj.value)
+
+    const result = await request({
+      url: '/admin/update',
+      data: permissionEditObj.value
+    })
+
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+
+    ElMessage.success(
+      permissionEditObj.value.status1 == 1 ? '启用成功' : '禁用成功'
+    )
+    permissionEditObj.value = {}
+    get()
+  } catch (error) {
+    console.log('修改用户权限失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+// 挂载
+onMounted(async function () {
+  await get()
+  await getArea()
+  await getStore()
+})
+const handlePageSizeChange = function (val) {
+  getObj.value.pageSize = val
+  get()
+}
+const handleCurrentChange = function (val) {
+  getObj.value.pageNum = val
+  get()
+}
+</script>
+
+<template>
+  <el-row>
+    <el-col>
+      <el-card style="margin-bottom: 20px">
+        <div class="head-card">
+          <div class="head-card-element">
+            <el-text class="mx-1" size="large">OA号：</el-text>
+            <el-input
+              v-model="admin.account"
+              style="width: 240px"
+              placeholder="请输入OA号"
+              clearable
+            />
+          </div>
+          <div class="head-card-element" style="margin-left: 50px">
+            <el-text class="mx-1" size="large">所属地区：</el-text>
+            <el-select
+              v-model="admin.market"
+              placeholder="请选择所属地区"
+              style="width: 240px"
+              clearable
+            >
+              <el-option
+                v-for="item in market"
+                :key="item"
+                :label="item"
+                :value="item"
+              />
+            </el-select>
+          </div>
+
+          <div class="head-card-element" style="margin-left: 50px">
+            <el-text class="mx-1" size="large">职位名称：</el-text>
+            <el-select
+              v-model="admin.postiton"
+              placeholder="请选择职位名称"
+              style="width: 240px"
+              clearable
+            >
+              <el-option
+                v-for="item in postiton"
+                :key="item"
+                :label="item"
+                :value="item"
+              />
+            </el-select>
+          </div>
+
+          <div class="head-card-btn">
+            <el-button type="success" @click="reset()">重置</el-button>
+            <el-button type="primary" @click="search()">查询</el-button>
+          </div>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+  <el-row>
+    <el-col>
+      <el-card>
+        <!-- 添加 -->
+        <div class="add-item">
+          <el-button
+            style="color: #048efb; border: 1px solid #048efb"
+            @click="permissionAddInit()"
+            >新增用户</el-button
+          >
+        </div>
+
+        <div>
+          <el-table :data="tableData" style="width: 100%">
+            <el-table-column
+              type="index"
+              label="序号"
+              width="100px"
+              fixed="left"
+            >
+              <template #default="scope">
+                <span>{{
+                  scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
+                }}</span>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="account" label="OA号" />
+            <el-table-column prop="name" label="姓名" />
+            <el-table-column prop="market" label="所属地区" />
+            <el-table-column prop="postiton" label="职位" />
+            <el-table-column prop="permission" label="部门权限">
+              <template #default="scope">
+                <span v-if="scope.row.permission === '1'"> 总部管理员 </span>
+                <span v-if="scope.row.permission === '2'"> 分部财务 </span>
+                <span v-if="scope.row.permission === '3'"> 分部客服 </span>
+                <span v-if="scope.row.permission === '5'"> 分部经理 </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="remark" label="备注" />
+            <el-table-column prop="operation" label="操作" width="200px">
+              <template #default="scope">
+                <el-button
+                  type="warning"
+                  text
+                  @click="permissionEditInit(scope.row)"
+                  :disabled="scope.row.status1 === 0"
+                >
+                  修改权限
+                </el-button>
+                <el-popconfirm
+                  title="确定将此用户删除吗？"
+                  @confirm="delConfirm"
+                >
+                  <template #reference>
+                    <el-button
+                      type="danger"
+                      text
+                      @click="del(scope.row)"
+                      :disabled="scope.row.status1 === 0"
+                    >
+                      删除
+                    </el-button>
+                  </template>
+                  <template #actions="{ confirm, cancel }">
+                    <el-button size="small" @click="cancel">取消</el-button>
+                    <el-button type="primary" size="small" @click="confirm">
+                      确定
+                    </el-button>
+                  </template>
+                </el-popconfirm>
+              </template>
+            </el-table-column>
+            <el-table-column prop="status1" label="状态">
+              <template #default="scope">
+                <el-switch
+                  v-model="scope.row.status1"
+                  :active-value="1"
+                  :inactive-value="0"
+                  size="large"
+                  @change="editStatus(scope.row)"
+                  style="
+                    --el-switch-on-color: #13ce66;
+                    --el-switch-off-color: #ff4949;
+                  "
+                  active-text="启用"
+                  inactive-text="禁用"
+                  inline-prompt
+                />
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
+        <!-- 分页 -->
+        <div class="pagination" style="margin-top: 20px">
+          <el-pagination
+            background
+            :page-size="getObj.pageSize"
+            :page-sizes="[5, 10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            @size-change="handlePageSizeChange"
+            @current-change="handleCurrentChange"
+          ></el-pagination>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+  <!-- 新增用户权限 -->
+  <el-dialog
+    v-model="permissionAddVisible"
+    title="新增用户权限"
+    width="800px"
+    :close-on-click-modal="false"
+  >
+    <template #footer>
+      <!-- 居中显示 -->
+
+      <el-form
+        ref="Ref"
+        :rules="rules"
+        :model="addAdmin"
+        label-width="auto"
+        style="max-width: 600px; align-items: center"
+      >
+        <el-form-item prop="account" label="OA号:">
+          <el-input
+            v-model="addAdmin.account"
+            placeholder="请输入OA号"
+            style="width: 220px"
+          />
+        </el-form-item>
+
+        <el-form-item prop="name" label="用户名:">
+          <el-input
+            v-model="addAdmin.name"
+            placeholder="请输入用户名"
+            style="width: 220px"
+          />
+        </el-form-item>
+
+        <el-form-item prop="market" label="所属地区:">
+          <el-select
+            v-model="addAdmin.market"
+            placeholder="请选择所属地区"
+            style="width: 220px"
+            @change="() => Ref.value.validateField('market')"
+          >
+            <el-option
+              v-for="item in areaList"
+              :key="item"
+              :label="item"
+              :value="item"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="permission" label="权限类别:">
+          <el-select
+            v-model="addAdmin.permission"
+            placeholder="请选择权限"
+            style="width: 220px"
+            @change="() => Ref.value.validateField('permission')"
+          >
+            <el-option
+              v-for="item in permissionList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="postiton" label="职位:">
+          <el-input
+            v-model="addAdmin.postiton"
+            placeholder="请输入职称"
+            style="width: 220px"
+          />
+        </el-form-item>
+        <el-form-item prop="machineId" label="机器码:">
+        <div style="display: flex; align-items: center; flex-wrap: wrap;">
+          <el-input
+            v-model="addAdmin.machineId"
+            placeholder="请输入机器码"
+            style="width: 220px; margin-right: 10px;"
+          />
+          <el-button type="primary" @click="addMachineIdInput">添加</el-button>
+          <!-- 动态添加的机器码输入框 -->
+          <div v-for="(item, index) in addAdmin.machineIds" :key="index" style="margin-left: 10px;">
+            <el-input
+              v-model="addAdmin.machineIds[index]"
+              placeholder="请输入机器码"
+              style="width: 180px; margin-right: 10px;"
+            />
+          </div>
+        </div>
+      </el-form-item>
+        <el-form-item prop="remark" label="备注">
+          <el-input
+            v-model="addAdmin.remark"
+            style="width: 300px"
+            :rows="2"
+            maxlength="100"
+            show-word-limit
+            type="textarea"
+          />
+        </el-form-item>
+      </el-form>
+
+      <div>
+        <el-button @click="closePermissionAddVisible()">取消</el-button>
+        <el-button type="primary" @click="throttledPermissionAdd()">
+          提交
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+  <!-- 这是新增用户权限弹窗
+  <el-dialog
+    v-model="permissionAddVisible"
+    title="新增用户权限"
+    width="800px"
+    :close-on-click-modal="false"
+  >
+    <div style="display: flex; margin: 20px 0px 20px 0px">
+      <span class="permissionVisible" style="margin-right: 10px">精网号:</span>
+      <el-input
+        placeholder="请输入精网号"
+        v-model="permissionAddObj.account"
+        style="width: 240px; margin-right: 10px"
+        clearable
+      ></el-input>
+      <el-button type="primary" @click="getAdminByJwcodeWithoutPermission()"
+        >查询</el-button
+      >
+    </div>
+
+    <el-descriptions
+      class="margin-top"
+      :column="2"
+      :size="size"
+      border
+      label-width="200px"
+    >
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon>
+              <UserFilled />
+            </el-icon>
+            员工精网号
+          </div>
+        </template>
+        {{ permissionAddObj.account }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon>
+              <User />
+            </el-icon>
+            员工姓名
+          </div>
+        </template>
+        {{ permissionAddObj.name }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon :style="iconStyle">
+              <location />
+            </el-icon>
+            所属地区
+          </div>
+        </template>
+        {{ permissionAddObj.market }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon>
+              <OfficeBuilding />
+            </el-icon>
+            部门
+          </div>
+        </template>
+        {{ permissionAddObj.postiton }}
+      </el-descriptions-item>
+    </el-descriptions>
+
+    <el-divider>
+      <el-icon><star-filled /></el-icon>
+    </el-divider>
+    <div>
+      <span class="permissionVisible" style="margin-right: 20px"
+        >权限设置:</span
+      >
+      <el-radio-group v-model="permissionAddObj.permission">
+        <el-radio value="1" border>总部管理员</el-radio>
+        <el-radio value="5" border>分部经理</el-radio>
+        <el-radio value="2" border>分部财务</el-radio>
+        <el-radio value="3" border>分部客服</el-radio>
+      </el-radio-group>
+    </div>
+    <template #footer>
+      <div>
+        <el-button @click="closePermissionAddVisible()">取消</el-button>
+        <el-button type="primary" @click="throttledPermissionAdd()">
+          提交
+        </el-button>
+      </div>
+    </template>
+  </el-dialog> -->
+
+  <!-- 这是编辑用户权限弹窗 -->
+  <el-dialog
+    v-model="permissionEditVisible"
+    title="编辑用户权限"
+    width="800px"
+    :close-on-click-modal="false"
+  >
+    <el-descriptions
+      class="margin-top"
+      :column="2"
+      :size="size"
+      border
+      label-width="200px"
+    >
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon>
+              <UserFilled />
+            </el-icon>
+            员工精网号
+          </div>
+        </template>
+        {{ permissionEditObj.account }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon>
+              <User />
+            </el-icon>
+            员工姓名
+          </div>
+        </template>
+        {{ permissionEditObj.name }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon :style="iconStyle">
+              <location />
+            </el-icon>
+            所属地区
+          </div>
+        </template>
+        {{ permissionEditObj.market }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="permissionVisible">
+            <el-icon>
+              <OfficeBuilding />
+            </el-icon>
+            部门
+          </div>
+        </template>
+        {{ permissionEditObj.postiton }}
+      </el-descriptions-item>
+    </el-descriptions>
+
+    <el-divider>
+      <el-icon><star-filled /></el-icon>
+    </el-divider>
+    <div>
+      <span class="permissionVisible" style="margin-right: 20px"
+        >权限设置:</span
+      >
+      <el-radio-group v-model="permissionEditObj.permission">
+        <el-radio value="1" border>总部管理员</el-radio>
+        <el-radio value="5" border>分部经理</el-radio>
+        <el-radio value="2" border>分部财务</el-radio>
+        <el-radio value="3" border>分部客服</el-radio>
+      </el-radio-group>
+    </div>
+    <template #footer>
+      <div>
+        <el-button @click="closePermissionEditVisible()">取消</el-button>
+        <el-button type="primary" @click="throttledPermissionEdit()">
+          提交
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+
+.permissionVisible {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.pagination {
+  display: flex;
+}
+
+.status {
+  display: flex;
+}
+
+.head-card {
+  display: flex;
+}
+
+.head-card-element {
+  margin-right: 20px;
+}
+
+.head-card-btn {
+  margin-left: auto;
+}
+
+/* 新增样式让弹窗内容居中 */
+.el-dialog__body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.el-dialog__footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>
diff --git a/src/views/recharge/addCoinRecharge.vue b/src/views/recharge/addCoinRecharge.vue
new file mode 100644
index 0000000..0fcd04b
--- /dev/null
+++ b/src/views/recharge/addCoinRecharge.vue
@@ -0,0 +1,1604 @@
+<script setup>
+import { ref, onMounted, reactive, computed, watch, nextTick } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import axios from 'axios'
+import { ElMessageBox } from 'element-plus'
+import API from '@/util/http'
+import moment from 'moment'
+import { range, re } from 'mathjs'
+import { utils, read } from 'xlsx'
+import throttle from 'lodash/throttle'
+// 精网号去空格
+const trimJwCode = () => {
+  if (addRecharge.value.jwcode) {
+    addRecharge.value.jwcode = addRecharge.value.jwcode.replace(/\s/g, ''); 
+  }
+}
+// 上传图片前的验证函数
+const beforeAvatarUpload = (file) => {
+  const isJPG = file.type === 'image/jpeg'
+  const isPNG = file.type === 'image/png'
+  const isLt2M = file.size / 1024 / 1024 < 2
+
+  if (!isJPG && !isPNG) {
+    ElMessage.error('上传头像图片只能是 JPG 或 PNG 格式!')
+  }
+  if (!isLt2M) {
+    ElMessage.error('上传头像图片大小不能超过 2MB!')
+  }
+  return (isJPG || isPNG) && isLt2M
+}
+// 这是添加上传图片的接口
+const imageUrl = ref('')
+const rechargeVoucher = ref('')
+const Rate = ref()
+const adminData = ref({})
+const getAdminData = async function () {
+  try {
+    const result = await API({
+      url: '/admin/userinfo',
+      data: {}
+    })
+    adminData.value = result
+    addRecharge.value.adminId = adminData.value.adminId
+    addRecharge.value.area = adminData.value.area
+    console.log('请求成功', result)
+    console.log('用户信息', user.value)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+
+// 这是添加充值信息的表单
+const addRecharge = ref({
+  rechargeVoucher: '',
+  rechargeWay: '客服充值',
+  freeGold: '',
+  rechargeGold: null,
+  paidGold: '',
+  Rate: null,
+  rechargeRatio: ''
+})
+// 这是添加充值信息的接口
+const add = async function () {
+  try {
+    console.log('开始添加充值信息', addRecharge.value)
+    // 发送POST请求
+    const result = await API({
+      url: '/recharge/recharge/add',
+      data: addRecharge.value
+    })
+    if (result.code === 0) {
+      ElMessage.error(result.msg)
+      return
+    }
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 显示成功消息
+    ElMessage.success('添加成功')
+    // 重置表单
+    addRecharge.value = {}
+    addRecharge.value.adminId = adminData.value.adminId
+    addRecharge.value.area = adminData.value.area
+    addRecharge.value.rechargeVoucher = ''
+    addRecharge.value.rechargeWay = '客服充值'
+    addRecharge.value.freeGold = ''
+    addRecharge.value.rechargeGold = null
+    addRecharge.value.paidGold = ''
+    imageUrl.value = ''
+    Rate.value = null
+    user.value = {}
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+const addBefore = () => {
+  Ref.value.validate(async (valid) => {
+    if (valid) {
+      if (Rate.value == null || Rate.value == '' || Rate.value == undefined) {
+        ElMessage({
+          type: 'error',
+          message: '请选择币种'
+        })
+        return
+      }
+      if(addRecharge.value.rechargeGold == null || addRecharge.value.rechargeGold == '' || addRecharge.value.rechargeGold == undefined){
+        ElMessage({
+          type: 'error',
+          message: '请输入充值金额'
+        })
+        return
+      }
+      ElMessageBox.confirm('确认添加？')
+        .then(() => {
+          add()
+          console.log('添加成功')
+        })
+        .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' }],
+  activityId: [{ required: true, message: '请选择活动名称', trigger: 'blur' }],
+  paidGold: [
+    { required: true, message: '请输入永久金币数', trigger: 'blur' },
+    {
+      validator: (rule, value, callback) => {
+        if (value >= 0) {
+          callback()
+        } else {
+          callback(new Error('输入金额至少为0'))
+        }
+      }
+    }
+  ],
+  freeGold: [
+    {
+      required: true,
+      message: '请输入免费金币数',
+      trigger: 'blur'
+    },
+    {
+      validator: (rule, value, callback) => {
+        // 将值转换为数字(可行吗？？)
+        // 好的不可行
+        const numValue = Number(value);
+        if (isNaN(numValue)) {
+          callback(new Error('请输入有效的数字'));
+        } else if (numValue >= 0) {
+          callback();
+        } else {
+          callback(new Error('输入金额至少为 0'));
+        }
+      },
+      trigger: 'blur'
+    }
+  ],
+  rechargeGold: [
+    {
+      required: true,
+      message: '请选择货币名称',
+      trigger: 'blur'
+    }
+    // {
+    //   validator: (rule, value, callback) => {
+    //     if (value != null && value!= '') {
+    //       callback()
+    //     } else {
+    //       callback(new Error('请选择货币名称'))
+    //     }
+    //   },
+    //   trigger: 'blur'
+    // }
+  ],
+  'addRecharge.rechargeGold': [
+    {
+      required: true,
+      message: '请输入充值金额',
+      trigger: 'blur'
+    }
+    // {
+    //   validator: (rule, value, callback) => {
+    //     if (typeof value === 'number' && value >= 0) {
+    //       callback()
+    //     } else {
+    //       callback(new Error('输入金额至少为 0'))
+    //     }
+    //   },
+    //   trigger: 'blur'
+    // }
+    // 以上两个字段的校验在提交时触发
+  ],
+  payWay: [{ required: true, message: '请选择付款方式', trigger: 'blur' }],
+  rechargeTime: [{ required: true, message: '请选择交款时间', trigger: 'blur' }]
+})
+
+// 查找客户信息的方法
+const user = ref({})
+const getUser = async function (jwcode) {
+  trimJwCode();
+  try {
+
+    // 发送POST请求
+    const result = await API({
+      url: '/recharge/user',
+      data: {
+        jwcode: addRecharge.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 activity = ref([])
+const getActivity = async function () {
+  try {
+    // 发送POST请求
+    const result = await API({
+      url: '/recharge/activity/select',
+      data: {
+        activity: { status: 1 }
+      }
+    })
+
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 存储表格数据
+    activity.value = result.data
+    console.log('活动信息', activity.value)
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+// 这是查询货币的接口
+const currency = ref([])
+const getCurrency = async function () {
+  try {
+    // 发送POST请求
+    const result = await API({
+      url: '/rates/status',
+      data: {}
+    })
+
+    // 将响应结果存储到响应式数据中
+    console.log('货币请求成功', result)
+    // 存储表格数据
+    currency.value = result.data
+    console.log('tableData', currency.value)
+    // 在这里可以根据需求进一步处理成功后的逻辑，比如更新UI显示成功消息等
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+// 上传图片成功的回调函数
+const handleAvatarSuccess = (response, uploadFile) => {
+  imageUrl.value = URL.createObjectURL(uploadFile.raw)
+  console.log('图片上传成功', response, uploadFile)
+  addRecharge.value.rechargeVoucher = `http://54.251.137.151:10702/upload/${response.data}`
+  console.log('图片名称', addRecharge.value.rechargeVoucher)
+}
+
+//充值方式条目
+const options = [
+  {
+    value: '现金',
+    label: '现金'
+  },
+  {
+    value: '支票',
+    label: '支票'
+  },
+  {
+    value: '刷卡',
+    label: '刷卡'
+  },
+  {
+    value: '其他(各地区电子支付)',
+    label: '其他(各地区电子支付)'
+  }
+]
+
+//根据活动id获取汇率
+const getActivityById = async function (row) {
+  try {
+    // 发送POST请求
+    const result = await API({
+      url: '/recharge/activity/select',
+      data: {
+        activity: { activityId: row }
+      }
+    })
+    addRecharge.value.rechargeRatio = result.data[0].rechargeRatio
+    console.log('看看有了吗', addRecharge.value.rechargeRatio)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+function handleActivityChange(value) {
+  // 在这里执行你的逻辑，例如获取选中的值
+  console.log('选中的值：', value)
+  getActivityById(value)
+  console.log('看看', addRecharge.value)
+}
+// 监听 paidGold 的变化
+// const calculatedFree = computed(() => {
+//   const result = addRecharge.value.paidGold / addRecharge.value.rechargeRatio
+//   if (isNaN(result) || result < 1 || addRecharge.value.rechargeRatio == 0) {
+//     return 0
+//   } else {
+//     return Math.trunc(result)
+//   }
+// })
+// watch(calculatedFree, (newVal) => {
+//   addRecharge.value.freeGold = newVal
+// })
+// const calculatedRecharge = computed(() => {
+//   return addRecharge.value.paidGold * Rate.value
+// })
+// watch(calculatedRecharge, (newVal) => {
+//   addRecharge.value.rechargeGold = newVal
+// })
+//这是重置重置表单的方法
+const deleteRecharge = function () {
+  addRecharge.value = {
+    adminId: adminData.value.adminId,
+    area: adminData.value.area,
+    rechargeVoucher: '',
+    rechargeWay: '客服充值',
+    freeGold: Number(),
+    rechargeGold: null,
+    paidGold: Number()
+  }
+  imageUrl.value = ''
+  Rate.value = ''
+}
+
+// 批量充值
+// jwcode列表
+const jwcodeList = ref([])
+let jwcodeSet
+// 获取jwcode列表
+const getJwcodeList = async function () {
+  try {
+    // 发送POST请求
+    const result = await API({
+      url: '/recharge/user/jwcode',
+      data: {
+        jwcode: jwcode,
+        area: adminData.value.area
+      }
+    })
+
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 存储表格数据
+    jwcodeList.value = result.data
+    console.log('精网号', jwcodeList.value)
+    // 将数组转换为set
+    jwcodeSet = new Set(jwcodeList.value)
+    console.log('精网号set', jwcodeSet)
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+// 校验精网号
+// 精网号错误对象
+const errorCount = ref(0)
+// 校验规则
+const validateInput = function (row, index) {
+  console.log(jwcodeSet.has(row.jwcode), 'has')
+  if (!jwcodeSet.has(row.jwcode) && row.jwcode != '' && row.jwcode != null) {
+    row.isInputInvalid = true
+    row.inputErrorMessage = '精网号不存在'
+    errorCount.value++
+    return
+  } else {
+    row.isInputInvalid = false
+    row.inputErrorMessage = ''
+    errorCount.value--
+  }
+}
+
+// 批量充值弹窗
+const batchRechargeVisible = ref(false)
+const i = ref(1)
+const delObj = ref({})
+const batchDelObj = ref([])
+const resetObj = ref({})
+// 批量充值表格数据
+const batchData = ref([
+  {
+    line: 1,
+    showInput: true,
+    isInputInvalid: false,
+    inputErrorMessage: '',
+    freeGold: '0',
+    rechargeGold: '0',
+    paidGold: '0'
+  }
+])
+
+// 打开批量充值弹窗
+const openBatchRechargeVisible = function () {
+  batchRechargeVisible.value = true
+}
+// 关闭批量充值弹窗
+const closeBatchRechargeVisible = function () {
+  batchRechargeVisible.value = false
+}
+// 批量充值初始化
+const batchInit = function () {
+  openBatchRechargeVisible()
+}
+
+// 添加行数对象
+const addLineObj = ref(0)
+//添加一行
+const addLine = function () {
+  batchData.value.unshift({
+    line: ++i.value,
+    showInput: true,
+    isInputInvalid: false,
+    inputErrorMessage: '',
+    freeGold: '0',
+    rechargeGold: '0',
+    paidGold: '0'
+  })
+}
+const loading = ref(false)
+// 添加多行
+const addLines = async function () {
+  try {
+    loading.value = true // 操作开始前，将loading设为true，显示加载动画
+    console.log(loading.value, 'loading.value')
+
+    await new Promise((resolve) => setTimeout(resolve, 100)) // 人为创建一个小延迟
+
+    for (let j = 0; j < addLineObj.value; j++) {
+      batchData.value.unshift({
+        line: ++i.value,
+        showInput: true,
+        isInputInvalid: false,
+        inputErrorMessage: '',
+        freeGold: '0',
+        rechargeGold: '0',
+        paidGold: '0'
+      })
+    }
+
+    ElMessage.success('添加成功')
+    console.log(batchData.value, 'batchData.value')
+  } catch (error) {
+    console.log('添加失败', error)
+    ElMessage.error('添加失败')
+  } finally {
+    loading.value = false
+    console.log(loading.value, 'loading.value')
+  }
+}
+// 添加多行点击按钮
+// const addLines = async function () {
+//   try {
+
+//     loading.value = true; // 操作开始前，将loading设为true，显示加载动画
+//     console.log(loading.value, "loading.value")
+
+//     await new Promise(resolve => setTimeout(resolve, 100)); // 人为创建一个小延迟
+
+//     const newItems = Array.from({ length: addLineObj.value }, (_, index) => reactive({
+//       line: ++i.value,
+//       showInput: true,
+//       isInputInvalid: false,
+//       inputErrorMessage: '',
+//       freeGold: "0",
+//       rechargeGold: "0",
+//       paidGold: "0",
+//     }));
+//     batchData.value = [...newItems, ...batchData.value];
+//     ElMessage.success("添加成功");
+
+//     console.log(batchData.value, "batchData.value");
+
+//     loading.value = false;
+//     console.log(loading.value, "loading.value")
+//   } catch (error) {
+//     console.log("添加失败", error);
+//     ElMessage.error("添加失败");
+//     // 如果出现异常，也要确保关闭加载动画
+//     loading.value = false;
+//   }
+// };
+// 使用 _.throttle 并设置 trailing 为 false 实现严格节流，只执行一次
+const throttledAddLines = throttle(addLines, 500, { trailing: false })
+// 导入excel按钮的ref
+const uploadRefMap = ref({})
+// 获取excel数据
+const excelList = ref([])
+// 动态设置upload Ref
+const handleSetUploadRefMap = (el) => {
+  if (el) {
+    uploadRefMap.value[`Upload_Ref`] = el
+  }
+}
+// 文件上传自定义
+const httpExcelRequest = async (op) => {
+  // 获取除文件之外的参数，具体根据实际业务需求来
+  console.log(op.data)
+  // 获取上传的excel  并解析数据
+  let file = op.file
+  let dataBinary = await readFile(file)
+  let workBook = read(dataBinary, { type: 'binary', cellDates: true })
+  let workSheet = workBook.Sheets[workBook.SheetNames[0]]
+  const excelData = utils.sheet_to_json(workSheet, { header: 1 })
+  excelList.value = excelData
+  console.log(excelData)
+}
+
+const readFile = (file) => {
+  return new Promise((resolve) => {
+    let reader = new FileReader()
+    reader.readAsBinaryString(file)
+    reader.onload = (ev) => {
+      resolve(ev.target?.result)
+    }
+  })
+}
+
+//获取批量删除的数组
+const handleSelectionChangebatch = function (val) {
+  console.log('val===', val)
+  batchDelObj.value = val
+}
+//批量删除
+const batchDel = function () {
+  ElMessageBox.confirm('确认批量删除吗？', '批量删除', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(() => {
+      console.log('batchDel===', batchDelObj.value)
+      batchData.value = batchData.value.filter((itemA) => {
+        return !batchDelObj.value.some((itemB) => itemB.line == itemA.line)
+      })
+      console.log('batchData===', batchData.value)
+      ElMessage({
+        type: 'success',
+        message: '操作成功'
+      })
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '操作撤销'
+      })
+    })
+}
+//监听改变活动时的操作
+const changeActivity = function (row) {
+  console.log('row===', row)
+  let ratio = 0
+  for (let i = 0; i < activity.value.length; i++) {
+    if (activity.value[i].activityId == row.activityId) {
+      ratio = activity.value[i].rechargeRatio
+      break
+    }
+  }
+  console.log('ratio===', ratio)
+  if (row.paidGold == null || row.paidGold == '') {
+    row.freeGold = 0
+  } else {
+    if (ratio == 0) {
+      row.freeGold = 0
+    } else {
+      row.freeGold = Math.ceil(row.paidGold / ratio)
+    }
+  }
+}
+// //监听改变永久金币时的操作
+// const changePaidGold = function (row) {
+//   console.log('row===', row)
+//   let ratio = 0
+//   if (row.activityId == null || row.activityId == '') {
+//     row.freeGold = 0
+//   } else {
+//     for (let i = 0; i < activity.value.length; i++) {
+//       if (activity.value[i].activityId == row.activityId) {
+//         ratio = activity.value[i].rechargeRatio
+//         break
+//       }
+//     }
+//     if (ratio == 0) {
+//       row.freeGold = 0
+//     } else {
+//       row.freeGold = Math.ceil(Number(row.paidGold) / ratio)
+//     }
+//   }
+//   let rate = row.rate
+//   if (rate == null || rate == '') {
+//     row.rechargeGold = 0
+//   } else {
+//     if (row.paidGold == null || row.paidGold == '') {
+//       row.rechargeGold = 0
+//     } else {
+//       row.rechargeGold = Math.ceil(Number(row.paidGold) * rate)
+//     }
+//   }
+// }
+// 监听改变币种时的操作
+const changeRate = function (row) {
+  console.log('row===', row)
+  let rate = row.rate
+  if (rate == null || rate == '') {
+    row.rechargeGold = 0
+  } else {
+    if (row.paidGold == null || row.paidGold == '') {
+      row.rechargeGold = 0
+    } else {
+      row.rechargeGold = Math.ceil(Number(row.paidGold) * rate)
+    }
+  }
+}
+//监听改变凭证时的操作
+const changeVoucher = function (row) {
+  if (
+    (imageUrl.value != '' && rechargeVoucher.value != '') ||
+    (imageUrl.value != null && rechargeVoucher.value != null)
+  ) {
+    console.log('row===', row)
+    row.imageUrl = imageUrl.value
+    row.rechargeVoucher = rechargeVoucher.value
+    console.log('row===', row)
+    imageUrl.value = ''
+    rechargeVoucher.value = ''
+  }
+}
+// 上传图片成功的回调函数
+const handleBatchAvatarSuccess = (response, uploadFile) => {
+  imageUrl.value = URL.createObjectURL(uploadFile.raw)
+  console.log('图片上传成功', response, uploadFile)
+  rechargeVoucher.value = `http://54.251.137.151:10702/upload/${response.data}`
+  console.log('图片名称', rechargeVoucher.value)
+}
+//批量充值确认按钮
+const batchAdd = async function () {
+  try {
+    console.log('batchData===', batchData.value)
+    let msg = ''
+    if (batchData.value.length == 0) {
+      ElMessage({
+        type: 'error',
+        message: '至少需要输入一条数据！'
+      })
+      return
+    }
+    if (errorCount.value > 0) {
+      console.log('errorCount.value', errorCount.value)
+      ElMessage({
+        type: 'error',
+        message: '请检查输入的精网号是否正确！'
+      })
+      return
+    }
+    for (let i = 0; i < batchData.value.length; i++) {
+      batchData.value[i].adminId = adminData.value.adminId
+      batchData.value[i].area = adminData.value.area
+      batchData.value[i].rechargeWay = '客服充值'
+      if (
+        batchData.value[i].jwcode == '' ||
+        batchData.value[i].jwcode == null
+      ) {
+        msg += `精网号不能为空！ <br/>`
+      }
+      if (
+        batchData.value[i].activityId == '' ||
+        batchData.value[i].activityId == null
+      ) {
+        msg += `活动不能为空！ <br/>`
+      }
+      if (
+        batchData.value[i].paidGold == '' ||
+        batchData.value[i].paidGold == null
+      ) {
+        msg += `永久金币不能为空！ <br/>`
+      }
+      if (
+        batchData.value[i].freeGold == '' ||
+        batchData.value[i].freeGold == null
+      ) {
+        msg += `免费金币不能为空！ <br/>`
+      }
+      if (
+        batchData.value[i].rechargeGold == '' ||
+        batchData.value[i].rechargeGold == null
+      ) {
+        msg += `充值金额不能为空！ <br/>`
+      }
+      if (
+        batchData.value[i].payWay == '' ||
+        batchData.value[i].payWay == null
+      ) {
+        msg += `收款方式不能为空！ <br/>`
+      }
+      if (
+        batchData.value[i].rechargeTime == '' ||
+        batchData.value[i].rechargeTime == null
+      ) {
+        msg += `交款时间不能为空！ <br/>`
+      }
+      if (msg != '' && msg != null) {
+        console.log(batchData.value[i])
+        ElMessage({
+          dangerouslyUseHTMLString: true,
+          type: 'error',
+          message: msg
+        })
+        return
+      }
+    }
+
+    console.log('batchData===', batchData.value)
+
+    const result = await API({
+      url: '/recharge/recharge/addmore',
+      data: {
+        ...batchData.value
+      }
+    })
+
+    if (result.code === 0) {
+      ElMessage.error('添加失败')
+      return
+    }
+
+    ElMessage({
+      type: 'success',
+      message: '添加成功！'
+    })
+
+    closeBatchRechargeVisible()
+  } catch (error) {
+    console.log('error===', error)
+    ElMessage.error('添加失败')
+    return
+  }
+}
+// 使用 _.throttle 并设置 trailing 为 false 实现严格节流，只执行一次
+const throttledBatchAdd = throttle(batchAdd, 2000, { trailing: false })
+// 批量设置的对象
+const batchSettingObj = ref({
+  rechargeGold: '0',
+  paidGold: '0',
+  freeGold: '0'
+})
+// 批量充值弹窗
+const batchSettingVisible = ref(false)
+// 打开批量充值弹窗
+const openBatchSettingVisible = function () {
+  batchSettingVisible.value = true
+}
+// 关闭批量充值弹窗
+const closeBatchSettingVisible = function () {
+  batchSettingVisible.value = false
+}
+// 批量设置初始化
+const batchSettingInit = function () {
+  openBatchSettingVisible()
+}
+// 上传图片成功的回调函数
+const batchSettingHandleAvatarSuccess = (response, uploadFile) => {
+  batchSettingObj.value.imageUrl = URL.createObjectURL(uploadFile.raw)
+  console.log('图片上传成功', response, uploadFile)
+  batchSettingObj.value.rechargeVoucher = `http://54.251.137.151:10702/upload/${response.data}`
+  console.log('图片名称', batchSettingObj.value.rechargeVoucher)
+}
+// 批量设置取消按钮
+const cancelBatchSetting = function () {
+  batchSettingObj.value = {
+    rechargeGold: '0',
+    paidGold: '0',
+    freeGold: '0'
+  }
+  closeBatchSettingVisible()
+}
+// 批量设置确认按钮
+const batchSettingConfirm = function () {
+  for (let i = 0; i < batchData.value.length; i++) {
+    if (
+      batchSettingObj.value.jwcode != '' &&
+      batchSettingObj.value.jwcode != null
+    ) {
+      batchData.value[i].jwcode = batchSettingObj.value.jwcode
+    }
+    if (
+      batchSettingObj.value.activityId != '' &&
+      batchSettingObj.value.activityId != null
+    ) {
+      batchData.value[i].activityId = batchSettingObj.value.activityId
+    }
+    if (
+      batchSettingObj.value.paidGold != '' &&
+      batchSettingObj.value.paidGold != null
+    ) {
+      batchData.value[i].paidGold = batchSettingObj.value.paidGold
+    }
+    if (
+      batchSettingObj.value.freeGold != '' &&
+      batchSettingObj.value.freeGold != null
+    ) {
+      batchData.value[i].freeGold = batchSettingObj.value.freeGold
+    }
+    if (
+      batchSettingObj.value.rate != '' &&
+      batchSettingObj.value.rate != null
+    ) {
+      batchData.value[i].rate = batchSettingObj.value.rate
+    }
+    if (
+      batchSettingObj.value.rechargeGold != '' &&
+      batchSettingObj.value.rechargeGold != null
+    ) {
+      batchData.value[i].rechargeGold = batchSettingObj.value.rechargeGold
+    }
+    if (
+      batchSettingObj.value.payWay != '' &&
+      batchSettingObj.value.payWay != null
+    ) {
+      batchData.value[i].payWay = batchSettingObj.value.payWay
+    }
+    if (
+      batchSettingObj.value.rechargeTime != '' &&
+      batchSettingObj.value.rechargeTime != null
+    ) {
+      batchData.value[i].rechargeTime = batchSettingObj.value.rechargeTime
+    }
+    if (
+      batchSettingObj.value.imageUrl != '' &&
+      batchSettingObj.value.imageUrl != null
+    ) {
+      batchData.value[i].imageUrl = batchSettingObj.value.imageUrl
+    }
+    if (
+      batchSettingObj.value.rechargeVoucher != '' &&
+      batchSettingObj.value.rechargeVoucher != null
+    ) {
+      batchData.value[i].rechargeVoucher = batchSettingObj.value.rechargeVoucher
+    }
+    if (
+      batchSettingObj.value.remark != '' &&
+      batchSettingObj.value.remark != null
+    ) {
+      batchData.value[i].remark = batchSettingObj.value.remark
+    }
+  }
+  batchSettingObj.value = {
+    rechargeGold: '0',
+    paidGold: '0',
+    freeGold: '0'
+  }
+  closeBatchSettingVisible()
+}
+
+// 挂载
+onMounted(async function () {
+  await getAdminData()
+  await getCurrency()
+  await getActivity()
+  await getJwcodeList()
+})
+</script>
+
+<template>
+  <div>
+
+  <el-form
+    :model="addRecharge"
+    ref="Ref"
+    :rules="rules"
+    label-width="auto"
+    style="max-width: 600px"
+    class="add-form"
+  >
+    <el-form-item prop="jwcode" label="精网号">
+      <el-input v-model="addRecharge.jwcode" style="width: 220px" />
+      <el-button
+        type="primary"
+        @click="getUser(addRecharge.jwcode)"
+        style="margin-left: 20px"
+        
+        >查询</el-button
+      >
+    </el-form-item>
+    <el-form-item prop="activityId" label="活动名称">
+      <el-select
+        v-model="addRecharge.activityId"
+        placeholder="请选择"
+        style="width: 300px"
+        @change="handleActivityChange"
+      >
+        <el-option
+          v-for="item in activity"
+          :key="item.value"
+          :label="item.activityName"
+          :value="item.activityId"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item prop="paidGold" label="永久金币">
+      <el-input v-model="addRecharge.paidGold" style="width: 100px" />
+      <p style="margin-right: 20px">个</p>
+      <p>免费金币</p>
+      <el-input v-model="addRecharge.freeGold" style="width: 100px" />
+      <p>个</p>
+    </el-form-item>
+    <el-form-item label="充值金额">
+      <el-select
+        prop="rechargeGold"
+        v-model="Rate"
+        placeholder="货币名称"
+        style="width: 95px; margin-right: 5px"
+        aria-required="true"
+      >
+        <el-option
+          v-for="item in currency"
+          :key="item.value"
+          :label="item.currency"
+          :value="item.exchangeRate"
+        />
+      </el-select>
+      <el-input prop="addRecharge.rechargeGold" v-model="addRecharge.rechargeGold" style="width: 200px" aria-required="true"/>
+    </el-form-item>
+    <el-form-item prop="payWay" label="收款方式">
+      <el-select
+        v-model="addRecharge.payWay"
+        placeholder="请选择"
+        style="width: 300px"
+      >
+        <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="rechargeTime" label="交款时间">
+      <!-- 修改 type 属性为 datetime 以支持时分秒选择 -->
+      <el-date-picker
+        v-model="addRecharge.rechargeTime"
+        type="datetime"
+        style="width: 300px"
+      />
+    </el-form-item>
+    <el-form-item
+      prop="rechargeVoucher"
+      label="交款凭证"
+      style="margin-bottom: 5px"
+    >
+      <el-upload
+        action="http://54.251.137.151:10702/upload"
+        class="avatar-uploader"
+        :show-file-list="false"
+        :on-success="handleAvatarSuccess"
+        :before-upload="beforeAvatarUpload"
+        style="width: 100px; height: 115px"
+      >
+        <img
+          v-if="imageUrl"
+          :src="imageUrl"
+          class="avatar"
+          style="width: 100px; height: 115px"
+        />
+        <el-icon
+          v-else
+          class="avatar-uploader-icon"
+          style="width: 100px; height: 100px"
+        >
+          <Plus />
+        </el-icon>
+      </el-upload>
+      <p style="margin-left: 10px; color: rgb(177, 176, 176)">
+        仅支持.jpg .png格式，文件≤1MB
+      </p>
+    </el-form-item>
+    <el-form-item prop="remark" label="备注">
+      <el-input
+        v-model="addRecharge.remark"
+        style="width: 300px"
+        :rows="2"
+        maxlength="100"
+        show-word-limit
+        type="textarea"
+      />
+    </el-form-item>
+    <el-form-item prop="submitter" label="提交人">
+      <el-input
+        style="width: 300px"
+        :value="adminData.name"
+        disabled
+        placeholder="提交人姓名"
+      />
+    </el-form-item>
+    <el-button @click="deleteRecharge" style="margin-left: 280px" type="success"
+      >重置</el-button
+    >
+    <el-button type="primary" @click="addBefore"> 提交 </el-button>
+  </el-form>
+
+  <!-- 客户信息栏 -->
+  <el-card
+    style="width: 1200px; float: right"
+    class="customer-info"
+    width="3000px"
+  >
+    <el-form
+      :model="user"
+      label-width="auto"
+      style="max-width: 1200px"
+      label-position="left"
+    >
+      <el-text size="large" style="margin-left: 20px">客户信息</el-text>
+      <el-row style="margin-top: 20px">
+        <el-col :span="10">
+          <el-form-item label="姓名:">
+            <p>{{ user.name }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="14">
+          <el-form-item label="历史金币总数">
+            <!-- 检查 user.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>
+
+  <el-dialog
+    v-model="batchRechargeVisible"
+    title="批量充值"
+    width="1800px"
+    style="height: 700px"
+    :close-on-click-modal="false"
+  >
+    <el-row style="margin-bottom: 10px">
+      <!-- <el-button type="primary" @click="addLine()" style="margin-right: 10px">新增一行</el-button> -->
+      <div style="font-weight: bold; font-size: 20px">
+        <span>添加</span>
+        <el-input-number
+          min="1"
+          style="width: 100px"
+          controls-position="right"
+          v-model="addLineObj"
+        ></el-input-number>
+        <span>行</span>
+        <el-button
+          type="primary"
+          @click="throttledAddLines"
+          style="margin-right: 10px"
+          >添加</el-button
+        >
+      </div>
+      <el-button
+        type="warning"
+        @click="batchSettingInit()"
+        style="margin-right: 10px"
+        >批量设置</el-button
+      >
+      <!-- <el-upload :ref="(el) => handleSetUploadRefMap(el)" action="" :http-request="httpExcelRequest" :limit="1" :show-file-list="false"
+        class="uploadExcelContent" :data={} style="margin-right: auto">
+        <el-button type="success" >导入jwcode</el-button>
+      </el-upload> -->
+      <el-button
+        type="danger"
+        plain
+        @click="batchDel()"
+        style="margin-right: 10px; width: 130px"
+        >批量删除</el-button
+      >
+    </el-row>
+    <el-row>
+      <el-table
+        v-loading="loading"
+        :data="batchData"
+        border
+        max-height="540px"
+        style="height: 540px"
+        @selection-change="handleSelectionChangebatch"
+      >
+        <el-table-column type="selection" width="50px" />
+        <el-table-column property="index" label="序号" width="55px">
+          <template #default="scope">
+            <span>{{ scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column property="jwcode" label="精网号" width="150px">
+          <template #default="scope">
+            <el-input
+              v-if="scope.row.showInput"
+              :class="{ 'is-invalid': scope.row.isInputInvalid }"
+              @blur="validateInput(scope.row)"
+              v-model="scope.row.jwcode"
+              style="width: 110px"
+            />
+            <p v-if="scope.row.isInputInvalid" class="error-message">
+              {{ scope.row.inputErrorMessage }}
+            </p>
+          </template>
+          <!-- <template #default="scope">
+            <el-select-v2 v-if="scope.row.showInput" filterable clearable v-model="scope.row.jwcode"
+              placeholder="请选择精网号" style="widows: 110px;" :options="jwcodeList">
+            <el-select-v2
+              v-if="scope.row.showInput"
+              filterable
+              clearable
+              v-model="scope.row.jwcode"
+              placeholder="请选择精网号"
+              style="widows: 110px"
+              :options="jwcodeList"
+            >
+            </el-select-v2>
+            <span v-else>{{ scope.row.jwcode }}</span>
+          </template> -->
+        </el-table-column>
+        <el-table-column property="activityName" label="活动名称" width="150px">
+          <template #default="scope">
+            <el-select
+              v-if="scope.row.showInput"
+              filterable
+              clearable
+              v-model="scope.row.activityId"
+              placeholder="请选择活动名称"
+              @change="changeActivity(scope.row)"
+            >
+              <el-option
+                v-for="item in activity"
+                :key="item.activityId"
+                :label="item.activityName"
+                :value="item.activityId"
+              >
+              </el-option>
+            </el-select>
+            <span v-else>{{ scope.row.activityName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column property="paidGold" label="永久金币" width="110px">
+          <template #default="scope">
+            <el-input
+              v-if="scope.row.showInput"
+              v-model="scope.row.paidGold"
+              style="width: 70px"
+              @change="changePaidGold(scope.row)"
+            />
+            <span v-else>{{ scope.row.paidGold }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column property="freeGold" label="免费金币" width="110px">
+          <template #default="scope">
+            <el-input
+              v-if="scope.row.showInput"
+              v-model="scope.row.freeGold"
+              style="width: 70px"
+            />
+            <span v-else>{{ scope.row.freeGold }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column property="rate" label="货币名称">
+          <template #default="scope">
+            <el-select
+              v-if="scope.row.showInput"
+              filterable
+              clearable
+              v-model="scope.row.rate"
+              placeholder="请选择币种"
+              @change="changeRate(scope.row)"
+            >
+              <el-option
+                v-for="item in currency"
+                :key="item.exchangeRate"
+                :label="item.currency"
+                :value="item.exchangeRate"
+              >
+              </el-option>
+            </el-select>
+            <span v-else>{{ scope.row.rate }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column  label="充值金额" width="110px">
+          <template #default="scope">
+            <el-input property="rechargeGold" v-model="scope.row.rechargeGold"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column property="payWay" label="收款方式" width="130px">
+          <template #default="scope">
+            <el-select
+              v-if="scope.row.showInput"
+              filterable
+              clearable
+              v-model="scope.row.payWay"
+              placeholder="请选择收款方式"
+            >
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+            <span v-else>{{ scope.row.payWay }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column property="rechargeTime" label="交款时间" width="150px">
+          <template #default="scope">
+            <el-date-picker
+              v-if="scope.row.showInput"
+              type="date"
+              v-model="scope.row.rechargeTime"
+              style="width: 120px"
+              placeholder="请选择交款时间"
+            >
+            </el-date-picker>
+            <span v-else>{{
+              moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss')
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column property="rechargeVoucher" label="充值凭证">
+          <template #default="scope">
+            <el-upload
+              action="http://54.251.137.151:10702/upload"
+              class="avatar-uploader"
+              :show-file-list="false"
+              :on-success="handleBatchAvatarSuccess"
+              v-if="scope.row.showInput"
+              @change="changeVoucher(scope.row)"
+            >
+              <img
+                v-if="scope.row.imageUrl"
+                :src="scope.row.imageUrl"
+                class="avatar"
+              />
+              <el-icon v-else class="avatar-uploader-icon">
+                <Plus />
+              </el-icon>
+            </el-upload>
+            <span v-else>{{ scope.row.rechargeVoucher }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column property="remark" label="备注" width="130px">
+          <template #default="scope">
+            <el-input
+              type="textarea"
+              v-if="scope.row.showInput"
+              v-model="scope.row.remark"
+              style="max-width: 90px"
+              :rows="1"
+              cols="12"
+            ></el-input>
+            <span v-else>{{ scope.row.remark }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column property="submitter" label="提交人">
+          <el-input :value="adminData.name" disabled />
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          prop="operation"
+          label="操作"
+          width="150px"
+        >
+          <template #default="scope">
+            <div style="display: flex">
+              <el-popconfirm
+                title="确定将此条信息删除吗？"
+                @confirm="delConfirm"
+              >
+                <template #reference>
+                  <el-button type="danger" 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>
+              <el-popconfirm
+                title="确定将此条信息重置吗？"
+                @confirm="resetConfirm"
+              >
+                <template #reference>
+                  <el-button type="success" text @click="reset(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>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <el-row>
+      <div class="batch-btn">
+        <el-button @click="cancelBatch()"> 取消 </el-button>
+        <el-button type="primary" @click="throttledBatchAdd()">
+          提交
+        </el-button>
+      </div>
+    </el-row>
+  </el-dialog>
+
+  <el-dialog
+    v-model="batchSettingVisible"
+    title="批量设置"
+    :close-on-click-modal="false"
+    style="width: 550px"
+  >
+    <el-form label-position="left" label-width="auto">
+      <el-form-item label="活动名称">
+        <el-select
+          v-model="batchSettingObj.activityId"
+          placeholder="请选择活动名称"
+          clearable
+        >
+          <el-option
+            v-for="item in activity"
+            :key="item.activityId"
+            :label="item.activityName"
+            :value="item.activityId"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="永久金币">
+        <el-input
+          v-model="batchSettingObj.paidGold"
+          placeholder="请输入永久金币"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="免费金币">
+        <el-input v-model="batchSettingObj.freeGold"></el-input>
+      </el-form-item>
+      <el-form-item label="充值金额">
+        <div style="display: flex">
+          <el-select
+            v-model="batchSettingObj.rate"
+            placeholder="请选择币种"
+            style="width: 120px; margin-right: 10px"
+            clearable
+          >
+            <el-option
+              v-for="item in currency"
+              :key="item.exchangeRate"
+              :label="item.currency"
+              :value="item.exchangeRate"
+            ></el-option>
+          </el-select>
+          <el-input
+            v-model="batchSettingObj.rechargeGold"
+            placeholder="请输入充值金额"
+          ></el-input>
+        </div>
+      </el-form-item>
+      <el-form-item prop="payWay" label="收款方式">
+        <el-select
+          v-model="batchSettingObj.payWay"
+          placeholder="请选择收款方式"
+          clearable
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="rechargeTime" label="交款时间">
+        <el-date-picker
+          v-model="batchSettingObj.rechargeTime"
+          type="date"
+          placeholder="请选择交款时间"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item prop="rechargeVoucher" label="交款凭证">
+        <el-upload
+          action="http://54.251.137.151:10702/upload"
+          class="avatar-uploader"
+          :show-file-list="false"
+          :on-success="batchSettingHandleAvatarSuccess"
+          :before-upload="beforeAvatarUpload"
+          style="width: 100px; height: 115px"
+        >
+          <img
+            v-if="batchSettingObj.imageUrl"
+            :src="batchSettingObj.imageUrl"
+            class="avatar"
+            style="width: 100px; height: 115px"
+          />
+          <el-icon
+            v-else
+            class="avatar-uploader-icon"
+            style="width: 100px; height: 100px"
+          >
+            <Plus />
+          </el-icon>
+        </el-upload>
+      </el-form-item>
+      <el-form-item prop="remark" label="备注">
+        <el-input
+          type="textarea"
+          v-model="batchSettingObj.remark"
+          placeholder="请输入备注"
+        />
+      </el-form-item>
+    </el-form>
+    <el-button @click="cancelBatchSetting()" style="margin-left: 370px"
+      >取消</el-button
+    >
+    <el-button type="primary" @click="batchSettingConfirm()"> 确认 </el-button>
+  </el-dialog>
+</div>
+</template>
+
+<style scoped>
+p {
+  margin: 0px;
+}
+
+.batch-btn {
+  margin-top: 20px;
+  margin-left: auto;
+}
+
+.el-form-item {
+  margin-left: 50px;
+}
+
+/* 上传图片的格式 */
+.avatar-uploader .avatar {
+  width: 50px;
+  height: 50px;
+  display: block;
+}
+</style>
+
+<style>
+.error-message {
+  color: red;
+  font-size: 8px;
+}
+
+.is-invalid .el-input__inner {
+  border-color: red;
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 50px;
+  height: 50px;
+  text-align: center;
+}
+
+.add-form {
+  margin-top: 50px;
+  max-width: 50%;
+  float: left;
+}
+
+.customer-info {
+  max-width: 60%;
+}
+</style>
diff --git a/src/views/recharge/coinRecharge.vue b/src/views/recharge/coinRecharge.vue
index 358f45c..6033aca 100644
--- a/src/views/recharge/coinRecharge.vue
+++ b/src/views/recharge/coinRecharge.vue
@@ -1,2213 +1,61 @@
-<script setup>
-import { ref, onMounted, reactive, computed, watch, nextTick } from 'vue'
-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 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) {
-    addRecharge.value.jwcode = addRecharge.value.jwcode.replace(/\s/g, ''); 
-  }
-}
-// 上传图片前的验证函数
-const beforeAvatarUpload = (file) => {
-  const isJPG = file.type === 'image/jpeg'
-  const isPNG = file.type === 'image/png'
-  const isLt2M = file.size / 1024 / 1024 < 2
-
-  if (!isJPG && !isPNG) {
-    ElMessage.error('上传头像图片只能是 JPG 或 PNG 格式!')
-  }
-  if (!isLt2M) {
-    ElMessage.error('上传头像图片大小不能超过 2MB!')
-  }
-  return (isJPG || isPNG) && isLt2M
-}
-
-const imageUrl = ref('')//上传图片的url
-const rechargeVoucher = ref('')//充值凭证
-const Rate = ref()//汇率
-
-//请求管理员的接口，充值明细也需要获取到
-const adminData = ref({})//管理员信息
-const getAdminData = async function () {
-  try {
-    const result = await API({
-      url: '/admin/userinfo',
-      data: {}
-    })
-    adminData.value = result
-    addRecharge.value.adminId = adminData.value.adminId
-    addRecharge.value.area = adminData.value.area
-    console.log('管理员信息请求成功', result)
-    // console.log('用户信息', user.value),user.value打印的没有什么意义
-  } catch (error) {
-    console.log('请求失败', error)
-  }
-}
-
-// 这是添加充值信息的表单
-const addRecharge = ref({
-  rechargeVoucher: '',
-  rechargeWay: '客服充值',
-  freeGold: '',
-  rechargeGold: null,
-  paidGold: '',
-  Rate: null,
-  rechargeRatio: ''
-})
-// 这是添加充值信息的接口
-const add = async function () {
-  try {
-    console.log('开始添加充值信息', addRecharge.value)
-    // 发送POST请求
-    const result = await API({
-      url: '/recharge/recharge/add',
-      data: addRecharge.value
-    })
-    if (result.code === 0) {
-      ElMessage.error(result.msg)
-      return
-    }
-    // 将响应结果存储到响应式数据中
-    console.log('/recharge/recharge/add请求成功', result)
-    // 显示成功消息
-    ElMessage.success('添加成功')
-    // 重置表单
-    addRecharge.value = {}
-    addRecharge.value.adminId = adminData.value.adminId
-    addRecharge.value.area = adminData.value.area
-    addRecharge.value.rechargeVoucher = ''
-    addRecharge.value.rechargeWay = '客服充值'
-    addRecharge.value.freeGold = ''
-    addRecharge.value.rechargeGold = null
-    addRecharge.value.paidGold = ''
-    imageUrl.value = ''
-    Rate.value = null
-    user.value = {}
-  } catch (error) {
-    console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-}
-const addBefore = () => {
-  Ref.value.validate(async (valid) => {
-    if (valid) {
-      if (Rate.value == null || Rate.value == '' || Rate.value == undefined) {
-        ElMessage({
-          type: 'error',
-          message: '请选择币种'
-        })
-        return
-      }
-      if(addRecharge.value.rechargeGold == null || addRecharge.value.rechargeGold == '' || addRecharge.value.rechargeGold == undefined){
-        ElMessage({
-          type: 'error',
-          message: '请输入充值金额'
-        })
-        return
-      }
-      ElMessageBox.confirm('确认添加？')
-        .then(() => {
-          add()
-          console.log('添加成功')
-        })
-        .catch(() => {
-          console.log('取消添加')
-        })
-    } else {
-      //提示
-      ElMessage({
-        type: 'error',
-        message: '请检查输入内容'
-      })
-    }
-  })
-}
-
-// 表单验证
-// 开始时间改变时，重新验证结束时间
-const Ref = ref(null)
-
-const rules = reactive({
-  jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }],
-  activityId: [{ required: true, message: '请选择活动名称', trigger: 'blur' }],
-  paidGold: [
-    { required: true, message: '请输入永久金币数', trigger: 'blur' },
-    {
-      validator: (rule, value, callback) => {
-        if (value >= 0) {
-          callback()
-        } else {
-          callback(new Error('输入金额至少为0'))
-        }
-      }
-    }
-  ],
-  freeGold: [
-    {
-      required: true,
-      message: '请输入免费金币数',
-      trigger: 'blur'
-    },
-    {
-      validator: (rule, value, callback) => {
-        if (value == 0) {
-          callback(new Error('输入金额不可为0'))
-        } else {
-          callback()
-        }
-      }
-    }
-  ],
-  rechargeGold: [
-    {
-      required: true,
-      message: '请选择货币名称',
-      trigger: 'blur'
-    }
-  ],
-  'addRecharge.rechargeGold': [
-    {
-      required: true,
-      message: '请输入充值金额',
-      trigger: 'blur'
-    }
-  ],
-  payWay: [{ required: true, message: '请选择付款方式', trigger: 'blur' }],
-  rechargeTime: [{ required: true, message: '请选择交款时间', trigger: 'blur' }]
-})
-
-// 查找客户信息的方法
-const user = ref({})
-const getUser = async function (jwcode) {
-  trimJwCode();
-  try {
-
-    // 发送POST请求
-    const result = await API({
-      url: '/recharge/user',
-      data: {
-        jwcode: addRecharge.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 activity = ref([])
-const getActivity = async function () {
-  try {
-    // 发送POST请求
-    const result = await API({
-      url: '/recharge/activity/select',
-      data: {
-        activity: { status: 1 }
-      }
-    })
-
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功activity', result)
-    // 存储表格数据
-    activity.value = result.data
-    console.log('活动信息', activity.value)
-  } catch (error) {
-    console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-}
-
-// 这是查询货币的接口
-const currency = ref([])
-const getCurrency = async function () {
-  try {
-    // 发送POST请求
-    const result = await API({
-      url: '/rates/status',
-      data: {}
-    })
-
-    // 将响应结果存储到响应式数据中
-    console.log('货币请求成功', result)
-    // 存储表格数据
-    currency.value = result.data
-    console.log('currency', currency.value)
-    // 在这里可以根据需求进一步处理成功后的逻辑，比如更新UI显示成功消息等
-  } catch (error) {
-    console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-}
-
-// 上传图片成功的回调函数
-const handleAvatarSuccess = (response, uploadFile) => {
-  imageUrl.value = URL.createObjectURL(uploadFile.raw)
-  console.log('图片上传成功', response, uploadFile)
-  addRecharge.value.rechargeVoucher = `http://54.251.137.151:10704/upload/${response.data}`
-  console.log('图片名称', addRecharge.value.rechargeVoucher)
-}
-
-//充值方式条目
-const options = [
-  {
-    value: '现金',
-    label: '现金'
-  },
-  {
-    value: '支票',
-    label: '支票'
-  },
-  {
-    value: '刷卡',
-    label: '刷卡'
-  },
-  {
-    value: '其他(各地区电子支付)',
-    label: '其他(各地区电子支付)'
-  }
-]
-
-//根据活动id获取汇率
-const getActivityById = async function (row) {
-  try {
-    // 发送POST请求
-    const result = await API({
-      url: '/recharge/activity/select',
-      data: {
-        activity: { activityId: row }
-      }
-    })
-    addRecharge.value.rechargeRatio = result.data[0].rechargeRatio
-    console.log('看看有了吗', addRecharge.value.rechargeRatio)
-  } catch (error) {
-    console.log('请求失败', error)
-  }
-}
-function handleActivityChange(value) {
-  // 在这里执行你的逻辑，例如获取选中的值
-  console.log('选中的值：', value)
-  getActivityById(value)
-  console.log('看看', addRecharge.value)
-}
-//这是重置重置表单的方法
-const deleteRecharge = function () {
-  addRecharge.value = {
-    adminId: adminData.value.adminId,
-    area: adminData.value.area,
-    rechargeVoucher: '',
-    rechargeWay: '客服充值',
-    freeGold: Number(),
-    rechargeGold: null,
-    paidGold: Number()
-  }
-  imageUrl.value = ''
-  Rate.value = ''
-}
-
-// 批量充值
-// jwcode列表
-const jwcodeList = ref([])
-let jwcodeSet
-// 获取jwcode列表
-const getJwcodeList = async function () {
-  try {
-    // 发送POST请求
-    const result = await API({
-      url: '/recharge/user/jwcode',
-      data: {
-        jwcode: jwcode,
-        area: adminData.value.area
-      }
-    })
-
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    // 存储表格数据
-    jwcodeList.value = result.data
-    console.log('精网号', jwcodeList.value)
-    // 将数组转换为set
-    jwcodeSet = new Set(jwcodeList.value)
-    console.log('精网号set', jwcodeSet)
-  } catch (error) {
-    console.log('请求失败jwcodelist', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-}
-
-// 校验精网号
-// 精网号错误对象
-const errorCount = ref(0)
-// 校验规则
-const validateInput = function (row, index) {
-  console.log(jwcodeSet.has(row.jwcode), 'has')
-  if (!jwcodeSet.has(row.jwcode) && row.jwcode != '' && row.jwcode != null) {
-    row.isInputInvalid = true
-    row.inputErrorMessage = '精网号不存在'
-    errorCount.value++
-    return
-  } else {
-    row.isInputInvalid = false
-    row.inputErrorMessage = ''
-    errorCount.value--
-  }
-}
-
-// 批量充值弹窗
-const batchRechargeVisible = ref(false)
-const i = ref(1)
-const batchDelObj = ref([])
-const resetObj = ref({})
-// 批量充值表格数据
-const batchData = ref([
-  {
-    line: 1,
-    showInput: true,
-    isInputInvalid: false,
-    inputErrorMessage: '',
-    freeGold: '0',
-    rechargeGold: '0',
-    paidGold: '0'
-  }
-])
-
-// 打开批量充值弹窗
-const openBatchRechargeVisible = function () {
-  batchRechargeVisible.value = true
-}
-// 关闭批量充值弹窗
-const closeBatchRechargeVisible = function () {
-  batchRechargeVisible.value = false
-}
-// 批量充值初始化
-const batchInit = function () {
-  openBatchRechargeVisible()
-}
-
-// 添加行数对象
-const addLineObj = ref(0)
-//添加一行
-const addLine = function () {
-  batchData.value.unshift({
-    line: ++i.value,
-    showInput: true,
-    isInputInvalid: false,
-    inputErrorMessage: '',
-    freeGold: '0',
-    rechargeGold: '0',
-    paidGold: '0'
-  })
-}
-const loading = ref(false)
-// 添加多行
-const addLines = async function () {
-  try {
-    loading.value = true // 操作开始前，将loading设为true，显示加载动画
-    console.log(loading.value, 'loading.value')
-
-    await new Promise((resolve) => setTimeout(resolve, 100)) // 人为创建一个小延迟
-
-    for (let j = 0; j < addLineObj.value; j++) {
-      batchData.value.unshift({
-        line: ++i.value,
-        showInput: true,
-        isInputInvalid: false,
-        inputErrorMessage: '',
-        freeGold: '0',
-        rechargeGold: '0',
-        paidGold: '0'
-      })
-    }
-
-    ElMessage.success('添加成功')
-    console.log(batchData.value, 'batchData.value')
-  } catch (error) {
-    console.log('添加失败', error)
-    ElMessage.error('添加失败')
-  } finally {
-    loading.value = false
-    console.log(loading.value, 'loading.value')
-  }
-}
-// 添加多行点击按钮
-// const addLines = async function () {
-//   try {
-
-//     loading.value = true; // 操作开始前，将loading设为true，显示加载动画
-//     console.log(loading.value, "loading.value")
-
-//     await new Promise(resolve => setTimeout(resolve, 100)); // 人为创建一个小延迟
-
-//     const newItems = Array.from({ length: addLineObj.value }, (_, index) => reactive({
-//       line: ++i.value,
-//       showInput: true,
-//       isInputInvalid: false,
-//       inputErrorMessage: '',
-//       freeGold: "0",
-//       rechargeGold: "0",
-//       paidGold: "0",
-//     }));
-//     batchData.value = [...newItems, ...batchData.value];
-//     ElMessage.success("添加成功");
-
-//     console.log(batchData.value, "batchData.value");
-
-//     loading.value = false;
-//     console.log(loading.value, "loading.value")
-//   } catch (error) {
-//     console.log("添加失败", error);
-//     ElMessage.error("添加失败");
-//     // 如果出现异常，也要确保关闭加载动画
-//     loading.value = false;
-//   }
-// };
-// 使用 _.throttle 并设置 trailing 为 false 实现严格节流，只执行一次
-const throttledAddLines = throttle(addLines, 500, { trailing: false })
-// 导入excel按钮的ref
-const uploadRefMap = ref({})
-// 获取excel数据
-const excelList = ref([])
-// 动态设置upload Ref
-const handleSetUploadRefMap = (el) => {
-  if (el) {
-    uploadRefMap.value[`Upload_Ref`] = el
-  }
-}
-// 文件上传自定义
-const httpExcelRequest = async (op) => {
-  // 获取除文件之外的参数，具体根据实际业务需求来
-  console.log(op.data)
-  // 获取上传的excel  并解析数据
-  let file = op.file
-  let dataBinary = await readFile(file)
-  let workBook = read(dataBinary, { type: 'binary', cellDates: true })
-  let workSheet = workBook.Sheets[workBook.SheetNames[0]]
-  const excelData = utils.sheet_to_json(workSheet, { header: 1 })
-  excelList.value = excelData
-  console.log(excelData)
-}
-
-const readFile = (file) => {
-  return new Promise((resolve) => {
-    let reader = new FileReader()
-    reader.readAsBinaryString(file)
-    reader.onload = (ev) => {
-      resolve(ev.target?.result)
-    }
-  })
-}
-
-//获取批量删除的数组
-const handleSelectionChangebatch = function (val) {
-  console.log('val===', val)
-  batchDelObj.value = val
-}
-//批量删除
-const batchDel = function () {
-  ElMessageBox.confirm('确认批量删除吗？', '批量删除', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  })
-    .then(() => {
-      console.log('batchDel===', batchDelObj.value)
-      batchData.value = batchData.value.filter((itemA) => {
-        return !batchDelObj.value.some((itemB) => itemB.line == itemA.line)
-      })
-      console.log('batchData===', batchData.value)
-      ElMessage({
-        type: 'success',
-        message: '操作成功'
-      })
-    })
-    .catch(() => {
-      ElMessage({
-        type: 'info',
-        message: '操作撤销'
-      })
-    })
-}
-//监听改变活动时的操作
-const changeActivity = function (row) {
-  console.log('row===', row)
-  let ratio = 0
-  for (let i = 0; i < activity.value.length; i++) {
-    if (activity.value[i].activityId == row.activityId) {
-      ratio = activity.value[i].rechargeRatio
-      break
-    }
-  }
-  console.log('ratio===', ratio)
-  if (row.paidGold == null || row.paidGold == '') {
-    row.freeGold = 0
-  } else {
-    if (ratio == 0) {
-      row.freeGold = 0
-    } else {
-      row.freeGold = Math.ceil(row.paidGold / ratio)
-    }
-  }
-}
-// //监听改变永久金币时的操作
-// const changePaidGold = function (row) {
-//   console.log('row===', row)
-//   let ratio = 0
-//   if (row.activityId == null || row.activityId == '') {
-//     row.freeGold = 0
-//   } else {
-//     for (let i = 0; i < activity.value.length; i++) {
-//       if (activity.value[i].activityId == row.activityId) {
-//         ratio = activity.value[i].rechargeRatio
-//         break
-//       }
-//     }
-//     if (ratio == 0) {
-//       row.freeGold = 0
-//     } else {
-//       row.freeGold = Math.ceil(Number(row.paidGold) / ratio)
-//     }
-//   }
-//   let rate = row.rate
-//   if (rate == null || rate == '') {
-//     row.rechargeGold = 0
-//   } else {
-//     if (row.paidGold == null || row.paidGold == '') {
-//       row.rechargeGold = 0
-//     } else {
-//       row.rechargeGold = Math.ceil(Number(row.paidGold) * rate)
-//     }
-//   }
-// }
-// 监听改变币种时的操作
-const changeRate = function (row) {
-  console.log('row===', row)
-  let rate = row.rate
-  if (rate == null || rate == '') {
-    row.rechargeGold = 0
-  } else {
-    if (row.paidGold == null || row.paidGold == '') {
-      row.rechargeGold = 0
-    } else {
-      row.rechargeGold = Math.ceil(Number(row.paidGold) * rate)
-    }
-  }
-}
-//监听改变凭证时的操作
-const changeVoucher = function (row) {
-  if (
-    (imageUrl.value != '' && rechargeVoucher.value != '') ||
-    (imageUrl.value != null && rechargeVoucher.value != null)
-  ) {
-    console.log('row===', row)
-    row.imageUrl = imageUrl.value
-    row.rechargeVoucher = rechargeVoucher.value
-    console.log('row===', row)
-    imageUrl.value = ''
-    rechargeVoucher.value = ''
-  }
-}
-// 上传图片成功的回调函数
-const handleBatchAvatarSuccess = (response, uploadFile) => {
-  imageUrl.value = URL.createObjectURL(uploadFile.raw)
-  console.log('图片上传成功', response, uploadFile)
-  rechargeVoucher.value = `http://54.251.137.151:10704/upload/${response.data}`
-  console.log('图片名称', rechargeVoucher.value)
-}
-//批量充值确认按钮
-const batchAdd = async function () {
-  try {
-    console.log('batchData===', batchData.value)
-    let msg = ''
-    if (batchData.value.length == 0) {
-      ElMessage({
-        type: 'error',
-        message: '至少需要输入一条数据！'
-      })
-      return
-    }
-    if (errorCount.value > 0) {
-      console.log('errorCount.value', errorCount.value)
-      ElMessage({
-        type: 'error',
-        message: '请检查输入的精网号是否正确！'
-      })
-      return
-    }
-    for (let i = 0; i < batchData.value.length; i++) {
-      batchData.value[i].adminId = adminData.value.adminId
-      batchData.value[i].area = adminData.value.area
-      batchData.value[i].rechargeWay = '客服充值'
-      if (
-        batchData.value[i].jwcode == '' ||
-        batchData.value[i].jwcode == null
-      ) {
-        msg += `精网号不能为空！ <br/>`
-      }
-      if (
-        batchData.value[i].activityId == '' ||
-        batchData.value[i].activityId == null
-      ) {
-        msg += `活动不能为空！ <br/>`
-      }
-      if (
-        batchData.value[i].paidGold == '' ||
-        batchData.value[i].paidGold == null
-      ) {
-        msg += `永久金币不能为空！ <br/>`
-      }
-      if (
-        batchData.value[i].freeGold == '' ||
-        batchData.value[i].freeGold == null
-      ) {
-        msg += `免费金币不能为空！ <br/>`
-      }
-      if (
-        batchData.value[i].rechargeGold == '' ||
-        batchData.value[i].rechargeGold == null
-      ) {
-        msg += `充值金额不能为空！ <br/>`
-      }
-      if (
-        batchData.value[i].payWay == '' ||
-        batchData.value[i].payWay == null
-      ) {
-        msg += `收款方式不能为空！ <br/>`
-      }
-      if (
-        batchData.value[i].rechargeTime == '' ||
-        batchData.value[i].rechargeTime == null
-      ) {
-        msg += `交款时间不能为空！ <br/>`
-      }
-      if (msg != '' && msg != null) {
-        console.log(batchData.value[i])
-        ElMessage({
-          dangerouslyUseHTMLString: true,
-          type: 'error',
-          message: msg
-        })
-        return
-      }
-    }
-
-    console.log('batchData===', batchData.value)
-
-    const result = await API({
-      url: '/recharge/recharge/addmore',
-      data: {
-        ...batchData.value
-      }
-    })
-
-    if (result.code === 0) {
-      ElMessage.error('添加失败')
-      return
-    }
-
-    ElMessage({
-      type: 'success',
-      message: '添加成功！'
-    })
-
-    closeBatchRechargeVisible()
-  } catch (error) {
-    console.log('error===', error)
-    ElMessage.error('添加失败')
-    return
-  }
-}
-// 使用 _.throttle 并设置 trailing 为 false 实现严格节流，只执行一次
-const throttledBatchAdd = throttle(batchAdd, 2000, { trailing: false })
-// 批量设置的对象
-const batchSettingObj = ref({
-  rechargeGold: '0',
-  paidGold: '0',
-  freeGold: '0'
-})
-// 批量充值弹窗
-const batchSettingVisible = ref(false)
-// 打开批量充值弹窗
-const openBatchSettingVisible = function () {
-  batchSettingVisible.value = true
-}
-// 关闭批量充值弹窗
-const closeBatchSettingVisible = function () {
-  batchSettingVisible.value = false
-}
-// 批量设置初始化
-const batchSettingInit = function () {
-  openBatchSettingVisible()
-}
-// 上传图片成功的回调函数
-const batchSettingHandleAvatarSuccess = (response, uploadFile) => {
-  batchSettingObj.value.imageUrl = URL.createObjectURL(uploadFile.raw)
-  console.log('图片上传成功', response, uploadFile)
-  batchSettingObj.value.rechargeVoucher = `http://54.251.137.151:10704/upload/${response.data}`
-  console.log('图片名称', batchSettingObj.value.rechargeVoucher)
-}
-// 批量设置取消按钮
-const cancelBatchSetting = function () {
-  batchSettingObj.value = {
-    rechargeGold: '0',
-    paidGold: '0',
-    freeGold: '0'
-  }
-  closeBatchSettingVisible()
-}
-// 批量设置确认按钮
-const batchSettingConfirm = function () {
-  for (let i = 0; i < batchData.value.length; i++) {
-    if (
-      batchSettingObj.value.jwcode != '' &&
-      batchSettingObj.value.jwcode != null
-    ) {
-      batchData.value[i].jwcode = batchSettingObj.value.jwcode
-    }
-    if (
-      batchSettingObj.value.activityId != '' &&
-      batchSettingObj.value.activityId != null
-    ) {
-      batchData.value[i].activityId = batchSettingObj.value.activityId
-    }
-    if (
-      batchSettingObj.value.paidGold != '' &&
-      batchSettingObj.value.paidGold != null
-    ) {
-      batchData.value[i].paidGold = batchSettingObj.value.paidGold
-    }
-    if (
-      batchSettingObj.value.freeGold != '' &&
-      batchSettingObj.value.freeGold != null
-    ) {
-      batchData.value[i].freeGold = batchSettingObj.value.freeGold
-    }
-    if (
-      batchSettingObj.value.rate != '' &&
-      batchSettingObj.value.rate != null
-    ) {
-      batchData.value[i].rate = batchSettingObj.value.rate
-    }
-    if (
-      batchSettingObj.value.rechargeGold != '' &&
-      batchSettingObj.value.rechargeGold != null
-    ) {
-      batchData.value[i].rechargeGold = batchSettingObj.value.rechargeGold
-    }
-    if (
-      batchSettingObj.value.payWay != '' &&
-      batchSettingObj.value.payWay != null
-    ) {
-      batchData.value[i].payWay = batchSettingObj.value.payWay
-    }
-    if (
-      batchSettingObj.value.rechargeTime != '' &&
-      batchSettingObj.value.rechargeTime != null
-    ) {
-      batchData.value[i].rechargeTime = batchSettingObj.value.rechargeTime
-    }
-    if (
-      batchSettingObj.value.imageUrl != '' &&
-      batchSettingObj.value.imageUrl != null
-    ) {
-      batchData.value[i].imageUrl = batchSettingObj.value.imageUrl
-    }
-    if (
-      batchSettingObj.value.rechargeVoucher != '' &&
-      batchSettingObj.value.rechargeVoucher != null
-    ) {
-      batchData.value[i].rechargeVoucher = batchSettingObj.value.rechargeVoucher
-    }
-    if (
-      batchSettingObj.value.remark != '' &&
-      batchSettingObj.value.remark != null
-    ) {
-      batchData.value[i].remark = batchSettingObj.value.remark
-    }
-  }
-  batchSettingObj.value = {
-    rechargeGold: '0',
-    paidGold: '0',
-    freeGold: '0'
-  }
-  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>
-  <el-button-group>
-    <!-- 切换后状态显示样式否则是默认样式 -->
-      <el-button 
-        :type="activeTab === 'addRecharge' ? 'primary' : 'default'" 
-        @click="changeTab('addRecharge')"
+    <!-- 这里放置标签切换的按钮 -->
+    <el-button-group>
+    <!-- 切换后状态显示 primary 样式否则是默认样式 -->
+      <el-button
+        :type="activeTab === 'add' ? 'primary' : 'default'"
+        @click="goToAdd"
       >
         新增充值
       </el-button>
-      <el-button 
-        :type="activeTab === 'detail' ? 'primary' : 'default'" 
-        @click="changeTab('detail')"
+      <el-button
+        :type="activeTab === 'detail' ? 'primary' : 'default'"
+        @click="goToDetail"
       >
         金币充值明细
       </el-button>
     </el-button-group>
-
-
-      <!-- 根据activeTab切换显示内容 -->
-   <!-- 新增充值的布局------------------------------------------------------------------- -->
-    <div v-if="activeTab === 'addRecharge'">
-  <!-- <div style="display: flex">
-    <div style="margin-right: 20px">新增充值</div>
-  </div> -->
-
-  <el-form
-    :model="addRecharge"
-    ref="Ref"
-    :rules="rules"
-    label-width="auto"
-    style="max-width: 600px"
-    class="add-form"
-  >
-    <el-form-item prop="jwcode" label="精网号">
-      <el-input v-model="addRecharge.jwcode" style="width: 220px" />
-      <el-button
-        type="primary"
-        @click="getUser(addRecharge.jwcode)"
-        style="margin-left: 20px"
-        
-        >查询</el-button
-      >
-    </el-form-item>
-    <el-form-item prop="activityId" label="活动名称">
-      <el-select
-        v-model="addRecharge.activityId"
-        placeholder="请选择"
-        style="width: 300px"
-        @change="handleActivityChange"
-      >
-        <el-option
-          v-for="item in activity"
-          :key="item.value"
-          :label="item.activityName"
-          :value="item.activityId"
-        />
-      </el-select>
-    </el-form-item>
-    <el-col>
-    <el-form-item prop="paidGold" label="永久金币">
-      <el-input v-model="addRecharge.paidGold" style="width: 100px" />
-      <p style="margin-right: 20px">个</p>
-    </el-form-item>
-    <el-form-item prop="freeGold" label="免费金币">
-      <el-input v-model="addRecharge.freeGold" style="width: 100px" />
-      <p>个</p>
-    </el-form-item>
-  </el-col>
-    <el-form-item label="充值金额">
-      <el-select
-        prop="rechargeGold"
-        v-model="Rate"
-        placeholder="货币名称"
-        style="width: 95px; margin-right: 5px"
-        aria-required="true"
-      >
-        <el-option
-          v-for="item in currency"
-          :key="item.value"
-          :label="item.currency"
-          :value="item.exchangeRate"
-        />
-      </el-select>
-      <el-input prop="addRecharge.rechargeGold" v-model="addRecharge.rechargeGold" style="width: 200px" aria-required="true"/>
-    </el-form-item>
-    <el-form-item prop="payWay" label="收款方式">
-      <el-select
-        v-model="addRecharge.payWay"
-        placeholder="请选择"
-        style="width: 300px"
-      >
-        <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="rechargeTime" label="交款时间">
-      <!-- 修改 type 属性为 datetime 以支持时分秒选择 -->
-      <el-date-picker
-        v-model="addRecharge.rechargeTime"
-        type="datetime"
-        style="width: 300px"
-      />
-    </el-form-item>
-    <el-form-item
-      prop="rechargeVoucher"
-      label="交款凭证"
-      style="margin-bottom: 5px"
-    >
-      <el-upload
-        action="http://39.101.133.168:8828/hljw/api/aws/upload"
-        class="avatar-uploader"
-        :show-file-list="false"
-        :on-success="handleAvatarSuccess"
-        :before-upload="beforeAvatarUpload"
-        style="width: 100px; height: 115px"
-      >
-        <img
-          v-if="imageUrl"
-          :src="imageUrl"
-          class="avatar"
-          style="width: 100px; height: 115px"
-        />
-        <el-icon
-          v-else
-          class="avatar-uploader-icon"
-          style="width: 100px; height: 100px"
-        >
-          <Plus />
-        </el-icon>
-      </el-upload>
-      <p style="margin-left: 10px; color: rgb(177, 176, 176)">
-        仅支持.jpg .png格式，文件≤2MB
-      </p>
-    </el-form-item>
-    <el-form-item prop="remark" label="备注">
-      <el-input
-        v-model="addRecharge.remark"
-        style="width: 300px"
-        :rows="2"
-        maxlength="100"
-        show-word-limit
-        type="textarea"
-      />
-    </el-form-item>
-    <el-form-item prop="submitter" label="提交人">
-      <el-input
-        style="width: 300px"
-        :value="adminData.name"
-        disabled
-        placeholder="提交人姓名"
-      />
-    </el-form-item>
-    <el-button @click="deleteRecharge" style="margin-left: 280px" type="success"
-      >重置</el-button
-    >
-    <el-button type="primary" @click="addBefore"> 提交 </el-button>
-  </el-form>
-
-  <!-- 客户信息栏 -->
-  <el-card
-    style="width: 1200px; float: right;margin-bottom:20px;margin-top: 10px;"
-    class="customer-info"
-    width="3000px"
-  >
-    <el-form
-      :model="user"
-      label-width="auto"
-      style="max-width: 1200px"
-      label-position="left"
-    >
-      <el-text size="large" style="margin-left: 20px">客户信息</el-text>
-      <el-row style="margin-top: 20px">
-        <el-col :span="10">
-          <el-form-item label="姓名:">
-            <p>{{ user.name }}</p>
-          </el-form-item>
-        </el-col>
-        <el-col :span="14">
-          <el-form-item label="历史金币总数">
-            <!-- 检查 user.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>
-
-  <el-dialog
-    v-model="batchRechargeVisible"
-    title="批量充值"
-    width="1800px"
-    style="height: 700px"
-    :close-on-click-modal="false"
-  >
-    <el-row style="margin-bottom: 10px">
-      <!-- <el-button type="primary" @click="addLine()" style="margin-right: 10px">新增一行</el-button> -->
-      <div style="font-weight: bold; font-size: 20px">
-        <span>添加</span>
-        <el-input-number
-          min="1"
-          style="width: 100px"
-          controls-position="right"
-          v-model="addLineObj"
-        ></el-input-number>
-        <span>行</span>
-        <el-button
-          type="primary"
-          @click="throttledAddLines"
-          style="margin-right: 10px"
-          >添加</el-button
-        >
-      </div>
-      <el-button
-        type="warning"
-        @click="batchSettingInit()"
-        style="margin-right: 10px"
-        >批量设置</el-button
-      >
-      <!-- <el-upload :ref="(el) => handleSetUploadRefMap(el)" action="" :http-request="httpExcelRequest" :limit="1" :show-file-list="false"
-        class="uploadExcelContent" :data={} style="margin-right: auto">
-        <el-button type="success" >导入jwcode</el-button>
-      </el-upload> -->
-      <el-button
-        type="danger"
-        plain
-        @click="batchDel()"
-        style="margin-right: 10px; width: 130px"
-        >批量删除</el-button
-      >
-    </el-row>
-    <el-row>
-      <el-table
-        v-loading="loading"
-        :data="batchData"
-        border
-        max-height="540px"
-        style="height: 540px"
-        @selection-change="handleSelectionChangebatch"
-      >
-        <el-table-column type="selection" width="50px" />
-        <el-table-column property="index" label="序号" width="55px">
-          <template #default="scope">
-            <span>{{ scope.$index + 1 }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column property="jwcode" label="精网号" width="150px">
-          <template #default="scope">
-            <el-input
-              v-if="scope.row.showInput"
-              :class="{ 'is-invalid': scope.row.isInputInvalid }"
-              @blur="validateInput(scope.row)"
-              v-model="scope.row.jwcode"
-              style="width: 110px"
-            />
-            <p v-if="scope.row.isInputInvalid" class="error-message">
-              {{ scope.row.inputErrorMessage }}
-            </p>
-          </template>
-          <!-- <template #default="scope">
-            <el-select-v2 v-if="scope.row.showInput" filterable clearable v-model="scope.row.jwcode"
-              placeholder="请选择精网号" style="widows: 110px;" :options="jwcodeList">
-            <el-select-v2
-              v-if="scope.row.showInput"
-              filterable
-              clearable
-              v-model="scope.row.jwcode"
-              placeholder="请选择精网号"
-              style="widows: 110px"
-              :options="jwcodeList"
-            >
-            </el-select-v2>
-            <span v-else>{{ scope.row.jwcode }}</span>
-          </template> -->
-        </el-table-column>
-        <el-table-column property="activityName" label="活动名称" width="150px">
-          <template #default="scope">
-            <el-select
-              v-if="scope.row.showInput"
-              filterable
-              clearable
-              v-model="scope.row.activityId"
-              placeholder="请选择活动名称"
-              @change="changeActivity(scope.row)"
-            >
-              <el-option
-                v-for="item in activity"
-                :key="item.activityId"
-                :label="item.activityName"
-                :value="item.activityId"
-              >
-              </el-option>
-            </el-select>
-            <span v-else>{{ scope.row.activityName }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column property="paidGold" label="永久金币" width="110px">
-          <template #default="scope">
-            <el-input
-              v-if="scope.row.showInput"
-              v-model="scope.row.paidGold"
-              style="width: 70px"
-              @change="changePaidGold(scope.row)"
-            />
-            <span v-else>{{ scope.row.paidGold }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column property="freeGold" label="免费金币" width="110px">
-          <template #default="scope">
-            <el-input
-              v-if="scope.row.showInput"
-              v-model="scope.row.freeGold"
-              style="width: 70px"
-            />
-            <span v-else>{{ scope.row.freeGold }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column property="rate" label="货币名称">
-          <template #default="scope">
-            <el-select
-              v-if="scope.row.showInput"
-              filterable
-              clearable
-              v-model="scope.row.rate"
-              placeholder="请选择币种"
-              @change="changeRate(scope.row)"
-            >
-              <el-option
-                v-for="item in currency"
-                :key="item.exchangeRate"
-                :label="item.currency"
-                :value="item.exchangeRate"
-              >
-              </el-option>
-            </el-select>
-            <span v-else>{{ scope.row.rate }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column  label="充值金额" width="110px">
-          <template #default="scope">
-            <el-input property="rechargeGold" v-model="scope.row.rechargeGold"></el-input>
-          </template>
-        </el-table-column>
-        <el-table-column property="payWay" label="收款方式" width="130px">
-          <template #default="scope">
-            <el-select
-              v-if="scope.row.showInput"
-              filterable
-              clearable
-              v-model="scope.row.payWay"
-              placeholder="请选择收款方式"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-select>
-            <span v-else>{{ scope.row.payWay }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column property="rechargeTime" label="交款时间" width="150px">
-          <template #default="scope">
-            <el-date-picker
-              v-if="scope.row.showInput"
-              type="date"
-              v-model="scope.row.rechargeTime"
-              style="width: 120px"
-              placeholder="请选择交款时间"
-            >
-            </el-date-picker>
-            <span v-else>{{
-              moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss')
-            }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column property="rechargeVoucher" label="充值凭证">
-          <template #default="scope">
-            <el-upload
-              action="http://39.101.133.168:8828/hljw/api/aws/upload"
-              class="avatar-uploader"
-              :show-file-list="false"
-              :on-success="handleBatchAvatarSuccess"
-              v-if="scope.row.showInput"
-              @change="changeVoucher(scope.row)"
-            >
-              <img
-                v-if="scope.row.imageUrl"
-                :src="scope.row.imageUrl"
-                class="avatar"
-              />
-              <el-icon v-else class="avatar-uploader-icon">
-                <Plus />
-              </el-icon>
-            </el-upload>
-            <span v-else>{{ scope.row.rechargeVoucher }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column property="remark" label="备注" width="130px">
-          <template #default="scope">
-            <el-input
-              type="textarea"
-              v-if="scope.row.showInput"
-              v-model="scope.row.remark"
-              style="max-width: 90px"
-              :rows="1"
-              cols="12"
-            ></el-input>
-            <span v-else>{{ scope.row.remark }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column property="submitter" label="提交人">
-          <el-input :value="adminData.name" disabled />
-        </el-table-column>
-        <el-table-column
-          fixed="right"
-          prop="operation"
-          label="操作"
-          width="150px"
-        >
-          <template #default="scope">
-            <div style="display: flex">
-              <el-popconfirm
-                title="确定将此条信息删除吗？"
-                @confirm="delConfirm"
-              >
-                <template #reference>
-                  <el-button type="danger" 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>
-              <el-popconfirm
-                title="确定将此条信息重置吗？"
-                @confirm="resetConfirm"
-              >
-                <template #reference>
-                  <el-button type="success" text @click="reset(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>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-row>
-    <el-row>
-      <div class="batch-btn">
-        <el-button @click="cancelBatch()"> 取消 </el-button>
-        <el-button type="primary" @click="throttledBatchAdd()">
-          提交
-        </el-button>
-      </div>
-    </el-row>
-  </el-dialog>
-
-  <el-dialog
-    v-model="batchSettingVisible"
-    title="批量设置"
-    :close-on-click-modal="false"
-    style="width: 550px"
-  >
-    <el-form label-position="left" label-width="auto">
-      <el-form-item label="活动名称">
-        <el-select
-          v-model="batchSettingObj.activityId"
-          placeholder="请选择活动名称"
-          clearable
-        >
-          <el-option
-            v-for="item in activity"
-            :key="item.activityId"
-            :label="item.activityName"
-            :value="item.activityId"
-          >
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="永久金币">
-        <el-input
-          v-model="batchSettingObj.paidGold"
-          placeholder="请输入永久金币"
-        ></el-input>
-      </el-form-item>
-      <el-form-item label="免费金币">
-        <el-input v-model="batchSettingObj.freeGold"></el-input>
-      </el-form-item>
-      <el-form-item label="充值金额">
-        <div style="display: flex">
-          <el-select
-            v-model="batchSettingObj.rate"
-            placeholder="请选择币种"
-            style="width: 120px; margin-right: 10px"
-            clearable
-          >
-            <el-option
-              v-for="item in currency"
-              :key="item.exchangeRate"
-              :label="item.currency"
-              :value="item.exchangeRate"
-            ></el-option>
-          </el-select>
-          <el-input
-            v-model="batchSettingObj.rechargeGold"
-            placeholder="请输入充值金额"
-          ></el-input>
-        </div>
-      </el-form-item>
-      <el-form-item prop="payWay" label="收款方式">
-        <el-select
-          v-model="batchSettingObj.payWay"
-          placeholder="请选择收款方式"
-          clearable
-        >
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          ></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item prop="rechargeTime" label="交款时间">
-        <el-date-picker
-          v-model="batchSettingObj.rechargeTime"
-          type="date"
-          placeholder="请选择交款时间"
-        ></el-date-picker>
-      </el-form-item>
-      <el-form-item prop="rechargeVoucher" label="交款凭证">
-        <el-upload
-          action="http://39.101.133.168:8828/hljw/api/aws/upload"
-          class="avatar-uploader"
-          :show-file-list="false"
-          :on-success="batchSettingHandleAvatarSuccess"
-          :before-upload="beforeAvatarUpload"
-          style="width: 100px; height: 115px"
-        >
-          <img
-            v-if="batchSettingObj.imageUrl"
-            :src="batchSettingObj.imageUrl"
-            class="avatar"
-            style="width: 100px; height: 115px"
-          />
-          <el-icon
-            v-else
-            class="avatar-uploader-icon"
-            style="width: 100px; height: 100px"
-          >
-            <Plus />
-          </el-icon>
-        </el-upload>
-      </el-form-item>
-      <el-form-item prop="remark" label="备注">
-        <el-input
-          type="textarea"
-          v-model="batchSettingObj.remark"
-          placeholder="请输入备注"
-        />
-      </el-form-item>
-    </el-form>
-    <el-button @click="cancelBatchSetting()" style="margin-left: 370px"
-      >取消</el-button
-    >
-    <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>
-
+    <!-- 渲染子路由组件 -->
+    <router-view></router-view>
   </div>
-</div>
 </template>
 
-<style scoped>
-p {
-  margin: 0px;
-}
-
-.batch-btn {
-  margin-top: 20px;
-  margin-left: auto;
-}
-
-.el-form-item {
-  margin-left: 50px;
-}
-
-/* 上传图片的格式 */
-.avatar-uploader .avatar {
-  width: 50px;
-  height: 50px;
-  display: block;
-}
-</style>
-
-<style>
-.error-message {
-  color: red;
-  font-size: 8px;
-}
-
-.is-invalid .el-input__inner {
-  border-color: red;
-}
-
-.avatar-uploader .el-upload {
-  border: 1px dashed var(--el-border-color);
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-  transition: var(--el-transition-duration-fast);
-}
-
-.avatar-uploader .el-upload:hover {
-  border-color: var(--el-color-primary);
-}
-
-.el-icon.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 50px;
-  height: 50px;
-  text-align: center;
-}
-
-.add-form {
-  margin-top: 50px;
-  max-width: 50%;
-  float: left;
-}
-
-.customer-info {
-  max-width: 60%;
+<script setup>
+import { ref, watch } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+
+const router = useRouter();// 获取路由实例
+const route = useRoute();// 获取当前路由信息
+const activeTab = ref(route.name === 'coinRechargeDetail' ? 'detail' : 'add');
+//也就是说如果当前在coinRechargeDetail页面，那么就是detail，否则默认情况都展示add页面
+//此时获取到的路由信息是coinRecharge，所以默认是add
+//此时获取到的路由信息是coinRecharge，所以默认是add
+
+
+const goToAdd = () => {
+  // 点击按钮时更新 activeTab 为 add
+  activeTab.value = 'add';
+  router.push({ name: 'addCoinRecharge' });
+};
+
+const goToDetail = () => {
+  // 点击按钮时更新 activeTab 为 detail
+  activeTab.value = 'detail';
+  router.push({ name: 'coinRechargeDetail' });
+};
+
+// 监听路由变化，更新 activeTab
+watch(() => route.name, (newName) => {
+  if (newName === 'addCoinRecharge') {
+    activeTab.value = 'add';
+  } else if (newName === 'coinRechargeDetail') {
+    activeTab.value = 'detail';
+  }
+});
+
+// 当进入父路由时，默认跳转到新增消耗页面
+if (route.name === 'coinRecharge') {
+  router.push({ name: 'addCoinRecharge' });
 }
-</style>
+</script>
diff --git a/src/views/recharge/coinRechargeDetail.vue b/src/views/recharge/coinRechargeDetail.vue
new file mode 100644
index 0000000..3979a98
--- /dev/null
+++ b/src/views/recharge/coinRechargeDetail.vue
@@ -0,0 +1,770 @@
+<script setup>
+import { ref, onMounted, reactive, computed } from 'vue'
+import ElementPlus from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { AiFillRead } from 'vue-icons-plus/ai'
+import axios from 'axios'
+import moment from 'moment'
+import API from '@/util/http'
+//这是获取用户信息的接口
+const adminData = ref({})
+const getAdminData = async function () {
+  try {
+    const result = await API({ url: '/admin/userinfo', data: {} })
+    adminData.value = result
+    rechargeVo.value.adminId = adminData.value.adminId
+    console.log('请求成功', result)
+    console.log('用户信息', adminData.value)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+// 变量
+// 充值明细表格
+const tableData = ref([])
+// 搜索===========================================
+// 搜索recharge
+const rechargeVo = ref({
+  adminId: adminData.value.adminId
+})
+// 搜索对象
+const getObj = ref({
+  pageNum: 1,
+  pageSize: 50
+})
+//分页总条目
+const total = ref(100)
+// 搜索对象时间
+const getTime = ref([])
+// 搜索活动列表
+const activity = ref([])
+// 所有信息
+const allData = ref([])
+// 搜索地区列表
+const area = ref([])
+//标签页默认高亮选项
+const activeName = ref('all')
+// 支付方式选项
+const payWay = [
+  {
+    value: '微信',
+    label: '微信'
+  },
+  {
+    value: '支付宝',
+    label: '支付宝'
+  },
+  {
+    value: '银联',
+    label: '银联'
+  },
+  {
+    value: '信用卡',
+    label: '信用卡'
+  },
+  {
+    value: '借记卡',
+    label: '借记卡'
+  },
+  {
+    value: '现金充值',
+    label: '现金充值'
+  }
+]
+// 删除==========================================================
+// 删除对象
+const delObj = ref({})
+
+// //表格高度
+// const tableHeight = computed(function () {
+//   return (getObj.value.pageSize + 2) * 60 + "px";
+// });
+
+// 方法
+// 合计数存储
+const trueGold = ref(0)
+const trueRGold = ref(0)
+const trueFGold = ref(0)
+//全部
+const totalmoney = ref(0)
+const totalRcoin = ref(0)
+const totalFcoin = ref(0)
+//待审核
+const pendingGold = ref(0)
+const pendingRGold = ref(0)
+const pendingFGold = ref(0)
+// 已通过金币数
+const approvedGold = ref(0)
+const approvedRGold = ref(0)
+const approvedFGold = ref(0)
+// 已驳回金币数
+const rejectedGold = ref(0)
+const rejectedRGold = ref(0)
+const rejectedFGold = ref(0)
+// 搜索===========================================================================
+// 搜索方法
+const get = async function (val) {
+  try {
+    // 地区赋值
+    if (adminData.value.area === '泰国') {
+      rechargeVo.value.areas = ['泰国', '越南']
+    } else if (adminData.value.area !== '总部') {
+      rechargeVo.value.area = adminData.value.area
+    }
+
+    // 搜索参数页码赋值
+    if (typeof val === 'number') {
+      getObj.value.pageNum = val
+    }
+    // 搜索参数时间赋值
+    if (getTime.value != null) {
+      if (getTime.value.startDate != '' && getTime.value.endDate != '') {
+        rechargeVo.value.startDate = getTime.value[0]
+        rechargeVo.value.endDate = getTime.value[1]
+      }
+    } else {
+      rechargeVo.value.startDate = ''
+      rechargeVo.value.endDate = ''
+    }
+    // 搜索参数赋值
+    rechargeVo.value.sortField = sortField.value
+    rechargeVo.value.sortOrder = sortOrder.value
+    console.log('搜索参数', getObj.value)
+    // 发送POST请求
+    const result = await API({
+      url: '/recharge/recharge',
+      data: { ...getObj.value, rechargeVo: { ...rechargeVo.value } }
+    })
+    // 复制一份 rechargeVo.value 并移除排序字段和排序方式
+    const detailWithoutSort = ref({
+      area: rechargeVo.value.area,
+      adminId: rechargeVo.value.adminId,
+      startDate: rechargeVo.value.startDate,
+      endDate: rechargeVo.value.endDate
+    })
+    const result2 = await API({
+      url: '/recharge/recharge/RechargeA',
+      data: {
+        ...detailWithoutSort.value
+      }
+    })
+    // 检查 result2 是否为空
+    if (!result2 || !result2.data || result2.data.length === 0) {
+      totalmoney.value = 0
+      totalRcoin.value = 0
+      totalFcoin.value = 0
+    }
+    if (result2.data) {
+      result2.data.forEach((item) => {
+        switch (item.auditStatus) {
+          case '待审核':
+            // 若 item.raudit 为空则赋值为 0
+            // 若 item.sumRaudit 为空则赋值为 0
+            pendingGold.value = item.sumRaudit || 0
+            pendingRGold.value = item.sumRaudit1 || 0
+            pendingFGold.value = item.sumRaudit2 || 0
+            break
+          case '已通过':
+            approvedGold.value = item.sumRaudit || 0
+            approvedRGold.value = item.sumRaudit1 || 0
+            approvedFGold.value = item.sumRaudit2 || 0
+            break
+          case '已驳回':
+            rejectedGold.value = item.sumRaudit || 0
+            rejectedRGold.value = item.sumRaudit1 || 0
+            rejectedFGold.value = item.sumRaudit2 || 0
+            break
+        }
+      })
+    }
+    trueGold.value = pendingGold.value + approvedGold.value + rejectedGold.value
+    trueRGold.value =
+      pendingRGold.value + approvedRGold.value + rejectedRGold.value
+    trueFGold.value =
+      pendingFGold.value + approvedFGold.value + rejectedFGold.value
+
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 存储表格数据
+    tableData.value = result.data.list
+    console.log('tableData', tableData.value)
+    // 存储分页总数
+    total.value = result.data.total
+    console.log('total', total.value)
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// 搜索
+const search = function () {
+  getObj.value.pageNum = 1
+  get()
+}
+// 重置
+const reset = function () {
+  delete rechargeVo.value.activityId
+  delete rechargeVo.value.payWay
+  delete rechargeVo.value.area
+  delete rechargeVo.value.startDate
+  delete rechargeVo.value.endDate
+  delete sortField.value
+  delete sortOrder.value
+  getTime.value = {}
+}
+// 今天
+const getToday = function () {
+  const today = new Date()
+  const startDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate()
+  )
+  const endDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('getTime', getTime.value)
+  get()
+}
+const handlePageSizeChange = function (val) {
+  getObj.value.pageSize = val
+  get()
+}
+const handleCurrentChange = function (val) {
+  getObj.value.pageNum = val
+  get()
+}
+// 昨天
+const getYesterday = function () {
+  const yesterday = new Date()
+  yesterday.setDate(yesterday.getDate() - 1)
+  const startDate = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate()
+  )
+  const endDate = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('getTime', getTime.value)
+  get()
+}
+// 近7天
+const get7Days = function () {
+  const today = new Date()
+  const startDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() - 6
+  )
+  const endDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('getTime', getTime.value)
+  get()
+}
+//全部充值明细
+const adminAll = function () {
+  console.log('adminAll')
+  rechargeVo.value.status = ''
+  getObj.value.pageNum = 1
+  get()
+}
+//待审核充值明细
+const adminWait = async function () {
+  rechargeVo.value.status = 0
+  getObj.value.pageNum = 1
+  await get()
+  console.log('adminWait')
+
+  trueGold.value = pendingGold.value
+  trueRGold.value = pendingRGold.value
+  trueFGold.value = pendingFGold.value
+}
+//已通过充值明细
+const adminPass = async function () {
+  rechargeVo.value.status = 1
+  getObj.value.pageNum = 1
+  await get()
+  trueGold.value = approvedGold.value
+  trueRGold.value = approvedRGold.value
+  trueFGold.value = approvedFGold.value
+  console.log('adminPass')
+}
+//已驳回充值明细
+const adminReject = async function () {
+  rechargeVo.value.status = 2
+  getObj.value.pageNum = 1
+  await get()
+  console.log('adminReject')
+  trueGold.value = rejectedGold.value
+  trueRGold.value = rejectedRGold.value
+  trueFGold.value = rejectedFGold.value
+}
+//点击标签页
+const handleClick = function (tab, event) {
+  if (tab.props.name === 'all') {
+    adminAll()
+  } else if (tab.props.name === 'wait') {
+    adminWait()
+  } else if (tab.props.name === 'pass') {
+    adminPass()
+  } else if (tab.props.name === 'reject') {
+    adminReject()
+  }
+}
+// 获取活动名称
+const getActivity = async function () {
+  try {
+    // 发送POST请求
+    const result = await API({ url: '/recharge/activity/select', data: {} })
+
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 存储表格数据
+    activity.value = result.data
+    console.log('activity', activity.value)
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// 获取地区
+// 获取地区
+const getArea = async function () {
+  try {
+    // 发送POST请求
+    const result = await API({ url: 'recharge/user/search', data: {} })
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 存储地区信息
+    area.value = result.data
+    console.log('地区', area.value)
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// 删除=================================
+// 点击删除按钮
+const del = function (row) {
+  delObj.value.rechargeId = row.rechargeId
+  console.log('delObj1', delObj.value)
+}
+// 确认删除按钮
+const delConfirm = async function () {
+  try {
+    console.log('delObj2', delObj.value)
+    const result = await API({
+      url: '/recharge/recharge/edit',
+      data: delObj.value
+    })
+    console.log('删除成功', result)
+    // 刷新表格数据
+    get()
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+// 验证跳转输入框的数字是否合法
+const checkNumber = function () {
+  if (typeof parseInt(getObj.value.pageNum) === 'number') {
+    console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
+    if (
+      getObj.value.pageNum > 0 &&
+      getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
+    ) {
+      getObj.value.pageNum = parseInt(getObj.value.pageNum)
+      console.log('输入的数字合法')
+      get()
+    } else {
+      //提示
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      })
+    }
+  } else {
+    //提示
+    ElMessage({
+      type: 'error',
+      message: '请检查输入内容'
+    })
+  }
+}
+
+// 挂载
+onMounted(async function () {
+  await getAdminData()
+  await get()
+  await getActivity()
+  await getArea()
+})
+// 新增排序字段和排序方式
+const sortField = ref('')
+const sortOrder = ref('')
+// 处理排序事件
+const handleSortChange = (column) => {
+
+  console.log('排序字段：', column.prop)
+  console.log('排序方式：', column.order)
+  if (column.prop === 'paidGold') {
+    sortField.value = 'paid_gold'
+  } else if (column.prop === 'freeGold') {
+    sortField.value = 'free_gold'
+  } else if (column.prop === 'rechargeTime') {
+    sortField.value = 'recharge_time'
+  } else if (column.prop === 'createTime') {
+    sortField.value = 'create_time'
+  } else if(column.prop === 'rechargeGold'){
+    sortField.value = 'recharge_gold'
+  }
+  sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC'
+  console.log('传递给后端的排序字段：', sortField.value)
+  console.log('传递给后端的排序方式：', sortOrder.value)
+  get()
+}
+</script>
+
+<template>
+    <el-row>
+    <el-col>
+      <el-card style="margin-bottom: 20px;margin-top: 10px">
+        <el-row style="margin-bottom: 10px">
+          <el-col :span="5">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">精网号：</el-text>
+              <el-input v-model="rechargeVo.jwcode" placeholder="请输入精网号" style="width: 150px" clearable />
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">活动名称：</el-text>
+              <el-select v-model="rechargeVo.activityId" placeholder="请选择活动名称"  style="width: 180px" 
+                clearable>
+                <el-option v-for="item in activity" :key="item.activityId" :label="item.activityName"
+                  :value="item.activityId" />
+              </el-select>
+            </div>
+          </el-col>
+
+          <el-col :span="6">
+            <div class="head-card-element" v-if="adminData.area == '总部'">
+              <el-text class="mx-1" size="large">所属地区：</el-text>
+              <el-select v-model="rechargeVo.area" placeholder="请选择所属地区" style="width: 180px" clearable>
+                <el-option v-for="item in area" :key="item" :label="item" :value="item" />
+              </el-select>
+            </div>
+          </el-col>
+          
+          <el-col :span="6">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">充值类型：</el-text>
+              <el-select v-model="rechargeVo.rechargeWay" placeholder="请选择支付方式" style="width: 180px" clearable>
+                <el-option v-for="item in rechargeWay" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </div>
+          </el-col>
+          
+        </el-row>
+        <el-row>
+          <el-col :span="21">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">充值时间：</el-text>
+              <el-date-picker
+                v-model="getTime"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="起始时间"
+                end-placeholder="结束时间"
+              />
+              <el-button style="margin-left: 10px" @click="getToday()"
+                >今</el-button
+              >
+              <el-button @click="getYesterday()">昨</el-button>
+              <el-button @click="get7Days()">近7天</el-button>
+            <!-- </div>
+          </el-col>
+          <el-col :span="3">
+            <div class="head-card-btn"> -->
+              <el-button type="success" @click="reset()">重置</el-button>
+              <el-button type="primary" @click="search()">查询</el-button>
+              <el-button type="primary" @click="exportExcel()">导出Excel</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-col>
+  </el-row>
+  <el-row>
+    <el-col>
+      <el-card>
+        <div>
+          充值金额：{{ trueRGold.toFixed(2) }}新币，永久金币：{{
+            trueRGold.toFixed(2)
+          }}金币，免费金币：{{ trueFGold }}金币
+        </div>
+        <!-- 设置表格容器的高度和滚动样式 -->
+        <div style="height: 520px; overflow-y: auto;margin-top: 10px;">
+          <el-table
+            :data="tableData"
+            style="width: 100%"
+            height="520px"
+            @sort-change="handleSortChange"
+          >
+            <el-table-column
+              type="index"
+              label="序号"
+              width="80px"
+              fixed="left"
+            >
+              <template #default="scope">
+                <span>{{
+                  scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
+                }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              fixed="left"
+              prop="username"
+              label="姓名"
+              width="80px"
+            />
+            <el-table-column
+              fixed="left"
+              prop="jwcode"
+              label="精网号"
+              width="80px"
+            />
+            <el-table-column prop="area" label="所属地区" width="100px" />
+            <el-table-column
+              prop="activityName"
+              label="活动名称"
+              width="100px"
+            />
+            <el-table-column prop="" label="货币名称" width="110px" />
+            <el-table-column
+              prop="paidGold"
+              sortable="custom"
+              label="充值金额"
+              width="110px"
+            />
+            <el-table-column
+              prop="paidGold"
+              label="永久金币"
+              sortable="custom"
+              width="110px"
+            />
+            <el-table-column
+              prop="freeGold"
+              label="免费金币"
+              sortable="custom"
+              width="110px"
+            />
+            <el-table-column
+              prop="rechargeWay"
+              label="充值方式"
+              width="100px"
+            />
+            <el-table-column prop="payWay" label="支付方式" width="100px" />
+            <el-table-column
+              prop="remark"
+              label="备注"
+              width="150px"
+              show-overflow-tooltip
+            />
+            
+            <!-- <el-table-column
+              prop="rechargeVoucher"
+              label="支付凭证"
+              width="150px"
+            >
+              <template #default="scope">
+                <el-image
+                  :preview-src-list="[scope.row.rechargeVoucher]"
+                  preview-teleported="true"
+                  :src="scope.row.rechargeVoucher"
+                  alt="凭证"
+                  style="width: 50px; height: 50px"
+                />
+              </template>
+            </el-table-column> -->
+            <el-table-column prop="name" label="提交人" width="100px" />
+            <!-- <el-table-column prop="status" label="状态" width="100px">
+              <template #default="scope">
+                <span v-if="scope.row.status === 1">
+                  <div class="status">
+                    <span class="green-dot"></span>
+                    <span>已通过</span>
+                  </div>
+                </span>
+                <span v-if="scope.row.status === 0">
+                  <div class="status">
+                    <span class="grey-dot"></span>
+                    <span>待审核</span>
+                  </div>
+                </span>
+                <span v-if="scope.row.status === 2">
+                  <div class="status">
+                    <span class="red-dot"></span>
+                    <span>已驳回</span>
+                  </div>
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="reson"
+              label="驳回理由"
+              width="200px"
+              show-overflow-tooltip
+            /> -->
+            <el-table-column
+              prop="rechargeTime"
+              sortable
+              label="充值时间"
+              width="200px"
+            >
+              <template #default="scope">
+                {{
+                  moment(scope.row.rechargeTime).format('YYYY-MM-DD HH:mm:ss')
+                }}
+              </template>
+            </el-table-column>
+            <!-- <el-table-column
+              prop="createTime"
+              sortable="custom"
+              label="提交时间"
+              width="200px"
+            />
+            <el-table-column
+              fixed="right"
+              prop="operation"
+              label="操作"
+              width="150px"
+            >
+              <template #default="scope">
+                <el-popconfirm
+                  title="确定将此条活动删除吗？"
+                  @confirm="delConfirm"
+                >
+                  <template #reference>
+                    <el-button type="primary" text @click="del(scope.row)">
+                      删除
+                    </el-button>
+                  </template>
+                  <template #actions="{ confirm, cancel }">
+                    <el-button size="small" @click="cancel">取消</el-button>
+                    <el-button type="primary" size="small" @click="confirm">
+                      确定
+                    </el-button>
+                  </template>
+                </el-popconfirm>
+              </template>
+            </el-table-column> -->
+          </el-table>
+        </div>
+
+        <!-- 分页 -->
+        <div class="pagination" style="margin-top: 20px">
+          <el-pagination
+            background
+            :page-size="getObj.pageSize"
+            :page-sizes="[5, 10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            @size-change="handlePageSizeChange"
+            @current-change="handleCurrentChange"
+          ></el-pagination>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+
+  <!-- 编辑弹窗 -->
+  <el-dialog
+    v-model="editRechargeVisible"
+    title="新增活动"
+    width="500"
+    :before-close="closeEditRechargeVisible"
+  >
+    <template #footer>
+      <el-form :model="editObj" label-width="auto" style="max-width: 600px">
+        <el-form-item label="活动名称:">
+          <el-input
+            v-model="addObj.activityName"
+            placeholder="请输入活动名称"
+            style="width: 220px"
+          />
+        </el-form-item>
+
+        <el-form-item label="免费金币:">
+          <el-radio-group v-model="addObj.freeGold">
+            <el-radio value="0">无赠送</el-radio>
+            <el-radio value="1">有赠送</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="免费金币兑换比:">
+          <el-input
+            v-model="addObj.rechargeRatio"
+            placeholder="请输入"
+            style="width: 80px"
+          />：1
+          <div style="color: grey">(提示：当前规则每10新币可兑换1免费金币)</div>
+        </el-form-item>
+
+        <el-form-item label="开始时间:">
+          <el-time-picker v-model="addObj.startTime" />
+        </el-form-item>
+
+        <el-form-item label="结束时间:">
+          <el-time-picker v-model="addObj.endTime" />
+        </el-form-item>
+
+        <el-form-item label="添加人:">
+          <el-input v-model="addObj.adminName" disabled style="width: 220px" />
+        </el-form-item>
+      </el-form>
+
+      <div class="dialog-footer">
+        <el-button @click="closeAddActivityVisible">取消</el-button>
+        <el-button type="primary" @click="closeAddActivityVisible">
+          提交
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.pagination {
+  display: flex;
+}
+
+.status {
+  display: flex;
+}
+
+.head-card {
+  display: flex;
+}
+
+.head-card-element {
+  margin-right: 20px;
+}
+
+.head-card-btn {
+  margin-left: auto;
+}
+</style>
diff --git a/src/views/refund/addCoinRefund.vue b/src/views/refund/addCoinRefund.vue
new file mode 100644
index 0000000..e67ae21
--- /dev/null
+++ b/src/views/refund/addCoinRefund.vue
@@ -0,0 +1,546 @@
+<script setup>
+import { onMounted, reactive } from 'vue'
+import { ref, computed, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
+import axios from 'axios'
+import { ElMessageBox } from 'element-plus'
+import API from '@/util/http'
+import moment from 'moment'
+// import _ from 'lodash'
+
+const addRe = ref({
+  typeR: '0'
+})
+//这是获取用户信息的接口
+const adminData = ref({})
+const getAdminData = async function () {
+  try {
+    const result = await API({ url: '/admin/userinfo', data: {} })
+    adminData.value = result
+    addRefund.value.adminId = adminData.value.adminId
+    console.log('请求成功', result)
+    console.log('用户信息', user.value)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+// 精网号去空格
+const trimJwCode = () => {
+  if (addRefund.value.jwcode) {
+    addRefund.value.jwcode = addRefund.value.jwcode.replace(/\s/g, ''); 
+  }
+}
+// 这是添加退款信息的表单
+const addRefund = ref({
+  updateType: '3',
+  allCoin: 0,
+  orderCode: '',
+  refundGoods: '',
+  freeCoin: 0,
+  rechargeCoin: 0,
+  taskCoin: 0
+})
+// 取消按钮
+const cancel = function () {
+  addRefund.value = {}
+  addRefund.value.updateType = '3'
+  addRefund.value.rechargeCoin = 0
+  addRefund.value.freeCoin = 0
+  addRefund.value.taskCoin = 0
+  addRefund.value.allCoin = 0
+  addRe.value.typeR = 0
+  addRefund.value.adminId = adminData.value.adminId
+}
+// 这是添加退款信息的接口
+const add = async function () {
+  try {
+    // 发送POST请求
+    const result = await API({ url: '/refund/add', data: addRefund.value })
+    if (result.code === 0) {
+      ElMessage.error(result.msg)
+      return
+    }
+    console.log('请求成功', result)
+    ElMessage.success('添加成功')
+    // 重置表单
+    addRefund.value = {}
+    addRefund.value.adminId = adminData.value.adminId
+    addRefund.value.updateType = '3'
+    addRefund.value.allCoin = 0
+    addRefund.value.orderCode = ''
+    addRefund.value.refundGoods = ''
+    addRefund.value.freeCoin = 0
+    addRefund.value.rechargeCoin = 0
+    addRefund.value.taskCoin = 0
+    addRefund.value.typeR = 0
+    user.value = {}
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+const addBefore = () => {
+  Ref.value.validate(async (valid) => {
+    if (valid) {
+      ElMessageBox.confirm('确认添加？')
+        .then(() => {
+          add()
+          console.log('添加成功')
+          addRefund.value.allCoin = 0
+          ;(addRefund.value.freeCoin = 0),
+            (addRefund.value.rechargeCoin = 0),
+            (addRefund.value.taskCoin = 0),
+            (addRefund.value = {})
+        })
+        .catch(() => {
+          console.log('取消添加')
+        })
+    } else {
+      //提示
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      })
+    }
+  })
+}
+
+// 表单验证
+// 开始时间改变时，重新验证结束时间
+const Ref = ref(null)
+const startChange = (val) => {}
+
+const rules = reactive({
+  jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }],
+  refundType: [{ required: true, message: '请选择退款类型', trigger: 'blur' }],
+  orderCode: [{ required: true, message: '请选择退款商品', trigger: 'blur' }],
+  taskCoin: [{ required: true, message: '请输入任务金币', trigger: 'blur' }],
+  freeCoin: [{ required: true, message: '请输入免费金币', trigger: 'blur' }],
+  rechargeCoin: [
+    { required: true, message: '请输入永久金币', trigger: 'blur' }
+  ],
+  allCoin: [
+    { required: true, message: '请选择付款方式', trigger: 'blur' },
+    {
+      validator: (rule, value) => {
+        if (value === 0) {
+          return Promise.reject(new Error('总金币不能为0'))
+        }
+        return Promise.resolve()
+      },
+      trigger: 'blur'
+    }
+  ]
+})
+
+// 查找客户信息的方法
+const user = ref({
+  firstRechargeTime: ''
+})
+const getUser = async function (jwcode) {
+  trimJwCode();
+  try {
+    // 发送POST请求
+    const result = await API({
+      url: 'http://192.168.8.247:8081/user/selectUser',
+      data: {
+        jwcode: addRefund.value.jwcode,
+        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 calculatedAllGold = computed(() => {
+  const sum =
+    Number(addRefund.value.freeCoin) +
+    Number(addRefund.value.rechargeCoin) +
+    Number(addRefund.value.taskCoin)
+  return !isNaN(sum) ? sum : 0
+})
+
+watch(calculatedAllGold, (newVal) => {
+  addRefund.value.allCoin = newVal
+})
+
+const AAA = computed(() => {
+  return addRefund.value.jwcode
+})
+
+watch(AAA, (newVal) => {})
+
+// 退款类型选项
+const refundType = [
+  {
+    value: '退款商品',
+    label: '退款商品'
+  }
+]
+
+// 根据精网号查询商品
+// 查什么？？？？？
+const goods = ref([])
+const getGoods = async function (jwcode) {
+  trimJwCode();
+  try {
+    // 发送POST请求
+    const result = await API({
+      url: '/consume/getDeatil',
+      data: {
+        jwcode: addRefund.value.jwcode,
+        area: adminData.value.area
+      }
+    })
+    console.log('请求成功', result)
+
+    if (result.code === 0) {
+      ElMessage.error(result.msg)
+    } else {
+      // 存储表格数据
+      goods.value = result.data
+      console.log('用户信息', goods.value)
+      ElMessage.success(result.msg)
+    }
+  } catch (error) {
+    console.log('请求失败', error)
+    ElMessage.error('查询失败，请检查精网号是否正确')
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+const calculatedRechargeGoods = computed(() => {
+  return (
+    +addRefund.value.freeCoin +
+    +addRefund.value.rechargeCoin +
+    +addRefund.value.taskCoin
+  )
+})
+watch(calculatedRechargeGoods, (newVal) => {
+  addRefund.value.allCoin = newVal
+})
+watch(calculatedRechargeGoods, (newVal) => {
+  addRefund.value.allCoin = newVal
+  console.log('计算的总金币', newVal)
+})
+
+// 绑定两个数据
+
+// 这是根据订单号查询消费信息的方法
+const getProductByOrderCode = async function (item) {
+  try {
+    // 发送POST请求
+    const result = await API({
+      url: '/refund/searchByOrderCode?orderCode=' + item,
+      data: {}
+    })
+    addRefund.value.contactId = result.data.detailyId
+    addRefund.value.refundGoods = result.data.productName
+    addRefund.value.orderCode = result.data.orderCode
+    addRefund.value.taskCoin = (result.data.taskCoin * -1) / 100
+    addRefund.value.freeCoin = (result.data.freeCoin * -1) / 100
+    addRefund.value.rechargeCoin = (result.data.rechargeCoin * -1) / 100
+    addRefund.value.allCoin =
+      (result.data.taskCoin * -1 +
+        result.data.freeCoin * -1 +
+        result.data.rechargeCoin * -1) /
+      100
+    console.log('请求成功', addRefund.value)
+    if (result.data.code === 0) {
+      ElMessage.error(result.data.msg)
+    } else {
+      ElMessage.success('选择成功')
+    }
+  } catch (error) {
+    console.log('请求失败', error)
+    ElMessage.error('查询失败，请检查精网号是否正确')
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+const handleSelectionChange = (value) => {
+  getProductByOrderCode(value)
+  console.log('选择的订单号', value)
+  const selectedItem = goods.value.find((item) => item.detailId === value)
+}
+// 挂载
+onMounted(async function () {
+  await getAdminData()
+})
+</script>
+
+<template>
+  <div >
+
+  <el-form
+    :model="addRefund"
+    ref="Ref"
+    :rules="rules"
+    label-width="auto"
+    style="max-width: 750px"
+    class="form-style"
+  >
+    <el-form-item prop="jwcode" label="精网号">
+      <el-input
+        v-model="addRefund.jwcode"
+        style="width: 220px"
+        @change="getGoods(addRefund.jwcode)"
+      />
+      <el-button
+        type="primary"
+        @click="getUser(addRefund.jwcode)"
+        style="margin-left: 20px"
+        >查询</el-button
+      >
+    </el-form-item>
+    <el-form-item prop="refundType" label="退款类型">
+      <el-select
+        v-model="addRefund.refundType"
+        placeholder="请选择"
+        style="width: 300px"
+      >
+        <el-option
+          v-for="item in refundType"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item prop="orderCode" label="商品名">
+      <el-select
+        v-model="addRefund.orderCode"
+        placeholder="请选择"
+        style="width: 300px"
+        @change="handleSelectionChange"
+      >
+        <el-option
+          v-for="item in goods"
+          :key="item.value"
+          :label="item.productName + item.orderCode"
+          :value="item.orderCode"
+        />
+      </el-select>
+    </el-form-item>
+
+    <el-form-item prop="typeR" label="退款方式:">
+      <el-radio-group v-model="addRe.typeR">
+        <el-radio value="0" @change="addRe.typeR = '0'">全部退款</el-radio>
+        <el-radio value="1">部分退款</el-radio>
+      </el-radio-group>
+    </el-form-item>
+
+    <div style="display: flex; align-items: center">
+      <el-form-item prop="rechargeCoin" label="永久金币" style="float: left">
+        <el-input
+          v-model="addRefund.rechargeCoin"
+          style="width: 100px"
+          :disabled="addRe.typeR === '0' ? true : false"
+        >
+        </el-input>
+        <p>个</p>
+      </el-form-item>
+      <el-form-item
+        prop="freeCoin"
+        label="免费金币"
+        style="margin-left: -20px; float: left"
+      >
+        <el-input
+          v-model="addRefund.freeCoin"
+          style="float: left; width: 100px"
+          :disabled="addRe.typeR === '0' ? true : false"
+        />
+        <p>个</p>
+      </el-form-item>
+      <el-form-item prop="taskCoin" label="任务金币" style="margin-left: -20px">
+        <el-input
+          v-model="addRefund.taskCoin"
+          style="float: left; width: 100px"
+          :disabled="addRe.typeR === '0' ? true : false"
+        />
+        <p>个</p>
+      </el-form-item>
+    </div>
+    <el-form-item prop="allCoin" label="退款金币总数">
+      <el-input disabled v-model="addRefund.allCoin" style="width: 100px">
+      </el-input>
+    </el-form-item>
+    <el-form-item prop="remark" label="备注">
+      <el-input
+        v-model="addRefund.remark"
+        style="width: 300px"
+        :rows="2"
+        maxlength="100"
+        show-word-limit
+        type="textarea"
+      />
+    </el-form-item>
+    <el-form-item prop="commitName" label="提交人">
+      <el-input
+        style="width: 300px"
+        :value="adminData.name"
+        disabled
+        placeholder="提交人姓名"
+      />
+    </el-form-item>
+    <el-button type="success" @click="cancel()" style="margin-left: 280px">重置</el-button>
+    <el-button type="primary" @click="addBefore"> 提交 </el-button>
+  </el-form>
+
+  <!-- 客户信息栏 -->
+  <el-card style="width: 850px; float: right" class="customer-info">
+    <el-form
+      :model="user"
+      label-width="auto"
+      style="max-width: 1000px"
+      label-position="left"
+    >
+      <el-text size="large" style="margin-left: 20px">客户信息</el-text>
+      <el-row style="margin-top: 20px">
+        <el-col :span="10">
+          <el-form-item label="姓名:">
+            <p>{{ user.name }}</p>
+          </el-form-item>
+        </el-col>
+        <el-col :span="14">
+          <el-form-item label="历史金币总数">
+            <!-- 检查 user.totalRechargeGold 是否为有效的数字 -->
+            <p v-if="!isNaN(Number(user.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>
+</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/refund/coinRefund.vue b/src/views/refund/coinRefund.vue
index e29bd2a..482e909 100644
--- a/src/views/refund/coinRefund.vue
+++ b/src/views/refund/coinRefund.vue
@@ -1,1310 +1,61 @@
-<script setup>
-import { onMounted, reactive } from 'vue'
-import { ref, computed, watch } from 'vue'
-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('用户信息请求成功', user.value)
-    console.log('adminData信息', adminData.value)
-  } catch (error) {
-    console.log('用户信息请求失败', error)
-
-  }
-}
-// 精网号去空格
-const trimJwCode = () => {
-  if (addRefund.value.jwcode) {
-    addRefund.value.jwcode = addRefund.value.jwcode.replace(/\s/g, ''); 
-  }
-}
-// 这是添加退款信息的表单
-const addRefund = ref({
-  updateType: '3',
-  allCoin: 0,
-  orderCode: '',
-  refundGoods: '',
-  freeCoin: 0,
-  rechargeCoin: 0,
-  taskCoin: 0
-})
-// 取消按钮
-const cancel = function () {
-  addRefund.value = {}
-  addRefund.value.updateType = '3'
-  addRefund.value.rechargeCoin = 0
-  addRefund.value.freeCoin = 0
-  addRefund.value.taskCoin = 0
-  addRefund.value.allCoin = 0
-  addRe.value.typeR = 0
-  addRefund.value.adminId = adminData.value.adminId
-}
-// 这是添加退款信息的接口
-const add = async function () {
-  try {
-    // 发送POST请求
-    const result = await API({ url: '/refund/add', data: addRefund.value })
-    if (result.code === 0) {
-      ElMessage.error(result.msg)
-      return
-    }
-    console.log('add请求成功', result)
-    ElMessage.success('添加成功')
-    // 重置表单
-    addRefund.value = {}
-    addRefund.value.adminId = adminData.value.adminId
-    addRefund.value.updateType = '3'
-    addRefund.value.allCoin = 0
-    addRefund.value.orderCode = ''
-    addRefund.value.refundGoods = ''
-    addRefund.value.freeCoin = 0
-    addRefund.value.rechargeCoin = 0
-    addRefund.value.taskCoin = 0
-    addRefund.value.typeR = 0
-    user.value = {}
-  } catch (error) {
-    console.log('添加退款请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-}
-const addBefore = () => {
-  Ref.value.validate(async (valid) => {
-    if (valid) {
-      ElMessageBox.confirm('确认添加？')
-        .then(() => {
-          add()
-          console.log('添加成功')
-          addRefund.value.allCoin = 0
-          ;(addRefund.value.freeCoin = 0),
-            (addRefund.value.rechargeCoin = 0),
-            (addRefund.value.taskCoin = 0),
-            (addRefund.value = {})
-        })
-        .catch(() => {
-          console.log('取消添加')
-        })
-    } else {
-      //提示
-      ElMessage({
-        type: 'error',
-        message: '请检查输入内容'
-      })
-    }
-  })
-}
-
-// 表单验证
-// 开始时间改变时，重新验证结束时间
-const Ref = ref(null)
-const startChange = (val) => {}
-
-const rules = reactive({
-  jwcode: [{ required: true, message: '请输入精网号', trigger: 'blur' }],
-  refundType: [{ required: true, message: '请选择退款类型', trigger: 'blur' }],
-  orderCode: [{ required: true, message: '请选择退款商品', trigger: 'blur' }],
-  taskCoin: [{ required: true, message: '请输入任务金币', trigger: 'blur' },
-    {
-      validator: (rule, value) => {
-        if (value < 0) {
-          return Promise.reject(new Error('任务金币至少为0'))
-        }
-        return Promise.resolve()
-      }, 
-    }
-  ],
-  freeCoin: [{ required: true, message: '请输入免费金币', trigger: 'blur' },
-    {
-      validator: (rule, value) => {
-        if (value < 0) {
-          return Promise.reject(new Error('免费金币至少为0'))
-        }
-        return Promise.resolve()
-      }, 
-    }
-  ],
-  rechargeCoin: [
-    { required: true, message: '请输入永久金币', trigger: 'blur' },
-    {
-      validator: (rule, value) => {
-        if (value < 0) {
-          return Promise.reject(new Error('永久金币至少为0'))
-        }
-        return Promise.resolve()
-      }, 
-    }
-  ],
-  allCoin: [
-    { required: true, message: '请选择付款方式', trigger: 'blur' },
-    {
-      validator: (rule, value) => {
-        if (value === 0) {
-          return Promise.reject(new Error('总金币不能为0'))
-        }
-        return Promise.resolve()
-      },
-      trigger: 'blur'
-    }
-  ]
-})
-
-// 查找客户信息的方法
-const user = ref({
-  firstRechargeTime: ''
-})
-const getUser = async function (jwcode) {
-  trimJwCode();
-  try {
-    // 发送POST请求
-    const result = await API({
-      url: '/recharge/user',
-      data: {
-        jwcode: addRefund.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 calculatedAllGold = computed(() => {
-  const sum =
-    Number(addRefund.value.freeCoin) +
-    Number(addRefund.value.rechargeCoin) +
-    Number(addRefund.value.taskCoin)
-  return !isNaN(sum) ? sum : 0
-})
-
-watch(calculatedAllGold, (newVal) => {
-  addRefund.value.allCoin = newVal
-})
-
-const AAA = computed(() => {
-  return addRefund.value.jwcode
-})
-
-watch(AAA, (newVal) => {})
-
-// 退款类型选项
-const refundType = [
-  {
-    value: '退款商品',
-    label: '退款商品'
-  }
-]
-
-// 根据精网号查询商品
-// 查询对应精网号购买过的商品
-const goods = ref([])
-const getGoods = async function (jwcode) {
-  trimJwCode();
-  try {
-    // 发送POST请求
-    const result = await API({
-      url: '/consume/getDeatil',
-      data: {
-        jwcode: addRefund.value.jwcode,
-        area: adminData.value.area
-      }
-    })
-    console.log('goods请求成功', result)
-
-    if (result.code === 0) {
-      ElMessage.error(result.msg)
-    } else {
-      // 存储表格数据
-      goods.value = result.data
-      console.log('用户信息', goods.value)
-      ElMessage.success(result.msg)
-    }
-  } catch (error) {
-    console.log('商品goods请求失败', error)
-    ElMessage.error('商品查询失败')
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-}
-const calculatedRechargeGoods = computed(() => {
-  return (
-    +addRefund.value.freeCoin +
-    +addRefund.value.rechargeCoin +
-    +addRefund.value.taskCoin
-  )
-})
-watch(calculatedRechargeGoods, (newVal) => {
-  addRefund.value.allCoin = newVal
-})
-watch(calculatedRechargeGoods, (newVal) => {
-  addRefund.value.allCoin = newVal
-  console.log('计算的总金币', newVal)
-})
-
-// 绑定两个数据
-
-// 这是根据订单号查询消费信息的方法
-const getProductByOrderCode = async function (item) {
-  try {
-    // 发送POST请求
-    const result = await API({
-      url: '/refund/searchByOrderCode?orderCode=' + item,
-      data: {}
-    })
-    addRefund.value.contactId = result.data.detailyId
-    addRefund.value.refundGoods = result.data.productName
-    addRefund.value.orderCode = result.data.orderCode
-    addRefund.value.taskCoin = (result.data.taskCoin * -1) / 100
-    addRefund.value.freeCoin = (result.data.freeCoin * -1) / 100
-    addRefund.value.rechargeCoin = (result.data.rechargeCoin * -1) / 100
-    addRefund.value.allCoin =
-      (result.data.taskCoin * -1 +
-        result.data.freeCoin * -1 +
-        result.data.rechargeCoin * -1) /
-      100
-    console.log('addRefund请求成功', addRefund.value)
-    if (result.data.code === 0) {
-      ElMessage.error(result.data.msg)
-    } else {
-      ElMessage.success('选择成功')
-    }
-  } catch (error) {
-    console.log('精网号查询请求失败', error)
-    ElMessage.error('查询失败，请检查精网号是否正确')
-    // 在这里可以处理错误逻辑，比如显示错误提示等
-  }
-}
-const handleSelectionChange = (value) => {
-  getProductByOrderCode(value)
-  console.log('选择的订单号', value)
-  const selectedItem = goods.value.find((item) => item.detailId === value)
-}
-
-
-// 金币退款明细相关逻辑----------------------------------------------------------------------
-//充值明细表格
-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>
-  <el-button-group>
-    <!-- 切换后状态显示样式否则是默认样式 -->
-      <el-button 
-        :type="activeTab === 'addRefund' ? 'primary' : 'default'" 
-        @click="changeTab('addRefund')"
+    <!-- 这里放置标签切换的按钮 -->
+    <el-button-group>
+    <!-- 切换后状态显示 primary 样式否则是默认样式 -->
+      <el-button
+        :type="activeTab === 'add' ? 'primary' : 'default'"
+        @click="goToAdd"
       >
         新增退款
       </el-button>
-      <el-button 
-        :type="activeTab === 'detail' ? 'primary' : 'default'" 
-        @click="changeTab('detail')"
+      <el-button
+        :type="activeTab === 'detail' ? 'primary' : 'default'"
+        @click="goToDetail"
       >
         金币退款明细
       </el-button>
     </el-button-group>
-
-  <!-- 根据activeTab切换显示内容 -->
-   <!-- 新增退款的布局---------------------------------------------------------- -->
-   <div v-if="activeTab === 'addRefund'">
-  <!-- <div style="font-weight: bold">新增退款</div> -->
-
-  <el-form
-    :model="addRefund"
-    ref="Ref"
-    :rules="rules"
-    label-width="auto"
-    style="max-width: 750px"
-    class="form-style"
-  >
-    <el-form-item prop="jwcode" label="精网号">
-      <el-input
-        v-model="addRefund.jwcode"
-        style="width: 220px"
-        @change="getGoods(addRefund.jwcode)"
-      />
-      <el-button
-        type="primary"
-        @click="getUser(addRefund.jwcode)"
-        style="margin-left: 20px"
-        >查询</el-button
-      >
-    </el-form-item>
-    <el-form-item prop="refundType" label="退款类型">
-      <el-select
-        v-model="addRefund.refundType"
-        placeholder="请选择"
-        style="width: 300px"
-      >
-        <el-option
-          v-for="item in refundType"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        />
-      </el-select>
-    </el-form-item>
-    <el-form-item prop="orderCode" label="商品名">
-      <el-select
-        v-model="addRefund.orderCode"
-        placeholder="请选择"
-        style="width: 300px"
-        @change="handleSelectionChange"
-      >
-        <el-option
-          v-for="item in goods"
-          :key="item.value"
-          :label="item.productName + item.orderCode"
-          :value="item.orderCode"
-        />
-      </el-select>
-    </el-form-item>
-
-    <el-form-item prop="typeR" label="退款方式:">
-      <el-radio-group v-model="addRe.typeR">
-        <el-radio value="0" @change="addRe.typeR = '0'">全部退款</el-radio>
-        <el-radio value="1">部分退款</el-radio>
-      </el-radio-group>
-    </el-form-item>
-
-    <div style="display: flex; align-items: center">
-      <el-form-item prop="rechargeCoin" label="永久金币" style="float: left">
-        <el-input
-          v-model="addRefund.rechargeCoin"
-          style="width: 100px"
-          :disabled="addRe.typeR === '0' ? true : false"
-        >
-        </el-input>
-        <p>个</p>
-      </el-form-item>
-      <el-form-item
-        prop="freeCoin"
-        label="免费金币"
-        style="margin-left: -20px; float: left"
-      >
-        <el-input
-          v-model="addRefund.freeCoin"
-          style="float: left; width: 100px"
-          :disabled="addRe.typeR === '0' ? true : false"
-        />
-        <p>个</p>
-      </el-form-item>
-      <el-form-item prop="taskCoin" label="任务金币" style="margin-left: -20px">
-        <el-input
-          v-model="addRefund.taskCoin"
-          style="float: left; width: 100px"
-          :disabled="addRe.typeR === '0' ? true : false"
-        />
-        <p>个</p>
-      </el-form-item>
-    </div>
-    <el-form-item prop="allCoin" label="退款金币总数">
-      <el-input disabled v-model="addRefund.allCoin" style="width: 100px">
-      </el-input>
-    </el-form-item>
-    <el-form-item prop="remark" label="备注">
-      <el-input
-        v-model="addRefund.remark"
-        style="width: 300px"
-        :rows="2"
-        maxlength="100"
-        show-word-limit
-        type="textarea"
-      />
-    </el-form-item>
-    <el-form-item prop="commitName" label="提交人">
-      <el-input
-        style="width: 300px"
-        :value="adminData.name"
-        disabled
-        placeholder="提交人姓名"
-      />
-    </el-form-item>
-    <el-button type="success" @click="cancel()" style="margin-left: 280px">重置</el-button>
-    <el-button type="primary" @click="addBefore"> 提交 </el-button>
-  </el-form>
-
-  <!-- 客户信息栏 -->
-  <el-card style="width: 850px; float: right" class="customer-info">
-    <el-form
-      :model="user"
-      label-width="auto"
-      style="max-width: 1000px"
-      label-position="left"
-    >
-      <el-text size="large" style="margin-left: 20px">客户信息</el-text>
-      <el-row style="margin-top: 20px">
-        <el-col :span="10">
-          <el-form-item label="姓名:">
-            <p>{{ user.name }}</p>
-          </el-form-item>
-        </el-col>
-        <el-col :span="14">
-          <el-form-item label="历史金币总数">
-            <!-- 检查 user.totalRechargeGold 是否为有效的数字 -->
-            <p v-if="!isNaN(Number(user.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-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>
+    <!-- 渲染子路由组件 -->
+    <router-view></router-view>
   </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;
-}
-
-.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);
+<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 === 'coinRefundDetail' ? 'detail' : 'add');
+//也就是说如果当前在coinRefundDetail页面，那么就是detail，否则默认情况都展示add页面
+//此时获取到的路由信息是coinRefund，所以默认是add
+
+
+const goToAdd = () => {
+  // 点击按钮时更新 activeTab 为 add
+  activeTab.value = 'add';
+  router.push({ name: 'addCoinRefund' });
+};
+
+const goToDetail = () => {
+  // 点击按钮时更新 activeTab 为 detail
+  activeTab.value = 'detail';
+  router.push({ name: 'coinRefundDetail' });
+};
+
+// 监听路由变化，更新 activeTab
+watch(() => route.name, (newName) => {
+  if (newName === 'addCoinRefund') {
+    activeTab.value = 'add';
+  } else if (newName === 'coinRefundDetail') {
+    activeTab.value = 'detail';
+  }
+});
+
+// 当进入父路由时，默认跳转到新增消耗页面
+if (route.name === 'coinRefund') {
+  router.push({ name: 'addCoinRefund' });
 }
-</style>
+</script>
diff --git a/src/views/refund/coinRefundDetail.vue b/src/views/refund/coinRefundDetail.vue
new file mode 100644
index 0000000..c9eea7c
--- /dev/null
+++ b/src/views/refund/coinRefundDetail.vue
@@ -0,0 +1,735 @@
+<script setup>
+// 这是退款明细页面
+import { ref, onMounted, reactive, computed } from 'vue'
+import ElementPlus from 'element-plus'
+import { AiFillRead } from 'vue-icons-plus/ai'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import axios from 'axios'
+import moment from 'moment'
+import API from '@/util/http'
+// 变量
+//这是获取用户信息的接口
+const adminData = ref({})
+const getAdminData = async function () {
+  try {
+    const result = await API({ url: '/admin/userinfo', data: {} })
+
+    adminData.value = result
+    console.log('请求成功', result)
+    console.log('用户信息', adminData.value)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+// 充值明细表格
+const tableData = ref([])
+// 搜索======================================
+// 搜索detail
+const detail = ref({})
+// 搜索对象
+const getObj = ref({
+  pageNum: 1,
+  pageSize: 50
+})
+//分页总条目
+const total = ref(100)
+// 搜索对象时间
+const getTime = ref([])
+// 所有信息
+const allData = ref([])
+// 搜索地区列表
+const area = ref([])
+
+//标签页默认高亮选项
+const activeName = ref('all')
+
+// 退款类型
+const consumeType = [
+  {
+    value: '退款商品',
+    label: '退款商品'
+  }
+]
+
+// //表格高度
+// const tableHeight = computed(function () {
+//   return (getObj.value.pageSize + 2) * 45 + "px";
+// });
+
+// 方法
+// 统计合计数
+const trueGold = ref(0)
+const trueRgold = ref(0)
+const trueFgold = ref(0)
+const trueTgold = ref(0)
+// 待审核各种类金币数
+const pendingRgold = ref(0)
+const pendingFgold = ref(0)
+const pendingTgold = ref(0)
+// 待审核金币数
+const pendingGold = ref(0)
+// 已通过各种类金币数
+const approvedRgold = ref(0)
+const approvedFgold = ref(0)
+const approvedTgold = ref(0)
+// 已通过金币数
+const approvedGold = ref(0)
+// 已驳回各种类金币数
+const rejectedRgold = ref(0)
+const rejectedFgold = ref(0)
+const rejectedTgold = ref(0)
+// 已驳回金币数
+const rejectedGold = ref(0)
+// 搜索==============================================================
+// 搜索方法
+const get = async function (val) {
+  try {
+    // 地区赋值
+    if (adminData.value.area === '泰国') {
+      detail.value.areas = ['泰国', '越南']
+    } else if (adminData.value.area !== '总部') {
+      detail.value.area = adminData.value.area
+    }
+    // 搜索参数页码赋值
+    if (typeof val === 'number') {
+      getObj.value.pageNum = val
+    }
+    // 搜索参数时间赋值
+    if (getTime.value != null) {
+      if (getTime.value.startDate != '' && getTime.value.endDate != '') {
+        detail.value.startDate = getTime.value[0]
+        detail.value.endDate = getTime.value[1]
+      }
+    } else {
+      detail.value.startDate = ''
+      detail.value.endDate = ''
+    }
+    // 添加排序字段和排序方式到请求参数
+    detail.value.sortField = sortField.value
+    detail.value.sortOrder = sortOrder.value
+    console.log('搜索参数', getObj.value)
+    // 发送POST请求
+    const result = await API({
+      url: '/refund/search',
+      data: {
+        ...getObj.value,
+        detail: { ...detail.value }
+      }
+    })
+    // 复制一份 detail.value 并移除排序字段和排序方式
+    const detailWithoutSort = { ...detail.value }
+    delete detailWithoutSort.sortField
+    delete detailWithoutSort.sortOrder
+
+    const result2 = await API({
+      url: '/refund/RefundA',
+      data: {
+        ...detailWithoutSort
+      }
+    })
+    // 统计合计数
+    if (result2.data) {
+      result2.data.forEach((item) => {
+        switch (item.status) {
+          case '待审核':
+            // 若 item.raudit 为空则赋值为 0
+            pendingRgold.value = item.sumRaudit1 || 0
+            pendingFgold.value = item.sumRaudit2 || 0
+            pendingTgold.value = item.sumRaudit3 || 0
+            // 若 item.sumRaudit 为空则赋值为 0
+            pendingGold.value = item.sumRaudit || 0
+            break
+          case '已通过':
+            approvedRgold.value = item.sumRaudit1 || 0
+            approvedFgold.value = item.sumRaudit2 || 0
+            approvedTgold.value = item.sumRaudit3 || 0
+            approvedGold.value = item.sumRaudit || 0
+            break
+          case '已驳回':
+            rejectedRgold.value = item.sumRaudit1 || 0
+            rejectedFgold.value = item.sumRaudit2 || 0
+            rejectedTgold.value = item.sumRaudit3 || 0
+            rejectedGold.value = item.sumRaudit || 0
+            break
+        }
+      })
+    }
+
+    trueFgold.value =
+      pendingFgold.value + approvedFgold.value + rejectedFgold.value
+    trueRgold.value =
+      pendingRgold.value + approvedRgold.value + rejectedRgold.value
+    trueTgold.value =
+      pendingTgold.value + approvedTgold.value + rejectedTgold.value
+    trueGold.value = pendingGold.value + approvedGold.value + rejectedGold.value
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 存储表格数据
+    tableData.value = result.data.list
+    console.log('tableData', tableData.value)
+    // 存储分页总数
+    total.value = result.data.total
+    console.log('total', total.value)
+    // 调用分类的方法
+    handleClick()
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// 搜索
+const search = function () {
+  getObj.value.pageNum = 1
+  get()
+}
+// 重置
+const reset = function () {
+  detail.value.refundGoods = ''
+  detail.value.refundType = ''
+  detail.value.area = ''
+  detail.value.startDate = ''
+  detail.value.endDate = ''
+  sortField.value = ''
+  sortOrder.value = ''
+  getTime.value = {}
+}
+// 今天
+const getToday = function () {
+  const today = new Date()
+  const startDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate()
+  )
+  const endDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('getTime', getTime.value)
+  get()
+}
+// 昨天
+const getYesterday = function () {
+  const yesterday = new Date()
+  yesterday.setDate(yesterday.getDate() - 1)
+  const startDate = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate()
+  )
+  const endDate = new Date(
+    yesterday.getFullYear(),
+    yesterday.getMonth(),
+    yesterday.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('getTime', getTime.value)
+  get()
+}
+// 近7天
+const get7Days = function () {
+  const today = new Date()
+  const startDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() - 6
+  )
+  const endDate = new Date(
+    today.getFullYear(),
+    today.getMonth(),
+    today.getDate() + 1
+  )
+  getTime.value = [startDate, endDate]
+  console.log('getTime', getTime.value)
+  get()
+}
+//全部充值明细
+const adminAll = function () {
+  console.log('adminAll')
+  detail.value.status = ''
+  getObj.value.pageNum = 1
+
+  get()
+  trueFgold.value =
+    pendingFgold.value + approvedFgold.value + rejectedFgold.value
+  trueRgold.value =
+    pendingRgold.value + approvedRgold.value + rejectedRgold.value
+  trueTgold.value =
+    pendingTgold.value + approvedTgold.value + rejectedTgold.value
+  trueGold.value = pendingGold.value + approvedGold.value + rejectedGold.value
+}
+//待审核充值明细
+const adminWait = async function () {
+  detail.value.status = 0
+  getObj.value.pageNum = 1
+  await get()
+  console.log('adminWait')
+  trueFgold.value = pendingFgold.value
+  trueRgold.value = pendingRgold.value
+  trueTgold.value = pendingTgold.value
+  trueGold.value = pendingGold.value
+}
+//已通过充值明细
+const adminPass = async function () {
+  detail.value.status = 1
+  getObj.value.pageNum = 1
+  await get()
+  console.log('adminPass')
+  trueFgold.value = approvedFgold.value
+  trueRgold.value = approvedRgold.value
+  trueTgold.value = approvedTgold.value
+  trueGold.value = approvedGold.value
+}
+//已驳回充值明细
+const adminReject = async function () {
+  detail.value.status = 2
+  getObj.value.pageNum = 1
+  await get()
+  console.log('adminReject')
+  trueFgold.value = rejectedFgold.value
+  trueRgold.value = rejectedRgold.value
+  trueTgold.value = rejectedTgold.value
+  trueGold.value = rejectedGold.value
+}
+//点击标签页
+// 设置tab.props.name默认为all
+const tabName = ref('all')
+const handleClick = function (tab, event) {
+  if (tab.props.name === 'all') {
+    adminAll()
+  } else if (tab.props.name === 'wait') {
+    adminWait()
+  } else if (tab.props.name === 'pass') {
+    adminPass()
+  } else if (tab.props.name === 'reject') {
+    adminReject()
+  }
+}
+
+// 获取地区
+const getArea = async function () {
+  try {
+    // 发送POST请求
+    const result = await API({ url: '/recharge/user/search', data: {} })
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 存储地区信息
+    area.value = result.data
+    console.log('地区', area.value)
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+//删除气泡
+const delObj = ref({})
+const del = function (row) {
+  delObj.value.detailId = row.detailId
+  console.log('delObj', delObj.value)
+}
+// 删除按钮的气泡弹出框确认按钮
+const delConfirm = async function () {
+  try {
+    console.log('delObj', delObj.value)
+    // 发送POST请求
+    const result = await API({
+      url: '/refund/softDelete?detailId=' + delObj.value.detailId,
+      data: {}
+    })
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 刷新表格数据
+    get()
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+
+// 查询商品的接口
+const goods = ref([])
+const getGoods = async function () {
+  try {
+    // 发送POST请求
+    const result = await API({ url: '/product', data: {} })
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+    // 存储全部数据
+    goods.value = result.data
+    console.log('allData', allData.value)
+    console.log('地区', area.value)
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+getGoods()
+
+// 验证跳转输入框的数字是否合法
+const checkNumber = function () {
+  if (typeof parseInt(getObj.value.pageNum) === 'number') {
+    console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
+    if (
+      getObj.value.pageNum > 0 &&
+      getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
+    ) {
+      getObj.value.pageNum = parseInt(getObj.value.pageNum)
+      console.log('输入的数字合法')
+      get()
+    } else {
+      //提示
+      ElMessage({
+        type: 'error',
+        message: '请检查输入内容'
+      })
+    }
+  } else {
+    //提示
+    ElMessage({
+      type: 'error',
+      message: '请检查输入内容'
+    })
+  }
+}
+// 挂载
+onMounted(async function () {
+  await getAdminData()
+  await get()
+  await getArea()
+})
+// 新增排序字段和排序方式
+const sortField = ref('')
+const sortOrder = ref('')
+// 处理排序事件
+const handleSortChange = (column) => {
+  console.log('排序字段：', column.prop)
+  console.log('排序方式：', column.order)
+  if (column.prop === 'rechargeCoin') {
+    sortField.value = 'recharge_coin'
+  } else if (column.prop === 'taskCoin') {
+    sortField.value = 'task_coin'
+  } else if (column.prop === 'freeCoin') {
+    sortField.value = 'free_coin'
+  } else if (column.prop === 'createTime') {
+    sortField.value = 'create_time'
+  } else if (column.prop === 'auditTime') {
+    sortField.value = 'audit_time'
+  }
+  sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC'
+  get()
+}
+const handlePageSizeChange = function (val) {
+  getObj.value.pageSize = val
+  get()
+}
+const handleCurrentChange = function (val) {
+  getObj.value.pageNum = val
+  get()
+}
+</script>
+
+<template>
+  <el-row>
+    <el-col>
+      <el-card style="margin-bottom: 20px;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>
+</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/usergold/clientCountBalance.vue b/src/views/usergold/clientCountBalance.vue
index ea656c5..2c48295 100644
--- a/src/views/usergold/clientCountBalance.vue
+++ b/src/views/usergold/clientCountBalance.vue
@@ -93,36 +93,18 @@ const sortOrder = ref('')
 
 
 
-// //表格高度
-// const tableHeight = computed(function () {
-//   return (getObj.value.pageSize + 2) * 38 + "px";
-// });
+
 
 // 方法
 // 搜索===========================================================================
 // 搜索方法
 const get = async function (val) {
   try {
-    // 地区赋值
-    // if (adminData.value.market === '泰国') {
-    //   user.value.markets = ['泰国', '越南']
-    // } else if (adminData.value.market !== '总部') {
-    //   user.value.market = adminData.value.market
-    // }
     // 搜索参数页码赋值
     if (typeof val === 'number') {
       getObj.value.pageNum = val
     }
-    // // 搜索参数时间赋值
-    // if (getTime.value != null) {
-    //   if (getTime.value[0] != '' && getTime.value[1] != '') {
-    //     user.value.startDate = getTime.value[0]
-    //     user.value.endDate = getTime.value[1]
-    //   }
-    // } else {
-    //   user.value.startDate = ''
-    //   user.value.endDate = ''
-    // }
+    
     // 添加排序字段和排序方式到请求参数
     user.value.sortField = sortField.value
     user.value.sortOrder = sortOrder.value
@@ -269,33 +251,6 @@ const handleSortChange = (column) => {
   get()
 }
 
-// //选地区
-// const market = [
-//   {
-//     value: '马来西亚',
-//     label: '马来西亚'
-//   },
-//   {
-//     value: '新加坡',
-//     label: '新加坡'
-//   },
-//   {
-//     value: '香港',
-//     label: '香港'
-//   },
-//   {
-//     value: '泰国',
-//     label: '泰国'
-//   },
-//   {
-//     value: '加拿大',
-//     label: '加拿大'
-//   },
-//   {
-//     value: '越南HCM',
-//     label: '越南HCM'
-//   }
-// ]
 
 // 挂载
 onMounted(async function () {
@@ -345,9 +300,6 @@ const handleCurrentChange = function (val) {
               />
             </el-select>
           </div>
-
-          <!-- <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>
@@ -463,7 +415,6 @@ const handleCurrentChange = function (val) {
         </div>
 
         <!-- 分页 -->
-        <!-- 分页 -->
         <div class="pagination" style="margin-top: 20px">
           <el-pagination
             background
@@ -478,42 +429,7 @@ const handleCurrentChange = function (val) {
       </el-card>
     </el-col>
   </el-row>
-  <!-- 客户信息弹框 -->
-  <!-- <el-dialog
-    title="客户信息"
-    v-model="dialogVisible"
-    width="50%"
-    @before-close="dialogVisible = false"
-  >
-    <el-card>
-      <div class="custom-box">
-        <div>姓名：{{ userInfo.name }}</div>
-        <br />
-        <div>精网号：{{ userInfo.jwcode }}</div>
-        <div>地区：{{ userInfo.market }}</div>
-        <div>历史充值：{{ userInfo.rcoin }}</div>
-        <div>历史消费：{{ userInfo.scoin }}</div>
-      </div>
-    </el-card>
-    
-    <div style="height: 450px; overflow-y: auto">
-      <el-table :data="tableCountData" style="width: 100%" height="715px">
-        <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="" label="商品" width="120" />
-        <el-table-column sortable prop="" label="消费金币总数" width="180" />
-        <el-table-column sortable prop="" label="永久金币" width="120" />
-        <el-table-column sortable prop="" label="免费金币" width="120" />
-        <el-table-column sortable prop="" label="任务金币" width="120" />
-        <el-table-column sortable prop="" label="时间" width="120" />
-      </el-table>
-    </div>
-  </el-dialog> -->
+  
 </template>
 
 <style scoped lang="scss">
diff --git a/src/views/usergold/clientCountDetail.vue b/src/views/usergold/clientCountDetail.vue
index 8897266..b944e3d 100644
--- a/src/views/usergold/clientCountDetail.vue
+++ b/src/views/usergold/clientCountDetail.vue
@@ -289,248 +289,6 @@ const checkNumber = function () {
 
 
 
-// // 计算金币数量的方法
-// const calculateGoldAmount = (row) => {
-//   const totalGold = (row. permanentGold + row.freeCoin + row.taskCoin) / 100;
-//   if (row.type === 1) { // 消费
-//     return -totalGold;
-//   } 
-//   return totalGold;
-// }
-
-// // 导出Excel的方法
-// const headers = [
-//   '序号',
-//   '姓名',
-//   '精网号',
-//   '所属地区',
-//   '平台信息',
-//   //'更新数量',
-//   '更新类型',
-//   '金币数量',
-//   '永久金币',
-//   '免费金币',
-//   '任务金币',
-//   '提交人',
-//   '更新时间'
-// ]
-
-// const showExportInfoPanel = ref(false)
-
-// // 点击导出按钮直接显示信息面板
-// const exportExcel = async () => {
-//   try {
-//     console.log('点击导出按钮，尝试显示信息面板');
-//     showExportInfoPanel.value = true;
-//     await nextTick();//组件更新显示信息面板
-//   } catch (error) {
-//     console.error('显示信息面板失败:', error);
-//     ElMessage.error('显示信息面板失败，请稍后重试');
-//   }
-// };
-
-// // 新增导出状态相关变量
-// const exportProgress = ref(0)
-// const isExporting = ref(false)
-// const exportCancelToken = ref(null)
-
-// // 优化后的导出方法
-// const doExportExcel = async () => {
-//   try {
-//     isExporting.value = true
-//     exportProgress.value = 0
-//     showExportInfoPanel.value = false
-
-//     // 初始化Excel
-//     const wb = utils.book_new()
-//     const ws = utils.aoa_to_sheet([headers])
-//     utils.book_append_sheet(wb, ws, 'Sheet1')
-
-//     // 流式写入配置
-//     const writer = {
-//       write: (d, o) => {
-//         if (!d) return
-//         utils.sheet_add_aoa(ws, d, { origin: -1 })
-//       }
-//     }
-
-//     let page = 1
-//     let totalExported = 0
-//     const pageSize = 5000 // 每次请求5000条
-//     let totalRecords = 0
-
-//     // 首次请求获取总记录数
-//     const firstResult = await API({
-//       url: 'http://192.168.8.220:8081/goldDetail/getGoldDetail',
-//       method: 'post',
-//       data: { 
-//         pageNum: 1,
-//         pageSize,
-//         goldDetail: { ...goldDetail.value }
-//       }
-//     })
-//     totalRecords = firstResult.data.total
-
-//     // 创建取消令牌
-//     const CancelToken = axios.CancelToken
-//     exportCancelToken.value = CancelToken.source()
-
-//     // 平台信息映射
-//     const platformMap = {
-//       0: '初始化金币',
-//       1: 'ERP系统',
-//       2: 'Homily Chart',
-//       3: 'Homily Link',
-//       4: '金币系统'
-//     };
-//     // 更新类型映射
-//     const updateTypeMap = {
-//       0: '充值',
-//       1: '消费',
-//       2: '退款',
-//       3: '其他'
-//     };
-
-//     // 处理首次请求的数据
-//     const firstData = firstResult.data.list
-//     if (firstData.length) {
-//       const rows = firstData.map((row, index) => {
-//         const payPlatform = parseInt(row.payPlatform, 10); // 转换为数字类型
-//         const platformInfo = platformMap[payPlatform] || '';
-//         return [
-//           totalExported + index + 1,
-//           row.name || '',
-//           row.jwcode || '',
-//           row.market || '',
-//           platformInfo,
-//           (row.gold / 100).toFixed(2) || '0.00',
-//           updateTypeMap[row.type] || '',
-//           (row. permanentGold / 100).toFixed(2) || '0.00',
-//           (row.freeCoin / 100).toFixed(2) || '0.00',
-//           (row.taskCoin / 100).toFixed(2) || '0.00',
-//           row.name || '',
-//           moment(row.auditTime).format('YYYY-MM-DD HH:mm:ss') || ''
-//         ]
-//       })
-//       writer.write(rows)
-//       totalExported += firstData.length
-//       exportProgress.value = Math.round((totalExported / totalRecords) * 100)
-//       page++
-//     }
-
-//     while (totalExported < totalRecords) {
-//       const result = await API({
-//         url: 'http://192.168.8.220:8081/goldDetail/getGoldDetail',
-//         method: 'post',
-//         data: { 
-//           pageNum: page,
-//           pageSize,
-//           goldDetail: { ...goldDetail.value }
-//         },
-//         cancelToken: exportCancelToken.value.token
-//       })
-
-//       const data = result.data.list
-//       if (!data.length) break
-
-//       // 转换数据
-//       const rows = data.map((row, index) => [
-//         totalExported + index + 1,
-//         row.name || '',
-//         row.jwcode || '',
-//         row.market || '',
-//         platformMap[row.payPlatform] || '',
-//         (row.gold / 100).toFixed(2) || '0.00',
-//         updateTypeMap[row.type] || '',
-//         (row. permanentGold / 100).toFixed(2) || '0.00',
-//         (row.freeCoin / 100).toFixed(2) || '0.00',
-//         (row.taskCoin / 100).toFixed(2) || '0.00',
-//         row.name || '',
-//         moment(row.auditTime).format('YYYY-MM-DD HH:mm:ss') || ''
-//       ])
-
-//       // 流式写入
-//       writer.write(rows)
-//       totalExported += data.length
-//       exportProgress.value = Math.round((totalExported / totalRecords) * 100)
-
-//       // 内存控制：每500页释放内存
-//       if (page % 500 === 0) {
-//         await new Promise(resolve => setTimeout(resolve, 0))
-//       }
-
-//       page++
-//     }
-
-//     // 生成最终文件
-//     writeFile(wb, '客户金币明细.xlsx')
-//     ElMessage.success(`导出成功，共${totalExported}条数据`)
-//   } catch (error) {
-//     if (!axios.isCancel(error)) {
-//       ElMessage.error(`导出失败: ${error.message}`)
-//     }
-//   } finally {
-//     isExporting.value = false
-//     exportCancelToken.value = null
-//   }
-// }
-
-// // 新增取消导出方法
-// const cancelExport = () => {
-//   if (exportCancelToken.value) {
-//     exportCancelToken.value.cancel('用户取消导出')
-//     ElMessage.warning('导出已取消')
-//     isExporting.value = false
-//   }
-// }
-
-// const putExcel = ref({
-//   startTime: new Date(),
-//   endTime: new Date(new Date().setDate(new Date().getDate() + 1))
-// })
-
-// // 新增校验精网号的方法
-// const checkJwCode = async (jwcode) => {
-//   try {
-//     const result = await API({
-//       url: '/recharge/user',
-//       method: 'post',
-//       data: {
-//         jwcode,
-//         market: adminData.value.market
-//       }
-//     })
-//     // 根据后端返回的 code 判断精网号是否存在
-//     return result.code !== 0 
-//   } catch (error) {
-//     console.log('校验精网号失败', error)
-//     return false
-//   }
-// }
-
-// 选消费平台
-// const platform = [
-//   {
-//     value: '4',
-//     label: '金币系统'
-//   },
-//   {
-//     value: '1',
-//     label: 'ERP系统'
-//   },
-//   {
-//     value: '2',
-//     label: 'Homily Chart'
-//   },
-//   {
-//     value: '3',
-//     label: 'Homily Link'
-//   },
-//   {
-//     value: '0',
-//     label: '初始化金币'
-//   }
-// ]
 
 // 新增排序字段和排序方式
 const sortField = ref('')
@@ -585,67 +343,6 @@ onMounted(async function () {
 
 
 <div>
-  
-  <!-- 导出excel提前展示的信息面板 -->
-  <!-- <el-dialog
-    v-model="showExportInfoPanel"
-    title="导出信息确认"
-    width="400px"
-    :close-on-click-modal="false"
-  >
-    <div class="info-panel-header">导出信息</div> -->
-    <!-- 直接使用 goldDetail 显示信息，添加可选链操作符 -->
-    <!-- goldDetail是一个ref，所以在模板中应该直接使用goldDetail.consumePlatform，
-     而不是goldDetail.value.consumePlatform。
-     因为在模板中，ref变量会自动解包，不需要.value。
-     例如，在代码中，我们可能错误地在模板中使用了goldDetail.value，但实际上应该直接使用goldDetail。 -->
-    <!-- <div v-if="!goldDetail.jwcode && !goldDetail.payPlatform && !goldDetail.type && !goldDetail.market && (getTime.length < 2)">
-      你正在导出所有数据
-    </div>
-    <div v-else>
-      你正在导出以下数据
-    </div>
-    <div v-if="goldDetail.jwcode">精网号：{{ goldDetail.jwcode || '' }}</div>
-    <div v-if="goldDetail.payPlatform">平台信息：{{ goldDetail.payPlatform ? (platform.find(item => item.value === goldDetail.payPlatform)?.label) : '' }}</div>
-    <div v-if="goldDetail.type">数量更新类型：{{ goldDetail.type ? (type.find(item => item.value === goldDetail.type)?.label || '') : '' }}</div>
-    <div v-if="goldDetail.market">所属地区：{{ goldDetail.market || '' }}</div>
-    <div v-if="Array.isArray(getTime) && getTime.length >= 2">
-      <span>更新时间：</span> -->
-      <!-- 修改时间格式为精确到秒 -->
-      <!-- <span v-if="Array.isArray(getTime) && getTime.length >= 2">
-        {{ moment(getTime[0]).format('YYYY-MM-DD HH:mm:ss') }} 至 {{ moment(getTime[1]).format('YYYY-MM-DD HH:mm:ss') }}
-      </span>
-      <span v-else></span>
-    </div>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="showExportInfoPanel = false">取消</el-button>
-        <el-button type="primary" @click="doExportExcel">导出</el-button>
-      </span>
-    </template>
-  </el-dialog> -->
-
-  <!-- 导出进度弹窗 -->
-  <!-- <el-dialog
-    v-model="isExporting"
-    title="正在导出"
-    width="400px"
-    :close-on-click-modal="false"
-    :show-close="false"
-  >
-    <el-progress 
-      :percentage="exportProgress" 
-      :stroke-width="15"
-      striped
-      animated
-    />
-    <div class="export-status">
-      已导出 {{ Math.round((exportProgress / 100) * total) }} 条 / 共 {{ total }} 条
-    </div>
-    <template #footer>
-      <el-button type="danger" @click="cancelExport">取消导出</el-button>
-    </template>
-  </el-dialog> -->
 
   <el-row>
     <el-col>
@@ -787,25 +484,9 @@ onMounted(async function () {
               label="平台信息"
               width="140"
             >
-              <!-- <template #default="scope">
-                使用非严格相等比较
-                <span v-if="scope.row.payPlatform == 0">初始化金币</span>
-                <span v-if="scope.row.payPlatform == 1">ERP系统</span>
-                <span v-if="scope.row.payPlatform == 3">Homily Link</span>
-                <span v-if="scope.row.payPlatform == 2">Homily Chart</span>
-                <span v-if="scope.row.payPlatform == 4">金币系统</span>
-              </template> -->
+              
             </el-table-column>
-            <!-- <el-table-column
-              prop="gold"
-              label="更新数量"
-              width="120"
-              sortable="custom"
-            >
-              <template #default="scope">
-                <span>{{ scope.row.gold / 100 }}</span>
-              </template>
-            </el-table-column> -->
+            
             <el-table-column prop="type" label="更新类型" width="110">
               <template #default="scope">
                 <span v-if="scope.row.type === 0">充值</span>
@@ -821,7 +502,7 @@ onMounted(async function () {
               width="110"
             >
               <template #default="scope">
-                <!-- <span>{{ scope.row.sumGold }}</span> -->
+                
                 <span>
                 {{ 
                   scope.row.type === 1 // 消费类型
@@ -893,11 +574,7 @@ onMounted(async function () {
       </el-card>
     </el-col>
   </el-row>
-  <!-- </div> -->
-  <!-- 客户金币余额的布局---------------------------------------------------------- -->
-  <!-- <div v-else-if="activeTab === 'goldInfo'"> -->
-
-  <!-- </div> -->
+  
   </div>
 </template>