Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

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