更新记录

1.0.6（2026-06-11） 下载此版本

修复贷款利率精度问题

1.0.5（2026-01-15） 下载此版本

优化界面显示效果，优化利率

平台兼容性

uni-app(3.8.1)

其他

房贷计算器组件使用说明

一、概述

loan-calculator 是一个基于 uni-app 开发的全功能房贷计算器组件。它支持三种贷款类型（商业贷款、公积金贷款、组合贷款），采用等额本息还款方式，提供详细的月供、总利息、还款总额以及完整的还款计划表（前12期）。组件界面美观，交互友好，适用于金融类、房产类小程序或App。

二、功能特点

• 三种贷款模式：商业贷款、公积金贷款、组合贷款，通过Tab切换。
• 首套/二套认定：影响利率选项（内置2024年参考利率）。
• 利率方式选择：LPR浮动利率 / 固定利率（商业贷款部分）。
• 贷款金额范围限制：商业贷款最高500万，公积金最高100万（可在代码中调整）。
• 贷款年限：1～30年，按年选择。
• 等额本息计算：精确计算月供、总利息、还款总额。
• 还款计划表：展示每月应还本金、利息及剩余本金（自动生成全部期数，滚动显示）。
• 利率说明：内置LPR利率说明文字，便于用户理解。
• 响应式布局：固定底部按钮，结果区域自动滚动到视野内。

三、代码结构解析

3.1 文件结构

index.vue          // 组件主文件，包含模板、脚本、样式

3.2 Template 模板

• 贷款类型切换 (loan-tabs)：三个tab-item，通过 activeTab 控制显示对应表单。
• 表单区域 (loan-form)：分别对应商业、公积金、组合贷款的输入控件。使用 v-if 条件渲染。
• 计算按钮 (calculate-btn)：固定底部，点击触发 calculateLoan 方法。
• 利率说明 (rate-info)：LPR背景说明文字。
• 结果区域 (result-container)：v-if="showResult" 控制显示，包含汇总数据、还款详情、还款计划表（repayment-table）。

3.3 Script 脚本

data 数据

核心方法

• validateInput(type)
  验证贷款金额输入范围（商业 ≤500万，公积金 ≤100万），超出时自动截断。

• getBusinessRates() / getFundRates()
  根据当前激活的贷款类型及首套/二套标识，返回对应的利率选项数组。

• calculateLoan()
  根据 activeTab 调用对应的计算函数，并设置 showResult = true 及滚动页面。

• calculateBusinessLoan()
  商业贷款计算逻辑：

  1. 获取金额（万元→元）、年限（年→月）、月利率。
  2. 使用等额本息公式计算月供。
  3. 计算总还款额、总利息。
  4. 调用 generateRepaymentPlan 生成还款计划。
  5. 更新 calculationResult。

• calculateFundLoan()
  公积金贷款计算，逻辑同商业贷款，利率来源不同。

• calculateCombinedLoan()
  组合贷款：分别计算公积金部分和商业部分的月供，二者相加得总月供。采用加权平均利率生成还款计划（简化处理，实际应各自生成后再合并，但当前实现为加权平均，可接受）。

• generateRepaymentPlan(loanAmount, monthlyRate, loanMonths, monthlyPayment)
  生成等额本息还款计划表。逐月计算利息、本金、剩余本金，最后一期调整剩余本金为0。

• formatNumber(num)
  添加千位分隔符（例如 1234567 → 1,234,567）。

生命周期

• onLoad 中注释了默认计算，可根据需要开启。

3.4 Style 样式

• 使用 rpx 单位适配移动端。
• 主色调 #0EAA6A（绿色）。
• 表单采用 flex 布局，单选按钮、输入框、选择器样式统一。
• 还款计划表支持横向滚动 (scroll-view scroll-x)。
• 底部按钮固定 (position: fixed)。

四、核心计算逻辑（等额本息）

公式：

每月月供 = [贷款本金 × 月利率 × (1+月利率)^还款月数] / [(1+月利率)^还款月数 - 1]

其中：

• 贷款本金：金额（万元）× 10000
• 月利率 = 年利率 / 12
• 还款月数 = 贷款年限 × 12

总还款额 = 每月月供 × 还款月数
总利息 = 总还款额 - 贷款本金

还款计划生成算法：

剩余本金 = 贷款本金
for 期数 = 1 to 还款月数:
    本期利息 = 剩余本金 × 月利率
    本期本金 = 月供 - 本期利息
    剩余本金 -= 本期本金
    记录（期数, 月供, 本期本金, 本期利息, 剩余本金）

五、集成与使用

5.1 作为页面组件使用

如果你的项目是 uni-app 且已将本文件作为页面（例如 pages/loan/loan.vue），无需额外引入。直接运行即可。

5.2 作为子组件引用

若要将此组件嵌入其他页面：

1. 将 index.vue 放入 components/loan-calculator/ 目录。
2. 在目标页面中引入并注册：

<template>
  <view>
    <LoanCalculator />
  </view>
</template>

<script>
import LoanCalculator from '@/components/loan-calculator/index.vue'
export default {
  components: { LoanCalculator }
}
</script>

5.3 传递 props（可扩展）

当前组件未定义 props，内部所有数据都是本地状态。如果需要从外部初始化贷款金额、首套标识等，可自行添加 props 并 watch 变化。

维护建议：定期更新 LPR 基准利率和公积金利率。