premiumCalc.vue 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155
  1. <template>
  2. <view class="">
  3. <image src="/static/image/car-insure/Quotablebanner.png" mode=""
  4. style="width: 100%;height: 110px;position: absolute;"></image>
  5. <view class="page">
  6. <view class="car-header dis a-c">
  7. <image src="/static/image/car-insure/Group.png" mode="" style="width: 40px;height: 40px;"></image>
  8. <view class="dis f-c head-name">
  9. <text>{{carInfo.licenseNo}} <text style="color: rgba(35,40,50,0.65);">丨</text> <text
  10. style="font-weight: 400;"> {{insuredPersonInfo.name}} (被保人)</text> </text>
  11. <view class="name1">
  12. <text>{{carInfo.modelcname}}</text>
  13. </view>
  14. </view>
  15. <view class="carJump" @tap="toCarInfo">修改信息</view>
  16. </view>
  17. <view class=" dis a-c j-s mt-3" style="position: relative;">
  18. <view style="color:#FF5600;font-size: 15px;font-weight: bold;">投保注意:</view>
  19. <view class="dis a-c f-wrap">
  20. <view class="status-data" :class="carInfo.transferFlag? 'active1':''"
  21. @tap="immediatelyClick('transferFlag')">
  22. 过户车
  23. </view>
  24. <view class="status-data" :class="carInfo.transferFlagBi? 'active1':''"
  25. @tap="immediatelyClick('transferFlagBi')">
  26. 商业险过户
  27. </view>
  28. <view class="status-data" :class="carInfo.outOfInsurance? 'active1':''"
  29. @tap="immediatelyClick('outOfInsurance')">
  30. 脱保
  31. </view>
  32. <view class="status-data" :class="carInfo.usedCar? 'active1':''" @tap="immediatelyClick('usedCar')">
  33. 二手车
  34. </view>
  35. </view>
  36. </view>
  37. <view class="quotePlan dis a-c j-s mt-2 " style="padding: 5px 10px;" v-if="carInfo.transferFlag">
  38. <view>转移登记日期:</view>
  39. <u-input type="select" :select-open="transferDateShow" :custom-style="{textAlign:'right'}"
  40. v-model="carInfo.transferDate" @click="transferDateShow = true" style="width: 100px;"></u-input>
  41. <u-picker v-model="transferDateShow" mode="time" :params="params1"
  42. @confirm="transferconfirm"></u-picker>
  43. </view>
  44. <view class="quoteCompany mt-3">
  45. <view class="header dis a-c">
  46. <view class="title d-flex">保险公司</view>
  47. <!-- <view class="">
  48. <u-checkbox v-model="Selectchecked" @change="SelectAll($event)"
  49. active-color="rgb(250, 53, 52)">全选</u-checkbox>
  50. </view> -->
  51. </view>
  52. <block v-for="(totalitem,totalindex) in totalCompanyList" :key="totalindex">
  53. <template>
  54. <view class="quoteCompanyItem dis f-c j-s" :class="totalitem.checked? 'quoteactive':''">
  55. <view class="top dis f-c">
  56. <view class="companyIcon dis j-s a-c mb-2"
  57. @tap="checkboxChange(totalitem.id,totalitem.cnName, totalindex)">
  58. <view class="dis a-c">
  59. <!-- <view class="" @click.stop>
  60. <u-checkbox @change="priceComparisonChange(totalindex,totalitem)"
  61. v-if="totalitem.isComparableshowHide"
  62. v-model="totalitem.isComparableShow" active-color="#23C1CB"
  63. :disabled='totalitem.isComparableDisabled'></u-checkbox>
  64. </view> -->
  65. <image :src="totalitem.logo"></image>
  66. <view class="companyName">{{totalitem.namesimple}}</view>
  67. </view>
  68. <view class="insuranceGuide dis a-c j-c" @click.stop="InsureGuideclick">
  69. 投保指引
  70. </view>
  71. <ls-loading v-show="totalitem.quoteCode==1" text="掌柜正在为您报价,请稍等......"
  72. :animation="animation" fontSize="22" />
  73. <!-- 价格 -->
  74. <view class="dis a-c" v-if="totalitem.quoteCode==200">
  75. <view class="dis a-c" style="margin-right: 10px;">
  76. <text style="color: #FF4D4D;font-size: 12px;"
  77. v-if="totalitem.result.sumExportFee">优惠金额¥{{totalitem.result.sumExportFee}}</text>
  78. </view>
  79. <text class="sum">¥{{totalitem.result.sumPermium}}</text>
  80. </view>
  81. <text
  82. v-show="(totalitem.quoteCode != '200') && (totalitem.quoteCode != '0') && (totalitem.quoteCode != '1')"
  83. class="sum" style="color: #999;font-size: 12px;"
  84. @tap.stop.prevent="ErrorMsg(totalitem.msg,totalitem.namesimple)">报价失败,请点击查看</text>
  85. </view>
  86. <view class="planDetails mb-2 dis a-c j-c f-c">
  87. <view class="headers dis j-c a-c"
  88. @tap="totalitem.planDetailsshow = !totalitem.planDetailsshow">
  89. <image
  90. :src="totalitem.planDetailsshow?'/static/image/car-insure/DoubleLeft1.png':'/static/image/car-insure/DoubleLeft.png'"
  91. mode=""></image>
  92. <text>展开方案详情</text>
  93. </view>
  94. <view v-if="totalitem.planDetailsshow">
  95. 321321321
  96. </view>
  97. </view>
  98. <view class="footer-btn dis j-s a-c">
  99. <u-button type="primary" size="medium"
  100. style="background:#E6EEFF;color:#0052FF; width: 45%;"
  101. @tap="SchemeSelection">方案选择</u-button>
  102. <u-button type="primary" size="medium"
  103. style="background:#FFEFE6;color: #FF5600; width: 45%;"
  104. @tap="next">单独报价</u-button>
  105. </view>
  106. <view class="Premium dis f-c" v-show="totalitem.quoteCode==200">
  107. <view class="dis price" v-if="totalitem.result.feeNoDescription">
  108. <text>该车未匹配销管费用,不建议投保!</text>
  109. <u-icon name="chat-fill" color="#ff0000" size="40"
  110. @click="discountErrorMessageMsg(totalitem.result.feeNoDescription,totalitem.namesimple)"></u-icon>
  111. </view>
  112. <view class="dis a-c f-wrap price">
  113. <text
  114. v-if="totalitem.result.jqPremium">交强险:¥{{totalitem.result.jqPremium}}</text>
  115. <text
  116. v-if="totalitem.result.syPremium">商业险:¥{{totalitem.result.syPremium}}</text>
  117. <text
  118. v-if="totalitem.result.taxAmount">车船税:¥{{totalitem.result.taxAmount}}</text>
  119. <text
  120. v-if="totalitem.result.jyPremium">驾意险:¥{{totalitem.result.jyPremium}}</text>
  121. </view>
  122. <view class="dis a-c f-wrap price" style="font-size: 20rpx;color: #FF4D4D;">
  123. <text>优惠金额:【
  124. <text
  125. v-if="totalitem.result.jqPremium">交强险:{{totalitem.result.jqExportFee?totalitem.result.jqExportFee:'无'}}</text>
  126. <text
  127. v-if="totalitem.result.syPremium">商业险:{{totalitem.result.syExportFee?totalitem.result.syExportFee:'无'}}</text>
  128. <text
  129. v-if="totalitem.result.jyPremium">驾意险:{{totalitem.result.noExportFee?totalitem.result.noExportFee:"无"}}</text>
  130. 】</text>
  131. </view>
  132. <view class="dis a-c j-s ">
  133. <view class="dis f-c time">
  134. <text
  135. v-if="totalitem.result.jqPremium">交强险:{{totalitem.result.startDateJq}}~{{totalitem.result.endDateJq}}
  136. </text>
  137. <text
  138. v-if="totalitem.result.startDateSy">商业险:{{totalitem.result.startDateSy}}~{{totalitem.result.endDateSy}}
  139. </text>
  140. </view>
  141. <image src="/static/image/car-insure/Group30.png" mode=""
  142. style="width: 14px;height: 14px;" @click="syncData(totalitem.result)">
  143. </image>
  144. </view>
  145. <view class="dis a-c f-wrap time">
  146. <text v-if="totalitem.namesimple == '永诚财险'">光博分:{{ totalitem.result.ilogPreUdwMess ?
  147. totalitem.result.ilogPreUdwMess : '无' }}</text>
  148. <text v-else>评分:{{ totalitem.result.ilogPreUdwMess ?
  149. totalitem.result.ilogPreUdwMess : '无' }}</text>
  150. <text v-if="totalitem.result.jqScore">交强类型评分:{{ totalitem.result.jqScore ?
  151. totalitem.result.jqScore : '无' }}</text>
  152. <text v-if="totalitem.result.syScore">商业类型评分:{{ totalitem.result.syScore ?
  153. totalitem.result.syScore : '无' }}</text>
  154. <text v-if="totalitem.result.lossRation">总赔付率:{{ totalitem.result.lossRation ?
  155. totalitem.result.lossRation : '无' }}</text>
  156. <text v-if="totalitem.result.jqLossRation">交强赔付率:{{ totalitem.result.jqLossRation ?
  157. totalitem.result.jqLossRation : '无' }}</text>
  158. <text v-if="totalitem.result.syLossRation">商业赔付率:{{ totalitem.result.syLossRation ?
  159. totalitem.result.syLossRation : '无' }}</text>
  160. <text
  161. v-if="totalitem.namesimple == '紫金财险'">鼎然-车辆风险评分:{{totalitem.result.ubiPredictedInfoScore ?
  162. totalitem.result.ubiPredictedInfoScore : '无'}}</text>
  163. <text v-if="totalitem.result.jqRenewal">交强续保:{{ totalitem.result.jqRenewal ?
  164. totalitem.result.jqRenewal : '无' }}</text>
  165. <text v-if="totalitem.result.syRenewal">商业续保:{{ totalitem.result.syRenewal ?
  166. totalitem.result.syRenewal : '无' }}</text>
  167. <text v-if="totalitem.result.jqClaims">交强出险次数:{{ totalitem.result.jqClaims ?
  168. totalitem.result.jqClaims : '无' }}</text>
  169. <text v-if="totalitem.result.syClaims">商业出险次数:{{ totalitem.result.syClaims ?
  170. totalitem.result.syClaims : '无' }}</text>
  171. </view>
  172. <view class="dis a-c j-end lastyear">
  173. <view class=" left dis j-c a-c" v-if="totalitem.lastYearMsg"
  174. @click="YearMsg(totalitem.lastYearMsg,totalitem.namesimple)">
  175. <image src="/static/image/car-insure/lastyear.png" mode=""></image>
  176. <text>上年信息</text>
  177. </view>
  178. <view class=" right dis j-c a-c" v-if='totalitem.result.predictInfo'
  179. @click="preUnderwriting(totalitem.result.predictInfo)">
  180. <image src="/static/image/car-insure/advance.png" mode=""></image>
  181. <text>预核保信息</text>
  182. </view>
  183. </view>
  184. </view>
  185. <view class="quotebtn dis j-s a-c" v-show="totalitem.quoteCode==200">
  186. <view class="dis a-c j-c" @click="bjdpreview(totalitem.result.companyId)"
  187. style="background-color: #0052FF;border-bottom-left-radius:6px;color: #fff;">
  188. 报价单
  189. </view>
  190. <view class="dis a-c j-c"
  191. style="background-color: #E6EEFF;border-bottom-right-radius:6px;color: #0052FF;"
  192. @click="querydetial(totalitem.result.companyId)">
  193. 查看详情
  194. </view>
  195. </view>
  196. </view>
  197. </view>
  198. </template>
  199. </block>
  200. </view>
  201. </view>
  202. <u-modal v-model="InsureGuidePopup" ref="uModal" :show-title="false" border-radius="12" confirm-color="#FF5600"
  203. :confirm-style="{background:'#FFEFE6',height:'36px',lineHeight:'36px'}">
  204. <view class="">
  205. <image src="/static/image/car-insure/InsureGuide.png" mode="" style="width: 100%;height: 40px;"></image>
  206. <view class="p-2 mb-2" style="min-height:120px;">
  207. <text>永诚财产保险股份有限公司是一家由国内实力雄厚的大型电力企业集团和产业投资集团共同发起组建的全国性股份制财产保险公司.</text>
  208. </view>
  209. </view>
  210. </u-modal>
  211. <u-popup v-model="PlanPopup" mode="center" width="100%" border-radius="6">
  212. <view class="">
  213. <image src="/static/image/car-insure/SchemeSelection.png" mode="" style="width: 100%;height: 40px;">
  214. </image>
  215. <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
  216. <view class="Plancontent dis f-c ">
  217. <text class="title mb-1">方案选择</text>
  218. <view class="dis a-c f-wrap j-s modelformcss" style="margin-top: 10px;">
  219. <view class="status-data" :class="item.value==SelectedPlanId? 'active':''"
  220. v-for="(item,index) in InsurerPlanList" @tap.stop.prevent="statusclick(item.value)"
  221. :key="index">
  222. {{item.label}}
  223. </view>
  224. </view>
  225. </view>
  226. <view class="" v-if="SelectedPlanId !=='4'">
  227. <view class="Plancontent dis f-c ">
  228. <text class="title mb-1">交强险</text>
  229. <view class=" dis a-c j-s modelformcss">
  230. <text>即时投保</text>
  231. <view class="dis a-c j-c">
  232. <view class="status-data" :class="item.value==jqimmediately? 'active':''"
  233. v-for="(item,index) in jqimmediatelyList"
  234. @tap="datelyClick(item.value,'jqimmediately','jqstartDate','jqendDate')"
  235. :key="index">
  236. {{item.label}}
  237. </view>
  238. </view>
  239. </view>
  240. <u-form ref="uForm" label-width="120px">
  241. <u-form-item label="交强险投保日期" class="modelformcss">
  242. <u-input type="select" :select-open="jqstartShow"
  243. :custom-style="{textAlign:'right'}" v-model="jqstartDate" placeholder="请选择开始时间"
  244. @click="jqstartShow = true"></u-input>
  245. <u-picker v-model="jqstartShow" mode="time" :params="params"
  246. @confirm="jqstartconfirm"></u-picker>
  247. </u-form-item>
  248. <u-form-item label="交强险终保日期" class="modelformcss">
  249. <u-input type="select" :select-open="jqendShow" :custom-style="{textAlign:'right'}"
  250. v-model="jqendDate" placeholder="请选择结束时间" @click="jqendShow = true"></u-input>
  251. <u-picker v-model="jqendShow" mode="time" :params="params"
  252. @confirm="jqendconfirm"></u-picker>
  253. </u-form-item>
  254. </u-form>
  255. </view>
  256. <view class="Plancontent dis f-c ">
  257. <text class="title mb-1">车船税</text>
  258. <view class="">
  259. <u-form ref="uForm" :model="vehicleAndVesselTaxForm" label-width="130px">
  260. <u-form-item label="纳税类型" prop="taxRelifFlag" class="modelformcss">
  261. <u-input type="select" :select-open="taxRelifFlagShow"
  262. v-model="model.taxRelifFlag" :custom-style="{textAlign:'right'}"
  263. placeholder="请选择纳税类型" @click="taxRelifFlagShow = true"></u-input>
  264. <u-select mode="single-column" :list="taxRelifFlagoptions"
  265. v-model="taxRelifFlagShow" label-name="dictTag" value-name="dictValue"
  266. @confirm="taxRelifFlagConfirm($event,'taxRelifFlag')"></u-select>
  267. </u-form-item>
  268. <u-form-item
  269. v-show="vehicleAndVesselTaxForm.taxRelifFlag == 2 || vehicleAndVesselTaxForm.taxRelifFlag == 3"
  270. label="减免税凭证号" prop="extendChar2" class="modelformcss">
  271. <u-input placeholder="请输入减免税凭证号" :custom-style="{textAlign:'right'}"
  272. v-model="vehicleAndVesselTaxForm.extendChar2" type="text"></u-input>
  273. </u-form-item>
  274. <u-form-item v-show="vehicleAndVesselTaxForm.taxRelifFlag == 4" label="完税凭证号"
  275. prop="paidFreeCertificate" class="modelformcss">
  276. <u-input placeholder="请输入完税凭证号" :custom-style="{textAlign:'right'}"
  277. v-model="vehicleAndVesselTaxForm.paidFreeCertificate" type="text"></u-input>
  278. </u-form-item>
  279. <u-form-item
  280. v-show="vehicleAndVesselTaxForm.taxRelifFlag == 2 || vehicleAndVesselTaxForm.taxRelifFlag == 3"
  281. label="减免税原因" prop="relifReason" class="modelformcss">
  282. <u-input type="select" :select-open="relifReasonShow"
  283. v-model="model.relifReason" :custom-style="{textAlign:'right'}"
  284. placeholder="请选择减免税原因" @click="relifReasonShow = true"></u-input>
  285. <u-select mode="single-column" :list="relifReasonoptions"
  286. v-model="relifReasonShow" label-name="dictTag" value-name="dictValue"
  287. @confirm="taxRelifFlagConfirm($event,'relifReason')"></u-select>
  288. </u-form-item>
  289. <u-form-item v-show="vehicleAndVesselTaxForm.taxRelifFlag != 1" label="税务机关代码"
  290. prop="taxComCode" class="modelformcss">
  291. <u-input placeholder="请输入税务机关代码" :custom-style="{textAlign:'right'}"
  292. v-model="vehicleAndVesselTaxForm.taxComCode" type="text"></u-input>
  293. </u-form-item>
  294. <u-form-item v-show="vehicleAndVesselTaxForm.taxRelifFlag != 1" label="税务机关名称"
  295. prop="taxComName" class="modelformcss">
  296. <u-input placeholder="请输入税务机关名称" :custom-style="{textAlign:'right'}"
  297. v-model="vehicleAndVesselTaxForm.taxComName" type="text"></u-input>
  298. </u-form-item>
  299. <u-form-item v-show="vehicleAndVesselTaxForm.taxRelifFlag == 4" label="完税凭证填发日期"
  300. prop="taxDocumentDate" class="modelformcss">
  301. <u-input type="select" :select-open="taxDocumentDateShow"
  302. :custom-style="{textAlign:'right'}"
  303. v-model="vehicleAndVesselTaxForm.taxDocumentDate" placeholder="请选择时间"
  304. @click="taxDocumentDateShow = true"></u-input>
  305. <u-picker v-model="taxDocumentDateShow" mode="time" :params="params1"
  306. @confirm="taxDocumentDateconfirm"></u-picker>
  307. </u-form-item>
  308. <u-form-item v-show="vehicleAndVesselTaxForm.taxRelifFlag == 4" label="完税凭证地区"
  309. prop="taxPaidAreaCode" class="modelformcss">
  310. <u-input type="select" :select-open="taxPaidAreaCodeShow"
  311. :custom-style="{textAlign:'right'}" v-model="model.taxPaidAreaCode"
  312. placeholder="请选择地区" @click="taxPaidAreaCodeShow = true"></u-input>
  313. <u-picker mode="region" v-model="taxPaidAreaCodeShow" :params="params2"
  314. @confirm="taxPaidAreaCodeconfirm"></u-picker>
  315. </u-form-item>
  316. <u-form-item v-show="vehicleAndVesselTaxForm.taxRelifFlag == 3" label="减税比例"
  317. prop="taxRelief" class="modelformcss">
  318. <u-input placeholder="请输入0~1的小数" :custom-style="{textAlign:'right'}"
  319. v-model="vehicleAndVesselTaxForm.taxRelief" type="text"></u-input>
  320. </u-form-item>
  321. </u-form>
  322. </view>
  323. </view>
  324. <view class="Plancontent dis f-c ">
  325. <text class="title mb-1">商业险</text>
  326. <view class=" dis a-c j-s modelformcss">
  327. <text>即时投保</text>
  328. <view class="dis a-c j-c">
  329. <view class="status-data" :class="item.value==syimmediately? 'active':''"
  330. v-for="(item,index) in syimmediatelyList"
  331. @tap="datelyClick(item.value,'syimmediately','systartDate','syendDate')"
  332. :key="index">
  333. {{item.label}}
  334. </view>
  335. </view>
  336. </view>
  337. <u-form ref="uForm" label-width="120px">
  338. <u-form-item label="交强险投保日期" class="modelformcss">
  339. <u-input type="select" :select-open="systartShow"
  340. :custom-style="{textAlign:'right'}" v-model="systartDate" placeholder="请选择开始时间"
  341. @click="systartShow = true"></u-input>
  342. <u-picker v-model="systartShow" mode="time" :params="params"
  343. @confirm="systartconfirm"></u-picker>
  344. </u-form-item>
  345. <u-form-item label="交强险终保日期" class="modelformcss">
  346. <u-input type="select" :select-open="syendShow" :custom-style="{textAlign:'right'}"
  347. v-model="syendDate" placeholder="请选择结束时间" @click="syendShow = true"></u-input>
  348. <u-picker v-model="syendShow" mode="time" :params="params"
  349. @confirm="syendconfirm"></u-picker>
  350. </u-form-item>
  351. </u-form>
  352. </view>
  353. <view class="Plancontent dis f-c ">
  354. <text class="title mb-1">意外险</text>
  355. <view class=" modelformcss">
  356. <text>山西驾乘非营业客车2万档</text>
  357. <view class="Accident mt-1">
  358. <view class="dis a-c j-s">
  359. <view class="head dis a-c j-c">保险责任</view>
  360. <view class="head dis a-c j-c">保险金额</view>
  361. <view class="head dis a-c j-c">保费(元)</view>
  362. </view>
  363. <view class="dis a-c j-s" v-for="(item,index) in 3" :key="index">
  364. <view class="tr"></view>
  365. <view class="tr"></view>
  366. <view class="tr"></view>
  367. </view>
  368. </view>
  369. </view>
  370. </view>
  371. </view>
  372. <view class="" v-else>
  373. </view>
  374. </scroll-view>
  375. <view class="PlanPopup-btn dis a-c j-c">
  376. <u-button type="primary" shape="circle" size="medium"
  377. style="background: linear-gradient( 90deg, #0052FF 0%, #6595FA 100%);">确定方案</u-button>
  378. </view>
  379. </view>
  380. </u-popup>
  381. </view>
  382. </template>
  383. <script>
  384. import lsLoading from '@/components/common/ls-loading/ls-loading.vue';
  385. export default {
  386. components: {
  387. lsLoading
  388. },
  389. data() {
  390. return {
  391. model: {
  392. taxRelifFlag: "正常交税",
  393. taxpayerIdentifier: "身份证",
  394. relifReason: "",
  395. taxPaidAreaCode: "",
  396. },
  397. //车船税form
  398. vehicleAndVesselTaxForm: {
  399. taxRelifFlag: "1", //类型
  400. identifyNumber: "", //纳税人识别号
  401. taxpayerIdentifier: "01", //纳税人证件类型
  402. taxpayerName: "", //纳税人名称
  403. extendChar2: "", //减免税凭证号
  404. paidFreeCertificate: "", //完税凭证号
  405. relifReason: "", //减免税原因
  406. taxComCode: "", //税务机关代码
  407. taxComName: "", ///税务机关名称
  408. taxDocumentDate: "", //完税日期
  409. taxPaidAreaCode: "", //完税凭证地区代码
  410. taxRelief: "", //减税比例
  411. },
  412. taxRelifFlagoptions: [],
  413. taxpayerIdentifieroptions: [],
  414. relifReasonoptions: [],
  415. taxPaidAreaCodeShow: false, //完税凭证地区
  416. taxDocumentDateShow: false, //完税凭证填发日期
  417. taxRelifFlagShow: false, //车船税类型
  418. taxpayerIdentifierShow: false, //纳税人证件类型
  419. relifReasonShow: false, //减免税原因代码
  420. params: {
  421. year: true, //年
  422. month: true, //月
  423. day: true, //日
  424. hour: true, //时
  425. minute: true, //分
  426. second: true, //秒
  427. },
  428. jqimmediately: "0",
  429. jqimmediatelyList: [{
  430. label: '是',
  431. value: "1",
  432. },
  433. {
  434. label: '否',
  435. value: "0",
  436. },
  437. ],
  438. syimmediately: "0",
  439. syimmediatelyList: [{
  440. label: '是',
  441. value: "1",
  442. },
  443. {
  444. label: '否',
  445. value: "0",
  446. },
  447. ],
  448. jqchecked: false,
  449. sychecked: false,
  450. jqstartShow: false,
  451. jqendShow: false,
  452. systartShow: false,
  453. syendShow: false,
  454. jqstartDate: "",
  455. jqendDate: "",
  456. systartDate: "",
  457. syendDate: "",
  458. scrollTop: 0,
  459. carInfo: {},
  460. ownerInfo: {},
  461. policyHolderInfo: {},
  462. insuredPersonInfo: {},
  463. carInfoPositiveList: [],
  464. ownerInfoPositiveList: [],
  465. policyHolderInfoPositiveList: [],
  466. insuredPersonInfoPositiveList: [],
  467. transferDateShow: false,
  468. params1: {
  469. year: true, //年
  470. month: true, //月
  471. day: true, //日
  472. hour: false, //时
  473. minute: false, //分
  474. second: false, //秒
  475. },
  476. params2: {
  477. province: true,
  478. city: false,
  479. area: false
  480. },
  481. totalCompanyList: [],
  482. animation: 'twinkle', //动画类型
  483. InsureGuidePopup: false,
  484. /* 投保指引弹窗*/
  485. InsureGuideContent: "", // 指引内容
  486. PlanPopup: false, //方案选择弹窗
  487. SelectedPlanId: "", //已选方案id
  488. InsurerPlanList: [{
  489. label: "方案一",
  490. value: "1",
  491. PlanSet: []
  492. },
  493. {
  494. label: "方案二",
  495. value: "2",
  496. PlanSet: []
  497. },
  498. {
  499. label: "方案三",
  500. value: "3",
  501. PlanSet: []
  502. },
  503. {
  504. label: "自选方案",
  505. value: "4",
  506. PlanSet: []
  507. }
  508. ],
  509. }
  510. },
  511. onShow() {
  512. },
  513. onLoad() {
  514. this.getDicType("taxRelifFlag"); //车船税类型
  515. this.getDicType("taxpayerIdentifier"); //纳税人证件类型
  516. this.getDicType("relifReason"); //减免税原因代码
  517. this.jqstartDate = this.nextday();
  518. this.jqendDate = this.oneYearPast(this.jqstartDate);
  519. this.systartDate = this.nextday();
  520. this.syendDate = this.oneYearPast(this.jqstartDate);
  521. this.commpanyList();
  522. const eventChannel = this.getOpenerEventChannel()
  523. // 监听acceptData事件,获取上一页面通过eventChannel传送到当前页面的数据
  524. eventChannel.on('acceptData', async (data) => {
  525. console.log(data);
  526. this.carInfo = data.carInfo; //车辆信息
  527. this.ownerInfo = data.ownerInfo; //车主信息
  528. this.policyHolderInfo = data.policyHolderInfo; //投保人信息
  529. this.insuredPersonInfo = data.insuredPersonInfo; //被保人信息
  530. this.carInfoPositiveList = data.carInfoPositiveList; //车辆
  531. this.ownerInfoPositiveList = data.ownerInfoPositiveList; //车主
  532. this.policyHolderInfoPositiveList = data.policyHolderInfoPositiveList; //投保
  533. this.insuredPersonInfoPositiveList = data.insuredPersonInfoPositiveList; //被保人
  534. })
  535. },
  536. methods: {
  537. taxRelifFlagConfirm(val, name) {
  538. this.vehicleAndVesselTaxForm[name] = val[0].value;
  539. this.model[name] = val[0].label;
  540. },
  541. taxDocumentDateconfirm(e) {
  542. this.vehicleAndVesselTaxForm.taxDocumentDate = e.year + '-' + e.month + '-' + e.day;
  543. },
  544. taxPaidAreaCodeconfirm(e) {
  545. this.vehicleAndVesselTaxForm.taxPaidAreaCode = e.province.value;
  546. this.model.taxPaidAreaCode = e.province.label;
  547. },
  548. async getDicType(type) {
  549. let res = await this.$http.get('/sysDict/dictDetails/' + type);
  550. this[type + "options"] = res.data.ddList;
  551. },
  552. jqstartconfirm(e) {
  553. this.jqstartDate = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second;
  554. this.jqendDate = this.oneYearPast(this.jqstartDate)
  555. },
  556. jqendconfirm(e) {
  557. this.jqendDate = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second;
  558. },
  559. systartconfirm(e) {
  560. this.systartDate = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second;
  561. this.syendDate = this.oneYearPast(this.systartDate)
  562. },
  563. syendconfirm(e) {
  564. this.syendDate = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second;
  565. },
  566. statusclick(e) {
  567. this.SelectedPlanId = e;
  568. },
  569. InsureGuideclick() {
  570. this.InsureGuidePopup = true;
  571. },
  572. SchemeSelection() {
  573. this.PlanPopup = true;
  574. },
  575. datelyClick(value, name, startDate, endDate) {
  576. this[name] = value;
  577. if (value == 1) {
  578. const date = new Date();
  579. date.setHours(date.getHours() + 2);
  580. date.setMinutes(0)
  581. date.setSeconds(0)
  582. this[startDate] = this.transformTime(date)
  583. this[endDate] = this.oneYearPast(date);
  584. } else {
  585. this[startDate] = this.nextday();
  586. this[endDate] = this.oneYearPast(this.jqstartDate);
  587. }
  588. },
  589. //获取保险公司列表
  590. async commpanyList() {
  591. let commpanykad = await this.$http.get('/tax/manager/getAllAgreement', {
  592. // kindList: this.kindList,
  593. // riskList: this.riskList,
  594. // systemType: "2",
  595. });
  596. commpanykad.data.map(ele => {
  597. ele["result"] = {};
  598. ele["quoteCode"] = 0;
  599. ele["checked"] = false;
  600. ele["msg"] = "";
  601. ele["lastYearMsg"] = "";
  602. ele["agreementName"] = "";
  603. ele["apiType"] = "";
  604. ele["coefficient"] = "";
  605. ele["syAdjustRate"] = "";
  606. ele["selectShow"] = false;
  607. ele['underwritingDescription'] = "";
  608. ele['isComparableShow'] = false;
  609. ele['planDetailsshow'] = false;
  610. ele['isComparableshowHide'] = false;
  611. ele['isComparableDisabled'] = false;
  612. })
  613. commpanykad.data.map(obj => {
  614. obj.agreement.map(ele => {
  615. ele.businessDescription = ele.businessDescription + "(" +
  616. ele.jobDescription + ")";
  617. return ele;
  618. })
  619. });
  620. this.totalCompanyList = commpanykad.data;
  621. },
  622. immediatelyClick(name) {
  623. this.carInfo[name] = !this.carInfo[name];
  624. if (name == 'transferFlag') {
  625. if (this.carInfo[name]) {
  626. this.carInfo.transferDate = this.carInfo.issueDate;
  627. } else {
  628. this.carInfo.transferDate = "";
  629. }
  630. }
  631. },
  632. toCarInfo() {
  633. this.navigate({
  634. url: '/pages/carInsure/Information',
  635. success: (res) => {
  636. res.eventChannel.emit(
  637. "acceptData", {
  638. carInfo: this
  639. .carInfo,
  640. ownerInfo: this
  641. .ownerInfo,
  642. policyHolderInfo: this
  643. .policyHolderInfo,
  644. insuredPersonInfo: this
  645. .insuredPersonInfo,
  646. riskList: this
  647. .riskList,
  648. kindList: this
  649. .kindList,
  650. carInfoPositiveList: this
  651. .carInfoPositiveList, //车辆
  652. ownerInfoPositiveList: this
  653. .ownerInfoPositiveList, //车主
  654. policyHolderInfoPositiveList: this
  655. .policyHolderInfoPositiveList, //投保
  656. insuredPersonInfoPositiveList: this
  657. .insuredPersonInfoPositiveList, //被保人
  658. })
  659. }
  660. }, "navigateTo", true);
  661. },
  662. //计算输入时间一年后的的前一天(输入的参数为字符串("2019-03-02")最终输出也为日期的字符串)
  663. oneYearPast(time) {
  664. var date = new Date(time);
  665. date.setSeconds(date.getSeconds() - 1);
  666. date.setFullYear(date.getFullYear() + 1); //一年后
  667. date.setTime(date.getTime()); //一年后的前一天
  668. var strYear = date.getFullYear();
  669. var strDay = date.getDate();
  670. var strMonth = date.getMonth() + 1;
  671. var hh = date.getHours();
  672. var minutes = date.getMinutes(); // 分
  673. var Seconds = date.getSeconds();
  674. if (hh < 10) {
  675. hh = "0" + hh;
  676. }
  677. if (minutes < 10) {
  678. minutes = "0" + minutes;
  679. }
  680. if (Seconds < 10) {
  681. Seconds = "0" + Seconds;
  682. }
  683. if (strMonth < 10) {
  684. strMonth = "0" + strMonth;
  685. }
  686. if (strDay < 10) {
  687. strDay = "0" + strDay;
  688. }
  689. var datastr =
  690. strYear + "-" + strMonth + "-" + strDay + " " + hh + ":" + minutes + ":" + Seconds;
  691. return datastr;
  692. },
  693. //次日
  694. nextday() {
  695. var date = new Date();
  696. date.setFullYear(date.getFullYear());
  697. date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
  698. var strYear = date.getFullYear();
  699. var strDay = date.getDate();
  700. var strMonth = date.getMonth() + 1;
  701. var hh = date.getHours();
  702. if (hh < 10) {
  703. hh = "0" + hh;
  704. }
  705. if (strMonth < 10) {
  706. strMonth = "0" + strMonth;
  707. }
  708. if (strDay < 10) {
  709. strDay = "0" + strDay;
  710. }
  711. var datastr = strYear + "-" + strMonth + "-" + strDay + " " + "00:00:00";
  712. return datastr;
  713. },
  714. //时间转换
  715. transformTime(date) {
  716. var d = new Date(date);
  717. var strYear = d.getFullYear();
  718. var strMonth = d.getMonth() + 1;
  719. var strDay = d.getDate();
  720. var hh = d.getHours();
  721. var minutes = d.getMinutes(); // 分
  722. var Seconds = d.getSeconds();
  723. if (hh < 10) {
  724. hh = "0" + hh;
  725. }
  726. if (minutes < 10) {
  727. minutes = "0" + minutes;
  728. }
  729. if (Seconds < 10) {
  730. Seconds = "0" + Seconds;
  731. }
  732. if (strMonth < 10) {
  733. strMonth = "0" + strMonth;
  734. }
  735. if (strDay < 10) {
  736. strDay = "0" + strDay;
  737. }
  738. var datetime =
  739. strYear + "-" + strMonth + "-" + strDay + " " + hh + ":" + minutes + ":" + Seconds;
  740. return datetime;
  741. },
  742. toChinesNum(num) {
  743. let overWan = Math.floor(num / 10000);
  744. let result = overWan + "万";
  745. return result;
  746. },
  747. }
  748. }
  749. </script>
  750. <style lang="scss" scoped>
  751. @import '@/style/mixin.scss';
  752. .page {
  753. background: #F8FAFE;
  754. padding: 16px 16px 100px 16px;
  755. }
  756. .scroll-Y {
  757. height: 600px;
  758. }
  759. .scroll-view-item {
  760. height: 300rpx;
  761. line-height: 300rpx;
  762. text-align: center;
  763. font-size: 36rpx;
  764. }
  765. .modelformcss {
  766. padding: 5px 15px;
  767. }
  768. .PlanPopup-btn {
  769. width: 100%;
  770. height: 48px;
  771. background: #FFFFFF;
  772. box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.05);
  773. }
  774. .Plancontent {
  775. padding: 8px;
  776. .title {
  777. color: #232832;
  778. font-size: 15px;
  779. font-weight: bold;
  780. ::before {
  781. content: "丨";
  782. width: 10px;
  783. height: 10px;
  784. color: #0052FF;
  785. }
  786. }
  787. .Accident {
  788. width: 100%;
  789. border: 1px solid #0874FF;
  790. border-radius: 6px;
  791. overflow: hidden;
  792. .head {
  793. width: 33.33%;
  794. height: 40px;
  795. background-color: #0874FF;
  796. color: #FFFFFF;
  797. &:nth-child(1) {
  798. width: 50%;
  799. }
  800. }
  801. .tr {
  802. width: 33.33%;
  803. height: 40px;
  804. color: #232832;
  805. border: 1rpx solid #0874FF;
  806. }
  807. }
  808. }
  809. .quotePlan {
  810. background: #FFFFFF;
  811. box-shadow: 0px 4px 10px 0px #DAE3F4;
  812. border-radius: 6px;
  813. }
  814. .status-data {
  815. width: auto;
  816. padding: 2px 8px;
  817. margin-left: 5px;
  818. font-size: 12px;
  819. border: 1px solid #CDCDCD;
  820. cursor: pointer;
  821. text-align: center;
  822. line-height: 25px;
  823. }
  824. .active {
  825. position: relative;
  826. background: rgba(0, 82, 255, 0.1);
  827. color: #0052FF;
  828. border: 1px solid #0052FF;
  829. font-weight: 700;
  830. }
  831. .active::before {
  832. content: "";
  833. position: absolute;
  834. top: 0;
  835. left: 0;
  836. width: 10px;
  837. height: 10px;
  838. background-image: url("/static/image/car-insure/before.png");
  839. background-size: cover;
  840. }
  841. .active1 {
  842. position: relative;
  843. background: rgba(255, 86, 0, 0.1);
  844. color: #FF5600;
  845. border: 1px solid #FF5600;
  846. font-weight: 700;
  847. }
  848. .active1::before {
  849. content: "";
  850. position: absolute;
  851. top: 0;
  852. left: 0;
  853. width: 10px;
  854. height: 10px;
  855. background-image: url("/static/image/car-insure/before1.png");
  856. background-size: cover;
  857. }
  858. .car-header {
  859. width: 100%;
  860. height: auto;
  861. background: linear-gradient(0, #FFFFFF 0%, rgba(241, 246, 255, 0.8) 100%);
  862. box-shadow: 0px 4px 10px 0px rgba(158, 173, 229, 0.1);
  863. border-radius: 6px;
  864. padding: 8px 15px;
  865. position: relative;
  866. .head-name {
  867. margin-left: 20px;
  868. &>text {
  869. font-weight: bold;
  870. font-size: 15px;
  871. color: #232832;
  872. }
  873. .name1 text {
  874. font-size: 14px;
  875. font-weight: bold;
  876. color: #333333;
  877. }
  878. }
  879. .carJump {
  880. position: absolute;
  881. top: 5px;
  882. right: 10px;
  883. font-size: 14px;
  884. color: #0052FF;
  885. }
  886. }
  887. /* 报价公司Start */
  888. .quoteCompany {
  889. box-sizing: border-box;
  890. /* background:#FFFFFF; */
  891. position: relative;
  892. border-radius: 20upx;
  893. }
  894. .quoteCompany .header {
  895. height: 80upx;
  896. }
  897. .quoteCompany .header .title {
  898. font-size: 30upx;
  899. font-weight: bold;
  900. }
  901. .quoteCompany .header .title .icon {
  902. color: rgba($themeColor, 0.6);
  903. margin-left: 15upx;
  904. }
  905. .quoteCompanyItem {
  906. margin-bottom: 20upx;
  907. background: #FFFFFF;
  908. border-radius: 6px;
  909. box-shadow: 0px 4px 10px 0px #DAE3F4;
  910. box-sizing: border-box;
  911. cursor: pointer;
  912. }
  913. .quoteCompanyItem .top {
  914. position: relative;
  915. padding: 8px;
  916. }
  917. .quoteCompanyItem .top .companyIcon {
  918. border-radius: 6px 6px 0 0;
  919. flex-shrink: 0;
  920. }
  921. .insuranceGuide {
  922. background: rgba(255, 86, 0, 0.05);
  923. border-radius: 4px 4px 4px 4px;
  924. font-weight: bold;
  925. font-size: 14px;
  926. color: #FF5600;
  927. padding: 0 4px;
  928. }
  929. .planDetails {
  930. width: 100%;
  931. height: auto;
  932. background: #F9F9F9;
  933. border-radius: 6px;
  934. padding: 6px;
  935. .headers {
  936. >image {
  937. width: 14px;
  938. height: 14px;
  939. }
  940. >text {
  941. font-size: 12px;
  942. color: #4B6FBA;
  943. margin-left: 10px;
  944. }
  945. }
  946. }
  947. .content {
  948. padding: 0 8px;
  949. margin-bottom: 5px;
  950. }
  951. .quoteCompanyItem .top .companyIcon image {
  952. width: 20px;
  953. height: 20px;
  954. margin-right: 10px;
  955. }
  956. .quoteCompanyItem .top .Premium {
  957. padding: 10px 8px;
  958. border-top: 1px solid #f2f2f2;
  959. .price {
  960. font-size: 12px;
  961. color: #FF5600;
  962. text {
  963. margin-right: 5px;
  964. }
  965. }
  966. .time {
  967. font-size: 12px;
  968. color: #2D4D89;
  969. >text {
  970. margin-right: 5px;
  971. }
  972. }
  973. }
  974. .quoteCompanyItem .top .quotebtn {
  975. width: 100%;
  976. height: auto;
  977. >view {
  978. width: 50%;
  979. font-size: 14px;
  980. padding: 4px 0;
  981. }
  982. }
  983. .lastyear {
  984. view {
  985. font-size: 12px;
  986. font-weight: bold;
  987. image {
  988. width: 14px;
  989. height: 14px;
  990. }
  991. }
  992. .left {
  993. border: 1px solid #229805;
  994. border-radius: 2px 2px 2px 2px;
  995. padding: 1px 6px;
  996. color: #229805;
  997. }
  998. .right {
  999. border-radius: 2px 2px 2px 2px;
  1000. padding: 1px 6px;
  1001. border: 1px solid #FF5600;
  1002. margin-left: 10px;
  1003. color: #FF5600;
  1004. }
  1005. }
  1006. .quoteCompanyItem .top .companyName {
  1007. font-size: 14px;
  1008. font-weight: bold;
  1009. color: #232832;
  1010. }
  1011. .quoteCompanyItem .top .totalMoney {
  1012. font-size: 40upx;
  1013. font-weight: bold;
  1014. color: $themeColor;
  1015. position: absolute;
  1016. top: -15upx;
  1017. right: 0;
  1018. }
  1019. .quoteCompanyItem .top .tip {
  1020. font-size: 26upx;
  1021. font-weight: bold;
  1022. color: #999;
  1023. position: absolute;
  1024. top: 0upx;
  1025. right: 0;
  1026. }
  1027. .sum {
  1028. color: #0052FF;
  1029. font-size: 14px;
  1030. font-weight: bold;
  1031. }
  1032. .quoteCompanyItem .top .signs {
  1033. width: 500upx;
  1034. overflow: hidden;
  1035. text-overflow: ellipsis;
  1036. white-space: nowrap;
  1037. }
  1038. .quoteCompanyItem .top .sign {
  1039. height: 40upx;
  1040. margin: 0upx 10upx;
  1041. background: rgba($themeColor, 0.6);
  1042. color: $themeColor;
  1043. font-size: 20upx;
  1044. margin-right: 10upx;
  1045. border-radius: 6upx;
  1046. padding: 0 2px;
  1047. line-height: 40upx;
  1048. }
  1049. .jqsign {
  1050. height: 20px;
  1051. background: rgba(255, 177, 177, 0.55);
  1052. color: #fd0a0a;
  1053. font-size: 20upx;
  1054. border-radius: 6upx;
  1055. padding: 0 10px;
  1056. box-sizing: border-box;
  1057. }
  1058. .quoteCompanyItem .body {
  1059. padding: 20upx 0;
  1060. flex-wrap: wrap;
  1061. }
  1062. .quoteCompanyItem .body>view {
  1063. flex-shrink: 0;
  1064. width: 50%;
  1065. overflow: hidden;
  1066. text-overflow: ellipsis;
  1067. white-space: nowrap;
  1068. }
  1069. .quoteCompanyItem .body .icon-exchange {
  1070. margin-right: 15upx;
  1071. display: inline-block;
  1072. }
  1073. /* 报价公司End */
  1074. </style>