carInfo1.vue 61 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858
  1. <template>
  2. <view class="body">
  3. <!-- 公共组件-每个页面必须引入 -->
  4. <public-module></public-module>
  5. <uni-group title="" class="carInfo">
  6. <uni-forms :rules="carRules" :value="carInfo" ref="carForm" validate-trigger="bind" err-show-type="toast"
  7. label-width="100">
  8. <uni-forms-item>
  9. <view class="title d-flex a-center j-sb font-md">
  10. <text class="font-weight">车辆信息</text>
  11. <view class="icon iconfont icon-hangshizhengshibie font-lg main-text-color"
  12. @tap="chooseImage('carInfo',1)" style="margin-right: 14px;"></view>
  13. </view>
  14. </uni-forms-item>
  15. <uni-forms-item label="车牌号: ">
  16. <input class="uni-input-input textColor" placeholder="暂未上牌" v-model="carInfo.licenseNo"
  17. placeholder-style="font-size:28upx" @input="upperCaseType('licenseNo')" />
  18. </uni-forms-item>
  19. <uni-forms-item name="frameNo" required label="车辆识别码:">
  20. <view class="d-flex a-center" style="height: 100%;">
  21. <input class="uni-input-input flex-1 textColor" placeholder="请输入车辆识别码" v-model="carInfo.frameNo"
  22. maxlength="17" @blur="binddata('frameNo', $event.detail.value,'carForm')"
  23. placeholder-style="font-size:28upx" @input="upperCaseType('frameNo')" />
  24. <text class="checkButton d-flex a-center j-center" @tap="toChooseVin(carInfo.frameNo)">校验</text>
  25. </view>
  26. </uni-forms-item>
  27. <uni-forms-item name="modelcname" required label="品牌型号: ">
  28. <view class="d-flex a-center textColor" style="height: 100%;">
  29. <input class="uni-input-input flex-1 textColor" placeholder="请输入品牌型号"
  30. v-model="carInfo.modelcname" @blur="binddata('modelcname', $event.detail.value,'carForm')"
  31. placeholder-style="font-size:28upx" @input="upperCaseType('modelcname')" />
  32. <text class="checkButton d-flex a-center j-center"
  33. @tap="toChooseVehicleType(carInfo.modelcname)">校验</text>
  34. </view>
  35. </uni-forms-item>
  36. <uni-forms-item name="engineNo" required label="发动机号: ">
  37. <input class="uni-input-input textColor" placeholder="请输入发动机号" v-model="carInfo.engineNo"
  38. @blur="binddata('engineNo', $event.detail.value,'carForm')" placeholder-style="font-size:28upx"
  39. @input="upperCaseType('engineNo')" />
  40. </uni-forms-item>
  41. <uni-forms-item label="年款: ">
  42. <input class="uni-input-input textColor" placeholder="请输入年款" v-model="carInfo.caryear"
  43. placeholder-style="font-size:28upx" />
  44. </uni-forms-item>
  45. <uni-forms-item label="座位数: ">
  46. <input class="uni-input-input textColor" placeholder="请输入座位数" v-model="carInfo.seatCount"
  47. placeholder-style="font-size:28upx" />
  48. </uni-forms-item>
  49. <uni-forms-item label="排量: ">
  50. <input class="uni-input-input textColor" placeholder="请输入排量" v-model="carInfo.enginedesc"
  51. placeholder-style="font-size:28upx" />
  52. </uni-forms-item>
  53. <uni-forms-item label="功率: ">
  54. <input class="uni-input-input textColor" placeholder="请输入功率" v-model="carInfo.powerScale"
  55. placeholder-style="font-size:28upx" />
  56. </uni-forms-item>
  57. <uni-forms-item label="新车购置价: " required name="purchasePrice">
  58. <input class="uni-input-input textColor" placeholder="请输入新车购置价" v-model="carInfo.purchasePrice"
  59. placeholder-style="font-size:28upx"
  60. @blur="binddata('purchasePrice', $event.detail.value,'carForm')"
  61. @input="upperCaseType('purchasePrice')" />
  62. </uni-forms-item>
  63. <uni-forms-item required label="使用性质: " required>
  64. <view class="d-flex a-center" style="width:100%;height: 100%;" @click="carnatureshow=true">
  65. <u-select v-model="carnatureshow" mode="single-column" :list="natureOfVehicleUseoptions"
  66. @confirm="dictionaryConfirm($event,'carnature')" label-name="dictTag"
  67. value-name="dictValue"></u-select>
  68. <view class="textColor">{{carInfo1.carnature}}</view>
  69. </view>
  70. </uni-forms-item>
  71. <uni-forms-item label="车辆用途: ">
  72. <view class="d-flex a-center" style="width:100%;height: 100%;" @click="vehicleUseshow=true">
  73. <u-select v-if="carInfo.carnature=='01'" v-model="vehicleUseshow" mode="single-column"
  74. :list="businessVehicleUseoptions" @confirm="dictionaryConfirm($event,'vehicleUse')"
  75. label-name="dictTag" value-name="dictValue"></u-select>
  76. <u-select v-if="carInfo.carnature=='02'" v-model="vehicleUseshow" mode="single-column"
  77. :list="outOfBusinessVehicleUseoptions" @confirm="dictionaryConfirm($event,'vehicleUse')"
  78. label-name="dictTag" value-name="dictValue"></u-select>
  79. <view class="textColor">{{carInfo1.vehicleUse}}</view>
  80. </view>
  81. </uni-forms-item>
  82. <uni-forms-item label="车辆类型: " required>
  83. <view class="d-flex a-center" style="width:100%;height: 100%;" @click="cartypeshow=true">
  84. <u-select v-model="cartypeshow" mode="single-column" :list="trafficManagementVehicleTypeoptions"
  85. @confirm="dictionaryConfirm($event,'cartype')" label-name="dictTag"
  86. value-name="dictValue"></u-select>
  87. <view class="textColor">{{carInfo1.cartype}}</view>
  88. </view>
  89. </uni-forms-item>
  90. <uni-forms-item label="车辆种类:" required>
  91. <view class="d-flex a-center" style="width:100%;height: 100%;" @click="cimodelclassshow=true">
  92. <u-select v-model="cimodelclassshow" mode="single-column" :list="vehicleTypeoptions"
  93. @confirm="dictionaryConfirm($event,'cimodelclass')" label-name="dictTag"
  94. value-name="dictValue"></u-select>
  95. <view class="textColor">{{carInfo1.cimodelclass}}</view>
  96. </view>
  97. </uni-forms-item>
  98. <uni-forms-item label="能源种类: " required name="energyType">
  99. <view class="d-flex a-center" style="width:100%;height: 100%;" @click="energyTypeshow=true">
  100. <u-select v-model="energyTypeshow" mode="single-column" :list="energyTypeoptions"
  101. @confirm="dictionaryConfirm($event,'energyType')" label-name="dictTag"
  102. value-name="dictValue"></u-select>
  103. <view class="textColor">{{carInfo1.energyType}}</view>
  104. </view>
  105. </uni-forms-item>
  106. <uni-forms-item required label="注册日期" name="registerDate" style="margin-right: 14px;">
  107. <u-input type="select" :select-open="registerDateShow" v-model="carInfo.registerDate"
  108. placeholder="请选择注册日期" @click="registerDateShow = true"
  109. placeholder-style="color:#808080"></u-input>
  110. <u-picker v-model="registerDateShow" mode="time" :params="params" :end-year="endYear"
  111. :end-month="endMonth" @confirm="e=> Dateconfirm(e,'carInfo','registerDate')"></u-picker>
  112. </uni-forms-item>
  113. <uni-forms-item required label="发证日期" name="issueDate" style="margin-right: 14px;">
  114. <u-input type="select" :select-open="issueDateShow" v-model="carInfo.issueDate"
  115. placeholder="请选择发证日期" @click="issueDateShow = true" placeholder-style="color:#808080"></u-input>
  116. <u-picker v-model="issueDateShow" mode="time" :params="params"
  117. @confirm="e=> Dateconfirm(e,'carInfo','issueDate')"></u-picker>
  118. </uni-forms-item>
  119. <uni-forms-item v-if="carInfo.transferFlag" required label="转移登记日期" name="transferDate"
  120. style="margin-right: 14px;">
  121. <u-input type="select" :select-open="transferDateShow" v-model="carInfo.transferDate"
  122. placeholder="请选择过户日期" @click="transferDateShow = true"
  123. placeholder-style="color:#808080"></u-input>
  124. <u-picker v-model="transferDateShow" mode="time" :params="params" :end-year="endYear"
  125. :end-month="endMonth" @confirm="e=> Dateconfirm(e,'carInfo','transferDate')"></u-picker>
  126. </uni-forms-item>
  127. <uni-forms-item required label="是否过户: ">
  128. <view class="d-flex j-end a-c" style="height:100%">
  129. <u-switch v-model="carInfo.transferFlag" active-color="#ea552d " size="30"
  130. style="margin-right: 15px;" @change="transferFlagchange"></u-switch>
  131. </view>
  132. </uni-forms-item>
  133. <uni-forms-item required label="是否脱保: ">
  134. <view class="d-flex j-end a-c" style="height:100%">
  135. <u-switch v-model="carInfo.outOfInsurance" active-color="#ea552d " size="30"
  136. style="margin-right: 15px;"></u-switch>
  137. </view>
  138. </uni-forms-item>
  139. <uni-forms-item required label="是否二手车: ">
  140. <view class="d-flex j-end a-c" style="height:100%">
  141. <u-switch v-model="carInfo.secondhandcarflag" active-color="#ea552d " size="30"
  142. style="margin-right: 15px;"></u-switch>
  143. </view>
  144. </uni-forms-item>
  145. </uni-forms>
  146. </uni-group>
  147. <uni-group title="" top="10">
  148. <uni-forms :rules="ownerRules" :value="ownerInfo" ref="ownerForm" validate-trigger="bind"
  149. err-show-type="toast" label-width="100">
  150. <uni-forms-item>
  151. <view class="title d-flex a-center j-sb font-md">
  152. <text class="font-weight">车主</text>
  153. <view class="icon iconfont icon-shenfenzhengshibie font-lg main-text-color"
  154. @tap="chooseImage('ownerInfo',2)" style="margin-right: 14px;"></view>
  155. </view>
  156. </uni-forms-item>
  157. <uni-forms-item name="name" required label="姓名: ">
  158. <input class="uni-input-input textColor" placeholder="请输入姓名" v-model="ownerInfo.name" maxlength="5"
  159. placeholder-style="font-size:28upx" />
  160. </uni-forms-item>
  161. <uni-forms-item name="identifyType" required label="证件类型:">
  162. <view class="d-flex a-center" style="width:100%;height: 100%;">
  163. <picker disabled class="d-flex a-center" style="width:100%;height: 100%;" mode="selector"
  164. range-key="label" :range="identifyList" v-model="ownerIdentifyIndex"
  165. @change="bindIdentifyTypeChange($event,'owner')">
  166. <view class="textColor">{{identifyList[ownerIdentifyIndex]['label']}}</view>
  167. </picker>
  168. </view>
  169. </uni-forms-item>
  170. <uni-forms-item required name="identifyNumber" label="证件号: ">
  171. <input class="uni-input-input textColor" placeholder="请输入证件号" v-model="ownerInfo.identifyNumber"
  172. maxlength="18" @blur="binddata('identifyNumber', $event.detail.value,'ownerInfo')"
  173. placeholder-style="font-size:28upx" />
  174. </uni-forms-item>
  175. <uni-forms-item required name="age" label="年龄: ">
  176. <input class="uni-input-input textColor" disabled placeholder="请输入年龄" v-model="ownerInfo.age"
  177. maxlength="18" placeholder-style="font-size:28upx" />
  178. </uni-forms-item>
  179. <uni-forms-item required name="mobile" label="手机号: ">
  180. <input class="uni-input-input textColor" placeholder="请输入手机号" v-model="ownerInfo.mobile"
  181. maxlength="11" placeholder-style="font-size:28upx" />
  182. </uni-forms-item>
  183. <uni-forms-item required name="addr" label="地址: " style="margin-right: 14px;">
  184. <textarea class="textColor" v-model="ownerInfo.addr"
  185. style="width:100%;line-height: 50upx;margin-top: 15upx;" placeholder-style="font-size:28upx;"
  186. placeholder="请输入地址" auto-height />
  187. </uni-forms-item>
  188. <uni-forms-item required label="有效期起期" name="identifyValidDate" style="margin-right: 14px;">
  189. <u-input type="select" :select-open="ownerDateShow" v-model="ownerInfo.identifyValidDate"
  190. placeholder="请选择有效期起期" @click="ownerDateShow = true"
  191. placeholder-style="color:#808080"></u-input>
  192. <u-picker v-model="ownerDateShow" mode="time" :params="params"
  193. @confirm="e=> Dateconfirm(e,'ownerInfo','identifyValidDate')"></u-picker>
  194. </uni-forms-item>
  195. <uni-forms-item required label="有效期止期" name="identifyValidEndDate">
  196. <view class="dis j-s a-c">
  197. <u-input type="select" :select-open="ownerEndDateShow" v-model="ownerInfo.identifyValidEndDate"
  198. placeholder="请选择有效期止期" @click="ownerEndDateShow = true" placeholder-style="color:#808080"
  199. style="margin-right: 14px;"></u-input>
  200. <view class=" dis j-c a-c ">
  201. <text>长期</text>
  202. <switch style="transform: scale(0.6)"
  203. @change="checked=> insureLongterm(checked,'ownerInfo')" />
  204. </view>
  205. </view>
  206. <u-picker v-model="ownerEndDateShow" mode="time" :params="params"
  207. @confirm="e=> Dateconfirm(e,'ownerInfo','identifyValidEndDate')"></u-picker>
  208. </uni-forms-item>
  209. </uni-forms>
  210. </uni-group>
  211. <uni-group title="" top="10">
  212. <uni-forms :rules="policyHolderRules" :value="policyHolderInfo" ref="policyHolderForm"
  213. validate-trigger="bind" err-show-type="toast" label-width="100">
  214. <uni-forms-item>
  215. <view class="title d-flex a-center j-sb font-md">
  216. <text class="font-weight">投保人</text>
  217. <view class="d-flex a-center j-sb">
  218. <switch style="transform: scale(0.6);" :checked="holderAndOwner"
  219. @change="e=>syncPersonInfo(e,'holderAndOwner','policyHolder','owner')" />
  220. <text style="margin-right: 10px;">同车主</text>
  221. <view class="icon iconfont icon-shenfenzhengshibie font-lg main-text-color"
  222. @tap="chooseImage('policyHolderInfo',3)" style="margin-right: 14px;"></view>
  223. </view>
  224. </view>
  225. </uni-forms-item>
  226. <template v-if="!holderAndOwner">
  227. <uni-forms-item name="name" required label="姓名: ">
  228. <input class="uni-input-input textColor" placeholder="请输入姓名" v-model="policyHolderInfo.name"
  229. maxlength="5" @blur="binddata('name', $event.detail.value,'policyHolderForm')"
  230. placeholder-style="font-size:28upx" />
  231. </uni-forms-item>
  232. <uni-forms-item name="identifyType" required label="证件类型: ">
  233. <view class="d-flex a-center" style="width:100%;height: 100%;">
  234. <picker disabled class="d-flex a-center" style="width:100%;height: 100%;" mode="selector"
  235. range-key="label" :range="identifyList" v-model="policyHolderIdentifyIndex"
  236. @change="bindIdentifyTypeChange($event,'policyHolder')">
  237. <view class="textColor">{{identifyList[policyHolderIdentifyIndex]['label']}}</view>
  238. </picker>
  239. </view>
  240. </uni-forms-item>
  241. <uni-forms-item required name="identifyNumber" label="证件号: ">
  242. <input class="uni-input-input textColor" placeholder="请输入证件号"
  243. v-model="policyHolderInfo.identifyNumber" maxlength="18"
  244. @blur="binddata('identifyNumber', $event.detail.value,'policyHolderForm')"
  245. placeholder-style="font-size:28upx" />
  246. </uni-forms-item>
  247. <uni-forms-item required name="mobile" label="手机号: ">
  248. <input class="uni-input-input textColor" placeholder="请输入手机号" v-model="policyHolderInfo.mobile"
  249. maxlength="11" @blur="binddata('mobile', $event.detail.value,'policyHolderForm')"
  250. placeholder-style="font-size:28upx" />
  251. </uni-forms-item>
  252. <uni-forms-item required name="addr" label="地址: ">
  253. <textarea class="textColor" v-model="policyHolderInfo.addr"
  254. style="width:100%;line-height: 50upx;margin-top: 15upx;"
  255. placeholder-style="font-size:28upx;" placeholder="请输入地址" auto-height
  256. @blur="binddata('addr', $event.detail.value,'policyHolderForm')" />
  257. </uni-forms-item>
  258. <uni-forms-item required label="有效期起期" name="identifyValidDate" style="margin-right: 14px;">
  259. <u-input type="select" :select-open="policyHolderDateShow"
  260. v-model="policyHolderInfo.identifyValidDate" placeholder="请选择有效期起期"
  261. @click="policyHolderDateShow = true" placeholder-style="color:#808080"></u-input>
  262. <u-picker v-model="policyHolderDateShow" mode="time" :params="params"
  263. @confirm="e=> Dateconfirm(e,'policyHolderInfo','identifyValidDate')"></u-picker>
  264. </uni-forms-item>
  265. <uni-forms-item required label="有效期止期" name="identifyValidEndDate">
  266. <view class="dis j-s a-c">
  267. <u-input type="select" :select-open="policyHolderEndDateShow"
  268. v-model="policyHolderInfo.identifyValidEndDate" placeholder="请选择有效期止期"
  269. @click="policyHolderEndDateShow = true" placeholder-style="color:#808080"
  270. style="margin-right: 14px;"></u-input>
  271. <view class=" dis j-c a-c ">
  272. <text>长期</text>
  273. <switch style="transform: scale(0.6)"
  274. @change="checked=>insureLongterm(checked,'policyHolderInfo')" />
  275. </view>
  276. </view>
  277. <u-picker v-model="policyHolderEndDateShow" mode="time" :params="params"
  278. @confirm="e=> Dateconfirm(e,'policyHolderInfo','identifyValidEndDate')"></u-picker>
  279. </uni-forms-item>
  280. </template>
  281. </uni-forms>
  282. </uni-group>
  283. <uni-group title="" top="10">
  284. <uni-forms :rules="insuredPersonRules" :value="insuredPersonInfo" ref="insuredPersonForm"
  285. validate-trigger="bind" err-show-type="toast" label-width="100">
  286. <uni-forms-item>
  287. <view class="title d-flex a-center j-sb font-md">
  288. <text class="font-weight">被保人</text>
  289. <view class="d-flex a-center j-sb">
  290. <view class="d-flex a-center j-sb">
  291. <switch style="transform: scale(0.6);" :checked="tbrAndOwner"
  292. @change="e=>syncPersonInfo(e,'tbrAndOwner','insuredPerson','policyHolder','insuredAndOwner')" />
  293. <text style="margin-right: 10px;">同投保人</text>
  294. </view>
  295. <view class="d-flex a-center j-sb" v>
  296. <switch style="transform: scale(0.6);" :checked="insuredAndOwner"
  297. @change="e=>syncPersonInfo(e,'insuredAndOwner','insuredPerson','owner','tbrAndOwner')" />
  298. <text style="margin-right: 10px;">同车主</text>
  299. </view>
  300. <view class="icon iconfont icon-shenfenzhengshibie font-lg main-text-color"
  301. @tap="chooseImage('insuredPersonInfo',4)" style="margin-right: 14px;"></view>
  302. </view>
  303. </view>
  304. </uni-forms-item>
  305. <template v-if="!insuredAndOwner && !tbrAndOwner">
  306. <uni-forms-item name="name" required label="姓名: ">
  307. <input class="uni-input-input textColor" placeholder="请输入姓名" v-model="insuredPersonInfo.name"
  308. maxlength="5" @blur="binddata('name', $event.detail.value,'insuredPersonForm')"
  309. placeholder-style="font-size:28upx" />
  310. </uni-forms-item>
  311. <uni-forms-item name="identifyType" required label="证件类型: ">
  312. <view class="d-flex a-center" style="width:100%;height: 100%;">
  313. <picker disabled class="d-flex a-center" style="width:100%;height: 100%;" mode="selector"
  314. range-key="label" :range="identifyList" v-model="insuredPersonIdentifyIndex"
  315. @change="bindIdentifyTypeChange($event,'insuredPerson')">
  316. <view class="textColor">{{identifyList[insuredPersonIdentifyIndex]['label']}}</view>
  317. </picker>
  318. </view>
  319. </uni-forms-item>
  320. <uni-forms-item required name="identifyNumber" label="证件号: ">
  321. <input class="uni-input-input textColor" placeholder="请输入证件号"
  322. v-model="insuredPersonInfo.identifyNumber" maxlength="18"
  323. @blur="binddata('identifyNumber', $event.detail.value,'insuredPersonForm')"
  324. placeholder-style="font-size:28upx" />
  325. </uni-forms-item>
  326. <uni-forms-item required name="mobile" label="手机号: ">
  327. <input class="uni-input-input textColor" placeholder="请输入手机号" v-model="insuredPersonInfo.mobile"
  328. maxlength="11" @blur="binddata('mobile', $event.detail.value,'insuredPersonForm')"
  329. placeholder-style="font-size:28upx" />
  330. </uni-forms-item>
  331. <uni-forms-item required name="addr" label="地址: ">
  332. <textarea class="textColor" v-model="insuredPersonInfo.addr"
  333. style="width:100%;line-height: 50upx;margin-top: 15upx;"
  334. placeholder-style="font-size:28upx;" placeholder="请输入地址" auto-height
  335. @blur="binddata('addr', $event.detail.value,'insuredPersonForm')" />
  336. </uni-forms-item>
  337. <uni-forms-item required label="有效期起期" name="identifyValidDate" style="margin-right: 14px;">
  338. <u-input type="select" :select-open="insuredPersonDateShow"
  339. v-model="insuredPersonInfo.identifyValidDate" placeholder="请选择有效期起期"
  340. @click="insuredPersonDateShow = true" placeholder-style="color:#808080"></u-input>
  341. <u-picker v-model="insuredPersonDateShow" mode="time" :params="params"
  342. @confirm="e=> Dateconfirm(e,'insuredPersonInfo','identifyValidDate')"></u-picker>
  343. </uni-forms-item>
  344. <uni-forms-item required label="有效期止期" name="identifyValidEndDate">
  345. <view class="dis j-s a-c">
  346. <u-input type="select" :select-open="insuredPersonEndDateShow"
  347. v-model="insuredPersonInfo.identifyValidEndDate" placeholder="请选择有效期止期"
  348. @click="insuredPersonEndDateShow = true" placeholder-style="color:#808080"
  349. style="margin-right: 14px;"></u-input>
  350. <view class=" dis j-c a-c ">
  351. <text>长期</text>
  352. <switch style="transform: scale(0.6)"
  353. @change="checked=>insureLongterm(checked,'insuredPersonInfo')" />
  354. </view>
  355. </view>
  356. <u-picker v-model="insuredPersonEndDateShow" mode="time" :params="params"
  357. @confirm="e=> Dateconfirm(e,'insuredPersonInfo','identifyValidEndDate')"></u-picker>
  358. </uni-forms-item>
  359. </template>
  360. </uni-forms>
  361. </uni-group>
  362. <view style="height: 160upx;"></view>
  363. <view class="infoBottom d-flex a-center j-center j-sb">
  364. <button type="default" class="d-flex a-center j-center" @tap="toNext">下一步</button>
  365. </view>
  366. <view class="mask mask-show" v-if="lodingshow">
  367. <!-- 加载动画开始 -->
  368. <view class="preloader">
  369. <view class="loader"></view>
  370. </view>
  371. <!-- 加载动画结束 -->
  372. <view class="title">加载中...</view>
  373. </view>
  374. <u-popup v-model="ImageOcrShow" mode="center" width="90%" border-radius="10" @close="ImagePopClose">
  375. <view class="popContent dis f-c a-c j-s">
  376. <view class="popHeader ">信息校验</view>
  377. <view v-if="checkType=='carInfo'" class="" style="padding: 4px 10px;width: 100%;">
  378. <view class="imgOcr dis j-s a-c">
  379. <view class="imgOcr-border">
  380. <u-icon v-if="carfrontImg" class="del_btn" name="close-circle-fill" style="font-size: 20px;"
  381. color="rgb(247, 247, 247)" @click="del_btn('carfrontImg')"></u-icon>
  382. <image class="obverseimg" :src="carfrontImg?carfrontImg:'/static/carfront.png'"
  383. @click="carfrontChange" mode="">
  384. </view>
  385. <view class="imgOcr-border">
  386. <u-icon v-if="carbackImg" class="del_btn" name="close-circle-fill" style="font-size: 20px;"
  387. color="rgb(247, 247, 247)" @click="del_btn('carbackImg')"></u-icon>
  388. <image class="obverseimg" :src="carbackImg?carbackImg:'/static/carback.png'"
  389. @click="carbackChange" mode="">
  390. </view>
  391. </view>
  392. <view class="line dis j-s a-c" style="margin-top: 10px;">
  393. <text>车主</text>
  394. <u-input v-model="carfront.carOwner" placeholder="请输入车主" />
  395. </view>
  396. <view class="line dis j-s a-c">
  397. <text>车牌号</text>
  398. <u-input v-model="carfront.licenseNo" placeholder="请输入车牌号" />
  399. </view>
  400. <view class="line dis j-s a-c">
  401. <text>发动机号</text>
  402. <u-input v-model="carfront.engineNo" placeholder="请输入发动机号" />
  403. </view>
  404. <view class="line dis j-s a-c">
  405. <text>车架号</text>
  406. <u-input v-model="carfront.vinNo" placeholder="请输入车架号" />
  407. </view>
  408. <view class="line dis j-s a-c">
  409. <text>注册日期</text>
  410. <u-input v-model="carfront.registerDate" placeholder="请输入注册日期" />
  411. </view>
  412. <view class="line dis j-s a-c">
  413. <text>发证日期</text>
  414. <u-input v-model="carfront.issueDate" placeholder="请输入发证日期" />
  415. </view>
  416. </view>
  417. <view v-else class="" style="padding: 4px 10px;width: 100%;">
  418. <view class="imgOcr dis j-s a-c">
  419. <view class="imgOcr-border">
  420. <u-icon v-if="userfrontImg" class="del_btn" name="close-circle-fill"
  421. style="font-size: 20px;" color="rgb(247, 247, 247)"
  422. @click="del_btn('userfrontImg')"></u-icon>
  423. <image class="obverseimg" :src="userfrontImg?userfrontImg:'/static/userfront.png'"
  424. @click="userfrontChange" mode="">
  425. </view>
  426. <view class="imgOcr-border">
  427. <u-icon v-if="userbackImg" class="del_btn" name="close-circle-fill" style="font-size: 20px;"
  428. color="rgb(247, 247, 247)" @click="del_btn('userbackImg')"></u-icon>
  429. <image class="obverseimg" :src="userbackImg?userbackImg:'/static/userback.png'"
  430. @click="userbackChange" mode="">
  431. </view>
  432. </view>
  433. <view class="line dis j-s a-c" style="margin-top: 10px;">
  434. <text>姓名</text>
  435. <u-input v-model="userfront.name" placeholder="请输入姓名" />
  436. </view>
  437. <view class="line dis j-s a-c">
  438. <text>证件号</text>
  439. <u-input v-model="userfront.identifyNumber" placeholder="请输入证件号" />
  440. </view>
  441. <view class="line dis j-s a-c">
  442. <text>地址</text>
  443. <u-input v-model="userfront.addr" placeholder="请输入地址" />
  444. </view>
  445. <view class="line dis j-s a-c">
  446. <text>有效期起期</text>
  447. <u-input v-model="userback.identifyValidDate" placeholder="请输入有效期起期" />
  448. </view>
  449. <view class="line dis j-s a-c">
  450. <text>有效期止期</text>
  451. <u-input v-model="userback.identifyValidEndDate" placeholder="请输入有效期止期" />
  452. </view>
  453. </view>
  454. <view class="popFooter dis">
  455. <view class="popFooter-btn" @click="ImageOcrShow=false">取消</view>
  456. <view class="popFooter-btn" @click="CarOCRconfirm">确认</view>
  457. </view>
  458. </view>
  459. </u-popup>
  460. <previewImage ref="previewImage" :opacity="0.8" :circular="true" :imgs="previewImgs"></previewImage>
  461. <u-toast ref="uToast" />
  462. </view>
  463. </template>
  464. <script>
  465. import checkImageInfo from '@/components/modules/carInsure/checkImageInfo/checkImageInfo.vue'; //引用图片信息检查插件
  466. import previewImage from '@/components/common/previewImage/previewImage.vue'; //引用插件
  467. import {
  468. pathToBase64,
  469. base64ToPath
  470. } from '@/common/image-tools-base64.js';
  471. import {
  472. userInfo
  473. } from 'os';
  474. import store from '@/store';
  475. import $http from '../../config/requestConfig';
  476. import {
  477. getAgeByIdCard,
  478. addressCode
  479. } from '@/plugins/utils';
  480. import {
  481. Promise
  482. } from 'bluebird';
  483. var dateTime = new Date();
  484. let Year = dateTime.getFullYear();
  485. let Month = Number(dateTime.getMonth() + 1);
  486. export default {
  487. components: {
  488. checkImageInfo,
  489. previewImage
  490. },
  491. watch: {
  492. "carInfo.frameNo": {
  493. handler(val) {
  494. if (val) {
  495. this.carInfo.vinNo = val;
  496. }
  497. },
  498. deep: true
  499. },
  500. },
  501. data() {
  502. return {
  503. form: {
  504. name: "",
  505. },
  506. //影像id上传列表
  507. checkType: "",
  508. checkIndex: 1,
  509. carInfoPositiveList: [], //车辆
  510. ownerInfoPositiveList: [], //车主
  511. policyHolderInfoPositiveList: [], //投保人
  512. insuredPersonInfoPositiveList: [], //被保人
  513. carfront: {},
  514. carback: {},
  515. userfront: {},
  516. userback: {},
  517. carfrontImg: '', //车辆正面
  518. carbackImg: '', //车辆背面
  519. userfrontImg: '', //车主正面
  520. userbackImg: '', //车主背面
  521. carFile: [], //车辆识别list
  522. userFile: [], //车主识别list
  523. ImageOcrShow: false, //影像识别框
  524. vehicleUseshow: false,
  525. carnatureshow: false,
  526. cartypeshow: false,
  527. cimodelclassshow: false,
  528. energyTypeshow: false,
  529. lodingshow: false,
  530. endYear: Year,
  531. endMonth: Month,
  532. registerDateShow: false,
  533. issueDateShow: false,
  534. ownerDateShow: false,
  535. ownerEndDateShow: false,
  536. policyHolderDateShow: false,
  537. policyHolderEndDateShow: false,
  538. insuredPersonDateShow: false,
  539. insuredPersonEndDateShow: false,
  540. transferDateShow: false,
  541. params: {
  542. year: true, //年
  543. month: true, //月
  544. day: true, //日
  545. hour: false, //时
  546. minute: false, //分
  547. second: false, //秒
  548. },
  549. carInfo: {
  550. licenseNo: "", //车牌号
  551. brandName: "", //车辆品牌型号
  552. vinNo: "", //车架号
  553. engineNo: "", //发动机号
  554. modelCode: "", //车型编码
  555. seatCount: "0", //核定载客量 核定载人数
  556. purchasePrice: "", //新车购置价最低,行业实际价值,协商价值
  557. carBrand: "", //车型品牌
  558. ciCarName: "", //行业车型名称
  559. ciModelCode: "", //行业车型编码
  560. completeKerbMass: "", //整备质量
  561. exhaustScale: "", //排量
  562. factory: "", //工厂名称
  563. factoryid: "", //工厂编码
  564. frameNo: "", //车架号
  565. licenseTypeCode: "02", //号牌种类
  566. vehicleclass: "", //车辆类型
  567. familyName: "", //车型
  568. modelcname: "", //车型名称
  569. powertypecode: "", //燃料类型编码
  570. vehicleweight: "", //总质量
  571. limitLoad: "", //核定载质量
  572. caryear: "0", //年款
  573. cimodelclass: "A0", //车辆种类
  574. powertype: "汽油", //燃料类型
  575. energyType: "0", //能源种类
  576. enginedesc: "", //排量
  577. powerScale: "", //功率
  578. registerDate: "", //注册日期
  579. issueDate: "", //发证日期
  580. transferFlag: false, //过户标志
  581. transferDate: "", //过户日期
  582. loanStatus: 0, //贷款标志
  583. firstBeneMan: "", //第一受益人
  584. noLicenseFlag: false, //是否新车
  585. cartype: "K33", //客车A0 货车H0          
  586. carnature: "02", //使用性质 家庭自用8A 非营业企业8B 非营业党政机关,事业团体8C 非营业货车8D
  587. property: "1", //所属性质 1个人 2企业 3个人
  588. outOfInsurance: false, //脱保
  589. secondhandcarflag: false, //二手车
  590. vehicleUse: "05" //车辆用途
  591. },
  592. carInfo1: {
  593. energyType: "汽油",
  594. cimodelclass: "客车", //车辆种类
  595. carnature: "非营业",
  596. cartype: "k33轿车",
  597. vehicleUse: "",
  598. },
  599. carRules: {
  600. modelcname: {
  601. rules: [{
  602. required: true,
  603. errorMessage: '请输入品牌型号',
  604. }, ]
  605. },
  606. frameNo: {
  607. rules: [{
  608. required: true,
  609. errorMessage: '请输入车辆识别码',
  610. }, {
  611. pattern: /^([0-9A-Z]){17}$/,
  612. errorMessage: '请输入正确的车辆识别码',
  613. }]
  614. },
  615. engineNo: {
  616. rules: [{
  617. required: true,
  618. errorMessage: '请输入发动机号',
  619. }, ]
  620. },
  621. purchasePrice: {
  622. rules: [{
  623. required: true,
  624. errorMessage: '请输入新车购置价',
  625. }, {
  626. validateField: function(rule, value, data, callback) {
  627. if (value == 0) {
  628. callback('新车购置价不能为零')
  629. }
  630. return true
  631. }
  632. }]
  633. },
  634. registerDate: {
  635. rules: [{
  636. required: true,
  637. errorMessage: '请选择注册日期',
  638. }, ]
  639. },
  640. issueDate: {
  641. rules: [{
  642. required: true,
  643. errorMessage: '请选择发证日期',
  644. }, ]
  645. }
  646. },
  647. ownerRules: {
  648. name: {
  649. rules: [{
  650. required: true,
  651. errorMessage: '请输入车主姓名',
  652. },
  653. {
  654. minLength: 2,
  655. maxLength: 5,
  656. errorMessage: '车主姓名长度在 {minLength} 到 {maxLength} 个字符',
  657. },
  658. {
  659. pattern: /^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\.\s]{1,6})$/,
  660. errorMessage: '请输入正确的车主姓名',
  661. }
  662. ]
  663. },
  664. identifyNumber: {
  665. rules: [{
  666. required: true,
  667. errorMessage: '请输入车主证件号',
  668. },
  669. {
  670. pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
  671. errorMessage: '请输入正确的车主证件号',
  672. }
  673. ]
  674. },
  675. mobile: {
  676. rules: [{
  677. required: true,
  678. errorMessage: '请输入车主手机号',
  679. },
  680. {
  681. pattern: /^1[3-9]\d{9}$/,
  682. errorMessage: '请输入正确的手机号',
  683. }
  684. ]
  685. },
  686. addr: {
  687. rules: [{
  688. required: true,
  689. errorMessage: '请输入车主地址',
  690. },
  691. {
  692. minLength: 8,
  693. maxLength: 40,
  694. errorMessage: '车主地址长度在 {minLength} 到 {maxLength} 个字符',
  695. },
  696. ]
  697. }
  698. },
  699. policyHolderRules: {
  700. name: {
  701. rules: [{
  702. required: true,
  703. errorMessage: '请输入投保人姓名',
  704. },
  705. {
  706. minLength: 2,
  707. maxLength: 5,
  708. errorMessage: '投保人姓名长度在 {minLength} 到 {maxLength} 个字符',
  709. },
  710. {
  711. pattern: /^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\.\s]{1,6})$/,
  712. errorMessage: '请输入正确的投保人姓名',
  713. }
  714. ]
  715. },
  716. identifyNumber: {
  717. rules: [{
  718. required: true,
  719. errorMessage: '请输入投保人证件号',
  720. },
  721. {
  722. pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
  723. errorMessage: '请输入正确的投保人证件号',
  724. }
  725. ]
  726. },
  727. mobile: {
  728. rules: [{
  729. required: true,
  730. errorMessage: '请输入投保人手机号',
  731. },
  732. {
  733. pattern: /^1[3-9]\d{9}$/,
  734. errorMessage: '请输入正确的手机号',
  735. }
  736. ]
  737. },
  738. addr: {
  739. rules: [{
  740. required: true,
  741. errorMessage: '请输入投保人地址',
  742. },
  743. {
  744. minLength: 8,
  745. maxLength: 40,
  746. errorMessage: '投保人地址长度在 {minLength} 到 {maxLength} 个字符',
  747. },
  748. ]
  749. }
  750. },
  751. insuredPersonRules: {
  752. name: {
  753. rules: [{
  754. required: true,
  755. errorMessage: '请输入被保人姓名',
  756. },
  757. {
  758. minLength: 2,
  759. maxLength: 5,
  760. errorMessage: '被保人姓名长度在 {minLength} 到 {maxLength} 个字符',
  761. },
  762. {
  763. pattern: /^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\.\s]{1,6})$/,
  764. errorMessage: '请输入正确的被保人姓名',
  765. }
  766. ]
  767. },
  768. identifyNumber: {
  769. rules: [{
  770. required: true,
  771. errorMessage: '请输入被保人证件号',
  772. },
  773. {
  774. pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
  775. errorMessage: '请输入正确的被保人证件号',
  776. }
  777. ]
  778. },
  779. mobile: {
  780. rules: [{
  781. required: true,
  782. errorMessage: '请输入被保人手机号',
  783. },
  784. {
  785. pattern: /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/,
  786. errorMessage: '请输入正确的手机号',
  787. }
  788. ]
  789. },
  790. addr: {
  791. rules: [{
  792. required: true,
  793. errorMessage: '请输入被保人地址',
  794. },
  795. {
  796. minLength: 8,
  797. maxLength: 40,
  798. errorMessage: '被保人地址长度在 {minLength} 到 {maxLength} 个字符',
  799. },
  800. ]
  801. }
  802. },
  803. checkInfo: {},
  804. checkImage: [],
  805. licenseNo: '', //车牌号
  806. //使用性质
  807. carnatureIndex: 0,
  808. cartypeIndex: 0,
  809. cimodelclassIndex: 0,
  810. fuelTypeCodeIndex: 0,
  811. propertyIndex: 0,
  812. identifyList: [{
  813. label: '身份证',
  814. id: "01"
  815. },
  816. {
  817. label: '护照',
  818. id: "02"
  819. },
  820. {
  821. label: '港澳台居民居住证',
  822. id: "03"
  823. },
  824. {
  825. label: '组织机构代码证',
  826. id: "04"
  827. },
  828. {
  829. label: '统一社会信用代码证',
  830. id: "05"
  831. },
  832. {
  833. label: '营业执照',
  834. id: "06"
  835. }
  836. ],
  837. ownerIdentifyIndex: 0,
  838. policyHolderIdentifyIndex: 0,
  839. insuredPersonIdentifyIndex: 0,
  840. holderAndOwner: true, //投保人同车主
  841. insuredAndOwner: false, //被保人同车主
  842. tbrAndOwner: true, //被保人同投保人
  843. ownerInfo: {
  844. name: "",
  845. identifyType: "01",
  846. identifyNumber: "",
  847. addr: "",
  848. email: "",
  849. mobile: "",
  850. identifyValidDate: "", //有效期起期
  851. identifyValidEndDate: "", //有效期止期
  852. age: "", //年龄
  853. },
  854. policyHolderInfo: {
  855. name: "",
  856. identifyType: "01",
  857. identifyNumber: "",
  858. addr: "",
  859. email: "",
  860. mobile: "",
  861. identifyValidDate: "", //有效期起期
  862. identifyValidEndDate: "", //有效期止期
  863. age: "", //年龄
  864. },
  865. insuredPersonInfo: {
  866. name: "",
  867. identifyType: "01",
  868. identifyNumber: "",
  869. addr: "",
  870. email: "",
  871. mobile: "",
  872. identifyValidDate: "", //有效期起期
  873. identifyValidEndDate: "", //有效期止期
  874. age: "", //年龄
  875. },
  876. riskList: [], //交强险和商业险的选择
  877. kindList: [], //商业险险种的选择
  878. token: "",
  879. /* 数据字典 */
  880. natureOfVehicleUseoptions: [],
  881. vehicleTypeoptions: [],
  882. trafficManagementVehicleTypeoptions: [],
  883. energyTypeoptions: [],
  884. businessVehicleUseoptions: [],
  885. outOfBusinessVehicleUseoptions: [],
  886. /* 数据字典 */
  887. model: {
  888. ownerInforegion: '',
  889. policyHolderInforegion: '',
  890. insuredPersonInforegion: '',
  891. },
  892. previewImgs: [],
  893. }
  894. },
  895. onShow() {
  896. this.getDicType("businessVehicleUse"); //车辆用途(营业)
  897. this.getDicType("outOfBusinessVehicleUse"); //车辆用途(非营业)
  898. this.getDicType("natureOfVehicleUse"); //车辆性质
  899. this.getDicType("vehicleType"); //车辆种类
  900. this.getDicType("trafficManagementVehicleType"); //车辆类型
  901. this.getDicType("energyType"); //能源种类
  902. },
  903. onLoad(options) {
  904. var a = 1;
  905. function test() {
  906. console.log(a)
  907. var a = 2;
  908. console.log(a)
  909. }
  910. test();
  911. //--数据字典 begin --
  912. if (!!options.licenseNo) {
  913. // this.licenseNo = decodeURIComponent(options.licenseNo);
  914. } else {
  915. const eventChannel = this.getOpenerEventChannel()
  916. // 监听acceptData事件,获取上一页面通过eventChannel传送到当前页面的数据
  917. eventChannel.on('acceptData', (data) => {
  918. console.log(data)
  919. if (!!data) {
  920. //读取上一个页面传过来数据(车辆信息,人员信息,险种信息)
  921. this.carInfo = data.carInfo; //车辆信息
  922. this.ownerInfo = JSON.parse(JSON.stringify(data.ownerInfo));
  923. this.policyHolderInfo = JSON.parse(JSON.stringify(data.policyHolderInfo));
  924. this.insuredPersonInfo = JSON.parse(JSON.stringify(data.insuredPersonInfo));
  925. this.carInfoPositiveList = data.carInfoPositiveList; //车辆
  926. this.ownerInfoPositiveList = data.ownerInfoPositiveList; //车主
  927. this.policyHolderInfoPositiveList = data.policyHolderInfoPositiveList; //投保
  928. this.insuredPersonInfoPositiveList = data.insuredPersonInfoPositiveList; //被保人
  929. this.riskList = data.riskList; //险种大类
  930. this.kindList = data.kindList; //商业险险别
  931. this.licenseNo = this.carInfo.licenseNo;
  932. this.holderAndOwner = false; //投保人同车主
  933. this.insuredAndOwner = false; //被保人同车主
  934. this.tbrAndOwner = false; //被保人同投保人
  935. }
  936. })
  937. };
  938. this.token = store.state.token
  939. },
  940. // 监听导航栏的按钮
  941. onNavigationBarButtonTap(e) {
  942. if (e.index == 0) {
  943. this.navigate({
  944. url: '/pages/index/index'
  945. }, "switchTab", true);
  946. }
  947. },
  948. computed: {
  949. startDate() {
  950. return this.getDate('start');
  951. },
  952. endDate() {
  953. return this.getDate('end');
  954. },
  955. },
  956. methods: {
  957. transferFlagchange(status) {
  958. if (status) {
  959. this.carInfo.transferDate = this.carInfo.issueDate;
  960. } else {
  961. this.carInfo.transferDate = ""
  962. }
  963. },
  964. async getDicType(type) {
  965. let res = await this.$http.get('/sysDict/dictDetails/' + type);
  966. if (res.code == 200) {
  967. this[type + 'options'] = res.data.ddList;
  968. }
  969. },
  970. dictionaryConfirm(e, name) {
  971. console.log(e, name)
  972. this.carInfo[name] = e[0].value;
  973. this.carInfo1[name] = e[0].label;
  974. },
  975. /**
  976. * @param {String} e 时间选择器的值
  977. * @param {String} obj 储存表单对象
  978. * @param {String} param 储存表单参数
  979. */
  980. Dateconfirm(e, obj, param) {
  981. this[obj][param] = e.year + '-' + e.month + '-' + e.day;
  982. },
  983. //选择驾照图片或拍摄驾照图片
  984. chooseImage(type, index) {
  985. this.checkType = type;
  986. this.checkIndex = index;
  987. this.ImageOcrShow = true;
  988. },
  989. //行驶证正面
  990. async carfrontChange() {
  991. if (this.carfrontImg) {
  992. this.previewImgs = [{
  993. url: this.carfrontImg
  994. }];
  995. this.$refs.previewImage.open(0); // 传入当前选中的图片地址或序号
  996. } else {
  997. let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
  998. count: 1,
  999. sizeType: ['compressed']
  1000. });
  1001. let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
  1002. if (!size) {
  1003. this.$refs.uToast.show({
  1004. title: '上传图片大小不能超过 5MB!',
  1005. type: 'error',
  1006. })
  1007. return false
  1008. }
  1009. if (chooseImageRes) {
  1010. this.lodingshow = true;
  1011. this.carfrontImg = chooseImageRes.tempFilePaths[0];
  1012. uni.uploadFile({
  1013. url: this.$base.baseUrl + '/ins/taskImage/uploadFile',
  1014. filePath: this.carfrontImg,
  1015. name: "multipartFile",
  1016. formData: {
  1017. 'type': 'image',
  1018. },
  1019. header: {
  1020. Authorization: this.token,
  1021. },
  1022. success: (imgRes) => {
  1023. let data = JSON.parse(imgRes.data);
  1024. if (data.code == '200') {
  1025. if (this.carInfoPositiveList.some(v => v.imageType == 'C01')) {
  1026. this.carInfoPositiveList.map(val => {
  1027. if (val.imageType == 'C01') {
  1028. val.imageId = data.data.id;
  1029. }
  1030. })
  1031. } else {
  1032. this.carInfoPositiveList.push({
  1033. imageId: data.data.id,
  1034. imageType: "C01",
  1035. })
  1036. }
  1037. uni.uploadFile({
  1038. url: this.$base.baseUrl + '/order/identify/drivingPermit',
  1039. filePath: this.carfrontImg,
  1040. name: "image1",
  1041. header: {
  1042. Authorization: this.token,
  1043. },
  1044. success: (uploadFileRes) => {
  1045. let data = JSON.parse(uploadFileRes.data).data;
  1046. let rdate = '';
  1047. if (!!data.carInfo.registerDate) {
  1048. rdate = data.carInfo.registerDate.substr(0,
  1049. 4) +
  1050. '-' + data.carInfo
  1051. .registerDate.substr(4, 2) + '-' + data
  1052. .carInfo
  1053. .registerDate
  1054. .substr(6,
  1055. 2)
  1056. }
  1057. let isdate = '';
  1058. if (!!data.carInfo.issueDate) {
  1059. isdate = data.carInfo.issueDate.substr(0, 4) +
  1060. '-' + data.carInfo
  1061. .issueDate.substr(4, 2) + '-' + data
  1062. .carInfo
  1063. .issueDate.substr(6, 2)
  1064. }
  1065. this.ownerInfo.name = data.carInfo.carOwner; //车主
  1066. this.carfront = {
  1067. carOwner: data.carInfo.carOwner, //车主
  1068. licenseNo: data.carInfo.plateNo, //车牌号
  1069. modelcname: data.carInfo.backOcrID, //品牌型号
  1070. frameNo: data.carInfo.vin, //车架号
  1071. engineNo: data.carInfo.engine, //发动机号
  1072. vinNo: data.carInfo.vin, //车架号
  1073. issueDate: isdate, //发证日期
  1074. registerDate: rdate, //注册日期
  1075. cimodelclass: data.carInfo.motorTypeCode,
  1076. carnature: data.carInfo.motorUsageTypeCode,
  1077. }
  1078. this.lodingshow = false;
  1079. }
  1080. });
  1081. }
  1082. }
  1083. });
  1084. } else {
  1085. this.lodingshow = false;
  1086. }
  1087. }
  1088. },
  1089. //行驶证反面
  1090. async carbackChange() {
  1091. if (this.carbackImg) {
  1092. this.previewImgs = [{
  1093. url: this.carbackImg
  1094. }];
  1095. this.$refs.previewImage.open(0); // 传入当前选中的图片地址或序号
  1096. } else {
  1097. let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
  1098. count: 1,
  1099. sizeType: ['compressed']
  1100. });
  1101. let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
  1102. if (!size) {
  1103. this.$refs.uToast.show({
  1104. title: '上传图片大小不能超过 5MB!',
  1105. type: 'error',
  1106. })
  1107. return false
  1108. }
  1109. if (chooseImageRes) {
  1110. this.lodingshow = true;
  1111. this.carbackImg = chooseImageRes.tempFilePaths[0];
  1112. uni.uploadFile({
  1113. url: this.$base.baseUrl + '/ins/taskImage/uploadFile',
  1114. filePath: this.carbackImg,
  1115. name: "multipartFile",
  1116. formData: {
  1117. 'type': 'image',
  1118. },
  1119. header: {
  1120. Authorization: this.token,
  1121. },
  1122. success: (imgRes) => {
  1123. let data = JSON.parse(imgRes.data);
  1124. if (data.code == '200') {
  1125. if (this.carInfoPositiveList.some(v => v.imageType == 'D01')) {
  1126. this.carInfoPositiveList.map(val => {
  1127. if (val.imageType == 'D01') {
  1128. val.imageId = data.data.id;
  1129. }
  1130. })
  1131. } else {
  1132. this.carInfoPositiveList.push({
  1133. imageId: data.data.id,
  1134. imageType: "D01",
  1135. })
  1136. }
  1137. uni.uploadFile({
  1138. url: this.$base.baseUrl + '/order/identify/drivingPermit',
  1139. filePath: this.carbackImg,
  1140. name: "image2",
  1141. header: {
  1142. Authorization: this.token,
  1143. },
  1144. success: (uploadFileRes) => {
  1145. let data1 = JSON.parse(uploadFileRes.data).data;
  1146. this.carback = {
  1147. vehicleweight: data1.carInfo
  1148. .grossMass, //总质量
  1149. completeKerbMass: data1.carInfo
  1150. .unladenMass, //整备质量
  1151. seatCount: data1.carInfo
  1152. .approvedPassengersCapacity, //核定载客数
  1153. }
  1154. this.lodingshow = false;
  1155. }
  1156. });
  1157. }
  1158. }
  1159. });
  1160. } else {
  1161. this.lodingshow = false;
  1162. }
  1163. }
  1164. },
  1165. //身份证正面
  1166. async userfrontChange() {
  1167. if (this.userfrontImg) {
  1168. this.previewImgs = [{
  1169. url: this.userfrontImg
  1170. }];
  1171. this.$refs.previewImage.open(0); // 传入当前选中的图片地址或序号
  1172. } else {
  1173. let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
  1174. count: 1,
  1175. sizeType: ['compressed']
  1176. });
  1177. let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
  1178. if (!size) {
  1179. this.$refs.uToast.show({
  1180. title: '上传图片大小不能超过 5MB!',
  1181. type: 'error',
  1182. })
  1183. return false
  1184. }
  1185. if (chooseImageRes) {
  1186. this.lodingshow = true;
  1187. this.userfrontImg = chooseImageRes.tempFilePaths[0];
  1188. uni.uploadFile({
  1189. url: this.$base.baseUrl + '/ins/taskImage/uploadFile',
  1190. filePath: this.userfrontImg,
  1191. name: "multipartFile",
  1192. formData: {
  1193. 'type': 'image',
  1194. },
  1195. header: {
  1196. Authorization: this.token,
  1197. },
  1198. success: (imgRes) => {
  1199. let data = JSON.parse(imgRes.data);
  1200. if (data.code == '200') {
  1201. let type = 'C0' + this.checkIndex;
  1202. if (this[this.checkType + 'PositiveList'].some(v => v.imageType ==
  1203. type)) {
  1204. this[this.checkType + 'PositiveList'].map(val => {
  1205. if (val.imageType == type) {
  1206. val.imageId = data.data.id;
  1207. }
  1208. })
  1209. } else {
  1210. this[this.checkType + 'PositiveList'].push({
  1211. imageId: data.data.id,
  1212. imageType: type,
  1213. })
  1214. }
  1215. uni.uploadFile({
  1216. url: this.$base.baseUrl + '/order/identify/idCard',
  1217. filePath: this.userfrontImg,
  1218. name: "image1",
  1219. header: {
  1220. Authorization: this.token,
  1221. },
  1222. success: (uploadFileRes) => {
  1223. let data = JSON.parse(uploadFileRes.data).data;
  1224. this.userfront = {
  1225. age: getAgeByIdCard(data.customerInfo
  1226. .identifyNumber),
  1227. name: data.customerInfo.name,
  1228. identifyNumber: data.customerInfo
  1229. .identifyNumber,
  1230. addr: data.customerInfo.addr,
  1231. }
  1232. this.lodingshow = false;
  1233. }
  1234. });
  1235. }
  1236. }
  1237. });
  1238. } else {
  1239. this.lodingshow = false;
  1240. }
  1241. }
  1242. },
  1243. //身份证反面
  1244. async userbackChange() {
  1245. if (this.userbackImg) {
  1246. this.previewImgs = [{
  1247. url: this.userbackImg
  1248. }];
  1249. this.$refs.previewImage.open(0); // 传入当前选中的图片地址或序号
  1250. } else {
  1251. let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
  1252. count: 1,
  1253. sizeType: ['compressed']
  1254. });
  1255. let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
  1256. if (!size) {
  1257. this.$refs.uToast.show({
  1258. title: '上传图片大小不能超过 5MB!',
  1259. type: 'error',
  1260. })
  1261. return false
  1262. }
  1263. if (chooseImageRes) {
  1264. this.lodingshow = true;
  1265. this.userbackImg = chooseImageRes.tempFilePaths[0];
  1266. uni.uploadFile({
  1267. url: this.$base.baseUrl + '/ins/taskImage/uploadFile',
  1268. filePath: this.userbackImg,
  1269. name: "multipartFile",
  1270. formData: {
  1271. 'type': 'image',
  1272. },
  1273. header: {
  1274. Authorization: this.token,
  1275. },
  1276. success: (imgRes) => {
  1277. let data = JSON.parse(imgRes.data);
  1278. if (data.code == '200') {
  1279. let type = 'D0' + this.checkIndex;
  1280. if (this[this.checkType + 'PositiveList'].some(v => v.imageType ==
  1281. type)) {
  1282. this[this.checkType + 'PositiveList'].map(val => {
  1283. if (val.imageType == type) {
  1284. val.imageId = data.data.id;
  1285. }
  1286. })
  1287. } else {
  1288. this[this.checkType + 'PositiveList'].push({
  1289. imageId: data.data.id,
  1290. imageType: type,
  1291. })
  1292. }
  1293. uni.uploadFile({
  1294. url: this.$base.baseUrl +
  1295. '/order/identify/idCard',
  1296. filePath: this.userbackImg,
  1297. name: "image2",
  1298. header: {
  1299. Authorization: this.token,
  1300. },
  1301. success: (uploadFileRes) => {
  1302. let data1 = JSON.parse(uploadFileRes.data).data;
  1303. let identifyValidDate = '';
  1304. if (!!data1.customerInfo
  1305. .identifyValidDate) {
  1306. identifyValidDate = data1
  1307. .customerInfo
  1308. .identifyValidDate
  1309. .substr(0, 4) +
  1310. '-' + data1
  1311. .customerInfo
  1312. .identifyValidDate
  1313. .substr(4, 2) + '-' +
  1314. data1
  1315. .customerInfo
  1316. .identifyValidDate
  1317. .substr(6,
  1318. 2)
  1319. }
  1320. let identifyValidEndDate = '';
  1321. if (!!data1.customerInfo
  1322. .identifyValidEndDate) {
  1323. identifyValidEndDate =
  1324. data1.customerInfo
  1325. .identifyValidEndDate
  1326. .substr(0,
  1327. 4) + '-' + data1
  1328. .customerInfo
  1329. .identifyValidEndDate
  1330. .substr(4, 2) + '-' +
  1331. data1
  1332. .customerInfo
  1333. .identifyValidEndDate
  1334. .substr(6, 2)
  1335. }
  1336. this.userback = {
  1337. identifyValidDate: identifyValidDate, //起期
  1338. identifyValidEndDate: identifyValidEndDate, //止期
  1339. }
  1340. this.lodingshow = false;
  1341. }
  1342. });
  1343. }
  1344. }
  1345. });
  1346. } else {
  1347. this.lodingshow = false;
  1348. }
  1349. }
  1350. },
  1351. CarOCRconfirm() {
  1352. switch (this.checkType) {
  1353. case 'carInfo':
  1354. Object.assign(this.carInfo, this.carfront, this
  1355. .carback);
  1356. this.ImageOcrShow = false;
  1357. break;
  1358. case 'ownerInfo':
  1359. case "policyHolderInfo":
  1360. case "insuredPersonInfo":
  1361. Object.assign(this[this.checkType], this.userfront, this
  1362. .userback);
  1363. this.ImageOcrShow = false;
  1364. break;
  1365. default:
  1366. break;
  1367. }
  1368. },
  1369. //图片删除
  1370. del_btn(val) {
  1371. this[val] = "";
  1372. },
  1373. //弹框关闭事件
  1374. ImagePopClose() {
  1375. this.carfrontImg = "";
  1376. this.carbackImg = "";
  1377. this.userfrontImg = "";
  1378. this.userbackImg = "";
  1379. this.carfront = {};
  1380. this.carback = {};
  1381. this.userfront = {};
  1382. this.userback = {};
  1383. },
  1384. /**
  1385. * 复写 binddata 方法,如果只是为了校验,无复杂自定义操作,可忽略此方法
  1386. * @param {String} name 字段名称
  1387. * @param {String} value 表单域的值
  1388. */
  1389. binddata(name, value, type) {
  1390. if (name == 'identifyNumber') {
  1391. this[type].age = getAgeByIdCard(value)
  1392. }
  1393. },
  1394. //转变大写(车型/车架号/发动机号)
  1395. upperCaseType(type) {
  1396. this.carInfo[type] = this.carInfo[type].toUpperCase();
  1397. if (type == 'vinNo') {
  1398. this.carInfo.frameNo = this.carInfo.vinNo.trim();
  1399. }
  1400. },
  1401. //下拉改变触发该方法
  1402. bindPickerChange(e, type, list) {
  1403. this[type + 'Index'] = e.target.value;
  1404. this.carInfo[type] = this[list][e.target.value].dictValue;
  1405. },
  1406. // 身份证类型选择
  1407. bindIdentifyTypeChange(e, type) {
  1408. this[type + 'IdentifyIndex'] = e.target.value;
  1409. this[type + 'Info'].identifyType = this.identifyList[e.target.value].id;
  1410. this[type + 'Info'].identifyNumber = '';
  1411. },
  1412. bindDateChange(e, type) { //日期赋值
  1413. if ((type == 'issueDate') && (!this.carInfo.registerDate)) {
  1414. return uni.showToast({
  1415. title: '请先输入注册日期',
  1416. icon: "none"
  1417. });
  1418. }
  1419. this.carInfo[type] = e.detail.value;
  1420. if (new Date(this.carInfo.registerDate) > new Date(this.carInfo.issueDate)) {
  1421. this.carInfo.issueDate = ""
  1422. return uni.showToast({
  1423. title: '注册日期大于发证日期',
  1424. icon: "none"
  1425. });
  1426. }
  1427. },
  1428. //长期
  1429. insureLongterm(checked, e) {
  1430. checked.detail.value == true ? this[e].identifyValidEndDate = "9999-12-31" : this[e]
  1431. .identifyValidEndDate =
  1432. "";
  1433. },
  1434. //日期(可以选择20年以内的时间)
  1435. getDate(type) {
  1436. const date = new Date();
  1437. let year = date.getFullYear();
  1438. let month = date.getMonth() + 1;
  1439. let day = date.getDate();
  1440. if (type === 'start') {
  1441. year = year - 20;
  1442. } else if (type === 'end') {}
  1443. month = month > 9 ? month : '0' + month;;
  1444. day = day > 9 ? day : '0' + day;
  1445. return `${year}-${month}-${day}`;
  1446. },
  1447. //同车主信息
  1448. syncPersonInfo(e, type, touch1, touch2, touch3) {
  1449. this[type] = e.detail.value;
  1450. this[touch1 + 'IdentifyIndex'] = this[touch2 + 'IdentifyIndex'];
  1451. if (this[type]) {
  1452. this[touch1 + 'Info'] = JSON.parse(JSON.stringify(this[touch2 + 'Info']));
  1453. this[touch3] = false;
  1454. } else {
  1455. for (let key in this[touch1 + "Info"]) {
  1456. this[touch1 + "Info"][key] = '';
  1457. }
  1458. }
  1459. },
  1460. //跳转选择车辆类型页面
  1461. toChooseVehicleType(cctype) {
  1462. if (cctype == '' || cctype == null) {
  1463. uni.showToast({
  1464. icon: 'none',
  1465. title: '请输入车型名称',
  1466. duration: 1500
  1467. });
  1468. } else {
  1469. let cctypeName = cctype.replace(/[^u4e00-u9fa5|,]+/ig, '')
  1470. this.navigate({
  1471. url: '/pages/carInsure1/carType1?modelName=' + encodeURIComponent(cctypeName)
  1472. }, "navigateTo", true);
  1473. }
  1474. },
  1475. // 通过车架号获取车型
  1476. async toChooseVin(cctype) {
  1477. if (cctype == '' || cctype == null) {
  1478. return uni.showToast({
  1479. icon: 'none',
  1480. title: '请输入车架号',
  1481. duration: 1500
  1482. });
  1483. } else {
  1484. if (!this.isFrameno(cctype.trim())) {
  1485. return uni.showToast({
  1486. title: '请输入正确的车辆识别码',
  1487. icon: "none"
  1488. });
  1489. }
  1490. this.navigate({
  1491. url: '/pages/carInsure1/carType1?frameNo=' + encodeURIComponent(cctype)
  1492. }, "navigateTo", true);
  1493. }
  1494. },
  1495. //验证车架号
  1496. isFrameno(str) {
  1497. let mPattern = /^([0-9A-Z]){17}$/;
  1498. return mPattern.test(str);
  1499. },
  1500. toNext() {
  1501. if (this.holderAndOwner) { //投保人同车主
  1502. this.policyHolderInfo = this.ownerInfo;
  1503. if (this.ownerInfoPositiveList.length > 0) {
  1504. this.policyHolderInfoPositiveList = JSON.parse(JSON.stringify(this
  1505. .ownerInfoPositiveList));
  1506. if (this.policyHolderInfoPositiveList.length == 1) {
  1507. this.policyHolderInfoPositiveList[0].imageType = "C03";
  1508. } else {
  1509. this.policyHolderInfoPositiveList[0].imageType = "C03";
  1510. this.policyHolderInfoPositiveList[1].imageType = "D03";
  1511. }
  1512. }
  1513. }
  1514. if (this.insuredAndOwner) { //被保人同车主
  1515. this.insuredPersonInfo = this.ownerInfo;
  1516. if (this.ownerInfoPositiveList.length > 0) {
  1517. this.insuredPersonInfoPositiveList = JSON.parse(JSON.stringify(this
  1518. .ownerInfoPositiveList));
  1519. if (this.insuredPersonInfoPositiveList.length == 1) {
  1520. this.insuredPersonInfoPositiveList[0].imageType = "C04";
  1521. } else {
  1522. this.insuredPersonInfoPositiveList[0].imageType = "C04";
  1523. this.insuredPersonInfoPositiveList[1].imageType = "D04";
  1524. }
  1525. }
  1526. }
  1527. if (this.tbrAndOwner) { //被保人同投保人
  1528. this.insuredPersonInfo = this.policyHolderInfo;
  1529. if (this.policyHolderInfoPositiveList.length > 0) {
  1530. this.insuredPersonInfoPositiveList = JSON.parse(JSON.stringify(this
  1531. .policyHolderInfoPositiveList));
  1532. if (this.insuredPersonInfoPositiveList.length == 1) {
  1533. this.insuredPersonInfoPositiveList[0].imageType = "C04";
  1534. } else {
  1535. this.insuredPersonInfoPositiveList[0].imageType = "C04";
  1536. this.insuredPersonInfoPositiveList[1].imageType = "D04";
  1537. }
  1538. }
  1539. }
  1540. this.$refs.carForm.submit().then(res => {
  1541. this.$refs.ownerForm.submit().then(res1 => {
  1542. this.$refs.policyHolderForm.submit().then(res2 => {
  1543. this.$refs.insuredPersonForm.submit().then(res3 => {
  1544. this.navigate({
  1545. url: '/pages/carInsure1/insureItems1',
  1546. success: (res) => {
  1547. res.eventChannel.emit(
  1548. "acceptData", {
  1549. carInfo: this
  1550. .carInfo,
  1551. ownerInfo: this
  1552. .ownerInfo,
  1553. policyHolderInfo: this
  1554. .policyHolderInfo,
  1555. insuredPersonInfo: this
  1556. .insuredPersonInfo,
  1557. riskList: this
  1558. .riskList,
  1559. kindList: this
  1560. .kindList,
  1561. carInfoPositiveList: this
  1562. .carInfoPositiveList, //车辆
  1563. ownerInfoPositiveList: this
  1564. .ownerInfoPositiveList, //车主
  1565. policyHolderInfoPositiveList: this
  1566. .policyHolderInfoPositiveList, //投保人
  1567. insuredPersonInfoPositiveList: this
  1568. .insuredPersonInfoPositiveList, //被保人
  1569. })
  1570. }
  1571. }, "navigateTo", true);
  1572. })
  1573. })
  1574. })
  1575. })
  1576. }
  1577. }
  1578. }
  1579. </script>
  1580. <style lang="scss" scoped>
  1581. @import '@/style/mixin.scss';
  1582. /deep/ .uni-group__content {
  1583. padding-top: 0;
  1584. }
  1585. /deep/ .uni-forms--top {
  1586. padding: 0;
  1587. }
  1588. /deep/ .uni-forms-item {
  1589. margin-bottom: 0;
  1590. }
  1591. /deep/ .uni-input-input {
  1592. font-size: 26upx;
  1593. }
  1594. /deep/ .uni-switch-input-checked {
  1595. background-color: $themeColor !important;
  1596. border-color: $themeColor !important;
  1597. }
  1598. /deep/ .uni-group__content {
  1599. padding-bottom: 0;
  1600. }
  1601. /deep/ .uni-input-input {
  1602. font-size: 28upx;
  1603. }
  1604. .body {
  1605. width: 100vw;
  1606. /* min-height: 100vh; */
  1607. background: #f5f5f5;
  1608. /* background: #FFFFFF; */
  1609. font-family: "Arial,Helvetica,sans-serif,PingFangSC";
  1610. }
  1611. .title {
  1612. height: 90upx;
  1613. border-bottom: 1px solid #EEEEEE;
  1614. }
  1615. .checkButton {
  1616. margin: 0 20upx;
  1617. width: 100upx;
  1618. height: 50upx;
  1619. flex-shrink: 1;
  1620. background: rgba($themeColor, 0.6);
  1621. color: #FFFFFF;
  1622. border-radius: 5upx;
  1623. }
  1624. .textColor {
  1625. color: #6091f5;
  1626. }
  1627. textarea {
  1628. font-size: 28upx;
  1629. width: 330upx;
  1630. }
  1631. /* 底部的样式Start */
  1632. .infoBottom {
  1633. height: 140upx;
  1634. position: fixed;
  1635. bottom: 0;
  1636. left: 0;
  1637. right: 0;
  1638. background: #FFFFFF;
  1639. border-top: 1upx solid #EEEEEE;
  1640. z-index: 99;
  1641. }
  1642. .infoBottom>button {
  1643. // font-size: 30upx;
  1644. background: $themeColor;
  1645. color: #FFFFFF;
  1646. flex: 1;
  1647. margin: 0upx 30upx;
  1648. }
  1649. /* 底部的样式End */
  1650. .popContent {
  1651. height: 100%;
  1652. background-color: #f9f9f9;
  1653. .popHeader {
  1654. width: 100%;
  1655. text-align: center;
  1656. padding: 10px;
  1657. font-weight: bold;
  1658. background-color: #FFFFFF;
  1659. }
  1660. .imgOcr {
  1661. width: 100%;
  1662. background-color: #f9f9f9;
  1663. .imgOcr-border {
  1664. position: relative;
  1665. width: 49%;
  1666. background-color: #fff;
  1667. padding: 2px;
  1668. .del_btn {
  1669. cursor: pointer;
  1670. position: absolute;
  1671. top: 5rpx;
  1672. right: 0;
  1673. width: 50rpx;
  1674. height: 50rpx;
  1675. border-radius: 50%;
  1676. z-index: 20;
  1677. }
  1678. .obverseimg {
  1679. height: 120px;
  1680. border-radius: 4px;
  1681. }
  1682. }
  1683. }
  1684. .line {
  1685. width: 100%;
  1686. margin: 2px 0;
  1687. background-color: #FFFFFF;
  1688. padding: 0 10px;
  1689. >text {
  1690. font-weight: bold;
  1691. width: 100px;
  1692. }
  1693. }
  1694. .popFooter {
  1695. width: 100%;
  1696. height: 50px;
  1697. font-weight: bold;
  1698. background-color: #FFFFFF;
  1699. color: #3e5cd7;
  1700. .popFooter-btn:nth-child(1) {
  1701. border-right: 1px solid #f9f9f9;
  1702. }
  1703. .popFooter-btn {
  1704. width: 50%;
  1705. text-align: center;
  1706. line-height: 50px;
  1707. }
  1708. }
  1709. }
  1710. .mask {
  1711. /* pointer-events: none; */
  1712. position: fixed;
  1713. z-index: 99999;
  1714. top: 0;
  1715. left: 0;
  1716. right: 0;
  1717. bottom: 0;
  1718. height: 100vh;
  1719. width: 100vw;
  1720. display: flex;
  1721. flex-direction: column;
  1722. justify-content: center;
  1723. align-items: center;
  1724. flex-wrap: wrap;
  1725. }
  1726. .mask.mask-show {
  1727. background: rgba(255, 255, 255, 0.3);
  1728. }
  1729. .title {
  1730. color: #333;
  1731. font-size: 28rpx;
  1732. margin-top: 20rpx;
  1733. }
  1734. .loader {
  1735. display: block;
  1736. width: 120rpx;
  1737. height: 120rpx;
  1738. border-radius: 50%;
  1739. border: 3rpx solid transparent;
  1740. border-top-color: #9370db;
  1741. -webkit-animation: spin 2s linear infinite;
  1742. animation: spin 2s linear infinite;
  1743. }
  1744. .loader::before {
  1745. content: "";
  1746. position: absolute;
  1747. top: 5rpx;
  1748. left: 5rpx;
  1749. right: 5rpx;
  1750. bottom: 5rpx;
  1751. border-radius: 50%;
  1752. border: 3rpx solid transparent;
  1753. border-top-color: #ba55d3;
  1754. -webkit-animation: spin 3s linear infinite;
  1755. animation: spin 3s linear infinite;
  1756. }
  1757. .loader::after {
  1758. content: "";
  1759. position: absolute;
  1760. top: 15rpx;
  1761. left: 15rpx;
  1762. right: 15rpx;
  1763. bottom: 15rpx;
  1764. border-radius: 50%;
  1765. border: 3rpx solid transparent;
  1766. border-top-color: #ff00ff;
  1767. -webkit-animation: spin 1.5s linear infinite;
  1768. animation: spin 1.5s linear infinite;
  1769. }
  1770. @-webkit-keyframes spin {
  1771. 0% {
  1772. -webkit-transform: rotate(0deg);
  1773. -ms-transform: rotate(0deg);
  1774. transform: rotate(0deg);
  1775. }
  1776. 100% {
  1777. -webkit-transform: rotate(360deg);
  1778. -ms-transform: rotate(360deg);
  1779. transform: rotate(360deg);
  1780. }
  1781. }
  1782. @keyframes spin {
  1783. 0% {
  1784. -webkit-transform: rotate(0deg);
  1785. -ms-transform: rotate(0deg);
  1786. transform: rotate(0deg);
  1787. }
  1788. 100% {
  1789. -webkit-transform: rotate(360deg);
  1790. -ms-transform: rotate(360deg);
  1791. transform: rotate(360deg);
  1792. }
  1793. }
  1794. </style>