gold-vue/src/views/consume/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";

/*
====================工具方法==============================
*/
// 精网号去空格
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+$/.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>

    <!-- 根据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"
        />
        <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="goodsName" label="商品名称" style="flex: 1; margin-right: 0px">

          <el-select
              v-model="addConsume.goodsName"
              placeholder="请选择商品"
              style="width: 450px"
          >
            <el-option
                v-for="item in goods"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>

        </el-form-item>


      </div>

      <el-form-item prop="sumGold" label="消耗金币总数">
        <el-input
            v-model="addConsume.sumGold"
            style="width: 100px"
            @input="validateInput()"
            @change="calculateCoins(addConsume.sumGold)"
        />
      </el-form-item>

      <!-- 三类金币自动计算（禁用状态，不可编辑） -->
      <div style="display: flex; align-items: center">
        <el-form-item prop="permanentGold" label="永久金币" style="float: left">
          <el-input
              v-model="addConsume.permanentGold"
              disabled
              style="width: 100px; margin-left: -5px"
          >
            <template #default="scope">{{ scope.row.permanentGold }}</template>
          </el-input>
          <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.freeGold"
              style="width: 100px; margin-left: -5px"
          />
          <p style="margin-right: 0px">个</p>
        </el-form-item>
        <el-form-item prop="taskGold" label="任务金币" style="margin-left: -20px">
          <el-input
              disabled
              v-model="addConsume.taskGold"
              style="width: 100px; margin-left: -5px"
          />
          <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.adminName"
            disabled
            placeholder="提交人姓名"
        />
      </el-form-item>

      <el-button type="success" @click="resetForm()" style="margin-left: 280px">重置</el-button>

      <el-button type="primary" @click="addBefore"> 提交</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>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  text-align: center;
}

.form-style {
  margin-top: 50px;
  max-width: 50%;
  float: left;
}

.form-style2 {
  max-width: 60%;
}

p {
  font-size: 13px;
  transform: scale(1);
}
</style>