elizebeth/src/xt_pages/components/Computed/index_1.vue

<template>
  <div>
    <div style="margin-top: 10px">合计: {{ new_total || total_money }}元</div>
    <div style="margin-top: 10px">
      <span
        >优惠率:<el-input
          style="width: 100px"
          v-model="rate_of_concession"
          @input="addressChange"
        ></el-input
        >%</span
      >

      <span
        >优惠金额:<el-input
          style="width: 100px"
          v-model="discount_amount"
          @input="count_discount"
        ></el-input
      ></span>

      <span
        >本次付款:<el-input
          style="width: 100px"
          v-model="payment"
          @input="count_payment"
        ></el-input
      ></span>

      <span
        >本次欠款:<el-input
          style="width: 100px"
          v-model="arrearage"
          @input="count_arrearage"
        ></el-input
      ></span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    total_price: {
      type: Number,
      default: 1000,
    },
  },
  data() {
    return {
      rate_of_concession: 0,
      discount_amount: 0,
      total_money: this.$props.total_price,
      new_total: 0,
      payment:0,
      arrearage:0
    };
  },
  created() {
    this.addressChange();
  },

  methods: {
    addressChange() {
      this.new_total = (
        this.total_money *
        (100 - this.rate_of_concession) *
        0.01
      ).toFixed(2);
      this.discount_amount = (this.total_money - this.new_total).toFixed(2);
      console.log(this.discount_amount);
    },

    count_discount() {
      this.rate_of_concession = (
        this.discount_amount /
        (this.total_money * 0.01)
      ).toFixed(2);
      this.new_total = this.total_money - this.discount_amount;
    },
    count_payment() {
        if(this.new_total){
            this.arrearage = this.new_total - this.payment
        }

    },

    count_arrearage() {
         if(this.new_total){
            this.payment = this.new_total - this.arrearage
        }

    },
  },
};
</script>

<style scoped>
</style>