cashier-web/src/views/tool/Instead/components/discount.vue

<template>
  <el-dialog width="400px" :title="title" v-model="show">
    <div class="u-p-15">
      <div class="u-m-t-20">
        <el-form label-width="90px" label-position="left">
          <el-form-item label="应付金额">
            <div class="color-red u-font-18 font-600">￥{{ form.money }}</div>
            <!-- <el-input :value="form.money" disabled> </el-input> -->
          </el-form-item>
          <el-form-item label="优惠类型" v-if="shopUser.isShopAdmin">
            <el-radio-group v-model="discountType">
              <el-radio-button label="金额" :value="0"></el-radio-button>
              <el-radio-button label="折扣" :value="1"></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="减免金额" v-if="discountType == 0">
            <el-input-number
              v-model="form.reduceMoney"
              clearable
              autofocus
              type="number"
              @change="init('reduceMoney')"
            >
              <template #append>元</template>
            </el-input-number>
          </el-form-item>

          <el-form-item label="优惠折扣" v-if="discountType == 1">
            <el-input-number
              v-model="form.discount"
              :step="1"
              step-strictly
              type="number"
              @change="init('discount')"
            >
              <template #append>%</template>
            </el-input-number>
            <span>%</span>
          </el-form-item>
          <el-form-item label="实收金额">
            <el-input
              v-model="form.curretnMoney"
              type="number"
              clearable
              disabled
              @keyup.enter="init('curretnMoney')"
              @blur="init('curretnMoney')"
            >
              <template #append>元</template>
            </el-input>
          </el-form-item>
          <div class="u-flex u-row-center u-m-t-50">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="confirm">确定</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </el-dialog>
</template>
<script setup>
import { useUserStore } from "@/store/modules/user";
import { ElMessage } from "element-plus";
const shopUser = useUserStore();

function toFixedNoRounding(num) {
  // 转换为字符串
  var numStr = num.toString();
  // 分割整数部分和小数部分
  var parts = numStr.split(".");
  // 如果小数部分长度大于2，则截取前两位
  if (parts[1] && parts[1].length > 2) {
    parts[1] = parts[1].slice(0, 2);
  }
  // 拼接回数字字符串并返回
  return parts.join(".");
}
//折扣类型
const discountType = ref(1);

const props = defineProps({
  title: {
    type: String,
    default: "优惠金额",
  },
  value: {
    type: [String, Number],
    default: 0,
  },
});

const state = reactive({
  form: {
    money: 0,
    discount: 100,
    reduceMoney: 0,
    curretnMoney: 0,
  },
  number: "0",
  show: false,
});
const { form, number, show } = toRefs(state);
function init(key) {
  const { money, reduceMoney, discount, curretnMoney } = form.value;
  if (key == "reduceMoney") {
    if (reduceMoney < 0) {
      ElMessage.error("减免金额不能小于0");
      form.value.reduceMoney = 0;
    }
    if (reduceMoney > money) {
      ElMessage.error("减免金额不能大于总金额");
      form.value.reduceMoney = money;
    }
    form.value.curretnMoney = (money - form.value.reduceMoney).toFixed(2);
    form.value.discount = toFixedNoRounding(((form.value.curretnMoney / money) * 100).toFixed(3));
    return;
  }
  if (key == "discount") {
    if (discount < 0) {
      ElMessage.error("折扣不能小于0");
      form.value.discount = 0;
    }
    if (discount > 100) {
      ElMessage.error("折扣不能大于100");
      form.value.discount = 100;
    }
    form.value.curretnMoney = (money * (form.value.discount / 100)).toFixed(2);
    form.value.reduceMoney = ((money * (100 - form.value.discount)) / 100).toFixed(2);
    return;
  }
  if (key == "curretnMoney") {
    if (curretnMoney < 0) {
      ElMessage.error("实收金额不能小于0");
      form.value.curretnMoney = 0;
    }
    if (curretnMoney > money) {
      ElMessage.error("实收金额不能大于总金额");
      form.value.curretnMoney = form.value.money;
    }
    form.value.reduceMoney = (money - form.value.curretnMoney).toFixed(2);
    form.value.discount = toFixedNoRounding(((form.value.curretnMoney / money) * 100).toFixed(3));
    return;
  }
  form.value.curretnMoney = ((money * discount) / 100).toFixed(2);
  form.value.reduceMoney = (money - form.value.curretnMoney).toFixed(2);
}

const emits = defineEmits(["confirm"]);
function confirm() {
  console.log(form.value);
  if (discountType.value == 1) {
    emits("confirm", { discount: form.value.discount });
  } else {
    emits("confirm", { discountAmount: form.value.reduceMoney });
  }
  close();
}
function open(data) {
  console.log(data);
  form.value.money = data.amount * 1;
  form.value.discount = data.discount ? toFixedNoRounding(data.discount.toFixed(3)) : 100;
  show.value = true;
  init();
}
function close() {
  show.value = false;
}
onMounted(() => {
  number.value = `${props.value}`;
});
defineExpose({
  close,
  open,
});
</script>
    
  <style  lang="scss" scoped>
.codeImg {
  width: 160px;
  border: 1px solid rgb(220, 223, 230);
  height: 160px;
}
:deep(.el-input .el-input__inner::-webkit-inner-spin-button) {
  -webkit-appearance: none;
  margin: 0;
}

:deep(.el-input .el-input__inner::-webkit-outer-spin-button) {
  -webkit-appearance: none;
  margin: 0;
}
</style>