management/src/views/tool/Instead/components/discount.vue

<template>
  <el-dialog width="400px" :title="title" :visible.sync="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="减免金额">
            <el-input
              v-model="form.reduceMoney"
              clearable
              autofocus
              type="number"
              @keyup.enter.native="init('reduceMoney')"
              @blur="init('reduceMoney')"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="优惠折扣">
            <el-input
              v-model="form.discount"
              type="number"
              @keyup.enter.native="init('discount')"
              @blur="init('discount')"
            >
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
          <el-form-item label="实收金额">
            <el-input
              v-model="form.curretnMoney"
              type="number"
              clearable
              @keyup.enter.native="init('curretnMoney')"
              @blur="init('curretnMoney')"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <div class="u-flex u-row-center u-m-t-50">
            <el-button size="medium" @click="close">取消</el-button>
            <el-button size="medium"  type="primary" @click="confirm"
              >确定</el-button
            >
          </div>
        </el-form>
      </div>
    </div>
  </el-dialog>
</template>
    <script>
    
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('.');
}
export default {
  props: {
    title: {
      type: String,
      default: "优惠金额",
    },
    value: {
      type: [String, Number],
      default: 0,
    },
  },
  data() {
    return {
      form: {
        money: 0,
        discount: 100,
        reduceMoney: 0,
        curretnMoney: 0,
      },
      number: "0",
      show: false,
    };
  },
  watch: {},
  methods: {
    // init(key) {
    //   const { money, reduceMoney, discount, curretnMoney } = this.form;
    //   if (key == "reduceMoney") {
    //     this.form.curretnMoney = (money - reduceMoney).toFixed(2);
    //     this.form.discount = ((this.form.curretnMoney / money) * 100).toFixed(
    //       2
    //     );
    //     return;
    //   }
    //   if (key == "discount") {
    //     this.form.curretnMoney = ((money * discount) / 100).toFixed(2);
    //     this.form.reduceMoney = (money - this.form.curretnMoney).toFixed(2);
    //     return;
    //   }
    //   if (key == "curretnMoney") {
    //     this.form.reduceMoney = (money - curretnMoney).toFixed(2);
    //     this.form.discount = ((this.form.curretnMoney / money) * 100).toFixed(
    //       2
    //     );
    //     return;
    //   }
    //   this.form.curretnMoney = ((money * discount) / 100).toFixed(2);
    //   this.form.reduceMoney = (money - this.form.curretnMoney).toFixed(2);
    // },
    init(key) {
      const { money, reduceMoney, discount, curretnMoney } = this.form;
      if (key == "reduceMoney") {
        if (reduceMoney < 0) {
          this.$message.error("减免金额不能小于0");
          this.form.reduceMoney = 0;
        }
        if (reduceMoney > money) {
          this.$message.error("减免金额不能大于总金额");
          this.form.reduceMoney = money;
        }
        this.form.curretnMoney = (money - this.form.reduceMoney).toFixed(2);
        this.form.discount =toFixedNoRounding(((this.form.curretnMoney / money) * 100).toFixed(3) ) 
        return;
      }
      if (key == "discount") {
        if (discount < 0) {
          this.$message.error("折扣不能小于0");
          this.form.discount = 0;
        }
        if (discount > 100) {
          this.$message.error("折扣不能大于100");
          this.form.discount = 100;
        }
        this.form.curretnMoney = ((money * this.form.discount) / 100).toFixed(
          2
        );
        this.form.reduceMoney = (
          (money * (100 - this.form.discount)) /
          100
        ).toFixed(2);
        return;
      }
      if (key == "curretnMoney") {
        if (curretnMoney < 0) {
          this.$message.error("实收金额不能小于0");
          this.form.curretnMoney = 0;
        }
        if (curretnMoney > money) {
          this.$message.error("实收金额不能大于总金额");
          this.form.curretnMoney = this.form.money;
        }
        this.form.reduceMoney =  (money - this.form.curretnMoney).toFixed(2);
        this.form.discount =toFixedNoRounding( ((this.form.curretnMoney / money) * 100).toFixed(3) );
        return;
      }
      this.form.curretnMoney = ((money * discount) / 100).toFixed(2);
      this.form.reduceMoney = (money - this.form.curretnMoney).toFixed(2);
    },
    changeKey(key, val) {
      this[key] = val;
    },

    confirm() {
      this.$emit("confirm", (this.form.discount / 100));
      this.close();
    },
    open(data) {
      console.log(data);
      this.form.money = data.amount*1;
      this.form.discount = data.discount?toFixedNoRounding(data.discount.toFixed(3)):100;
      this.show = true;
      this.init();
    },
    close() {
      this.show = false;
    },
  },
  mounted() {
    this.number = `${this.value}`;
  },
};
</script>
    
  <style  lang="scss" scoped>
.codeImg {
  width: 160px;
  border: 1px solid rgb(220, 223, 230);
  height: 160px;
}
::v-deep .el-input .el-input__inner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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