src/PortalBundle/Resources/views/Finance/casco.html.twig line 1

Open in your IDE?
  1. <section class="calc" >
  2.     <div class="container">
  3.         <div class="row">
  4.             <div class="col-md-12">
  5.                 <h1 class="calc-title">{{ 'seo.calc.h1'|trans({}, 'insurance') }}</h1>
  6.             </div>
  7.         </div>
  9.         <div class="row insurance_calc-search" id="casco">
  10.             <div class="col-sm-12 col-md-12 col-lg-8 col-xl-8">
  11.                 <div class="row">
  12.                     <div class="col-md-6">
  13.                         <div class="form-group">
  14.                             <select v-model="car.brand" class="form-control">
  15.                                 <option :value="null" disabled >{{ 'calc.brand'|trans({},'insurance') }}</option>
  16.                                 <option v-for="brand in brands"  :value="brand.id" v-html="brand.title"></option>
  17.                             </select>
  18.                         </div>
  19.                     </div>
  20.                     <div class="col-md-6">
  21.                         <div class="form-group">
  22.                             <select v-model="car.model" class="form-control">
  23.                                 <option :value="null" disabled >{{ 'calc.model'|trans({},'insurance') }}</option>
  24.                                 <option v-for="model in models"  :value="model.id" v-html="model.title"></option>
  25.                             </select>
  26.                         </div>
  27.                     </div>
  28.                     <div class="col-md-6">
  29.                         <div class="form-group">
  30.                             <select v-model="car.year" class="form-control">
  31.                                 <option disabled :value="null">{{ 'calc.select_year'|trans({}, 'insurance') }}</option>
  32.                                 <option v-for="year in years" :value="year" v-html="year"></option>
  33.                             </select>
  34.                         </div>
  35.                     </div>
  36.                     <div class="col-md-6">
  37.                         <div class="insurance_calc-price" :class="disableCalc ? 'disabled' : ''">
  38.                             <div class="form-group mb-0">
  39.                                 <input type="text" v-model="price" :disabled="disableCalc" class="form-control" placeholder="{{ 'calc.new.new_price_input'|trans({},'insurance') }}, грн">
  41.                             </div>
  42.                             <button @click="needCalc = disableCalc ? false : true" class="dont_know-btn">{{ 'calc.new.new_dont_know_price'|trans({},'insurance') }}</button>
  43.                         </div>
  44.                     </div>
  45.                 </div>
  46.                 <div class="row" v-if="needCalc">
  47.                     <div class="col-md-12">
  48.                         <hr>
  49.                     </div>
  50.                     <div class="col-md-4">
  51.                         <div class="form-group">
  52.                             <select v-model="car.body" class="form-control">
  53.                                 <option :value="null" disabled>{{ 'calc.new.new_body'|trans({},'insurance') }}</option>
  54.                                 <option v-for="body in bodies"  :value="body.id" v-html="body.title"></option>
  55.                             </select>
  56.                         </div>
  57.                     </div>
  58.                     <div class="col-md-4">
  59.                         <div class="form-group">
  60.                             <select v-model="car.transmission"  class="form-control">
  61.                                 <option :value="null" disabled>Тип КПП</option>
  62.                                 <option v-for="tr in transmission"  :value="tr.id" v-html="tr.title"></option>
  63.                             </select>
  64.                         </div>
  65.                     </div>
  66.                     <div class="col-md-4">
  67.                         <div class="form-group">
  68.                             <select v-model="car.fuel" class="form-control">
  69.                                 <option :value="null" disabled>{{ 'calc.new.new_fuel'|trans({},'insurance') }}</option>
  70.                                 <option v-for="fl in fuel"  :value="fl.id" v-html="fl.title"></option>
  71.                             </select>
  72.                         </div>
  73.                     </div>
  74.                     <div class="col-md-6">
  75.                         <div class="form-group">
  76.                             <select v-model="car.drive" class="form-control">
  77.                                 <option :value="null" disabled>{{ 'calc.new.new_privod'|trans({},'insurance') }}</option>
  78.                                 <option v-for="dr in drive"  :value="dr.id" v-html="dr.title"></option>
  79.                             </select>
  80.                         </div>
  81.                     </div>
  82.                     <div class="col-md-6">
  83.                         <div class="form-group">
  84.                             <input type="text" v-model="car.mileage" class="form-control" placeholder="Пробег, км">
  85.                         </div>
  86.                     </div>
  87.                     <div class="col-md-12" v-if="calcResult">
  88.                         <div class="insurance_calc-info" v-if="calcResult.price > 0">
  89.                             <span class="insurance_calc-info-title">{{ 'calc.new.new_price'|trans({},'insurance') }}: <b><span v-html="calcResult.price.toLocaleString()"></span> грн*</b></span>
  90.                             <button class="btn btn-primary" @click="setPrice">{{ 'calc.new.new_agree'|trans({},'insurance') }}</button>
  91.                         </div>
  92.                         <div class="insurance_calc-info" v-else>
  93.                             <span class="insurance_calc-info-title">{{ 'calc.new.new_dont_work'|trans({},'insurance') }}.</span>
  94.                         </div>
  95.                     </div>
  96.                     <div class="col-md-12" v-else >
  97.                         <div class="insurance_calc-info">
  98.                             <span>{{ 'calc.new.new_parametrs'|trans({},'insurance') }}</span>
  99.                             <button class="btn btn-primary" @click="estimate">{{ 'calc.new.new_know_price'|trans({},'insurance') }}</button>
  100.                         </div>
  101.                     </div>
  102.                     <div class="col-md-12">
  103.                         <hr>
  104.                     </div>
  105.                 </div>
  106.                 {% verbatim %}
  107.                 <div class="addit-info" v-if="showAddit">
  108.                     <h3>{% endverbatim %}{{ 'calc.more_info'|trans({},'insurance') }}{% verbatim %}</h3>
  109.                     <hr>
  110.                     <span>
  111.                         {% endverbatim %}
  112.                 {{ 'calc.franchise'|trans({},'insurance') }}
  113.                 <button type="button" class="btn-tooltip color-red bg-transparent border-0" data-toggle="tooltip" data-placement="top" title="{{ 'calc.info'|trans({},'insurance') }}"><span class="info-element">&#7522;</span></button>
  114.                 {% verbatim %}
  115.                     </span>
  116.                     <div class="row casco-base">
  117.                         <div class="col-lg-12">
  118.                             <div class="form-group" v-for="(item,index) in baseCoefficients">
  119.                                 <input :id="'base-i-'+index" v-on:change="changeOptions" v-model="selectOptions.baseCoefficient" type="radio" :value="item.params.coefficient">
  120.                                 <label class="form-control" :for="'base-i-'+index"> {{item.params.franchise}} % </label>
  121.                             </div>
  122.                         </div>
  123.                     </div>
  124.                     <div class="row casco-options">
  125.                         <div class="col-lg-12">
  126.                             <div class="form-group" v-for="(item,index) in optionCoefficients">
  127.                                 <input :id="'option-i-'+index"  v-on:change="changeOptions" v-model="selectOptions.options[item.id]" type="checkbox" true-value="1" :false-value="item.params.coefficient">
  128.                                 <label :for="'option-i-'+index"> {{item.title}}</label>
  129.                                 <button v-on:click="onCB" class="casco-options-btn active">{% endverbatim %}{{ 'calc.on'|trans({},'insurance') }}{% verbatim %}</button>
  130.                                 <button v-on:click="offCB" class="casco-options-btn ">{% endverbatim %}{{ 'calc.off'|trans({},'insurance') }}{% verbatim %}</button>
  131.                             </div>
  132.                         </div>
  133.                     </div>
  134.                     <div class="row casco-list">
  135.                         <div class="col-lg-12">
  136.                             <div class="form-group" v-for="item in listCoefficients">
  137.                                 <p>{{item.title}}</p>
  138.                                 <div v-for="(param,index) in item.params">
  139.                                 <input :id="'list-i-' + item.id + '-' + index"  v-on:change="changeOptions"  v-model="selectOptions.list[item.id]" type="radio" :value="param.coefficient">
  140.                                 <label :for="'list-i-' + item.id + '-' + index"> {{param.title}}</label>
  141.                                 </div>
  142.                             </div>
  143.                         </div>
  144.                     </div>
  145.                 </div>
  146.             </div>
  147.             <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 casco-form-col"  >
  148.                <div class="casco-result" v-if="showAmount">
  149.                     <div class="order-head-form">
  150.                         <h3>{% endverbatim %}{{ 'calc.price_casko'|trans({},'insurance') }}{% verbatim %}</h3>
  151.                         <button class="btn-red" @click="showMobileForm">{% endverbatim %}{{ 'form_order.save'|trans({},'insurance') }}{% verbatim %}</button>
  152.                     </div>
  153.                     <span class="casco-amount" style="min-height: 55px;">
  154.                         <span v-if="showAmount">
  155.                             {{ amount }}<span> грн</span>
  156.                         </span>
  157.                         <span v-else>
  158.                             {% endverbatim %}{{ 'calc.new.new_enter_price'|trans({},'insurance') }}{% verbatim %}
  159.                         </span>
  160.                     </span>
  161.                     <div class="casco-form">
  162.                    <span>{% endverbatim %}{{ 'calc.info_raschet'|trans({},'insurance') }}{% verbatim %}</span>
  163.                    <form class="right-casco-form">
  164.                       <div class="form-group">
  165.                         <input type="text" id="casco_name_portal" class="form-control" v-model="uName" placeholder="Ім'я" required>
  166.                       </div>
  167.                       <div class="form-group">
  168.                         <input type="email" id="casco_email_portal" class="form-control" v-model="uEmail" aria-describedby="emailHelp" placeholder="Email">
  169.                       </div>
  170.                       <div class="form-group">
  171.                         <!-- <input type="text" id="casco_phone_portal" class="form-control" v-model="uPhone" placeholder="Телефон" required> -->
  172.                         <input class="form-control" type="text" placeholder="+38(__)*" v-mask="'+38(###)###-##-##'" id="casco_phone_portal" v-model="uPhone" required>
  173.                       </div>
  174.                       <div class="form-group checkbox style-b" v-if="privacyUrl">
  175.                             <label class="checkboxes__item-privacy">
  176.                                 <input type="checkbox" v-model="checkPrivacy"/>
  177.                                 <div id="check_privacy" class="checkbox__checkmark form-control"></div>
  178.                                 <div class="checkbox__body">{% endverbatim %}{{ 'callback_widget.privacy'|trans({}, 'dc_base') }}{% verbatim %} <a :href="privacyUrl" target="_blank">{% endverbatim %}{{ 'callback_widget.privacy_link'|trans({}, 'dc_base') }}{% verbatim %}</a></div>
  179.                             </label>
  180.                       </div>
  181.                       <button type="button" v-on:click="sendLead" :disabled="disableSend" class="btn btn-primary">{% endverbatim %}{{ 'calc.know_price'|trans({},'insurance') }}{% verbatim %}</button>
  182.                    </form>
  183.                    <div class="casco-form-subtitle">
  184.                         <span>{% endverbatim %}{{ 'calc.call_phone'|trans({},'insurance') }}{% verbatim %}
  185.                         <span>044 503 35 55</span></span>
  186.                    </div>
  187.                </div>
  188.                </div>
  189.                <div class="top-block-casco" v-if="showHint">
  190.                     <div class="triangle-block-casco"></div>
  191.                     <span>{% endverbatim %}{{ 'calc.label'|trans({},'insurance') }}{% verbatim %}</span>
  192.                 </div>
  193.             </div>
  194.         </div>
  195.         {% endverbatim %}
  196.             </div>
  197. </section>