gold-vue/src/views/consume/gold/addCoinConsume.vue

<script setup>
import { onMounted, reactive, ref, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import moment from "moment";
import request from "@/util/http.js"
// 精网号去空格
const trimJwCode = () => {
  if (addConsume.value.jwcode) {
    // 去除所有空格，并尝试转换为整数
    const trimmed = addConsume.value.jwcode.toString().replace(/\s/g, '');
    const numeric = Number(trimmed);

    // 如果转换为数字成功，保存为数字，否则提示错误
    if (!isNaN(numeric)) {
      addConsume.value.jwcode = numeric;
    } else {
      ElMessage.error("精网号格式不正确，请输入数字");
    }
  }
}

/*
====================数据=================================
*/
//这是获取当前登录的用户信息
const adminData = ref({});
// 通过精网号查询用户（客户）信息 表单
const user = ref({
  jwcode: null,
  name: "",
  market: "",
  historySumGold: null,
  historyPermanentGold: null,
  historyFreeGold: null,
  historyTaskGold: null,
  rechargeNum: null,
  consumeNum: null,
  firstRecharge: "",
  nowPermanentGold: null,
  nowFreeJune: null,
  nowTaskGold: null,
  nowFreeDecember: null,
  nowFreeGold: null,
  nowSumGold: null
})

// 这是添加消费信息的表单（金币）
const addConsume = ref({
  // jwcode 是数字
  jwcode: null, //精网号
  goodsName: "",// 商品名称
  sumGold: null, // 消费金币总数
  freeGold: null, // 免费金币
  permanentGold: null, // 永久金币
  taskGold: null, // 任务金币
  remark: "",//备注
  adminId: null,// 当前管理员id
});
// 表单验证
const Ref = ref(null);
// 表单验证规则
const rules = reactive({
  jwcode: [
    { required: true, message: "请输入精网号", trigger: "blur" },
    // { type: 'number', message: "精网号必须为数字", trigger: "blur" }
  ],
  goodsName: [{ required: true, message: "请选择商品", trigger: "blur" }],
  sumGold: [
    { required: true, message: "消耗金币总数不能为空", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        // 允许0开头的小数（如0.1）但不允许单独的0
        const isValid = /^(0\.\d{1,2})|([1-9]\d*(\.\d{1,2})?)$/.test(value);

        if (!isValid) {
          callback(new Error("请输入大于0的正数（可包含最多两位小数）"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ]
});
// 查询商品的表单
const goods = ref([]);

/*
====================方法=================================
*/
const getAdminData = async function () {
  try {//await 暂停函数执行，直到请求完成
    const result = await request({
      url: "/admin/userinfo",
      data: {},
    });
    adminData.value = result;
    addConsume.value.adminId = adminData.value.id;

    addConsume.value.name = adminData.value.adminName;

    console.log("请求成功", result);
    console.log("用户信息", adminData.value);
  } catch (error) {
    console.log("请求失败", error);
  }
};


// 输入验证函数
function validateInput() {
  const sumGold = parseFloat(addConsume.value.sumGold);
  trimJwCode();

  if (user.value.jwcode == null) {
    ElMessage.warning("请先查询用户信息");
    addConsume.value.sumGold = null;
    user.value = {};
    return false;
  }

  /* 这块逻辑加到规则里面
   // 验证金币数值
    if (user.value.jwcode && (isNaN(sumGold) || sumGold <= 0)) {
      ElMessage.warning("消费金币总数必须是大于0的数字");
      // 将sumGold设置为null
      addConsume.value.sumGold = null;
      return false;
    }
    */
  // sumGold 补充0（比如.1  为0.1）
  if (addConsume.value.sumGold && addConsume.value.sumGold.toString().startsWith('.')) {
    addConsume.value.sumGold = '0' + addConsume.value.sumGold;
    // ElMessage.info('已自动补充前导0');
  }
  // 验证金币不能为负数
  if (sumGold < 0) {
    ElMessage.warning("消耗金币总数不能为负数");
    addConsume.value.sumGold = null;
    return false;
  }

  // 小数位数限制 2位，整数位数限制 6位
  if (addConsume.value.sumGold) {
    const sumGoldStr = addConsume.value.sumGold.toString();

    // 检查整数部分长度
    if (sumGoldStr.includes('.')) {
      const integerPart = sumGoldStr.split('.')[0];
      if (integerPart.length > 6) {
        // 截断整数部分到6位并提示
        const truncatedInteger = integerPart.slice(0, 6);
        addConsume.value.sumGold = parseFloat(truncatedInteger);
        ElMessage.info('整数部分最多允许6位');
        return; // 直接返回，不再处理小数部分
      }
    } else {
      // 纯整数情况
      if (sumGoldStr.length > 6) {
        addConsume.value.sumGold = parseFloat(sumGoldStr.slice(0, 6));
        ElMessage.info('整数部分最多允许6位');
        return;
      }
    }

    // 处理小数部分
    if (sumGoldStr.includes('.')) {
      const decimalPart = sumGoldStr.split('.')[1];
      if (decimalPart.length > 2) {
        // 截断到两位小数并提示
        const truncatedValue = parseFloat(sumGoldStr.slice(0, sumGoldStr.indexOf('.') + 3));
        addConsume.value.sumGold = truncatedValue;
        ElMessage.info('最多允许输入两位小数');
      }
    }
  }



  // 验证金币总和
  const totalAvailableGold = (user.value.nowSumGold)
  if (user.value.jwcode && sumGold > totalAvailableGold) {
    ElMessage.error("消耗金币总数超过可用金币总和");
    // 将sumGold设置为null
    addConsume.value.sumGold = null;
    return false;
  }

  return true;
}

// 消耗金币计算函数
function calculateCoins(sumGold) {
  console.log("消耗金币计算函数:计算金币", sumGold);
  const parsedSumGold = parseFloat(sumGold);
  if (isNaN(parsedSumGold) || parsedSumGold <= 0 || !user.value.jwcode) {
    return { free: 0, permanent: 0, task: 0 };
  }

  const { nowFreeGold, nowPermanentGold, nowTaskGold } = user.value;
  let remaining = parsedSumGold;
  let freeUsed = 0, permanentUsed = 0, taskUsed = 0;

  // 优先消耗免费金币
  if (nowFreeGold > 0) {
    freeUsed = Math.min(parseFloat(nowFreeGold.toFixed(4)), remaining);
    remaining = parseFloat((remaining - freeUsed).toFixed(4));
  }

  // 其次消耗永久金币
  if (remaining > 0 && nowPermanentGold > 0) {
    permanentUsed = Math.min(parseFloat(nowPermanentGold.toFixed(4)), remaining);
    remaining = parseFloat((remaining - permanentUsed).toFixed(4));
  }

  // 最后消耗任务金币
  if (remaining > 0 && nowTaskGold > 0) {
    taskUsed = parseFloat(remaining.toFixed(4));
  }

  // 更新金币值
  addConsume.value.freeGold = freeUsed;
  addConsume.value.permanentGold = permanentUsed;
  addConsume.value.taskGold = taskUsed;

  return { free: freeUsed, permanent: permanentUsed, task: taskUsed };
}

// 这是添加消费信息的接口
const add = async function () {
  try {
    // 验证输入数据 再验证一次
    if (!validateInput()) {
      return;
    }
    // 计算金币使用情况
    calculateCoins(addConsume.value.sumGold);

    console.log("addConsume.value", addConsume.value)
    // 发送POST请求
    const result = await request({
      // url: "/consume/add",
      url: "/consume/add",
      data: {
        ...addConsume.value,
        jwcode: addConsume.value.jwcode,
        adminId: addConsume.value.adminId,
        sumGold: addConsume.value.sumGold * 100,
        freeGold: addConsume.value.freeGold * 100,
        taskGold: addConsume.value.taskGold * 100,
        permanentGold: addConsume.value.permanentGold * 100,
        goodsName: addConsume.value.goodsName,
        remark: addConsume.value.remark
      }
    });

    console.log("add请求", result);
    // 处理响应
    handleResponse(result);
    // 重置表单
    resetForm();

  } catch (error) {
    console.error("请求失败", error);
    ElMessage.error("添加失败，请检查网络连接或联系管理员");
  }
};

// 响应处理函数
function handleResponse(result) {
  console.log("响应结果", result)
  if (result.code === 200) {
    ElMessage.success("添加成功");
    console.log("请求成功", result);
  } else {
    ElMessage.error(result.msg || "添加失败，未知错误");
  }
}

// 重置表单函数
function resetForm() {
  // 清空表单数据
  addConsume.value = {
    jwcode: null,
    goodsName: "",
    sumGold: null,
    freeGold: null,
    permanentGold: null,
    taskGold: null,
    remark: "",
    adminId: adminData.value.id,
    adminName: adminData.value.adminName,
  };

  console.log("重置表单")

  user.value = {
    jwcode: null,
    name: "",
    market: "",
    historySumGold: null,
    historyPermanentGold: null,
    historyFreeGold: null,
    historyTaskGold: null,
    rechargeNum: null,
    consumeNum: null,
    firstRecharge: "",
    nowPermanentGold: null,
    nowFreeJune: null,
    nowTaskGold: null,
    nowFreeDecember: null,
    nowFreeGold: null,
    nowSumGold: null
  }
}

// 添加前验证
const addBefore = () => {
  Ref.value.validate(async (valid) => {
    if (valid) {
      ElMessageBox.confirm("确认添加？")
        .then(() => {
          console.log("这里是jwcode", addConsume.value.jwcode)
          add();
          console.log("添加成功",);
          addConsume.value = {};
        })
        .catch(() => {
          console.log("取消添加");
        });
    } else {
      //提示
      ElMessage({
        type: "error",
        message: "请检查输入内容",
      });
    }
  });
};
// 查询客户信息（通过精网号）
const getUser = async function (jwcode) {
  try {
    // 验证精网号
    if (!jwcode) {
      ElMessage.warning('精网号不能为空');
      return;
    }

    // 验证精网号是否为数字
    if (!/^\d{1,9}$/.test(jwcode)) {
      ElMessage.warning('精网号必须为数字且不超过九位');
      resetForm()
      return;
    }

    // 发送POST请求
    const result = await request({
      url: "/user/selectUser",
      data: { jwcode }
    });

    console.log("请求成功", result);

    if (result.code === 200 && result.data) {
      // 处理用户数据
      user.value = {
        ...result.data,
        // 统一处理所有黄金数值，除以100
        nowPermanentGold: result.data.nowPermanentGold / 100,
        nowFreeGold: result.data.nowFreeGold / 100,
        nowSumGold: result.data.nowSumGold / 100,
        nowTaskGold: result.data.nowTaskGold / 100,
        nowFreeJune: result.data.nowFreeJune / 100,
        nowFreeDecember: result.data.nowFreeDecember / 100,
        historySumGold: result.data.historySumGold / 100,
        historyPermanentGold: result.data.historyPermanentGold / 100,
        historyFreeGold: result.data.historyFreeGold / 100,
        historyTaskGold: result.data.historyTaskGold / 100
      };

      ElMessage.success("查询成功");
      // 检查sumGold是否有值，如果有则重新计算金币分配
      if (addConsume.value.sumGold) {
        const parsedSumGold = parseFloat(addConsume.value.sumGold);
        if (!isNaN(parsedSumGold) && parsedSumGold > 0) {
          const { free, permanent, task } = calculateCoins(parsedSumGold);
          addConsume.value.freeGold = free;
          addConsume.value.permanentGold = permanent;
          addConsume.value.taskGold = task;
        }
      }
      // 验证输入
      validateInput()


    } else if (!result.data) {
      ElMessage.warning("用户不存在");
      user.value.jwcode = null
      addConsume.value.jwcode = null
      // resetForm(); // 重置表单
    } else {
      ElMessage.warning(result.msg || "请检查查询参数");
    }
  } catch (error) {
    console.error("请求失败", error);
    ElMessage.error("查询失败，请检查网络连接或精网号是否正确");
    resetForm(); // 重置表单
  }
};
// 获取商品信息(三楼接口)
const getGoods = async function () {
  try {
    // 发送POST请求
    const result = await request({
      // url: "/product", //
      // url: "http://39.101.133.168:8828/live_mall/api/product/all",
      url: "https://api.homilychart.com/live_mall/api/product/all",
    });
    // 将响应结果存储到响应式数据中
    console.log("请求成功", result);
    goods.value = result.data.map(item => ({
      id: item.id,
      label: item.name,
      value: item.name
    }));
  } catch (error) {
    console.log("请求失败", error);
    // 在这里可以处理错误逻辑，比如显示错误提示等
  }
};

/*
====================监听=================================
*/

// 监听消费总金额变化，自动计算三类金币
watch(
  () => addConsume.value.sumGold,
  (newValue) => {
    const parsedNewValue = parseFloat(newValue);
    if (!isNaN(parsedNewValue) && parsedNewValue > 0) {
      const { free, permanent, task } = calculateCoins(parsedNewValue);
      addConsume.value.freeGold = free;
      addConsume.value.permanentGold = permanent;
      addConsume.value.taskGold = task;
    } else {
      addConsume.value.freeGold = null;
      addConsume.value.permanentGold = null;
      addConsume.value.taskGold = null;
    }
  }
);

/*
====================挂载=================================
*/
// 挂载
onMounted(async function () {
  await getAdminData();
  await getGoods();
});

</script>

<template>
  <div>
    <el-form :model="addConsume" ref="Ref" :rules="rules" style="max-width: 750px;">
      <div style="width:25vw">
      <el-form-item prop="jwcode" label="精网号" style="margin-top: 50px">
        <el-input v-model="addConsume.jwcode" style="width: 10vw;margin-left:45px" />
        <el-button type="primary" @click="getUser(addConsume.jwcode)" style="margin-left: 10px">查询
        </el-button>
      </el-form-item>
    </div>
      <div  style="width:25vw">
        <el-form-item prop="goodsName" label="商品名称" style="flex: 1; margin-right: 0px">
          <el-select v-model="addConsume.goodsName" placeholder="请选择商品"  style="width: 10vw;margin-left:30px">
            <el-option v-for="item in goods" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </div>
      <div  style="width:25vw"> 
        <el-form-item prop="sumGold" label="消耗金币总数">
          <el-input v-model="addConsume.sumGold" style="width: 10vw;margin-left:2px" @input="validateInput()"
            @change="calculateCoins(addConsume.sumGold)" />
        </el-form-item>
      </div>

      <!-- 三类金币自动计算（禁用状态，不可编辑） -->
      <div style="width:25vw">
        <el-form-item prop="permanentGold" label="永久金币">
          <el-input v-model="addConsume.permanentGold" disabled  style="width: 10vw;margin-left:40px">
            <template #default="scope">{{ scope.row.permanentGold }}</template>
          </el-input>
          <p style="margin-right: 0px">&nbsp;&nbsp;个</p>
        </el-form-item>
      </div>
      <div style="width:25vw">
        <el-form-item prop="freeCoin" label="免费金币">
          <el-input disabled v-model="addConsume.freeGold" style="width: 10vw;margin-left:40px" />
          <p style="margin-right: 0px">&nbsp;&nbsp;个</p>
        </el-form-item>
      </div>
      <div style="width:25vw">
        <el-form-item prop="taskGold" label="任务金币">
          <el-input disabled v-model="addConsume.taskGold" style="width: 10vw;margin-left:40px" />
          <p style="margin-right: 20px">&nbsp;&nbsp;个</p>
        </el-form-item>
      </div>
      <div style="width:25vw">
        <el-form-item prop="remark" label="备注">
          <el-input v-model="addConsume.remark" style="width: 13.5vw;margin-left:70px" :rows="4" maxlength="100" show-word-limit
            type="textarea" />
        </el-form-item>
      </div>
      <el-button type="success" @click="resetForm()" style="margin-left: 200px;margin-top:10px">重置</el-button>
      <el-button type="primary" @click="addBefore" style="margin-top:10px"> 提交</el-button>
    </el-form>


    <!-- 客户信息栏 -->
    <el-card v-if="user.jwcode" style="width: 800px; float: right" class="customer-info">
      <el-form :model="user" label-width="auto" style="max-width: 1000px" label-position="left">
        <el-text size="large" style="margin-left: 20px">客户信息</el-text>

        <!-- 第一行：姓名 + 历史金币 -->
        <el-row style="margin-top: 20px">
          <el-col :span="9">
            <el-form-item label="姓名">
              <p>{{ user.name }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="历史金币总数">
              <!-- 检查 user.historySumGold 是否为有效的数字 -->
              <p style="color: #2fa1ff; margin-right: 5px" v-if="!isNaN(Number(user.historySumGold))">
                {{ Number(user.historySumGold) }}
              </p>

              <!-- 如果不是有效的数字，显示默认值 -->
              <p v-else></p>
            </el-form-item>
            <el-form-item style="margin-top: -23px">
              <span style="display: inline; white-space: nowrap; color: #b1b1b1"
                v-if="user.historyPermanentGold !== undefined">(永久金币:{{ user.historyPermanentGold }};免费金币:{{
                  (user.historyFreeGold)
                }};任务金币:{{ user.historyTaskGold }})</span>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第二行：精网号 + 当前金币（独立行） -->
        <el-row>
          <el-col :span="9">
            <el-form-item label="精网号">
              <p>{{ user.jwcode }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="当前金币总数" style="width: 500px">
              <span style="color: #2fa1ff; margin-right: 5px" v-if="user.nowSumGold !== undefined">{{ user.nowSumGold
              }}</span>
            </el-form-item>
            <!-- 金币详情独立显示 -->
            <el-form-item style="margin-top: -23px"> <!-- 负边距减少间距 -->
              <span style="color: #b1b1b1; margin-left: 0px" v-if="user.nowPermanentGold !== undefined">(永久金币:{{
                user.nowPermanentGold }};
                免费金币:{{ user.nowFreeGold }};
                任务金币:{{ user.nowTaskGold }})</span>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第三行：首次充值日期 + 充值次数 -->
        <el-row style="margin-top:-23px">
          <el-col :span="9">
            <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-row>

        <!-- 第四行：消费次数 + 所属门店 -->
        <el-row>
          <el-col :span="9">
            <el-form-item label="消费次数">
              <p style="color: #2fa1ff">{{ user.consumeNum }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="所属门店">
              <p>{{ user.market }}</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;
}

.el-form-item {
  margin-left: 50px;
}

/* 上传图片的格式 */
.avatar-uploader .avatar {
  width: 50px;
  height: 50px;
  display: block;
}
</style>

<style>
</style>