在支付寶的文檔中找到一個比較詳細的公式

等額本息計算公式 每月還款額=貸款本金×[月利率×（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].valuethis.gjj.typename = this.typelist[0].label//20年this.gjj.year = this.yearlist[3].valuethis.gjj.yearname = this.yearlist[3].label//2層this.gjj.pay = this.paylist[0].valuethis.gjj.payname = this.paylist[0].label//基準this.gjj.lpr = this.ggjlist[0].valuethis.gjj.lprname = this.ggjlist[0].labelthis.gjj.hai=this.hailist[0].valuethis.gjj.hainame=this.hailist[0].label//總價this.sd.type = this.typelist[0].valuethis.sd.typename = this.typelist[0].label//20年this.sd.year = this.yearlist[3].valuethis.sd.yearname = this.yearlist[3].label//2層this.sd.pay = this.paylist[0].valuethis.sd.payname = this.paylist[0].label//基準this.sd.lpr = this.sdlist[5].valuethis.sd.lprname = this.sdlist[5].labelthis.sd.hai=this.hailist[0].valuethis.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].valuethis.gjj.typename = e[0].label},gjjconfirmpay(e) {this.gjj.pay = e[0].valuethis.gjj.payname = e[0].label},gjjconfirmyear(e){this.gjj.year = e[0].valuethis.gjj.yearname = e[0].label},gjjconfirmlpr(e){this.gjj.lpr = e[0].valuethis.gjj.lprname = e[0].label},gjjconfirmhai(e){this.gjj.hai = e[0].valuethis.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*12let list = []let 月利率 = this.gjj.lpr*0.01/12let 還款月數 = this.gjj.monthlet 貸款本金 = this.gjj.truepriceif(this.gjj.hai == 1)//等額本金{/*等額本金計算公式每月月供額=(貸款本金÷還款月數)+(貸款本金-已歸還本金累計額)×月利率每月應還本金=貸款本金÷還款月數每月應還利息=剩余本金×月利率=(貸款本金-已歸還本金累計額)×月利率。每月月供遞減額=每月應還本金×月利率=貸款本金÷還款月數×月利率總利息=還款月數×(總貸款額×月利率-月利率×(總貸款額÷還款月數)*(還款月數-1)÷2+總貸款額÷還款月數)*/let 已歸還本金累計額 = 0let 剩余本金 = 貸款本金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+月利率),還款月數)-1let 每月月供額 = (貸款本金*(月利率*t1)/t3).toFixed(2)this.gjj.backprice=每月月供額*this.gjj.monththis.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 = listthis.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].valuethis.sd.typename = e[0].label},sdconfirmpay(e) {this.sd.pay = e[0].valuethis.sd.payname = e[0].label},sdconfirmyear(e){this.sd.year = e[0].valuethis.sd.yearname = e[0].label},sdconfirmlpr(e){this.sd.lpr = e[0].valuethis.sd.lprname = e[0].label},sdconfirmhai(e){this.sd.hai = e[0].valuethis.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*12let list = []let 月利率 = this.sd.lpr*0.01/12let 還款月數 = this.sd.monthlet 貸款本金 = this.sd.truepriceif(this.sd.hai == 1)//等額本金{/*等額本金計算公式每月月供額=(貸款本金÷還款月數)+(貸款本金-已歸還本金累計額)×月利率每月應還本金=貸款本金÷還款月數每月應還利息=剩余本金×月利率=(貸款本金-已歸還本金累計額)×月利率。每月月供遞減額=每月應還本金×月利率=貸款本金÷還款月數×月利率總利息=還款月數×(總貸款額×月利率-月利率×(總貸款額÷還款月數)*(還款月數-1)÷2+總貸款額÷還款月數)*/let 已歸還本金累計額 = 0let 剩余本金 = 貸款本金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+月利率),還款月數)-1let 每月月供額 = (貸款本金*(月利率*t1)/t3).toFixed(2)this.sd.backprice=每月月供額*this.sd.monththis.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 = listthis.resultshow = true;},}} </script><style></style>

總結

以上是生活随笔為你收集整理的uniapp 做的一个房贷计算器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。