From 1ec6002ce0400f2df29f6a6ddb61654c8a4683a8 Mon Sep 17 00:00:00 2001
From: lihui <lihui030304@163.com>
Date: Thu, 17 Jul 2025 14:16:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=89=80=E6=9C=89=E9=A1=B5=E9=9D=A2=20?=
 =?UTF-8?q?=E5=BF=AB=E6=8D=B7=E6=9F=A5=E8=AF=A2=E6=8C=89=E9=92=AE=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E5=90=8E=E6=9C=89=E9=AB=98=E4=BA=AE=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/audit/rechargeAudit.vue         | 18 ++++++++++++++----
 src/views/audit/refundAudit.vue           | 24 ++++++++++++++++++++----
 src/views/consume/coinConsumeDetail.vue   | 24 ++++++++++++++++++------
 src/views/recharge/coinRechargeDetail.vue | 23 +++++++++++++++++++----
 src/views/refund/coinRefundDetail.vue     | 31 ++++++++++++++++++-------------
 src/views/usergold/clientCountDetail.vue  | 23 +++++++++++++++++++----
 src/views/workspace/index.vue             | 24 +++++++++++++++++++-----
 7 files changed, 127 insertions(+), 40 deletions(-)

diff --git a/src/views/audit/rechargeAudit.vue b/src/views/audit/rechargeAudit.vue
index 9783f56..dceb91d 100644
--- a/src/views/audit/rechargeAudit.vue
+++ b/src/views/audit/rechargeAudit.vue
@@ -35,10 +35,10 @@
               <div class="time-group">
                 <el-text size="large" style="width: 80px">充值时间：</el-text>
                 <el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间"
-                                end-placeholder="结束时间" style="width: 400px"/>
-                <el-button @click="getToday()" style="margin-left: 10px"> 今</el-button>
-                <el-button @click="getYesterday()" style="margin-left: 10px"> 昨</el-button>
-                <el-button @click="get7Days()" style="margin-left: 10px"> 近7天</el-button>
+                                end-placeholder="结束时间" style="width: 400px"   @change="handleDatePickerChange"/>
+                <el-button @click="getToday()" style="margin-left: 10px"  :type="activeTimeRange === 'today' ? 'primary' : ''"> 今</el-button>
+                <el-button @click="getYesterday()" style="margin-left: 10px"  :type="activeTimeRange === 'yesterday' ? 'primary' : ''"> 昨</el-button>
+                <el-button @click="get7Days()" style="margin-left: 10px"  :type="activeTimeRange === '7days' ? 'primary' : ''"> 近7天</el-button>
                 <el-button @click="resetSearch" type="success">重置</el-button>
                 <el-button type="primary" @click="handleSearch">查询</el-button>
               </div>
@@ -185,6 +185,12 @@ const formatTime = (val) => val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ''
 const adminData = ref({})
 // 充值明细表格
 const tableData = ref([])
+// 标记当前激活的时间范围按钮
+const activeTimeRange = ref('')
+// 日期选择器变化时清除按钮激活状态
+const handleDatePickerChange = () => {
+  activeTimeRange.value = ''
+}
 
 // 搜索表单数据
 const rechargeAudit = ref({
@@ -352,6 +358,7 @@ const resetSearch = function () {
     auditStatus: rechargeAudit.value.auditStatus
   }
   getTime.value = []
+  activeTimeRange.value = '' // 清除激活状态
   getRecharge()
   getStats()
 }
@@ -371,6 +378,7 @@ const getToday = function () {
   )
   getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
+  activeTimeRange.value = 'today' // 标记当前激活状态
   getRecharge()
   getStats()
 }
@@ -391,6 +399,7 @@ const getYesterday = function () {
   )
   getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
+  activeTimeRange.value = 'yesterday' // 标记当前激活状态
   getRecharge()
   getStats()
 }
@@ -410,6 +419,7 @@ const get7Days = function () {
   )
   getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
+  activeTimeRange.value = '7days' // 标记当前激活状态
   getRecharge()
   getStats()
 }
diff --git a/src/views/audit/refundAudit.vue b/src/views/audit/refundAudit.vue
index 0ef8b44..4a40478 100644
--- a/src/views/audit/refundAudit.vue
+++ b/src/views/audit/refundAudit.vue
@@ -34,10 +34,10 @@
                 <div class="time-group">
                   <el-text size="large" style="width: 80px">提交时间：</el-text>
                   <el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="开始时间"
-                    end-placeholder="结束时间" style="width: 400px" />
-                  <el-button @click="getToday()" style="margin-left: 10px">今</el-button>
-                  <el-button @click="getYesterday()" style="margin-left: 10px">昨</el-button>
-                  <el-button @click="get7Days()" style="margin-left: 10px">近7天</el-button>
+                    end-placeholder="结束时间" style="width: 400px" @change="handleDatePickerChange"/>
+                  <el-button @click="getToday()" style="margin-left: 10px"  :type="activeTimeRange === 'today' ? 'primary' : ''"> 今</el-button>
+                  <el-button @click="getYesterday()" style="margin-left: 10px"  :type="activeTimeRange === 'yesterday' ? 'primary' : ''"> 昨</el-button>
+                  <el-button @click="get7Days()" style="margin-left: 10px"  :type="activeTimeRange === '7days' ? 'primary' : ''"> 近7天</el-button>
                   <el-button type="success" @click="resetSearch">重置</el-button>
                   <el-button type="primary" @click="handleSearch">查询</el-button>
                 </div>
@@ -154,6 +154,13 @@ import { ElMessage } from 'element-plus'
 import API from '@/util/http'
 import moment from 'moment'
 
+// 标记当前激活的时间范围按钮
+const activeTimeRange = ref('')
+// 日期选择器变化时清除按钮激活状态
+const handleDatePickerChange = () => {
+  activeTimeRange.value = ''
+}
+
 const scopeValue = ref(null) // 当前行
 const rejectDialogVisible = ref(false) // 驳回对话框显示状态
 const rejectReason = ref('') // 驳回理由
@@ -174,6 +181,7 @@ const searchForm = ref({
   auditStatus: '0'
 })
 const checkTab = ref('pending') // 能否不用STATUS常量，0是待审批，1是已通过，2是驳回，参数status需要Integer
+// 时间
 const dateRange = ref([])
 const pagination = ref({
   pageNum: 1,
@@ -399,6 +407,7 @@ const resetSearch = function () {
   auditStatus:auditStatus
   }
   dateRange.value = []
+  activeTimeRange.value = '' // 清除激活状态
 }
 
 // 今天
@@ -408,8 +417,11 @@ const getToday = function () {
   const endTime = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1)
   dateRange.value = [startTime, endTime]
   console.log('dateRange', dateRange.value)
+  activeTimeRange.value = 'today' // 标记当前激活状态
+
   get()
   getStats()
+
   console.log('aaaaaaaaaa这是今天调用')
 }
 
@@ -421,6 +433,8 @@ const getYesterday = function () {
   const endTime = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate() + 1)
   dateRange.value = [startTime, endTime]
   console.log('dateRange', dateRange.value)
+  activeTimeRange.value = 'yesterday' // 标记当前激活状态
+
   get()
   getStats()
   console.log('aaaaaaaaaa这是昨天调用')
@@ -433,6 +447,8 @@ const get7Days = function () {
   const endTime = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1)
   dateRange.value = [startTime, endTime]
   console.log('dateRange', dateRange.value)
+  activeTimeRange.value = '7days' // 标记当前激活状态
+
   get()
   getStats()
   console.log('aaaaaaaaaa这是近七天调用')
diff --git a/src/views/consume/coinConsumeDetail.vue b/src/views/consume/coinConsumeDetail.vue
index af3f8f8..ec3456d 100644
--- a/src/views/consume/coinConsumeDetail.vue
+++ b/src/views/consume/coinConsumeDetail.vue
@@ -34,7 +34,12 @@ const consumeUser = ref({
 
 })
 
-
+// 标记当前激活的时间范围按钮
+const activeTimeRange = ref('')
+// 日期选择器变化时清除按钮激活状态
+const handleDatePickerChange = () => {
+  activeTimeRange.value = ''
+}
 // 搜索对象
 const getObj = ref({
   pageNum: 1,
@@ -266,6 +271,8 @@ const reset = function () {
   sortField.value = ''
   sortOrder.value = ''
   getTime.value = {}
+  activeTimeRange.value = '' // 清除激活状态
+
 
   // 点完重置后，重新请求数据
   ConsumeSelectBy()
@@ -286,6 +293,8 @@ const getToday = function () {
   )
   getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
+  activeTimeRange.value = 'today' // 标记当前激活状态
+
   ConsumeSelectBy()
 }
 // 昨天
@@ -304,6 +313,8 @@ const getYesterday = function () {
   )
   getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
+  activeTimeRange.value = 'yesterday' // 标记当前激活状态
+
   ConsumeSelectBy()
 }
 // 近7天
@@ -321,6 +332,8 @@ const get7Days = function () {
   )
   getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
+  activeTimeRange.value = '7days' // 标记当前激活状态
+
   ConsumeSelectBy()
 }
 // 获取商品列表
@@ -482,11 +495,10 @@ onMounted(async function () {
             <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>
+                              end-placeholder="结束时间"  style="width: 400px" @change="handleDatePickerChange"/>
+              <el-button @click="getToday()" style="margin-left: 10px"  :type="activeTimeRange === 'today' ? 'primary' : ''"> 今</el-button>
+              <el-button @click="getYesterday()" style="margin-left: 10px"  :type="activeTimeRange === 'yesterday' ? 'primary' : ''"> 昨</el-button>
+              <el-button @click="get7Days()" style="margin-left: 10px"  :type="activeTimeRange === '7days' ? 'primary' : ''"> 近7天</el-button>
               <!-- </div>
             </el-col>
             <el-col :span="3">
diff --git a/src/views/recharge/coinRechargeDetail.vue b/src/views/recharge/coinRechargeDetail.vue
index bbb981e..ba4bd16 100644
--- a/src/views/recharge/coinRechargeDetail.vue
+++ b/src/views/recharge/coinRechargeDetail.vue
@@ -22,6 +22,13 @@ const getAdminData = async function () {
 // 变量
 // 充值明细表格
 const tableData = ref([])
+// 标记当前激活的时间范围按钮
+const activeTimeRange = ref('')
+// 日期选择器变化时清除按钮激活状态
+const handleDatePickerChange = () => {
+  activeTimeRange.value = ''
+}
+
 // 搜索===========================================
 // 搜索recharge
 const rechargeUser = ref({
@@ -250,6 +257,8 @@ const reset = function () {
   delete sortField.value
   delete sortOrder.value
   getTime.value = {}
+  activeTimeRange.value = '' // 清除激活状态
+
   get()
 }
 // 今天
@@ -267,6 +276,8 @@ const getToday = function () {
   )
   getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
+  activeTimeRange.value = 'today' // 标记当前激活状态
+
   get()
 }
 const handlePageSizeChange = function (val) {
@@ -293,6 +304,8 @@ const getYesterday = function () {
   )
   getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
+  activeTimeRange.value = 'yesterday' // 标记当前激活状态
+
   get()
 }
 // 近7天
@@ -310,6 +323,8 @@ const get7Days = function () {
   )
   getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
+  activeTimeRange.value = '7days' // 标记当前激活状态
+
   get()
 }
 const exportExcel = async function () { 
@@ -413,10 +428,10 @@ const handleSortChange = (column) => {
             <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>
+                end-placeholder="结束时间"   style="width: 400px" @change="handleDatePickerChange"/>
+              <el-button @click="getToday()" style="margin-left: 10px"  :type="activeTimeRange === 'today' ? 'primary' : ''"> 今</el-button>
+              <el-button @click="getYesterday()" style="margin-left: 10px"  :type="activeTimeRange === 'yesterday' ? 'primary' : ''"> 昨</el-button>
+              <el-button @click="get7Days()" style="margin-left: 10px"  :type="activeTimeRange === '7days' ? 'primary' : ''"> 近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>
diff --git a/src/views/refund/coinRefundDetail.vue b/src/views/refund/coinRefundDetail.vue
index ebdc0bf..7028630 100644
--- a/src/views/refund/coinRefundDetail.vue
+++ b/src/views/refund/coinRefundDetail.vue
@@ -27,6 +27,12 @@ const trimJwCode = () => {
 
 // 变量
 //这是获取用户信息的接口
+// 标记当前激活的时间范围按钮
+const activeTimeRange = ref('')
+// 日期选择器变化时清除按钮激活状态
+const handleDatePickerChange = () => {
+  activeTimeRange.value = ''
+}
 const adminData = ref({})
 const getAdminData = async function () {
   try {
@@ -182,6 +188,8 @@ const reset = function () {
   sortField.value = ''
   sortOrder.value = ''
   getTime.value = {}
+  activeTimeRange.value = '' // 清除激活状态
+
   getSelectBy()
 }
 // 今天
@@ -199,6 +207,8 @@ const getToday = function () {
   )
   getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
+  activeTimeRange.value = 'today' // 标记当前激活状态
+
   getSelectBy()
 }
 // 昨天
@@ -217,6 +227,8 @@ const getYesterday = function () {
   )
   getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
+  activeTimeRange.value = 'yesterday' // 标记当前激活状态
+
   getSelectBy()
 }
 // 近7天
@@ -234,6 +246,8 @@ const get7Days = function () {
   )
   getTime.value = [startTime, endTime]
   console.log('getTime', getTime.value)
+  activeTimeRange.value = '7days' // 标记当前激活状态
+
   getSelectBy()
 }
 
@@ -468,19 +482,10 @@ const handleCurrentChange = function (val) {
           <el-col :span="21">
             <div class="head-card-element">
               <el-text class="mx-1"  >退款时间：</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-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间" end-placeholder="结束时间"  style="width: 400px" @change="handleDatePickerChange"/>
+              <el-button @click="getToday()" style="margin-left: 10px"  :type="activeTimeRange === 'today' ? 'primary' : ''"> 今</el-button>
+              <el-button @click="getYesterday()" style="margin-left: 10px"  :type="activeTimeRange === 'yesterday' ? 'primary' : ''"> 昨</el-button>
+              <el-button @click="get7Days()" style="margin-left: 10px"  :type="activeTimeRange === '7days' ? 'primary' : ''"> 近7天</el-button>
 
               <el-button type="success" @click="reset()">重置</el-button>
               <el-button type="primary" @click="search()">查询</el-button>
diff --git a/src/views/usergold/clientCountDetail.vue b/src/views/usergold/clientCountDetail.vue
index e9bf8d0..1a41b62 100644
--- a/src/views/usergold/clientCountDetail.vue
+++ b/src/views/usergold/clientCountDetail.vue
@@ -9,6 +9,13 @@ import { writeFile, utils } from 'xlsx'
 import request from "@/util/request.js";
 
 
+// 标记当前激活的时间范围按钮
+const activeTimeRange = ref('')
+// 日期选择器变化时清除按钮激活状态
+const handleDatePickerChange = () => {
+  activeTimeRange.value = ''
+}
+
 // 定义ref 变量来存储合计数据
 const totalPermanentGold = ref(0)
 const totalFreeGold = ref(0)
@@ -252,6 +259,8 @@ const reset = function () {
   delete sortOrder.value
   getTime.value = []
   delete goldDetail.value.payPlatform
+  activeTimeRange.value = '' // 清除激活状态
+
   search()
 }
 
@@ -269,6 +278,8 @@ const getToday = function () {
   const startTime = today.startOf('day').toDate()
   const endTime = today.add(1, 'days').startOf('day').toDate()
   getTime.value = [startTime, endTime]
+  activeTimeRange.value = 'today' // 标记当前激活状态
+
   search()
 }
 
@@ -279,6 +290,8 @@ const getYesterday = function () {
   const startTime = yesterday.startOf('day').toDate()
   const endTime = today.startOf('day').toDate()
   getTime.value = [startTime, endTime]
+  activeTimeRange.value = 'yesterday' // 标记当前激活状态
+
   search()
 }
 
@@ -287,6 +300,8 @@ const get7Days = function () {
   const startTime = moment().subtract(6, 'day').startOf('day').toDate()
   const endTime = moment().add(1, 'days').startOf('day').toDate()
   getTime.value = [startTime, endTime]
+  activeTimeRange.value = '7days' // 标记当前激活状态
+
   search()
 }
 
@@ -397,10 +412,10 @@ onMounted(async function () {
           <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="结束时间" style="margin-right: 50px" />
-            <el-button @click="getToday()">今</el-button>
-            <el-button @click="getYesterday()">昨</el-button>
-            <el-button @click="get7Days()">近7天</el-button>
+              end-placeholder="结束时间"  style="width: 400px" @change="handleDatePickerChange"/>
+            <el-button @click="getToday()" style="margin-left: 10px"  :type="activeTimeRange === 'today' ? 'primary' : ''"> 今</el-button>
+            <el-button @click="getYesterday()" style="margin-left: 10px"  :type="activeTimeRange === 'yesterday' ? 'primary' : ''"> 昨</el-button>
+            <el-button @click="get7Days()" style="margin-left: 10px"  :type="activeTimeRange === '7days' ? 'primary' : ''"> 近7天</el-button>
 
             <el-button type="success" @click="reset()">重置</el-button>
             <el-button type="primary" @click="search()">查询</el-button>
diff --git a/src/views/workspace/index.vue b/src/views/workspace/index.vue
index b941a57..15b339d 100644
--- a/src/views/workspace/index.vue
+++ b/src/views/workspace/index.vue
@@ -156,11 +156,11 @@
                   activeTab === 'recharge' ? sumRechargeTask / 100 : sumConsumeTask / 100
                 }}&nbsp;&nbsp;&nbsp;&nbsp;
               </div>
-              <div>
-                <el-button @click="getToday()" label="day" style="margin-left:250px">今日</el-button>
-                <el-button @click="getWeek()" label="week">本周</el-button>
-                <el-button @click="getMonth()" label="month">本月</el-button>
-                <el-button @click="getYear()" label="year">本年</el-button>
+              <div @change="handleDatePickerChange">
+                <el-button @click="getToday()" label="day" style="margin-left:250px"  :type="activeTimeRange === 'today' ? 'primary' : ''">今日</el-button>
+                <el-button @click="getWeek()" label="week"  :type="activeTimeRange === 'week' ? 'primary' : ''">本周</el-button>
+                <el-button @click="getMonth()" label="month"  :type="activeTimeRange === 'month' ? 'primary' : ''">本月</el-button>
+                <el-button @click="getYear()" label="year" :type="activeTimeRange === 'year' ? 'primary' : ''">本年</el-button>
               </div>
               <!-- 设置日期选择器的显示和绑定值格式 -->
               <el-date-picker
@@ -220,6 +220,13 @@ import utc from 'dayjs-plugin-utc'
 import {ArrowDownBold, ArrowUpBold, SemiSelect} from '@element-plus/icons-vue'
 
 dayjs.extend(utc)
+
+// 标记当前激活的时间范围按钮
+const activeTimeRange = ref('')
+// 日期选择器变化时清除按钮激活状态
+const handleDatePickerChange = () => {
+  activeTimeRange.value = ''
+}
 // 地区数据
 const markets = ref([])
 // 图表相关
@@ -279,6 +286,8 @@ const getToday = function () {
   const endTime = today.add(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss')
   dateRange.value = [startTime, endTime]
   console.log('看看dateRange', dateRange.value)
+  activeTimeRange.value = 'today' // 标记当前激活状态
+
   getChartData()
 }
 // 本周
@@ -288,6 +297,8 @@ const getWeek = function () {
   const endTime = today.add(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
   dateRange.value = [startTime, endTime]
   console.log('看看dateRange', dateRange.value)
+  activeTimeRange.value = 'week' // 标记当前激活状态
+
   getChartData()
 }
 // 本月
@@ -297,6 +308,8 @@ const getMonth = function () {
   const endTime = today.add(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
   dateRange.value = [startTime, endTime]
   console.log('看看dateRange', dateRange.value)
+  activeTimeRange.value = 'month' // 标记当前激活状态
+
   getChartData()
 }
 // 本年
@@ -306,6 +319,7 @@ const getYear = function () {
   const endTime = today.add(1, 'year').startOf('year').format('YYYY-MM-DD HH:mm:ss')
   dateRange.value = [startTime, endTime]
   console.log('看看dateRange', dateRange.value)
+  activeTimeRange.value = 'year' // 标记当前激活状态
   getChartData()
 }