From 49f6ac08d376c172649efb4bc4607c8a502f50e7 Mon Sep 17 00:00:00 2001
From: lihui <lihui030304@163.com>
Date: Mon, 23 Jun 2025 14:52:57 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=B1=87=E7=8E=87=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/managerecharge/rate.vue | 565 +++++++++++---------------------------
 1 file changed, 164 insertions(+), 401 deletions(-)

diff --git a/src/views/managerecharge/rate.vue b/src/views/managerecharge/rate.vue
index 503fd6e..1d6c538 100644
--- a/src/views/managerecharge/rate.vue
+++ b/src/views/managerecharge/rate.vue
@@ -1,8 +1,6 @@
 <script setup>
-import { ref, onMounted, computed, reactive } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import axios from 'axios'
-import { createApp } from 'vue'
+import {onMounted, reactive, ref} from 'vue'
+import {ElMessage, ElMessageBox} from 'element-plus'
 import moment from 'moment'
 
 import _ from 'lodash'
@@ -22,7 +20,6 @@ const getAdminData = async function () {
     rateAdd.value.adminId = adminData.value.adminId
     rateEdit.value.adminId = adminData.value.adminId
     console.log('请求成功', result)
-    // console.log('用户信息', user.value)
   } catch (error) {
     console.log('请求失败', error)
   }
@@ -31,6 +28,8 @@ getAdminData()
 
 const regeAdd = ref(false)
 const regeEdit = ref(false)
+// 表单引用
+const editFormRef = ref(null)
 //汇率表格数据
 const tableData = ref([])
 //搜索对象
@@ -51,33 +50,8 @@ const formatDateTime = (date) => {
   return moment(date).format('YYYY-MM-DD HH:mm:ss')
 }
 
-// 今天
-const getToday = () => {
-  const today = new Date()
-  const start = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0)
-  const end = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 0, 0, 0)
-  timeRange.value = [formatDateTime(start), formatDateTime(end)]
-  search()
-}
-
-// 昨天
-const getYesterday = () => {
-  const yesterday = new Date()
-  yesterday.setDate(yesterday.getDate() - 1)
-  const start = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate(), 0, 0, 0)
-  const end = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate() + 1, 0, 0, 0)
-  timeRange.value = [formatDateTime(start), formatDateTime(end)]
-  search()
-}
-
-// 近 7 天
-const get7Days = () => {
-  const today = new Date()
-  const start = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6, 0, 0, 0)
-  const end = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1, 0, 0, 0)
-  timeRange.value = [formatDateTime(start), formatDateTime(end)]
-  search()
-}
+// const startTime = ref('2023-01-01 00:00:00')
+// const endTime = ref('2025-12-31 23:59:59')
 
 const get = async function (val) {
   try {
@@ -91,14 +65,14 @@ const get = async function (val) {
     if (timeRange.value.length === 2) {
       time.startTime = moment(timeRange.value[0]).format('YYYY-MM-DD HH:mm:ss')
       time.endTime = moment(timeRange.value[1]).format('YYYY-MM-DD HH:mm:ss')
-    } else {
-      time.startTime = ''
-      time.endTime = ''
+    } else { // 这是对时间的模拟，根据需求不需要传时间
+      time.startTime = '2023-01-01 00:00:00'
+      time.endTime = '2025-12-31 23:59:59'
     }
 
     console.log('搜索参数', {
       ...getObj.value,
-      rate: { ...time }
+      rate: {...time}
     });
     // 发送POST请求
     const result = await request({
@@ -106,7 +80,7 @@ const get = async function (val) {
       method: 'POST',
       data: {
         ...getObj.value,
-        rate: { ...time }
+        rate: {...time}
       }
     });
 
@@ -114,10 +88,8 @@ const get = async function (val) {
     console.log('请求成功', result);
     // 存储表格数据
     tableData.value = result.data.list;
-    console.log('tableData', tableData.value);
     // 存储分页总条目
     total.value = result.data.total;
-    console.log('total', total.value);
   } catch (error) {
     console.log('请求失败', error);
     ElMessage.error('请求失败');
@@ -137,14 +109,14 @@ const addRate = async function () {
     const date = new Date(rateAdd.value.startTime)
     date.setHours(0, 0, 0, 0)
     rateAdd.value.startTime = `${date.getFullYear()}-${String(
-      date.getMonth() + 1
+        date.getMonth() + 1
     ).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} 00:00:00`
   }
   if (rateAdd.value.endTime) {
     const date = new Date(rateAdd.value.endTime)
     date.setHours(23, 59, 59, 999)
     rateAdd.value.endTime = `${date.getFullYear()}-${String(
-      date.getMonth() + 1
+        date.getMonth() + 1
     ).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} 23:59:59`
   }
   try {
@@ -156,7 +128,7 @@ const addRate = async function () {
     })
     if (result.code == 0) {
       ElMessage.error(result.msg)
-    }else{
+    } else {
       ElMessage({
         type: 'success',
         message: '新增汇率成功'
@@ -167,7 +139,6 @@ const addRate = async function () {
     get()
   } catch (error) {
     console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
 
@@ -175,18 +146,18 @@ const add = () => {
   Ref.value.validate(async (valid) => {
     if (valid) {
       ElMessageBox.confirm('确认添加？')
-        .then(() => {
-          addRate()
-          rateAdd.value = {}
-          timeRange.value = {
-            startTime: '',
-            endTime: ''
-          }
-          regeAdd.value = false
-        })
-        .catch(() => {
-          regeAdd.value = false
-        })
+          .then(() => {
+            addRate()
+            rateAdd.value = {}
+            timeRange.value = {
+              startTime: '',
+              endTime: ''
+            }
+            regeAdd.value = false
+          })
+          .catch(() => {
+            regeAdd.value = false
+          })
     } else {
       //提示
       ElMessage({
@@ -205,11 +176,16 @@ const handleCurrentChange = function (val) {
   get()
 }
 // 使用 _.throttle 并设置 trailing 为 false 实现严格节流，只执行一次
-const throttledAdd = _.throttle(add, 5000, { trailing: false })
+const throttledAdd = _.throttle(add, 5000, {trailing: false})
 // 编辑方法
 const rateEdit = ref({})
 //查询已有的数据
 const getEditData = async function (row) {
+  // 重置表单
+  if (editFormRef.value) {
+    editFormRef.value.resetFields()
+  }
+
   try {
     console.log('搜索参数', getObj.value)
     // 发送POST请求
@@ -224,10 +200,8 @@ const getEditData = async function (row) {
 
     rateEdit.value = result.data
     rateEdit.value.adminId = adminData.value.adminId
-    console.log('这是编辑的数值', rateEdit.value)
   } catch (error) {
     console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
 const editRate = async function () {
@@ -235,14 +209,14 @@ const editRate = async function () {
     const date = new Date(rateEdit.value.startTime)
     date.setHours(0, 0, 0, 0)
     rateEdit.value.startTime = `${date.getFullYear()}-${String(
-      date.getMonth() + 1
+        date.getMonth() + 1
     ).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} 00:00:00`
   }
   if (rateEdit.value.endTime) {
     const date = new Date(rateEdit.value.endTime)
     date.setHours(23, 59, 59, 999)
     rateEdit.value.endTime = `${date.getFullYear()}-${String(
-      date.getMonth() + 1
+        date.getMonth() + 1
     ).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} 23:59:59`
   }
   try {
@@ -257,34 +231,30 @@ const editRate = async function () {
     get()
   } catch (error) {
     console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
   }
 }
 const edit = () => {
   ElMessageBox.confirm('确认修改？')
-    .then(() => {
-      editRate()
-      regeEdit.value = false
-    })
-    .catch(() => {
-      regeEdit.value = false
-    })
+      .then(() => {
+        editRate()
+        regeEdit.value = false
+      })
+      .catch(() => {
+        regeEdit.value = false
+      })
 }
 
-// 删除方法
-const deleteRate = async function (row) {
-  try {
-    // 发送POST请求
-    const result = await request({
-      url: '/rates/delete/ ' + row.rateId,
-      data: {}
-    })
-    // 将响应结果存储到响应式数据中
-    console.log('请求成功', result)
-    get()
-  } catch (error) {
-    console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
+// 关闭编辑弹窗时重置表单
+const cancelEdit = () => {
+  regeEdit.value = false
+  if (editFormRef.value) {
+    editFormRef.value.resetFields()
+  }
+}
+
+const handleEditDialogClose = () => {
+  if (editFormRef.value) {
+    editFormRef.value.resetFields()
   }
 }
 
@@ -292,10 +262,12 @@ const deleteRate = async function (row) {
 onMounted(async function () {
   get()
 })
+
 //分页
 function handlePageChange(currentPage, pageSize) {
   get()
 }
+
 //货币条目
 const options = [
   {
@@ -347,6 +319,7 @@ function formatDate(value) {
   const seconds = date.getSeconds().toString().padStart(2, '0')
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
 }
+
 function formatDateTwe(value) {
   if (!value) return ''
   const date = new Date(value)
@@ -356,11 +329,6 @@ function formatDateTwe(value) {
   return `${year}-${month}-${day}`
 }
 
-// //表格高度
-// const tableHeight = computed(function () {
-//   return (getObj.value.pageSize + 1) * 50 + "px";
-// });
-
 // 新增数据规则
 // 表单验证ref
 const Ref = ref(null)
@@ -393,172 +361,94 @@ const checkFreeGoldRadio = function (rule, value, callback) {
   }
 }
 const rules = reactive({
-  currency: [{ required: true, message: '请选择货币名称', trigger: 'blur' }],
-  exchangeRate: [{ validator: checkFreeGoldRadio, trigger: 'blur' }],
-  startTime: [
-    { required: true, message: '请选择开始时间', trigger: 'blur' },
-    { validator: checkStartTime, trigger: 'blur' }
-  ],
-  endTime: [
-    { required: true, message: '请选择结束时间', trigger: 'blur' },
-    { validator: checkEndTime, trigger: 'blur' }
-  ]
+  currency: [{required: true, message: '请选择货币名称', trigger: 'blur'}],
+  exchangeRate: [{validator: checkFreeGoldRadio, trigger: 'blur'}],
+  // startTime: [
+  //   {required: true, message: '请选择开始时间', trigger: 'blur'},
+  //   {validator: checkStartTime, trigger: 'blur'}
+  // ],
+  // endTime: [
+  //   {required: true, message: '请选择结束时间', trigger: 'blur'},
+  //   {validator: checkEndTime, trigger: 'blur'}
+  // ]
 })
 
-// 重置的按钮
-const handledelete = function () {
-  timeRange.value={}
-  getObj.value.pageNum = 1
-}
-// 验证跳转输入框的数字是否合法
-const checkNumber = function () {
-  if (typeof parseInt(getObj.value.pageNum) === 'number') {
-    console.log('总共有多少页' + Math.ceil(total.value / getObj.value.pageSize))
-    if (
-      getObj.value.pageNum > 0 &&
-      getObj.value.pageNum <= Math.ceil(total.value / getObj.value.pageSize)
-    ) {
-      getObj.value.pageNum = parseInt(getObj.value.pageNum)
-      console.log('输入的数字合法')
-      get()
-    } else {
-      //提示
-      ElMessage({
-        type: 'error',
-        message: '请检查输入内容'
-      })
-    }
-  } else {
-    //提示
-    ElMessage({
-      type: 'error',
-      message: '请检查输入内容'
-    })
+// 这是限制输入小数不超过七位并验证格式的方法
+function handleInput(value) {
+  // 检测是否包含非法符号
+  const invalidChars = /[^0-9.]/.test(value);
+  if (invalidChars) {
+    ElMessage.warning('只能输入数字和小数点');
   }
-}
 
-// 删除=========================================================
-// 删除按钮
+  // 过滤非法字符，只保留数字、小数点
+  let validValue = value.replace(/[^\d.]/g, '');
 
-// 删除按钮的气泡弹出框确认按钮
-const delConfirm = async function (row) {
-  try {
-    // 发送POST请求
-    const result = await request({
-      url: '/rates/delete/ ' + row.rateId,
-      data: {}
-    })
-    if (result.code == 200) {
-      ElMessage({
-        type: 'success',
-        message: '删除成功'
-      })
-      // 将响应结果存储到响应式数据中
-      console.log('请求成功', result)
-      // 刷新表格数据
-      get()
-    } else {
-      ElMessage({
-        type: 'error',
-        message: '删除失败'
-      })
-    }
-  } catch (error) {
-    console.log('请求失败', error)
-    // 在这里可以处理错误逻辑，比如显示错误提示等
+  // 确保只有一个小数点
+  validValue = validValue.replace(/\.{2,}/g, '.');
+
+  // 限制只能有一个小数点
+  if (validValue.split('.').length > 2) {
+    validValue = validValue.replace(/\.$/, '');
+    ElMessage.warning('注意！只能使用一个小数点');
   }
-}
 
-//这是限制输入小数不超过七位的限制方法
-function handleInput(value) {
-  // 限制小数点后7位，这里使用正则表达式来实现
-  rateAdd.value.exchangeRate = value
-    .replace(/(\.\d{7})\d+/, '$1')
-    .replace(/^(\d+)(\.\d{0,7})?$/, '$1$2')
+  // 限制小数点后7位
+  const originalDecimalPart = validValue.split('.')[1] || '';
+  validValue = validValue.replace(/(\.\d{7})\d+/, '$1');
+
+  // 如果截断了小数部分，提示用户
+  const newDecimalPart = validValue.split('.')[1] || '';
+  if (originalDecimalPart.length > 7 && originalDecimalPart !== newDecimalPart) {
+    ElMessage.warning('最多只能输入7位小数');
+  }
+
+  // 根据需求这里先不用，这里是用防御性编程，直接不允许输入，先留一下，之后可能用
+  // 应用最终处理后的值
+  // rateAdd.value.exchangeRate = validValue;
+  // rateEdit.value.exchangeRate = validValue;
+
+  // 验证最终格式
+  if (validValue && !/^\d+(\.\d{0,7})?$/.test(validValue)) {
+    ElMessage.warning('请输入正确的数字格式');
+  }
 }
+
+// 表单大小
+const formSize = ref('default')
 </script>
 
+
 <template>
   <!-- 这是主页面 -->
   <el-row>
     <el-col>
-      <el-card>
-        <!-- 这是时间 -->
-        <div class="demo-range">
-          <el-row>
-            <el-col :span="9">
-              <el-form-item>
-                <el-text class="mx-1" size="large">时间范围：</el-text>
-                <el-date-picker
-                  v-model="timeRange"
-                  type="datetimerange"
-                  range-separator="至"
-                  start-placeholder="开始日期"
-                  end-placeholder="结束日期"
-                  style="width: 300px"
-                  format="YYYY-MM-DD HH:mm:ss"
-                  value-format="YYYY-MM-DD HH:mm:ss"
-                />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4">
-              <el-button @click="getToday">今</el-button>
-              <el-button @click="getYesterday">昨</el-button>
-              <el-button @click="get7Days">近7天</el-button>
-            </el-col>
-            <el-col :span="4">
-              <el-button
-                class="button-item"
-                type="success"
-                @click="handledelete()"
-              >重置</el-button>
-              <el-button
-                type="primary"
-                @click="search"
-              >查询</el-button>
-            </el-col>
-          </el-row>
-        </div>
-      </el-card>
-    </el-col>
-  </el-row>
-
-  <el-row>
-    <el-col>
       <el-card class="box-card" style="max-width: 100%">
         <!-- 添加 -->
-        <div class="add-item">
-          <el-button
-            style="color: #048efb; border: 1px solid #048efb"
-            @click="regeAdd = true"
-            >新增汇率</el-button
-          >
-        </div>
         <!-- 表格 -->
         <div>
+          <!--          这里有个小bug，应该是>0-->
           <el-table
-            :data="tableData"
-            v-if="(tableData.flag = 1)"
-            :height="tableHeight"
-            style="width: 100%"
+              :data="tableData"
+              v-if="(tableData.flag = 1)"
           >
             <el-table-column
-              type="index"
-              label="序号"
-              width="100px"
-              fixed="left"
+                type="index"
+                label="序号"
+                width="100px"
+                fixed="left"
             >
               <template #default="scope">
                 <span>{{
-                  scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
-                }}</span>
+                    scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
+                  }}</span>
               </template>
             </el-table-column>
-            <el-table-column prop="currency" label="货币名称" :span="2" />
+            <el-table-column prop="currency" label="货币名称" :span="2"/>
             <el-table-column prop="exchangeRate" label="汇率" :span="2">
               <template #default="scope">
                 <p>
-                  {{ scope.row.exchangeRate }}{{ scope.row.currency }} ：1新币
+                  {{ scope.row.exchangeRate }} ：1
                 </p>
               </template>
             </el-table-column>
@@ -568,66 +458,19 @@ function handleInput(value) {
                 <span>{{ formatDate(scope.row.createTime) }}</span>
               </template>
             </el-table-column>
-            <el-table-column prop="adminName" label="提交人" :span="1" />
-            <el-table-column prop="status" label="状态">
-              <template #default="scope">
-                <span v-if="scope.row.status === 1">
-                  <div class="status">
-                    <span class="green-dot"></span>
-                    <span>使用中</span>
-                  </div>
-                </span>
-                <span v-if="scope.row.status === 0">
-                  <div class="status">
-                    <span class="red-dot"></span>
-                    <span>未开始</span>
-                  </div>
-                </span>
-                <span v-if="scope.row.status === 2">
-                  <div class="status">
-                    <span class="grey-dot"></span>
-                    <span>已过期</span>
-                  </div>
-                </span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="startTime" label="持续时间" :span="10">
-              <template #default="scope">
-                <span>{{ formatDateTwe(scope.row.startTime) }}</span>
-                <span>---</span>
-                <span>{{ formatDateTwe(scope.row.endTime) }}</span>
-              </template>
-            </el-table-column>
             <el-table-column label="操作" :span="3">
               <template #default="scope">
                 <el-button
-                  type="text"
-                  @click="
+                    type="text"
+                    @click="
                     () => {
                       regeEdit = true
                       getEditData(scope.row)
                     }
                   "
-                  >编辑</el-button
+                >编辑
+                </el-button
                 >
-                <el-popconfirm
-                  title="确定将此条活动删除吗？"
-                  @confirm="delConfirm"
-                >
-                  <template #reference>
-                    <el-button type="primary" text> 删除 </el-button>
-                  </template>
-                  <template #actions="{ confirm, cancel }">
-                    <el-button size="small" @click="cancel">取消</el-button>
-                    <el-button
-                      type="primary"
-                      size="small"
-                      @click="confirm(scope.row)"
-                    >
-                      确定
-                    </el-button>
-                  </template>
-                </el-popconfirm>
               </template>
             </el-table-column>
           </el-table>
@@ -635,160 +478,73 @@ function handleInput(value) {
         <!-- 分页 -->
         <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"
+              background
+              :page-size="getObj.pageSize"
+              :page-sizes="[5, 10, 20, 50, 100]"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="total"
+              @size-change="handlePageSizeChange"
+              @current-change="handleCurrentChange"
           ></el-pagination>
         </div>
       </el-card>
     </el-col>
   </el-row>
 
-  <!-- 这是添加弹窗 -->
+  <!-- 这是编辑弹窗 -->
   <el-dialog
-    v-model="regeAdd"
-    title="新增汇率"
-    width="500"
-    :close-on-click-modal="false"
+      v-model="regeEdit"
+      title="修改汇率"
+      width="500"
+      :close-on-click-modal="false"
+      @close="handleEditDialogClose"
   >
     <template #footer>
       <el-form
-        ref="Ref"
-        style="max-width: 600px"
-        :model="rateAdd"
-        :rules="rules"
-        label-width="auto"
-        class="demo-ruleForm"
-        :size="formSize"
-        status-icon
+          ref="editFormRef"
+          style="max-width: 600px"
+          :model="rateEdit"
+          :rules="rules"
+          label-width="auto"
+          class="demo-ruleForm"
+          :size="formSize"
+          status-icon
       >
         <el-form-item prop="currency" label="货币名称:">
           <el-select
-            v-model.number="rateAdd.currency"
-            placeholder="请选择"
-            style="width: 240px"
+              v-model="rateEdit.currency"
+              placeholder="请选择"
+              style="width: 240px"
           >
             <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
             />
           </el-select>
         </el-form-item>
         <el-form-item prop="exchangeRate" label="汇率:">
           <el-input
-            v-model="rateAdd.exchangeRate"
-            @update:modelValue="handleInput"
-            style="width: 120px"
+              v-model="rateEdit.exchangeRate"
+              @update:modelValue="handleInput"
+              style="width: 120px"
           />
           <p class="unit">:1</p>
-          <p>
-            (提示：当前规则每 {{ rateAdd.exchangeRate }}
-            {{ rateAdd.currency }}可兑换 1 新币)
-          </p>
-        </el-form-item>
-        <el-form-item prop="adminId" label="提交人:">
-          <el-input :value="adminData.name" disabled style="width: 240px" />
-        </el-form-item>
-        <el-form-item prop="startTime" label="开始时间:">
-          <el-date-picker
-            v-model="rateAdd.startTime"
-            type="date"
-            placeholder="请选择时间"
-            :default-value="new Date()"
-            @change="handleStartTimeChange"
-            value-format="YYYY-MM-DD"
-          />
-        </el-form-item>
-        <el-form-item prop="endTime" label="结束时间:">
-          <el-date-picker
-            v-model="rateAdd.endTime"
-            type="date"
-            placeholder="请选择时间"
-            :default-value="new Date()"
-            value-format="YYYY-MM-DD"
-          />
-        </el-form-item>
-        <el-form-item>
-          <div class="dialog-footer">
-            <el-button type="primary" @click="throttledAdd">添加</el-button>
-            <el-button @click="regeAdd = false">取消</el-button>
-          </div>
-        </el-form-item>
-      </el-form>
-    </template>
-  </el-dialog>
-
-  <!-- 这是编辑弹窗 -->
-  <el-dialog
-    v-model="regeEdit"
-    title="修改汇率"
-    width="500"
-    :close-on-click-modal="false"
-  >
-    <template #footer>
-      <el-form
-        ref="ruleFormRef"
-        style="max-width: 600px"
-        :model="rateEdit"
-        :rules="rules"
-        label-width="auto"
-        class="demo-ruleForm"
-        :size="formSize"
-        status-icon
-      >
-        <el-form-item label="货币名称:">
-          <el-select
-            v-model="rateEdit.currency"
-            placeholder="请选择"
-            style="width: 240px"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="汇率:">
-          <el-input v-model="rateEdit.exchangeRate" style="width: 120px" />
-          <p class="unit">:1</p>
-          <p>
-            (提示：当前规则每 {{ rateEdit.exchangeRate }}
-            {{ rateEdit.currency }}可兑换 1 新币)
+          <p class="rate-tip">
+            (提示：当前规则每
+            <span>{{ rateEdit.exchangeRate }}</span>
+            <span>{{ rateEdit.currency }}</span>
+            可兑换 1 新币)
           </p>
         </el-form-item>
         <el-form-item label="提交人:">
-          <el-input disabled :value="adminData.name" style="width: 240px" />
-        </el-form-item>
-        <el-form-item label="开始时间:">
-          <el-date-picker
-            v-model="rateEdit.startTime"
-            type="date"
-            placeholder="请选择时间"
-            :default-value="new Date()"
-            value-format="YYYY-MM-DD"
-          />
-        </el-form-item>
-        <el-form-item label="结束时间:">
-          <el-date-picker
-            v-model="rateEdit.endTime"
-            type="date"
-            placeholder="请选择时间"
-            :default-value="new Date()"
-            value-format="YYYY-MM-DD"
-          />
+          <el-input disabled :value="adminData.name" style="width: 240px"/>
         </el-form-item>
         <el-form-item>
           <div class="dialog-footer">
             <el-button type="primary" @click="edit">修改</el-button>
-            <el-button @click="regeEdit = false">取消</el-button>
+            <el-button @click="cancelEdit">取消</el-button>
           </div>
         </el-form-item>
       </el-form>
@@ -796,6 +552,7 @@ function handleInput(value) {
   </el-dialog>
 </template>
 
+
 <style scoped>
 p {
   margin: 0px;
@@ -840,10 +597,16 @@ p {
 .el-card {
   padding: 0px;
 }
+
 .pagination {
   display: flex;
 }
+
 .status {
   display: flex;
 }
-</style>
+
+.rate-tip {
+  hyphens: auto;
+}
+</style>
\ No newline at end of file

From 03be57ca36b0424275a66ab74559b5e28b1199f6 Mon Sep 17 00:00:00 2001
From: lihui <lihui030304@163.com>
Date: Thu, 26 Jun 2025 18:01:09 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=BF=A1=E6=81=AF?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=EF=BC=8C=E6=96=B0=E5=A2=9E=E6=AD=A3=E5=9C=A8?=
 =?UTF-8?q?=E5=81=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/consume/addCoinConsume.vue    | 822 ++++++++++++++++++++------------
 src/views/consume/coinConsume.vue       |   8 +-
 src/views/consume/coinConsumeDetail.vue |   5 +-
 3 files changed, 526 insertions(+), 309 deletions(-)

diff --git a/src/views/consume/addCoinConsume.vue b/src/views/consume/addCoinConsume.vue
index 86f6a89..d1c3cdc 100644
--- a/src/views/consume/addCoinConsume.vue
+++ b/src/views/consume/addCoinConsume.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { reactive, onMounted } from "vue";
-import { ref, computed, watch } from "vue";
-import { ElMessage } from "element-plus";
-import { Plus } from "@element-plus/icons-vue";
+import {reactive, onMounted} from "vue";
+import {ref, computed, watch} from "vue";
+import {ElMessage} from "element-plus";
+import {Plus} from "@element-plus/icons-vue";
 import axios from "axios";
-import { ElMessageBox } from "element-plus";
+import {ElMessageBox} from "element-plus";
 
 import moment from "moment";
 import _ from "lodash";
@@ -12,10 +12,11 @@ import request from "@/util/http";
 // 精网号去空格
 const trimJwCode = () => {
   if (addConsume.value.jwcode) {
-    addConsume.value.jwcode = addConsume.value.jwcode.replace(/\s/g, ''); 
+    addConsume.value.jwcode = addConsume.value.jwcode.replace(/\s/g, '');
   }
 }
-//这是获取用户信息的接口
+
+//这是获取当前登录的用户信息的接口
 const adminData = ref({});
 const getAdminData = async function () {
   try {//await 暂停函数执行，直到请求完成
@@ -33,69 +34,207 @@ const getAdminData = async function () {
   }
 };
 
-// 这是添加消费信息的表单
+// 通过精网号查询用户（客户）信息
+const user = ref({
+  name: "",
+  jwcode: 0,
+  market: "",
+  historySumGold: 0,
+  historyPermanentGold: 0,
+  historyFreeGold: 0,
+  historyTaskGold: 0,
+  rechargeNum: 0,
+  consumeNum: 0,
+  firstRecharge: "",
+  nowPermanentGold: 0,
+  nowFreeJune: null,
+  nowTaskGold: 0,
+  nowFreeDecember: null,
+  nowFreeGold: 0,
+  nowSumGold: 0
+
+})
+
+// 这是添加消费信息的表单（金币）
 const addConsume = ref({
-  freeCoin: 0,
-  rechargeCoin: 0,
-  taskCoin: 0,
-  updateType: "1",
-  indexName:"", //这个是指标字段，后面绑定
+  jwcode:0, //精网号
+  goodsName: "",// 商品名称 // todo 之后会用3楼的接口
+  sumGold: 0, // 消费金币总数
+  freeGold: 0, // 免费金币
+  permanentGold: 0, // 永久金币
+  taskGold: 0, // 任务金币
+  remark: "",//备注
+  adminId: 0,// 当前管理员id
+
+
+  // updateType: "1", 根据字段,不用了
+
+  // indexName: "", //这个是指标字段，后面绑定 根据需求，不用了
 });
+
+// 这是添加消费信息的接口
+// const add = async function () {
+//   try {
+//     // 处理数据，使用楼上接口后需要隐藏
+//
+//     // addConsume.value.rechargeCoin = Number(addConsume.value.rechargeCoin * 100);
+//     // addConsume.value.freeCoin = Number(addConsume.value.freeCoin * 100);
+//     // addConsume.value.taskCoin = Number(addConsume.value.taskCoin * 100);
+//
+//     addConsume.value.sumGold = Number(addConsume.value.sumGold);
+//     addConsume.value.freeGold = Number(addConsume.value.freeGold);
+//     addConsume.value.permanentGold = Number(addConsume.value.permanentGold);
+//     addConsume.value.taskGold = Number(addConsume.value.taskGold);
+//
+//     // addConsume.value.productName = indexs.value.productName;
+//
+//     // 发送POST请求
+//     const result = await request({
+//       url: "/consume/add",
+//       data: addConsume.value,
+//     });
+//     if (result.code === 0) {
+//       ElMessage.error(result.msg);
+//       return;
+//     } else {
+//       ElMessage.success("添加成功");
+//     }
+//     //重置表单
+//     addConsume.value = {};
+//     addConsume.value.adminId = adminData.value.adminId;
+//     addConsume.value.adminName = adminData.value.adminName;
+//     // addConsume.value.updateType = "1";
+//     addConsume.value.freeCoin = 0;
+//     addConsume.value.rechargeCoin = 0;
+//     addConsume.value.taskCoin = 0;
+//     indexs.value = {};
+//     console.log("请求成功", result);
+//     user.value = {};
+//   } catch (error) {
+//     console.log("请求失败", error);
+//     ElMessage.error("添加失败，请检查输入内容是否正确");
+//
+//     // 在这里可以处理错误逻辑，比如显示错误提示等
+//   }
+// };
+
 // 这是添加消费信息的接口
 const add = async function () {
   try {
-    // 处理数据，使用楼上接口后需要隐藏
-    addConsume.value.rechargeCoin = Number(addConsume.value.rechargeCoin * 100);
-    addConsume.value.freeCoin = Number(addConsume.value.freeCoin * 100);
-    addConsume.value.taskCoin = Number(addConsume.value.taskCoin * 100);
-    addConsume.value.productName = indexs.value.productName;
+    // 验证输入数据
+    if (!validateInput()) {
+      return;
+    }
+    // 数据转换
+    formatConsumeData();
     // 发送POST请求
     const result = await request({
       url: "/consume/add",
       data: addConsume.value,
     });
-    if (result.code === 0) {
-      ElMessage.error(result.msg);
-      return;
-    } else {
-      ElMessage.success("添加成功");
-    }
-    //重置表单
-    addConsume.value = {};
-    addConsume.value.adminId = adminData.value.adminId;
-    addConsume.value.adminName = adminData.value.adminName;
-    addConsume.value.updateType = "1";
-    addConsume.value.freeCoin = 0;
-    addConsume.value.rechargeCoin = 0;
-    addConsume.value.taskCoin = 0;
-    indexs.value = {};
-    console.log("请求成功", result);
-    user.value = {};
-  } catch (error) {
-    console.log("请求失败", error);
-    ElMessage.error("添加失败，请检查输入内容是否正确");
+    // 处理响应
+    handleResponse(result);
+    // 重置表单
+    resetForm();
 
-    // 在这里可以处理错误逻辑，比如显示错误提示等
+  } catch (error) {
+    console.error("请求失败", error);
+    ElMessage.error("添加失败，请检查网络连接或联系管理员");
   }
 };
+
+// 输入验证函数
+function validateInput() {
+  const { sumGold, freeGold, permanentGold, taskGold } = addConsume.value;
+
+  // 验证金币数值
+  if (sumGold <= 0) {
+    ElMessage.error("消费金币总数必须大于0");
+    return false;
+  }
+
+  // 验证金币总和
+  const totalAvailableGold = freeGold + permanentGold + taskGold;
+  if (sumGold > totalAvailableGold) {
+    ElMessage.error("消费金币总数超过可用金币总和");
+    return false;
+  }
+
+  return true;
+}
+
+// 数据格式化函数
+function formatConsumeData() {
+  // 转换数值类型
+  addConsume.value.sumGold = Number(addConsume.value.sumGold);
+  addConsume.value.freeGold = Number(addConsume.value.freeGold);
+  addConsume.value.permanentGold = Number(addConsume.value.permanentGold);
+  addConsume.value.taskGold = Number(addConsume.value.taskGold);
+
+  // 计算金币使用情况
+  const { usedFreeGold, usedPermanentGold, usedTaskGold } =
+      calculateCoins(
+          addConsume.value.sumGold,
+          addConsume.value.freeGold,
+          addConsume.value.permanentGold,
+          addConsume.value.taskGold
+      );
+
+  // 更新使用的金币数量
+  addConsume.value.usedFreeGold = usedFreeGold;
+  addConsume.value.usedPermanentGold = usedPermanentGold;
+  addConsume.value.usedTaskGold = usedTaskGold;
+}
+
+// 响应处理函数
+function handleResponse(result) {
+  if (result.code !== 0) {
+    ElMessage.success("添加成功");
+    console.log("请求成功", result);
+  } else {
+    ElMessage.error(result.msg || "添加失败，未知错误");
+  }
+}
+
+// 重置表单函数
+function resetForm() {
+  addConsume.value = {
+    jwcode: 0,
+    goodsName: "",
+    sumGold: 0,
+    freeGold: 0,
+    permanentGold: 0,
+    taskGold: 0,
+    remark: "",
+    adminId: adminData.value.adminId,
+    adminName: adminData.value.adminName,
+    freeCoin: 0,
+    rechargeCoin: 0,
+    taskCoin: 0,
+  };
+
+  indexs.value = {};
+  user.value = {};
+}
+
 const addBefore = () => {
   Ref.value.validate(async (valid) => {
     if (valid) {
       ElMessageBox.confirm("确认添加？")
-        .then(() => {
-          addConsume.value.freeCoin = Number(-addConsume.value.freeCoin);
-          addConsume.value.rechargeCoin = Number(
-            -addConsume.value.rechargeCoin
-          );
-          addConsume.value.taskCoin = Number(-addConsume.value.taskCoin);
-          add();
-          console.log("添加成功");
-          imageUrl.value = "";
-          addConsume.value = {};
-        })
-        .catch(() => {
-          console.log("取消添加");
-        });
+          .then(() => {
+            addConsume.value.freeCoin = Number(-addConsume.value.freeCoin);
+            addConsume.value.rechargeCoin = Number(
+                -addConsume.value.rechargeCoin
+            );
+            addConsume.value.taskCoin = Number(-addConsume.value.taskCoin);
+            add();
+            console.log("添加成功");
+            imageUrl.value = "";
+            addConsume.value = {};
+          })
+          .catch(() => {
+            console.log("取消添加");
+          });
     } else {
       //提示
       ElMessage({
@@ -119,17 +258,18 @@ const checkFreeGoldRadio = function (rule, value, callback) {
     callback();
   }
 };
+
 const rules = reactive({
-  jwcode: [{ required: true, message: "请输入精网号", trigger: "blur" }],
-  productName: [{ required: true, message: "请选择消费商品", trigger: "change" }], // 修改为 change
-  taskCoin: [{ required: true, message: "请输入任务金币", trigger: "blur" }],
-  freeCoin: [{ required: true, message: "请输入免费金币", trigger: "blur" }],
+  jwcode: [{required: true, message: "请输入精网号", trigger: "blur"}],
+  productName: [{required: true, message: "请选择消费商品", trigger: "change"}], // 修改为 change
+  taskCoin: [{required: true, message: "请输入任务金币", trigger: "blur"}],
+  freeCoin: [{required: true, message: "请输入免费金币", trigger: "blur"}],
   rechargeCoin: [
-    { required: true, message: "请输入免费金币", trigger: "blur" },
+    {required: true, message: "请输入免费金币", trigger: "blur"},
   ],
   allGold: [
-    { required: true, message: "消费金币总数不能为空", trigger: "blur" },
-    { validator: checkFreeGoldRadio, trigger: "blur" },
+    {required: true, message: "消费金币总数不能为空", trigger: "blur"},
+    {validator: checkFreeGoldRadio, trigger: "blur"},
   ],
   indexName: [
     {
@@ -158,18 +298,21 @@ const delteConsume = function () {
   isHC.value = 0;
 };
 // 查找客户信息的方法
-const user = ref({
-  firstRechargeTime: "",
-});
+// const user = ref({
+//   firstRechargeTime: "",
+// });
+
+// 查询客户信息（通过精网号）
 const getUser = async function (jwcode) {
   trimJwCode();
   try {
     // 发送POST请求
     const result = await request({
-      url: "/recharge/user",
+      url: "user/selectUser",
       data: {
+        // 只需要传精网号
         jwcode: addConsume.value.jwcode,
-        area: adminData.value.area,
+        // area: adminData.value.area,
       },
     });
     console.log("请求成功", result);
@@ -177,10 +320,11 @@ const getUser = async function (jwcode) {
     if (result.code === 0) {
       ElMessage.error(result.msg);
     } else {
+
       user.value = result.data;
-      user.value.A =
-        Number(user.value.pendingRechargeTimes) +
-        Number(user.value.pendingSpendTimes);
+      /*      user.value.A =
+                Number(user.value.pendingRechargeTimes) +
+                Number(user.value.pendingSpendTimes);*/
       console.log("用户信息", user.value);
       ElMessage.success(result.msg);
     }
@@ -192,7 +336,9 @@ const getUser = async function (jwcode) {
 };
 
 
-//下面这个也是校验精网号是否存在的方法，通过脱离文本框实现，但是上面方法绑定了信息面板，在输入正确的精网号后能显示。
+// 为什么写两次?
+
+/*//下面这个也是校验精网号是否存在的方法，通过脱离文本框实现，但是上面方法绑定了信息面板，在输入正确的精网号后能显示。
 //这是查询用户金币信息的接口
 const userGold = ref({});
 const getUserGold = async function (jwcode) {
@@ -200,7 +346,7 @@ const getUserGold = async function (jwcode) {
   try {
     // 发送POST请求
     const result = await request({
-      url: "/recharge/user",
+      // url: "/recharge/user",
       data: {
         jwcode: addConsume.value.jwcode,
         area: adminData.value.area,
@@ -215,7 +361,7 @@ const getUserGold = async function (jwcode) {
       userGold.value = result.data;
       addConsume.value.username = result.data.name;
       addConsume.value.area = result.data.area;
-     // ElMessage.success(result.msg);
+      // ElMessage.success(result.msg);
     }
   } catch (error) {
     console.log("请求失败", error);
@@ -223,16 +369,58 @@ const getUserGold = async function (jwcode) {
     addConsume.value.jwcode = "";
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
-};
+};*/
+
+
+
+function calculateCoins(sumGold, nowFreeGold, nowPermanentGold, nowTaskGold) {
+  let remaining = sumGold;
+  let usedFreeGold = 0;
+  let usedPermanentGold = 0;
+  let usedTaskGold = 0;
+
+  // 优先消耗免费金币
+  if (remaining > 0) {
+    usedFreeGold = Math.min(remaining, nowFreeGold);
+    remaining -= usedFreeGold;
+  }
+
+  // 其次消耗永久金币
+  if (remaining > 0) {
+    usedPermanentGold = Math.min(remaining, nowPermanentGold);
+    remaining -= usedPermanentGold;
+  }
+
+  // 最后消耗任务金币
+  if (remaining > 0) {
+    usedTaskGold = Math.min(remaining, nowTaskGold);
+    remaining -= usedTaskGold;
+  }
+
+  // 返回使用情况和剩余金币数量
+  return {
+    usedFreeGold,
+    usedPermanentGold,
+    usedTaskGold,
+    remaining,
+    finalFreeGold: nowFreeGold - usedFreeGold,
+    finalPermanentGold: nowPermanentGold - usedPermanentGold,
+    finalTaskGold: nowTaskGold - usedTaskGold
+  };
+}
 
+
+
+// 先注释掉
+/*
 function calculateCoins() {
   if (
-    (userGold.value.coreJb +
-      userGold.value.free6 +
-      userGold.value.free12 +
-      userGold.value.buyJb) /
+      (userGold.value.coreJb +
+          userGold.value.free6 +
+          userGold.value.free12 +
+          userGold.value.buyJb) /
       100 <
-    addConsume.value.allGold
+      addConsume.value.allGold
   ) {
     addConsume.value.allGold = 0;
     addConsume.value.taskCoin = 0;
@@ -248,13 +436,13 @@ function calculateCoins() {
 
     // 确保todayTask和todayFree是有效的数字
     const todayTask =
-      typeof userGold.value.coreJb === "number"
-        ? userGold.value.coreJb / 100
-        : 0;
+        typeof userGold.value.coreJb === "number"
+            ? userGold.value.coreJb / 100
+            : 0;
     const todayFree =
-      typeof (userGold.value.free6 + userGold.value.free12) === "number"
-        ? (userGold.value.free6 + userGold.value.free12) / 100
-        : 0;
+        typeof (userGold.value.free6 + userGold.value.free12) === "number"
+            ? (userGold.value.free6 + userGold.value.free12) / 100
+            : 0;
 
     // 根据用户输入的消费金币总数和已有的金币数量进行计算
     addConsume.value.taskCoin = Math.min(originalAllGold, todayTask);
@@ -276,6 +464,7 @@ function calculateCoins() {
     console.log("计算结果", addConsume.value);
   }
 }
+*/
 
 // 查询商品的接口
 const goods = ref([]);
@@ -283,7 +472,7 @@ const getGoods = async function () {
   try {
     // 发送POST请求
     const result = await request({
-      url: "/product",
+      // url: "/product", // todo 后续换3楼的
       data: {},
     });
     // 将响应结果存储到响应式数据中
@@ -298,11 +487,12 @@ const getGoods = async function () {
 };
 // 获取指标的方法
 const index = ref([]);
-const getIndexs = async function (type) {
+// todo 根据需求，不需要指标
+/*const getIndexs = async function (type) {
   try {
     // 发送POST请求
     const result = await request({
-      url: "/product/index",
+      // url: "/product/index",
       data: {
         type: type,
       },
@@ -315,10 +505,11 @@ const getIndexs = async function (type) {
     console.log("请求失败", error);
     // 在这里可以处理错误逻辑，比如显示错误提示等
   }
-};
+};*/
 
 // 选择商品名称是时触发的方法
 const isHC = ref(0);
+
 // const handleProductSelect = (productName) => {
 //   // 根据商品名称获取对应的商品信息
 //   // indexs.value.productName = productName;为什么直接绑定？？？
@@ -332,7 +523,9 @@ const isHC = ref(0);
 //     addConsume.value.indexName = "";
 //   }
 // };
+
 const indexs = ref([]);
+
 // const handleIndexSelect = () => {
 //   if (isHC.value === 1 && addConsume.value.indexName) {
 //     addConsume.value.productName = "homilychart" + addConsume.value.indexName;
@@ -342,28 +535,29 @@ const indexs = ref([]);
 // 商品搜索逻辑
 const queryProductSearch = (queryString, cb) => {
   const results = queryString
-    ? goods.value.filter(item => 
-        item.name.toLowerCase().includes(queryString.toLowerCase())
+      ? goods.value.filter(item =>
+          item.name.toLowerCase().includes(queryString.toLowerCase())
       )
-    : goods.value;
+      : goods.value;
   cb(results);
 };
 
 // 指标搜索逻辑
 const queryIndexSearch = (queryString, cb) => {
   const results = queryString
-    ? index.value.filter(item => // 将 indexData 替换为 index
-        item.name.toLowerCase().includes(queryString.toLowerCase())
+      ? index.value.filter(item => // 将 indexData 替换为 index
+          item.name.toLowerCase().includes(queryString.toLowerCase())
       )
-    : index.value;
+      : index.value;
   cb(results);
 };
 
+// todo 这里的 homilychart 对应问题 homilyChart
 // 商品选择处理（重点修改）
 const handleProductSelect = async (selectedItem) => {
-  const productName = typeof selectedItem === 'string' 
-    ? selectedItem 
-    : selectedItem?.name || '';
+  const productName = typeof selectedItem === 'string'
+      ? selectedItem
+      : selectedItem?.name || '';
 
   if (productName === "homilychart") {
     isHC.value = 1;
@@ -381,9 +575,9 @@ const handleProductSelect = async (selectedItem) => {
 // 指标选择处理（重点修改）
 const handleIndexSelect = (selectedItem) => {
   if (isHC.value === 1) {
-    const indexName = typeof selectedItem === 'string' 
-      ? selectedItem 
-      : selectedItem?.name || '';
+    const indexName = typeof selectedItem === 'string'
+        ? selectedItem
+        : selectedItem?.name || '';
     // 仅更新指标名称字段
     addConsume.value.indexName = indexName;
   }
@@ -398,8 +592,6 @@ const handleIndexBlur = (e) => {
 };
 
 
-
-
 // 挂载
 onMounted(async function () {
   await getAdminData();
@@ -414,7 +606,7 @@ const handleSelectBlur = (value) => {
     // 若选择的是商品名称
     if (addConsume.value.productName === value) {
       addConsume.value.productName = value;
-    } 
+    }
     // 若选择的是指标名称
     else if (indexs.value.name === value) {
       indexs.value.name = value;
@@ -425,231 +617,253 @@ const handleSelectBlur = (value) => {
 
 <template>
 
-<div>
-  
+  <div>
+
 
     <!-- 根据activeTab切换显示内容 -->
-   <!-- 新增消耗的布局---------------------------------------------------------- -->
-  <!-- <div v-if="activeTab === 'addConsume'"> -->
-  <!-- <div style="margin-bottom: 20px; font-weight: bolder">新增消费</div> -->
-
-  <el-form
-    :model="addConsume"
-    ref="Ref"
-    :rules="rules"
-    label-width="auto"
-    style="max-width: 750px;"
-    class="form-style"
-  >
-    <el-form-item prop="jwcode" label="精网号">
-      <el-input
-        v-model="addConsume.jwcode"
-        style="width: 220px"
-        @change="getUserGold(addConsume.jwcode)"
-      />
-      <el-button
-        type="primary"
-        @click="getUser(addConsume.jwcode)"
-        style="margin-left: 20px"
-        >查询</el-button
-      >
-    </el-form-item>
-     <div style="display: flex; align-items: center; gap: 20px;">
-    <el-form-item prop="productName" label="商品名称" style="flex: 1; margin-right: 0px">
-    <el-autocomplete
-      v-model="addConsume.productName"
-      :fetch-suggestions="queryProductSearch"
-      placeholder="请输入或选择商品"
-      style="width: 300px"
-      @select="handleProductSelect"
-      value-key="name"
-      clearable
-      :trigger-on-focus="true"
-    >
-      <template #default="{ item }">
-        <div>{{ item.name }}</div>
-      </template>
-    </el-autocomplete>
-  </el-form-item>
-
-  <!-- 指标选择 -->
-   <!-- 使用flex布局会使页面更灵活好用，修改之前选中商品名称后才会正常布局的bug -->
-  <!-- <el-form-item prop="indexName" label="指标" v-if="isHC == 1" style="flex: 1;margin-left: -20px">
-    <el-autocomplete
-      v-model="addConsume.indexName"
-      :fetch-suggestions="queryIndexSearch"
-      placeholder="请输入或选择指标"
-      style="width: 140px"
-      @select="handleIndexSelect"
-      @blur="handleIndexBlur"
-      value-key="name"
-      :disabled="isHC !== 1"
-      clearable
-      free-solo
-      allow-create
+    <!-- 新增消耗的布局---------------------------------------------------------- -->
+    <!-- <div v-if="activeTab === 'addConsume'"> -->
+    <!-- <div style="margin-bottom: 20px; font-weight: bolder">新增消费</div> -->
+
+    <el-form
+        :model="addConsume"
+        ref="Ref"
+        :rules="rules"
+        label-width="auto"
+        style="max-width: 750px;"
+        class="form-style"
     >
-      <template #default="{ item }">
-        <div>{{ item.name }}</div>
-      </template>
-    </el-autocomplete>
-  </el-form-item>
-  <el-form-item label="指标" v-else style="flex:1;margin-left: -5px;">
-    <el-input disabled placeholder="无" style="width: 100px" />
-  </el-form-item> -->
-</div>
-    <el-form-item prop="allGold" label="消费金币总数" >
-      <el-input
-        v-model="addConsume.allGold"
-        style="width: 100px"
-        @change="calculateCoins()"
-      />
-    </el-form-item>
-    <div style="display: flex; align-items: center">
-      <el-form-item prop="rechargeCoin" label="永久金币" style="float: left">
+      <!--      todo 添加错误提示-->
+
+      <el-form-item prop="jwcode" label="精网号">
+        <!--        <el-input
+                    v-model="addConsume.jwcode"
+                    style="width: 220px"
+                    @change="getUserGold(addConsume.jwcode)"
+                />-->
         <el-input
-          disabled
-          v-model="addConsume.rechargeCoin"
-          style="width: 100px; margin-left: -5px"
+            v-model="addConsume.jwcode"
+            style="width: 220px"
         />
-        <p style="margin-right: 0px">个</p>
+        <el-button
+            type="primary"
+            @click="getUser(addConsume.jwcode)"
+            style="margin-left: 20px"
+        >查询
+        </el-button
+        >
       </el-form-item>
-      <el-form-item
-        prop="freeCoin"
-        label="免费金币"
-        style="float: left; margin-left: -20px"
-      >
+
+      <div style="display: flex; align-items: center; gap: 20px;">
+        <el-form-item prop="productName" label="商品名称" style="flex: 1; margin-right: 0px">
+
+          <el-autocomplete
+              v-model="addConsume.productName"
+              :fetch-suggestions="queryProductSearch"
+              placeholder="请输入或选择商品"
+              style="width: 300px"
+              @select="handleProductSelect"
+              value-key="name"
+              clearable
+              :trigger-on-focus="true"
+          >
+            <template #default="{ item }">
+              <div>{{ item.name }}</div>
+            </template>
+          </el-autocomplete>
+        </el-form-item>
+
+        <!-- 指标选择 -->
+        <!-- 使用flex布局会使页面更灵活好用，修改之前选中商品名称后才会正常布局的bug -->
+        <!-- <el-form-item prop="indexName" label="指标" v-if="isHC == 1" style="flex: 1;margin-left: -20px">
+          <el-autocomplete
+            v-model="addConsume.indexName"
+            :fetch-suggestions="queryIndexSearch"
+            placeholder="请输入或选择指标"
+            style="width: 140px"
+            @select="handleIndexSelect"
+            @blur="handleIndexBlur"
+            value-key="name"
+            :disabled="isHC !== 1"
+            clearable
+            free-solo
+            allow-create
+          >
+            <template #default="{ item }">
+              <div>{{ item.name }}</div>
+            </template>
+          </el-autocomplete>
+        </el-form-item>
+        <el-form-item label="指标" v-else style="flex:1;margin-left: -5px;">
+          <el-input disabled placeholder="无" style="width: 100px" />
+        </el-form-item> -->
+
+      </div>
+
+      <el-form-item prop="allGold" label="消费金币总数">
         <el-input
-          disabled
-          v-model="addConsume.freeCoin"
-          style="width: 100px; margin-left: -5px"
+            v-model="addConsume.allGold"
+            style="width: 100px"
+            @change="calculateCoins()"
         />
-        <p style="margin-right: 0px">个</p>
       </el-form-item>
-      <el-form-item prop="taskCoin" label="任务金币" style="margin-left: -20px">
+
+      <div style="display: flex; align-items: center">
+        <el-form-item prop="rechargeCoin" label="永久金币" style="float: left">
+          <el-input
+              disabled
+              v-model="addConsume.rechargeCoin"
+              style="width: 100px; margin-left: -5px"
+          />
+          <p style="margin-right: 0px">个</p>
+        </el-form-item>
+        <el-form-item
+            prop="freeCoin"
+            label="免费金币"
+            style="float: left; margin-left: -20px"
+        >
+          <el-input
+              disabled
+              v-model="addConsume.freeCoin"
+              style="width: 100px; margin-left: -5px"
+          />
+          <p style="margin-right: 0px">个</p>
+        </el-form-item>
+        <el-form-item prop="taskCoin" label="任务金币" style="margin-left: -20px">
+          <el-input
+              disabled
+              v-model="addConsume.taskCoin"
+              style="width: 100px; margin-left: -5px"
+          />
+          <p style="margin-right: 20px">个</p>
+        </el-form-item>
+      </div>
+
+      <el-form-item prop="remark" label="备注">
         <el-input
-          disabled
-          v-model="addConsume.taskCoin"
-          style="width: 100px; margin-left: -5px"
+            v-model="addConsume.remark"
+            style="width: 300px"
+            :rows="2"
+            maxlength="100"
+            show-word-limit
+            type="textarea"
         />
-        <p style="margin-right: 20px">个</p>
       </el-form-item>
-    </div>
-    <el-form-item prop="remark" label="备注">
-      <el-input
-        v-model="addConsume.remark"
-        style="width: 300px"
-        :rows="2"
-        maxlength="100"
-        show-word-limit
-        type="textarea"
-      />
-    </el-form-item>
-    <el-form-item prop="commitName" label="提交人">
-      <el-input
-        style="width: 300px"
-        :value="adminData.name"
-        disabled
-        placeholder="提交人姓名"
-      />
-    </el-form-item>
-    <el-button type="success" @click="delteConsume" style="margin-left: 280px">重置</el-button>
-    <el-button type="primary" @click="addBefore"> 提交 </el-button>
-  </el-form>
-
-  <!-- 客户信息栏 -->
-  <el-card style="width: 850px; float: right" class="customer-info">
-    <el-form
-      :model="user"
-      label-width="auto"
-      style="max-width: 1200px"
-      label-position="left"
-    >
-      <el-text size="large" style="margin-left: 20px">客户信息</el-text>
-      <el-row style="margin-top: 20px">
-        <el-col :span="10">
-          <el-form-item label="姓名:">
-            <p>{{ user.name }}</p>
-          </el-form-item>
-        </el-col>
-        <el-col :span="14">
-          <el-form-item label="历史金币总数">
-            <!-- 检查 user.totalRechargeGold 是否为有效的数字 -->
-            <p v-if="!isNaN(Number(user.totalRechargeGold))">
-              {{ Number(user.totalRechargeGold / 100) }}
-            </p>
-            <!-- 如果不是有效的数字，显示默认值 -->
-            <p v-else></p>
-          </el-form-item>
-        </el-col>
-        <el-col :span="10">
-          <el-form-item label="精网号">
-            <p>{{ user.jwcode }}</p>
-          </el-form-item>
-        </el-col>
-        <el-col :span="14">
-          <el-form-item label="当前金币总数" style="width: 500px">
+
+      <el-form-item prop="commitName" label="提交人">
+        <el-input
+            style="width: 300px"
+            :value="adminData.name"
+            disabled
+            placeholder="提交人姓名"
+        />
+      </el-form-item>
+
+      <el-button type="success" @click="delteConsume" style="margin-left: 280px">重置</el-button>
+
+      <el-button type="primary" @click="addBefore"> 提交</el-button>
+    </el-form>
+
+    <!--  todo 这里少客户信息栏的卸载 -->
+
+    <!-- 客户信息栏 -->
+    <el-card style="width: 850px; float: right" class="customer-info">
+      <el-form
+          :model="user"
+          label-width="auto"
+          style="max-width: 1200px"
+          label-position="left"
+      >
+        <el-text size="large" style="margin-left: 20px">客户信息</el-text>
+        <el-row style="margin-top: 20px">
+          <el-col :span="10">
+            <el-form-item label="姓名:">
+              <p>{{ user.name }}</p>
+            </el-form-item>
+          </el-col>
+          <el-col :span="14">
+            <el-form-item label="历史金币总数">
+              <!-- 检查 user.totalRechargeGold 是否为有效的数字 -->
+              <p v-if="!isNaN(Number(user.historySumGold))">
+                <!--                {{ Number(user.historySumGold / 100) }}-->
+                {{ Number(user.historySumGold) }}
+              </p>
+              <!-- 如果不是有效的数字，显示默认值 -->
+              <p v-else></p>
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item label="精网号">
+              <p>{{ user.jwcode }}</p>
+            </el-form-item>
+          </el-col>
+          <el-col :span="14">
+            <el-form-item label="当前金币总数" style="width: 500px">
             <span
-              style="color: #2fa1ff; margin-right: 5px"
-              v-if="user.buyJb !== undefined"
-              >{{
-                (user.buyJb + user.free6 + user.free12 + user.coreJb) / 100
-              }}</span
+                style="color: #2fa1ff; margin-right: 5px"
+                v-if="user.nowSumGold !== undefined"
             >
-            <span
-              style="display: inline; white-space: nowrap; color: #b1b1b1"
-              v-if="user.buyJb !== undefined"
-              >(永久金币:{{ user.buyJb / 100 }};免费金币:{{
-                (user.free6 + user.free12) / 100
-              }};任务金币:{{ user.coreJb / 100 }})</span
+              {{ user.nowSumGold }}</span
             >
-          </el-form-item>
-        </el-col>
-        <el-col :span="10">
-          <el-form-item label="首次充值日期">
-            <p v-if="user.firstRechargeDate">
-              {{ moment(user.firstRechargeDate).format("YYYY-MM-DD HH:mm:ss") }}
-            </p>
-          </el-form-item>
-        </el-col>
-        <el-col :span="14">
-          <el-form-item label="充值次数">
-            <p style="color: #2fa1ff">{{ user.rechargeTimes }}</p>
-          </el-form-item>
-        </el-col>
-        <!-- <el-col :span="10">
-          <el-form-item label="负责客服">
-            <p>{{ adminData.name }}</p>
-          </el-form-item>
-        </el-col> -->
-        <el-col :span="10">
-          <el-form-item label="消费次数">
-            <p style="color: #2fa1ff">{{ user.spendTimes }}</p>
-          </el-form-item>
-        </el-col>
-        <el-col :span="10">
-          <el-form-item label="所属门店">
-            <p>{{ adminData.area }}</p>
-          </el-form-item>
-        </el-col>
-        <el-col :span="14">
-          <!-- <el-form-item label="待审核">
-            <p style="color: #2fa1ff">
-              {{ user.A }}
-            </p>
-          </el-form-item> -->
-        </el-col>
-      </el-row>
-    </el-form>
-  </el-card>
+              <span
+                  style="display: inline; white-space: nowrap; color: #b1b1b1"
+                  v-if="user.nowSumGold !== undefined"
+              >(永久金币:{{ user.nowPermanentGold }};免费金币:{{
+                  (user.nowFreeGold)
+                }};任务金币:{{ user.nowTaskGold }})</span>
+
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item label="首次充值日期">
+              <p v-if="user.firstRecharge">
+                {{ moment(user.firstRecharge).format("YYYY-MM-DD HH:mm:ss") }}
+              </p>
+            </el-form-item>
+          </el-col>
+          <el-col :span="14">
+            <el-form-item label="充值次数">
+              <p style="color: #2fa1ff">{{ user.rechargeNum }}</p>
+            </el-form-item>
+          </el-col>
+          <!-- <el-col :span="10">
+            <el-form-item label="负责客服">
+              <p>{{ adminData.name }}</p>
+            </el-form-item>
+          </el-col> -->
+          <el-col :span="10">
+            <el-form-item label="消费次数">
+              <p style="color: #2fa1ff">{{ user.consumeNum }}</p>
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item label="所属门店">
+              <p>{{ user.market }}</p>
+            </el-form-item>
+          </el-col>
+          <el-col :span="14">
+            <!-- <el-form-item label="待审核">
+              <p style="color: #2fa1ff">
+                {{ user.A }}
+              </p>
+            </el-form-item> -->
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+
   </div>
 
+
   <!-- 金币消耗明细的布局------------------------------------------------------- -->
   <!-- <div v-else-if="activeTab === 'detail'"> -->
-    
+
   <!-- </div>
   </div> -->
+
 </template>
 
+
 <style scoped>
 p {
   margin: 0px;
diff --git a/src/views/consume/coinConsume.vue b/src/views/consume/coinConsume.vue
index 91086e2..0be13d0 100644
--- a/src/views/consume/coinConsume.vue
+++ b/src/views/consume/coinConsume.vue
@@ -3,14 +3,14 @@
     <!-- 这里放置标签切换的按钮 -->
     <el-button-group>
     <!-- 切换后状态显示 primary 样式否则是默认样式 -->
-      <el-button 
-        :type="activeTab === 'add' ? 'primary' : 'default'" 
+      <el-button
+        :type="activeTab === 'add' ? 'primary' : 'default'"
         @click="goToAdd"
       >
         新增消耗
       </el-button>
-      <el-button 
-        :type="activeTab === 'detail' ? 'primary' : 'default'" 
+      <el-button
+        :type="activeTab === 'detail' ? 'primary' : 'default'"
         @click="goToDetail"
       >
         金币消耗明细
diff --git a/src/views/consume/coinConsumeDetail.vue b/src/views/consume/coinConsumeDetail.vue
index d4fcd42..752c54b 100644
--- a/src/views/consume/coinConsumeDetail.vue
+++ b/src/views/consume/coinConsumeDetail.vue
@@ -46,6 +46,7 @@ const area = ref([])
 const activeName = ref('all')
 
 // 消费平台选项
+// todo 死数据吗？
 const consumePlatform = [
   {
     value: '4',
@@ -104,6 +105,7 @@ const get = async function (val) {
     console.log('搜索参数', getObj.value)
     // 发送POST请求
     const result = await request({
+      // todo redis 寄了?
       url: '/consume/select',
       data: {
         ...getObj.value,
@@ -304,7 +306,8 @@ const getArea = async function () {
   try {
     // 发送请求获取地区列表
     const result = await request({
-      url: '/area/list', 
+      // todo 接口不对
+      url: '/area/list',
       data: {}
     })
     console.log('请求地区列表成功', result)