贷款测算应用PC端

卡耐
117 阅读6分钟

需要引入jQuery，layui,validate

HTML部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../贷款测算/imags/index.css" />
    <link rel="stylesheet" href="../贷款测算/imags/layui.css" />
    <script src="../贷款测算/js/jquery-1.8.3.min.js"></script>
    <script src="../贷款测算/js/jquery.validate.js"></script>
    <script src="../贷款测算/js/layui/layui/layui.js"></script>
    <script src="../贷款测算/js/layui/layui/css/layui.css"></script>
  </head>

  <body>
    <div class="w-rights">
      <!-- Content Header (Page header) -->
      <!-- Main content -->
      <div class="w-right-content">
        <div class="col-xs-12" style="background-color: #ffffff">
          <div class="w-right-head" style="text-align: center; font-size: 24px">贷款测算</div>
          <div class="box-header" style="background-color: #f2f8ff">
            <h2 class="box-title" style="color: #3885d1; font-weight: bold">&nbsp;贷款信息</h2>
            <font color="red"> （注:输入贷款期限自动计算月利率）</font>
          </div>
          <form name="dkjsqform" id="dkjsqform" novalidate="novalidate">
            <table class="table table-bordered">
              <tbody>
                <tr class="col-xs-12">
                  <td>贷款金额:&nbsp;</td>
                  <td>
                    <div class="input-group form-group">
                      <input class="form-control" id="dkje" name="dkje" type="text" />
                      <span class="error"></span>
                      <span class="input-group-addon">元</span>
                    </div>
                  </td>
                  <td>期限:</td>
                  <td>
                    <div class="input-group form-group">
                      <input class="form-control" id="dkqs" name="dkqs" type="text" />
                      <span class="error"></span>
                      <span class="input-group-addon">月 </span>
                    </div>
                  </td>
                  <td>日期:</td>
                  <td>
                    <div class="input-group form-group">
                      <div class="layui-inline">
                        <!-- 注意：这一层元素并不是必须的 -->
                        <input type="text" class="form-control" id="dkrq" name="dkrq" />
                      </div>
                      <span class="error"></span>
                      <div class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                      </div>
                    </div>
                  </td>
                  <td>还款方式:</td>
                  <td>
                    <select class="form-control" style="width: 220px" id="dkhkfs" name="dkhkfs">
                      <option value="01">等额本息</option>
                      <option value="02">等额本金</option>
                    </select>
                  </td>
                </tr>
                <tr class="col-xs-12">
                  <td>商业利率:</td>
                  <td>
                    <div class="input-group form-group">
                      <input class="form-control" name="yll" id="yll" type="text" />
                      <span class="error"></span>
                      <span class="input-group-addon"> ‰ </span>
                    </div>
                  </td>
                  <td>公积金<br />利率:</td>
                  <td>
                    <div class="input-group form-group">
                      <input class="form-control" name="yll1" id="gjjyll" type="text" />
                      <span class="error"></span>
                      <span class="input-group-addon"> ‰ </span>
                    </div>
                  </td>

                  <td style="width: 60px">还款日:</td>
                  <td>
                    <div class="form-group">
                      <select class="form-control" id="jxfs" name="jxfs" style="width: 140px">
                        <option value="">贷款发放日还款</option>

                        <option value="1">每月1日</option>

                        <option value="2">每月2日</option>

                        <option value="3">每月3日</option>

                        <option value="4">每月4日</option>

                        <option value="5">每月5日</option>

                        <option value="6">每月6日</option>

                        <option value="7">每月7日</option>

                        <option value="8">每月8日</option>

                        <option value="9">每月9日</option>

                        <option value="10">每月10日</option>

                        <option value="11">每月11日</option>

                        <option value="12">每月12日</option>

                        <option value="13">每月13日</option>

                        <option value="14">每月14日</option>

                        <option value="15">每月15日</option>

                        <option value="16">每月16日</option>

                        <option value="17">每月17日</option>

                        <option value="18">每月18日</option>

                        <option value="19">每月19日</option>

                        <option value="20">每月20日</option>

                        <option value="21">每月21日</option>

                        <option value="22">每月22日</option>

                        <option value="23">每月23日</option>

                        <option value="24">每月24日</option>

                        <option value="25">每月25日</option>

                        <option value="26">每月26日</option>

                        <option value="27">每月27日</option>

                        <option value="28">每月28日</option>
                      </select>
                    </div>
                  </td>

                  <td>
                    <div class="input-group form-group">
                      <label>
                        <input type="checkbox" name="etf" id="etf" />
                        <span style="color: red">二套房</span>
                      </label>
                    </div>
                  </td>
                  <td style="width: 100px">
                    <div class="form-group">
                      <label>
                        <button id="jsbtn" type="button" class="btn btn-block btn-primary">计算</button>
                      </label>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </form>
          <div class="box-header" style="background-color: #f2f8ff">
            <h2 class="box-title" style="color: #3885d1; font-weight: bold">&nbsp;商业贷款</h2>
          </div>
          <div>
            <table class="table table-bordered">
              <tbody>
                <tr class="col-xs-12">
                  <td style="width: 60px">应还<br />月供:</td>
                  <td>
                    <div class="input-group form-group">
                      <input id="yhje" class="form-control" name="syyhyg" id="yhyg" type="text" />
                      <span class="input-group-addon">元</span>
                    </div>
                  </td>
                  <td style="width: 60px">本金<br />合计:</td>
                  <td>
                    <div class="input-group form-group">
                      <input class="form-control" name="sybjhj" id="bjhj" type="text" />
                      <span class="input-group-addon">元</span>
                    </div>
                  </td>
                  <td style="width: 60px">利息<br />合计:</td>
                  <td>
                    <div class="input-group form-group">
                      <input class="form-control" name="sylxhj" id="lxhj" value="" type="text" />
                      <span class="input-group-addon"> 元</span>
                    </div>
                  </td>
                  <td style="width: 60px">本息<br />合计:</td>
                  <td>
                    <div class="input-group form-group">
                      <input class="form-control" name="sybxhj" id="bxhj" value="" type="text" />
                      <span class="input-group-addon"> 元</span>
                    </div>
                  </td>
                  <td style="width: 10px"></td>
                  <td style="width: 110px">
                    <div class="form-group">
                      <label>
                        <button type="button" id="fdhkjhbutton" class="btn btn-block btn-primary">还款计划</button>
                      </label>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="fdhkjhbuttontext"
              style="width: 100%; height: 100%; border: 1px solid skyblue; display: none"
              id="fdhkjhbuttontext"
            >
              <!-- 点还款计划会显示与隐藏该表格,还款计划变成收回表格字样 设计分页，推荐十条一页 -->
              <table width="100%" id="sydkbg">
                <tr>
                  <th>还款日期</th>
                  <th>应还本金</th>
                  <th>应还利息</th>
                  <th>本息合计</th>
                  <th>月利率(‰)</th>
                </tr>
              </table>
              <div id="test1"></div>
            </div>
            <div>
              <div class="danbaos" style="width: 100%; height: 500px; border: 1px solid skyblue; display: none">
                <div style="height: 500px; overflow-y: auto">
                  <div id="fdhkjhdiv"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="box-header" style="background-color: #f2f8ff">
            <h2 class="box-title" style="color: #3885d1; font-weight: bold">&nbsp;公积金贷款</h2>
          </div>
          <div>
            <table class="table table-bordered">
              <tbody>
                <tr class="col-xs-12">
                  <td style="width: 60px">应还<br />月供:</td>
                  <td>
                    <div class="input-group form-group">
                      <input class="form-control" name="gjjyhyg" id="gjjyhyg" type="text" />
                      <span class="input-group-addon">元</span>
                    </div>
                  </td>
                  <td style="width: 60px">本金<br />合计:</td>
                  <td>
                    <div class="input-group form-group">
                      <input class="form-control" name="gjjbjhj" id="gjjbjhj" type="text" />
                      <span class="input-group-addon">元</span>
                    </div>
                  </td>
                  <td style="width: 60px">利息<br />合计:</td>
                  <td>
                    <div class="input-group form-group">
                      <input class="form-control" name="gjjlxhj" id="gjjlxhj" type="text" />
                      <span class="input-group-addon"> 元</span>
                    </div>
                  </td>
                  <td style="width: 60px">本息<br />合计:</td>
                  <td>
                    <div class="input-group form-group">
                      <input class="form-control" name="gjjbxhj" id="gjjbxhj" type="text" />
                      <span class="input-group-addon"> 元</span>
                    </div>
                  </td>
                  <td style="width: 10px"></td>
                  <td style="width: 110px">
                    <div class="form-group">
                      <label>
                        <button type="button" id="gjjhkjhbutton" class="btn btn-block btn-primary">还款计划</button>
                      </label>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="gjjbuttontext fdhkjhbuttontext"
              style="width: 100%; height: 100%; border: 1px solid skyblue; display: none"
            >
              <!-- 点还款计划会显示与隐藏该表格,还款计划变成收回表格字样 设计分页，推荐十条一页 -->
              <table width="100%" id="gjjbg">
                <tr id="gjjbgg">
                  <th>还款日期</th>
                  <th>应还本金</th>
                  <th>应还利息</th>
                  <th>本息合计</th>
                  <th>月利率(‰)</th>
                </tr>
              </table>
              <div id="test2"></div>
            </div>
            <div>
              <div class="danbao" style="width: 100%; height: 500px; border: 1px solid skyblue; display: none">
                <div style="height: 500px; overflow-y: auto">
                  <div id="gjjhkjhdiv"></div>
                </div>
              </div>
            </div>
          </div>

          <!-- /.box2 -->

          <!-- box3 -->
          <div class="box-header" style="background-color: #f2f8ff">
            <h2 class="box-title" style="color: #3885d1; font-weight: bold">&nbsp;公积金贷款与商业贷款对比</h2>
          </div>
          <div>
            <form name="jsform" id="jsform">
              <table class="table table-bordered">
                <tbody>
                  <tr>
                    <td style="width: 100px">商业贷款本息合计:</td>
                    <td style="width: 14%">
                      <div class="input-group form-group">
                        <input class="form-control" name="sydkbxhj" id="sydkbxhj" type="text" />
                        <span class="input-group-addon">元</span>
                      </div>
                    </td>
                    <td style="width: 100px">公积金贷款本息合计:</td>
                    <td style="width: 14%">
                      <div class="input-group form-group">
                        <input class="form-control" name="gjjdkbxhj" id="gjjdkbxhj" type="text" />
                        <span class="input-group-addon">元 </span>
                      </div>
                    </td>
                    <td style="width: 60px">合计节省:</td>
                    <td style="width: 14%">
                      <div class="input-group form-group">
                        <input class="form-control" name="gjjdkjs" id="gjjdkjs" type="text" />
                        <span class="input-group-addon">元 </span>
                      </div>
                    </td>
                    <td style="width: 19%">
                      <div id="dkcssm"></div>
                      <div></div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </form>
          </div>
          <!-- box3 -->
        </div>
        <!-- /.col -->
      </div>
    </div>
  </body>
  <!-- <script src="../贷款测算/js.js/area-json.js"></script> -->
  <script src="../贷款测算/js/index.js"></script>
</html>

css部分

@media screen and (min-width: 1000px) {
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .w-right-content {
    width: 1200px;
    margin: 0 auto;
  }
  h2.box-title {
    display: inline-block;
    font-size: 18px;
    margin: 0;
    line-height: 1;
  }
  .box-header {
    color: #444;
    display: block;
    padding: 10px;
    position: relative;
  }
  .table-bordered > thead > tr > th,
  .table-bordered > tbody > tr > th,
  .table-bordered > tfoot > tr > th,
  .table-bordered > thead > tr > td,
  .table-bordered > tbody > tr > td,
  .table-bordered > tfoot > tr > td {
    border: 1px solid #f4f4f4;
  }
  .col-xs-12 {
    width: 100%;
  }
  .table > thead > tr > th,
  .table > tbody > tr > th,
  .table > tfoot > tr > th,
  .table > thead > tr > td,
  .table > tbody > tr > td,
  .table > tfoot > tr > td {
    padding: 8px;
    line-height: 22px;
    vertical-align: top;
    border-top: 1px solid #ddd;
  }
  .input-group .form-control:first-child,
  .input-group-addon:first-child,
  .input-group-btn:first-child > .btn,
  .input-group-btn:first-child > .btn-group > .btn,
  .input-group-btn:first-child > .dropdown-toggle,
  .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
  .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .input-group-addon,
  .input-group-btn,
  .input-group .form-control {
    display: table-cell;
  }
  .input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    outline: none;
    margin-bottom: 0;
  }
  .input-group .input-group-addon {
    border-radius: 0;
    border-color: #d2d6de;
    background-color: #fff;
  }
  .form-group {
    margin-left: 0px !important;
    margin-bottom: 0px !important;
  }
  .input-group {
    position: relative;
    display: table;
    border-collapse: separate;
  }
  .table {
    color: #777;
  }
  table {
    border-spacing: 0;
    border-collapse: collapse;
  }
  .input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #888;
    text-align: center;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .form-control {
    border-radius: 0;
    box-shadow: none;
    border-color: #d2d6de;
  }
  .form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333333;
    background-color: #fff;
    /* background-image: none; */
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  }
  .btn-primary {
    background-color: #aad5ff;
    border: 0;
    color: #196cbf;
    border-radius: 0px;
  }
  .btn {
    border-radius: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid transparent;
  }

  .btn-block {
    display: block;
    width: 100%;
  }
  .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
  }
  select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    outline: none;
  }
  label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
  }
  .col-xs-1,
  .col-xs-2,
  .col-xs-3,
  .col-xs-4,
  .col-xs-5,
  .col-xs-6,
  .col-xs-7,
  .col-xs-8,
  .col-xs-9,
  .col-xs-10,
  .col-xs-11,
  .col-xs-12 {
    float: left;
  }
  table.table-bordered tbody th,
  table.table-bordered tbody td {
    border-left-width: 0;
    border-bottom-width: 0;
  }
  .table-bordered > thead > tr > th,
  .table-bordered > tbody > tr > th,
  .table-bordered > tfoot > tr > th,
  .table-bordered > thead > tr > td,
  .table-bordered > tbody > tr > td,
  .table-bordered > tfoot > tr > td {
    border: 1px solid #f4f4f4;
  }
  .input-group-addon,
  .input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
  }
  .form-control {
    border-radius: 0;
    box-shadow: none;
    border-color: #d2d6de;
  }
  span.error {
    position: absolute;
    width: 100px;
    left: 0px;
    top: 32px;
  }
  .fdhkjhbuttontext table tr:first-child {
    background-color: #f2f8ff;
    height: 44px;
    line-height: 44px;
    color: #5a728a;
  }
  .fdhkjhbuttontext table tr:first-child {
    background-color: #f2f8ff;
    height: 44px;
    line-height: 44px;
    color: #5a728a;
  }
  .fdhkjhbuttontext table tr {
    height: 40px;
  }
  .fdhkjhbuttontext table tr td {
    text-align: center;
    border: 1px solid #f4f4f4;
  }
}
#test1 {
  float: right;
}
#test2 {
  float: right;
}

js部分

// 数据
var list = []
var lists = []
function a (list, pageNumber, pageSize) {
  var start = (pageNumber - 1) * pageSize;
  var end = pageNumber * pageSize;
  var newList = list.slice(start, end);
  return newList;
}
function getData (appId, interfaceId, obj, cb) {
  var time = new Date().valueOf()
  var form = new FormData()
  form.append('charset', 'UTF-8')
  form.append('version', '1.0')
  form.append('header', '{}')
  form.append('app_id', appId)
  form.append('interface_id', interfaceId)
  form.append('biz_content', obj)
  form.append('timestamp', time)
  form.append('origin', '0')

  $.ajax({
    type: 'POST',
    url: 'https://zwfw.gansu.gov.cn/jpaas-jags-server/interface/createsign',
    dataType: 'json',
    processData: false,
    mimeType: 'multipart/form-data',
    contentType: false,
    data: form,
    success: function (res) {
      if (res.success === true) {
        form.append('sign', res.data.sign)
        $.ajax({
          type: 'POST',
          url: 'https://zwfw.gansu.gov.cn/jpaas-jags-server/interface/gateway',
          dataType: 'json',
          data: form,
          processData: false,
          mimeType: 'multipart/form-data',
          contentType: false,
          success: function (res) {
            if (res.code === 200) {
              var data = JSON.parse(res.data)
              // list.push(data.data.data)
              list = data.data.data
              cb(list)
            }
          }
        })
      }
    }
  })
}
function getDatas (appId, interfaceId, obj, cb) {
  var time = new Date().valueOf()
  var form = new FormData()
  form.append('charset', 'UTF-8')
  form.append('version', '1.0')
  form.append('header', '{}')
  form.append('app_id', appId)
  form.append('interface_id', interfaceId)
  form.append('biz_content', obj)
  form.append('timestamp', time)
  form.append('origin', '0')

  $.ajax({
    type: 'POST',
    url: 'https://zwfw.gansu.gov.cn/jpaas-jags-server/interface/createsign',
    dataType: 'json',
    processData: false,
    mimeType: 'multipart/form-data',
    contentType: false,
    data: form,
    success: function (res) {
      if (res.success === true) {
        form.append('sign', res.data.sign)
        $.ajax({
          type: 'POST',
          url: 'https://zwfw.gansu.gov.cn/jpaas-jags-server/interface/gateway',
          dataType: 'json',
          data: form,
          processData: false,
          mimeType: 'multipart/form-data',
          contentType: false,
          success: function (res) {
            if (res.code === 200) {
              var data = JSON.parse(res.data)
              // lists.push(data.data.data)
              lists = data.data.data
              cb(lists)
            }
          }
        })
      }
    }
  })
}

//执行一个laydate实例
layui.use('laydate', function () {
  var laydate = layui.laydate;
  //执行一个laydate实例
  laydate.render({
    elem: '#dkrq', //指定元素
    value: new Date(),

  });
});

$("#dkrq").on("focus", function () {
  $(this).css("border", "1px solid #3c8dbc")
})
// 失去焦点时，边框变灰
$("#dkrq").on("blur", function () {
  $(this).css("border", "1px solid #d2d6de")
})

// 利用validate.js插件验证贷款金额
$(function () {
  $("#dkjsqform").validate({
    rules: {
      dkje: {
        required: true,
        number: true,
        min: 0,
        max: 10000000
      },
      dkqs: {
        required: true,
        number: true,
        min: 0,
        max: 1200,
      },
      dkrq: {
        required: true,
        date: true
      },
      yll: {
        required: true,
        number: true,
        min: 0,
        max: 10
      },
      yll1: {
        required: true,
        number: true,
        min: 0,
        max: 10
      }
    },
    messages: {
      dkje: {
        required: "不能为空",
        number: "请输入正确的数字",
        min: "最小值不能小于 0",
        max: "最大值不能超过 10000000"
      },
      dkqs: {
        required: "不能为空",
        number: "请输入正确的数字",
        min: "最小值不能小于 0",
        max: "最大值不能超过 1200",
      },
      dkrq: {
        required: "请输入贷款日期",
        date: "请输入正确的日期格式"
      },
      yll: {
        required: "请输入月利率",
        number: "请输入数字",
        min: "最小值不能小于0",
        max: "最大值不能超过 10"
      },
      yll1: {
        required: "请输入月利率",
        number: "请输入数字",
        min: "最小值不能小于0",
        max: "最大值不能超过 10"
      }
    },
    // errorPlacement 函数，用来放置错误提示的位置
    errorPlacement: function (error, element) {
      // 错误提示放置在下一个节点，并且设置字体颜色为红色
      error.appendTo(element.next()).css("color", "red")
    },


  })
})

// 根据form的dkrq的变化，计算月利率
$("#dkqs").on("change", function () {
  // 判断商业利率1年期以内住房贷款基准利率的是4.35%，2-5年（含5年）的是4.75%，5年期以上的是4.9%；
  if ($("#dkqs").val() <= 12) {
    $('#yll').val(4.35)
  }
  if ($("#dkqs").val() > 12 && $("#dkqs").val() <= 60) {
    $('#yll').val(4.75)
  }
  if ($("#dkqs").val() > 60) {
    $('#yll').val(4.9)
    $('#gjjyll').val(3.25)
  }
  // 判断公积金利率住房公积金贷款利率5年期以内的（含5年）是2.75%，5年期以上的3.25%。
  if ($("#dkqs").val() <= 60) {
    $('#gjjyll').val(2.75)
  }
})


// 点击计算按钮，校验form表单，获取输入的数据，并调用request函数，获取数据
$("#jsbtn").click(function (e) {
  e.preventDefault()
  // 校验form表单
  if ($("#dkjsqform").valid()) {
    var dkje = $("#dkje").val()
    var dkqs = $("#dkqs").val()
    var dkrq = $("#dkrq").val()
    // 判断dkhkfs为01时，它的值就是plgjjdebx，否则就是plgjjdebj
    var dkhkfs = $("#dkhkfs").val() == "01" ? "plgjjdebx" : "plgjjdebj"
    var yll = $("#yll").val()
    var yll1 = $("#gjjyll").val()
    // var etf = $("#etf").val()
    // 判断是否是二套房，如果是，则设置etf为true，否则为false
    var etf = $("#etf").is(":checked") ? "true" : "false"
    // 当etf为true时，利率调整10%
    if (etf == "true") {
      $("#yll").val((yll * 1.1).toFixed(2))
      $("#gjjyll").val((yll1 * 1.1).toFixed(2))
    }

    getData('plgjjcstmstz',
      dkhkfs,
      '{"dkje":"' + dkje + '","dkqs":"' + dkqs + '","dkrq":"' + dkrq + '","dkhkfs":"' + dkhkfs + '","yll":"' + yll + '","etf":"' + etf + '"}',
      function (list) {
        var count = list.length
        $("#yhje").val(list[0].bxhj)
        var dkje = $("#dkje").val()
        $("#bjhj").val(dkje)
        // 利息合计等于item.yhlx的和
        let lxhj = 0
        list.forEach((item, index) => {
          lxhj += item.yhlx
        })
        $("#lxhj").val(lxhj.toFixed(2))
        // 本息合计 = 商业贷款金额 + 利息合计
        $("#bxhj").val((dkje * 1 + lxhj * 1).toFixed(2))
        layui.use('laypage', function () {
          var laypage = layui.laypage;

          //执行一个laypage实例
          laypage.render({
            elem: 'test1', //注意，这里的 test1 是 ID，不用加 # 号
            count: count, //数据总数，从服务端得到
            curr: 1, //起始页
            limit: 10, //每页显示条数
            limits: [10, 20, 30, 40, 50],
            jump: function (obj, first) {

              var l = a(list, obj.curr, obj.limit)
              var html = ''
              l.forEach((item, index) => {
                // ----------------
                html +=
                  `
                      <tr>
                        <td>${timestampToTime(item.hkrq)}</td>
                        <td>${item.yhbj}</td>
                        <td>${item.yhlx}</td>
                        <td>${item.bxhj}</td>
                        <td>${$("#yll").val()}</td>
                      </tr>
                  `
                $("#sydkbg").html(html)
              })
              $("#sydkbg").prepend(
                `
                <tr>
                <th>还款日期</th>
                <th>应还本金</th>
                <th>应还利息</th>
                <th>本息合计</th>
                <th>月利率(‰)</th>
              </tr>
                `
              )
            }
          });
        });

      })
    getDatas('plgjjcstmstz',
      dkhkfs,
      '{"dkje":"' + dkje + '","dkqs":"' + dkqs + '","dkrq":"' + dkrq + '","dkhkfs":"' + dkhkfs + '","yll":"' + yll1 + '","etf":"' + etf + '"}',
      function (lists) {
        var count = lists.length
        $("#gjjyhyg").val(lists[0].bxhj)
        lists.forEach((item, index) => {
          var dkje = $("#dkje").val()
          $("#gjjbjhj").val(dkje)
          // 利息合计等于item.yhlx的和
          let lxhj = 0
          lists.forEach((item, index) => {
            lxhj += item.yhlx
          })
          $("#gjjlxhj").val(lxhj.toFixed(2))
          // 本息合计 = 商业贷款金额 + 利息合计
          $("#gjjbxhj").val((dkje * 1 + lxhj * 1).toFixed(2))
          layui.use('laypage', function () {
            var laypage = layui.laypage;
            //执行一个laypage实例
            laypage.render({
              elem: 'test2', //注意，这里的 test1 是 ID，不用加 # 号
              count: count, //数据总数，从服务端得到
              curr: 1, //起始页
              limit: 10, //每页显示条数
              limits: [10, 20, 30, 40, 50],
              jump: function (obj, first) {
                var l = a(lists, obj.curr, obj.limit)
                var html = ''
                l.forEach((item, index) => {
                  // 获取数据
                  // ----------------
                  html +=
                    `
                        <tr>
                          <td>${timestampToTime(item.hkrq)}</td>
                          <td>${item.yhbj}</td>
                          <td>${item.yhlx}</td>
                          <td>${item.bxhj}</td>
                          <td>${$("#gjjyll").val()}</td>
                        </tr>
                  `
                  $("#gjjbg").html(html)
                })
                $("#gjjbg").prepend(
                  `
                  <tr>
                  <th>还款日期</th>
                  <th>应还本金</th>
                  <th>应还利息</th>
                  <th>本息合计</th>
                  <th>月利率(‰)</th>
                </tr>
                  `
                )
              }
            });
          });
        })
      })
    setTimeout(function () {
      // 公积金贷款与商业贷款对比 = |商业贷款本息合计-公积金贷款本息合计|
      // // 商业贷款本息合计
      let syhj = $("#bxhj").val()
      $("#sydkbxhj").val(syhj)
      // 公积金贷款本息合计
      let gjhj = $("#gjjbxhj").val()
      $("#gjjdkbxhj").val(gjhj)
      // 合计节省: = 商业贷款本息合计-公积金贷款本息合计
      $("#gjjdkjs").val((syhj - gjhj).toFixed(2))
    }, 1000)
    // 使用异步函数new Promise()
  }
})

// 商业贷款
// 点击还款计划按钮，获取输入的数据，并调用getData函数，获取数据
$("#fdhkjhbutton").click(function () {
  $("#fdhkjhbuttontext").slideToggle("slow");
  // $("#fdhkjhbutton")文字为收回查看
  $("#fdhkjhbutton").text($("#fdhkjhbutton").text() == "收回查看" ? "还款计划" : "收回查看")
});
// 公积金贷款
$("#gjjhkjhbutton").click(function () {
  $(".gjjbuttontext").slideToggle("slow");
  $("#gjjhkjhbutton").text($("#gjjhkjhbutton").text() == "收回查看" ? "还款计划" : "收回查看")
});
// 时间戳1588888888888转换为日期格式2022-05-05
function timestampToTime (timestamp) {
  var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var Y = date.getFullYear() + '-';
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  var D = date.getDate() + ' ';
  var h = date.getHours() + ':';
  var m = date.getMinutes() + ':';
  var s = date.getSeconds();
  return Y + M + D;
}
avatar
文章
阅读
粉丝