小程序上实现房贷计算
- 功能：实现房贷计算，区分等额本息，等额本金，查看月供详情
- 效果图
组件
-
存放路径 components/h-chosen
-
使用 Vant Weapp：https://vant-contrib.gitee.io/vant-weapp/#/home
-
index.wxml
<!-- components/h-chosen/index.wxml --> <view> <van-cell required="{{required}}" title="{{title}}" is-link bindclick="onClickCell"> <view class="{{name ? 'main-color' : ''}}"> {{name || '请选择'}} </view> </van-cell> <van-action-sheet show="{{ show }}" cancel-text="取消选择" actions="{{ actions }}" bind:close="onClose" bind:select="onSelect" bind:cancel="onCancel" /> </view> -
index.ts
Component({ /** * 组件的属性列表 */ properties: { actions: { type: Array, value: [], }, value: { type: String, value: "", }, title: { type: String, value: "标题", }, required: { type: Boolean, value: false, }, readonly: { type: Boolean, value: false, }, }, /** * 组件的初始数据 */ data: { name: "", show: false, }, /** * 组件的方法列表 */ methods: { onClickCell() { this.triggerEvent("click"); if(!this.properties.readonly) { this.setData({ show: !this.data.show, }); } }, onClose() { this.setData({ show: false }); this.triggerEvent("close"); }, onSelect(event:any) { this.triggerEvent("change", event.detail.value); }, onCancel() { this.triggerEvent("change", ''); this.setData({ show: false }); } }, observers: { "value,actions": function (value, actions) { const Id = String(value); let name = ""; if (value && actions.length) { const find = actions.find((el: any) => { const elId = String(el.value); return elId === Id; }); if (find) { name = find.name; } } this.setData({ name: name || "", }); }, }, }); -
index.scss
.main-color { color: #333; } -
index.json
{ "component": true, "usingComponents": { "van-cell": "@vant/weapp/cell/index", "van-cell-group": "@vant/weapp/cell-group/index", "van-action-sheet": "@vant/weapp/action-sheet/index" } }
房贷计算
-
mortgage/index
-
index.wxml
<!--房贷计算--> <view class="mortgage-page"> <van-cell-group> <HChosen title="贷款类型" data-key="form.loanType" actions="{{ loanList }}" value="{{ form.loanType }}" bind:change="onChangeName" /> <block wx:if="{{form.loanType === 3}}"> <van-field required title-width="160" type='digit' input-align="right" model:value="{{ form.accumulationTotal }}" data-key="form.accumulationTotal" placeholder="请输入" bind:change="onChangeName" border="{{false}}"> <view slot="label"> 公积金贷款金额<text class="color-999">(万元)</text> </view> </van-field> <HChosen title="公积金贷款年限" required data-key="form.accumulationYear" actions="{{ yearList }}" value="{{ form.accumulationYear }}" bind:change="onChangeName" /> <van-field required title-width="140" type='digit' input-align="right" model:value="{{ form.accumulationRate }}" data-key="form.accumulationRate" placeholder="请输入" bind:change="onChangeName" border="{{false}}"> <view slot="label"> 公积金贷款利率<text class="color-999">(%)</text> </view> </van-field> </block> <van-field required title-width="140" type='digit' input-align="right" model:value="{{ form.total }}" data-key="form.total" placeholder="请输入" bind:change="onChangeName" border="{{false}}"> <view slot="label"> {{form.loanType === 3 ? '商业贷款金额' : '贷款总额'}}<text class="color-999">(万元)</text> </view> </van-field> <HChosen title="贷款年限" required data-key="form.commercial" actions="{{ yearList }}" value="{{ form.commercial }}" bind:change="onChangeName" /> <van-field required title-width="120" type='digit' input-align="right" model:value="{{ form.rate }}" data-key="form.rate" placeholder="请输入" bind:change="onChangeName" border="{{false}}"> <view slot="label"> 利率<text class="color-999">(%)</text> </view> </van-field> <HChosen title="还款方式" data-key="form.repaymentName" actions="{{ repaymentList }}" value="{{ form.repaymentName }}" bind:change="onChangeName" /> </van-cell-group> <view class="mortgage-btn box-b"> <van-button size="large" color="#a31f23" block bind:click="onSubmit">开始计算</van-button> </view> </view> -
index.ts
Page({ /** * 页面的初始数据 */ data: { form: { loanType: 1, // 贷款类型 calculationName: '', // 计算方式 total: '', // 贷款金额 commercial: '', // 商贷年限 rate: '', // 利率 repaymentName: '', // 还款方式 accumulationTotal: '', // 公积金金额 accumulationRate: '', // 公积金利率 accumulationYear: '', // 公积金年限 }, loanList: [ { value: 1, name: '商业' }, { value: 2, name: '公积金' }, { value: 3, name: '组合贷款' } ], calculationList: [ { value: 1, name: '按贷款总额' }, { value: 2, name: '按首月还款额计算' }, ], repaymentList: [ { value: '等额本息', name: '等额本息' }, { value: '等额本金', name: '等额本金' }, ], yearList: [], benxiObj: {}, // 本息 benjinObj: {}, // 本金 }, /** * 生命周期函数--监听页面加载 */ onLoad(options: any) { if (wx.getStorageSync("token") || options?.token) { if (options?.token) { wx.setStorageSync("token", JSON.stringify(options.token)); } this.getData() } }, getData() { const newArray: any = [] for (var i = 0; i < 30; i++) { const num = i + 1 const list = { value: num, name: num + '年(' + 12 * num + ')月' } newArray.push(list) } this.setData({ yearList: newArray }) }, onChangeName(e: any) { const { detail, currentTarget } = e; const { key } = currentTarget.dataset; this.setData({ ...this.data.form, [key]: detail }) }, toPercent(point: any) { var str = Number(point / 100).toFixed(1); return str; }, onSubmit() { const form: any = this.data.form; if (!form.total) { wx.showToast({ title: "请输入贷款总额", icon: 'none' }); return; } else if (!form.commercial) { wx.showToast({ title: "请选择贷款年限", icon: 'none' }); return; } else if (!form.rate) { wx.showToast({ title: "请输入利率", icon: 'none' }); return; }else if (form.loanType === 3 && !form.accumulationTotal) { wx.showToast({ title: "请输入公积金贷款金额", icon: 'none' }); return; }else if (form.loanType === 3 && !form.accumulationRate) { wx.showToast({ title: "请输入公积金贷款利率", icon: 'none' }); return; }else if (form.loanType === 3 && !form.accumulationYear) { wx.showToast({ title: "请输入公积金贷款年限", icon: 'none' }); return; } if (form.loanType === 1 || form.loanType === 2) { // 商业 const benxiObj:any = this.benxi(form.total, form.commercial, form.rate); const newBenxiObj = { totalDknum: benxiObj.totalDknum, year: benxiObj.year, totalLixi: benxiObj.totalLixi.toFixed(2), totalPrice: benxiObj.totalPrice.toFixed(2), yuegong: benxiObj.yuegong.toFixed(2), monthdataArray: benxiObj.monthdataArray.length > 0 ? benxiObj.monthdataArray.map((el:any) => ({ monthName: el.monthName, leftFund: el.leftFund.toFixed(2), yuebenjin: el.yuebenjin.toFixed(2), yuelixi: el.yuelixi.toFixed(2), yuegong: (el.yuebenjin + el.yuelixi).toFixed(2), })) : [] } const benjinObj:any = this.benjin(form.total, form.commercial, form.rate); const newBenjinObj = { totalDknum: benjinObj.totalDknum, year: benjinObj.year, totalLixi: benjinObj.totalLixi.toFixed(2), totalPrice: benjinObj.totalPrice.toFixed(2), yuegong: benjinObj.yuegong.toFixed(2), monthdataArray: benjinObj.monthdataArray.length > 0 ? benjinObj.monthdataArray.map((el:any) => ({ monthName: el.monthName, leftFund: el.leftFund.toFixed(2), yuebenjin: el.yuebenjin.toFixed(2), yuelixi: el.yuelixi.toFixed(2), yuegong: (el.yuebenjin + el.yuelixi).toFixed(2), })) : [] } this.setData({ benxiObj:newBenxiObj, benjinObj: newBenjinObj }) if(form.loanType === 1) { wx.navigateTo({ url: `/homeInfo/pages/calculationResults/index?benxiObj=${JSON.stringify(newBenxiObj)}&benjinObj=${JSON.stringify(newBenjinObj)}&sdlilv=${form.rate}&sdyear=${form.commercial}&sdnum=${form.total}&active=${form.repaymentName}` }); }else { wx.navigateTo({ url: `/homeInfo/pages/calculationResults/index?benxiObj=${JSON.stringify(newBenxiObj)}&benjinObj=${JSON.stringify(newBenjinObj)}&gjjlilv=${form.rate}&gjjyear=${form.commercial}&gjjnum=${form.total}&active=${form.repaymentName}` }); } } else if (form.loanType === 3) { const benxiObj:any = this.zuhe(1, form.total, form.accumulationTotal, form.commercial, form.accumulationYear, form.rate, form.accumulationRate); const newBenxiObj = { totalDknum: benxiObj.totalDknum, year: benxiObj.year, totalLixi: benxiObj.totalLixi.toFixed(2), totalPrice: benxiObj.totalPrice.toFixed(2), yuegong: benxiObj.yuegong.toFixed(2), monthdataArray: benxiObj.monthdataArray.length > 0 ? benxiObj.monthdataArray.map((el:any) => ({ monthName: el.monthName, leftFund: el.leftFund.toFixed(2), yuebenjin: el.yuebenjin.toFixed(2), yuelixi: el.yuelixi.toFixed(2), yuegong: (el.yuebenjin + el.yuelixi).toFixed(2), })) : [] } const benjinObj:any = this.zuhe(2, form.total, form.accumulationTotal, form.commercial, form.accumulationYear, form.rate, form.accumulationRate); const newBenjinObj = { totalDknum: benjinObj.totalDknum, year: benjinObj.year, totalLixi: benjinObj.totalLixi.toFixed(2), totalPrice: benjinObj.totalPrice.toFixed(2), yuegong: benjinObj.yuegong.toFixed(2), monthdataArray: benjinObj.monthdataArray.length > 0 ? benjinObj.monthdataArray.map((el:any) => ({ monthName: el.monthName, leftFund: el.leftFund.toFixed(2), yuebenjin: el.yuebenjin.toFixed(2), yuelixi: el.yuelixi.toFixed(2), yuegong: (el.yuebenjin + el.yuelixi).toFixed(2), })) : [] } this.setData({ benxiObj: newBenxiObj, benjinObj: newBenjinObj }) wx.navigateTo({ url: `/homeInfo/pages/calculationResults/index?benxiObj=${JSON.stringify(newBenxiObj)}&benjinObj=${JSON.stringify(newBenjinObj)}&sdlilv=${form.rate}&sdyear=${form.commercial}&sdnum=${form.total}&gjjlilv=${form.accumulationRate}&gjjyear=${form.accumulationYear}&gjjnum=${form.accumulationTotal}&active=${form.repaymentName}` }); } }, /** * 组合贷款计算 * @param type 还款方式 * @param sdnum 商业贷款金额 * @param gjjnum 公积金贷款金额 * @param sdyear 商贷年限 * @param gjjyear 公积金年限 * @param sdlilv 贷款利率 * @param gjjlilv 公积金利率 */ zuhe(type: number, sdnum: number, gjjnum: number, sdyear: number, gjjyear: number, sdlilv: number, gjjlilv: number) { var _this = this, year = sdyear > gjjyear ? sdyear : gjjyear; if (type == 1) { var sdObj: any = _this.benxi(sdnum, sdyear, sdlilv); var gjjObj: any = _this.benxi(gjjnum, gjjyear, gjjlilv); if (sdObj.monthdataArray.length > gjjObj.monthdataArray.length) { var mergemonthdataArray = sdObj.monthdataArray.map((item: any, index: number) => { if (index < gjjObj.monthdataArray.length) { return { monthName: item.monthName, yuelixi: item.yuelixi + gjjObj.monthdataArray[index].yuelixi, yuebenjin: item.yuebenjin + gjjObj.monthdataArray[index].yuebenjin, leftFund: item.leftFund + gjjObj.monthdataArray[index].leftFund, }; } else { return { monthName: item.monthName, yuelixi: item.yuelixi, yuebenjin: item.yuebenjin, leftFund: item.leftFund, }; } }); } else { var mergemonthdataArray = gjjObj.monthdataArray.map((item: any, index: number) => { if (index < sdObj.monthdataArray.length) { return { monthName: item.monthName, yuelixi: item.yuelixi + sdObj.monthdataArray[index].yuelixi, yuebenjin: item.yuebenjin + sdObj.monthdataArray[index].yuebenjin, leftFund: item.leftFund + sdObj.monthdataArray[index].leftFund, }; } else { return { monthName: item.monthName, yuelixi: item.yuelixi, yuebenjin: item.yuebenjin, leftFund: item.leftFund, }; } }); } return { yuegong: sdObj.yuegong + gjjObj.yuegong, totalLixi: sdObj.totalLixi + gjjObj.totalLixi, totalPrice: sdObj.totalPrice + gjjObj.totalPrice, monthdataArray: mergemonthdataArray, totalDknum: parseFloat(sdObj.totalDknum) + parseFloat(gjjObj.totalDknum), year: year, }; } else if (type == 2) { var sdObj: any = _this.benjin(sdnum, sdyear, sdlilv); var gjjObj: any = _this.benjin(gjjnum, gjjyear, gjjlilv); if (sdObj.monthdataArray.length > gjjObj.monthdataArray.length) { var mergemonthdataArray = sdObj.monthdataArray.map((item: any, index: number) => { if (index < gjjObj.monthdataArray.length) { return { monthName: item.monthName, yuelixi: item.yuelixi + gjjObj.monthdataArray[index].yuelixi, yuebenjin: item.yuebenjin + gjjObj.monthdataArray[index].yuebenjin, leftFund: item.leftFund + gjjObj.monthdataArray[index].leftFund, }; } else { return { monthName: item.monthName, yuelixi: item.yuelixi, yuebenjin: item.yuebenjin, leftFund: item.leftFund, }; } }); } else { var mergemonthdataArray = gjjObj.monthdataArray.map((item: any, index: number) => { if (index < sdObj.monthdataArray.length) { return { monthName: item.monthName, yuelixi: item.yuelixi + sdObj.monthdataArray[index].yuelixi, yuebenjin: item.yuebenjin + sdObj.monthdataArray[index].yuebenjin, leftFund: item.leftFund + sdObj.monthdataArray[index].leftFund, }; } else { return { monthName: item.monthName, yuelixi: item.yuelixi, yuebenjin: item.yuebenjin, leftFund: item.leftFund, }; } }); } return { yuegong: sdObj.yuegong + gjjObj.yuegong, totalLixi: sdObj.totalLixi + gjjObj.totalLixi, totalPrice: sdObj.totalPrice + gjjObj.totalPrice, yuegongdijian: sdObj.yuegongdijian + gjjObj.yuegongdijian, totalDknum: parseFloat(sdObj.totalDknum) + parseFloat(gjjObj.totalDknum), year: year, monthdataArray: mergemonthdataArray, }; } }, // 房贷分两种支付方式：等额本息和等额本金，具体公式如下：等额本息：〔贷款本金×月利率×（1＋月利率）＾还款月数〕÷〔（1＋月利率）＾还款月数－1〕等额本金：每月还款金额 = （贷款本金 / 还款月数）+（本金 — 已归还本金累计额）×每月利率其中＾符号表示乘方。2个月就是2次方。 //等额本息计算 benxi(num: any, year: any, lilv: any) { //每月月供额=〔贷款本金×月利率×(1＋月利率)＾还款月数〕÷〔(1＋月利率)＾还款月数-1〕 var lilvnum: any = Number(Number(lilv / 100).toLocaleString(undefined)); var mouth = parseInt(year) * 12, mouthlilv = parseFloat(lilvnum) / 12, dknum = parseFloat(num) * 10000; //每月月供 var yuegong = (dknum * mouthlilv * Math.pow((1 + mouthlilv), mouth)) / (Math.pow((1 + mouthlilv), mouth) - 1); //总利息=还款月数×每月月供额-贷款本金 var totalLixi = mouth * yuegong - dknum; //还款总额 总利息+贷款本金 var totalPrice = totalLixi + dknum, leftFund = totalLixi + dknum; //循环月份 var monthdataArray = [], nowmouth = new Date().getMonth(), realmonth = 0; for (var i = 1; i <= mouth; i++) { realmonth = nowmouth + i; var yearlist = Math.floor(i / 12); realmonth = realmonth - 12 * yearlist; if (realmonth > 12) { realmonth = realmonth - 12 } //console.log(realmonth) //每月应还利息=贷款本金×月利率×〔(1+月利率)^还款月数-(1+月利率)^(还款月序号-1)〕÷〔(1+月利率)^还款月数-1〕 var yuelixi = dknum * mouthlilv * (Math.pow((1 + mouthlilv), mouth) - Math.pow((1 + mouthlilv), i - 1)) / (Math.pow((1 + mouthlilv), mouth) - 1); //每月应还本金=贷款本金×月利率×(1+月利率)^(还款月序号-1)÷〔(1+月利率)^还款月数-1〕 var yuebenjin = dknum * mouthlilv * Math.pow((1 + mouthlilv), i - 1) / (Math.pow((1 + mouthlilv), mouth) - 1); leftFund = leftFund - (yuelixi + yuebenjin); if (leftFund < 0) { leftFund = 0 } monthdataArray[i - 1] = { monthName: realmonth + "月", yuelixi: yuelixi, yuebenjin: yuebenjin, //剩余还款 leftFund: leftFund } } return { yuegong: yuegong, totalLixi: totalLixi, totalPrice: totalPrice, monthdataArray: monthdataArray, totalDknum: num, year: year }; }, //等额本金计算 benjin(num: any, year: any, lilv: any) { var lilvnum: any = Number(Number(lilv / 100).toLocaleString(undefined)); var mouth = parseInt(year) * 12, mouthlilv = parseFloat(lilvnum) / 12, dknum = parseFloat(num) * 10000, yhbenjin = 0; //首月还款已还本金金额是0 //每月应还本金=贷款本金÷还款月数 var everymonthyh = dknum / mouth //每月月供额=(贷款本金÷还款月数)+(贷款本金-已归还本金累计额)×月利率 var yuegong = everymonthyh + (dknum - yhbenjin) * mouthlilv; //每月月供递减额=每月应还本金×月利率=贷款本金÷还款月数×月利率 var yuegongdijian = everymonthyh * mouthlilv; //总利息=〔(总贷款额÷还款月数+总贷款额×月利率)+总贷款额÷还款月数×(1+月利率)〕÷2×还款月数-总贷款额 var totalLixi = ((everymonthyh + dknum * mouthlilv) + dknum / mouth * (1 + mouthlilv)) / 2 * mouth - dknum; //还款总额 总利息+贷款本金 var totalPrice = totalLixi + dknum, leftFund = totalLixi + dknum; //循环月份 var monthdataArray = [], nowmouth = new Date().getMonth(), realmonth = 0; for (var i = 1; i <= mouth; i++) { realmonth = nowmouth + i; var yearlist = Math.floor(i / 12); realmonth = realmonth - 12 * yearlist; if (realmonth > 12) { realmonth = realmonth - 12 } yhbenjin = everymonthyh * (i - 1); var yuebenjin = everymonthyh + (dknum - yhbenjin) * mouthlilv; //每月应还利息=剩余本金×月利率=(贷款本金-已归还本金累计额)×月利率 var yuelixi = (dknum - yhbenjin) * mouthlilv; leftFund = leftFund - yuebenjin; if (leftFund < 0) { leftFund = 0 } monthdataArray[i - 1] = { monthName: realmonth + "月", // yuelixi: yuelixi.toFixed(2), // //每月本金 // yuebenjin: everymonthyh.toFixed(2), // //剩余还款 // leftFund: leftFund.toFixed(2) yuelixi: yuelixi, //每月本金 yuebenjin: everymonthyh, //剩余还款 leftFund: leftFund } } return { // yuegong: yuegong.toFixed(2), // totalLixi: totalLixi.toFixed(2), // totalPrice: totalPrice.toFixed(2), // yuegongdijian: yuegongdijian.toFixed(2), yuegong: yuegong, totalLixi: totalLixi, totalPrice: totalPrice, yuegongdijian: yuegongdijian, monthdataArray: monthdataArray, totalDknum: num, year: year } }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { return { path: `/homeInfo/pages/mortgage/index`, } }, onShareTimeline: function () { return { query: `/homeInfo/pages/mortgage/index?test=1&token=${wx.getStorageSync("token")}`, } } }) -
index.scss
.mortgage-page { .van-cell { padding: 13px; font-size: 16px; margin-top: 5px; } .van-field__label ,.van-field__control { color: #333 !important; } .mortgage-btn { padding: 24px 13px 24px 12px; } } -
index.json
{ "navigationBarTitleText": "房贷计算", "usingComponents": { "van-field": "@vant/weapp/field/index", "van-cell-group": "@vant/weapp/cell-group/index", "van-button": "@vant/weapp/button/index", "HChosen": "/components/h-chosen/index" } }
计算结果
-
calculationResults/index
-
index.wxml
<view class="calculationResults"> <van-tabs active="{{ active }}" bind:change="onChange" color="#e90820" title-inactive-color="#666" title-active-color="#e90820"> <van-tab title="等额本息" name="等额本息"> <view class="calculationResults-top box-b red-bg white-color "> <van-row> <van-col span="24"> <view class="f14"> 贷款总额（万元） </view> <view class="f25 fmedium calculation-total "> {{benxiObj.totalDknum}} </view> </van-col> <van-col span="12"> <view class="f14"> 利息总额（万元） </view> <view class="f14"> {{benxiObj.totalLixi}} </view> </van-col> <van-col span="12"> <view class="f14"> 还款总额（万元） </view> <view class="f14"> {{benxiObj.totalPrice}} </view> </van-col> </van-row> </view> </van-tab> <van-tab title="等额本金" name="等额本金"> <view class="calculationResults-top box-b red-bg white-color "> <van-row> <van-col span="24"> <view class="f14"> 贷款总额（万元） </view> <view class="f25 fmedium calculation-total "> {{benjinObj.totalDknum}} </view> </van-col> <van-col span="12"> <view class="f14"> 利息总额（万元） </view> <view class="f14"> {{benjinObj.totalLixi}} </view> </van-col> <van-col span="12"> <view class="f14"> 还款总额（万元） </view> <view class="f14"> {{benjinObj.totalPrice}} </view> </van-col> </van-row> </view> </van-tab> </van-tabs> <view class="calculationResults-top white-bg" wx:if="{{sdnum}}"> <van-row> <van-col span="24"> <view class="calculation-type"> 商业贷款 </view> </van-col> <van-col span="24"> <view class="f14"> 每月还款（元） </view> <view class="f25 fmedium calculation-total "> {{ active === '等额本息' ? benxiObj.yuegong : benjinObj.yuegong }} </view> </van-col> <van-col span="8"> <view class="f14"> 贷款金额（万元） </view> <view class="f14"> {{sdnum}} </view> </van-col> <van-col span="8"> <view class="f14"> 利率（%） </view> <view class="f14"> {{sdlilv}} </view> </van-col> <van-col span="8"> <view class="f14"> 贷款年限（年） </view> <view class="f14"> {{sdyear}} </view> </van-col> </van-row> </view> <view class="calculationResults-top white-bg" wx:if="{{gjjnum}}"> <van-row > <van-col span="24"> <view class="calculation-type"> 公积金贷款 </view> </van-col> <van-col span="24"> <view class="f14"> 每月还款（元） </view> <view class="f25 fmedium calculation-total "> {{benxiObj.yuegong}} </view> </van-col> <van-col span="8"> <view class="f14"> 贷款金额（万元） </view> <view class="f14"> {{gjjnum}} </view> </van-col> <van-col span="8"> <view class="f14"> 利率（%） </view> <view class="f14"> {{gjjlilv}} </view> </van-col> <van-col span="8"> <view class="f14"> 贷款年限（年） </view> <view class="f14"> {{gjjyear}} </view> </van-col> </van-row> </view> <view class="f14 color-999 title box-b"> 以上结果仅供参考，请以当地实际情况为主 </view> <view class="calculationResults-btn box-b"> <van-button size="large" color="#a31f23" block bind:click="onDetail">查看月供详情</van-button> </view> </view> -
index.ts
Page({ /** * 页面的初始数据 */ data: { sdyear: '', sdnum: '', sdlilv: '', gjjyear: '', gjjlilv: '', gjjnum: '', benxiObj: {}, benjinObj: {}, active: '等额本息' }, /** * 生命周期函数--监听页面加载 */ onLoad(options:any) { if(options.sdlilv || options.gjjlilv) { this.setData({ sdlilv: options.sdlilv, sdnum: options.sdnum, sdyear: options.sdyear, gjjyear: options.gjjyear, gjjlilv: options.gjjlilv, gjjnum: options.gjjnum, active: options.active ? options.active : this.data.active, benxiObj: JSON.parse(options.benxiObj), benjinObj: JSON.parse(options.benjinObj), }) } }, /** * 生命周期函数--监听页面显示 */ onShow() { }, onChange(e:any) { this.setData({ active: e.detail.name }) }, onDetail() { const tmp:any = this.data; const monthdataArray = this.data.active === '等额本息' ? tmp.benxiObj.monthdataArray : tmp.benjinObj.monthdataArray; wx.navigateTo({ url: `/homeInfo/pages/monthlySupply/index?monthdataArray=${JSON.stringify(monthdataArray)}` }); }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, }) -
index.scss
.calculationResults { .calculationResults-top { padding: 10px; margin-top: 5px; &.calculationResults-top { margin-bottom: 15px; } .calculation-type { margin-bottom: 5px; } view { line-height: 22px; } .calculation-total { margin-bottom: 10px; } .gjj-box { margin-top: 15px; } } .title { padding-left: 10px; } .calculationResults-btn { padding: 24px 13px 24px 12px; } } -
index.json
{ "navigationBarTitleText": "计算结果", "usingComponents": { "van-tab": "@vant/weapp/tab/index", "van-tabs": "@vant/weapp/tabs/index", "van-button": "@vant/weapp/button/index", "van-row": "@vant/weapp/row/index", "van-col": "@vant/weapp/col/index" } }
月供详情
-
monthlySupply/index
-
index.wxml
<scroll-view class="table" scroll-y > <view class="sticky-box" > <view class="table__head" > <view class="table__head__td" wx:for="{{dataAttribute}}" wx:key="attrIndex" wx:for-index="attrIndex" wx:for-item="attrItem"> <text class="table__head__td__text" >{{attrItem.title}}</text> </view> </view> <view class="table__row" wx:for="{{monthdataArray}}" wx:key="dataIndex" > <text class="table__row__td" >{{item.monthName}}</text> <text class="table__row__td" >{{item.yuegong}}</text> <text class="table__row__td" >{{item.yuebenjin}}</text> <text class="table__row__td" >{{item.yuelixi}}</text> <text class="table__row__td" >{{item.leftFund}}</text> </view> </view> </scroll-view> -
index.ts
Page({ /** * 页面的初始数据 */ data: { monthdataArray: [], dataAttribute: [ { title: '月份', }, { title: '月供(元)', }, { title: '本金(元)', }, { title: '利息(元)', }, { title: '剩余贷款(元)', }, ], // tableHeight: (20 + 1) * 96, // tableWidth: 200 * 6 + 60 }, /** * 生命周期函数--监听页面加载 */ onLoad(options:any) { if(options.monthdataArray) { this.setData({ monthdataArray: JSON.parse(options.monthdataArray) }) } }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } }) -
index.scss
.table{ display: block; position: relative; overflow: scroll; width: 100%; height: 100%; .table__head{ height: 96rpx; white-space: nowrap; position: sticky; top: 0rpx; z-index: 100; height: 88rpx; font-size: 24rpx; line-height: 88rpx; color: #aaabbd; background-color: #f8f8f8; border-bottom: 2rpx solid #ecf1f8; background-color: #fff; white-space: nowrap; display: flex; } .table__head__td{ width: 25%; display: flex; justify-content: flex-start; align-items: center; background-color: #fff; box-sizing: border-box; position: relative; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; &:first-child { padding-left: 10px; box-sizing: border-box; } } .table__head__td__text{ display: inline; } .table__row{ position: relative; height: 96rpx; white-space: nowrap; display: flex; justify-content: flex-start; align-items: center; border-bottom: 2rpx solid #ecf1f8; } .table__row__td{ white-space: nowrap; width: 25%; display: inline-block; background-color: #fff; box-sizing: border-box; font-size: 26rpx; line-height: 96rpx; position: relative; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; &:first-child { padding-left: 10px; box-sizing: border-box; } } } -
index.json
{ "navigationBarTitleText": "月供详情", "usingComponents": {} }
