underwriting1.vue 38 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250
  1. <template>
  2. <view :style="getHeight" style="background-color: #F5F5F5;">
  3. <!-- 公共组件-每个页面必须引入 -->
  4. <public-module></public-module>
  5. <!-- 头部 -->
  6. <view class="carInfo w-100 px-3 box-sizing">
  7. <view class="d-flex">
  8. <view class="icon iconfont icon-tree-round-car flex-shrink topLeft"></view>
  9. <view class="topRight d-flex flex-1 p-3 flex-column" style="color: #FFFFFF;">
  10. <view class="d-flex flex-1">
  11. <view class="font-lg d-flex a-center">{{this.licenseNo}}
  12. <view class="icon iconfont icon-bianji1 ml-2" @tap="toCarInfo"></view>
  13. </view>
  14. </view>
  15. <view class="brandName">{{carInfo.modelcname}}</view>
  16. </view>
  17. </view>
  18. <view class="other d-flex j-sb px-3">
  19. <view class="d-flex flex-1 a-center">
  20. <view class="privilege d-flex a-center j-center flex-shrink px-2">特权</view>
  21. <view class="content">每月自动查违章,无违章领奖励</view>
  22. </view>
  23. <view class="flex-shrink icon iconfont icon-youjiantou d-flex a-center font-sm"></view>
  24. </view>
  25. </view>
  26. <!-- 车主信息 -->
  27. <view>
  28. <view class="personInfo">
  29. <view class="title d-flex a-center j-center j-sb">
  30. <text style="font-weight: bold;">车主</text>
  31. <view class="showStatus" @tap="controlShow('showOwerInfo')">{{showOwerInfo?'收起':'展开'}}</view>
  32. </view>
  33. <view class="content" v-if="showOwerInfo">
  34. <view class="row d-flex a-center">
  35. <view class="left">姓名:</view>
  36. <view class="right d-flex flex-1">{{ownerInfo.name}}</view>
  37. </view>
  38. <view class="row d-flex a-center">
  39. <view class="left">证件类型:</view>
  40. <block v-for="(item,index) in identifyList" :key="index">
  41. <template v-if="item.id == ownerInfo.identifyType">
  42. <view class="right d-flex flex-1">{{item.label}}</view>
  43. </template>
  44. </block>
  45. </view>
  46. <view class="row d-flex a-center">
  47. <view class="left">手机号:</view>
  48. <view class="right d-flex flex-1">{{ownerInfo.mobile}}</view>
  49. </view>
  50. <view class="row d-flex a-center">
  51. <view class="left">证件号:</view>
  52. <view class="right d-flex flex-1">{{ownerInfo.identifyNumber}}</view>
  53. </view>
  54. <view class="row d-flex a-center"
  55. style="height:auto;min-height: 80upx;padding: 15upx 0;box-sizing: border-box; ">
  56. <view class="left">地址:</view>
  57. <view class="right d-flex flex-1">{{ownerInfo.addr}}</view>
  58. </view>
  59. </view>
  60. </view>
  61. <!-- 投保人信息 -->
  62. <view class="personInfo">
  63. <view class="title d-flex a-center j-sb">
  64. <text style="font-weight: bold;">投保人</text>
  65. <view class="showStatus" @tap="controlShow('showPolicyHolderInfo')">
  66. {{showPolicyHolderInfo?'收起':'展开'}}
  67. </view>
  68. </view>
  69. <view class="content" v-if="showPolicyHolderInfo">
  70. <view class="row d-flex a-center">
  71. <view class="left">姓名:</view>
  72. <view class="right d-flex flex-1">{{policyHolderInfo.name}}</view>
  73. </view>
  74. <view class="row d-flex a-center">
  75. <view class="left">证件类型:</view>
  76. <block v-for="(item,index) in identifyList" :key="index">
  77. <template v-if="item.id == policyHolderInfo.identifyType">
  78. <view class="right d-flex flex-1">{{item.label}}</view>
  79. </template>
  80. </block>
  81. </view>
  82. <view class="row d-flex a-center">
  83. <view class="left">手机号:</view>
  84. <view class="right d-flex flex-1">{{policyHolderInfo.mobile}}</view>
  85. </view>
  86. <view class="row d-flex a-center">
  87. <view class="left">证件号:</view>
  88. <view class="right d-flex flex-1">{{policyHolderInfo.identifyNumber}}</view>
  89. </view>
  90. <view class="row d-flex a-center"
  91. style="height:auto;min-height: 80upx;padding: 15upx 0;box-sizing: border-box; ">
  92. <view class="left">地址:</view>
  93. <view class="right d-flex flex-1">{{policyHolderInfo.addr}}</view>
  94. </view>
  95. </view>
  96. </view>
  97. <!-- 被保人信息 -->
  98. <view class="personInfo">
  99. <view class="title d-flex a-center j-sb">
  100. <text style="font-weight: bold;">被保人</text>
  101. <view class="showStatus" @tap="controlShow('showInsuredPersonInfo')">
  102. {{showInsuredPersonInfo?'收起':'展开'}}
  103. </view>
  104. </view>
  105. <view class="content" v-if="showInsuredPersonInfo">
  106. <view class="row d-flex a-center">
  107. <view class="left">姓名:</view>
  108. <view class="right d-flex flex-1">{{insuredPersonInfo.name}}</view>
  109. </view>
  110. <view class="row d-flex a-center">
  111. <view class="left">证件类型:</view>
  112. <block v-for="(item,index) in identifyList" :key="index">
  113. <template v-if="item.id == insuredPersonInfo.identifyType">
  114. <view class="right d-flex flex-1">{{item.label}}</view>
  115. </template>
  116. </block>
  117. </view>
  118. <view class="row d-flex a-center">
  119. <view class="left">手机号:</view>
  120. <view class="right d-flex flex-1">{{insuredPersonInfo.mobile}}</view>
  121. </view>
  122. <view class="row d-flex a-center">
  123. <view class="left">证件号:</view>
  124. <view class="right d-flex flex-1">{{insuredPersonInfo.identifyNumber}}</view>
  125. </view>
  126. <view class="row d-flex a-center"
  127. style="height:auto;min-height: 80upx;padding: 15upx 0;box-sizing: border-box; ">
  128. <view class="left">地址:</view>
  129. <view class="right d-flex flex-1">{{insuredPersonInfo.addr}}</view>
  130. </view>
  131. </view>
  132. </view>
  133. <!-- 车辆影像信息Start -->
  134. <view class="imageInfo">
  135. <view class="title d-flex a-center j-sb">
  136. <text style="font-weight: bold;">车辆影像信息</text>
  137. <view class="showStatus" @tap="controlShow('showCarImageInfo')">{{showCarImageInfo?'收起':'展开'}}
  138. </view>
  139. </view>
  140. <view class="uni-uploader" v-if="showCarImageInfo">
  141. <view class="uni-uploader-body dis ">
  142. <view class="uni-uploader__files">
  143. <block v-for="(image,index) in imgList1" :key="index">
  144. <view class="uni-uploader__file">
  145. <image class="uni-uploader__img" :src="image.url" :data-src="image.url"
  146. @tap="previewImage($event,'imgList1')"></image>
  147. <view class="delImgIcon iconfont icon-cuo d-flex a-center j-center"
  148. @tap="delCheckImage(image,'carImageListId','imgList1')"></view>
  149. </view>
  150. </block>
  151. <view v-if="imgList1.length==0" class="uni-uploader__input-box"
  152. style="box-sizing: border-box;">
  153. <view class="uni-uploader__input" @tap="chooseImage('C01','carImageListId','imgList1')">
  154. </view>
  155. </view>
  156. </view>
  157. <view class="uni-uploader__files">
  158. <block v-for="(image,index) in imgList2" :key="index">
  159. <view class="uni-uploader__file">
  160. <image class="uni-uploader__img" :src="image.url" :data-src="image.url"
  161. @tap="previewImage($event,'imgList2')"></image>
  162. <view class="delImgIcon iconfont icon-cuo d-flex a-center j-center"
  163. @tap="delCheckImage(image,'carImageListId','imgList2')"></view>
  164. </view>
  165. </block>
  166. <view v-if="imgList2.length==0" class="uni-uploader__input-box"
  167. style="box-sizing: border-box;">
  168. <view class="uni-uploader__input" @tap="chooseImage('D01','carImageListId','imgList2')">
  169. </view>
  170. </view>
  171. </view>
  172. </view>
  173. </view>
  174. </view>
  175. <!-- 车辆影像信息End -->
  176. <!-- 车主影像信息Start -->
  177. <view class="imageInfo">
  178. <view class="title d-flex a-center j-sb">
  179. <text style="font-weight: bold;">车主影像信息</text>
  180. <view class="showStatus" @tap="controlShow('showOwnerImageInfo')">{{showOwnerImageInfo?'收起':'展开'}}
  181. </view>
  182. </view>
  183. <view class="uni-uploader" v-if="showOwnerImageInfo">
  184. <view class="uni-uploader-body dis ">
  185. <view class="uni-uploader__files">
  186. <block v-for="(image,index) in imgList3" :key="index">
  187. <view class="uni-uploader__file">
  188. <image class="uni-uploader__img" :src="image.url" :data-src="image.url"
  189. @tap="previewImage($event,'imgList3')"></image>
  190. <view class="delImgIcon iconfont icon-cuo d-flex a-center j-center"
  191. @tap="delCheckImage(image,'ownerImageListId','imgList3')"></view>
  192. </view>
  193. </block>
  194. <view v-if="imgList3.length==0" class="uni-uploader__input-box"
  195. style="box-sizing: border-box;">
  196. <view class="uni-uploader__input"
  197. @tap="chooseImage('C02','ownerImageListId','imgList3')"></view>
  198. </view>
  199. </view>
  200. <view class="uni-uploader__files">
  201. <block v-for="(image,index) in imgList4" :key="index">
  202. <view class="uni-uploader__file">
  203. <image class="uni-uploader__img" :src="image.url" :data-src="image.url"
  204. @tap="previewImage($event,'imgList4')"></image>
  205. <view class="delImgIcon iconfont icon-cuo d-flex a-center j-center"
  206. @tap="delCheckImage(image,'ownerImageListId','imgList4')"></view>
  207. </view>
  208. </block>
  209. <view v-if="imgList4.length==0" class="uni-uploader__input-box"
  210. style="box-sizing: border-box;">
  211. <view class="uni-uploader__input"
  212. @tap="chooseImage('D02','ownerImageListId','imgList4')"></view>
  213. </view>
  214. </view>
  215. </view>
  216. </view>
  217. </view>
  218. <!-- 车主影像信息End -->
  219. <!-- 投保人影像信息Start -->
  220. <view class="imageInfo">
  221. <view class="title d-flex a-center j-sb">
  222. <text style="font-weight: bold;">投保人影像信息</text>
  223. <view class="showStatus" @tap="controlShow('showPolicyImageInfo')">
  224. {{showPolicyImageInfo?'收起':'展开'}}
  225. </view>
  226. </view>
  227. <view class="uni-uploader" v-if="showPolicyImageInfo">
  228. <view class="uni-uploader-body dis ">
  229. <view class="uni-uploader__files">
  230. <block v-for="(image,index) in imgList5" :key="index">
  231. <view class="uni-uploader__file">
  232. <image class="uni-uploader__img" :src="image.url" :data-src="image.url"
  233. @tap="previewImage($event,'imgList5')"></image>
  234. <view class="delImgIcon iconfont icon-cuo d-flex a-center j-center"
  235. @tap="delCheckImage(image,'policyImageListId','imgList5')"></view>
  236. </view>
  237. </block>
  238. <view v-if="imgList5.length==0" class="uni-uploader__input-box"
  239. style="box-sizing: border-box;">
  240. <view class="uni-uploader__input" @tap="chooseImage('C01','car')"></view>
  241. </view>
  242. </view>
  243. <view class="uni-uploader__files">
  244. <block v-for="(image,index) in imgList6" :key="index">
  245. <view class="uni-uploader__file">
  246. <image class="uni-uploader__img" :src="image.url" :data-src="image.url"
  247. @tap="previewImage($event,'imgList6')"></image>
  248. <view class="delImgIcon iconfont icon-cuo d-flex a-center j-center"
  249. @tap="delCheckImage(image,'policyImageListId','imgList6')"></view>
  250. </view>
  251. </block>
  252. <view v-if="imgList6.length==0" class="uni-uploader__input-box"
  253. style="box-sizing: border-box;">
  254. <view class="uni-uploader__input" @tap="chooseImage('C01','car')"></view>
  255. </view>
  256. </view>
  257. </view>
  258. </view>
  259. </view>
  260. <!-- 投保人影像信息End -->
  261. <!-- 被保人影像信息Start -->
  262. <view class="imageInfo">
  263. <view class="title d-flex a-center j-sb">
  264. <text style="font-weight: bold;">被保人影像信息</text>
  265. <view class="showStatus" @tap="controlShow('showInsuredImageInfo')">
  266. {{showInsuredImageInfo?'收起':'展开'}}
  267. </view>
  268. </view>
  269. <view class="uni-uploader" v-if="showInsuredImageInfo">
  270. <view class="uni-uploader-body dis ">
  271. <view class="uni-uploader__files">
  272. <block v-for="(image,index) in imgList7" :key="index">
  273. <view class="uni-uploader__file">
  274. <image class="uni-uploader__img" :src="image.url" :data-src="image.url"
  275. @tap="previewImage($event,'imgList7')"></image>
  276. <view class="delImgIcon iconfont icon-cuo d-flex a-center j-center"
  277. @tap="delCheckImage(image,'insuredImageListId','imgList7')"></view>
  278. </view>
  279. </block>
  280. <view v-if="imgList7.length==0" class="uni-uploader__input-box"
  281. style="box-sizing: border-box;">
  282. <view class="uni-uploader__input" @tap="chooseImage('C01','car')"></view>
  283. </view>
  284. </view>
  285. <view class="uni-uploader__files">
  286. <block v-for="(image,index) in imgList8" :key="index">
  287. <view class="uni-uploader__file">
  288. <image class="uni-uploader__img" :src="image.url" :data-src="image.url"
  289. @tap="previewImage($event,'imgList8')"></image>
  290. <view class="delImgIcon iconfont icon-cuo d-flex a-center j-center"
  291. @tap="delCheckImage(image,'insuredImageListId','imgList8')"></view>
  292. </view>
  293. </block>
  294. <view v-if="imgList8.length==0" class="uni-uploader__input-box"
  295. style="box-sizing: border-box;">
  296. <view class="uni-uploader__input" @tap="chooseImage('C01','car')"></view>
  297. </view>
  298. </view>
  299. </view>
  300. </view>
  301. </view>
  302. <!-- 被保人影像信息End -->
  303. <!-- 验车照Start -->
  304. <view class="imageInfo">
  305. <view class="title d-flex a-center j-sb">
  306. <text style="font-weight: bold;">验车照</text>
  307. <view class="showStatus" @tap="controlShow('showCarCheckImageInfo')">
  308. {{showCarCheckImageInfo?'收起':'展开'}}
  309. </view>
  310. </view>
  311. <view class="uni-uploader" v-if="showCarCheckImageInfo">
  312. <view class="uni-uploader-body">
  313. <view class="uni-uploader__files">
  314. <block v-for="(image,index) in carCheckImageList" :key="index">
  315. <view class="uni-uploader__file">
  316. <image class="uni-uploader__img" :src="image.url" :data-src="image.url"
  317. @tap="previewImage($event,'carCheck')"></image>
  318. <view class="delImgIcon iconfont icon-cuo d-flex a-center j-center "
  319. @tap="delCheckImage('carCheck',index)"></view>
  320. </view>
  321. </block>
  322. <view class="uni-uploader__input-box" style="box-sizing: border-box;">
  323. <view class="uni-uploader__input" @tap="chooseImage('C05','carCheck')"></view>
  324. </view>
  325. </view>
  326. </view>
  327. </view>
  328. </view>
  329. <!-- 验车照End -->
  330. <!-- 特约 -->
  331. <block v-for="(item,index) in riskList" :key="index">
  332. <template>
  333. <view class="appoint">
  334. <view class="title d-flex a-center j-sb">
  335. <text style="font-weight: bold;">特约</text>
  336. <view class="showStatus" @tap="controlShow('showAppoint')">{{showAppoint?'收起':'展开'}}</view>
  337. </view>
  338. <view class="content" v-if="showAppoint">
  339. <view class="row d-flex a-center j-sb">
  340. <view class="d-flex a-center j-center">交强特约险:</view>
  341. <textarea maxlength="100" v-model="jqappoint"
  342. placeholder="请输入交强险特别约定,最多可输入300个字符" /></textarea>
  343. </view>
  344. <view class="row d-flex a-center j-sb">
  345. <view>商业特约险:</view>
  346. <textarea class="mb-32" style="width: 100%;" maxlength="300" v-model="syappoint"
  347. placeholder="请输入商业险特别约定,最多可输入300个字符" /></textarea>
  348. </view>
  349. </view>
  350. </view>
  351. </template>
  352. </block>
  353. <view class="advancePayment">
  354. <view class="title d-flex a-center j-sb">
  355. <text style="font-weight: bold;">保费</text>
  356. <view class="showStatus" @tap="controlShow('showAdvancePayment')">{{showAdvancePayment?'收起':'展开'}}
  357. </view>
  358. </view>
  359. <view class="content" v-if="showAdvancePayment">
  360. <block v-for="(item,index) in riskList" :key="index">
  361. <template v-if="item.riskCode == '0507'">
  362. <view class="row d-flex a-center j-sb">
  363. <view class="d-flex a-center">交强险</view>
  364. <view>¥{{jqpremium}}</view>
  365. </view>
  366. </template>
  367. </block>
  368. <view class="row d-flex a-center j-sb">
  369. <view>车船税</view>
  370. <view>¥{{taxAmount}}</view>
  371. </view>
  372. <block v-for="(item,index) in riskList" :key="index">
  373. <template v-if="item.riskCode == '0510'">
  374. <view class="row d-flex a-center j-sb">
  375. <view class="d-flex a-center">商业险</view>
  376. <view>¥{{sypremium}}</view>
  377. </view>
  378. </template>
  379. </block>
  380. </view>
  381. </view>
  382. </view>
  383. <view style="height: 160upx;"></view>
  384. <view class="bottomBtn">
  385. <view class="agree d-flex a-center">
  386. <checkbox @tap="agreed" :checked="agree" style="transform:scale(0.6)"></checkbox> 我已确认并同意 <text
  387. class="tip">保险条款</text> | <text class="tip">投保须知</text> | <text class="tip">隐私条款</text>
  388. </view>
  389. <view class="btnView d-flex">
  390. <view class="d-flex flex-1 a-center">
  391. <view class="d-flex flex-column a-center listener">
  392. <view class="icon iconfont icon-xiaomishu"></view> 客服
  393. </view>
  394. <view style="font-weight: bold;font-size: 34upx;color: #333; ">¥{{sumPermium}}</view>
  395. </view>
  396. <view class="btn d-flex a-center j-center" @tap="submitAudit">申请核保</view>
  397. </view>
  398. </view>
  399. <previewImage ref="previewImage" :opacity="0.8" :circular="true" :imgs="previewImgs"></previewImage>
  400. </view>
  401. </template>
  402. <script>
  403. import store from '@/store';
  404. import previewImage from '@/components/common/previewImage/previewImage.vue'; //引用插件
  405. // import wPicker from "@/components/w-picker/w-picker.vue";
  406. import {
  407. pathToBase64,
  408. base64ToPath
  409. } from '@/common/image-tools-base64.js';
  410. import * as imageConversion from 'image-conversion'
  411. export default {
  412. components: {
  413. // wPicker,
  414. previewImage
  415. },
  416. computed: {
  417. getHeight() {
  418. let height = uni.getSystemInfoSync().windowHeight;
  419. return `minHeight: ${height}px;`;
  420. }
  421. },
  422. data() {
  423. return {
  424. quoteno: "", //报价号
  425. previewImgs: [],
  426. sumPermium: "",
  427. carInfo: {},
  428. vehicleModel: {},
  429. companyId: "",
  430. licenseNo: "",
  431. riskList: [],
  432. kindList: [],
  433. name: "",
  434. icon: "",
  435. taxAmount: "",
  436. jqpremium: "",
  437. sypremium: "",
  438. ownerInfo: {},
  439. policyHolderInfo: {},
  440. insuredPersonInfo: {},
  441. agree: false,
  442. jqappoint: "", //交强险特别约定
  443. syappoint: "", //商业特别约定
  444. identifyList: [{
  445. label: '身份证',
  446. id: "01"
  447. },
  448. {
  449. label: '护照',
  450. id: "02"
  451. },
  452. {
  453. label: '港澳台居民居住证',
  454. id: "03"
  455. },
  456. {
  457. label: '组织机构代码证',
  458. id: "04"
  459. },
  460. {
  461. label: '统一社会信用代码证',
  462. id: "05"
  463. },
  464. {
  465. label: '营业执照',
  466. id: "06"
  467. }
  468. ],
  469. showOwerInfo: false, //展示车主信息
  470. showPolicyHolderInfo: false, //展示投保人信息
  471. showInsuredPersonInfo: false, //展示被保人信息
  472. showProposalWay: false, //获取保单方式
  473. showAdvancePayment: false, //展示保费
  474. showAppoint: false, //展示特约
  475. showCarImageInfo: false, //显示车辆影像
  476. carImageListId: [],
  477. showOwnerImageInfo: false, //显示车主影像
  478. ownerImageListId: [],
  479. showPolicyImageInfo: false, //显示投保人影像
  480. policyImageListId: [],
  481. showInsuredImageInfo: false, //显示被保人影像
  482. insuredImageListId: [],
  483. showCarCheckImageInfo: false, //显示验车照影像
  484. existenceimg: 0,
  485. token: "",
  486. imgList1: [],
  487. imgList2: [],
  488. imgList3: [],
  489. imgList4: [],
  490. imgList5: [],
  491. imgList6: [],
  492. imgList7: [],
  493. imgList8: [],
  494. }
  495. },
  496. async onLoad(params) {
  497. this.token = store.state.token
  498. if (!!params.companyId) {
  499. this.companyId = params.companyId;
  500. let param = {
  501. companyId: params.companyId
  502. };
  503. let res = await this.$http.post('/insurance/order/getByCompanyId', param);
  504. //获取前一个页面传过来的信息(车辆信息,人员信息,险种信息)
  505. this.icon = "";
  506. this.name = res.data.inscompany;
  507. this.quoteno = res.data.quoteno;
  508. this.carInfo = res.data.carinfo;
  509. this.ownerInfo = res.data.ownerinfo;
  510. this.policyHolderInfo = res.data.applyinfo;
  511. this.insuredPersonInfo = res.data.insureinfo;
  512. this.riskList = res.data.riskinfo;
  513. this.kindList = res.data.kindinfo;
  514. this.licenseNo = res.data.licenseno;
  515. this.sumPermium = res.data.sumpremium;
  516. this.taxAmount = res.data.taxamount;
  517. this.jqpremium = res.data.jqpremium;
  518. this.sypremium = res.data.sypremium;
  519. // 图片类型(C01车辆影像,C02车主身份证,C03投保人身份证,C04被保人身份证,C05验车照)
  520. this.imageEcho(this.quoteno)
  521. // 影像获取完毕
  522. } else {
  523. uni.showModal({
  524. showCancel: false,
  525. title: "未查询到该订单"
  526. })
  527. }
  528. },
  529. methods: {
  530. //影像查询
  531. async imageEcho(quotenos) {
  532. let imgres = await this.$http.get('/ins/taskImage/findByQuoteNo?quoteNo=' + quotenos);
  533. if (imgres.code == "200") {
  534. Object.keys(imgres.data).forEach((keys) => {
  535. if (imgres.data[keys].url) {
  536. imgres.data[keys].url = this.$base.baseUrl + imgres.data[keys].url;
  537. switch (keys) {
  538. case 'C01':
  539. this.carImageListId.push({
  540. imageId: imgres.data[keys].imageId,
  541. imageType: imgres.data[keys].imageType,
  542. })
  543. this.imgList1.push(imgres.data[keys]);
  544. break;
  545. case 'D01':
  546. this.carImageListId.push({
  547. imageId: imgres.data[keys].imageId,
  548. imageType: imgres.data[keys].imageType,
  549. })
  550. this.imgList2.push(imgres.data[keys]);
  551. break;
  552. case 'C02':
  553. this.ownerImageListId.push({
  554. imageId: imgres.data[keys].imageId,
  555. imageType: imgres.data[keys].imageType,
  556. })
  557. this.imgList3.push(imgres.data[keys]);
  558. break;
  559. case 'D02':
  560. this.ownerImageListId.push({
  561. imageId: imgres.data[keys].imageId,
  562. imageType: imgres.data[keys].imageType,
  563. })
  564. this.imgList4.push(imgres.data[keys]);
  565. break;
  566. case 'C03':
  567. this.policyImageListId.push({
  568. imageId: imgres.data[keys].imageId,
  569. imageType: imgres.data[keys].imageType,
  570. })
  571. this.imgList5.push(imgres.data[keys]);
  572. break;
  573. case 'D03':
  574. this.policyImageListId.push({
  575. imageId: imgres.data[keys].imageId,
  576. imageType: imgres.data[keys].imageType,
  577. })
  578. this.imgList6.push(imgres.data[keys]);
  579. break;
  580. case 'C04':
  581. this.insuredImageListId.push({
  582. imageId: imgres.data[keys].imageId,
  583. imageType: imgres.data[keys].imageType,
  584. })
  585. this.imgList7.push(imgres.data[keys]);
  586. break;
  587. case 'D04':
  588. this.insuredImageListId.push({
  589. imageId: imgres.data[keys].imageId,
  590. imageType: imgres.data[keys].imageType,
  591. })
  592. this.imgList8.push(imgres.data[keys]);
  593. break;
  594. default:
  595. break;
  596. }
  597. }
  598. });
  599. }
  600. },
  601. // 重新选择车型
  602. toCarInfo() {
  603. this.navigate({
  604. url: '/pages/carInsure1/carInfo1',
  605. success: (res) => {
  606. res.eventChannel.emit("acceptData", {
  607. carInfo: this.carInfo,
  608. ownerInfo: this.ownerInfo,
  609. policyHolderInfo: this.policyHolderInfo,
  610. insuredPersonInfo: this.insuredPersonInfo,
  611. riskList: this.riskList,
  612. kindList: this.kindList
  613. })
  614. }
  615. }, "navigateTo", true);
  616. },
  617. //控制详情的展开和收起
  618. controlShow(type) {
  619. this[type] = !this[type];
  620. },
  621. //阅读并同意协议
  622. agreed() {
  623. if (this.agree == false) {
  624. this.agree = true;
  625. } else {
  626. this.agree = false;
  627. }
  628. },
  629. async chooseImage(type, imageIdList, imgurl) {
  630. let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
  631. count: 1,
  632. sizeType: ['compressed']
  633. });
  634. chooseImageRes.tempFilePaths.map((ele, index) => {
  635. uni.uploadFile({
  636. url: this.$base.baseUrl + '/ins/taskImage/uploadFile',
  637. filePath: ele,
  638. name: "multipartFile",
  639. formData: {
  640. 'type': 'image',
  641. },
  642. header: {
  643. Authorization: this.token,
  644. },
  645. success: async (imgRes) => {
  646. let data = JSON.parse(imgRes.data);
  647. data.data.url = this.$base.baseUrl + data.data.url;
  648. if (data.code == "200") {
  649. if (this[imageIdList].some(v => v.imageType == type)) {
  650. this[imageIdList].map(val => {
  651. if (val.imageType == type) {
  652. val.imageId = data.data.id;
  653. }
  654. })
  655. } else {
  656. this[imageIdList].push({
  657. imageId: data.data.id,
  658. imageType: type,
  659. })
  660. }
  661. this[imgurl].push(data.data)
  662. }
  663. }
  664. });
  665. })
  666. },
  667. previewImage(e, type) {
  668. this.previewImgs = this[type];
  669. var current = e.currentTarget.dataset.src;
  670. this.$refs.previewImage.open(current); // 传入当前选中的图片地址或序号
  671. },
  672. //删除图片
  673. delCheckImage(param, IdList, srcList) {
  674. this[IdList].map((ele, index) => {
  675. if (param.imageId === ele.imageId) {
  676. this[IdList].splice(index, 1);
  677. }
  678. return ele;
  679. });
  680. this[srcList].map((ele, index) => {
  681. if (param.imageId === ele.imageId) {
  682. this[srcList].splice(index, 1);
  683. }
  684. return ele;
  685. });
  686. },
  687. // 上传影像并提交核保
  688. async submitAudit() {
  689. if (!this.agree) {
  690. return uni.showToast({
  691. title: '请阅读并同意协议',
  692. icon: "none",
  693. duration: 2000
  694. });
  695. }
  696. const mergedArray = [...this.carImageListId, ...this.ownerImageListId, ...this
  697. .policyImageListId, ...this.insuredImageListId
  698. ];
  699. if (mergedArray.length > 0) {
  700. await this.$http.post('/ins/taskImage/uploadImages', {
  701. imageList: mergedArray,
  702. quoteNo: this.quoteno,
  703. })
  704. }
  705. uni.showModal({
  706. content: '是否确认提交核保?',
  707. success: async (res) => {
  708. if (res.confirm) {
  709. switch (this.name) {
  710. case "永安财险":
  711. let yaimage = await this.$http.post(
  712. '/order/yongAn/submitImage', {
  713. companyId: this.companyId
  714. });
  715. if (yaimage.code == '200') {
  716. let yaaudit = await this.$http.post(
  717. '/order/yongAn/audit', {
  718. companyId: this.companyId,
  719. jqappoint: "",
  720. syappoint: ""
  721. });
  722. if (yaaudit.code == '200') {
  723. uni.showModal({
  724. content: '订单自核成功',
  725. cancelText: '暂不缴费',
  726. confirmText: '立即缴费',
  727. success: (res1) => {
  728. if (res1.confirm) {
  729. uni.navigateTo({
  730. url: "/pages/carInsure1/payCode1?companyId=" +
  731. this
  732. .companyId
  733. })
  734. } else {
  735. this.navigate({
  736. url: "/pages/orders/orders"
  737. }, "switchTab",
  738. true);
  739. }
  740. }
  741. });
  742. } else {
  743. uni.showModal({
  744. content: '核保失败(' + yaaudit.msg + ')',
  745. cancelText: '返回订单',
  746. confirmText: '继续核保',
  747. success: async (res2) => {
  748. if (res2.confirm) {
  749. } else {
  750. this.navigate({
  751. url: "/pages/orders/orders"
  752. }, "switchTab",
  753. true);
  754. }
  755. }
  756. });
  757. }
  758. } else {
  759. uni.showModal({
  760. content: '影像上传失败(' + yaimage.msg + ')',
  761. cancelText: '返回订单',
  762. confirmText: '继续提交',
  763. success: async (res3) => {
  764. if (res3.confirm) {
  765. } else {
  766. this.navigate({
  767. url: "/pages/orders/orders"
  768. }, "switchTab",
  769. true);
  770. }
  771. }
  772. });
  773. }
  774. break;
  775. case "中煤财险":
  776. let zmimage = await this.$http.post(
  777. '/order/zhongMeiApi/submitImage', {
  778. companyId: this.companyId
  779. });
  780. if (zmimage.code == '200') {
  781. let zmaudit = await this.$http.post(
  782. '/order/zhongMeiApi/audit', {
  783. companyId: this.companyId,
  784. jqappoint: "",
  785. syappoint: ""
  786. });
  787. if (zmaudit.code == '200') {
  788. uni.showModal({
  789. content: '订单自核成功',
  790. cancelText: '暂不缴费',
  791. confirmText: '立即缴费',
  792. success: (res1) => {
  793. if (res1.confirm) {
  794. uni.navigateTo({
  795. url: "/pages/carInsure1/payCode1?companyId=" +
  796. this
  797. .companyId
  798. })
  799. } else {
  800. this.navigate({
  801. url: "/pages/orders/orders"
  802. }, "switchTab",
  803. true);
  804. }
  805. }
  806. });
  807. } else {
  808. uni.showModal({
  809. content: '核保失败(' + zmaudit.msg + ')',
  810. cancelText: '返回订单',
  811. confirmText: '继续核保',
  812. success: async (res2) => {
  813. if (res2.confirm) {
  814. } else {
  815. this.navigate({
  816. url: "/pages/orders/orders"
  817. }, "switchTab",
  818. true);
  819. }
  820. }
  821. });
  822. }
  823. } else {
  824. uni.showModal({
  825. content: '影像上传失败(' + zmimage.msg + ')',
  826. cancelText: '返回订单',
  827. confirmText: '继续提交',
  828. success: async (res3) => {
  829. if (res3.confirm) {
  830. } else {
  831. this.navigate({
  832. url: "/pages/orders/orders"
  833. }, "switchTab",
  834. true);
  835. }
  836. }
  837. });
  838. }
  839. break;
  840. case "永诚财险":
  841. let ycimage = await this.$http.post(
  842. '/api/yongCheng/UploadImage', {
  843. companyId: this.companyId
  844. });
  845. if (ycimage.code == '200') {
  846. let ycaudit = await this.$http.post(
  847. '/api/yongCheng/audit', {
  848. companyId: this.companyId,
  849. });
  850. if (ycaudit.code == '200') {
  851. uni.showModal({
  852. content: '订单自核成功',
  853. cancelText: '暂不缴费',
  854. confirmText: '立即缴费',
  855. success: (res1) => {
  856. if (res1.confirm) {
  857. uni.navigateTo({
  858. url: "/pages/carInsure1/payCode1?companyId=" +
  859. this
  860. .companyId
  861. })
  862. } else {
  863. this.navigate({
  864. url: "/pages/orders/orders"
  865. }, "switchTab",
  866. true);
  867. }
  868. }
  869. });
  870. } else {
  871. uni.showModal({
  872. content: '核保失败(' + ycaudit.msg + ')',
  873. cancelText: '返回订单',
  874. confirmText: '继续核保',
  875. success: async (res2) => {
  876. if (res2.confirm) {
  877. } else {
  878. this.navigate({
  879. url: "/pages/orders/orders"
  880. }, "switchTab",
  881. true);
  882. }
  883. }
  884. });
  885. }
  886. } else {
  887. uni.showModal({
  888. content: '影像上传失败(' + ycimage.msg + ')',
  889. cancelText: '返回订单',
  890. confirmText: '继续提交',
  891. success: async (res3) => {
  892. if (res3.confirm) {
  893. } else {
  894. this.navigate({
  895. url: "/pages/orders/orders"
  896. }, "switchTab",
  897. true);
  898. }
  899. }
  900. });
  901. }
  902. break;
  903. case "紫金财险":
  904. let zjimage = await this.$http.post(
  905. '/order/zijin/submitImage', {
  906. companyId: this.companyId
  907. });
  908. if (zjimage.code == '200') {
  909. let zjaudit = await this.$http.post(
  910. '/order/zijin/audit', {
  911. companyId: this.companyId,
  912. });
  913. if (zjaudit.code == '200') {
  914. uni.showModal({
  915. content: '订单自核成功',
  916. cancelText: '暂不缴费',
  917. confirmText: '立即缴费',
  918. success: (res1) => {
  919. if (res1.confirm) {
  920. uni.navigateTo({
  921. url: "/pages/carInsure1/payCode1?companyId=" +
  922. this
  923. .companyId
  924. })
  925. } else {
  926. this.navigate({
  927. url: "/pages/orders/orders"
  928. }, "switchTab",
  929. true);
  930. }
  931. }
  932. });
  933. } else {
  934. uni.showModal({
  935. content: '核保失败(' + zjaudit.msg + ')',
  936. cancelText: '返回订单',
  937. confirmText: '继续核保',
  938. success: async (res2) => {
  939. if (res2.confirm) {
  940. } else {
  941. this.navigate({
  942. url: "/pages/orders/orders"
  943. }, "switchTab",
  944. true);
  945. }
  946. }
  947. });
  948. }
  949. } else {
  950. uni.showModal({
  951. content: '影像上传失败(' + zjimage.msg + ')',
  952. cancelText: '返回订单',
  953. confirmText: '继续提交',
  954. success: async (res3) => {
  955. if (res3.confirm) {
  956. } else {
  957. this.navigate({
  958. url: "/pages/orders/orders"
  959. }, "switchTab",
  960. true);
  961. }
  962. }
  963. });
  964. }
  965. break;
  966. case "恒邦财险":
  967. case "安盛天平":
  968. case "众安财险":
  969. case "中国人寿":
  970. let pythonimage = await this.$http.post(
  971. '/insurance/crawler/submitImage', {
  972. subOrderNo: this.companyId
  973. });
  974. if (pythonimage.code == '200') {
  975. let pythonaudit = await this.$http.post(
  976. '/insurance/crawler/audit', {
  977. subOrderNo: this.companyId,
  978. });
  979. if (pythonaudit.code == '200') {
  980. uni.showModal({
  981. content: '订单自核成功',
  982. cancelText: '暂不缴费',
  983. confirmText: '立即缴费',
  984. success: (res1) => {
  985. if (res1.confirm) {
  986. uni.navigateTo({
  987. url: "/pages/carInsure1/payCode1?companyId=" +
  988. this
  989. .companyId
  990. })
  991. } else {
  992. this.navigate({
  993. url: "/pages/orders/orders"
  994. }, "switchTab",
  995. true);
  996. }
  997. }
  998. });
  999. } else {
  1000. uni.showModal({
  1001. content: '核保失败(' + pythonaudit.msg + ')',
  1002. cancelText: '返回订单',
  1003. confirmText: '继续核保',
  1004. success: async (res2) => {
  1005. if (res2.confirm) {
  1006. } else {
  1007. this.navigate({
  1008. url: "/pages/orders/orders"
  1009. }, "switchTab",
  1010. true);
  1011. }
  1012. }
  1013. });
  1014. }
  1015. } else {
  1016. uni.showModal({
  1017. content: '影像上传失败(' + pythonimage.msg + ')',
  1018. cancelText: '返回订单',
  1019. confirmText: '继续提交',
  1020. success: async (res3) => {
  1021. if (res3.confirm) {
  1022. } else {
  1023. this.navigate({
  1024. url: "/pages/orders/orders"
  1025. }, "switchTab",
  1026. true);
  1027. }
  1028. }
  1029. });
  1030. }
  1031. break;
  1032. }
  1033. } else if (res.cancel) {}
  1034. }
  1035. });
  1036. }
  1037. }
  1038. }
  1039. </script>
  1040. <style lang="scss" scoped>
  1041. @import '@/style/mixin.scss';
  1042. /* 头部车辆信息和特权Start */
  1043. .carInfo {
  1044. height: 290upx;
  1045. background: -webkit-linear-gradient(0deg, rgba($themeColor, 0.6), rgba($themeColor, 0.8));
  1046. background-size: 100% 100%;
  1047. }
  1048. .carInfo .topLeft {
  1049. width: 120upx;
  1050. font-size: 90upx;
  1051. color: #FFFFFF;
  1052. }
  1053. .carInfo .topRight .brandName {
  1054. width: 400upx;
  1055. overflow: hidden;
  1056. text-overflow: ellipsis;
  1057. white-space: nowrap;
  1058. }
  1059. .carInfo .other {
  1060. background-color: #FFFFFF;
  1061. height: 80upx;
  1062. border-radius: 15upx;
  1063. box-sizing: border-box;
  1064. }
  1065. .carInfo .other .privilege {
  1066. background-color: rgba($themeColor, 0.6);
  1067. font-size: 24upx;
  1068. color: #FFFFFF;
  1069. font-weight: bold;
  1070. width: 60upx;
  1071. }
  1072. .carInfo .other .content {
  1073. width: 460upx;
  1074. margin-left: 15upx;
  1075. overflow: hidden;
  1076. text-overflow: ellipsis;
  1077. white-space: nowrap;
  1078. }
  1079. .carInfo .other .icon {
  1080. width: 30upx;
  1081. }
  1082. /* 头部车辆信息和特权End */
  1083. /* 人员信息Start */
  1084. .personInfo,
  1085. .advancePayment,
  1086. .imageInfo,
  1087. .appoint {
  1088. margin-bottom: 20upx;
  1089. background: #FFFFFF;
  1090. padding: 0upx 30upx;
  1091. }
  1092. .personInfo .title,
  1093. .advancePayment .title,
  1094. .imageInfo .title,
  1095. .appoint .title {
  1096. height: 80upx;
  1097. font-size: 32upx;
  1098. box-shadow: inset 0 -3upx 0px #fafafa;
  1099. }
  1100. .showStatus {
  1101. font-size: 26upx;
  1102. color: $themeColor;
  1103. }
  1104. .personInfo .content .row,
  1105. .advancePayment .content .row {
  1106. height: 80upx;
  1107. border-bottom: 1px solid #F9F9F9;
  1108. }
  1109. .personInfo .content .row .left,
  1110. .advancePayment .content .row .left {
  1111. width: 170upx;
  1112. flex-shrink: 0;
  1113. font-size: 28upx;
  1114. }
  1115. .appoint .content .row {
  1116. height: auto;
  1117. margin-top: 10upx;
  1118. }
  1119. .appoint .content .row>view {
  1120. width: 240upx;
  1121. flex-shrink: 1;
  1122. font-size: 28upx;
  1123. }
  1124. .appoint .content .row>textarea {
  1125. padding: 15upx;
  1126. box-sizing: border-box;
  1127. font-size: 26upx;
  1128. min-height: 160upx;
  1129. height: 100upx;
  1130. border: 1px solid #fafafa;
  1131. }
  1132. .personInfo .content .row .right,
  1133. .advancePayment .content .row .right,
  1134. .appoint .content .row .right {
  1135. font-size: 28upx;
  1136. }
  1137. /* 人员信息End */
  1138. .uni-uploader__file {
  1139. position: relative;
  1140. }
  1141. .delImgIcon {
  1142. width: 40upx;
  1143. height: 40upx;
  1144. background-color: #999;
  1145. position: absolute;
  1146. right: 0upx;
  1147. top: 0upx;
  1148. color: #FFFFFF;
  1149. }
  1150. /* 底部按钮Start */
  1151. .bottomBtn {
  1152. z-index: 99;
  1153. position: fixed;
  1154. bottom: 0;
  1155. left: 0;
  1156. right: 0;
  1157. border-top: 1px solid #F1F1F1;
  1158. background-color: #FFFFFF;
  1159. height: 150upx;
  1160. }
  1161. .bottomBtn .agree {
  1162. height: 60upx;
  1163. font-size: 24upx;
  1164. }
  1165. .bottomBtn .agree .tip {
  1166. color: $themeColor;
  1167. margin: 0upx 10upx;
  1168. }
  1169. .bottomBtn .btnView {
  1170. height: 100upx;
  1171. border-top: 1px solid #F1F1F1;
  1172. }
  1173. .bottomBtn .listener {
  1174. width: 120upx;
  1175. font-size: 20upx;
  1176. line-height: 1;
  1177. color: #999;
  1178. }
  1179. .bottomBtn .listener .icon {
  1180. font-size: 40upx;
  1181. padding: 0;
  1182. line-height: 1.2;
  1183. }
  1184. .bottomBtn .btn {
  1185. font-size: 34upx;
  1186. background-color: $themeColor;
  1187. color: #fff;
  1188. width: 280upx;
  1189. flex-shrink: 0;
  1190. }
  1191. /* 底部按钮End */
  1192. </style>