diff --git a/src/components/locales/lang/en.js b/src/components/locales/lang/en.js
index 5821b36..27345e4 100644
--- a/src/components/locales/lang/en.js
+++ b/src/components/locales/lang/en.js
@@ -911,6 +911,8 @@ export default {
   clientCount: {
     clientCountBalance: "Coin Balance",
     clientCountDetail: "Coin Details",
+    // 客户钱包 ---------------------------------
+    clientCountWallet: "Wallet",
     recharge: "Recharge",
     consume: "Consume",
     refund: "Refund",
diff --git a/src/components/locales/lang/zh-CN.js b/src/components/locales/lang/zh-CN.js
index ef52e04..0c0e312 100644
--- a/src/components/locales/lang/zh-CN.js
+++ b/src/components/locales/lang/zh-CN.js
@@ -918,6 +918,8 @@ export default {
     clientCountBalance: "金币余额",
     // 客户统计明细 ---------------------------------
     clientCountDetail: "金币明细",
+    // 客户钱包 ---------------------------------
+    clientCountWallet: "钱包",
     recharge: "充值",
     consume: "消耗",
     refund: "退款",
diff --git a/src/router/index.js b/src/router/index.js
index d739a6f..d995309 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -243,6 +243,13 @@ const routes = [
                                 component: () => import("../views/usergold/gold/clientCountBalance.vue"),
                                 meta: {permissionId: 53}
                             },
+                            // 客户钱包
+                            {
+                                path: 'wallet',
+                                name: "clientCountWallet",
+                                component: () => import("../views/usergold/gold/clientCountWallet.vue"),
+                                meta: {permissionId: 150}
+                            }
                         ]
                     },
                     {
diff --git a/src/utils/menuTreePermission.js b/src/utils/menuTreePermission.js
index f72027c..82cbc60 100644
--- a/src/utils/menuTreePermission.js
+++ b/src/utils/menuTreePermission.js
@@ -61,6 +61,7 @@ export const permissionMapping = {
     gold_coin_customer_bill: 52,               // 金币明细
     gold_coin_customer_balance: 53,            // 金币余额
     gold_bean_customer_details: 54,            // 金豆客户账户明细
+    wallet: 150,                               // 钱包
 
     historical_data_query: 55,                 // 历史数据查询
     new_version_gold_query: 56,                // 新版金币查询
diff --git a/src/views/usergold/gold/clientCount.vue b/src/views/usergold/gold/clientCount.vue
index 0803950..a88b652 100644
--- a/src/views/usergold/gold/clientCount.vue
+++ b/src/views/usergold/gold/clientCount.vue
@@ -1,30 +1,41 @@
 <template>
-  <div style="height: 4vh;">
-    <!-- 这里放置标签切换的按钮 -->
-    <el-button-group class="custom-button-group">
-      <!-- 切换后状态显示 primary 样式否则是默认样式 -->
-      <el-button
-          class="no-active-btn"
-          :class="{ 'active-btn': activeTab === 'clientCountDetail' }"
-          @click="navigateTo('clientCountDetail')"
-          :disabled="!hasDetail"
-          v-if="hasDetail"
-      >
-        {{ $t('clientCount.clientCountDetail') }}
-      </el-button>
-      <el-button
-          class="no-active-btn"
-          :class="{ 'active-btn': activeTab === 'clientCountBalance' }"
-          @click="navigateTo('clientCountBalance')"
-          :disabled="!hasBalance" v-if="hasBalance"
-      >
-        {{ $t('clientCount.clientCountBalance') }}
-      </el-button>
-    </el-button-group>
-    <!-- 渲染子路由组件 -->
-  </div>
-  <div>
-    <router-view></router-view>
+  <div class="main">
+    <div style="height: 4vh;">
+      <!-- 这里放置标签切换的按钮 -->
+      <el-button-group class="custom-button-group">
+        <!-- 切换后状态显示 primary 样式否则是默认样式 -->
+        <el-button
+            class="no-active-btn"
+            :class="{ 'active-btn': activeTab === 'clientCountDetail' }"
+            @click="navigateTo('clientCountDetail')"
+            :disabled="!hasDetail"
+            v-if="hasDetail"
+        >
+          {{ $t('clientCount.clientCountDetail') }}
+        </el-button>
+        <el-button
+            class="no-active-btn"
+            :class="{ 'active-btn': activeTab === 'clientCountBalance' }"
+            @click="navigateTo('clientCountBalance')"
+            :disabled="!hasBalance" v-if="hasBalance"
+        >
+          {{ $t('clientCount.clientCountBalance') }}
+        </el-button>
+        <el-button
+            class="no-active-btn"
+            :class="{ 'active-btn': activeTab === 'clientCountWallet' }"
+            @click="navigateTo('clientCountWallet')"
+            :disabled="!hasWallet" v-if="hasWallet"
+        >
+          {{ $t('clientCount.clientCountWallet') }}
+        </el-button>
+      </el-button-group>
+      <!-- 渲染子路由组件 -->
+    </div>
+
+    <div style="flex: 1; display: flex; flex-direction: column; overflow: hidden;">
+      <router-view></router-view>
+    </div>
   </div>
 </template>
 
@@ -45,6 +56,7 @@ const {menuTree} = storeToRefs(adminStore);
 const activeTab = ref('');
 const hasDetail = ref(false);
 const hasBalance = ref(false);
+const hasWallet = ref(false);
 // 导航方法
 const navigateTo = (name) => {
   activeTab.value = name;
@@ -55,9 +67,9 @@ const navigateTo = (name) => {
 // 初始化权限状态
 const initPermissions = () => {
   if (!menuTree.value || !menuTree.value.length) return;
-
   hasDetail.value = hasMenuPermission(menuTree.value, permissionMapping.gold_coin_customer_bill);
   hasBalance.value = hasMenuPermission(menuTree.value, permissionMapping.gold_coin_customer_balance);
+  hasWallet.value = hasMenuPermission(menuTree.value, permissionMapping.wallet);
 };
 
 // 默认跳转逻辑
@@ -65,13 +77,14 @@ const getDefaultAuditRoute = () => {
   initPermissions();
   if (hasDetail.value) return 'clientCountDetail';
   if (hasBalance.value) return 'clientCountBalance';
+  if (hasWallet.value) return 'clientCountWallet';
   return 'clientCountDetail';
 };
 
 // 监听路由变化更新标签状态
 watch(() => route.name, (newName) => {
   initPermissions()
-  if (newName === 'clientCountDetail' || newName === 'clientCountBalance') {
+  if (newName === 'clientCountDetail' || newName === 'clientCountBalance' || newName === 'clientCountWallet') {
     activeTab.value = newName;
   } else if (newName === 'usergold') {
     // 每次访问 /coinConsume 都进行默认跳转
@@ -88,16 +101,18 @@ onMounted(() => {
     navigateTo(defaultRoute);
   } else {
     // 非父路由初始化当前标签状态
-    if (route.name === 'clientCountDetail' || route.name === 'clientCountBalance') {
+    if (route.name === 'clientCountDetail' || route.name === 'clientCountBalance' || route.name === 'clientCountWallet') {
       activeTab.value = route.name;
     }
   }
 });
 </script>
 <style>
-.father {
-  width: 82vw;
-  height: 4vh;
+.main{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
 }
 
 
diff --git a/src/views/usergold/gold/clientCountWallet.vue b/src/views/usergold/gold/clientCountWallet.vue
new file mode 100644
index 0000000..fda7966
--- /dev/null
+++ b/src/views/usergold/gold/clientCountWallet.vue
@@ -0,0 +1,648 @@
+<script setup>
+// 这是客户钱包页面
+import { useAdminStore } from "@/store/index.js"
+import { storeToRefs } from "pinia"
+import { findMenuById, permissionMapping } from "@/utils/menuTreePermission.js"
+const adminStore = useAdminStore()
+const { adminData, menuTree, flag } = storeToRefs(adminStore)
+// 监听全局flag状态变化(员工数据的)
+ watch(flag, (newFlag, oldFlag) => {
+  // 当flag状态改变时，重新发送请求
+  if (newFlag !== oldFlag) {
+    console.log('员工数据flag状态改变，重新加载数据', newFlag)
+    get()
+  }
+})
+import { onMounted, ref, watch, nextTick } from 'vue'
+import { ElMessage } from 'element-plus'
+import moment from 'moment'
+import API from '@/util/http.js'
+import { reverseMarketMapping } from "@/utils/marketMap.js";
+// 国际化
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
+// 变量
+const dialogVisible = ref(false)
+
+// 定义加载状态，获取地区数据
+const isLoadingmarket = ref(false);
+const markets = ref([])
+
+
+// 充值明细表格
+const tableData = ref([])
+const tableRef = ref(null)
+const scrollTableTop = () => {
+  tableRef.value?.setScrollTop?.(0)
+}
+
+// 新增金币总数变量
+const goldtotal = ref(0)
+
+// 计算用户各金币总数的不分页对象
+const tableAllData = ref([])
+// 各金币字段
+const permanentGold = ref(0) // 修改为 currentPermanentGold 对应字段
+const freeJuneGold = ref(0) // 修改为 currentFreeJune 对应字段
+const freeDecemberGold = ref(0) // 修改为 currentFreeDecember 对应字段
+const taskGold = ref(0) // 修改为 currentTaskGold 对应字段
+const freeGold = ref(0) // 计算免费金币总数
+//客户消费记录
+const tableCountData = ref([])
+const userInfo = ref({})
+
+// 搜索===========================================
+//分页总条目
+const total = ref(100)
+// 搜索对象时间
+const getTime = ref([])
+// 搜索User
+const user = ref({
+  markets: [],
+})
+// 不分页的搜索对象
+const getAllObj = ref({})
+// 搜索对象
+const getObj = ref({
+  pageNum: 1,
+  pageSize: 50
+})
+// 新增排序字段和排序方式
+const sortField = ref('')
+const sortOrder = ref('')
+
+// 方法
+// 搜索===========================================================================
+// 搜索方法
+const get = async function (val) {
+  if (!findMenuById(menuTree.value, permissionMapping.gold_coin_customer_balance)) {
+    ElMessage.error(t('elmessage.noPermission'))
+    return
+  }
+  try {
+    // 搜索参数页码赋值
+    if (typeof val === 'number') {
+      getObj.value.pageNum = val
+    }
+
+    // 添加排序字段和排序方式到请求参数
+    user.value.sortField = sortField.value
+    user.value.sortOrder = sortOrder.value
+    console.log('搜索参数', getObj.value)
+
+    // 发送POST请求
+    const requestData = { ...getObj.value, user: { ...user.value } };//控制台打印请求的参数
+    console.log('最终请求参数', JSON.stringify(requestData, null, 2)); // 打印格式化后的请求参数
+    //console.log('请求参数', requestData);
+    // 检查markets数组中是否包含'总部'或'研发部'
+    // if (user.value.markets.includes('9') || user.value.markets.includes('9999')) {
+    //   user.value.markets = [];
+    // }
+    if (user.value.jwcode) {
+      // 纯数字
+      const numberRegex = /^\d{1,9}$/;
+
+      // 检查是否不是数字
+      if (!numberRegex.test(user.value.jwcode)) {
+        ElMessage.error(t('elmessage.checkJwcodeFormat'))
+        // 上面提示过了
+        return
+      }
+    }
+    const result = await API({
+      url: '/goldDetail/getGold',
+      method: 'post',
+      data: { ...getObj.value, user: { ...user.value, flag: flag.value } }
+    })
+    console.log('响应数据', result)
+    tableData.value = result.data.list
+    total.value = result.data.total
+
+    console.log('兄弟你是什么 user', user.value)
+    // 获取合计数
+    const resultGoldTotal = await API({
+      url: '/goldDetail/goldTotal',
+      data: {
+        jwcode: user.value.jwcode,
+        markets: user.value.markets,
+        flag: flag.value
+      }
+    })
+    // 判断精网号是否存在，假设精网号不存在时 result.data.list 为空数组
+    if (result.data.list.length === 0) {
+      // 将表格数据设置为空数组
+      tableData.value = []
+      // 将合计数设置为 0
+      permanentGold.value = 0
+      freeJuneGold.value = 0
+      freeDecemberGold.value = 0
+      taskGold.value = 0
+      goldtotal.value = 0
+      freeGold.value = 0
+
+      // // 新增金币总数变量
+      // const goldtotal = ref(0)
+      // 分页总数设置为 0
+      total.value = 0
+      // ElMessage.warning('精网号不存在，请检查输入')
+    }
+    // 判断合计数是否存在,不存在时 result.data.list 为空数组
+    else if (resultGoldTotal.data === 0) {
+      // 将表格数据设置为空数组
+      tableData.value = []
+      // 将合计数设置为 0
+      permanentGold.value = 0
+      freeJuneGold.value = 0
+      freeDecemberGold.value = 0
+      taskGold.value = 0
+      goldtotal.value = 0
+      freeGold.value = 0
+    }
+    else {
+      // 将响应结果存储到响应式数据中
+      console.log('总数据请求成功', result)
+      // 存储表格数据
+      tableData.value = result.data.list
+      await nextTick()
+      scrollTableTop()
+      console.log('tableData', tableData.value)
+
+      // 从接口返回数据中获取各金币数值
+      if (resultGoldTotal.data) {
+        permanentGold.value = parseFloat(resultGoldTotal.data.permanentGold.toFixed(2))
+        freeGold.value = parseFloat(resultGoldTotal.data.freeGold.toFixed(2))
+        taskGold.value = parseFloat(resultGoldTotal.data.taskGold.toFixed(2))
+        goldtotal.value = parseFloat(resultGoldTotal.data.goldtotal.toFixed(2))
+      } else {
+        console.error('合计数数据格式错误', resultGoldTotal)
+        ElMessage.error(t('elmessage.getTotalFailed'))
+      }
+      // 存储分页总数
+      total.value = result.data.total
+      console.log('total', total.value)
+    }
+  } catch (error) {
+    console.log('请求失败', error)
+    // 在这里可以处理错误逻辑，比如显示错误提示等
+  }
+}
+// 精网号去空格，同时处理 user 和 putExcel 中的 jwcode
+const trimJwCode = () => {
+  if (user.value.jwcode) {
+    user.value.jwcode = user.value.jwcode.replace(/\s/g, '');
+  }
+
+}
+// 搜索
+const search = function () {
+  trimJwCode();
+  getObj.value.pageNum = 1
+  get()
+}
+// 重置
+const reset = function () {
+  user.value = {
+    jwcode: '',
+    markets: [],
+  }
+  sortField.value = ''
+  sortOrder.value = ''
+  selectedMarketPath.value = []
+  // 重置页码
+  getObj.value.pageNum = 1
+  get()
+}
+const cellClick = function (row, column) {
+  console.log('cellClick', column.label)
+  if (column.label === t('common.name')) {
+    dialogVisible.value = true
+
+    userInfo.value = row
+  }
+}
+// 处理排序事件
+const handleSortChange = (column) => {
+  console.log('排序字段：', column.prop)
+  console.log('排序方式：', column.order)
+  if (column.prop === 'currentPermanentGold') {
+    sortField.value = 'current_permanent_gold'
+  } else if (column.prop === 'currentTaskGold') {
+    sortField.value = 'current_task_gold'
+  } else if (column.prop === 'currentFreeJune') {
+    sortField.value = 'current_free_june'
+  } else if (column.prop === 'currentFreeDecember') {
+    sortField.value = 'current_free_december'
+  }
+  sortOrder.value = column.order === 'ascending' ? 'ASC' : 'DESC'
+  get()
+}
+
+// 挂载
+onMounted(async function () {
+  await get()
+  await getMarket()
+  await getExportList()
+})
+const handlePageSizeChange = function (val) {
+  getObj.value.pageSize = val
+  get()
+}
+const handleCurrentChange = function (val) {
+  getObj.value.pageNum = val
+  get()
+}
+const exportExcel = async function () {
+  const params = {
+    user: {
+      jwcode: user.value.jwcode || '',
+      markets: user.value.markets || [],
+      flag: flag.value
+    }
+
+  }
+  const res = await API({ url: '/goldDetail/exportGold', data: params })
+  if (res.code === 200) {
+    ElMessage.success(t('elmessage.exportSuccess'))
+  }
+}
+
+const exportListVisible = ref(false)
+
+// 打开导出列表弹窗
+const openExportList = () => {
+  getExportList()
+  exportListVisible.value = true
+}
+
+// 导出列表数据
+const exportList = ref([])
+// 导出列表加载状态
+const exportListLoading = ref(false)
+// 获取导出列表
+const getExportList = async () => {
+  exportListLoading.value = true
+  try {
+    const result = await API({ url: '/export/export' })
+    if (result.code === 200) {
+      const filteredData = result.data.filter(item => {
+        return item.type === 1; //返回type為0即客户金币余额的数据
+      });
+      exportList.value = filteredData
+    } else {
+      ElMessage.error(result.msg || t('elmessage.getExportListError'))
+    }
+  } catch (error) {
+    console.error('获取导出列表出错:', error)
+    ElMessage.error(t('elmessage.getExportListError'))
+  } finally {
+    exportListLoading.value = false
+  }
+}
+// 下载导出文件
+const downloadExportFile = (item) => {
+  if (item.state === 2) {
+    const link = document.createElement('a')
+    link.href = item.url
+    link.download = item.fileName
+    link.click()
+  } else {
+    ElMessage.warning(t('elmessage.exportingInProgress'))
+  }
+}
+//根据状态返回对应的标签类型
+const getTagType = (state) => {
+  switch (state) {
+    case 0:
+      return 'info';
+    case 1:
+      return 'primary';
+    case 2:
+      return 'success';
+    case 3:
+      return 'danger';
+    default:
+      return 'info';
+  }
+}
+//根据状态返回对应的标签文案
+const getTagText = (state) => {
+  switch (state) {
+    case 0:
+      return t('elmessage.pendingExecution');
+    case 1:
+      return t('elmessage.executing');
+    case 2:
+      return t('elmessage.executed');
+    case 3:
+      return t('elmessage.errorExecution');
+    default:
+      return t('elmessage.unknownStatus');
+  }
+}
+// 存储地区选择变化
+const selectedMarketPath = ref([])
+
+const handleMarketChange = (value) => {
+  if (value && value.length > 0) {
+    const lastValue = value[value.length - 1];
+    // 确保返回值是数组，如果不是则包装成数组
+    const marketValue = reverseMarketMapping[lastValue];
+    user.value.markets = Array.isArray(marketValue) ? marketValue : [marketValue];
+  } else {
+    // 保持[]格式
+    user.value.markets = [];
+  }
+};
+// 获取地区，修改为级联下拉框
+const getMarket = async function () {
+  try {
+    // 发送POST请求
+    const result = await API({
+
+      url: '/market/selectMarket',
+    });
+    // 将响应结果存储到响应式数据中
+    console.log('请求成功', result)
+
+    // 递归转换树形结构为级联选择器需要的格式（跳过第一级节点）
+    const transformTree = (nodes) => {
+      // 直接处理第一级节点的子节点
+      const allChildren = nodes.flatMap(node => node.children || []);
+
+      return allChildren.map(child => {
+        const grandchildren = child.children && child.children.length
+          ? transformTree([child]) // 递归处理子节点
+          : null;
+
+        return {
+          value: child.name,
+          label: child.name,
+          children: grandchildren
+        };
+      });
+    };
+    // 存储地区信息
+    markets.value = transformTree(result.data)
+    console.log('转换后的地区树==============', markets.value)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+const format3 = (num) => {
+  // 每三位添加逗号
+  return num.toLocaleString('en-US')
+}
+
+</script>
+
+<template>
+  <el-card class="card1" style="margin-bottom: 1vh;">
+    <div class="head-card">
+      <div class="head-card-element">
+        <el-text class="mx-1" size="large">{{ $t('common.jwcode') }}：</el-text>
+        <el-input v-model="user.jwcode" style="width: 160px" :placeholder="$t('common.jwcodePlaceholder')" clearable />
+      </div>
+      <div class="head-card-element">
+        <el-text class="mx-1" size="large">{{ $t('common.market') }}：</el-text>
+        <el-cascader v-model="selectedMarketPath" :options="markets" :placeholder="$t('common.marketPlaceholder')" clearable style="width:180px"
+          @change="handleMarketChange" />
+      </div>
+      <div class="head-card-element">
+        <!-- <el-checkbox v-model="showEmployeeData" @change="search()">员工数据</el-checkbox> -->
+      </div>
+      <el-button type="primary" @click="search()">{{ $t('common.search') }}</el-button>
+      <el-button type="primary" @click="exportExcel()">{{ $t('common.exportExcel') }}</el-button>
+      <el-button type="primary" @click="openExportList">{{ $t('common.viewExportList') }}</el-button>
+      <el-button @click="reset" type="success">{{ $t('common.reset') }}</el-button>
+    </div>
+    <!-- </div> -->
+  </el-card>
+  <el-card class="card2">
+    <div class="goldStatistics">
+      {{ $t('common.totalGoldCoin') }}：{{ format3(goldtotal || 0) }}&nbsp;&nbsp;&nbsp;&nbsp;
+      {{ $t('common.permanentGold') }}：{{ format3(permanentGold || 0) }}&nbsp;&nbsp;&nbsp;&nbsp;
+      {{ $t('common.freeGold') }}：{{ format3(freeGold || 0) }}&nbsp;&nbsp;&nbsp;&nbsp;
+      {{ $t('common.taskGold') }}：{{ format3(taskGold || 0) }}
+    </div>
+    <!-- 设置表格容器的高度和滚动样式 -->
+    <div style="flex: 1; overflow-y: auto">
+      <el-table ref="tableRef" :data="tableData" @cellClick="cellClick" 
+        @sort-change="handleSortChange" :row-style="{ height: '50px' }">
+        <el-table-column type="index" :label="$t('common_list.id')" width="100px" fixed="left">
+          <template #default="scope">
+            <span>{{
+              scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" :label="$t('common_list.name')" width="140" />
+        <el-table-column prop="jwcode" :label="$t('common_list.jwcode')" width="160" />
+        <el-table-column prop="market" :label="$t('common_list.market')" width="140" />
+        <el-table-column prop="sumGold" :label="$t('common_list.sumGold')" width="180" aligh="center">
+          <!-- <template #default="scope">
+                <span>{{
+                    ((scope.row.currentPermanentGold || 0) +
+                        (scope.row.currentFreeJune || 0) +
+                        (scope.row.currentFreeDecember || 0) +
+                        (scope.row.currentTaskGold || 0)) 
+                  }}</span>
+              </template> -->
+        </el-table-column>
+        <el-table-column prop="currentPermanentGold" :label="$t('common_list.permanentGold')" sortable="custom" width="210">
+          <template #default="scope">
+            <span>{{ (scope.row.currentPermanentGold || 0) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="currentFreeJune" :label="$t('common_list.freeGold6Month')" sortable="custom" width="200">
+          <template #default="scope">
+            <span>{{ (scope.row.currentFreeJune || 0) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="currentFreeDecember" :label="$t('common_list.freeGold12Month')" sortable="custom" width="200">
+          <template #default="scope">
+            <span>{{ (scope.row.currentFreeDecember || 0) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="currentTaskGold" :label="$t('common_list.taskGold')" sortable="custom" width="180">
+          <template #default="scope">
+            <span>{{ (scope.row.currentTaskGold || 0) }}</span>
+          </template>
+        </el-table-column>
+        <!--            <el-table-column prop="rcoin" label="历史金币总额" width="150">
+              <template #default="scope">
+                <el-popover trigger="hover" placement="left" width="150">
+                  <template #default>
+                    <div>
+                      <div>永久金币：{{ (scope.row.sumPermanentGold || 0)  }}</div>
+                      <div>免费金币：{{ ((scope.row.sumFreeJune || 0) + (scope.row.sumFreeDecember || 0))  }}</div>
+                      <div>任务金币：{{ (scope.row.sumTaskGold || 0)  }}</div>
+                    </div>
+                  </template>
+                  <template #reference>
+                    <span>
+                      {{
+                        (scope.row.sumPermanentGold || 0)  +
+                        (scope.row.sumFreeJune || 0)  +
+                        (scope.row.sumFreeDecember || 0)  +
+                        (scope.row.sumTaskGold || 0) 
+                      }}</span>
+                  </template>
+                </el-popover>
+              </template>
+            </el-table-column>
+            <el-table-column prop="sumConsume" label="历史消费" width="150">
+              <template #default="scope">
+                <el-popover trigger="hover" placement="left" width="150">
+                  <template #default>
+                    <div>
+                      <div>永久金币：{{ (scope.row.sumConsumeGold || 0)  }}</div>
+                      <div>免费金币：{{
+                          ((scope.row.sumConsumeJune || 0) + (scope.row.sumConsumeDecember || 0)) 
+                        }}
+                      </div>
+                      <div>任务金币：{{ (scope.row.sumConsumeJune || 0)  }}</div>
+                    </div>
+                  </template>
+                  <template #reference>
+                    <span>
+                      {{
+                        (scope.row.sumConsumeGold || 0)  +
+                        (scope.row.sumConsumeTaskGold || 0)  +
+                        (scope.row.sumConsumeJune || 0)  +
+                        (scope.row.sumConsumeDecember || 0) 
+                      }}</span>
+                  </template>
+                </el-popover>
+              </template>
+            </el-table-column>-->
+      </el-table>
+    </div>
+    <!-- 分页 -->
+    <div class="pagination" style="margin-top: 20px">
+      <el-pagination background :current-page="getObj.pageNum" :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-dialog v-model="exportListVisible" :title="$t('common_export.exportList')" width="80%">
+    <el-table :data="exportList" style="width: 100% ;height: 60vh;" :loading="exportListLoading">
+      <el-table-column prop="fileName" :label="$t('common_export.fileName')" />
+      <el-table-column prop="state" :label="$t('common_export.status')">
+        <template #default="scope">
+          <el-tag :type="getTagType(scope.row.state)" :effect="scope.row.state === 3 ? 'light' : 'plain'">
+            {{ getTagText(scope.row.state) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" :label="$t('common_export.createTime')">
+        <template #default="scope">
+          {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('common_export.operation')">
+        <template #default="scope">
+          <el-button type="primary" size="small" @click="downloadExportFile(scope.row)"
+            :disabled="scope.row.state !== 2">
+            {{ $t('common_export.download') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button text @click="exportListVisible = false">{{ $t('common_export.close') }}</el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+</template>
+
+<style scoped lang="scss">
+// 搜索的卡片样式
+.card1 {
+  background: #F3FAFE;
+}
+
+// 表单的卡片样式
+.card2 {
+  background: #E7F4FD;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+   :deep(.el-card__body) {
+    padding: 20px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+}
+
+// 新币总数等等
+.goldStatistics {
+  margin-left: 1vw;
+  margin-bottom: 1vh;
+  color: #000000;
+  font-family: "PingFang SC";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+
+// 表头背景等
+:deep(.el-table__header-wrapper),
+:deep(.el-table__body-wrapper),
+:deep(.el-table__cell),
+/* 表格 */
+:deep(.el-table__body td) {
+  background-color: #F3FAFE !important;
+}
+
+/* 表头 */
+:deep(.el-table__header th) {
+  background-color: #F3FAFE !important;
+}
+
+/* 鼠标悬停 */
+:deep(.el-table__row:hover > .el-table__cell) {
+  background-color: #E5EBFE !important;
+}
+
+
+.pagination {
+  display: flex;
+}
+
+.status {
+  display: flex;
+}
+
+.head-card {
+  display: flex;
+}
+
+.head-card-element {
+  margin-right: 20px;
+}
+
+.head-card-btn {
+  margin-left: auto;
+}
+
+.custom-box {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 5px;
+
+  div:nth-child(1) {
+    flex: 1 0 100%;
+  }
+
+  div {
+    margin-right: 20px;
+  }
+}
+</style>
\ No newline at end of file