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

//car-calculator-qk.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><span>元</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="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-box">
             <span class="r-txt font24 color-red fr"><label id="totalPriceBottom">8,487</label>元</span>
             <h3 class="font24 color-black">全款总价</h3>
        </div>
        <p class="b-box font24 color-gray">此结果仅供参考，实际费用以当地缴费为准</p>
      </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 id="luochePrice3" type="number" value="" class="fr txt-rgt" /><i class="arrow-icon show-next-icon right-w"></i>
        </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();
        }
         function InitTagStatus() {
            var carid=$.cookie("model_id");
            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");
            }
        }
        $("#luochePrice1").html(formatCurrency($("#hidCarPrice").val()));
        //$("#luochePrice2").val(formatCurrency($("#hidCarPrice").val()));
        $("#luochePrice2").attr("value", $("#hidCarPrice").val());
        GetCarInfo(0);
        $("#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();
    </script>
  {{ js_block_end() }}
  <!--车款选择弹窗-->
  {{ include(‘car-model-select-tanchaung.twig‘) }}

原文地址：https://www.cnblogs.com/zouke1220/p/8176397.html