gold_vue/gold-system/src/views/refund/addRefund.vue

<script setup>
import { reactive } 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";

//这是获取用户信息的接口
const adminData = ref({});
const getAdminData = async function () {
  try {
    const result = await API.post(
      "http://192.168.8.93:10010/admin/userinfo",
      {}
    );
    adminData.value = result;
    addRefund.value.adminId = adminData.value.adminId;
    console.log("请求成功", result);
    console.log("用户信息", user.value);
  } catch (error) {
    console.log("请求失败", error);
  }
};
getAdminData();

// 这是添加充值信息的表单
const addRefund = ref({
  updateType: "退款",
  allCoin: 0,
  contactId: "",
  refundGoods: "",
  freeCoin: 0,
  rechargeCoin: 0,
  taskCoin: 0,
});
// 取消按钮
const cancel = function () {
  addRefund.value = {};
  addRefund.value.updateType = "退款";
  addRefund.value.rechargeCoin = 0;
  addRefund.value.freeCoin = 0;
  addRefund.value.taskCoin = 0;
  addRefund.value.allCoin = 0;
  addRefund.value.adminId = adminData.value.adminId;
};
// 这是添加退款信息的接口
const add = async function () {
  try {
    // 发送POST请求
    const result = await API.post(
      "http://192.168.8.93:10010/refund/add",
      addRefund.value
    );
    if (result.code === 0) {
      ElMessage.error(result.msg);
      return;
    }
    console.log("请求成功", result);
    ElMessage.success("添加成功");
    // 重置表单
    addRefund.value = {};
    addRefund.value.adminId = adminData.value.adminId;
    addRefund.value.updateType = "退款";
    addRefund.value.allCoin = 0;
    addRefund.value.contactId = "";
    addRefund.value.refundGoods = "";
    addRefund.value.freeCoin = 0;
    addRefund.value.rechargeCoin = 0;
    addRefund.value.taskCoin = 0;
    user.value = {};
  } catch (error) {
    console.log("请求失败", error);
    // 在这里可以处理错误逻辑，比如显示错误提示等
  }
};
const addBefore = () => {
  Ref.value.validate(async (valid) => {
    if (valid) {
      ElMessageBox.confirm("确认添加？")
        .then(() => {
          add();
          console.log("添加成功");
          addRefund.value.allCoin = 0;
          (addRefund.value.freeCoin = 0),
            (addRefund.value.rechargeCoin = 0),
            (addRefund.value.taskCoin = 0),
            (addRefund.value = {});
        })
        .catch(() => {
          console.log("取消添加");
        });
    } else {
      //提示
      ElMessage({
        type: "error",
        message: "请检查输入内容",
      });
    }
  });
};

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

const rules = reactive({
  jwcode: [{ required: true, message: "请输入精网号", trigger: "blur" }],
  refundType: [{ required: true, message: "请选择退款类型", trigger: "blur" }],
  contactId: [{ required: true, message: "请选择退款商品", trigger: "blur" }],
  taskCoin: [{ required: true, message: "请输入任务金币", trigger: "blur" }],
  freeCoin: [{ required: true, message: "请输入免费金币", trigger: "blur" }],
  rechargeCoin: [
    { required: true, message: "请输入充值金币", trigger: "blur" },
  ],
  allCoin: [
    { required: true, message: "请选择付款方式", trigger: "blur" },
    {
      validator: (rule, value) => {
        if (value === 0) {
          return Promise.reject(new Error("总金币不能为0"));
        }
        return Promise.resolve();
      },
      trigger: "blur",
    },
  ],
});

// 查找客户信息的方法
const user = ref({});
const getUser = async function (jwcode) {
  try {
    // 发送POST请求
    const result = await API.post("http://192.168.8.93:10010/recharge/user", {
      jwcode: jwcode,
    });

    // 将响应结果存储到响应式数据中
    console.log("请求成功", result);
    // 存储表格数据
    user.value = result.data[0];
    user.value.A =
      Number(user.value.pendingRechargeTimes) +
      Number(user.value.pendingSpendTimes);
    console.log("用户信息", user.value);
    if (result.data.code === 0) {
      ElMessage.error(result.msg);
    } else {
      ElMessage.success(result.msg);
    }
  } catch (error) {
    console.log("请求失败", error);
    ElMessage.error("查询失败，请检查精网号是否正确");
    // 在这里可以处理错误逻辑，比如显示错误提示等
  }
};
const calculatedAllGold = computed(() => {
  const sum =
    Number(addRefund.value.freeCoin) +
    Number(addRefund.value.rechargeCoin) +
    Number(addRefund.value.taskCoin);
  return !isNaN(sum) ? sum : 0;
});

watch(calculatedAllGold, (newVal) => {
  addRefund.value.allCoin = newVal;
});

const AAA = computed(() => {
  return addRefund.value.jwcode;
});

watch(AAA, (newVal) => {});

// 退款类型选项
const refundType = [
  {
    value: "退款商品",
    label: "退款商品",
  },
  {
    value: "退款金币",
    label: "退款金币",
  },
];

// 根据精网号查询商品
const goods = ref([]);
const getGoods = async function (jwcode) {
  try {
    // 发送POST请求
    const result = await API.post(
      "http://192.168.8.93:10010/consume/getDeatil/" + addRefund.value.jwcode,
      {}
    );
    if (result.code === 0) {
      addRefund.value.jwcode = "";
      ElMessage.error(result.msg);
      return;
      console.log("查询失败，请检查精网号是否正确");
    }
    // 将响应结果存储到响应式数据中
    console.log("请求成功", result);
    // 存储表格数据
    goods.value = result.data;
    console.log("用户信息", goods.value);
  } catch (error) {
    console.log("请求失败", error);
    ElMessage.error("查询失败，请检查精网号是否正确");
    // 在这里可以处理错误逻辑，比如显示错误提示等
    addRefund.value.jwcode = "";
  }
};
const calculatedRechargeGoods = computed(() => {
  return (
    +addRefund.value.freeCoin +
    +addRefund.value.rechargeCoin +
    +addRefund.value.taskCoin
  );
});
watch(calculatedRechargeGoods, (newVal) => {
  addRefund.value.allCoin = newVal;
});
watch(calculatedRechargeGoods, (newVal) => {
  addRefund.value.allCoin = newVal;
  console.log("计算的总金币", newVal);
});

// 绑定两个数据

// 这是根据订单号查询消费信息的方法
const getProductByOrderCode = async function (item) {
  try {
    // 发送POST请求
    const result = await API.post(
      "http://192.168.8.93:10010/refund/searchByOrderCode?orderCode=" + item,
      {}
    );
    addRefund.value.contactId = result.data.detailId;
    addRefund.value.refundGoods = result.data.productName;
    addRefund.value.orderCode = result.data.orderCode;
    addRefund.value.taskCoin = result.data.taskCoin * -1;
    addRefund.value.freeCoin = result.data.freeCoin * -1;
    addRefund.value.rechargeCoin = result.data.rechargeCoin * -1;
    addRefund.value.allCoin =
      result.data.taskCoin * -1 +
      result.data.freeCoin * -1 +
      result.data.rechargeCoin * -1;
    console.log("请求成功", addRefund.value);
    if (result.data.code === 0) {
      ElMessage.error(result.data.msg);
    } else {
      ElMessage.success("选择成功");
    }
  } catch (error) {
    console.log("请求失败", error);
    ElMessage.error("查询失败，请检查精网号是否正确");
    // 在这里可以处理错误逻辑，比如显示错误提示等
  }
};
const handleSelectionChange = (value) => {
  getProductByOrderCode(value);
  console.log("选择的订单号", value);
  const selectedItem = goods.value.find((item) => item.detailId === value);
};
</script>

<template>
  <div style="font-weight: bold">新增退款</div>

  <el-form
    :model="addRefund"
    ref="Ref"
    :rules="rules"
    label-width="auto"
    style="max-width: 750px"
    class="form-style"
  >
    <el-form-item prop="jwcode" label="精网号">
      <el-input
        v-model="addRefund.jwcode"
        style="width: 220px"
        @change="getGoods(addRefund.jwcode)"
      />
      <el-button
        type="primary"
        @click="getUser(addRefund.jwcode)"
        style="margin-left: 20px"
        >查询</el-button
      >
    </el-form-item>
    <el-form-item prop="refundType" label="退款类型">
      <el-select
        v-model="addRefund.refundType"
        placeholder="请选择"
        style="width: 300px"
      >
        <el-option
          v-for="item in refundType"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item prop="contactId" label="商品名">
      <el-select
        v-model="addRefund.orderCode"
        placeholder="请选择"
        style="width: 300px"
        @change="handleSelectionChange"
      >
        <el-option
          v-for="item in goods"
          :key="item.value"
          :label="item.productName + item.orderCode"
          :value="item.orderCode"
        />
      </el-select>
    </el-form-item>
    <div style="display: flex; align-items: center">
      <el-form-item prop="rechargeCoin" label="充值金币" style="float: left">
        <el-input
          v-model="addRefund.rechargeCoin"
          style="width: 100px"
          disabled
        />
        <p>个</p>
      </el-form-item>
      <el-form-item
        prop="freeCoin"
        label="免费金币"
        style="margin-left: -20px; float: left"
      >
        <el-input
          v-model="addRefund.freeCoin"
          style="float: left; width: 100px"
          disabled
        />
        <p>个</p>
      </el-form-item>
      <el-form-item prop="taskCoin" label="任务金币" style="margin-left: -20px">
        <el-input
          v-model="addRefund.taskCoin"
          style="float: left; width: 100px"
          disabled
        />
        <p>个</p>
      </el-form-item>
    </div>
    <el-form-item prop="allCoin" label="退款金币总数">
      <el-input disabled v-model="addRefund.allCoin" style="width: 100px">
      </el-input>
    </el-form-item>
    <el-form-item prop="remark" label="备注">
      <el-input
        v-model="addRefund.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 @click="cancel()" 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: 1000px"
      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="历史金币总数">
            <p>{{ user.totalRechargeGold }}</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">{{
              user.buyJb + user.free6 + user.free12 + user.coreJb
            }}</span>
            <span
              style="display: inline; white-space: nowrap; color: #b1b1b1"
              v-if="user.buyJb"
              >(充值金币:{{ user.buyJb }};免费金币:{{
                user.free6 + user.free12
              }};任务金币:{{ user.coreJb }})</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="14">
          <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>