车林通购车之家--购车计算器模块--贷款
//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') }}
浙公网安备 33010602011771号