From fd50ebbc6f4204b4ea11678d1d6691930a686031 Mon Sep 17 00:00:00 2001
From: lihuilin <analsak@163.com>
Date: Sun, 24 Aug 2025 16:56:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/consume/bean/addBeanConsume.vue      | 181 ++++-----
 src/views/consume/gold/addCoinConsume.vue      | 542 ++++++++++++-------------
 src/views/consume/gold/coinConsume.vue         |   8 +-
 src/views/consume/gold/coinConsumeDetail.vue   | 240 +++++------
 src/views/recharge/bean/addBeanRecharge.vue    |  14 +-
 src/views/recharge/gold/addCoinRecharge.vue    |   3 -
 src/views/recharge/gold/coinRecharge.vue       |  35 +-
 src/views/recharge/gold/coinRechargeDetail.vue | 229 +++++------
 8 files changed, 578 insertions(+), 674 deletions(-)

diff --git a/src/views/consume/bean/addBeanConsume.vue b/src/views/consume/bean/addBeanConsume.vue
index 61a9b9d..2c97e1c 100644
--- a/src/views/consume/bean/addBeanConsume.vue
+++ b/src/views/consume/bean/addBeanConsume.vue
@@ -205,96 +205,93 @@ const throttledHandleConsumeFormt = _.throttle(handleConsumeForm, 5000, {
 })
 </script>
 <template>
-  <div>
-    <div class="userAndform">
-      <div class="left">
-        <el-form :model="consumeForm" :rules="rules" ref="formRef" label-width="auto" style="min-width: 420px"
-          class="add-form">
-          <el-form-item prop="jwcode" label="精网号" label-position="left">
-            <el-input v-model="consumeForm.jwcode" style="width: 200px" />
-            <el-button type="primary" @click="getUser(consumeForm.jwcode)" style="margin-left: 20px">查询</el-button>
-          </el-form-item>
-          <el-form-item prop="permanentBean" label="付费金豆" label-position="left">
-            <el-input v-model="consumeForm.permanentBean" placeholder="0" style="width: 100px" />
-          </el-form-item>
-          <el-form-item prop="freeBean" label="免费金豆" label-position="left">
-            <el-input v-model="consumeForm.freeBean" placeholder="0" style="width: 100px" />
-          </el-form-item>
-          <el-form-item prop="remark" label="备注" label-position="left">
-            <el-input v-model="consumeForm.remark" style="width: 300px" :rows="5" maxlength="100" show-word-limit
-              type="textarea" />
-          </el-form-item>
-          <!-- <el-form-item prop="adminName" label="提交人">
+  <div class="userAndform">
+    <div class="left">
+      <el-form :model="consumeForm" :rules="rules" ref="formRef" label-width="auto" style="min-width: 420px"
+        class="add-form">
+        <el-form-item prop="jwcode" label="精网号" label-position="left">
+          <el-input v-model="consumeForm.jwcode" style="width: 200px" />
+          <el-button type="primary" @click="getUser(consumeForm.jwcode)" style="margin-left: 20px">查询</el-button>
+        </el-form-item>
+        <el-form-item prop="permanentBean" label="付费金豆" label-position="left">
+          <el-input v-model="consumeForm.permanentBean" placeholder="0" style="width: 100px" />
+        </el-form-item>
+        <el-form-item prop="freeBean" label="免费金豆" label-position="left">
+          <el-input v-model="consumeForm.freeBean" placeholder="0" style="width: 100px" />
+        </el-form-item>
+        <el-form-item prop="remark" label="备注" label-position="left">
+          <el-input v-model="consumeForm.remark" style="width: 300px" :rows="5" maxlength="100" show-word-limit
+            type="textarea" />
+        </el-form-item>
+        <!-- <el-form-item prop="adminName" label="提交人">
         <el-input style="width: 300px" :value="adminData.adminName" disabled placeholder="提交人姓名" />
       </el-form-item> -->
-          <el-button @click="deleteConsumeForm" style="margin-left: 280px" type="success">重置</el-button>
-          <el-button type="primary" :disabled="addDisabled" @click="handleConsumeForm"> 提交 </el-button>
-        </el-form>
-      </div>
-      <div class="right">
-        <!-- 客户信息栏 -->
-        <el-card v-if="user.jwcode" class="customer-info">
-          <el-form :model="user" label-width="auto" label-position="left">
-            <el-text size="large" style="min-width: 600px;">客户信息</el-text>
+        <el-button @click="deleteConsumeForm" style="margin-left: 280px" type="success">重置</el-button>
+        <el-button type="primary" :disabled="addDisabled" @click="handleConsumeForm"> 提交 </el-button>
+      </el-form>
+    </div>
+    <div class="right">
+      <!-- 客户信息栏 -->
+      <el-card v-if="user.jwcode" class="customer-info">
+        <el-form :model="user" label-width="auto" label-position="left">
+          <el-text size="large" style="min-width: 600px;">客户信息</el-text>
 
-            <!-- 第一行：姓名 + 当前付费金豆 -->
-            <el-row style="margin-top: 20px">
-              <el-col :span="9">
-                <el-form-item label="姓名:">
-                  <p style="color: #2fa1ff; margin-right: 5px">{{ user.name }}</p>
-                </el-form-item>
-              </el-col>
-              <el-col :span="14">
-                <el-form-item label="当前付费金豆:">
-                  <p style="color: #2fa1ff; margin-right: 5px" v-if="!isNaN(Number(user.permanentBean))">
-                    {{ Number(user.permanentBean) }}
-                  </p>
-                  <!-- 如果不是有效的数字，显示默认值 -->
-                  <p v-else></p>
-                </el-form-item>
-              </el-col>
-            </el-row>
+          <!-- 第一行：姓名 + 当前付费金豆 -->
+          <el-row style="margin-top: 20px">
+            <el-col :span="9">
+              <el-form-item label="姓名:">
+                <p style="color: #2fa1ff; margin-right: 5px">{{ user.name }}</p>
+              </el-form-item>
+            </el-col>
+            <el-col :span="14">
+              <el-form-item label="当前付费金豆:">
+                <p style="color: #2fa1ff; margin-right: 5px" v-if="!isNaN(Number(user.permanentBean))">
+                  {{ Number(user.permanentBean) }}
+                </p>
+                <!-- 如果不是有效的数字，显示默认值 -->
+                <p v-else></p>
+              </el-form-item>
+            </el-col>
+          </el-row>
 
-            <!-- 第二行：精网号 + 免费金豆 -->
-            <el-row>
-              <el-col :span="9">
-                <el-form-item label="精网号">
-                  <p style="color: #2fa1ff; margin-right: 5px">{{ user.jwcode }}</p>
-                </el-form-item>
-              </el-col>
-              <el-col :span="14">
-                <el-form-item label="当前免费金豆:">
-                  <span style="color: #2fa1ff; margin-right: 5px" v-if="user.freeBean !== undefined">{{ user.freeBean }}
-                  </span>
-                </el-form-item>
-              </el-col>
-            </el-row>
-            <!-- 第三行：消费次数 + 所属门店 -->
-            <el-row>
-              <el-col :span="9">
-                <el-form-item label="所属门店">
-                  <p style="color: #2fa1ff">{{ user.market }}</p>
-                </el-form-item>
-              </el-col>
-              <el-col :span="9">
-                <el-form-item label="消耗金豆总数">
-                  <p style="color: #2fa1ff; margin-right: 5px" v-if="user.consumeSum != null">{{ user.consumeSum }}</p>
-                  <p style="color: #2fa1ff; margin-right: 5px" v-else>{{ 0 }}</p>
-                </el-form-item>
-              </el-col>
-            </el-row>
-          </el-form>
-        </el-card>
-      </div>
+          <!-- 第二行：精网号 + 免费金豆 -->
+          <el-row>
+            <el-col :span="9">
+              <el-form-item label="精网号">
+                <p style="color: #2fa1ff; margin-right: 5px">{{ user.jwcode }}</p>
+              </el-form-item>
+            </el-col>
+            <el-col :span="14">
+              <el-form-item label="当前免费金豆:">
+                <span style="color: #2fa1ff; margin-right: 5px" v-if="user.freeBean !== undefined">{{ user.freeBean }}
+                </span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <!-- 第三行：消费次数 + 所属门店 -->
+          <el-row>
+            <el-col :span="9">
+              <el-form-item label="所属门店">
+                <p style="color: #2fa1ff">{{ user.market }}</p>
+              </el-form-item>
+            </el-col>
+            <el-col :span="9">
+              <el-form-item label="消耗金豆总数">
+                <p style="color: #2fa1ff; margin-right: 5px" v-if="user.consumeSum != null">{{ user.consumeSum }}</p>
+                <p style="color: #2fa1ff; margin-right: 5px" v-else>{{ 0 }}</p>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-card>
     </div>
   </div>
 </template>
 <style scoped lang="scss">
 .userAndform {
-  width: 100%;
-  height: 100%;
+  width: 80vw;
+  height: 85vh;
   display: flex;
-  align-items: center;
   justify-content: center;
 
   .left {
@@ -302,38 +299,28 @@ const throttledHandleConsumeFormt = _.throttle(handleConsumeForm, 5000, {
     display: flex;
 
     .add-form {
-      width: 100%;
-      margin-top: 50px;
+      margin-top: 5vh;
     }
   }
 
   .right {
     flex: 1;
-    margin-left: 50px;
     display: flex;
 
-    .beautiful {
-      width: 90%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 0 10px;
+    .customer-info {
+      width: 35vw;
+      height:28vh;
+      float: right;
+      margin-top: 5vh;
     }
   }
 }
 
-.customer-info {
-  width: 700px;
-  float: right;
-  margin-right: 300px;
-  margin-top: 50px;
-}
-
 p {
   margin: 0px;
 }
 
 .el-form-item {
-  margin-left: 50px;
+  margin-left: 5vw;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/consume/gold/addCoinConsume.vue b/src/views/consume/gold/addCoinConsume.vue
index 194fd97..d15dc8b 100644
--- a/src/views/consume/gold/addCoinConsume.vue
+++ b/src/views/consume/gold/addCoinConsume.vue
@@ -1,16 +1,16 @@
 <script setup>
-import {onMounted, reactive, ref, watch} from "vue";
-import {ElIcon, ElMessage, ElMessageBox} from "element-plus";
+import { onMounted, reactive, ref, watch } from "vue";
+import { ElIcon, ElMessage, ElMessageBox } from "element-plus";
 import moment from "moment";
 import request from "@/util/http.js"
 import Cookies from 'js-cookie';
-import {useAdminStore} from "@/store/index.js";
-import {storeToRefs} from "pinia";
-import {WarnTriangleFilled} from "@element-plus/icons-vue";
+import { useAdminStore } from "@/store/index.js";
+import { storeToRefs } from "pinia";
+import { WarnTriangleFilled } from "@element-plus/icons-vue";
 import dayjs from "dayjs";
 
 const adminStore = useAdminStore();
-const {adminData, menuTree} = storeToRefs(adminStore);
+const { adminData, menuTree } = storeToRefs(adminStore);
 // 精网号去空格
 const trimJwCode = () => {
   if (addConsume.value.jwcode) {
@@ -64,11 +64,11 @@ const addConsume = ref({
 const Ref = ref(null)
 const rules = reactive({
   jwcode: [
-    {required: true, message: "请输入精网号", trigger: "blur"},
+    { required: true, message: "请输入精网号", trigger: "blur" },
   ],
-  goodsName: [{required: true, message: "请选择商品", trigger: "change"}],
+  goodsName: [{ required: true, message: "请选择商品", trigger: "change" }],
   sumGold: [
-    {required: true, message: "消耗金币总数不能为空", trigger: "blur"},
+    { required: true, message: "消耗金币总数不能为空", trigger: "blur" },
     {
       validator: (rule, value, callback) => {
         // 允许0开头的小数（如0.1）但不允许单独的0
@@ -173,10 +173,10 @@ function calculateCoins(sumGold) {
   console.log("消耗金币计算函数:计算金币", sumGold);
   const parsedSumGold = parseFloat(sumGold);
   if (isNaN(parsedSumGold) || parsedSumGold <= 0 || !user.value.jwcode) {
-    return {free: 0, permanent: 0, task: 0};
+    return { free: 0, permanent: 0, task: 0 };
   }
 
-  const {nowFreeGold, nowPermanentGold, nowTaskGold} = user.value;
+  const { nowFreeGold, nowPermanentGold, nowTaskGold } = user.value;
   let remaining = parsedSumGold;
   let freeUsed = 0, permanentUsed = 0, taskUsed = 0;
 
@@ -202,7 +202,7 @@ function calculateCoins(sumGold) {
   addConsume.value.permanentGold = permanentUsed;
   addConsume.value.taskGold = taskUsed;
 
-  return {free: freeUsed, permanent: permanentUsed, task: taskUsed};
+  return { free: freeUsed, permanent: permanentUsed, task: taskUsed };
 }
 
 // 用来写的 cookie 的 key
@@ -233,7 +233,7 @@ const add = async function () {
     // 设置cookies,用户jwcode为key，value也是jwcode，过期时间为1天
     Cookies.set(WriteCookies.value, WriteCookiesTime.value, {
       expires:
-          1, path: '/'
+        1, path: '/'
     });
 
     addDisabled.value = true
@@ -419,7 +419,7 @@ const getUser = async function (jwcode) {
     // 发送POST请求
     const result = await request({
       url: "/user/selectUser",
-      data: {jwcode}
+      data: { jwcode }
     });
 
     console.log("请求成功", result);
@@ -429,16 +429,16 @@ const getUser = async function (jwcode) {
       user.value = {
         ...result.data,
         // 统一处理所有黄金数值，除以100
-        nowPermanentGold: result.data.nowPermanentGold ,
-        nowFreeGold: result.data.nowFreeGold ,
-        nowSumGold: result.data.nowSumGold ,
-        nowTaskGold: result.data.nowTaskGold ,
-        nowFreeJune: result.data.nowFreeJune ,
-        nowFreeDecember: result.data.nowFreeDecember ,
-        historySumGold: result.data.historySumGold ,
-        historyPermanentGold: result.data.historyPermanentGold ,
-        historyFreeGold: result.data.historyFreeGold ,
-        historyTaskGold: result.data.historyTaskGold 
+        nowPermanentGold: result.data.nowPermanentGold,
+        nowFreeGold: result.data.nowFreeGold,
+        nowSumGold: result.data.nowSumGold,
+        nowTaskGold: result.data.nowTaskGold,
+        nowFreeJune: result.data.nowFreeJune,
+        nowFreeDecember: result.data.nowFreeDecember,
+        historySumGold: result.data.historySumGold,
+        historyPermanentGold: result.data.historyPermanentGold,
+        historyFreeGold: result.data.historyFreeGold,
+        historyTaskGold: result.data.historyTaskGold
       };
 
       ElMessage.success("查询成功");
@@ -446,7 +446,7 @@ const getUser = async function (jwcode) {
       if (addConsume.value.sumGold) {
         const parsedSumGold = parseFloat(addConsume.value.sumGold);
         if (!isNaN(parsedSumGold) && parsedSumGold > 0) {
-          const {free, permanent, task} = calculateCoins(parsedSumGold);
+          const { free, permanent, task } = calculateCoins(parsedSumGold);
           addConsume.value.freeGold = free;
           addConsume.value.permanentGold = permanent;
           addConsume.value.taskGold = task;
@@ -498,20 +498,20 @@ const getGoods = async function () {
 
 // 监听消费总金额变化，自动计算三类金币
 watch(
-    () => addConsume.value.sumGold,
-    (newValue) => {
-      const parsedNewValue = parseFloat(newValue);
-      if (!isNaN(parsedNewValue) && parsedNewValue > 0) {
-        const {free, permanent, task} = calculateCoins(parsedNewValue);
-        addConsume.value.freeGold = free;
-        addConsume.value.permanentGold = permanent;
-        addConsume.value.taskGold = task;
-      } else {
-        addConsume.value.freeGold = null;
-        addConsume.value.permanentGold = null;
-        addConsume.value.taskGold = null;
-      }
+  () => addConsume.value.sumGold,
+  (newValue) => {
+    const parsedNewValue = parseFloat(newValue);
+    if (!isNaN(parsedNewValue) && parsedNewValue > 0) {
+      const { free, permanent, task } = calculateCoins(parsedNewValue);
+      addConsume.value.freeGold = free;
+      addConsume.value.permanentGold = permanent;
+      addConsume.value.taskGold = task;
+    } else {
+      addConsume.value.freeGold = null;
+      addConsume.value.permanentGold = null;
+      addConsume.value.taskGold = null;
     }
+  }
 );
 
 /*
@@ -528,105 +528,105 @@ onMounted(async function () {
 <template>
   <div class="father1">
     <div class="left">
-    <el-form :model="addConsume" ref="Ref" :rules="rules" style="min-width: 420px;" class="add-form" label-width="auto" label-position="right">
-      <el-form-item prop="jwcode" label="精网号" style="margin-top: 50px">
-        <el-input v-model="addConsume.jwcode" style="width: 200px;"/>
-        <el-button type="primary" @click="getUser(addConsume.jwcode)" style="margin-left: 20px">查询
-        </el-button>
-      </el-form-item>
-
-      <el-form-item prop="goodsName" label="商品名称" >
-        <el-select v-model="addConsume.goodsName" placeholder="请选择商品" style="width: 200px" clearable filterable
-                  >
-          <el-option v-for="(item, index) in goods" :key="index" :label="item.label" :value="item"/>
-
-        </el-select>
-      </el-form-item>
-
-      <el-form-item prop="sumGold" label="消耗金币总数">
-        <el-input v-model="addConsume.sumGold" style="width: 120px" @input="validateInput()"
-                  @change="calculateCoins(addConsume.sumGold)"/>
-      </el-form-item>
-
-
-      <!-- 三类金币自动计算（禁用状态，不可编辑） -->
-
-      <el-form-item prop="permanentGold" label="永久金币">
-        <el-input v-model="addConsume.permanentGold" disabled style="width: 120px">
-          <template #default="scope">{{ scope.row.permanentGold }}</template>
-        </el-input>
-        <p style="margin-right: 0px">&nbsp;&nbsp;个</p>
-      </el-form-item>
-
-      <el-form-item prop="freeCoin" label="免费金币">
-        <el-input disabled v-model="addConsume.freeGold" style="width: 120px"/>
-        <p style="margin-right: 0px">&nbsp;&nbsp;个</p>
-      </el-form-item>
-
-      <el-form-item prop="taskGold" label="任务金币">
-        <el-input disabled v-model="addConsume.taskGold" style="width: 120px"/>
-        <p style="margin-right: 20px">&nbsp;&nbsp;个</p>
-      </el-form-item>
-
-      <el-form-item prop="remark" label="备注">
-        <el-input v-model="addConsume.remark" style="width: 250px" :rows="4" maxlength="100"
-                  show-word-limit type="textarea"/>
-      </el-form-item>
-
-      <el-button type="success" @click="resetForm()" style="margin-left: 200px;margin-top:10px">重置</el-button>
-      <el-button type="primary" :disabled="addDisabled" @click="addBefore" style="margin-top:10px"> 提交</el-button>
-    </el-form>
-  </div>
-
-<div class="right">
-    <!-- 客户信息栏 -->
-    <el-card v-if="user.jwcode" style="width: 800px; 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="9">
-            <el-form-item label="姓名">
-              <p>{{ user.name }}</p>
-            </el-form-item>
-          </el-col>
-          <el-col :span="14">
-            <el-form-item label="当前金币总数" style="width: 500px">
-              <span style="color: #2fa1ff; margin-right: 5px" v-if="user.nowSumGold !== undefined">{{
+      <el-form :model="addConsume" ref="Ref" :rules="rules" style="min-width: 420px;" class="add-form"
+        label-width="auto" label-position="right">
+        <el-form-item prop="jwcode" label="精网号" style="margin-top: 50px">
+          <el-input v-model="addConsume.jwcode" style="width: 200px;" />
+          <el-button type="primary" @click="getUser(addConsume.jwcode)" style="margin-left: 20px">查询
+          </el-button>
+        </el-form-item>
+
+        <el-form-item prop="goodsName" label="商品名称">
+          <el-select v-model="addConsume.goodsName" placeholder="请选择商品" style="width: 200px" clearable filterable>
+            <el-option v-for="(item, index) in goods" :key="index" :label="item.label" :value="item" />
+
+          </el-select>
+        </el-form-item>
+
+        <el-form-item prop="sumGold" label="消耗金币总数">
+          <el-input v-model="addConsume.sumGold" style="width: 120px" @input="validateInput()"
+            @change="calculateCoins(addConsume.sumGold)" />
+        </el-form-item>
+
+
+        <!-- 三类金币自动计算（禁用状态，不可编辑） -->
+
+        <el-form-item prop="permanentGold" label="永久金币">
+          <el-input v-model="addConsume.permanentGold" disabled style="width: 120px">
+            <template #default="scope">{{ scope.row.permanentGold }}</template>
+          </el-input>
+          <p style="margin-right: 0px">&nbsp;&nbsp;个</p>
+        </el-form-item>
+
+        <el-form-item prop="freeCoin" label="免费金币">
+          <el-input disabled v-model="addConsume.freeGold" style="width: 120px" />
+          <p style="margin-right: 0px">&nbsp;&nbsp;个</p>
+        </el-form-item>
+
+        <el-form-item prop="taskGold" label="任务金币">
+          <el-input disabled v-model="addConsume.taskGold" style="width: 120px" />
+          <p style="margin-right: 20px">&nbsp;&nbsp;个</p>
+        </el-form-item>
+
+        <el-form-item prop="remark" label="备注">
+          <el-input v-model="addConsume.remark" style="width: 250px" :rows="4" maxlength="100" show-word-limit
+            type="textarea" />
+        </el-form-item>
+
+        <el-button type="success" @click="resetForm()" style="margin-left: 200px;margin-top:10px">重置</el-button>
+        <el-button type="primary" :disabled="addDisabled" @click="addBefore" style="margin-top:10px"> 提交</el-button>
+      </el-form>
+    </div>
+
+    <div class="right">
+      <!-- 客户信息栏 -->
+      <el-card v-if="user.jwcode" style="width: 800px; 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="9">
+              <el-form-item label="姓名">
+                <p>{{ user.name }}</p>
+              </el-form-item>
+            </el-col>
+            <el-col :span="14">
+              <el-form-item label="当前金币总数" style="width: 500px">
+                <span style="color: #2fa1ff; margin-right: 5px" v-if="user.nowSumGold !== undefined">{{
                   user.nowSumGold
                 }}</span>
-            </el-form-item>
-            <!-- 金币详情独立显示 -->
-            <el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 -->
-              <span style="color: #b1b1b1; margin-left: 0px" v-if="user.nowPermanentGold !== undefined">(永久金币:{{
+              </el-form-item>
+              <!-- 金币详情独立显示 -->
+              <el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 -->
+                <span style="color: #b1b1b1; margin-left: 0px" v-if="user.nowPermanentGold !== undefined">(永久金币:{{
                   user.nowPermanentGold
                 }};
-                免费金币:{{ user.nowFreeGold }};
-                任务金币:{{ user.nowTaskGold }})</span>
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <!-- 第二行：精网号 + 当前金币（独立行） -->
-        <el-row>
-          <el-col :span="9">
-            <el-form-item label="精网号">
-              <p>{{ user.jwcode }}</p>
-            </el-form-item>
-          </el-col>
-           <el-col :span="14">
-            <el-form-item label="消费次数">
-              <p style="color: #2fa1ff">{{ user.consumeNum }} </p>
-            </el-form-item>
+                  免费金币:{{ user.nowFreeGold }};
+                  任务金币:{{ user.nowTaskGold }})</span>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <!-- 第二行：精网号 + 当前金币（独立行） -->
+          <el-row>
+            <el-col :span="9">
+              <el-form-item label="精网号">
+                <p>{{ user.jwcode }}</p>
+              </el-form-item>
+            </el-col>
+            <el-col :span="14">
+              <el-form-item label="消费次数">
+                <p style="color: #2fa1ff">{{ user.consumeNum }} </p>
+              </el-form-item>
               <el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 -->
-              <p style="font-size: small; color: #b1b1b1">(仅统计2025-01-01后的数据)</p>
-            </el-form-item>
-          </el-col>
-        </el-row>
+                <p style="font-size: small; color: #b1b1b1">(仅统计2025-01-01后的数据)</p>
+              </el-form-item>
+            </el-col>
+          </el-row>
 
-        <!-- 第三行：首次充值日期 + 充值次数 -->
-        <!-- <el-row >
+          <!-- 第三行：首次充值日期 + 充值次数 -->
+          <!-- <el-row >
           <el-col :span="9">
             <el-form-item label="首次充值日期">
               <p v-if="user.firstRecharge">
@@ -637,157 +637,151 @@ onMounted(async function () {
        
         </el-row> -->
 
-        <!-- 第四行：消费次数 + 所属门店 -->
-        <el-row>
-          <el-col :span="9">
-            <el-form-item label="所属门店">
-              <p>{{ user.market }}</p>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-    </el-card>
-
-
-    <el-dialog
-        v-model="FirstConsumeDialogVisible"
-        title="操作确认"
-        :before-close="FirstConsumeDialogVisiblehandleClose"
-        :close-on-click-modal="false"
-        width="480px"
-    >
-      <!-- 内容整体居中且收窄 -->
-      <div class="confirm-body">
-        <!-- 用户信息 -->
-        <div>
-          <div class="field-label">用户信息</div>
-          <el-input :model-value="user.jwcode + (user.name ? '【' + user.name + '】' : '')" disabled/>
+          <!-- 第四行：消费次数 + 所属门店 -->
+          <el-row>
+            <el-col :span="9">
+              <el-form-item label="所属门店">
+                <p>{{ user.market }}</p>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-card>
+
+
+      <el-dialog v-model="FirstConsumeDialogVisible" title="操作确认" :before-close="FirstConsumeDialogVisiblehandleClose"
+        :close-on-click-modal="false" width="480px">
+        <!-- 内容整体居中且收窄 -->
+        <div class="confirm-body">
+          <!-- 用户信息 -->
+          <div>
+            <div class="field-label">用户信息</div>
+            <el-input :model-value="user.jwcode + (user.name ? '【' + user.name + '】' : '')" disabled />
+          </div>
+          <!-- 活动名称 -->
+          <div class="field">
+            <div class="field-label">商品名称</div>
+            <el-input v-model="addConsume.goodsName.value" disabled />
+          </div>
+          <!--金币总数   -->
+          <div class="field">
+            <div class="field-label">金币总数</div>
+            <el-input v-model="addConsume.sumGold" disabled />
+          </div>
+          <!-- 金币详细信息（同一行左右排列） -->
+          <el-row :gutter="20" class="coins-row">
+            <el-col :span="8">
+              <div class="field">
+                <div class="field-label">永久金币</div>
+                <el-input v-model="addConsume.permanentGold" disabled />
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="field">
+                <div class="field-label">免费金币</div>
+                <el-input v-model="addConsume.freeGold" disabled />
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="field">
+                <div class="field-label">任务金币</div>
+                <el-input v-model="addConsume.taskGold" disabled />
+              </div>
+            </el-col>
+
+          </el-row>
+
+          <div class="field">
+            <div class="field-label">备注</div>
+            <el-input v-model="addConsume.remark" disabled />
+          </div>
         </div>
-        <!-- 活动名称 -->
-        <div class="field">
-          <div class="field-label">商品名称</div>
-          <el-input v-model="addConsume.goodsName.value" disabled/>
-        </div>
-        <!--金币总数   -->
-        <div class="field">
-          <div class="field-label">金币总数</div>
-          <el-input v-model="addConsume.sumGold" disabled/>
-        </div>
-        <!-- 金币详细信息（同一行左右排列） -->
-        <el-row :gutter="20" class="coins-row">
-          <el-col :span="8">
-            <div class="field">
-              <div class="field-label">永久金币</div>
-              <el-input v-model="addConsume.permanentGold" disabled/>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <div class="field">
-              <div class="field-label">免费金币</div>
-              <el-input v-model="addConsume.freeGold" disabled/>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <div class="field">
-              <div class="field-label">任务金币</div>
-              <el-input v-model="addConsume.taskGold" disabled/>
-            </div>
-          </el-col>
-
-        </el-row>
-
-        <div class="field">
-          <div class="field-label">备注</div>
-          <el-input v-model="addConsume.remark" disabled/>
-        </div>
-      </div>
-
-      <!-- 底部按钮（居中） -->
-      <template #footer>
-        <div class="dialog-footer-center">
-          <el-button @click="FirstConsumeDialogVisibleCancel">取 消</el-button>
-          <el-button type="primary" @click="FirstConsumeDialogVisibleContinue">确认购买</el-button>
-        </div>
-      </template>
-    </el-dialog>
-
-
-    <el-dialog v-model="ConsumeDialogVisible" title="第二次操作确认" :before-close="ConsumeDialogVisiblehandleClose"
-               :close-on-click-modal="false" width="480px">
-      <!-- 内容整体居中且收窄 -->
-      <div class="confirm-body">
-        <!-- 用户信息 -->
-        <div>
-          <div class="field-label">用户信息</div>
-          <el-input :model-value="user.jwcode + (user.name ? '【' + user.name + '】' : '')" disabled/>
-        </div>
-        <!-- 活动名称 -->
-        <div class="field">
-          <div class="field-label">商品名称</div>
-          <el-input v-model="addConsume.goodsName.value" disabled/>
-        </div>
-        <!--金币总数   -->
-        <div class="field">
-          <div class="field-label">金币总数</div>
-          <el-input v-model="addConsume.sumGold" disabled/>
-        </div>
-        <!-- 金币详细信息（同一行左右排列） -->
-        <el-row :gutter="20" class="coins-row">
-          <el-col :span="8">
-            <div class="field">
-              <div class="field-label">永久金币</div>
-              <el-input v-model="addConsume.permanentGold" disabled/>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <div class="field">
-              <div class="field-label">免费金币</div>
-              <el-input v-model="addConsume.freeGold" disabled/>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <div class="field">
-              <div class="field-label">任务金币</div>
-              <el-input v-model="addConsume.taskGold" disabled/>
-            </div>
-          </el-col>
-
-        </el-row>
-        <!-- 风险提示 -->
-        <div style="display: flex; align-items: center; margin-top: 20px;">
-          <el-icon :size="24" color="#FFD700">
-            <WarnTriangleFilled/>
-          </el-icon>
-          <p>重复购买风险提示</p>
-        </div>
-        <!-- 记录 + 虚线分隔 -->
-        <div>
-          <el-divider border-style="dashed"/>
-          <p>检测到该用户近期有相似消费记录：</p>
-          · {{ ReadCookiesTime }} 购买 【{{ addConsume.goodsName.value }}】(操作人: {{ adminData.adminName }})
-        </div>
-        <div style="margin-top: 10px">
-          <p>是否继续操作？</p>
 
+        <!-- 底部按钮（居中） -->
+        <template #footer>
+          <div class="dialog-footer-center">
+            <el-button @click="FirstConsumeDialogVisibleCancel">取 消</el-button>
+            <el-button type="primary" @click="FirstConsumeDialogVisibleContinue">确认购买</el-button>
+          </div>
+        </template>
+      </el-dialog>
+
+
+      <el-dialog v-model="ConsumeDialogVisible" title="第二次操作确认" :before-close="ConsumeDialogVisiblehandleClose"
+        :close-on-click-modal="false" width="480px">
+        <!-- 内容整体居中且收窄 -->
+        <div class="confirm-body">
+          <!-- 用户信息 -->
+          <div>
+            <div class="field-label">用户信息</div>
+            <el-input :model-value="user.jwcode + (user.name ? '【' + user.name + '】' : '')" disabled />
+          </div>
+          <!-- 活动名称 -->
+          <div class="field">
+            <div class="field-label">商品名称</div>
+            <el-input v-model="addConsume.goodsName.value" disabled />
+          </div>
+          <!--金币总数   -->
+          <div class="field">
+            <div class="field-label">金币总数</div>
+            <el-input v-model="addConsume.sumGold" disabled />
+          </div>
+          <!-- 金币详细信息（同一行左右排列） -->
+          <el-row :gutter="20" class="coins-row">
+            <el-col :span="8">
+              <div class="field">
+                <div class="field-label">永久金币</div>
+                <el-input v-model="addConsume.permanentGold" disabled />
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="field">
+                <div class="field-label">免费金币</div>
+                <el-input v-model="addConsume.freeGold" disabled />
+              </div>
+            </el-col>
+            <el-col :span="8">
+              <div class="field">
+                <div class="field-label">任务金币</div>
+                <el-input v-model="addConsume.taskGold" disabled />
+              </div>
+            </el-col>
+
+          </el-row>
+          <!-- 风险提示 -->
+          <div style="display: flex; align-items: center; margin-top: 20px;">
+            <el-icon :size="24" color="#FFD700">
+              <WarnTriangleFilled />
+            </el-icon>
+            <p>重复购买风险提示</p>
+          </div>
+          <!-- 记录 + 虚线分隔 -->
+          <div>
+            <el-divider border-style="dashed" />
+            <p>检测到该用户近期有相似消费记录：</p>
+            · {{ ReadCookiesTime }} 购买 【{{ addConsume.goodsName.value }}】(操作人: {{ adminData.adminName }})
+          </div>
+          <div style="margin-top: 10px">
+            <p>是否继续操作？</p>
+
+          </div>
         </div>
-      </div>
 
-      <!-- 底部按钮（居中） -->
-      <template #footer>
-        <div class="dialog-footer-center">
-          <el-button @click="ConsumeDialogVisibleCancel">取 消</el-button>
-          <el-button type="primary" @click="ConsumeDialogVisibleContinue">确认购买</el-button>
-        </div>
-      </template>
-    </el-dialog>
+        <!-- 底部按钮（居中） -->
+        <template #footer>
+          <div class="dialog-footer-center">
+            <el-button @click="ConsumeDialogVisibleCancel">取 消</el-button>
+            <el-button type="primary" @click="ConsumeDialogVisibleContinue">确认购买</el-button>
+          </div>
+        </template>
+      </el-dialog>
 
-  </div>
+    </div>
   </div>
 </template>
 
 
 <style scoped lang="scss">
-
 p {
   margin: 0px;
 }
@@ -845,15 +839,13 @@ p {
   .left {
     width: 500px;
     float: left;
-    align-items: center;
     display: flex;
-    align-items: center;
   }
 
   .right {
     flex: 1;
+    height: 50vh;
     display: flex;
-    justify-content: center;
     align-items: center;
 
     .customer-info {
diff --git a/src/views/consume/gold/coinConsume.vue b/src/views/consume/gold/coinConsume.vue
index 1186005..1fa3197 100644
--- a/src/views/consume/gold/coinConsume.vue
+++ b/src/views/consume/gold/coinConsume.vue
@@ -83,13 +83,13 @@ onMounted(() => {
 </script>
 <style lang="scss">
 .fatherTop {
-  width: 100%;
-  height: 6%;
+  width: 80vw;
+  height: 4vh;
   float: left;
 }
 
 .fatherBottom {
-  width: 100%;
-  height: 90%;
+  width: 80vw;
+  height: 85vh;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/consume/gold/coinConsumeDetail.vue b/src/views/consume/gold/coinConsumeDetail.vue
index 8c69cc9..c6fbda2 100644
--- a/src/views/consume/gold/coinConsumeDetail.vue
+++ b/src/views/consume/gold/coinConsumeDetail.vue
@@ -562,134 +562,116 @@ const getMarket = async function () {
 </script>
 
 <template>
-      <el-card style="margin-bottom: 10px;height: 15%;">
-        <el-row style="margin-bottom: 10px">
-          <el-col :span="5">
-            <div class="head-card-element">
-              <el-text class="mx-1">精网号：</el-text>
-              <el-input v-model="consumeUser.jwcode" placeholder="请输入精网号" style="width: 150px" clearable />
-            </div>
-          </el-col>
-          <el-col :span="5">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">商品名称：</el-text>
-              <el-select v-model="consumeUser.goodsName" placeholder="请选择商品名称" style="width: 180px" clearable filterable >
-                <!-- 修改 v-for 绑定逻辑 -->
-                <el-option v-for="(item, index) in goods" :key="index" :label="item.label " :value="item" />
-              </el-select>
-            </div>
-          </el-col>
-          <el-col :span="5">
-            <el-text class="mx-1" size="large">所属地区：</el-text>
-            <el-cascader v-model="selectedMarketPath" :options="market" placeholder="请选择所属地区" clearable
-              style="width:180px" @change="handleMarketChange" />
-          </el-col>
-          <el-col :span="5">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">消耗平台：</el-text>
-              <el-select v-model="consumeUser.payPlatform" placeholder="请选择消耗平台" style="width: 180px" clearable>
-                <el-option v-for="item in consumePlatform" :key="item.id" :label="item.label" :value="item.value" />
-              </el-select>
-            </div>
-          </el-col>
-          <el-col :span="3">
-            <div class="head-card-element">
-              <el-checkbox v-model="showEmployeeData" @change="search()">员工数据</el-checkbox>
-            </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <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="width: 400px" @change="handleDatePickerChange" :default-time="defaultTime"
-                :disabled-date="disabledDate" />
-              <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>
-              <el-button type="primary" @click="openExportList">查看导出列表</el-button>
-            </div>
-          </el-col>
-        </el-row>
-      </el-card>
-      <el-card>
-        <div>
-          消耗新币：{{ format3(Math.abs(permanentGolds)) }}新币&nbsp;&nbsp;&nbsp;&nbsp;
-          总金币数：{{ format3(Math.abs(permanentGolds+freeGolds+taskGolds)) }}&nbsp;&nbsp;&nbsp;&nbsp;
-          永久金币：{{ format3(Math.abs(permanentGolds)) }}&nbsp;&nbsp;&nbsp;&nbsp;
-          免费金币：{{ format3(Math.abs(freeGolds)) }}&nbsp;&nbsp;&nbsp;&nbsp;
-          任务金币：{{ format3(Math.abs(taskGolds)) }}
-        </div>
-        <!-- 设置表格容器的高度和滚动样式 -->
-        <div style="height: 540px; overflow-y: auto">
-          <el-table :data="tableData" style="width: 100%;height: 100%" @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 prop="name" label="姓名" width="150px" fixed="left" show-overflow-tooltip />
-            <el-table-column prop="jwcode" label="精网号" width="110px" fixed="left" />
-            <el-table-column prop="market" label="所属地区" width="110px" />
-            <el-table-column prop="orderCode" label="订单号" width="260px" show-overflow-tooltip />
-
-            <el-table-column prop="goodsName" label="商品名称" width="160px" show-overflow-tooltip />
-            <el-table-column prop="payPlatform" label="消耗平台" width="120px">
-              <template #default="scope">
-                {{ scope.row.payPlatform }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="sumGold" label="消耗金币总数" width="120px">
-              <template #default="scope">
-                {{
-                  (scope.row.taskGold +
-                    scope.row.freeGold +
-                    scope.row.permanentGold)
-                }}
-              </template>
-            </el-table-column>
-
-            <el-table-column prop="permanentGold" label="永久金币" sortable="“custom”" width="110px">
-              <template #default="scope">
-                {{ scope.row.permanentGold }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="freeGold" label="免费金币" sortable="“custom”" width="110px">
-              <template #default="scope">
-                {{ scope.row.freeGold }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="taskGold" label="任务金币" sortable="“custom”" width="110px">
-              <template #default="scope">
-                {{ scope.row.taskGold }}
-              </template>
-            </el-table-column>
-
-            <el-table-column prop="remark" label="备注" width="200px" show-overflow-tooltip />
-            <el-table-column prop="adminName" label="提交人" width="110px" />
-            <el-table-column prop="createTime" label="消耗时间" sortable="custom" width="180px" />
-          </el-table>
-        </div>
-
-        <!-- 分页 -->
-        <div class="pagination">
-          <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
-            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
-            @current-change="handleCurrentChange"></el-pagination>
-        </div>
-      </el-card>
+  <el-card style="margin-bottom: 0.5vh;">
+    <div style="width:82vw;margin-bottom: 1vh;">
+      <el-text>精网号：</el-text>
+      <el-input v-model="consumeUser.jwcode" placeholder="请输入精网号" style="width: 10vw;margin-right: 1vw;" clearable />
+
+      <el-text size="large">商品名称：</el-text>
+      <el-select v-model="consumeUser.goodsName" placeholder="请选择商品名称" style="width: 10vw;margin-right: 1vw;" clearable
+        filterable>
+        <el-option v-for="(item, index) in goods" :key="index" :label="item.label" :value="item" />
+      </el-select>
+
+      <el-text size="large">所属地区：</el-text>
+      <el-cascader v-model="selectedMarketPath" :options="market" placeholder="请选择所属地区" clearable
+        style="width: 10vw;margin-right: 1vw;" @change="handleMarketChange" />
+
+      <el-text size="large">消耗平台：</el-text>
+      <el-select v-model="consumeUser.payPlatform" placeholder="请选择消耗平台" style="width: 10vw;margin-right: 1vw;"
+        clearable>
+        <el-option v-for="item in consumePlatform" :key="item.id" :label="item.label" :value="item.value" />
+      </el-select>
+
+      <el-checkbox v-model="showEmployeeData" @change="search()">员工数据</el-checkbox>
+    </div>
+    <div>
+      <el-text size="large">消耗时间：</el-text>
+      <el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间"
+        end-placeholder="结束时间" style="width: 20vw" @change="handleDatePickerChange" :default-time="defaultTime"
+        :disabled-date="disabledDate" />
+      <el-button @click="getToday()" style="margin-left: 1vw" :type="activeTimeRange === 'today' ? 'primary' : ''">
+        今
+      </el-button>
+      <el-button @click="getYesterday()" style="margin-left: 1vw"
+        :type="activeTimeRange === 'yesterday' ? 'primary' : ''"> 昨
+      </el-button>
+      <el-button @click="get7Days()" style="margin-left: 1vw" :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>
+      <el-button type="primary" @click="openExportList">查看导出列表</el-button>
+    </div>
+  </el-card>
+  <el-card>
+    <div>
+      消耗新币：{{ format3(Math.abs(permanentGolds)) }}新币&nbsp;&nbsp;&nbsp;&nbsp;
+      总金币数：{{ format3(Math.abs(permanentGolds + freeGolds + taskGolds)) }}&nbsp;&nbsp;&nbsp;&nbsp;
+      永久金币：{{ format3(Math.abs(permanentGolds)) }}&nbsp;&nbsp;&nbsp;&nbsp;
+      免费金币：{{ format3(Math.abs(freeGolds)) }}&nbsp;&nbsp;&nbsp;&nbsp;
+      任务金币：{{ format3(Math.abs(taskGolds)) }}
+    </div>
+    <div style="height: 55vh;">
+      <el-table :data="tableData" style="height: 95%" @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 prop="name" label="姓名" width="150px" fixed="left" show-overflow-tooltip />
+        <el-table-column prop="jwcode" label="精网号" width="110px" fixed="left" />
+        <el-table-column prop="market" label="所属地区" width="110px" />
+        <el-table-column prop="orderCode" label="订单号" width="260px" show-overflow-tooltip />
+
+        <el-table-column prop="goodsName" label="商品名称" width="160px" show-overflow-tooltip />
+        <el-table-column prop="payPlatform" label="消耗平台" width="120px">
+          <template #default="scope">
+            {{ scope.row.payPlatform }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="sumGold" label="消耗金币总数" width="120px">
+          <template #default="scope">
+            {{
+              (scope.row.taskGold +
+                scope.row.freeGold +
+                scope.row.permanentGold)
+            }}
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="permanentGold" label="永久金币" sortable="“custom”" width="110px">
+          <template #default="scope">
+            {{ scope.row.permanentGold }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="freeGold" label="免费金币" sortable="“custom”" width="110px">
+          <template #default="scope">
+            {{ scope.row.freeGold }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="taskGold" label="任务金币" sortable="“custom”" width="110px">
+          <template #default="scope">
+            {{ scope.row.taskGold }}
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="remark" label="备注" width="200px" show-overflow-tooltip />
+        <el-table-column prop="adminName" label="提交人" width="110px" />
+        <el-table-column prop="createTime" label="消耗时间" sortable="custom" width="180px" />
+      </el-table>
+    </div>
+
+    <!-- 分页 -->
+    <div class="pagination">
+      <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
+        @current-change="handleCurrentChange"></el-pagination>
+    </div>
+  </el-card>
 
   <!-- 导出弹窗 -->
   <el-dialog v-model="exportListVisible" title="导出列表" width="80%">
@@ -743,6 +725,6 @@ const getMarket = async function () {
 
 .pagination {
   display: flex;
-  margin-top: 20px;
+  margin-top: 1vh;
 }
 </style>
diff --git a/src/views/recharge/bean/addBeanRecharge.vue b/src/views/recharge/bean/addBeanRecharge.vue
index 61c0abc..d4023fa 100644
--- a/src/views/recharge/bean/addBeanRecharge.vue
+++ b/src/views/recharge/bean/addBeanRecharge.vue
@@ -187,7 +187,6 @@ const handleAddForm = async () => {
 }
 </script>
 <template>
-  <div>
     <div class="userAndform">
       <div class="left">
         <el-form :model="addForm" :rules="rules" ref="formRef" label-width="auto" style="max-width: 600px"
@@ -207,14 +206,16 @@ const handleAddForm = async () => {
               type="textarea" />
           </el-form-item>
           <el-button @click="deleteAddForm" style="margin-left: 8.5vw;margin-top:1vw" type="success">重置</el-button>
-          <el-button type="primary" :disabled="addDisabled" @click="handleAddForm" style="margin-top:1vw"> 提交 </el-button>
+          <el-button type="primary" :disabled="addDisabled" @click="handleAddForm" style="margin-top:1vw"> 提交
+          </el-button>
         </el-form>
       </div>
+
+      <!-- 客户信息栏 -->
       <div class="right">
-        <!-- 客户信息栏 -->
         <el-card v-if="user.jwcode" class="customer-info">
-          <el-form :model="user" label-width="auto" style="min-width: 600px" label-position="left">
-            <el-text size="large" style="margin-left: 2vw">客户信息</el-text>
+          <el-form :model="user" label-width="auto" label-position="left">
+            <el-text size="large" style="margin-left: 7vw">客户信息</el-text>
             <!-- 第一行：姓名 + 当前付费金豆 -->
             <div style="margin-top: 0.5vw;display:flex;">
               <p style="width:6vw;">姓名:</p>
@@ -245,7 +246,6 @@ const handleAddForm = async () => {
         </el-card>
       </div>
     </div>
-  </div>
 </template>
 <style scoped>
 .userAndform {
@@ -270,7 +270,7 @@ const handleAddForm = async () => {
     float: left;
 
     .customer-info {
-      width: 35vw;
+      width: 30vw;
       height: 28vh;
       margin-top: 5vh;
       display: flex;
diff --git a/src/views/recharge/gold/addCoinRecharge.vue b/src/views/recharge/gold/addCoinRecharge.vue
index f7a00ab..c1632c2 100644
--- a/src/views/recharge/gold/addCoinRecharge.vue
+++ b/src/views/recharge/gold/addCoinRecharge.vue
@@ -793,7 +793,6 @@ onMounted(() => {
 
     </div>
 
-
     <el-dialog v-model="FirstRechargeDialogVisible" title="操作确认"
                :before-close="FirstRechargeDialogVisiblehandleClose"
                :close-on-click-modal="false" width="400px">
@@ -842,7 +841,6 @@ onMounted(() => {
       </template>
     </el-dialog>
 
-
     <el-dialog v-model="RechargeDialogVisible" title="操作确认" :before-close="RechargeDialogVisiblehandleClose"
                :close-on-click-modal="false" width="480px">
       <!-- 内容整体居中且收窄 -->
@@ -901,7 +899,6 @@ onMounted(() => {
       </template>
     </el-dialog>
 
-
   </div>
 </template>
 
diff --git a/src/views/recharge/gold/coinRecharge.vue b/src/views/recharge/gold/coinRecharge.vue
index e5676bb..6bebbb2 100644
--- a/src/views/recharge/gold/coinRecharge.vue
+++ b/src/views/recharge/gold/coinRecharge.vue
@@ -1,39 +1,30 @@
 <template>
-  <div>
-    <!-- 这里放置标签切换的按钮 -->
+  <div style="height:4vh;">
     <el-button-group>
-      <!-- 切换后状态显示 primary 样式否则是默认样式 -->
-      <el-button
-          :type="activeTab === 'addCoinRecharge' ? 'primary' : 'default'"
-          @click="navigateTo('addCoinRecharge')"
-          :disabled="!hasAdd"
-      >
+      <el-button :type="activeTab === 'addCoinRecharge' ? 'primary' : 'default'" @click="navigateTo('addCoinRecharge')"
+        :disabled="!hasAdd">
         新增充值
       </el-button>
-      <el-button
-          :type="activeTab === 'coinRechargeDetail' ? 'primary' : 'default'"
-          @click="navigateTo('coinRechargeDetail')"
-          :disabled="!hasDetail"
-      >
+      <el-button :type="activeTab === 'coinRechargeDetail' ? 'primary' : 'default'"
+        @click="navigateTo('coinRechargeDetail')" :disabled="!hasDetail">
         金币充值明细
       </el-button>
     </el-button-group>
-    <!-- 渲染子路由组件 -->
-    <router-view></router-view>
   </div>
+    <router-view></router-view>
 </template>
 
 <script setup>
-import {onMounted, ref, watch} from 'vue';
-import {useRoute, useRouter} from 'vue-router';
-import {storeToRefs} from "pinia";
-import {useAdminStore} from "@/store/index.js";
-import {hasMenuPermission, permissionMapping} from "@/utils/menuTreePermission.js";
+import { onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { storeToRefs } from "pinia";
+import { useAdminStore } from "@/store/index.js";
+import { hasMenuPermission, permissionMapping } from "@/utils/menuTreePermission.js";
 
 const router = useRouter();
 const route = useRoute();
 const adminStore = useAdminStore();
-const {menuTree} = storeToRefs(adminStore);
+const { menuTree } = storeToRefs(adminStore);
 
 const activeTab = ref('');
 const hasAdd = ref(false);
@@ -41,7 +32,7 @@ const hasDetail = ref(false);
 // 导航方法
 const navigateTo = (name) => {
   activeTab.value = name;
-  router.push({name});
+  router.push({ name });
 };
 
 
diff --git a/src/views/recharge/gold/coinRechargeDetail.vue b/src/views/recharge/gold/coinRechargeDetail.vue
index 4244bd3..416b5a4 100644
--- a/src/views/recharge/gold/coinRechargeDetail.vue
+++ b/src/views/recharge/gold/coinRechargeDetail.vue
@@ -340,7 +340,7 @@ const get = async function (val) {
       }
     })
     // 复制一份 rechargeUser.value 并移除排序字段和排序方式
-    const detailWithoutSort = ref({ 
+    const detailWithoutSort = ref({
       ...rechargeUser.value,
       sortField: undefined,
       sortOrder: undefined,
@@ -370,9 +370,9 @@ const get = async function (val) {
     tableData.value = tableData.value.map(item => ({
       ...item,
       // 处理永久金币
-      permanentGold: (Number(item.permanentGold) || 0) ,
+      permanentGold: (Number(item.permanentGold) || 0),
       // 处理免费金币
-      freeGold: (Number(item.freeGold) || 0) ,
+      freeGold: (Number(item.freeGold) || 0),
       // 处理充值金额
       money: (Number(item.money) || 0)
     }))
@@ -488,9 +488,9 @@ const handleSortChange = (column) => {
 
 const exportExcel = async function () {
   const params = {
-    rechargeUser: { 
+    rechargeUser: {
       ...rechargeUser.value,
-      flag: showEmployeeData.value ? 0 : 1 
+      flag: showEmployeeData.value ? 0 : 1
     },
     page: getObj.value.pageNum,
     size: total.value
@@ -586,119 +586,93 @@ const getTagText = (state) => {
 </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="rechargeUser.jwcode" placeholder="请输入精网号" style="width: 150px" clearable />
-            </div>
-          </el-col>
-          <el-col :span="5">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">活动名称：</el-text>
-              <el-select v-model="rechargeUser.activity" placeholder="请选择活动名称" style="width: 180px" clearable>
-                <el-option v-for="item in activity" :key="item.value" :label="item.label" :value="item.value" />
-              </el-select>
-            </div>
-          </el-col>
-          <el-col :span="5">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">所属地区：</el-text>
-              <el-cascader v-model="selectedMarketPath" :options="market" placeholder="请选择所属地区" clearable
-                style="width:180px" @change="handleMarketChange" />
-            </div>
-          </el-col>
-          <el-col :span="5">
-            <div class="head-card-element">
-              <el-text class="mx-1" size="large">充值平台：</el-text>
-              <el-select v-model="rechargeUser.payPlatform" placeholder="请选择充值平台" style="width: 180px" clearable>
-                <el-option v-for="item in platform" :key="item.value" :label="item.label" :value="item.value" />
-              </el-select>
-            </div>
-          </el-col>
-          <el-col :span="3">
-            <div class="head-card-element">
-              <el-checkbox v-model="showEmployeeData" @change="search()">员工数据</el-checkbox>
-            </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <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="width: 400px" @change="handleDatePickerChange"
-                :default-time="defaultTime" :disabled-date="disabledDate"/>
-              <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>
-              <el-button type="primary" @click="openExportList">查看导出列表</el-button>
-            </div>
-          </el-col>
-        </el-row>
-      </el-card>
-    </el-col>
-  </el-row>
-  <el-row>
-    <el-col>
-      <el-card>
-        <div>
-          充值新币：{{ format3(permanentGolds) }}新币&nbsp;&nbsp;&nbsp;&nbsp;
-          总金币数：{{ format3(permanentGolds+freeGolds) }}金币&nbsp;&nbsp;&nbsp;&nbsp;
-          永久金币：{{ format3(permanentGolds) }}金币&nbsp;&nbsp;&nbsp;&nbsp;
-          免费金币：{{ format3(freeGolds ) }}金币
-        </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="name" label="姓名" width="150px" />
-            <el-table-column fixed="left" prop="jwcode" label="精网号" width="110px" />
-            <el-table-column prop="market" label="所属地区" width="100px" />
-            <el-table-column prop="activity" label="活动名称" width="110px" show-overflow-tooltip />
-            <el-table-column prop="rateName" label="货币名称" width="110px" />
-            <el-table-column prop="money" sortable="custom" label="充值金额" width="110px" />
-            <el-table-column prop="permanentGold" label="永久金币" sortable="custom" width="110px" />
-            <el-table-column prop="freeGold" label="免费金币" sortable="custom" width="110px" />
-            <el-table-column prop="payPlatform" label="充值平台" width="110px" />
-            <el-table-column prop="payModel" label="支付方式" width="100px" />
-            <el-table-column prop="remark" label="备注" width="150px" show-overflow-tooltip />
-            <el-table-column prop="adminName" label="提交人" width="100px" />
-            <el-table-column prop="auditTime" sortable label="充值时间" width="200px">
-              <template #default="scope">
-                {{ moment(scope.row.auditTime).format('YYYY-MM-DD HH:mm:ss') }}
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-
-        <!-- 分页 -->
-        <div class="pagination" style="margin-top: 20px">
-          <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
-            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
-            @current-change="handleCurrentChange"></el-pagination>
-        </div>
-      </el-card>
-    </el-col>
-  </el-row>
+  <el-card style="margin-bottom: 0.5vh">
+    <div style="margin-bottom: 0.5vh;">
+      <el-text size="large">精网号：</el-text>
+      <el-input v-model="rechargeUser.jwcode" placeholder="请输入精网号" style="width: 10vw;margin-right: 1vw;" clearable />
+
+      <el-text size="large">活动名称：</el-text>
+      <el-select v-model="rechargeUser.activity" placeholder="请选择活动名称" style="width: 10vw;margin-right: 1vw;" clearable>
+        <el-option v-for="item in activity" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+
+      <el-text size="large">所属地区：</el-text>
+      <el-cascader v-model="selectedMarketPath" :options="market" placeholder="请选择所属地区" clearable style="width: 10vw;margin-right: 1vw;"
+        @change="handleMarketChange" />
+
+      <el-text size="large">充值平台：</el-text>
+      <el-select v-model="rechargeUser.payPlatform" placeholder="请选择充值平台" style="width: 10vw;margin-right: 1vw;" clearable>
+        <el-option v-for="item in platform" :key="item.value" :label="item.label" :value="item.value" />
+      </el-select>
+
+      <el-checkbox v-model="showEmployeeData" @change="search()">员工数据</el-checkbox>
+    </div>
+    <div>
+      <el-text size="large">充值时间：</el-text>
+      <el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间"
+        end-placeholder="结束时间" style="width: 20vw" @change="handleDatePickerChange" :default-time="defaultTime"
+        :disabled-date="disabledDate" />
+      <el-button @click="getToday()" style="margin-left: 1vw" :type="activeTimeRange === 'today' ? 'primary' : ''">
+        今
+      </el-button>
+      <el-button @click="getYesterday()" style="margin-left: 1vw"
+        :type="activeTimeRange === 'yesterday' ? 'primary' : ''"> 昨
+      </el-button>
+      <el-button @click="get7Days()" style="margin-left: 1vw" :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>
+      <el-button type="primary" @click="openExportList">查看导出列表</el-button>
+    </div>
+  </el-card>
+
+  <el-card>
+    <div>
+      充值新币：{{ format3(permanentGolds) }}新币&nbsp;&nbsp;&nbsp;&nbsp;
+      总金币数：{{ format3(permanentGolds + freeGolds) }}金币&nbsp;&nbsp;&nbsp;&nbsp;
+      永久金币：{{ format3(permanentGolds) }}金币&nbsp;&nbsp;&nbsp;&nbsp;
+      免费金币：{{ format3(freeGolds) }}金币
+    </div>
+    <!-- 设置表格容器的高度和滚动样式 -->
+    <div style="height: 60vh;">
+      <el-table :data="tableData" height="60vh" @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="name" label="姓名" width="150px" />
+        <el-table-column fixed="left" prop="jwcode" label="精网号" width="110px" />
+        <el-table-column prop="market" label="所属地区" width="100px" />
+        <el-table-column prop="activity" label="活动名称" width="110px" show-overflow-tooltip />
+        <el-table-column prop="rateName" label="货币名称" width="110px" />
+        <el-table-column prop="money" sortable="custom" label="充值金额" width="110px" />
+        <el-table-column prop="permanentGold" label="永久金币" sortable="custom" width="110px" />
+        <el-table-column prop="freeGold" label="免费金币" sortable="custom" width="110px" />
+        <el-table-column prop="payPlatform" label="充值平台" width="110px" />
+        <el-table-column prop="payModel" label="支付方式" width="100px" />
+        <el-table-column prop="remark" label="备注" width="150px" show-overflow-tooltip />
+        <el-table-column prop="adminName" label="提交人" width="100px" />
+        <el-table-column prop="auditTime" sortable label="充值时间" width="200px">
+          <template #default="scope">
+            {{ moment(scope.row.auditTime).format('YYYY-MM-DD HH:mm:ss') }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 分页 -->
+    <div style="margin-top: 1vh">
+      <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-dialog v-model="exportListVisible" title="导出列表" width="80%">
     <el-table :data="exportList" style="width: 100% ;height: 60vh;" :loading="exportListLoading">
@@ -732,23 +706,4 @@ const getTagText = (state) => {
   </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>
\ No newline at end of file