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] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=BF=A1=E6=81=AF=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=EF=BC=8C=E6=96=B0=E5=A2=9E=E6=AD=A3=E5=9C=A8=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)