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

<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 axios from "axios";
import { ElMessageBox } from "element-plus";
import API from "../../api/index.js";
import moment from "moment";
import _ from "lodash";
import request from "@/util/http";
// 精网号去空格
const trimJwCode = () => {
  if (addConsume.value.jwcode) {
    addConsume.value.jwcode = addConsume.value.jwcode.replace(/\s/g, ''); 
  }
}
//这是获取用户信息的接口
const adminData = ref({});
const getAdminData = async function () {
  try {
    const result = await request({
      url: "/admin/userinfo",
      data: {},
    });
    adminData.value = result;
    addConsume.value.adminId = adminData.value.adminId;
    addConsume.value.name = adminData.value.name;
    console.log("请求成功", result);
    console.log("用户信息", adminData.value);
  } catch (error) {
    console.log("请求失败", error);
  }
};

// 这是添加消费信息的表单
const addConsume = ref({
  freeCoin: 0,
  rechargeCoin: 0,
  taskCoin: 0,
  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.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 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("取消添加");
        });
    } else {
      //提示
      ElMessage({
        type: "error",
        message: "请检查输入内容",
      });
    }
  });
};

// 表单验证
// 开始时间改变时，重新验证结束时间
const Ref = ref(null);

const checkFreeGoldRadio = function (rule, value, callback) {
  if (value == "0" || value == null || value == "") {
    callback(new Error("请输入消费金币总数"));
  } else if (value < 0 || isNaN(value)) {
    callback(new Error("请输入正确的格式"));
  } else {
    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" }],
  rechargeCoin: [
    { required: true, message: "请输入免费金币", trigger: "blur" },
  ],
  allGold: [
    { required: true, message: "消费金币总数不能为空", trigger: "blur" },
    { validator: checkFreeGoldRadio, trigger: "blur" },
  ],
  indexName: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (isHC.value === 1 && !value) {
          callback(new Error("请选择指标"));
        } else {
          callback();
        }
      },
      trigger: ["change", "blur"],
    },
  ]
});
//这是重置方法
const delteConsume = function () {
  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 = {};
  isHC.value = 0;
};
// 查找客户信息的方法
const user = ref({
  firstRechargeTime: "",
});
const getUser = async function (jwcode) {
  trimJwCode();
  try {
    // 发送POST请求
    const result = await request({
      url: "/recharge/user",
      data: {
        jwcode: addConsume.value.jwcode,
        area: adminData.value.area,
      },
    });
    console.log("请求成功", result);

    if (result.code === 0) {
      ElMessage.error(result.msg);
    } else {
      user.value = result.data;
      user.value.A =
        Number(user.value.pendingRechargeTimes) +
        Number(user.value.pendingSpendTimes);
      console.log("用户信息", user.value);
      ElMessage.success(result.msg);
    }
  } catch (error) {
    console.log("请求失败", error);
    ElMessage.error("查询失败，请检查精网号是否正确");
    // 在这里可以处理错误逻辑，比如显示错误提示等
  }
};


//下面这个也是校验精网号是否存在的方法，通过脱离文本框实现，但是上面方法绑定了信息面板，在输入正确的精网号后能显示。
//这是查询用户金币信息的接口
const userGold = ref({});
const getUserGold = async function (jwcode) {
  trimJwCode();
  try {
    // 发送POST请求
    const result = await request({
      url: "/recharge/user",
      data: {
        jwcode: addConsume.value.jwcode,
        area: adminData.value.area,
      },
    });
    // 将响应结果存储到响应式数据中
    console.log("请求成功", result);
    if (result.code === 0) {
      //ElMessage.error(result.msg);
    } else {
      // 存储表格数据
      userGold.value = result.data;
      addConsume.value.username = result.data.name;
      addConsume.value.area = result.data.area;
     // ElMessage.success(result.msg);
    }
  } catch (error) {
    console.log("请求失败", error);
    //ElMessage.error("无此精网号");
    addConsume.value.jwcode = "";
    // 在这里可以处理错误逻辑，比如显示错误提示等
  }
};

function calculateCoins() {
  if (
    (userGold.value.coreJb +
      userGold.value.free6 +
      userGold.value.free12 +
      userGold.value.buyJb) /
      100 <
    addConsume.value.allGold
  ) {
    addConsume.value.allGold = 0;
    addConsume.value.taskCoin = 0;
    addConsume.value.freeCoin = 0;
    addConsume.value.rechargeCoin = 0;
    ElMessage.error("金币不足，请充值");
    return;
  }
  // 这是计算用户的三种金币的接口
  else {
    // 保存原始的allGold值
    const originalAllGold = addConsume.value.allGold;

    // 确保todayTask和todayFree是有效的数字
    const todayTask =
      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;

    // 根据用户输入的消费金币总数和已有的金币数量进行计算
    addConsume.value.taskCoin = Math.min(originalAllGold, todayTask);
    let remainingGold = originalAllGold - addConsume.value.taskCoin;

    addConsume.value.freeCoin = Math.min(remainingGold, todayFree);
    remainingGold -= addConsume.value.freeCoin;

    addConsume.value.rechargeCoin = remainingGold; // 剩余的都算作永久金币

    // 恢复allGold的原始值
    addConsume.value.allGold = originalAllGold;

    // 确保taskCoin, freeCoin, rechargeCoin不是NaN，如果是，则设置为0
    if (isNaN(addConsume.value.taskCoin)) addConsume.value.taskCoin = 0;
    if (isNaN(addConsume.value.freeCoin)) addConsume.value.freeCoin = 0;
    if (isNaN(addConsume.value.rechargeCoin)) addConsume.value.rechargeCoin = 0;

    console.log("计算结果", addConsume.value);
  }
}

// 查询商品的接口
const goods = ref([]);
const getGoods = async function () {
  try {
    // 发送POST请求
    const result = await request({
      url: "/product",
      data: {},
    });
    // 将响应结果存储到响应式数据中

    console.log("请求成功", result);
    // 存储全部数据
    goods.value = result.data;
  } catch (error) {
    console.log("请求失败", error);
    // 在这里可以处理错误逻辑，比如显示错误提示等
  }
};
// 获取指标的方法
const index = ref([]);
const getIndexs = async function (type) {
  try {
    // 发送POST请求
    const result = await request({
      url: "/product/index",
      data: {
        type: type,
      },
    });
    // 将响应结果存储到响应式数据中
    console.log("请求成功", result);
    // 存储全部数据
    index.value = result.data;
  } catch (error) {
    console.log("请求失败", error);
    // 在这里可以处理错误逻辑，比如显示错误提示等
  }
};

// 选择商品名称是时触发的方法
const isHC = ref(0);
// const handleProductSelect = (productName) => {
//   // 根据商品名称获取对应的商品信息
//   // indexs.value.productName = productName;为什么直接绑定？？？
//   if (productName === "homilychart") {
//     isHC.value = 1;
//     addConsume.value.productName = "homilychart"; // 商品名
//     addConsume.value.indexName = ""; // 指标名
//   } else {
//     isHC.value = 0;
//     addConsume.value.productName = productName;
//     addConsume.value.indexName = "";
//   }
// };
const indexs = ref([]);
// const handleIndexSelect = () => {
//   if (isHC.value === 1 && addConsume.value.indexName) {
//     addConsume.value.productName = "homilychart" + addConsume.value.indexName;
//   }
// };

// 商品搜索逻辑
const queryProductSearch = (queryString, cb) => {
  const results = queryString
    ? goods.value.filter(item => 
        item.name.toLowerCase().includes(queryString.toLowerCase())
      )
    : 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;
  cb(results);
};

// 商品选择处理（重点修改）
const handleProductSelect = async (selectedItem) => {
  const productName = typeof selectedItem === 'string' 
    ? selectedItem 
    : selectedItem?.name || '';

  if (productName === "homilychart") {
    isHC.value = 1;
    addConsume.value.productName = "homilychart";
    addConsume.value.indexName = "";
    // 动态获取指标数据
    await getIndexs("homilychart");
  } else {
    isHC.value = 0;
    addConsume.value.productName = productName;
    addConsume.value.indexName = "";
  }
};

// 指标选择处理（重点修改）
const handleIndexSelect = (selectedItem) => {
  if (isHC.value === 1) {
    const indexName = typeof selectedItem === 'string' 
      ? selectedItem 
      : selectedItem?.name || '';
    // 仅更新指标名称字段
    addConsume.value.indexName = indexName;
  }
};

// 处理自由输入指标
const handleIndexBlur = (e) => {
  if (isHC.value === 1 && e.target.value) {
    // 仅更新指标名称字段
    addConsume.value.indexName = e.target.value;
  }
};


// 挂载
onMounted(async function () {
  await getAdminData();
  await getGoods();
  await getIndexs(1);
});

const handleSelectBlur = (value) => {
  // 这里可以根据需求添加额外逻辑，比如验证输入值是否有效
  // 目前直接将输入值同步到 v-model 绑定的值上
  if (value) {
    // 若选择的是商品名称
    if (addConsume.value.productName === value) {
      addConsume.value.productName = value;
    } 
    // 若选择的是指标名称
    else if (indexs.value.name === value) {
      indexs.value.name = value;
    }
  }
};
</script>

<template>
  <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
    >
      <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">
        <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
        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">
            <span
              style="color: #2fa1ff; margin-right: 5px"
              v-if="user.buyJb !== undefined"
              >{{
                (user.buyJb + user.free6 + user.free12 + user.coreJb) / 100
              }}</span
            >
            <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
            >
          </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>
</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>