vue+elementui 房贷计算器

loan房贷计算组件

<template>
    <el-tabs type="border-card" v-model="loanType">
        <el-tab-pane label="商业贷款" name="1" class="load-card">
            <!-- 商业贷款 -->
            <el-form :model="commercialLoans" :rules="rules" ref="ruleForm1" label-width="150px" class="demo-ruleForm">
                <el-form-item label="贷款类型" prop="loanType">
                    <el-radio-group v-model="commercialLoans.loanType" size="small">
                        <el-radio-button label="1">等额本金</el-radio-button>
                        <el-radio-button label="2">等额本息</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="贷款金额(万元)" prop="totalPrice">
                    <el-input v-model.number="commercialLoans.totalPrice" placeholder="请填写贷款金额(万元)"
                              maxlength="6"></el-input>
                </el-form-item>

                <el-form-item label="期限(年)" required>
                    <el-select v-model="commercialLoans.year" placeholder="请选择期限(年)" style="width: 100%;"
                               @change="year_picker">
                        <el-option :label="g" :value="g" v-for="g in commercialLoans.year_list" :key="g"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="利率(%)" prop="interestRate">
                    <el-select v-model="commercialLoans.interestRate" placeholder="请选择利率(%)" style="width: 100%;"
                               @change="rage_picker">
                        <el-option :label="g" :value="g" v-for="(g,gI) in commercialLoans.interestRate_list" :key="gI"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitCal('ruleForm1')" style="width: 100%">计算</el-button>
                </el-form-item>
            </el-form>
            <el-card class="box-card">
                <div class="loan-rs">
                    <div>
                        <p>每月月供参考(元)：</p>
                        <p class="payment">{{commercialLoans.monthlySupply}}</p>
                    </div>
                    <div class="flex-between">
                        <div><p class="payment">{{commercialLoans.grossInterest}}</p>
                            <p>支付利息(元)：</p></div>
                        <div><p class="payment">{{commercialLoans.totalRepayment}}</p>
                            <p>还款总额(元)：</p></div>
                    </div>
                </div>
            </el-card>
        </el-tab-pane>
        <!-- 公积金贷款 -->
        <el-tab-pane label="公积金贷款" name="2" class="load-card">
            <el-form :model="accumulationFund" :rules="rules" ref="ruleForm2" label-width="150px" class="demo-ruleForm">
                <el-form-item label="贷款类型" prop="loanType">
                    <el-radio-group v-model="accumulationFund.loanType" size="small">
                        <el-radio-button label="1">等额本金</el-radio-button>
                        <el-radio-button label="2">等额本息</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="贷款金额(万元)" prop="totalPrice">
                    <el-input v-model.number="accumulationFund.totalPrice" placeholder="请填写贷款金额(万元)"
                              maxlength="6"></el-input>
                </el-form-item>

                <el-form-item label="期限(年)" prop="year">
                    <el-select v-model="accumulationFund.year" placeholder="请选择期限(年)" style="width: 100%;"
                               @change="year_picker">
                        <el-option :label="g" :value="g" v-for="(g,gI) in accumulationFund.year_list" :key="gI"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="利率(%)" prop="interestRate">
                    <el-select v-model="accumulationFund.interestRate" placeholder="请选择利率(%)" style="width: 100%;"
                               @change="rage_picker">
                        <el-option :label="g" :value="g" v-for="(g,gI) in accumulationFund.interestRate_list" :key="gI"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitCal('ruleForm2')" style="width: 100%">计算</el-button>
                </el-form-item>
            </el-form>
            <el-card class="box-card">
                <div class="loan-rs">
                    <div>
                        <p>每月月供参考(元)：</p>
                        <p class="payment">{{accumulationFund.monthlySupply}}</p>
                    </div>
                    <div class="flex-between">
                        <div><p class="payment">{{accumulationFund.grossInterest}}</p>
                            <p>支付利息(元)：</p></div>
                        <div><p class="payment">{{accumulationFund.totalRepayment}}</p>
                            <p>还款总额(元)：</p></div>
                    </div>
                </div>
            </el-card>
        </el-tab-pane>
        <!-- 组合贷款 -->
        <el-tab-pane label="组合贷款" name="3" class="load-card">
            <el-form :model="combinationLoan" :rules="rulesThree" ref="ruleForm3" label-width="160px"
                     class="demo-ruleForm">
                <el-form-item label="贷款类型" prop="loanType">
                    <el-radio-group v-model="combinationLoan.loanType" size="small">
                        <el-radio-button label="1">等额本金</el-radio-button>
                        <el-radio-button label="2">等额本息</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="商贷贷款金额(万元)" prop="zhs_Price">
                    <el-input v-model.number="combinationLoan.zhs_Price" placeholder="请填写商贷贷款金额(万元)"
                              maxlength="6"></el-input>
                </el-form-item>
                <el-form-item label="商贷利率(%)" prop="zhs_interestRate">
                    <el-select v-model="combinationLoan.zhs_interestRate" placeholder="请选择利率(%)" style="width: 100%;"
                               @change="((val)=>{rage_picker(val, 'commercialLoans_interestRate')}) ">
                        <el-option :label="g" :value="g" v-for="(g,gI) in combinationLoan.zhs_interestRate_list"
                                   :key="gI"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="公积金贷款金额(万元)" prop="zhg_Price">
                    <el-input v-model.number="combinationLoan.zhg_Price" placeholder="请填写公积金贷款金额(万元)"
                              maxlength="6"></el-input>
                </el-form-item>
                <el-form-item label="公积金利率(%)" prop="zhg_interestRate">
                    <el-select v-model="combinationLoan.zhg_interestRate" placeholder="请选择公积金利率(%)" style="width: 100%;"
                               @change="((val)=>{rage_picker(val, 'accumulationFund_interestRate')})">
                        <el-option :label="g" :value="g" v-for="(g,gI) in combinationLoan.zhg_interestRate_list"
                                   :key="gI"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="期限(年)" required>
                    <el-select v-model="combinationLoan.year" placeholder="请选择期限(年)" style="width: 100%;"
                               @change="year_picker">
                        <el-option :label="g" :value="g" v-for="(g,gI) in combinationLoan.year_list" :key="gI"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitCal('ruleForm3')" style="width: 100%">计算</el-button>
                </el-form-item>
            </el-form>

            <el-card class="box-card">
                <div class="loan-rs">
                    <div>
                        <p>每月月供参考(元)：</p>
                        <p class="payment">{{combinationLoan.monthlySupply}}</p>
                    </div>
                    <div class="flex-between">
                        <div><p class="payment">{{combinationLoan.grossInterest}}</p>
                            <p>支付利息(元)：</p></div>
                        <div><p class="payment">{{combinationLoan.totalRepayment}}</p>
                            <p>还款总额(元)：</p></div>
                    </div>
                </div>
            </el-card>
        </el-tab-pane>
    </el-tabs>
</template>

<script type="text/babel">
    import Vue from 'vue'
    import * as CFHL from '@/common/calculatorForHouseLoan' ;

    export default Vue.component('Loan', {
        data() {
            const totalPrice = (rule, value, callback) => { // 判断手机号是否正确
                if (value) {
                    value = parseInt(value);
                    let regTest = /^0/
                    if (regTest.test(value) || isNaN(value)) {
                        callback(new Error('请输入正整数'))
                    } else {
                        if (value * 1 > 200000) {
                            // value = 200000;
                            callback(new Error('请不要输入超过200000万元'))
                        } else {
                            callback();
                        }
                    }
                } else {
                    callback(new Error('请输入贷款金额'));
                }
            };

            return {
                loanType: '1',
                commercialLoans: {
                    monthlySupply: 0,//月供
                    grossInterest: 0,//总利息
                    totalRepayment: 0,//还款总额
                    totalPrice: '',//贷款金额
                    loanType: '2',//商贷贷款类型 1等额本金 2等额本息
                    year: '30',//商贷期限
                    year_list: [],//商贷期限列表
                    interestRate: '4.9%',//商贷默认利率
                    interestRate_index: 0,
                    interestRate_list: ['4.9%', '3.43%', '3.675%', '3.92%', '4.17%', '4.41%', '4.66%', '5.15%', '5.39%', '5.88%', '6.37%'],//商贷利率列表
                },
                accumulationFund: {
                    monthlySupply: 0,//月供
                    grossInterest: 0,//总利息
                    totalRepayment: 0,//还款总额
                    totalPrice: '',//贷款金额
                    loanType: '2',//公积金贷款类型 1等额本金 2等额本息
                    year: '30',//公积金期限
                    year_list: [],//公积金期限列表
                    interestRate: '3.25%',//公积金默认利率
                    interestRate_index: 0,
                    interestRate_list: ['3.25%', '3.58%', '3.90%', '4.23%'],//公积金利率列表
                },
                combinationLoan: {
                    monthlySupply: 0,//月供
                    grossInterest: 0,//总利息
                    totalRepayment: 0,//还款总额
                    zhs_Price: '',
                    zhg_Price: '',
                    loanType: '2',//组合贷贷款类型 1等额本金 2等额本息
                    year: '30',//组合期限
                    year_list: [],//组合期限列表
                    zhs_interestRate: '4.9%',//商贷默认利率
                    zhs_interestRate_index: 0,
                    zhs_interestRate_list: ['4.9%', '3.43%', '3.675%', '3.92%', '4.17%', '4.41%', '4.66%', '5.15%', '5.39%', '5.88%', '6.37%'],//商贷利率列表
                    zhg_interestRate: '3.25%',//公积金默认利率
                    zhg_interestRate_index: 0,
                    zhg_interestRate_list: ['3.25%', '3.58%', '3.90%', '4.23%'],//公积金利率列表
                },
                rules: {
                    totalPrice: [
                        {required: true, message: '请输入贷款金额', trigger: 'blur'},
                        {validator: totalPrice, trigger: 'blur'},
                    ],
                    year: [
                        {required: true, message: '请选择期限', trigger: 'change'}
                    ],
                    interestRate: [
                        {required: true, message: '请选择利率', trigger: 'change'}
                    ],
                },
                rulesThree: {
                    zhs_Price: [
                        {required: true, message: '请输入贷款金额', trigger: 'blur'},
                        {validator: totalPrice, trigger: 'blur'},
                    ],
                    zhg_Price: [
                        {required: true, message: '请输入贷款金额', trigger: 'blur'},
                        {validator: totalPrice, trigger: 'blur'},
                    ],
                    year: [
                        {required: true, message: '请选择期限', trigger: 'change'}
                    ],
                    zhs_interestRate: [
                        {required: true, message: '请选择商贷利率', trigger: 'change'}
                    ],
                    zhg_interestRate: [
                        {required: true, message: '请选择公积金利率', trigger: 'change'}
                    ],
                }
            }
        },
        mounted() {
            this.initYearList();
        },
        methods: {
            initYearList() {
                let yearList = [];
                for (var i = 0; i < 30; i++) {
                    yearList.push(i + 1);
                }
                this.commercialLoans.year_list = yearList;
                this.accumulationFund.year_list = yearList;
                this.combinationLoan.year_list = yearList;
                console.log(this.combinationLoan.year_list);
            },
            submitCal(formName) {
                //等额本息    [贷款本金×月利率×（1+月利率）^还款月数]÷[（1+月利率）^还款月数－1]
                let that = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        that.calculateLoan();
                        that.$refs[formName].clearValidate();
                    } else {
                        return false;
                    }
                });
            },

            calculateLoan() {
                let commercialLoans = this.commercialLoans;
                let accumulationFund = this.accumulationFund;
                let combinationLoan = this.combinationLoan;
                if (this.loanType == '1') {
                    let detail = CFHL.calculate(commercialLoans.totalPrice * 10000, commercialLoans.interestRate.replace('%', '') / 100 / 12, commercialLoans.year * 12);
                    if (commercialLoans.loanType == '2') {//等额本息
                        this.commercialLoans.monthlySupply = detail.repayPerMouAi;
                        this.commercialLoans.grossInterest = detail.totalInterestAi;
                        this.commercialLoans.totalRepayment = detail.totalRepayAi;
                    } else {//等额本金
                        this.commercialLoans.monthlySupply = detail.repayPerMouthAp;
                        this.commercialLoans.grossInterest = detail.totalInterestAp;
                        this.commercialLoans.totalRepayment = detail.totalRepayPriceAp;
                    }
                } else if (this.loanType == '2') {
                    let detail = CFHL.calculate(accumulationFund.totalPrice * 10000, accumulationFund.interestRate.replace('%', '') / 100 / 12, accumulationFund.year * 12);
                    if (accumulationFund.loanType == '2') {//等额本息
                        this.accumulationFund.monthlySupply = detail.repayPerMouAi;
                        this.accumulationFund.grossInterest = detail.totalInterestAi;
                        this.accumulationFund.totalRepayment = detail.totalRepayAi;
                    } else {//等额本金
                        this.accumulationFund.monthlySupply = detail.repayPerMouthAp;
                        this.accumulationFund.grossInterest = detail.totalInterestAp;
                        this.accumulationFund.totalRepayment = detail.totalRepayPriceAp;
                    }
                } else if (this.loanType == '3') {

                    //商贷
                    var detail1 = CFHL.calculate(combinationLoan.zhs_Price * 10000, combinationLoan.zhs_interestRate.replace('%', '') / 100 / 12, combinationLoan.year * 12);
                    //公积金
                    var detail2 = CFHL.calculate(combinationLoan.zhg_Price * 10000, combinationLoan.zhg_interestRate.replace('%', '') / 100 / 12, combinationLoan.year * 12);
                    if (combinationLoan.loanType == '2') {//等额本息
                        this.combinationLoan.monthlySupply = detail1.repayPerMouAi * 1 + detail2.repayPerMouAi * 1;
                        this.combinationLoan.grossInterest = detail1.totalInterestAi * 1 + detail2.totalInterestAi * 1;
                        this.combinationLoan.totalRepayment = detail1.totalRepayAi * 1 + detail2.totalRepayAi * 1;
                    } else {//等额本金
                        this.combinationLoan.monthlySupply = detail1.repayPerMouthAp * 1 + detail2.repayPerMouthAp * 1;
                        this.combinationLoan.grossInterest = detail1.totalInterestAp * 1 + detail2.totalInterestAp * 1;
                        this.combinationLoan.totalRepayment = detail1.totalRepayPriceAp * 1 + detail2.totalRepayPriceAp * 1;
                    }
                }
            },
            year_picker(e) {
                //选择年份的时候切换利率列表
                var arr1 = [], arr2 = [];
                if (this.loanType == '1') {//商贷期限
                    this.commercialLoans.year = e;
                    if (this.commercialLoans.year == 1) {
                        arr1 = ['4.35%', '3.045%', '3.262%', '3.48%', '3.698%', '3.915%', '4.132%', '4.568%', '4.785%', '5.22%', '5.655%']
                    } else if (this.commercialLoans.year > 1 && this.commercialLoans.year <= 5) {
                        arr1 = ['4.75%', '3.325%', '3.563%', '3.8%', '4.037%', '4.275%', '4.513%', '4.955%', '5.225%', '5.7%', '6.175%']
                    } else {
                        arr1 = ['4.9%', '3.43%', '3.675%', '3.92%', '4.17%', '4.41%', '4.66%', '5.15%', '5.39%', '5.88%', '6.37%']
                    }
                    this.commercialLoans.interestRate_list = arr1;
                    this.commercialLoans.interestRate = arr1[this.commercialLoans.interestRate_index];
                } else if (this.loanType == '2') {//公积金期限
                    this.accumulationFund.year = e;
                    if (this.accumulationFund.year <= 5) {
                        arr2 = ['2.75%', '3.025%', '3.3%', '3.575%']
                    } else {
                        arr2 = ['3.25%', '3.58%', '3.90%', '4.23%']
                    }
                    this.accumulationFund.interestRate_list = arr2;
                    this.accumulationFund.interestRate = arr2[this.accumulationFund.interestRate_index];
                } else if (this.loanType == '3') {//组合贷期限
                    this.combinationLoan.year = e;
                    if (this.combinationLoan.year == 1) {
                        arr1 = ['4.35%', '3.045%', '3.262%', '3.48%', '3.698%', '3.915%', '4.132%', '4.568%', '4.785%', '5.22%', '5.655%']
                        arr2 = ['2.75%', '3.025%', '3.3%', '3.575%']
                    } else if (this.combinationLoan.year > 1 && this.combinationLoan.year <= 5) {
                        arr1 = ['4.75%', '3.325%', '3.563%', '3.8%', '4.037%', '4.275%', '4.513%', '4.955%', '5.225%', '5.7%', '6.175%']
                        arr2 = ['2.75%', '3.025%', '3.3%', '3.575%']
                    } else {
                        arr1 = ['4.9%', '3.43%', '3.675%', '3.92%', '4.17%', '4.41%', '4.66%', '5.15%', '5.39%', '5.88%', '6.37%']
                        arr2 = ['3.25%', '3.58%', '3.90%', '4.23%']
                    }
                    this.combinationLoan.zhs_interestRate_list = arr1;
                    this.combinationLoan.zhs_interestRate = arr1[this.combinationLoan.zhs_interestRate_index];
                    this.combinationLoan.zhg_interestRate_list = arr2;
                    this.combinationLoan.zhg_interestRate = arr2[this.combinationLoan.zhg_interestRate_index];
                }
            },
            rage_picker(e, type) {
                if (this.loanType == '1') {//商贷利率
                    this.commercialLoans.interestRate = e;
                    this.commercialLoans.interestRate_index = this.commercialLoans.interestRate_list.findIndex((r) => {
                        return r == e
                    });
                } else if (this.loanType == '2') {//公积金利率
                    this.accumulationFund.interestRate = e;
                    this.accumulationFund.interestRate_index = this.commercialLoans.interestRate_index.findIndex((r) => {
                        return r == e
                    });
                } else if (this.loanType == '3') {
                    if (type == 'commercialLoans_interestRate') {//组合贷商贷利率
                        this.combinationLoan.zhs_interestRate = e;
                        this.combinationLoan.zhs_interestRate_index = this.commercialLoans.zhs_interestRate_index.findIndex((r) => {
                            return r == e
                        });
                    } else if (type == 'accumulationFund_interestRate') {//组合贷公积金利率
                        this.combinationLoan.zhg_interestRate = e;
                        this.combinationLoan.zhg_interestRate_index = this.commercialLoans.zhg_interestRate_index.findIndex((r) => {
                            return r == e
                        });
                    }

                }

            },
            resetForm() {
                this.$refs['ruleForm1'].resetFields();
                this.$refs['ruleForm2'].resetFields();
                this.$refs['ruleForm3'].resetFields();
                this.commercialLoans.monthlySupply = 0;
                this.commercialLoans.grossInterest = 0;
                this.commercialLoans.totalRepayment = 0;
                this.accumulationFund.monthlySupply = 0;
                this.accumulationFund.grossInterest = 0;
                this.accumulationFund.totalRepayment = 0;
                this.combinationLoan.monthlySupply = 0;
                this.combinationLoan.grossInterest = 0;
                this.combinationLoan.totalRepayment = 0;
            }
        }
    })
</script>

<style scoped lang="scss">
    /*@import '~@/assets/main.scss';*/

    .load-card {
        display: flex;
        justify-content: space-around;
    }

    .flex-between {
        display: flex;
        justify-content: space-between;
    }

    .loan-rs {
        padding: 20px;
        min-width: 280px;
        font-size: 18px;

        .payment {
            font-size: 24px;
            font-weight: bold;
        }
    }
</style>

房贷计算js

calculatorForHouseLoan.js的代码，放在common目录下。

'use strict';

/**
 * 等额本金、等额本息还款方式详细对比
 * 带有Ai后缀为等额本息还款方式，即average interest
 * 带有Ap后缀为等额本金还款方式，即average principal
 */

// 格式化金额，保留两位小数
const formatFloat = function (input, decimals) {
  let formatFloatNumb = Math.round(input * Math.pow(10, decimals)) / Math.pow(10, decimals);
  return formatFloatNumb.toFixed(decimals);
};

// 涉及计算公式
const loanFormula = {
  // 等额本息每月还款金额
  getRepayPerMouPriceAi: function (loanTotal, interestRatePerMou, totalMouths) {
    /**
     * @param loanTotal         总贷款
     * @param interestRatePerMou   月利率
     * @param totalMouths            总月数
     * 每月还款金额 = [总贷款 × 月利率 × (1 + 月利率)^总月数] ÷ [(1 + 月利率)^总月数 - 1]
     */

    // 简化公式，创建变量x
    let x = Math.pow((1 + interestRatePerMou), totalMouths);

    return (loanTotal * interestRatePerMou * x / (x - 1));
  },

  // 等额本息第i个月还款中利息部分
  getRepayInterestPerMouAi: function (i, loanTotal, interestRatePerMou, totalMouths) {
    /**
     * @param i   第(i + 1)个月
     * 第i个月还款中利息部分 = 总贷款 × 月利率 × {(1 + 月利率)^i - (1 + 月利率)^总月数 * [(1 + 月利率)^i - 1] ÷ [(1 + 月利率)^总月数 - 1]}
     */

    // 简化公式，创建变量x、y
    let [x, y] = [Math.pow((1 + interestRatePerMou), i), Math.pow((1 + interestRatePerMou), totalMouths)];

    return (loanTotal * interestRatePerMou * (x - y * (x - 1) / (y - 1)));
  }
};

const calculate = function (loanTotal, interestRatePerMou, totalMouths) {

  // 每月需还利息、本金、剩余待还本金、已还总金额
  let repayPerMouObj = {
    // 等额本息
    repayPerMouObjAi: {
      repayInterestPerMouArrAi: [], // 利息
      repayPrincipalPerMouArrAi: [], // 本金
      balanceArrAi: [], // 待还本金
      totalRepaidArrAi: [], // 月供累加()
      totalRepayPerMouArrAi: []
    },

    // 等额本金
    repayPerMouObjAp: {
      repayInterestPerMouArrAp: [],
      repayPerMouPriceArrAp: [],
      balanceArrAp: [],
      totalRepaidArrAp: [],
      totalRepayPerMouArrAp: []
    }
  };

  // 等额本息月均还本带息
  let repayPerMouAi = loanFormula.getRepayPerMouPriceAi(loanTotal, interestRatePerMou, totalMouths);

  // 等额本息初始化剩余待还本金
  let balancePerMouAi = loanTotal;

  // 等额本息初始化已还总金额
  let totalRepaidPerMouAi = 0;

  // 等额本金每月还款本金
  let repayPrincipalPerMouAp = loanTotal / totalMouths;

  // 等额本金每月还款递减金额
  let decreasePerMouAp = repayPrincipalPerMouAp * interestRatePerMou;

  // 等额本金初始化剩余待还本金
  let balancePerMouAp = loanTotal;

  // 等额本金初始化已还总金额
  let totalRepaidPerMouAp = 0;

  const getRepayPerMouObj = function () {
    for (let i = 0; i < totalMouths; i++) {
      // 等额本息第(i+1)个月需还利息
      let repayInterestPerMouAi = loanFormula.getRepayInterestPerMouAi(i, loanTotal, interestRatePerMou, totalMouths);

      // 等额本息第(i+1)个月需还本金：月均还本带息 - 利息部分
      let repayPrincipalPerMouAi = repayPerMouAi - repayInterestPerMouAi;

      // 等额本息第(i+1)个月待还本金：第i个月剩余待还本金 - 第(i + 1)个月所还本金，即上月剩余待还本金 - 当月已还本金
      balancePerMouAi = balancePerMouAi - repayPrincipalPerMouAi;

      // 等额本息第(i+1)个月已还总金额
      totalRepaidPerMouAi = totalRepaidPerMouAi + repayPerMouAi;

      // 等额本金第(i+1)个月若提前还款实际支付
      let totalRepayPerMouAi = balancePerMouAi + totalRepaidPerMouAi;

      // 拼接等额本息数组，包括各月份需还利息、本金及剩余待还本金
      repayPerMouObj.repayPerMouObjAi.repayInterestPerMouArrAi.push(formatFloat(repayInterestPerMouAi, 4));
      repayPerMouObj.repayPerMouObjAi.repayPrincipalPerMouArrAi.push(formatFloat(repayPrincipalPerMouAi, 4));
      repayPerMouObj.repayPerMouObjAi.balanceArrAi.push(formatFloat(balancePerMouAi, 4));
      repayPerMouObj.repayPerMouObjAi.totalRepaidArrAi.push(formatFloat(totalRepaidPerMouAi, 4));
      repayPerMouObj.repayPerMouObjAi.totalRepayPerMouArrAi.push(formatFloat(totalRepayPerMouAi, 4));

      // 等额本金第(i+1)个月需还利息
      // let repayInterestPerMouAp = loanTotal * interestRatePerMou * (1 - (i - 1) / totalMouths);
      let repayInterestPerMouAp = loanTotal * interestRatePerMou * (1 - (i - 0) / totalMouths);

      // 等额本金第(i+1)个月还本带息
      let repayPerMouPriceAp = repayPrincipalPerMouAp + repayInterestPerMouAp;

      // 等额本金第(i+1)个月剩余待还本金
      balancePerMouAp = balancePerMouAp - repayPrincipalPerMouAp;

      // 等额本金第(i+1)个月总还本带息
      totalRepaidPerMouAp = totalRepaidPerMouAp + repayPerMouPriceAp;

      // 等额本金第(i+1)个月若提前还款实际支付
      let totalRepayPerMouAp = balancePerMouAp + totalRepaidPerMouAp;

      // 拼接等额本金数组，包括各月份需还利息、本金及剩余待还本金
      repayPerMouObj.repayPerMouObjAp.repayInterestPerMouArrAp.push(formatFloat(repayInterestPerMouAp, 4));
      repayPerMouObj.repayPerMouObjAp.repayPerMouPriceArrAp.push(formatFloat(repayPerMouPriceAp, 4));
      repayPerMouObj.repayPerMouObjAp.balanceArrAp.push(formatFloat(balancePerMouAp, 4));
      repayPerMouObj.repayPerMouObjAp.totalRepaidArrAp.push(formatFloat(totalRepaidPerMouAp, 4));
      repayPerMouObj.repayPerMouObjAp.totalRepayPerMouArrAp.push(formatFloat(totalRepayPerMouAp, 4));
    }
    return repayPerMouObj;
  };
  getRepayPerMouObj();

  // 等额本息总还本带息： 月均还本带息 × 总月数
  let totalRepayAi = repayPerMouAi * totalMouths;

  // 等额本息总还款利息： 总还本带息 - 总贷款额
  let totalInterestAi = totalRepayAi - loanTotal;

  // 等额本金总还款金额（直接从等额本金数组中获取）
  const totalRepayPriceAp = repayPerMouObj.repayPerMouObjAp.totalRepaidArrAp[repayPerMouObj.repayPerMouObjAp.totalRepaidArrAp.length - 1];

  // 等额本金总还款利息： 总还本带息 - 总贷款额
  const totalInterestAp = totalRepayPriceAp - loanTotal;

  return {
    loanTotal: formatFloat(loanTotal, 0), //贷款总额
    totalInterestAi: formatFloat(totalInterestAi, 0), //等额本息总还款利息
    totalRepayAi: formatFloat(totalRepayAi, 0), //总还本带息
    repayPerMouAi: formatFloat(repayPerMouAi, 0), //等额本息月均还本带息
    totalInterestAp: formatFloat(totalInterestAp, 0), //等额本金总还款利息
    totalRepayPriceAp: formatFloat(totalRepayPriceAp, 0), //等额本金总还款金额
    //等额本金每月所还本金
    repayPrincipalPerMouAp: formatFloat(repayPrincipalPerMouAp, 0),
    //等额本金第一个月还款
    repayPerMouthAp: formatFloat(repayPerMouObj.repayPerMouObjAp.repayPerMouPriceArrAp[0], 0),
    //之后每个月递减额
    decreasePerMouAp: formatFloat(decreasePerMouAp, 0),
    //等额本息详情
    repayPerMouObjAi: repayPerMouObj.repayPerMouObjAi,
    //等额本金详情
    repayPerMouObjAp: repayPerMouObj.repayPerMouObjAp
  }

};

module.exports = {
  calculate: calculate
};

应用

<el-dialog
        title="房贷计算器"
        :visible.sync="showCalculatorDialog"
        width="65%" :before-close="handleClose">
    <loan ref="loan"></loan>
</el-dialog>

handleClose(){
   this.$refs['loan'].resetForm();
   this.showCalculatorDialog = false;
},