小程序上实现房贷计算

标签：index monthdataArray leftFund form 房贷 yuelixi 程序 item 计算

功能：实现房贷计算，区分等额本息，等额本金，查看月供详情

效果图

组件

存放路径 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: {}, // 本金
    },

    /**
    * 生命周期函数--监听页面加载
    */
    onl oad(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: '等额本息'
    },

    /**
    * 生命周期函数--监听页面加载
    */
    onl oad(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


  },

  /**
  * 生命周期函数--监听页面加载
  */
  onl oad(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": {}
  }

标签：index,monthdataArray,leftFund,form,房贷,yuelixi,程序,item,计算
From： https://www.cnblogs.com/DCL1314/p/18140051

小程序上实现房贷计算

组件

房贷计算

计算结果

月供详情

相关文章

赞助商

阅读排行