underwriting1.vue 39 KB

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