微信小程序绿色房产贷款计算器设计制作开发教程

本文给大家带来的是微信小程序绿色房产贷款计算器设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<scroll-view class="container" scroll-y="true" scroll-top="{{scrollTop}}" style="position: absolute; left: 0; top:0; bottom: 0; right: 0;">
    <view class="index_banner">
        <view class="block1"></view>
        <view class="count_hd">
            <view class="count_bd">
                <text class="Info">年度利息(元)</text>
                <text class="num fs2">{{form.monthBack}}</text>
            </view>
            <view class="count_bd text-center" style="padding-top:.5em;">
                <text class="Info">每月利息(元)</text>
                <text class="num">{{form.decrease}}</text>
            </view>
        </view>
        <view class="block1"></view>
        <view class="block1"></view>
        <view class="count_hd">
            <view class="count_bd">
                <text class="Info">还款总额(元)</text>
                <text class="num">{{form.totalInterest}}</text>
            </view>
            <view class="count_bd text-center">
                <text class="Info">总支付利息(元)</text>
                <text class="num">{{form.totalBack}}</text>
            </view>
        </view>
        <button plain="true" hidden="{{form.monthBack=='00.00'}}" class="myloanBtn" bindtap="onLoan">我要贷款</button>
    </view>
    <form class="main" bindreset="formReset">
        <view class="weui-cells">
            <view class="weui-cell">
                <view class="weui-cell__hd"><view class="weui-label">房产总值(万元)</view></view>
                <view class="weui-cell__bd">
                    <input class="weui-input" type="number" value="{{houseCount}}" maxlength="5" bindinput="onHoseCount"  placeholder="请输入房产总值"/>
                </view>
            </view>
            <view class="weui-cell">
                <view class="weui-cell__hd"><view class="weui-label">贷款金额(万元)</view></view>
                <view class="weui-cell__bd">
                    <input class="weui-input" type="number" value="{{loan || ''}}" maxlength="3" bindinput="oninput"  placeholder="请输入贷款金额"/>
                </view>
            </view>
            <view class="weui-cell weui-cell_access">
                <view class="weui-cell__bd">
                    <text>贷款抵押率(%)</text>
                </view>
                <view class="weui-cell__ft_in-access after">
                    {{tableIndex!=null?table[tableIndex].pledge:''}}
                </view>
            </view>
            <view class="weui-cell weui-cell_access">
                <view class="weui-cell__bd">
                    <text>贷款年利率(%)</text>
                </view>
                <view class="weui-cell__ft_in-access after">
                    {{lilv?lilv+'%':''}}
                </view>
            </view>
            <view class="weui-cell weui-cell_access">
                <view class="weui-cell__bd">
                    <text>贷款年限</text>
                </view>
                <view class="weui-cell__ft_in-access">
                    <picker bindchange="yearChange" value="{{yearIndex}}" range="{{years}}" range-key="name">
                        {{years[yearIndex]['name'] || '请选择贷款年限'}}
                    </picker>
                </view>
            </view>
            <view class="weui-cell weui-cell_access">
                <view class="weui-cell__bd">
                    <text>还款方式</text>
                </view>
                <view class="weui-cell__ft_in-access after">
                    先息后本
                </view>
            </view>
        </view>
        <text class="main_info">计算金额仅供参考,具体咨询办理人员</text>
        <view class="btns">
            <button class="clear" form-type="reset">清零</button>
            <button class="compute" type="primary" bindtap="onCompute">计算</button>
        </view>
    </form>
</scroll-view>

二、wxss样式文件代码如下：

.index_banner{
    background-color: #00C2C2;height: auto;color: #fff;
    padding: 10rpx 80rpx 20rpx;box-sizing: border-box;
}
.weui-label{width: 115px}
.after:after {
    display: none;
}
.text-center{text-align: center}
.count_hd{
    display: flex;
}
.count_bd{
    flex-direction: row;
    flex: 1;
}
.count_bd text{display: block;}
.count_bd .num{font-size: 1.6em}
.count_bd .fs2{font-size: 2em}

.weui-input {
text-align:right;
}
.main_info{color: #666;width: 90%;margin:.5em 4%;display: block;font-size: .9em;}
.btns{text-align: center;margin-top:1em;}
.btns button{display: inline-block;width: 45%;margin: 2%;}

.compute{background-color: #04C1C3 !important;}

button[plain]  {
    color:#fff;
    border:1px solid #fff;
    font-size: 1em;
    background-color:transparent;
}
.myloanBtn{margin: 30rpx auto 20rpx;width: 400rpx}

三、js页面代码如下：

//获取应用实例
// import request from "../../utils/request";
import util from "../../vendor/assets/plugins/loan";
var app = getApp();

const years = []

for (let i = 1; i <= 10; i++) {
    let name=i+'年(循环贷)';
    let year={name:name,value:i}
    years.push(year)
}

Page({
    data: {
        years:years,
        yearIndex:null,
        tableIndex:null,
        lilv:null,
        loan:null,
        houseCount:null,
        scrollTop: 0,
        form:{
            monthBack:'00.00',//每月还款
            totalBack:'00.00',//每年利息
            decrease:'00.00',//总利息
            totalInterest:'00.00',//总金额
        },
        table:[
            {
                pledge:'<75%',
                data:[
                    {price:100,lilv:6.525},
                    {price:200,lilv:6.7425},
                    {price:300,lilv:6.96},
                ]
            },
            {
                pledge:'75%-85%',
                data:[
                    {price:100,lilv:6.7425},
                    {price:200,lilv:6.96},
                    {price:300,lilv:7.1775},
                ]
            },
            {
                pledge:'85%-90%',
                data:[
                    {price:100,lilv:6.96},
                    {price:200,lilv:7.1775},
                    {price:300,lilv:7.395},
                ]
            },
        ]
    },
    onShow:function(){
        let that=this;
        wx.getStorage({
            key: 'houseCount',
            success: function(res) {
                let houseCount=res.data;
                let num=parseInt(that.data.loan);//可能优质-改变目标
                let maxnum=parseInt(houseCount*0.9);//可能优质
                if(num && maxnum){
                    num=num>maxnum?maxnum:num;
                    let lilv=that._lvCount(houseCount,num);
                    that.setData({
                        houseCount: houseCount,
                        loan: num,
                        lilv:lilv,
                        'form.monthBack': '00.00',
                        'form.decrease':'00.00',
                        'form.totalBack':'00.00',
                        'form.totalInterest':'00.00',
                    })
                }else{
                    that.setData({
                        houseCount: houseCount,
                    })
                }
            }
        })
    },
    onLoan:function(){
        wx.switchTab({
            url: '../loan/index'
        })
    },
    //贷款年限
    yearChange:function(e){
        this.setData({
            yearIndex: e.detail.value
        })
    },
/*    //抵押率--删除
    pledgeChange:function(e){
        console.log('rate',e.detail.value)
        let lilv=this._lvCount(e.detail.value,this.data.loan);
        console.log(lilv)
        this.setData({
            tableIndex: e.detail.value,
            lilv:lilv
        })
    },*/
    onHoseCount:function(ev){
        var HoseCount=parseInt(ev.detail.value);
        this.setData({
            houseCount: HoseCount,
            tableIndex:null,
            lilv:null,
            loan:null
        })
    },
    //金额输入
    oninput:function(ev){
        var num=parseInt(ev.detail.value);
        var maxnum=parseInt(this.data.houseCount*0.9);
        if(isNaN(maxnum) && num>300){
            num=300;
        }
        if(!isNaN(maxnum) && num>maxnum || num>=300){
            num=maxnum>=300?300:maxnum;
        }
        if(num<0){
            num=0;
        }
        let lilv=this._lvCount(this.data.houseCount,num);
        this.setData({
            loan: num,
            lilv:lilv
        })
    },
    /**
     * 利率计算
     * @param pledgeIdx //抵押率索引 0-75%;1-75%~85%;2-85%~90%
     * @param loan //贷款金额 0-100万以下 1-100万~200万 2-200万~300万
     * return lilv利率
     */
    _lvCount:function(HoseCount,loan){
        if(!HoseCount || !loan){
            return false;
        }
        HoseCount=parseInt(HoseCount);
        loan=parseInt(loan);let lilv;
        //计算抵押率
        let pledgeIdx=function(){
            let gl=loan/HoseCount;
            console.log('gl',gl)
            if(gl>0.75 && gl<=0.85){
                return 1;
            }
            if(gl>0.85 && gl<=0.9){
                return 2;
            }
            return 0;
        }();
        //显示抵押率范围标示
        this.setData({
            tableIndex: pledgeIdx
        });
        //返回利率
        let table=this.data.table;
        let curData=table[pledgeIdx].data;
        switch (true){
            case (loan<=curData[0].price):
                lilv=curData[0].lilv;
                break;
            case (loan<=curData[1].price):
                lilv=curData[1].lilv;
                break;
            case (loan<=curData[2].price):
                lilv=curData[2].lilv;
                break;
        }
        return lilv;
    },
    //清空重置
    formReset:function(){
        console.log('reset触发')
        this.setData({
            loan: null,
            houseCount: null,
            yearIndex:null,
            tableIndex:null,
            lilv:null
        })
    },
    onCompute: function() {
        let data=this.data;

        if(!data.loan || !data.yearIndex || !data.houseCount){
            wx.showModal({
                title: '提示',
                showCancel:false,
                content: '您有选项未填写',
            })
            return false;
        }
        let dataRank=data.years[data.yearIndex].value;
        console.log('loan',data.lilv,data.loan,dataRank);
        let callback=util.Floan(data.lilv,data.loan,dataRank);
        wx.setStorage({
            key:"houseCount",
            data:data.houseCount
        })
        this.setData({
            'form.monthBack': callback[0],
            'form.decrease':callback[1],
            'form.totalBack':callback[2],
            'form.totalInterest':callback[3],
            scrollTop:0
        })
    },
});

模板简介：该模板名称为【微信小程序绿色房产贷款计算器设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。