车林通购车之家--购车计算器模块--贷款

//car-calculator-dk.twig

   {{ include('jsq-nav.twig') }} 
   <div class="switch-item active" id="bodya">
      <div class="top-layer2 clearfix">
        <div class="tit"><span>贷款总价</span></div>
      <div class="num-box">
          <i id="totalPrice">306,420</i>
      </div>
      <div class="dk-top-info">
          首付<span id="shoufuLayer">61,811</span>
        月供(<strong id="yueShuLayer">24</strong>个月)<span id="yueGongLayer">8,498</span>
        利息<span id="liXiLayer">8,374</span>
      </div>
      <a id="chongzhi" class="btn-resetting">重置</a>
    </div>
  
    <div class="layer-detail">
        <ul>
          <li>
            <label>裸车：</label><span id="luochePrice1">272,800</span>
        </li>
        <li>
            <label>必要花费：</label><span id="biYaoHuaFei1">25,246</span>
        </li>
        <li>
            <label>商业险：</label><span id="shangYeXian1">8,374</span>
        </li>
      </ul>
    </div>
 
    <div class="hj-form bor-top">        
       <div class="hj-user-info-box">
        <div class="hj-user-info select-mode-car1 font28">
          <label class="color-light-gray">选择车款</label><span class="act fr" id="select_carname">2015款 奥迪A4L 30 TFSI 手动 舒适型</span><i class="arrow-icon show-next-icon right-w"></i>
        </div>
      </div>
      <div class="hj-user-info-box">
            <div class="hj-user-info font28">
              <label class="color-light-gray">裸车价格</label>
              <input id="luochePrice2" type="number" value="272800" class="fr txt-rgt" />
              <i class="arrow-icon show-next-icon right-w"></i>
            </div>
      </div>        
      <div class="blank20"></div>
      <div class="hj-user-info-box bor-top">
        <div class="hj-user-info font28">
          <label class="color-light-gray">首付比例</label>
          <div id="shoufuDiv" class="jsq-cho-box fr">
              <a href="javascript:void(0)" {% if(app.request.get('aa')==0) %}class="current"{% else %}class=""{% endif %}>30%</a>
                <a href="javascript:void(0)" {% if(app.request.get('aa')==1) %}class="current"{% else %}class=""{% endif %}>40%</a>
                <a href="javascript:void(0)" {% if(app.request.get('aa')==2) %}class="current"{% else %}class=""{% endif %}>50%</a>
                <a href="javascript:void(0)" {% if(app.request.get('aa')==3) %}class="current"{% else %}class=""{% endif %}>60%</a>
          </div>
        </div>
      </div>
      <div class="hj-user-info-box">
        <div class="hj-user-info font28">
          <label class="color-light-gray">还款年限</label>
          <div id="yearDiv" class="jsq-cho-box jsq-cho-year fr">
              <a href="javascript:void(0)" {% if(app.request.get('bb')==0) %}class="current"{% else %}class=""{% endif %}>1</a>
                <a href="javascript:void(0)" {% if(app.request.get('bb')==1) %}class="current"{% else %}class=""{% endif %}>2</a>
                <a href="javascript:void(0)" {% if(app.request.get('bb')==2) %}class="current"{% else %}class=""{% endif %}>3</a>
                <a href="javascript:void(0)" {% if(app.request.get('bb')==3) %}class="current"{% else %}class=""{% endif %}>4</a>
                <a href="javascript:void(0)" {% if(app.request.get('bb')==4) %}class="current"{% else %}class=""{% endif %}>5</a>
          </div>
        </div>
      </div>
      <div class="hj-user-info-box">
        <div class="hj-user-info font28">
          <label class="color-light-gray">贷款利率</label>
          <span class="act fr"><input id="loanRate" type="text" value="6.4" class="txt-rgt mar-rgt10" readonly="readonly" />%</span>
        </div>
      </div>
      <div class="jsq-jiange-box clearfix font24 color-gray">
          <span class="left-tab fl">必要花费</span>
        <span class="left-tab fr">小计：<span id="biYaoHuaFei2">25,246</span></span>
      </div>
      <div class="hj-user-info-box">
        <div class="hj-user-info font28">
          <label class="color-light-gray">购置税</label>
          <span id="gouZhiShuiDesc" class="color-gray" style="margin-left:0.3rem;"></span>
          <span id="gouZhiShui" class="act fr">23,316</span>
        </div>                                                                                                                                
      </div>
      <div class="hj-user-info-box">
        <div class="hj-user-info font28">
          <a href="javascript:;" class="model-show-jqx">
              <label class="color-light-gray">交强险</label>
              <span id="jiaoQiangX" class="act fr">1,100</span>
              <i class="arrow-icon show-next-icon right-w"></i>
          </a>
        </div>
      </div>
      <div class="hj-user-info-box">
        <div class="hj-user-info font28">
          <a href="javascript:;" class="model-show-ccsys">
              <label class="color-light-gray">车船使用税</label>
              <span id="cheChuanTax" class="act fr">420</span>
              <i class="arrow-icon show-next-icon right-w"></i>
          </a>
        </div>
      </div>
      <div class="hj-user-info-box">
        <div class="hj-user-info font28">
          <label class="color-light-gray">上牌费用</label>
          <span id="shangPai" class="act fr">500</span>
        </div>
      </div>
      <!--商业保险-->
     {{ include('insurance.twig') }}
      
      <div class="blank20"></div>
      <div class="summary-box bor-top bgfff font24">
        <div class="t-box2">
            <ul class="clearfix">
              <li class="fout-box-w22 fl">
                <p class="tit color-black">首付</p>
              <p id="shoufuBottom" class="cont color-red">115,460</p>
            </li>
            <li class="fout-box-w28 fl">
                <p class="tit color-black">月供<small class="font20">(24个月)</small></p>
              <p id="yueGongBottom" class="cont color-red">8,498</p>
            </li>
            <li class="fout-box-w20 fl">
                <p class="tit color-black">利息</p>
              <p id="liXiBottom" class="cont color-red">12,992</p>
            </li>
            <li class="fout-box-w30 fl">
                <p class="tit color-black">总价</p>
              <p id="totalPriceBottom" class="cont color-red">329,412</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  
  <!--重置显示内容 S-->
  <div class="m-set-height">
    <div class="top-layer">请选择购买车款或输入裸车价格</div>
    <div class="hj-form bor-top">
        <div class="hj-user-info-box">
        <div class="hj-user-info select-mode-car2 font28">
          <label class="color-light-gray">选择车款</label><span class="act fr"  id="select_carname2"></span><i class="arrow-icon show-next-icon right-w"></i>
        </div>
      </div>
      <div class="hj-user-info-box">
        <div class="hj-user-info font28">
          <label class="color-light-gray">裸车价格</label><input type="text" value="" class="fr txt-rgt" id="luochePrice3" /><i class="arrow-icon show-next-icon right-w"></i>
        </div>
      </div>
      <div class="blank20"></div>
      <div class="hj-user-info-box bor-top">
        <div class="hj-user-info font28">
          <label class="color-light-gray">首付比例</label>
          <div class="jsq-cho-box jsq-cho-sfbl fr">
              <a href="javascript:void(0)" class="current">30%</a>
                <a href="javascript:void(0)">40%</a>
                <a href="javascript:void(0)">50%</a>
                <a href="javascript:void(0)">60%</a>
          </div>
        </div>
      </div>
      <div class="hj-user-info-box">
        <div class="hj-user-info font28">
          <label class="color-light-gray">还款年限</label>
          <div class="jsq-cho-box jsq-cho-year fr">
              <a href="javascript:void(0)">1</a>
                <a href="javascript:void(0)" class="current">2</a>
                <a href="javascript:void(0)">3</a>
                <a href="javascript:void(0)">4</a>
                <a href="javascript:void(0)">5</a>
          </div>
        </div>
      </div>
      <div class="hj-user-info-box">
        <div class="hj-user-info font28">
          <label class="color-light-gray">贷款利率</label>
          <span class="act fr"><input id="loanRate2" type="text" value="6.4" class="txt-rgt mar-rgt10" />%<span>
        </div>
      </div>
    </div>
    <div class="m-jsq-btn-box">
        <a class="btn-orange" href="javascript:void(0)">开始计算</a>
    </div>
  </div>    
  <!--重置显示内容 E-->
  <div class="blank20"></div>
 {{ include('footer.twig') }}
  
  <div class="left-mask"></div>
  <!--交强险弹窗-->
  <div class="left-popup popup-type cal-cul-jqx">
    <div class="swipe-left">
        <dl id="zuoWeiSDl" class="tt-list">
           <dd class="current">
                <a>
                    <p id="item950" class="font28 top-item">家用6座以下</p>
                </a>
           </dd>
           <dd class="">
                <a>
                    <p id="item1100" class="font28 top-item">家用6座及以上</p>
                </a>
           </dd>
       </dl>  
    </div>
  </div>
  
  <!--车船使用税弹窗-->
  <div class="left-popup popup-type cal-cul-ccsys">
    <div class="swipe-left">  
         <dl id="cheChuanDl" class="tt-list">
           <dd class="current">
                <a>
                    <p id="item1" class="font28 top-item">1.0L(含)以下</p> 
                </a>
           </dd>
           <dd class="">
                <a>
                    <p id="item2" class="font28 top-item">1.0-1.6L(含)</p>
                </a>
           </dd>
           <dd class="">
                <a>
                    <p id="item3" class="font28 top-item">1.6-2.0L(含)</p>
                </a>
           </dd>
            <dd class="">
                <a>
                    <p id="item4" class="font28 top-item">2.0-2.5L(含)</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p id="item5" class="font28 top-item">2.5-3.0L(含)</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p id="item6" class="font28 top-item">3.0-4.0L(含)</p>
                </a>
            </dd>
            <dd class="">
                <a>
                    <p id="item7" class=" font28 top-item">4.0L以上</p>
                </a>
            </dd>
        </dl>
    </div>
  </div>
  <!--商业保险弹窗-->
  {{ include('insurance-tanchuang.twig') }}
  
  {{ use('common\widgets\JsBlock') }}
  {{ js_block_begin() }}
  <script type="text/javascript">        
        function calcAutoAll() {
            if ($('#hidCarPrice').val() != "0") {
                shangPai = 500;
                $("#shangPai").html("500");
            } else {
                shangPai = 0;
                $("#shangPai").html("0");
            }
            //购置税
            calcAcquisitionTax();
            //车船使用税
            CalculateVehicleAndVesselTax();
            //交强险
            calcCompulsory();
            //第三责任险
            calcTPL();
            //车辆损失险
            calcCarDamage();
            //不计免赔特约险
            calcAbatement();
            //全车盗抢险
            calcCarTheft();
            //玻璃单独破碎险
            calcBreakageOfGlass();
            //自燃损失险
            calcSelfignite();
            //涉水险/发动机特别损失险
            calcCarEngineDamage();
            //车身划痕险
            calcCarDamageDW();
            //司机座位责任险
            calcLimitofDriver();
            //乘客座位责任险
            calcLimitofPassenger();
            //必要花费小计
            calcEssentialCost();
            //商业保险小计
            calcCommonTotal();
            //计算总价
            calcTotal();
            //首付款
            calcDownPayments();
            //月供
            calcMonthPayments();
            //贷款额
            calcLoanValue();
            //计算总价
            calcLoanTotal();         
        }
        var isHaveLoanRate = false;
        function InitTagStatus() {
            var carid=$.cookie("model_id");
            //alert(carid);
            var carPrice =$.cookie("hidCarPrice");
            //alert(carPrice);
            if (carid) {
                if (carPrice) {
                    $("#hidCarPrice").val(carPrice);
                    $("#luochePrice1").html(formatCurrency(carPrice));
                    $("#luochePrice2").attr("value", carPrice);
                    $("#luochePrice3").attr("value", carPrice);
                } else {
                    $("#luochePrice1").html(formatCurrency($("#hidCarPrice").val()));
                    $("#luochePrice2").attr("value", $("#hidCarPrice").val());
                    $("#luochePrice3").attr("value", $("#hidCarPrice").val());
                }
                GetCarInfo(carid); 
            } else {
                $("#hidCarPrice").val(carPrice);
                $("#luochePrice1").html(formatCurrency(carPrice));
                //$("#luochePrice2").val(formatCurrency(carPrice));
                $("#luochePrice2").attr("value", carPrice);
                $("#zuoWeiSDl dd").attr("class", "");
                $("#zuoWeiSDl dd").eq(0).attr("class", "current");
                $("#boLiXDl dd").attr("class", "");
                $("#boLiXDl dd").eq(0).attr("class", "current");
                $("#cheChuanDl dd").attr("class", "");
                $("#cheChuanDl dd").eq(1).attr("class", "current");
            }
            var shoufu = $("#shoufuDiv a.current").eq(0).html().trim();
            if (shoufu) {
                $("#shoufuDiv a").attr("class", "");
                switch (shoufu) {
                    case "30%":
                        $("#shoufuDiv a").eq(0).attr("class", "current");
                        break;
                    case "40%":
                        $("#shoufuDiv a").eq(1).attr("class", "current");
                        break;
                    case "50%":
                        $("#shoufuDiv a").eq(2).attr("class", "current");
                        break;
                    case "60%":
                        $("#shoufuDiv a").eq(3).attr("class", "current");
                        break;
                }
            }
            else {
                $("#shoufuDiv a").eq(0).attr("class", "current");
            } 
            var year = parseInt($("#yearDiv a.current").eq(0).html().trim()); 
            if (year) {
                $("#yearDiv a").attr("class", "");
                switch (year) {
                    case 1:
                        $("#yearDiv a").eq(0).attr("class", "current");
                        $("#loanRate").attr("value", "6.31");
                        break;
                    case 2:
                        $("#yearDiv a").eq(1).attr("class", "current");
                        $("#loanRate").attr("value", "6.4");
                        break;
                    case 3:
                        $("#yearDiv a").eq(2).attr("class", "current");
                        $("#loanRate").attr("value", "6.4");
                        break;
                    case 4:
                        $("#yearDiv a").eq(3).attr("class", "current");
                        $("#loanRate").attr("value", "6.65");
                        break;
                    case 5:
                        $("#yearDiv a").eq(4).attr("class", "current");
                        $("#loanRate").attr("value", "6.65");
                        break;
                }
            }
            else {
                $("#yearDiv a").eq(3).attr("class", "current");
                $("#loanRate").attr("value", "6.4");
            }           
            var loanRate = $("#loanRate").val();
            if (loanRate) {
                isHaveLoanRate = true;
                $("#loanRate").attr("value", loanRate);
            }         
            calcAutoAll();
        }       
        
        $("#luochePrice1").html(formatCurrency($("#hidCarPrice").val()));
        //$("#luochePrice2").val(formatCurrency($("#hidCarPrice").val()));
        $("#luochePrice2").attr("value", $("#hidCarPrice").val());
        $("#diSanZheXDl dd").attr("class", "");
        $("#diSanZheXDl dd").eq(2).attr("class", "current");

        $("#cheShenXDl dd").attr("class", "");
        $("#cheShenXDl dd").eq(1).attr("class", "current");

        $("#siJiXDl dd").attr("class", "");
        $("#siJiXDl dd").eq(1).attr("class", "current");

        $("#chengKeXDl dd").attr("class", "");
        $("#chengKeXDl dd").eq(1).attr("class", "current");
        InitTagStatus();    //有参数传递时
        calcAutoAll();
        calcLoanValue();
    </script>
  {{ js_block_end() }}
  <!--车款选择弹窗-->
  {{ include('car-model-select-tanchaung.twig') }}