Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

car-release.vue 47KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552
  1. <template>
  2. <navBar title="行驶证信息上传" :scrollTop="scrollTop" navbgClass="nav-bgXin" fontColor='#fff'></navBar>
  3. <navBgCar :activeNum='4'></navBgCar>
  4. <view class="content">
  5. <view class="t-card">
  6. <view class="item-tips">
  7. <view class="title"> 上传后请核对识别信息 </view>
  8. <view class="tip"> 如有错误请及时手动修改 </view>
  9. </view>
  10. <view class="picture-wrapper" @click="takePhotoMode('3')">
  11. <view class="bg">
  12. <view class="">
  13. <view class="name"> 行驶证主页 </view>
  14. <view class="value"> 上传行驶证的主页 </view>
  15. <view class="tip">
  16. <view class="tip-value"> 拍摄规范 </view>
  17. </view>
  18. </view>
  19. <image v-if="!state.form.vehPosImgUrl" class="icon" :src="`${$imgUrl}issuance/xz.png`"
  20. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
  21. </image>
  22. <image v-else class="icon" :src="imgPathMontage(state.form.vehPosImgUrl)"
  23. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
  24. </view>
  25. </view>
  26. <view class="picture-wrapper" @click="takePhotoMode('4')">
  27. <view class="bg">
  28. <view class="">
  29. <view class="name"> 行驶证副页 </view>
  30. <view class="value"> 上传行驶证的副页 </view>
  31. <view class="tip">
  32. <view class="tip-value"> 拍摄规范 </view>
  33. </view>
  34. </view>
  35. <image v-if="!state.form.vehNegImgUrl" class="icon" :src="`${$imgUrl}issuance/xf.png`"
  36. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
  37. </image>
  38. <image v-else class="icon" :src="imgPathMontage(state.form.vehNegImgUrl)"
  39. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
  40. </view>
  41. </view>
  42. <view class="picture-wrapper" @click="cardFileImageUpdate(1)">
  43. <view class="bg">
  44. <view class="">
  45. <view class="name"> 车头照 </view>
  46. <view class="value"> 上传汽车的45度车头照片 </view>
  47. <view class="tip">
  48. <view class="tip-value"> 拍摄规范 </view>
  49. </view>
  50. </view>
  51. <image v-if="!state.form.vehBodyUrl" class="icon" :src="`${$imgUrl}issuance/chetou.png`"
  52. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
  53. </image>
  54. <image v-else class="icon" :src="imgPathMontage(state.form.vehBodyUrl)"
  55. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
  56. </view>
  57. </view>
  58. <view class="uni-list tractor">
  59. <radio-group @change="radioChange" v-if="state.form.vanType==2">
  60. <text class="title">是否是牵引车</text>
  61. <label style="margin-right: 60rpx;" class="uni-list-cell uni-list-cell-pd "
  62. v-for="(item, index) in state.items" :key="item.value">
  63. <radio :value="item.value" :checked="index === state.current" />{{item.name}}
  64. </label>
  65. </radio-group>
  66. </view>
  67. <!-- 货车 牵引车 需要传道路运输许可证-->
  68. <view class="picture-wrapper" v-if="state.form.vanType==2 && state.form.tractorSign==1"
  69. @click="cardFileImageUpdate(2)">
  70. <view class="bg">
  71. <view class="">
  72. <view class="name"> 道路运输许可证 </view>
  73. <view class="value"> 上传道路运输许可证 </view>
  74. <view class="tip">
  75. <view class="tip-value"> 拍摄规范 </view>
  76. </view>
  77. </view>
  78. <image v-if="!state.form.roadTransportPermitPicUrl" class="icon"
  79. :src="`${$imgUrl}issuance/chetou.png`"
  80. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
  81. </image>
  82. <image v-else class="icon" :src="imgPathMontage(state.form.roadTransportPermitPicUrl)"
  83. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
  84. </view>
  85. </view>
  86. </view>
  87. <view class="shibie-wrapper">
  88. <view class="title"> 识别内容如下 </view>
  89. <view class="">
  90. <u-form label-width="200" :model="state.form" ref="uForm" :label-style='labelStyle'>
  91. <u-form-item label="车牌号" :left-icon='`${$imgUrl}issuance/point-form.png`'
  92. :left-icon-style='leftIcon'>
  93. <car-number-input @numberInputResult="carNumber"
  94. :defaultStr="state.form.vehiclePlate"></car-number-input>
  95. </u-form-item>
  96. <u-form-item label="所有人" :left-icon='`${$imgUrl}issuance/point-form.png`'
  97. :left-icon-style='leftIcon'>
  98. <u-input inputAlign="right" placeholder="请输入所有人" v-model="state.form.ownerName"
  99. :disabled="state.isEnableChangeOCRCarInfo" maxlength="20" />
  100. </u-form-item>
  101. <u-form-item label="车辆类型" :left-icon='`${$imgUrl}issuance/point-form.png`'
  102. :left-icon-style='leftIcon'>
  103. <u-input inputAlign="right" placeholder="请输入车辆类型" v-model="state.form.vehicleType"
  104. :disabled="state.isEnableChangeOCRCarInfo" maxlength="20" />
  105. </u-form-item>
  106. <u-form-item label="品牌型号" :left-icon='`${$imgUrl}issuance/point-form.png`'
  107. :left-icon-style='leftIcon'>
  108. <u-input inputAlign="right" placeholder="请输入品牌型号" v-model="state.form.vehicleModel"
  109. :disabled="state.isEnableChangeOCRCarInfo" maxlength="30" />
  110. </u-form-item>
  111. <u-form-item label="使用性质" :left-icon='`${$imgUrl}issuance/point-form.png`'
  112. :left-icon-style='leftIcon'>
  113. <u-input inputAlign="right" placeholder="请输入使用性质" v-model="state.form.character"
  114. :disabled="state.isEnableChangeOCRCarInfo" maxlength="20" />
  115. </u-form-item>
  116. <u-form-item label="车辆识别代号" :left-icon='`${$imgUrl}issuance/point-form.png`'
  117. :left-icon-style='leftIcon'>
  118. <u-input inputAlign="right" placeholder="请输入车辆识别代号" v-model="state.form.vin"
  119. :disabled="state.isEnableChangeOCRCarInfo" maxlength="50" />
  120. </u-form-item>
  121. <u-form-item label="发动机号码" :left-icon='`${$imgUrl}issuance/point-form.png`'
  122. :left-icon-style='leftIcon'>
  123. <u-input inputAlign="right" placeholder="请输入发动机号码" v-model="state.form.engineNum"
  124. :disabled="state.isEnableChangeOCRCarInfo" maxlength="20" />
  125. </u-form-item>
  126. <u-form-item label="注册日期" :left-icon='`${$imgUrl}issuance/point-form.png`'
  127. :left-icon-style='leftIcon'>
  128. <picker mode="date" :value="state.form.registerDate" @change="bindDateChange1"
  129. :disabled="state.isEnableChangeOCRCarInfo">
  130. <view class="uni-input" style="text-align: right;" :class="state.changeColor?'hei':'hui'">
  131. {{state.form.registerDate}}
  132. </view>
  133. </picker>
  134. </u-form-item>
  135. <u-form-item label="发证日期" :left-icon='`${$imgUrl}issuance/point-form.png`'
  136. :left-icon-style='leftIcon'>
  137. <picker mode="date" :value="state.form.issueDate" @change="bindDateChange2"
  138. :disabled="state.isEnableChangeOCRCarInfo">
  139. <view class="uni-input" style="text-align: right;" :class="state.changeColor?'hei':'hui'">
  140. {{state.form.issueDate}}
  141. </view>
  142. </picker>
  143. </u-form-item>
  144. <u-form-item label="核定载人数" :left-icon='`${$imgUrl}issuance/point-form.png`'
  145. :left-icon-style='leftIcon'>
  146. <u-input inputAlign="right" placeholder="请输入核定载人数" v-model="state.form.approvedCountShow"
  147. :disabled="state.isEnableChangeOCRCarInfo" maxlength="3" />
  148. </u-form-item>
  149. <u-form-item label="整备质量" :left-icon='`${$imgUrl}issuance/point-form.png`'
  150. :left-icon-style='leftIcon'>
  151. <u-input inputAlign="right" placeholder="请输入整备质量" v-model="state.form.maintenaceMassShow"
  152. :disabled="state.isEnableChangeOCRCarInfo" maxlength="7" />
  153. </u-form-item>
  154. <view class="form-item">
  155. <label class='l-label'>
  156. <image class="icon-img" :src="`${$imgUrl}issuance/point-form.png`" /><text>外廊尺寸</text>
  157. </label>
  158. <view class="input-box">
  159. <text class="sub-label">长</text>
  160. <input v-model="state.outlineL" @input="outlineInput"
  161. :disabled="state.isEnableChangeOCRCarInfo" type="number" maxlength="5" />
  162. <text class="sub-label">宽</text>
  163. <input v-model="state.outlineW" @input="outlineInput"
  164. :disabled="state.isEnableChangeOCRCarInfo" type="number" maxlength="5" />
  165. <text class="sub-label">高</text>
  166. <input v-model="state.outlineH" @input="outlineInput"
  167. :disabled="state.isEnableChangeOCRCarInfo" type="number" maxlength="5" />
  168. <text class="sub-text">mm</text>
  169. </view>
  170. </view>
  171. <u-form-item label="总质量" :left-icon='`${$imgUrl}issuance/point-form.png`'
  172. :left-icon-style='leftIcon'>
  173. <u-input inputAlign="right" placeholder="请输入总质量" v-model="state.form.totalMassShow"
  174. :disabled="state.isEnableChangeOCRCarInfo" />
  175. </u-form-item>
  176. <u-form-item label="核定载质量" v-if="state.form.permittedWeight"
  177. :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  178. <u-input inputAlign="right" placeholder="核定载质量" v-model="state.form.permittedWeight"
  179. :disabled="state.isEnableChangeOCRCarInfo" />
  180. </u-form-item>
  181. <u-form-item label="车轴数" :left-icon='`${$imgUrl}issuance/point-form.png`'
  182. :left-icon-style='leftIcon'>
  183. <u-input inputAlign="right" placeholder="请输入车轴数" v-model="state.form.axleCount" type="number"
  184. maxlength="2" />
  185. </u-form-item>
  186. <view class="form-item">
  187. <label class='l-label'>
  188. <image class="icon-img" :src="`${$imgUrl}issuance/point-form.png`" /><text>车辆用户类型</text>
  189. </label>
  190. <view class="select" @click="state.actionSheetShow = true">{{state.form.useUserTypeName}}</view>
  191. <image :src="`${$imgUrl}common/arror-down.png`" class="icon"
  192. @click="state.actionSheetShow = true">
  193. </image>
  194. </view>
  195. </u-form>
  196. </view>
  197. <!-- 车主信息 -->
  198. <view class="" v-if="state.showOwner">
  199. <view class="uni-list" style="margin: 20rpx 0;">
  200. <radio-group @change="ownerRadioChange" class="ownerRadio">
  201. <label v-for="(item, index) in carOwnerList" :key="item.value">
  202. <radio :value="item.value" :checked="index === ownerCurrent">{{item.name}}</radio>
  203. </label>
  204. </radio-group>
  205. </view>
  206. <view class="" v-if="state.form.ownerIdType == '101'">
  207. <view class="t-con">
  208. <view class="item-tips">
  209. <view class="title"> 上传后请核对识别信息 </view>
  210. <view class="tip"> 如有错误请及时手动修改 </view>
  211. </view>
  212. <view class="picture-wrapper" @click="takePhotoMode('1','my')">
  213. <view class="bg">
  214. <view class="">
  215. <view class="name"> 人像面 </view>
  216. <view class="value"> 上传身份证的人像面 </view>
  217. <view class="tip">
  218. <view class="tip-value"> 拍摄规范 </view>
  219. </view>
  220. </view>
  221. <image v-if="!state.form.ownerPosImgUrl" class="icon"
  222. :src="`${$imgUrl}issuance/sfz.png`"
  223. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
  224. </image>
  225. <image v-else class="icon" :src="imgPathMontage(state.form.ownerPosImgUrl)"
  226. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
  227. </view>
  228. </view>
  229. <view class="picture-wrapper" @click="takePhotoMode('2','my')">
  230. <view class="bg">
  231. <view class="">
  232. <view class="name"> 国徽面 </view>
  233. <view class="value"> 上传身份证的国徽面 </view>
  234. <view class="tip">
  235. <view class="tip-value"> 拍摄规范 </view>
  236. </view>
  237. </view>
  238. <image v-if="!state.form.ownerNegImgUrl" class="icon"
  239. :src="`${$imgUrl}issuance/sff.png`"
  240. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
  241. </image>
  242. <image v-else class="icon" :src="imgPathMontage(state.form.ownerNegImgUrl)"
  243. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
  244. </view>
  245. </view>
  246. <view class="picture-wrapper" @click="cardFileImageUpdate('5','my')">
  247. <view class="bg">
  248. <view class="">
  249. <view class="name"> 委托书 </view>
  250. <view class="value"> 上传文字清晰的委托书 </view>
  251. <view class="tip">
  252. <view class="tip-value"> 拍摄规范 </view>
  253. </view>
  254. </view>
  255. <image v-if="!state.form.proxyUrl" class="icon" :src="`${$imgUrl}issuance/weituo.png`"
  256. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
  257. </image>
  258. <image v-else class="icon" :src="imgPathMontage(state.form.proxyUrl)"
  259. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
  260. </view>
  261. </view>
  262. </view>
  263. <view class="shibie-wrapper">
  264. <view class="title"> 识别内容如下 </view>
  265. <u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
  266. <u-form-item label="车主姓名" :left-icon='`${$imgUrl}issuance/point-form.png`'
  267. :left-icon-style='leftIcon'>
  268. <u-input v-model="state.form.idName" placeholder='请输入车主姓名' maxlength="20"
  269. @input="replaceInput" inputAlign="right" />
  270. </u-form-item>
  271. <u-form-item label="车主身份证号" :left-icon='`${$imgUrl}issuance/point-form.png`'
  272. :left-icon-style='leftIcon'>
  273. <u-input placeholder='请输入车主身份证' type="idcard" v-model="state.form.ownerIdNum"
  274. maxlength="18" inputAlign="right" />
  275. </u-form-item>
  276. <u-form-item label="车主地址" :left-icon='`${$imgUrl}issuance/point-form.png`'
  277. :left-icon-style='leftIcon'>
  278. <u-input placeholder='请输入车主地址' :autoHeight='true' v-model="state.form.ownerIdAddress"
  279. maxlength="50" inputAlign="right" />
  280. </u-form-item>
  281. <u-form-item label="车主联系方式" :left-icon='`${$imgUrl}issuance/point-form.png`'
  282. :left-icon-style='leftIcon'>
  283. <u-input placeholder='请输入车主联系方式' type="number" v-model="state.form.ownerTel"
  284. maxlength="11" inputAlign="right" />
  285. </u-form-item>
  286. </u-form>
  287. </view>
  288. </view>
  289. <view class="" v-if="state.form.ownerIdType == '203'">
  290. <view class="t-con">
  291. <view class="item-tips">
  292. <view class="title"> 上传后请核对识别信息 </view>
  293. <view class="tip"> 如有错误请及时手动修改 </view>
  294. </view>
  295. <view class="picture-wrapper" @click="cardImageOcrYY()">
  296. <view class="bg">
  297. <view class="">
  298. <view class="name"> 营业执照 </view>
  299. <view class="value"> 上传企业的营业执照 </view>
  300. <view class="tip">
  301. <view class="tip-value"> 拍摄规范 </view>
  302. </view>
  303. </view>
  304. <image v-if="!state.form.ownerPosImgUrl" class="icon"
  305. :src="`${$imgUrl}applyCard/zhizhao.png`"
  306. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
  307. </image>
  308. <image v-else class="icon" :src="strReplace(state.form.ownerPosImgUrl)"
  309. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
  310. </view>
  311. </view>
  312. </view>
  313. <view class="shibie-wrapper">
  314. <view class="title"> 识别内容如下 </view>
  315. <u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
  316. <u-form-item label="公司名称" :left-icon='`${$imgUrl}issuance/point-form.png`'
  317. :left-icon-style='leftIcon'>
  318. <u-input v-model="state.form.idName" placeholder='请输入公司名称' maxlength="20"
  319. @input="replaceInput" inputAlign="right" />
  320. </u-form-item>
  321. <u-form-item label="社会信用代码" :left-icon='`${$imgUrl}issuance/point-form.png`'
  322. :left-icon-style='leftIcon'>
  323. <u-input placeholder='请输入社会信用代码' type="idcard" v-model="state.form.ownerIdNum"
  324. maxlength="18" inputAlign="right" />
  325. </u-form-item>
  326. <u-form-item label="住址" :left-icon='`${$imgUrl}issuance/point-form.png`'
  327. :left-icon-style='leftIcon'>
  328. <u-input placeholder='请输入住址' :autoHeight='true' v-model="state.form.ownerIdAddress"
  329. maxlength="50" inputAlign="right" />
  330. </u-form-item>
  331. <u-form-item label="联系方式" :left-icon='`${$imgUrl}issuance/point-form.png`'
  332. :left-icon-style='leftIcon'>
  333. <u-input placeholder='请输入联系方式' type="number" v-model="state.form.ownerTel"
  334. maxlength="11" inputAlign="right" />
  335. </u-form-item>
  336. </u-form>
  337. </view>
  338. </view>
  339. </view>
  340. </view>
  341. <view class="action">
  342. <view class="btn-tip">
  343. 如识别信息有误,请手动修改,确认无误后,点击下一步!
  344. </view>
  345. <button type="default" class="ui-btn" @click="savaHandle()">
  346. 下一步
  347. </button>
  348. </view>
  349. </view>
  350. <!-- 车辆类型弹窗 -->
  351. <u-popup mode="bottom" v-model="state.actionSheetShow">
  352. <view class="window">
  353. <view class="window-item" v-for="item in state.actionSheetList" :key="item.value" @click="userType(item)">
  354. {{item.text}}
  355. </view>
  356. </view>
  357. </u-popup>
  358. <u-popup mode="bottom" v-model="state.show">
  359. <view v-if="state.data.transferLogs && state.data.transferLogs.length" class="">
  360. <view class="bettwen-center">
  361. <view style="padding: 20rpx" class="title"> 选择卡签 </view>
  362. <view class="goto" @click="pass"> 直接跳过,不使用此套卡签 </view>
  363. </view>
  364. <view @click="guohuAction(item)" class="card" v-for="(item, index) in state.data.transferLogs" :key="index"
  365. style="margin-top: 30rpx; margin-bottom: 30rpx">
  366. <view v-if="item.status === 'WAITING'" class="card-left">
  367. <image :src="`${$imgUrl}card2.png`" mode=""></image>
  368. <view class="card-center">
  369. <view class="flex">
  370. <view class=""> 卡号: </view>
  371. <view class="card-center-head">
  372. {{ item.cardId }}
  373. </view>
  374. </view>
  375. <view style="margin-top: 10rpx" class="flex">
  376. <view class=""> OBU编号: </view>
  377. <view class="card-center-head">
  378. {{ item.obuId }}
  379. </view>
  380. </view>
  381. </view>
  382. </view>
  383. </view>
  384. </view>
  385. </u-popup>
  386. <uploadImg :isTakePhotoModeShow="state.isTakePhotoModeShow" :phoneType="state.choiceIndex" @close="close"
  387. @ocrResult="ocrResult">
  388. </uploadImg>
  389. </template>
  390. <script setup lang="ts">
  391. import { reactive, ref } from "vue";
  392. import uploadImg from '@/components/uploadOcr';
  393. import navBgCar from "./components/nav-bg-car1";
  394. import navBar from "@/components/nav-bar/nav-bar2.vue";
  395. import carNumberInput from "@/components/car-number-input/car-number-input.vue";
  396. import {
  397. etcCarCardInfoSubmit,
  398. queryGuoHuJianCe,
  399. queryGuoHuCaoZuo,
  400. carMessageApi,
  401. vehicleUpload,
  402. vehicleLicenseOcr,
  403. vehicUsePropert,
  404. vehicCharge,
  405. ocrAllQuery,
  406. } from "@/utils/network/api.js";
  407. import { request, requestNew } from "@/utils/network/request.js";
  408. import { stringToJson } from "@/utils/network/encryption";
  409. import { onLoad, onPageScroll } from "@dcloudio/uni-app";
  410. import { getItem, StorageKeys } from "@/utils/storage";
  411. import { msg, strReplace, imgPathMontage, hasLogin, uploadFile, compressImage, chooseImageCompress } from "@/utils/utils";
  412. import { navTo } from "@/utils/utils";
  413. import {
  414. getCodeName
  415. } from "@/datas/queryKey.js";
  416. const scrollTop = ref(0);
  417. const labelStyle = {
  418. color: "#004576",
  419. fontSize: "28rpx",
  420. }
  421. const leftIcon = {
  422. height: '100%',
  423. width: '8rpx',
  424. display: 'flex',
  425. 'align-items': 'center',
  426. 'margin-right': '3rpx',
  427. }
  428. //监听页面滚动
  429. onPageScroll((e) => {
  430. scrollTop.value = e.scrollTop;
  431. });
  432. const close = (e) => {
  433. console.log("e", e)
  434. state.isTakePhotoModeShow = e
  435. }
  436. //车牌号输入
  437. const carNumber = (val : any) => {
  438. state.form.vehiclePlate = val.trim();
  439. };
  440. const camera = () => {
  441. state.phoneType = 0
  442. }
  443. const carOwnerList = ref([
  444. { name: "个人", value: "101" },
  445. { name: "企业", value: "203" },
  446. ])
  447. const ownerCurrent = ref(0);
  448. const ownerRadioChange = (evt) => {
  449. console.log(evt)
  450. state.form.ownerIdType = evt.detail.value;
  451. if (state.form.ownerIdType != evt.detail.value) {
  452. state.form.idName = "";
  453. state.form.ownerIdNum = "";
  454. state.form.ownerIdAddress = "";
  455. state.form.ownerPosImgUrl = "";
  456. state.form.proxyUrl = "";
  457. state.form.ownerNegImgUrl = "";
  458. state.form.ownerTel = "";
  459. }
  460. for (let i = 0; i < this.items.length; i++) {
  461. if (this.items[i].value === evt.detail.value) {
  462. ownerCurrent.value = i;
  463. break;
  464. }
  465. }
  466. }
  467. // 获取车辆使用性质
  468. const getCharacter = (options) => {
  469. let data = {
  470. "approvedCount": state.form.approvedCount,
  471. "axleCount": state.form.axleCount,
  472. "totalMass": state.form.totalMass,
  473. "vanType": state.form.vanType,
  474. "vehicleDimensions": state.form.vehicleDimensions,
  475. "plateNum": state.form.vehiclePlate,
  476. "vehicleTypeName": state.form.vehicleType,
  477. "vehicleUsePropertName": state.form.character
  478. }
  479. let params = {
  480. type: 2,
  481. data: data,
  482. method: "POST",
  483. showLoading: true,
  484. };
  485. requestNew(vehicCharge, params)
  486. .then((res) => {
  487. let data = {
  488. ...options,
  489. character: res.vehicUse,
  490. feeVehicleType: res.feeVehicleType,
  491. }
  492. let params = {
  493. type: 2,
  494. data: data,
  495. method: "POST",
  496. showLoading: true,
  497. };
  498. requestNew(vehicleUpload, params)
  499. .then((resIn) => {
  500. if (resIn.flag == 1) {
  501. // 车辆信息与用户信息不符,上传车主信息
  502. state.showOwner = true;
  503. state.form.ownerIdType = "101";
  504. } else if (resIn.flag == 2) {
  505. if (resIn.approvalStatus == 2) {
  506. // 会详细列出具体字段的错误信息。
  507. uni.showModal({
  508. title: '提示',
  509. content: "等待人工审核",
  510. success: function (res) {
  511. if (res.confirm) {
  512. navTo(
  513. `/subpackage/orders/product-detail?orderId=${state.form.orderNo}&&clientFee=${getItem("clientFee")}&&id=${getItem("productId")}&&isValueCard=${getItem("isValueCard")}&vehicleId=${state.form.vehicleId}`,
  514. );
  515. } else if (res.cancel) {
  516. console.log('用户点击取消2');
  517. }
  518. }
  519. });
  520. }
  521. }
  522. })
  523. .catch((err) => {
  524. console.log(err);
  525. });
  526. })
  527. .catch((err) => {
  528. console.log(err);
  529. });
  530. }
  531. //提交车辆信息
  532. const savaHandle = () => {
  533. if (!state.form.vehPosImgUrl) {
  534. msg("请上传行驶证的主页");
  535. return;
  536. }
  537. if (!state.form.vehNegImgUrl) {
  538. msg("请上传行驶证的副页");
  539. return;
  540. }
  541. if (!state.form.vehBodyUrl) {
  542. msg("请上传车头照");
  543. return;
  544. }
  545. if (!state.form.ownerName) {
  546. msg("请输入所有人");
  547. return;
  548. }
  549. if (!state.form.vehicleType) {
  550. msg("请输入车辆类型");
  551. return;
  552. }
  553. if (!state.form.character) {
  554. msg("请输入使用性质");
  555. return;
  556. }
  557. if (!state.form.vin) {
  558. msg("请输入车辆识别代号");
  559. return;
  560. }
  561. if (!state.form.engineNum) {
  562. msg("请输入发动机号码");
  563. return;
  564. }
  565. if (!state.form.approvedCountShow) {
  566. msg("请输入核定载人数");
  567. return;
  568. }
  569. if (!state.outlineL || state.outlineL == '0') {
  570. msg("请输入外廊尺寸长");
  571. return;
  572. }
  573. if (!state.outlineW || state.outlineW == '0') {
  574. msg("请输入外廊尺寸宽");
  575. return;
  576. }
  577. if (!state.outlineH || state.outlineH == '0') {
  578. msg("请输入外廊尺寸高");
  579. return;
  580. }
  581. console.log("state.form.tractorSign", state.form.tractorSign, state.form.roadTransportPermitPicUrl)
  582. if (state.form.tractorSign == 1 && !state.form.roadTransportPermitPicUrl) {
  583. msg("请上传道路运输许可证");
  584. return;
  585. }
  586. if (state.form.vanType == 1) {
  587. state.form.axleCount = 2;
  588. } else {
  589. if (!state.form.axleCount) {
  590. msg("请输入车轴数");
  591. return;
  592. }
  593. }
  594. state.form.vehicleId =
  595. state.form.vehiclePlate + "_" + state.vehiclePlateColor;
  596. state.form.opId = getItem(StorageKeys.OpenId);
  597. state.form.approvedCount = parseFloat(state.form.approvedCount);
  598. state.form.maintenaceMass = parseFloat(state.form.maintenaceMass);
  599. // state.form.totalMass = parseFloat(state.form.totalMass);
  600. state.form.permittedWeight = parseFloat(state.form.permittedWeight);
  601. state.form.permittedTowWeight = parseFloat(state.form.permittedTowWeight);
  602. console.log("state.form.approvedCountShow", state.form.approvedCountShow, state.form.approvedCountShow.toString().indexOf('人'))
  603. // return;
  604. if (state.form.approvedCountShow.toString().indexOf('人') > 0) {
  605. state.form.approvedCount = state.form.approvedCountShow.replace("人", "");
  606. } else {
  607. state.form.approvedCount = state.form.approvedCountShow;
  608. }
  609. if (state.form.maintenaceMassShow.toString().indexOf('kg') > 0) {
  610. state.form.maintenaceMass = state.form.maintenaceMassShow.replace("kg", "");
  611. } else {
  612. state.form.maintenaceMass = state.form.maintenaceMassShow;
  613. }
  614. console.log("state.form.totalMassShow", state.form.totalMassShow)
  615. if (state.form.totalMassShow.toString().indexOf('kg') > 0) {
  616. state.form.totalMass = state.form.totalMassShow.replace("kg", "");
  617. } else {
  618. state.form.totalMass = state.form.totalMassShow;
  619. }
  620. const options = {
  621. type: 2,
  622. data: state.form,
  623. method: "POST",
  624. showLoading: true,
  625. };
  626. getCharacter(state.form);
  627. };
  628. const pass = () => {
  629. state.show = false
  630. state.form.vehicleId =
  631. state.form.vehiclePlate + "_" + state.vehiclePlateColor;
  632. state.form.opId = getItem(StorageKeys.OpenId);
  633. state.form.approvedCount = parseFloat(state.form.approvedCount);
  634. state.form.maintenaceMass = parseFloat(state.form.maintenaceMass);
  635. state.form.totalMass = parseFloat(state.form.totalMass);
  636. state.form.permittedWeight = parseFloat(state.form.permittedWeight);
  637. state.form.permittedTowWeight = parseFloat(state.form.permittedTowWeight);
  638. const options = {
  639. type: 2,
  640. data: state.form,
  641. method: "POST",
  642. showLoading: true,
  643. };
  644. request(etcCarCardInfoSubmit, options).then((res) => {
  645. uni.redirectTo({
  646. url: `/subpackage/orders/product-detail?orderId=${state.form.orderNo}&&clientFee=${getItem("clientFee")}&&id=${getItem("productId")}&&isValueCard=${getItem("isValueCard")}&vehicleId=${state.form.vehicleId}`,
  647. });
  648. })
  649. }
  650. const selectConfirm = (index : any) => {
  651. console.log(index);
  652. state.form.useUserType = state.actionSheetList[index].value;
  653. state.form.useUserTypeName = state.actionSheetList[index].text;
  654. };
  655. //选择车辆用户类型
  656. const userType = (item : any) => {
  657. state.form.useUserType = item.value;
  658. state.form.useUserTypeName = item.text;
  659. state.actionSheetShow = false;
  660. }
  661. //车头照图片上传 val 1 车头照 2 道路运输证 5 委托书
  662. const cardFileImageUpdate = (val) => {
  663. uni.chooseImage({
  664. count: 1, //只能选取一张照片
  665. sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有
  666. sourceType: ["camera", "album"], //从相册选择
  667. success: function (res) {
  668. uploadFile(res.tempFilePaths[0], val).then((data) => {
  669. if (val == 1) {
  670. state.form.vehBodyUrl = data.imageUrl;
  671. } else if (val == 5) {
  672. state.form.proxyUrl = data.imageUrl;
  673. } else {
  674. state.form.roadTransportPermitPicUrl = data.imageUrl;
  675. }
  676. })
  677. },
  678. });
  679. };
  680. const state = reactive({
  681. phoneType: 0, // 1 身份证正面 2 身份证反面 3行驶证正面 4行驶证反面
  682. choiceIndex: 1, // 1 身份证正面 2 身份证反面
  683. isTakePhotoModeShow: false, //选择拍照方式是否出来
  684. changeColor: false,
  685. showImg: true,
  686. images: '',
  687. showOwner: false,
  688. data: {
  689. transferLogs: [],
  690. },
  691. actionSheetShow: false,
  692. actionSheetList: [],
  693. form: {
  694. orderNo: "", //订单ID
  695. character: "", //使用性质
  696. registerDate: "请输入注册日期", //注册日期
  697. vehiclePlateColor: "",
  698. customerId: "", //用户编号
  699. vehicleId: "",
  700. vehiclePlate: "", //车牌编号
  701. issueDate: "请输入发证日期", //发证日期
  702. vehPosImgUrl: "", //行驶证正面
  703. vehNegImgUrl: "", //行驶证证反面
  704. vanType: 1, //1,客车 2.货车
  705. useUserType: 0, //车辆用户类型
  706. useUserTypeName: "普通车",
  707. vehicleSign: 2, //前/后装标识
  708. vin: "", //车辆识别代号
  709. engineNum: "", //发动机号码
  710. vehicleType: "", //车辆类型
  711. vehicleModel: "", //行驶证品牌型号
  712. approvedCount: undefined, //核定人数
  713. approvedCountShow: undefined,//展示的
  714. totalMass: undefined, //总质量
  715. totalMassShow: undefined, //总质量
  716. maintenaceMass: undefined, //整备质量
  717. maintenaceMassShow: undefined, //整备质量展示的
  718. permittedWeight: "", //核定载质量
  719. vehicleDimensions: "", //车辆尺寸
  720. permittedTowWeight: "", //准牵引总质量
  721. axleCount: 0, //车轴数
  722. ownerName: "", //车主姓名
  723. ownerIdType: "", //车主证件类型
  724. ownerIdNum: "", //车主证件号码
  725. ownerPosImgUrl: "", //车主证件正面图片
  726. ownerNegImgUrl: "", //车主证件反面图片
  727. agreementId: "", //签约编号
  728. channelId: "5201018892300000001", //编号渠道
  729. scenePayType: "", //
  730. transportIdNum: "", //道路运输证编号
  731. licenseIdNum: "", //经营许可证编号
  732. vehBodyUrl: "", //车身照片
  733. proxyUrl: "", //委托书地址
  734. roadTransportPermitPicUrl: "", //道路运输许可证
  735. opId: "",
  736. tractorSign: 0, //是否是牵引车 1 是 0 不是
  737. "emergencyFlag": 0,
  738. "feeVehicleType": 0,
  739. "idName": "",
  740. "ownerIdAddress": "",
  741. "ownerTel": "",
  742. },
  743. vehiclePlateColor: undefined,
  744. orderNo: "",
  745. // type: undefined, //标记来源是否登录 1为未登录数据 - 需要新增地址
  746. show: false,
  747. isMyPeopple: true,
  748. outlineL: "",
  749. outlineW: "",
  750. outlineH: "",
  751. isEnableChangeOCRCarInfo: true, //申办时是否允许修改OCR识别出来的车辆信息数据
  752. items: [{
  753. value: '1',
  754. name: '是',
  755. },
  756. {
  757. value: '0',
  758. name: '否',
  759. checked: 'true'
  760. }],
  761. current: "1",
  762. });
  763. onLoad((option : any) => {
  764. state.form.orderNo = option.orderId;
  765. state.form.vanType = Number(option.vanType);
  766. state.vehiclePlateColor = option.vehiclePlateColor;
  767. state.form.vehiclePlateColor = option.vehiclePlateColor;
  768. if (option.vehicleId) {
  769. state.form.vehicleId = option.vehicleId;
  770. }
  771. console.log("option", option)
  772. // getGlobalParam();
  773. if (option.vanType == 1) {
  774. state.actionSheetList = [{
  775. text: "普通车",
  776. value: 0,
  777. }]
  778. } else {
  779. state.actionSheetList = [{
  780. text: "普通车",
  781. value: 0,
  782. },
  783. {
  784. text: "道路运输证经营范围仅有“货物专用运输(集装箱) ”的牵引车办理J类型集装箱",
  785. value: 24,
  786. },
  787. {
  788. text: "道路运输证经营范围不含“货物专用运输(集装箱)”的牵引车",
  789. value: 27,
  790. },
  791. {
  792. text: '道路运输证经营范围除“货物专用运输 (集装 箱)"外,还有“普通货运”等其他项目的牵引车办理J2类型集装箱',
  793. value: 28,
  794. }]
  795. }
  796. });
  797. //外廓尺寸输入框
  798. const outlineInput = (e) => {
  799. state.form.vehicleDimensions =
  800. state.outlineL + "X" + state.outlineW + "X" + state.outlineH + "mm";
  801. };
  802. //过户检测
  803. const queryGuoHuJianCeAction = () => {
  804. var data = {
  805. orderId: state.form.orderNo,
  806. };
  807. const options = {
  808. type: 2,
  809. data: data,
  810. method: "POST",
  811. showLoading: true,
  812. };
  813. return new Promise(async (resolve, reject) => {
  814. const res = await request(queryGuoHuJianCe, options);
  815. const data = stringToJson(res.bizContent);
  816. console.log("过户检测111", data)
  817. resolve(data);
  818. }).catch((error) => {
  819. reject(error);
  820. });
  821. };
  822. //过户操作
  823. const guohuAction = (val) => {
  824. var data = {
  825. orderId: state.form.orderNo,
  826. serviceType: "USE",
  827. obuId: val.obuId,
  828. cardId: val.cardId,
  829. };
  830. const options = {
  831. type: 2,
  832. data: data,
  833. method: "POST",
  834. showLoading: true,
  835. };
  836. return new Promise(async (resolve, reject) => {
  837. const res = await request(queryGuoHuCaoZuo, options);
  838. const data = stringToJson(res.bizContent);
  839. state.show = false;
  840. uni.redirectTo({
  841. url: `/subpackage/orders/product-detail?orderId=${state.form.orderNo}&&clientFee=${getItem("clientFee")}&&id=${getItem("productId")}&&isValueCard=${getItem("isValueCard")}&vehicleId=${state.form.vehicleId}`,
  842. });
  843. }).catch((error) => {
  844. reject(error);
  845. });
  846. };
  847. const getGlobalParam = () => {
  848. const data = getItem('globalParam')
  849. getCarMessage();
  850. // console.log("全局配置数据", getCodeName('IS_ENABLE', data.applyChangeOCRCarInfo))
  851. // // 申办时是否允许修改OCR识别出来的车辆信息数据
  852. // if (getCodeName('IS_ENABLE', data.applyChangeOCRCarInfo) == '启用') {
  853. // state.isEnableChangeOCRCarInfo = false;
  854. // } else {
  855. // state.isEnableChangeOCRCarInfo = true;
  856. // }
  857. // // 中办时是否允许带出车辆信息
  858. // console.log("11", getCodeName('IS_ENABLE', data.applyCarInfo))
  859. // if (getCodeName('IS_ENABLE', data.applyCarInfo) == '启用') {
  860. // // 获取车辆信息
  861. // getCarMessage()
  862. // console.log("11")
  863. // }
  864. }
  865. const getCarMessage = () => {
  866. const options = {
  867. type: 2,
  868. data: {
  869. vehicleId: state.form.vehicleId,
  870. },
  871. method: "POST",
  872. showLoading: true,
  873. };
  874. request(carMessageApi, options).then((res) => {
  875. const data = stringToJson(res.bizContent);
  876. console.log("通过vehicleId查询车辆信息", data)
  877. if (data.statusCode == 0) {
  878. writeMsg(data.data)
  879. }
  880. })
  881. }
  882. const writeMsg = (allData) => {
  883. console.log("车辆信息", allData);
  884. state.form.ownerPosImgUrl = allData['ownerPosImgUrl']
  885. state.form.ownerNegImgUrl = allData['ownerNegImgUrl']
  886. state.form.userName = allData['contacts']
  887. state.form.userIdNum = allData['ownerIdNum']
  888. state.form.ownerIdNum = allData['ownerIdNum']
  889. state.form.address = allData['ownerAddress']
  890. state.form.tel = allData['ownerTel']
  891. state.form.vehPosImgUrl = allData['vehPosImgUrl']
  892. state.form.vehNegImgUrl = allData['vehNegImgUrl']
  893. state.form.vehBodyUrl = allData['vehBodyUrl']
  894. state.form.vehiclePlate = allData['vehiclePlate']
  895. state.form.ownerName = allData['ownerName']
  896. state.form.vehicleType = allData['vehicleType']
  897. if (allData['useCharacter'] == 1) {
  898. state.form.character = "营运" //使用性质
  899. } else if (allData['useCharacter'] == 2) {
  900. state.form.character = "非营运" //使用性质
  901. } else {
  902. state.form.character = "未知" //使用性质
  903. }
  904. state.form.vin = allData['vin']
  905. state.form.engineNum = allData['engineNum']
  906. state.form.registerDate = allData['registerDate']
  907. state.form.issueDate = allData['issueDate']
  908. state.form.approvedCountShow = allData['approvedCount']
  909. state.form.maintenaceMassShow = allData['maintenaceMass']
  910. state.form.approvedCount = allData['approvedCount']
  911. state.form.maintenaceMass = allData['maintenaceMass']
  912. allData['vehicleDimensions']
  913. state.form.vehicleDimensions = allData['vehicleDimensions']
  914. let arr = allData['vehicleDimensions'].split("X");
  915. state.outlineL = parseInt(arr[0]); //外廓 长
  916. state.outlineW = parseInt(arr[1]); //外廓 宽
  917. state.outlineH = parseInt(arr[2].substring(0, arr[2].length - 2)); //外廓 高
  918. state.form.totalMassShow = allData['totalMass']
  919. state.form.totalMass = allData['totalMass']
  920. state.form.axleCount = allData['axleCount'] ? allData['axleCount'] : 2
  921. if (allData['useUserType'] == 0) {
  922. state.form.useUserTypeName = "普通车"
  923. } else if (allData['useUserType'] == 24) {
  924. state.form.useUserTypeName = "道路运输证经营范围仅有“货物专用运输(集装箱) ”的牵引车办理J类型集装箱"
  925. } else if (allData['useUserType'] == 27) {
  926. state.form.useUserTypeName = "道路运输证经营范围不含“货物专用运输(集装箱)”的牵引车"
  927. } else if (allData['useUserType'] == 28) {
  928. state.form.useUserTypeName = "道路运输证经营范围除'货物专用运输 (集装 箱)'外,还有“普通货运”等其他项目的牵引车办理J2类型集装箱"
  929. }
  930. state.vehiclePlateColor = allData['vehiclePlateColor']
  931. state.form.customerId = allData['customerId']
  932. state.form.vehicleModel = allData['vehicleModel']
  933. state.form.permittedWeight = allData['permittedWeight'] ? allData['permittedWeight'] : 0;
  934. state.form.permittedTowWeight = allData['permittedTowWeight']
  935. state.changeColor = true
  936. if (allData['tractorSign'] == "1") {
  937. qian()
  938. state.form.roadTransportPermitPicUrl = allData['roadTransportPermitPicUrl']
  939. } else {
  940. notQian()
  941. }
  942. }
  943. const bindDateChange1 = (e) => {
  944. state.form.registerDate = e.detail.value
  945. state.changeColor = true;
  946. }
  947. const bindDateChange2 = (e) => {
  948. state.form.issueDate = e.detail.value
  949. state.changeColor = true;
  950. }
  951. const takePhoto = (val) => {
  952. console.log("拍照", val)
  953. state.phoneType = val;
  954. state.showImg = true;
  955. }
  956. const ocrResult = (data) => {
  957. state.changeColor = true;
  958. console.log('输出内容=====================', state.choiceIndex)
  959. console.log("上传数据:", data)
  960. if (state.choiceIndex === "3") {
  961. // 行驶证正面
  962. if (data.plate_a.length > 8) {
  963. state.form.vehiclePlate = data.plate_a.substring(0, 8);
  964. } else {
  965. state.form.vehiclePlate = data.plate_a;
  966. }
  967. state.form.ownerName = data.man;
  968. state.form.vehicleType = data.vehicle;
  969. state.form.character = data.character;
  970. state.form.vin = data.vin;
  971. state.form.engineNum = data.engine;
  972. state.form.registerDate = data.register;
  973. state.form.issueDate = data.issue;
  974. state.form.vehPosImgUrl = data.imageUrl;
  975. state.form.vehicleModel = data.model;
  976. console.log("走不是牵引车的", data.vehicle.indexOf('牵引车'), data.vehicle)
  977. if (data.vehicle.indexOf('牵引车') > 0) {
  978. console.log("是牵引车的")
  979. qian()
  980. } else {
  981. console.log("走不是牵引车的")
  982. notQian()
  983. }
  984. } else if (state.choiceIndex === "4") {
  985. // 行驶证反面
  986. state.form.approvedCount = data.apc;
  987. state.form.approvedCountShow = data.apc;
  988. state.form.maintenaceMass = data.unladen;
  989. state.form.maintenaceMassShow = data.unladen;
  990. // 91接口差
  991. // // #ifdef MP-WEIXIN
  992. // state.form.vehicleDimensions = data.overall.replaceAll("×", "X");
  993. // // #endif
  994. // // #ifdef MP-ALIPAY
  995. // state.form.vehicleDimensions = data.overall.replace(/×/g, "X");
  996. // // #endif
  997. // let arr = data.overall.split("×");
  998. // #ifdef MP-WEIXIN
  999. state.form.vehicleDimensions = data.overall.replaceAll("x", "X");
  1000. // #endif
  1001. // #ifdef MP-ALIPAY
  1002. state.form.vehicleDimensions = data.overall.replace(/x/g, "X");
  1003. // #endif
  1004. let arr = state.form.vehicleDimensions.split("X");
  1005. state.outlineL = arr[0]; //外廓 长
  1006. state.outlineW = arr[1]; //外廓 宽
  1007. state.outlineH = arr[2].substring(0, arr[2].length - 2); //外廓 高
  1008. state.form.totalMass = data.gross ? data.gross : 0;
  1009. state.form.totalMassShow = data.gross ? data.gross : 0;
  1010. console.log("state.form.totalMassShow", state.form.totalMassShow)
  1011. state.form.vehNegImgUrl = data.imageUrl;
  1012. state.form.permittedWeight = data.alc ? data.alc : 0;
  1013. state.form.permittedTowWeight = data.towing ? data.towing : 0;
  1014. console.log('=====================', state.form.vehNegImgUrl, state)
  1015. } else if (state.choiceIndex === "1") {
  1016. // 车主身份证正面
  1017. state.form.idName = data.name;
  1018. state.form.ownerIdNum = data.idno;
  1019. state.form.ownerIdAddress = data.address;
  1020. state.form.ownerPosImgUrl = data.imageUrl;
  1021. } else if (state.choiceIndex === "2") {
  1022. // 车主身份证反面
  1023. state.form.ownerNegImgUrl = data.imageUrl;
  1024. } else if (state.choiceIndex === "5") {
  1025. // 委托书
  1026. state.form.proxyUrl = data.imageUrl;
  1027. }
  1028. }
  1029. //营业执照Orc接口调用
  1030. const cardImageOcrYY = () => {
  1031. uni.chooseImage({
  1032. count: 1, //只能选取一张照片
  1033. sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有
  1034. sourceType: ["camera", "album"], //从相册选择
  1035. success: function (res) {
  1036. uploadFile(res.tempFilePaths[0], "", ocrAllQuery).then((data) => {
  1037. console.log("data", data)
  1038. state.form.idName = data.unitName;
  1039. state.form.ownerIdNum = data.screditCode;
  1040. state.form.ownerIdAddress = data.address;
  1041. state.form.ownerTel = data.address;
  1042. state.form.ownerPosImgUrl = data.imageUrl;
  1043. })
  1044. },
  1045. });
  1046. };
  1047. const takePhotoMode = (index) => {
  1048. console.log("index", index)
  1049. state.isTakePhotoModeShow = true
  1050. state.choiceIndex = index
  1051. }
  1052. const radioChange = (evt) => {
  1053. console.log("evt.detail.value", evt.detail.value)
  1054. for (let i = 0; i < state.items.length; i++) {
  1055. if (state.items[i].value === evt.detail.value) {
  1056. state.current = i;
  1057. state.form.tractorSign = evt.detail.value;
  1058. break;
  1059. }
  1060. }
  1061. }
  1062. // 牵引车
  1063. const qian = () => {
  1064. state.items = [{
  1065. value: '1',
  1066. name: '是',
  1067. checked: 'true'
  1068. },
  1069. {
  1070. value: '0',
  1071. name: '否',
  1072. }]
  1073. for (let i = 0; i < state.items.length; i++) {
  1074. console.log("")
  1075. if (state.items[i].value === '1') {
  1076. state.current = i;
  1077. state.form.tractorSign = 1;
  1078. break;
  1079. }
  1080. }
  1081. }
  1082. // 不是牵引车
  1083. const notQian = () => {
  1084. state.items = [{
  1085. value: '1',
  1086. name: '是',
  1087. },
  1088. {
  1089. value: '0',
  1090. name: '否',
  1091. checked: 'true'
  1092. }]
  1093. for (let i = 0; i < state.items.length; i++) {
  1094. console.log("不是牵引车", state.items[i].value, state.items[i].value === '0')
  1095. if (state.items[i].value === '0') {
  1096. state.current = i;
  1097. state.form.tractorSign = 0;
  1098. break;
  1099. }
  1100. }
  1101. }
  1102. </script>
  1103. <style lang="scss" scoped>
  1104. .content-warp {}
  1105. .hui {
  1106. color: #ccc;
  1107. }
  1108. .hei {
  1109. color: black;
  1110. }
  1111. .goto {
  1112. margin-right: 20rpx;
  1113. padding: 10rpx;
  1114. color: #00b38b;
  1115. border: 1rpx solid #00b38b;
  1116. border-radius: 20rpx;
  1117. }
  1118. .flex {
  1119. display: flex;
  1120. align-items: center;
  1121. }
  1122. .bettwen-center {
  1123. display: flex;
  1124. align-items: center;
  1125. justify-content: space-between;
  1126. }
  1127. .card {
  1128. margin: 20rpx;
  1129. height: 150rpx;
  1130. background: #ffffff;
  1131. box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
  1132. border-radius: 20rpx;
  1133. padding: 20rpx;
  1134. display: flex;
  1135. justify-content: space-between;
  1136. align-items: center;
  1137. margin-bottom: 30rpx;
  1138. .card-left {
  1139. display: flex;
  1140. align-items: center;
  1141. image {
  1142. width: 100rpx;
  1143. height: 90rpx;
  1144. }
  1145. .card-center {
  1146. margin-left: 30rpx;
  1147. .card-center-head {
  1148. font-size: 32rpx;
  1149. font-family: Noto Sans S Chinese;
  1150. font-weight: 400;
  1151. color: #333333;
  1152. }
  1153. .tips {
  1154. font-size: 26rpx;
  1155. font-family: Noto Sans S Chinese;
  1156. font-weight: 400;
  1157. color: #666666;
  1158. .tips-card {
  1159. width: 70rpx;
  1160. height: 40rpx;
  1161. background: #d3f2ef;
  1162. border-radius: 6rpx;
  1163. font-size: 20rpx;
  1164. font-family: Noto Sans S Chinese;
  1165. font-weight: 400;
  1166. color: #0a8f8a;
  1167. padding: 5rpx 10rpx;
  1168. margin-left: 20rpx;
  1169. }
  1170. }
  1171. }
  1172. }
  1173. .choose-item {
  1174. margin-right: 20rpx;
  1175. width: 50rpx;
  1176. height: 50rpx;
  1177. border: 1rpx solid #00b38b;
  1178. border-radius: 50%;
  1179. display: flex;
  1180. justify-content: center;
  1181. align-items: center;
  1182. .active {
  1183. width: 38rpx;
  1184. height: 38rpx;
  1185. background: #00b38b;
  1186. border-radius: 50%;
  1187. }
  1188. }
  1189. }
  1190. .content {
  1191. position: absolute;
  1192. top: 370rpx;
  1193. width: 100%;
  1194. min-height: calc(100% - 370rpx);
  1195. box-sizing: border-box;
  1196. padding: 0 30rpx 210rpx;
  1197. .t-card {
  1198. width: 100%;
  1199. background-color: #fff;
  1200. border-radius: 12rpx;
  1201. padding: 40rpx 30rpx 30rpx;
  1202. box-sizing: border-box;
  1203. }
  1204. .img-pos {
  1205. position: absolute;
  1206. left: 270rpx;
  1207. top: -38rpx;
  1208. right: 50rpx;
  1209. .img-flex {
  1210. display: flex;
  1211. justify-content: space-between;
  1212. align-items: center;
  1213. .car-img {
  1214. width: 86rpx;
  1215. height: 42rpx;
  1216. }
  1217. .flag-img {
  1218. width: 30rpx;
  1219. height: 35rpx;
  1220. }
  1221. }
  1222. }
  1223. .action {
  1224. position: absolute;
  1225. bottom: 0rpx;
  1226. left: 0;
  1227. height: 188rpx;
  1228. background-color: #fff;
  1229. border-radius: 30rpx 30rpx 0 0;
  1230. width: 100vw;
  1231. display: flex;
  1232. align-items: center;
  1233. justify-content: center;
  1234. flex-direction: column;
  1235. .btn-tip {
  1236. font-family: SourceHanSansSC, SourceHanSansSC;
  1237. font-weight: 400;
  1238. font-size: 24rpx;
  1239. color: #CCB375;
  1240. margin-bottom: 14rpx;
  1241. }
  1242. }
  1243. .item-tips {
  1244. .title {
  1245. font-size: 30rpx;
  1246. font-family: Microsoft YaHei;
  1247. font-weight: 500;
  1248. color: #01243A;
  1249. line-height: 30rpx;
  1250. }
  1251. .tip {
  1252. margin-top: 16rpx;
  1253. font-size: 24rpx;
  1254. font-family: Microsoft YaHei;
  1255. font-weight: 400;
  1256. color: #999999;
  1257. line-height: 24rpx;
  1258. }
  1259. }
  1260. .picture-wrapper {
  1261. margin-top: 30rpx;
  1262. .bg {
  1263. background: #F5F9FB;
  1264. border-radius: 10rpx;
  1265. padding: 40rpx 30rpx;
  1266. display: flex;
  1267. // align-items: center;
  1268. justify-content: space-between;
  1269. .name {
  1270. padding-top: 30rpx;
  1271. font-size: 32rpx;
  1272. font-family: SourceHanSansSC, SourceHanSansSC;
  1273. font-weight: 500;
  1274. color: #111;
  1275. line-height: 34rpx;
  1276. }
  1277. .value {
  1278. margin-top: 20rpx;
  1279. font-size: 22rpx;
  1280. font-family: SourceHanSansSC, SourceHanSansSC;
  1281. font-weight: 400;
  1282. color: #999999;
  1283. line-height: 24rpx;
  1284. }
  1285. .tip {
  1286. margin-top: 20rpx;
  1287. text-align: center;
  1288. width: 100rpx;
  1289. height: 30rpx;
  1290. // background: rgba(204, 179, 117);
  1291. border-radius: 6rpx;
  1292. border: 1rpx solid #CCB375;
  1293. .tip-value {
  1294. font-size: 20rpx;
  1295. font-family: Microsoft YaHei;
  1296. font-weight: 400;
  1297. color: #CCB375;
  1298. line-height: 30rpx;
  1299. opacity: 1;
  1300. }
  1301. }
  1302. }
  1303. .icon {
  1304. width: 304rpx;
  1305. height: 190rpx;
  1306. background-image: var(--bgimg);
  1307. background-size: 100% 100%;
  1308. background-repeat: no-repeat;
  1309. }
  1310. }
  1311. .shibie-wrapper {
  1312. margin-top: 30rpx;
  1313. border-radius: 12rpx;
  1314. background-color: #fff;
  1315. width: 100%;
  1316. padding: 30rpx;
  1317. box-sizing: border-box;
  1318. .title {
  1319. font-size: 30rpx;
  1320. font-family: Microsoft YaHei;
  1321. font-weight: 500;
  1322. color: #01243A;
  1323. line-height: 30rpx;
  1324. }
  1325. }
  1326. .buchong-wrapper {
  1327. margin-top: 60rpx;
  1328. .title {
  1329. font-size: 30rpx;
  1330. font-family: Microsoft YaHei;
  1331. font-weight: 400;
  1332. color: #000000;
  1333. line-height: 30rpx;
  1334. }
  1335. }
  1336. .green-tip {
  1337. margin-top: 50rpx;
  1338. font-size: 24rpx;
  1339. font-family: Microsoft YaHei;
  1340. font-weight: 400;
  1341. color: #00b38b;
  1342. line-height: 24rpx;
  1343. margin-bottom: 60rpx;
  1344. }
  1345. }
  1346. .form-item {
  1347. display: flex;
  1348. font-size: 28rpx;
  1349. justify-content: space-between;
  1350. align-items: center;
  1351. height: 70rpx;
  1352. .l-label {
  1353. font-size: 28rpx;
  1354. color: #004576;
  1355. display: flex;
  1356. align-items: center;
  1357. .icon-img {
  1358. align-items: center;
  1359. margin-right: 8rpx;
  1360. width: 8rpx;
  1361. height: 8rpx;
  1362. display: flex;
  1363. }
  1364. }
  1365. }
  1366. .form-item label {}
  1367. .form-item .input-box {
  1368. display: flex;
  1369. align-items: center;
  1370. }
  1371. .form-item .select {
  1372. flex: 1;
  1373. background: #f1f1f1;
  1374. padding: 6rpx 20rpx;
  1375. margin: 0 10rpx;
  1376. min-height: 48rpx;
  1377. line-height: 48rpx;
  1378. border-radius: 8rpx;
  1379. }
  1380. .form-item .icon {
  1381. width: 28rpx;
  1382. height: 32rpx;
  1383. }
  1384. .form-item .input-box input {
  1385. width: 90rpx;
  1386. background: #f1f1f1;
  1387. border-radius: 8rpx;
  1388. padding: 0 5rpx;
  1389. }
  1390. .form-item .sub-text {
  1391. color: #808080;
  1392. padding-left: 10rpx;
  1393. }
  1394. .form-item .sub-label {
  1395. padding: 0 10rpx;
  1396. }
  1397. .window {
  1398. padding: 60rpx 30rpx;
  1399. }
  1400. .window .window-item {
  1401. border: 1px solid #00b38b;
  1402. background: rgba(0, 179, 139, .1);
  1403. border-radius: 10rpx;
  1404. padding: 16rpx 30rpx;
  1405. font-size: 30rpx;
  1406. margin-bottom: 10rpx;
  1407. }
  1408. ::v-deep .u-input__input {
  1409. background: transparent;
  1410. }
  1411. .choice-takePhoto {
  1412. position: absolute;
  1413. bottom: 0;
  1414. background-color: white;
  1415. width: 100%;
  1416. border-radius: 20rpx 20rpx 0 0;
  1417. }
  1418. .choice-takePhoto>view:first-child {
  1419. text-align: center;
  1420. height: 80rpx;
  1421. line-height: 80rpx;
  1422. border-bottom: 1rpx solid rgba(127, 127, 127, 0.3);
  1423. background-color: white;
  1424. }
  1425. .choice-takePhoto>view:last-child {
  1426. text-align: center;
  1427. height: 80rpx;
  1428. line-height: 80rpx;
  1429. border-top: 6rpx solid rgba(127, 127, 127, 0.1);
  1430. background-color: white;
  1431. }
  1432. .choice-takePhoto>view {
  1433. text-align: center;
  1434. height: 80rpx;
  1435. line-height: 80rpx;
  1436. background-color: white;
  1437. }
  1438. .choice-takePhoto-wrap {
  1439. width: 100%;
  1440. height: 100vh;
  1441. background-color: rgba(127, 127, 127, 0.2);
  1442. position: fixed;
  1443. left: 0;
  1444. top: 0;
  1445. z-index: 11111;
  1446. }
  1447. .tractor {
  1448. font-size: 32rpx;
  1449. margin-top: 40rpx;
  1450. }
  1451. .tractor .title {
  1452. margin-right: 60rpx;
  1453. }
  1454. // .tractor .title .label {
  1455. // margin-right: 40rpx !important;
  1456. // }
  1457. .ownerRadio {
  1458. transform: scale(0.8);
  1459. /* 调整缩放比例 */
  1460. margin-right: 10rpx;
  1461. }
  1462. </style>