这是一个关于房贷计算器的实现，包括商业贷款和公积金贷款两种类型。计算器允许用户选择计算方式（贷款总额或房屋面积）、贷款年限、贷款利率、首付比例以及还款方式（等额本金或等额本息）。通过等额本息和等额本金的计算公式，可以得出每月还款额、总支付利息、每月应还本金和利息。代码中详细展示了计算逻辑，并提供了相应的数据交互和展示功能。
在支付宝的文档中找到一个比较详细的公式
等额本息计算公式
每月还款额=贷款本金×[月利率×（1+月利率）^还款月数]÷[（1+月利率）^还款月数-1]
总支付利息：总利息=还款月数×每月月供额-贷款本金
每月应还利息=贷款本金×月利率×〔(1+月利率)^还款月数-(1+月利率)^(还款月序号-1)〕÷〔(1+月利率)^还款月数-1〕
每月应还本金=贷款本金×月利率×(1+月利率)^(还款月序号-1)÷〔(1+月利率)^还款月数-1〕
总利息=还款月数×每月月供额-贷款本金
等额本金计算公式
每月月供额=(贷款本金÷还款月数)+(贷款本金-已归还本金累计额)×月利率
每月应还本金=贷款本金÷还款月数
每月应还利息=剩余本金×月利率=(贷款本金-已归还本金累计额)×月利率。
每月月供递减额=每月应还本金×月利率=贷款本金÷还款月数×月利率
总利息=还款月数×(总贷款额×月利率-月利率×(总贷款额÷还款月数)*(还款月数-1)÷2+总贷款额÷还款月数)^是平方的意思，JS中使用Math.pow
注意变量做+运算的时候，要先转换成parseFloat
功能实现了。。样式还欠缺。。
<template>
<view class="body" style="background-color:#ffffff;">
<u-navbar class="navbar"
:title="Title"
:background="background"
:title-size="titleSize"
is-back="true"
:title-color="titleColor"
:back-icon-color="backIconColor"
>
</u-navbar>
<view class="container overflow" :style="{height: mainHeight + 'px'}">
<u-tabs-swiper ref="uTabs" :list="list" :is-scroll="false" active-color="#ffa173" inactive-color="#606266"
:current="current" @change="tabsChange"></u-tabs-swiper>
<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" :style="{height: mainHeight + 'px'}">
<swiper-item class="swiper-item" key="0">
<scroll-view scroll-y style="width: 100%;height: 100%;">
<view class="seeRoom-item-cont">
<u-form-item label="计算方式">
<u-input disabled="true" @click="showtype = true" placeholder="请选择计算方式" :value="sd.typename"/>
<u-select v-model="showtype" model="single-column" :list="typelist" @confirm="sdconfirmtype"></u-select>
</u-form-item>
<view v-if="sd.type==2">
<u-line class="u-line"></u-line>
<u-form-item label="单价" ><u-input type="number" :clearable="false" v-model="sd.price" placeholder="请输入单价" style="float: left;"/><view style="float: left;">元</view></u-form-item>
<u-line class="u-line" ></u-line>
<u-form-item label="面积"><u-input type="number" :clearable="false" v-model="sd.area" placeholder="请输入面积" style="float: left;"/><view style="float: left;">㎡</view></u-form-item>
<u-line class="u-line"></u-line>
<u-form-item label="首付">
<u-input disabled="true" @click="showpay1 = true" placeholder="请选择首付" :value="sd.payname"/>
<u-select v-model="showpay1" model="single-column" :list="paylist" @confirm="sdconfirmpay"></u-select>
</u-form-item>
<u-line class="u-line"></u-line>
</view>
<view v-else>
<u-form-item label="贷款金额"><u-input type="number" :clearable="false" v-model="sd.allprice" placeholder="请输入贷款金额" style="float: left;"/><view style="float: left;">万</view></u-form-item>
<u-line class="u-line"></u-line>
</view>
<u-form-item label="贷款年限">
<u-input disabled="true" @click="showyear = true" placeholder="请选择贷款年限" :value="sd.yearname"/>
<u-select v-model="showyear" model="single-column" :list="yearlist" @confirm="sdconfirmyear"></u-select>
</u-form-item>
<u-line class="u-line"></u-line>
<u-form-item label="贷款利率">
<u-input disabled="true" @click="showlpr = true" placeholder="请选择贷款利率" :value="sd.lprname"/>
<u-select v-model="showlpr" model="single-column" :list="sdlist" @confirm="sdconfirmlpr"></u-select>
</u-form-item>
<u-line class="u-line"></u-line>
<u-form-item label="LPR(您也可以手动输入)">
<u-input v-model="sd.lpr" type="number" :clearable="false" style="float: left;"/><view style="float: left;">%</view>
</u-form-item>
<u-line class="u-line"></u-line>
<u-form-item label="还款方式">
<u-input disabled="true" @click="showhai = true" placeholder="请选择还款方式" :value="sd.hainame"/>
<u-select v-model="showhai" model="single-column" :list="hailist" @confirm="sdconfirmhai"></u-select>
</u-form-item>
<u-line class="u-line"></u-line>
<u-button class="margin-top-40 margin-bottom-20" type="success" @click="sdcalculation">开始计算</u-button>
<u-table v-show="resultshow" style="margin-bottom: 10rpx;">
<u-tr class="u-tr">
<u-th class="u-th">贷款金额</u-th>
<u-th class="u-th">还款总金额</u-th>
<u-th class="u-th">还款总利息</u-th>
</u-tr>
<u-tr class="u-tr">
<u-td class="u-td">{{sd.trueprice}}</u-td>
<u-td class="u-td">{{sd.backprice}}</u-td>
<u-td class="u-td">{{sd.backlixi}}</u-td>
</u-tr>
</u-table>
<u-table v-show="resultshow" style="margin-bottom: 10rpx;">
<u-tr class="u-tr">
<u-th class="u-th">期数</u-th>
<u-th class="u-th">月供</u-th>
<u-th class="u-th">本金</u-th>
<u-th class="u-th">利息</u-th>
</u-tr>
<u-tr class="u-tr" v-for="(item, index) in resultlist" :key="index">
<u-td class="u-td">{{index+1}}</u-td>
<u-td class="u-td">{{item.yuegong}}</u-td>
<u-td class="u-td">{{item.benjin}}</u-td>
<u-td class="u-td">{{item.lixi}}</u-td>
</u-tr>
</u-table>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item" key="1">
<scroll-view scroll-y style="width: 100%;height: 100%;">
<view class="seeRoom-item-cont">
<u-form-item label="计算方式">
<u-input disabled="true" @click="showtype1 = true" placeholder="请选择计算方式" :value="gjj.typename"/>
<u-select v-model="showtype1" model="single-column" :list="typelist" @confirm="gjjconfirmtype"></u-select>
</u-form-item>
<view v-if="gjj.type==2">
<u-line class="u-line"></u-line>
<u-form-item label="单价" ><u-input type="number" :clearable="false" v-model="gjj.price" placeholder="请输入单价" style="float: left;"/><view style="float: left;">元</view> </u-form-item>
<u-line class="u-line" ></u-line>
<u-form-item label="面积"><u-input type="number" :clearable="false" v-model="gjj.area" placeholder="请输入面积" style="float: left;"/><view style="float: left;">㎡</view> </u-form-item>
<u-line class="u-line"></u-line>
<u-form-item label="首付">
<u-input disabled="true" @click="showpay1 = true" placeholder="请选择首付" :value="gjj.payname"/>
<u-select v-model="showpay1" model="single-column" :list="paylist" @confirm="gjjconfirmpay"></u-select>
</u-form-item>
<u-line class="u-line"></u-line>
</view>
<view v-else>
<u-form-item label="公积金金额"><u-input type="number" :clearable="false" v-model="gjj.allprice" placeholder="请输入金额" style="float: left;"/><view style="float: left;">万</view></u-form-item>
<u-line class="u-line"></u-line>
</view>
<u-form-item label="公积金年限">
<u-input disabled="true" @click="showyear1 = true" placeholder="请选择公积金年限" :value="gjj.yearname"/>
<u-select v-model="showyear1" model="single-column" :list="yearlist" @confirm="gjjconfirmyear"></u-select>
<!-- <u-input type="number" v-model="gjj.year" /> -->
</u-form-item>
<u-line class="u-line"></u-line>
<u-form-item label="公积金利率">
<u-input disabled="true" @click="showlpr1 = true" placeholder="请选择公积金利率" :value="gjj.lprname"/>
<u-select v-model="showlpr1" model="single-column" :list="ggjlist" @confirm="gjjconfirmlpr"></u-select>
</u-form-item>
<u-line class="u-line"></u-line>
<u-form-item label="LPR(您也可以手动输入)">
<u-input v-model="gjj.lpr" :clearable="false" type="number" style="float: left;"/><view style="float: left;">%</view>
</u-form-item>
<u-line class="u-line"></u-line>
<u-form-item label="还款方式">
<u-input disabled="true" @click="showhai1 = true" placeholder="请选择还款方式" :value="gjj.hainame"/>
<u-select v-model="showhai1" model="single-column" :list="hailist" @confirm="gjjconfirmhai"></u-select>
</u-form-item>
<u-line class="u-line"></u-line>
<u-button class="margin-top-40 margin-bottom-20" type="success" @click="gjjcalculation">开始计算</u-button>
<u-table v-show="resultshow1" style="margin-bottom: 10rpx;">
<u-tr class="u-tr">
<u-th class="u-th">贷款金额</u-th>
<u-th class="u-th">还款总金额</u-th>
<u-th class="u-th">还款总利息</u-th>
</u-tr>
<u-tr class="u-tr">
<u-td class="u-td">{{gjj.trueprice}}</u-td>
<u-td class="u-td">{{gjj.backprice}}</u-td>
<u-td class="u-td">{{gjj.backlixi}}</u-td>
</u-tr>
</u-table>
<u-table v-show="resultshow1" style="margin-bottom: 10rpx;">
<u-tr class="u-tr">
<u-th class="u-th">期数</u-th>
<u-th class="u-th">月供</u-th>
<u-th class="u-th">本金</u-th>
<u-th class="u-th">利息</u-th>
</u-tr>
<u-tr class="u-tr" v-for="(item, index) in resultlist1" :key="index">
<u-td class="u-td">{{index+1}}</u-td>
<u-td class="u-td">{{item.yuegong}}</u-td>
<u-td class="u-td">{{item.benjin}}</u-td>
<u-td class="u-td">{{item.lixi}}</u-td>
</u-tr>
</u-table>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
Title: '房贷计算器',
background:{
backgroundColor: '#FF6D08'
},
titleColor: '#ffffff',
titleSize: '38',
backIconColor: '#ffffff',
mainHeight:'',
resultshow:false,
resultlist:[],
resultshow1:false,
resultlist1:[],
yearlist:[{
value: '5',label: '5年'
}, {
value: '10',label: '10年'
}, {
value: '15',label: '15年'
}, {
value: '20',label: '20年'
}, {
value: '25',label: '25年'
}, {
value: '30',label: '30年'
}],
list: [{
name: '商业贷款'
}, {
name: '公积金贷款'
}],
typelist:[{
value: '1',label: '贷款总额'
}, {
value: '2',label: '房屋面积'
}],
paylist:[{
value: '0.2',label: '二成'
}, {
value: '0.3',label: '三成'
}, {
value: '0.4',label: '四成'
}, {
value: '0.5',label: '五成'
}, {
value: '0.6',label: '六成'
}, {
value: '0.7',label: '七成'
}, {
value: '0.8',label: '八成'
}, {
value: '0.9',label: '九成'
}],
ggjlist:[
{
value: '3.25',label: '公积金基本利率'
}, {
value: '3.58',label: '公积金基本利率1.1倍'
}, {
value: '3.90',label: '公积金基本利率1.2倍'
}
],
sdlist:[{
value: '3.43',label: '商贷基准利率7折'
},{
value: '3.92',label: '商贷基准利率8折'
},{
value: '4.17',label: '商贷基准利率8.5折'
},{
value: '4.41',label: '商贷基准利率9折'
},{
value: '4.66',label: '商贷基准利率9.5折'
}, {
value: '4.90',label: '商贷基准利率'
}, {
value: '5.15',label: '商贷基准利率1.05倍'
}, {
value: '5.39',label: '商贷基准利率1.1倍'
}, {
value: '5.88',label: '商贷基准利率1.2倍'
}, {
value: '6.37',label: '商贷基准利率1.3倍'
}
],
hailist:[{
value: '1',label: '等额本金'
},{
value: '2',label: '等额本息'
}
],
current: 0, // tabs组件的current值，表示当前活动的tab选项
swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
/* 公积金 */
gjj:{
type:'',
typename:'',
price:'',
area:'',
pay:'',
allprice:'',
year:'',
yearname:'',
lpr:'',
lprname:'',
hai:'',
hainame:'',
month:'',
trueprice:'',
backprice:'',
backlixi:''
},
showtype1:false,
showpay1:false,
showyear1:false,
showlpr1:false,
showhai1:false,
sd:{
type:'',
typename:'',
price:'',
area:'',
pay:'',
allprice:'',
year:'',
yearname:'',
lpr:'',
lprname:'',
hai:'',
hainame:'',
month:'',
trueprice:'',
backprice:'',
backlixi:''
},
showtype:false,
showpay:false,
showyear:false,
showlpr:false,
showhai:false,
}
},
onReady(){
this.getStyle();
},
onLoad(){
this.typeload()
},
methods: {
getStyle(){//计算元素高宽
let _this = this;
uni.getSystemInfo({
success: function(res){//res--各种参数
//console.log(res.statusBarHeight);//状态栏的高度
//console.log(res.windowHeight);//屏幕高度
//顶部标题栏高度
let info = uni.createSelectorQuery().select(".navbar");
info.boundingClientRect(function(data) { //data - 各种参数
let navbarH = data.height;
_this.mainHeight = res.windowHeight - navbarH;
}).exec();
}
})
},
//初始值
typeload(){
//总价
this.gjj.type = this.typelist[0].value
this.gjj.typename = this.typelist[0].label
//20年
this.gjj.year = this.yearlist[3].value
this.gjj.yearname = this.yearlist[3].label
//2层
this.gjj.pay = this.paylist[0].value
this.gjj.payname = this.paylist[0].label
//基准
this.gjj.lpr = this.ggjlist[0].value
this.gjj.lprname = this.ggjlist[0].label
this.gjj.hai=this.hailist[0].value
this.gjj.hainame=this.hailist[0].label
//总价
this.sd.type = this.typelist[0].value
this.sd.typename = this.typelist[0].label
//20年
this.sd.year = this.yearlist[3].value
this.sd.yearname = this.yearlist[3].label
//2层
this.sd.pay = this.paylist[0].value
this.sd.payname = this.paylist[0].label
//基准
this.sd.lpr = this.sdlist[5].value
this.sd.lprname = this.sdlist[5].label
this.sd.hai=this.hailist[0].value
this.sd.hainame=this.hailist[0].label
},
// tabs通知swiper切换
tabsChange(index) {
this.swiperCurrent = index;
},
// swiper-item左右移动，通知tabs的滑块跟随移动
transition(e) {
let dx = e.detail.dx;
this.$refs.uTabs.setDx(dx);
},
// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
// swiper滑动结束，分别设置tabs和swiper的状态
animationfinish(e) {
let current = e.detail.current;
this.$refs.uTabs.setFinishCurrent(current);
this.swiperCurrent = current;
this.current = current;
},
// scroll-view到底部加载更多
/* onreachBottom() {
}, */
// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
gjjconfirmtype(e) {
this.gjj.type = e[0].value
this.gjj.typename = e[0].label
},
gjjconfirmpay(e) {
this.gjj.pay = e[0].value
this.gjj.payname = e[0].label
},
gjjconfirmyear(e){
this.gjj.year = e[0].value
this.gjj.yearname = e[0].label
},
gjjconfirmlpr(e){
this.gjj.lpr = e[0].value
this.gjj.lprname = e[0].label
},
gjjconfirmhai(e){
this.gjj.hai = e[0].value
this.gjj.hainame = e[0].label
},
gjjcalculation()
{
if(this.gjj.type==2)
{
this.gjj.trueprice = this.gjj.price * this.gjj.area * (1 - this.gjj.pay)
}
else
{
this.gjj.trueprice = this.gjj.allprice * 10000
}
this.gjj.month = this.gjj.year*12
let list = []
let 月利率 = this.gjj.lpr*0.01/12
let 还款月数 = this.gjj.month
let 贷款本金 = this.gjj.trueprice
if(this.gjj.hai == 1)//等额本金
{
/*
等额本金计算公式
每月月供额=(贷款本金÷还款月数)+(贷款本金-已归还本金累计额)×月利率
每月应还本金=贷款本金÷还款月数
每月应还利息=剩余本金×月利率=(贷款本金-已归还本金累计额)×月利率。
每月月供递减额=每月应还本金×月利率=贷款本金÷还款月数×月利率
总利息=还款月数×(总贷款额×月利率-月利率×(总贷款额÷还款月数)*(还款月数-1)÷2+总贷款额÷还款月数)
*/
let 已归还本金累计额 = 0
let 剩余本金 = 贷款本金
let 还款总金额 = 0;
for(let i = 0;i< this.gjj.month;i++)
{
let 每月应还本金 = (贷款本金/还款月数).toFixed(2)
let 每月应还利息 = (剩余本金*月利率).toFixed(2)
let 每月月供额 = (parseFloat(每月应还本金) + parseFloat(每月应还利息)).toFixed(2)
还款总金额 = parseFloat(还款总金额) + parseFloat(每月月供额)
剩余本金 = 剩余本金 - 每月应还本金
if(i<11)
{
list.push({
yuegong:每月月供额,
benjin:每月应还本金,
lixi:每月应还利息
})
}
}
this.gjj.backprice=还款总金额.toFixed(2)
this.gjj.backlixi=(this.gjj.backprice-贷款本金).toFixed(2)
}
else//等额本息
{
/* 等额本息计算公式
每月月供额=贷款本金×[月利率×（1+月利率）^还款月数]÷[（1+月利率）^还款月数-1]
总支付利息：总利息=还款月数×每月月供额-贷款本金
每月应还利息=贷款本金×月利率×〔(1+月利率)^还款月数-(1+月利率)^(还款月序号-1)〕÷〔(1+月利率)^还款月数-1〕
每月应还本金=贷款本金×月利率×(1+月利率)^(还款月序号-1)÷〔(1+月利率)^还款月数-1〕
总利息=还款月数×每月月供额-贷款本金
*/
let t1 = Math.pow((1+月利率),还款月数)
let t3 = Math.pow((1+月利率),还款月数)-1
let 每月月供额 = (贷款本金*(月利率*t1)/t3).toFixed(2)
this.gjj.backprice=每月月供额*this.gjj.month
this.gjj.backlixi=(this.gjj.backprice-贷款本金).toFixed(2)
for(let i = 0;i< this.gjj.month;i++)
{
let t2 = Math.pow((1+月利率),i)
let 每月应还利息 = (贷款本金*月利率 * (t1 - t2) / t3).toFixed(2)
let 每月应还本金 = (贷款本金*月利率 * t2 / t3).toFixed(2)
if(i<11)
{
list.push({
yuegong:每月月供额,
benjin:每月应还本金,
lixi:每月应还利息
})
}
}
}
this.resultlist1 = list
this.resultshow1 = true;
},
getStyle(){//计算元素高宽
let _this = this;
uni.getSystemInfo({
success: function(res){//res--各种参数
//顶部标题栏高度
let info = uni.createSelectorQuery().select(".navbar");
info.boundingClientRect(function(data) { //data - 各种参数
let navbarH = data.height;
_this.mainHeight = res.windowHeight - navbarH;
console.log(_this.mainHeight)
}).exec();
}
})
},
sdconfirmtype(e) {
this.sd.type = e[0].value
this.sd.typename = e[0].label
},
sdconfirmpay(e) {
this.sd.pay = e[0].value
this.sd.payname = e[0].label
},
sdconfirmyear(e){
this.sd.year = e[0].value
this.sd.yearname = e[0].label
},
sdconfirmlpr(e){
this.sd.lpr = e[0].value
this.sd.lprname = e[0].label
},
sdconfirmhai(e){
this.sd.hai = e[0].value
this.sd.hainame = e[0].label
},
sdcalculation()
{
if(this.sd.type==2)
{
this.sd.trueprice = this.sd.price * this.sd.area * (1 - this.sd.pay)
}
else
{
this.sd.trueprice = this.sd.allprice * 10000
}
this.sd.month = this.sd.year*12
let list = []
let 月利率 = this.sd.lpr*0.01/12
let 还款月数 = this.sd.month
let 贷款本金 = this.sd.trueprice
if(this.sd.hai == 1)//等额本金
{
/*
等额本金计算公式
每月月供额=(贷款本金÷还款月数)+(贷款本金-已归还本金累计额)×月利率
每月应还本金=贷款本金÷还款月数
每月应还利息=剩余本金×月利率=(贷款本金-已归还本金累计额)×月利率。
每月月供递减额=每月应还本金×月利率=贷款本金÷还款月数×月利率
总利息=还款月数×(总贷款额×月利率-月利率×(总贷款额÷还款月数)*(还款月数-1)÷2+总贷款额÷还款月数)
*/
let 已归还本金累计额 = 0
let 剩余本金 = 贷款本金
let 还款总金额 = 0;
for(let i = 0;i< this.sd.month;i++)
{
let 每月应还本金 = (贷款本金/还款月数).toFixed(2)
let 每月应还利息 = (剩余本金*月利率).toFixed(2)
let 每月月供额 = (parseFloat(每月应还本金) + parseFloat(每月应还利息)).toFixed(2)
还款总金额 = parseFloat(还款总金额) + parseFloat(每月月供额)
剩余本金 = 剩余本金 - 每月应还本金
if(i<11)
{
list.push({
yuegong:每月月供额,
benjin:每月应还本金,
lixi:每月应还利息
})
}
}
this.sd.backprice=还款总金额.toFixed(2)
this.sd.backlixi=(this.sd.backprice-贷款本金).toFixed(2)
}
else//等额本息
{
/* 等额本息计算公式
每月月供额=贷款本金×[月利率×（1+月利率）^还款月数]÷[（1+月利率）^还款月数-1]
总支付利息：总利息=还款月数×每月月供额-贷款本金
每月应还利息=贷款本金×月利率×〔(1+月利率)^还款月数-(1+月利率)^(还款月序号-1)〕÷〔(1+月利率)^还款月数-1〕
每月应还本金=贷款本金×月利率×(1+月利率)^(还款月序号-1)÷〔(1+月利率)^还款月数-1〕
总利息=还款月数×每月月供额-贷款本金
*/
let t1 = Math.pow((1+月利率),还款月数)
let t3 = Math.pow((1+月利率),还款月数)-1
let 每月月供额 = (贷款本金*(月利率*t1)/t3).toFixed(2)
this.sd.backprice=每月月供额*this.sd.month
this.sd.backlixi=(this.sd.backprice-贷款本金).toFixed(2)
for(let i = 0;i< this.sd.month;i++)
{
let t2 = Math.pow((1+月利率),i)
let 每月应还利息 = (贷款本金*月利率 * (t1 - t2) / t3).toFixed(2)
let 每月应还本金 = (贷款本金*月利率 * t2 / t3).toFixed(2)
if(i<11)
{
list.push({
yuegong:每月月供额,
benjin:每月应还本金,
lixi:每月应还利息
})
}
}
}
this.resultlist = list
this.resultshow = true;
},
}
}
</script>
<style>
</style>
扫一扫
421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
