underwriting1.vue 38 KB

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