JavaScript信贷模拟器Class封装实现代码复用及方法调用问题求助

解决方案 #

核心调整点 #

• 调整Clientes类方法逻辑，新增客户ID关联能力，calcularCuotas方法可直接读取已存储的客户数据，无需重复传参
• 计算月供后自动将月供值、完整还款计划追加到对应客户的档案对象中
• 修正原代码每次提交都新建Clientes实例导致客户数据无法持久存储的问题
• 修复原选择器#tftable,tbody的语法错误

修改后代码 #

类定义与全局变量部分

// 全局实例化Clientes，保证所有客户数据存在同一个实例里
const clienteGestor = new Clientes();
const datosTabla = document.querySelector("#tftable tbody");
let tasas = cambiarValorTasas() 
let planesVisible = false;

class Clientes {
    constructor (){
        this.clients = []
    }
    // 新增返回新客户ID，方便后续关联操作
    creacionClientes(nombre, apellido, email, monto, plazo, tasas){
        const newClient = {
            id: Date.now(),
            nombre,
            apellido,
            email,
            monto,
            plazo,
            tasas,
            pagoMensual: 0, // 月供字段
            planPagos: [] // 完整还款计划字段
        };
        this.clients.push(newClient);
        return newClient.id;
    }
    // 仅需传入客户ID即可完成计算
    calcularCuotas(clientId){
        const client = this.clients.find(item => item.id === clientId);
        if(!client) return;
        
        let {monto, tasas, plazo: plazos} = client;
        let hoy = new Date()
        let pagoMensual = 0;
        let pagoAmortizacion = 0;
        let pagosIntereses = 0;
        pagoMensual = monto * (Math.pow(1+tasas/100, plazos)*tasas/100)/(Math.pow(1+tasas/100, plazos)-1);
        
        // 写入月供到客户档案
        client.pagoMensual = Number(pagoMensual.toFixed(2));
        client.planPagos = [];

        while (datosTabla.firstChild){
            datosTabla.removeChild(datosTabla.firstChild);
        }
    
        function formatoFecha(fecha) {
            fecha = new Date(fecha);
            const dia = fecha.getDate();
            const mesIndex = fecha.getMonth()+1;
            const año = fecha.getFullYear();
            return `${dia}/${mesIndex}/${año}`;
        }
    
        for(let i = 1; i <= plazos; i++) {
            pagosIntereses = parseFloat(monto*(tasas/100));
            pagoAmortizacion = parseFloat(pagoMensual - pagosIntereses);
            monto = parseFloat(monto-pagoAmortizacion);
            
            const fechaX = hoy.setMonth(hoy.getMonth() + 1);
            const pagoItem = {
                fecha: formatoFecha(fechaX),
                cuota: Number(pagoMensual.toFixed(2)),
                amortizacion: Number(pagoAmortizacion.toFixed(2)),
                interes: Number(pagosIntereses.toFixed(2)),
                saldoRestante: Number(monto.toFixed(2))
            };
            // 写入每期还款记录到客户档案
            client.planPagos.push(pagoItem);
            
            $("#tablaPrestamos").append(`<tr><td>${pagoItem.fecha}
            <td class="valorCuota">${pagoItem.cuota}</td>
            <td>${pagoItem.amortizacion}</td>
            <td>${pagoItem.interes}</td>
            <td>${pagoItem.saldoRestante}</td></tr>`);
        }
        console.log('更新后的客户档案：', this.clients);
    }     
}

提交按钮事件部分

$('#botonEnviar').on("click", (e) =>{
    e.preventDefault();
    const newClientId = clienteGestor.creacionClientes(
        $('#nombre').val(), 
        $('#apellido').val(), 
        $('#mail').val(), 
        parseInt($('#aSolicitar').val()), 
        parseInt($('#menuPlazos').val()), 
        parseFloat(tasas)
    );
    clienteGestor.calcularCuotas(newClientId);
})

验证方式 #

提交客户信息后打开控制台，即可看到clients数组里的每个客户对象都已经包含计算完成的月供和完整还款计划数据。

内容的提问来源于stack exchange，提问作者user16754567