Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

vehicle-change-cheliangmsg-write.vue 30KB

1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
1 mês atrás
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939
  1. <template>
  2. <view class="bg">
  3. <view class="title_wrap"><text class="title">变更基本信息</text></view>
  4. <u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
  5. <u-form-item label="车牌号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
  6. borderBottom>
  7. <u-input v-model="state.form.vehiclePlate" input-align='right' disabled/>
  8. </u-form-item>
  9. <u-form-item label="车牌颜色" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
  10. borderBottom>
  11. <view class="showworld">{{getCodeName('VEHICLE_COLOR_TYPE',state.form.vehiclePlateColor)}}</view>
  12. </u-form-item>
  13. <view class="picture-wrapper" @click="takePhotoMode('3')">
  14. <view class="bg1">
  15. <view class="">
  16. <view class="name"> 新车牌行驶证主页 </view>
  17. <view class="value"> 上传行驶证的主页 </view>
  18. <view class="tip">
  19. <view class="tip-value"> 拍摄规范 </view>
  20. </view>
  21. </view>
  22. <image v-if="!state.form.vehPosImgUrl" class="icon" :src="`${$imgUrl}issuance/xz.png`"
  23. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
  24. </image>
  25. <image v-else class="icon" :src="strReplace(state.form.vehPosImgUrl)"
  26. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
  27. </view>
  28. </view>
  29. <view class="picture-wrapper" @click="takePhotoMode('4')">
  30. <view class="bg1">
  31. <view class="">
  32. <view class="name"> 新车牌行驶证副页 </view>
  33. <view class="value"> 上传行驶证的副页 </view>
  34. <view class="tip">
  35. <view class="tip-value"> 拍摄规范 </view>
  36. </view>
  37. </view>
  38. <image v-if="!state.form.vehNegImgUrl" class="icon" :src="`${$imgUrl}issuance/xf.png`"
  39. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
  40. </image>
  41. <image v-else class="icon" :src="strReplace(state.form.vehNegImgUrl)"
  42. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
  43. </view>
  44. </view>
  45. </u-form>
  46. </view>
  47. <view class="bg">
  48. <view class="title_wrap"><text class="title">以下信息选择性修改/填写</text></view>
  49. <u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
  50. <u-form-item label="变更车主姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
  51. borderBottom>
  52. <u-input v-model="state.form.ownerName" input-align='right'/>
  53. </u-form-item>
  54. <u-form-item label="变更车辆类型" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
  55. borderBottom>
  56. <u-input v-model="state.form.vehicleType" input-align='right'/>
  57. </u-form-item>
  58. <u-form-item label="变更证件类型" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
  59. borderBottom>
  60. <u-input v-model="state.form.ownerIdTypeStr" type="select" @click="show1 = true" input-align='right'/>
  61. </u-form-item>
  62. <u-form-item label="变更证件号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
  63. borderBottom>
  64. <u-input v-model="state.form.ownerIdNum" input-align='right'/>
  65. </u-form-item>
  66. <u-form-item label="变更地址" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
  67. borderBottom>
  68. <u-input v-model="state.form.ownerAddress" input-align='right'/>
  69. </u-form-item>
  70. <u-form-item label="总质量(kg)" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  71. <u-input inputAlign="right" placeholder="请输入总质量" v-model="state.form.totalMass"
  72. />
  73. </u-form-item>
  74. <u-form-item label="整备质量(kg)" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  75. <u-input inputAlign="right" placeholder="请输入整备质量" v-model="state.form.maintenaceMass"
  76. maxlength="7" />
  77. </u-form-item>
  78. <u-form-item label="变更车轴数(轴)" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  79. <u-input inputAlign="right" placeholder="请输入车轴数" v-model="state.form.axleCount"/>
  80. </u-form-item>
  81. <u-form-item label="外廓尺寸(mm)" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  82. <u-input inputAlign="right" placeholder="请输入外廓尺寸" v-model="state.form.vehicleDimensions" />
  83. </u-form-item>
  84. <u-form-item label="核定载人数(人)" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  85. <u-input inputAlign="right" placeholder="请输入核定载人数" v-model="state.form.approvedCount"
  86. maxlength="3" />
  87. </u-form-item>
  88. <u-form-item label="发动机号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  89. <u-input inputAlign="right" placeholder="请输入发动机号码" v-model="state.form.engineNum"
  90. maxlength="20" />
  91. </u-form-item>
  92. <u-form-item label="车辆识别号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  93. <u-input inputAlign="right" placeholder="请输入车辆识别号" v-model="state.form.vin"
  94. maxlength="20" />
  95. </u-form-item>
  96. <u-form-item label="是否本人办理" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
  97. <view class="right-show">
  98. <radio-group @change="radioChange">
  99. <label style="margin-right: 60rpx;" class="uni-list-cell uni-list-cell-pd "
  100. v-for="(item, index) in state.items" :key="item.value">
  101. <radio :value="item.value" :checked="index+1 === state.form.isMyselfHandle" />{{item.name}}
  102. </label>
  103. </radio-group>
  104. </view>
  105. </u-form-item>
  106. <view class="picture-wrapper" @click="cardFileImageUpdate(1)" v-if="state.form.isMyselfHandle==2">
  107. <view class="bg1">
  108. <view class="">
  109. <view class="name"> 人像面 </view>
  110. <view class="value"> 经办人身份证的人像面 </view>
  111. <view class="tip">
  112. <view class="tip-value"> 拍摄规范 </view>
  113. </view>
  114. </view>
  115. <image v-if="!state.form.ownerPosImgUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
  116. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
  117. </image>
  118. <image v-else class="icon" :src="strReplace(state.form.ownerPosImgUrl)"
  119. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
  120. </view>
  121. </view>
  122. <view class="picture-wrapper" @click="cardFileImageUpdate(2)" v-if="state.form.isMyselfHandle==2">
  123. <view class="bg1">
  124. <view class="">
  125. <view class="name"> 国徽面 </view>
  126. <view class="value"> 经办人身份证的国徽面 </view>
  127. <view class="tip">
  128. <view class="tip-value"> 拍摄规范 </view>
  129. </view>
  130. </view>
  131. <image v-if="!state.form.ownerNegImgUrl" class="icon" :src="`${$imgUrl}issuance/sff.png`"
  132. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
  133. </image>
  134. <image v-else class="icon" :src="strReplace(state.form.ownerNegImgUrl)"
  135. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
  136. </view>
  137. </view>
  138. <view class="picture-wrapper" @click="cardFileImageUpdate(3)" v-if="state.form.isMyselfHandle==2 && state.form.userType==1">
  139. <view class="bg1">
  140. <view class="">
  141. <view class="name"> 开户人授权书 </view>
  142. <view class="value"> 上传授权书 </view>
  143. <view class="tip">
  144. <view class="tip-value"> 拍摄规范 </view>
  145. </view>
  146. </view>
  147. <image v-if="!state.form.ownerLetterOfAuthorizationImgUrl" class="icon" :src="`${$imgUrl}issuance/weituo.png`"
  148. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
  149. </image>
  150. <image v-else class="icon" :src="strReplace(state.form.ownerLetterOfAuthorizationImgUrl)"
  151. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
  152. </view>
  153. </view>
  154. <view class="picture-wrapper" @click="cardFileImageUpdate(4)" v-if="state.form.isMyselfHandle==2 && state.form.userType==2">
  155. <view class="bg1">
  156. <view class="">
  157. <view class="name"> 开户人授权书 </view>
  158. <view class="value"> 上传授权书 </view>
  159. <view class="tip">
  160. <view class="tip-value"> 拍摄规范 </view>
  161. </view>
  162. </view>
  163. <image v-if="!state.form.unitAuthorizationLetterImgUrl" class="icon" :src="`${$imgUrl}issuance/weituo.png`"
  164. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
  165. </image>
  166. <image v-else class="icon" :src="strReplace(state.form.unitAuthorizationLetterImgUrl)"
  167. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
  168. </view>
  169. </view>
  170. <u-form-item label="是否牵引车" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon' v-if="state.form.vanType==2">
  171. <radio-group @change="radioChangeqyc">
  172. <view class="right-show">
  173. <label style="margin-right: 60rpx;" class="uni-list-cell uni-list-cell-pd "
  174. v-for="(item, index) in state.itemsqyc" :key="item.value">
  175. <radio :value="item.value" :checked="index === state.form.isTractor" />{{item.name}}
  176. </label>
  177. </view>
  178. </radio-group>
  179. </u-form-item>
  180. <view class="picture-wrapper" @click="cardFileImageUpdate(1)" v-if="state.form.isTractor==0 && state.form.vanType==2">
  181. <view class="bg1">
  182. <view class="">
  183. <view class="name"> 车头照 </view>
  184. <view class="value"> 变更车头照 </view>
  185. <view class="tip">
  186. <view class="tip-value"> 拍摄规范 </view>
  187. </view>
  188. </view>
  189. <image v-if="!state.form.vehFrontUrl" class="icon" :src="`${$imgUrl}issuance/chetou.png`"
  190. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
  191. </image>
  192. <image v-else class="icon" :src="strReplace(state.form.vehFrontUrl)"
  193. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
  194. </view>
  195. </view>
  196. <view class="picture-wrapper" @click="cardFileImageUpdate(1)" v-if="state.form.isTractor==0 && state.form.vanType==2">
  197. <view class="bg1">
  198. <view class="">
  199. <view class="name"> 车身照 </view>
  200. <view class="value"> 变更车身45°照 </view>
  201. <view class="tip">
  202. <view class="tip-value"> 拍摄规范 </view>
  203. </view>
  204. </view>
  205. <image v-if="!state.form.vehBodyUrl" class="icon" :src="`${$imgUrl}issuance/chetou.png`"
  206. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
  207. </image>
  208. <image v-else class="icon" :src="strReplace(state.form.vehBodyUrl)"
  209. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
  210. </view>
  211. </view>
  212. <view class="picture-wrapper" @click="cardFileImageUpdate(2)" v-if="state.form.isTractor==1">
  213. <view class="bg1">
  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.roadTransportPermitPicUrl" class="icon" :src="`${$imgUrl}issuance/chetou.png`"
  222. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
  223. </image>
  224. <image v-else class="icon" :src="strReplace(state.form.roadTransportPermitPicUrl)"
  225. :style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}"></image>
  226. </view>
  227. </view>
  228. <u-form-item label="车辆用户类型" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
  229. borderBottom>
  230. <u-input v-model="state.form.vehicleCustomerTypeName" type="select" @click="show2 = true" input-align='right'/>
  231. </u-form-item>
  232. </u-form>
  233. </view>
  234. <view class="bg">
  235. <u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
  236. <u-form-item label="手机号码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
  237. borderBottom>
  238. <u-input v-model="state.form.ownerTel" input-align='right' disabled/>
  239. </u-form-item>
  240. <u-form-item label="验证码" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'
  241. borderBottom>
  242. <view style="display: flex;align-items: center;flex-shrink: 0;">
  243. <u-input v-model="state.code" input-align='right'/>
  244. <text @click="getCode" v-if="waitTime==0" class="search">获取验证码</text>
  245. <text class="search" v-else>{{waitTime}}后重试</text>
  246. </view>
  247. </u-form-item>
  248. </u-form>
  249. </view>
  250. <view class="action">
  251. <button type="default" class="ui-btn" @click="savaHandle()">
  252. 提交
  253. </button>
  254. </view>
  255. <!-- 选择证件类型 -->
  256. <u-select v-model="show1" :list="state.ownerIdTypeRange" @confirm="changeOwnerIdType"></u-select>
  257. <!-- 车辆用户类型 -->
  258. <u-select v-model="show2" :list="state.vehicleCustomerTypeRange" @confirm="vehicleCustomerTypeType"></u-select>
  259. <view class="choice-takePhoto-wrap" v-if="state.isTakePhotoModeShow" @click="cancle">
  260. <view class="choice-takePhoto">
  261. <view @click.stop="takePhoto(state.choiceIndex)" style="border-radius: 20rpx 20rpx 0 0;">拍照</view>
  262. <view @click.stop="xiangce(state.choiceIndex)">从手机相册选择</view>
  263. <view @click.stop="cancle">取消</view>
  264. </view>
  265. </view>
  266. <viewfinder v-if="state.phoneType" :phoneType="state.phoneType" :images="state.images" :showStartPhoto="state.showImg"
  267. @confirmReturn="confirmReturn" @camera="camera"></viewfinder>
  268. </template>
  269. <script setup lang="ts">
  270. import { navTo,uploadFile,strReplace,msg,checkStr,chooseImageCompress} from "@/utils/utils";
  271. import { reactive,ref } from "vue";
  272. import carNumberInput from "@/components/car-number-input/car-number-input.vue";
  273. import { onLoad } from "@dcloudio/uni-app";
  274. import { getItem } from "@/utils/storage.ts"
  275. import {sendMessage,vehicleLicenseOcr,vehicleInformationChange,messageValid,vehicleInfoChangeApply} from "@/utils/network/api.js";
  276. import {requestNew} from "@/utils/network/request.js";
  277. import {
  278. getCodeName
  279. } from "@/datas/queryKey.js";
  280. import viewfinder from "../../../components/viewfinder.vue"
  281. import {
  282. calculateVehicleType
  283. } from "@/datas/publicRequest";
  284. const labelStyle = {
  285. color: "#004576",
  286. fontSize: "28rpx",
  287. }
  288. const leftIcon = {
  289. height: '100%',
  290. width: '8rpx',
  291. display: 'flex',
  292. 'align-items': 'center',
  293. 'margin-right': '4rpx',
  294. }
  295. const show1 = ref(false)
  296. const show2 = ref(false)
  297. const state = reactive({
  298. form: {
  299. vehiclePlate: "",
  300. vehiclePlateColor: "",
  301. vehiclePlateColorStr:"",//车牌颜色中文
  302. vehPosImgUrl:"",
  303. vehNegImgUrl:"",
  304. isVehiclePlateChange:"",//是否车牌变更 否_0,是_1
  305. ownerName:"",//车主姓名
  306. ownerAddress:"",
  307. vehicleType:"",
  308. totalMass:"",
  309. maintenaceMass:"",
  310. axleCount:"",
  311. vehicleDimensions:"",
  312. approvedCount:"",
  313. engineNum:"",
  314. vin:"",
  315. ownerIdTypeStr:"",
  316. ownerIdType:"",
  317. ownerIdNum:"",
  318. isTractor:0,//是否牵引车 否_0,是_1
  319. cardId:"",
  320. obuId:"",
  321. isMyselfHandle:1,//本人办理_1,代理人办理_2
  322. ownerTel:"",
  323. ownerNegImgUrl:"",//经办人身份证反面URL
  324. ownerPosImgUrl:"",//经办人身份证正面URL
  325. ownerLetterOfAuthorizationImgUrl:"",//开户人授权书URL
  326. unitAuthorizationLetterImgUrl:"",//单位授权书URL
  327. vehFrontUrl:"",//车头照图片地址
  328. vehBodyUrl:"",//车身45度照图片地址
  329. roadTransportPermitPicUrl:"",//道路运输许可证图片地址(牵引车才提供)
  330. vehicleCustomerType: 0, //车辆用户类型
  331. vehicleCustomerTypeName: "普通车",
  332. vanType:1,//客货类型,1-客车 2-货车 3-作业车
  333. vehicleTypeNew:1,//收费车型(按新输入的值计算)[变更车辆类型]
  334. vehPosImgOcrId:"",//行驶证正面orcId
  335. vehNegImgOcrId:"",//行驶证反面orcId
  336. userType:1,//1个人 2单位
  337. },
  338. ownerIdTypeRange: [],
  339. isTakePhotoModeShow: false, //选择拍照方式是否出来
  340. choiceIndex: 1, // 1 身份证正面 2 身份证反面
  341. ownerInfo:false,//非本人 个人 车主信息true ==== 本人 个人 false
  342. phoneType: 0, // 1 身份证正面 2 身份证反面 3行驶证正面 4行驶证反面
  343. images: '',
  344. showImg: true,
  345. vehicleId:"",
  346. code:"",
  347. items: [{
  348. value: 1,
  349. name: '是',
  350. checked: 'true'
  351. },
  352. {
  353. value: 2,
  354. name: '否',
  355. }],
  356. itemsqyc: [{
  357. value: 0,
  358. name: '否',
  359. checked: 'true'
  360. },
  361. {
  362. value: 1,
  363. name: '是',
  364. }],
  365. vehicleCustomerTypeRange:[]
  366. })
  367. onLoad((option : any) => {
  368. state.form.isVehiclePlateChange=option.isVehiclePlateChange
  369. state.form.vehiclePlate=option.vehicleId.split("_")[0]
  370. state.form.vehiclePlateColor=option.vehicleId.split("_")[1]
  371. state.vehicleId=option.vehicleId
  372. state.form.cardId=option.cardId
  373. state.form.obuId=option.obuId
  374. let type = getItem('key')['CERTIFICATE_TYPE'];
  375. for (var k = 0; k < type.length; k++) {
  376. let obj = {};
  377. obj['value'] = type[k]['code']
  378. obj['label'] = type[k]['name']
  379. state.ownerIdTypeRange.push(obj)
  380. }
  381. getCarDetails()
  382. console.log("state.ownerIdTypeRange",state.ownerIdTypeRange,option)
  383. });
  384. const getCarDetails = () => {
  385. const options = {
  386. type: 2,
  387. data: {
  388. vehicleId:state.vehicleId
  389. },
  390. method: "POST",
  391. showLoading: true,
  392. };
  393. //调用方式
  394. requestNew(vehicleInformationChange, options)
  395. .then((res) => {
  396. console.log('车辆信息', res)
  397. state.form.ownerName=res.info.ownerName
  398. state.form.ownerAddress=res.info.ownerAddress
  399. state.form.vehicleType=res.info.vehicleType
  400. // 判断客货类型
  401. judgeVanType()
  402. state.form.totalMass=res.info.totalMass
  403. state.form.maintenaceMass=res.info.maintenaceMass
  404. state.form.axleCount=res.info.axleCount
  405. state.form.vehicleDimensions=res.info.vehicleDimensions.slice(0,-2)
  406. state.form.approvedCount=res.info.approvedCount
  407. state.form.engineNum=res.info.engineNum
  408. state.form.vin=res.info.vin
  409. state.form.vehicleCustomerType=res.info.vehicleCustomerType
  410. state.form.ownerTel=res.info.customerInfo.customerTel
  411. state.form.userType=res.userType
  412. // 计算收费车型
  413. calculateVehicleType(state.form.approvedCount,state.form.axleCount,state.form.vehicleDimensions,state.form.totalMass,state.form.vanType, function (res) {
  414. state.form.vehicleTypeNew=res
  415. });
  416. // 判断车辆用户类型
  417. judgeUseUserType()
  418. })
  419. .catch((err) => {
  420. console.log(err);
  421. });
  422. }
  423. // 判断客货类型
  424. const judgeVanType=()=>{
  425. if(state.form.vehicleType.indexOf('客车') || state.form.vehicleType.indexOf('轿车')){
  426. state.form.vanType=1
  427. state.form.isTractor = 0
  428. }else if(state.form.vehicleType.indexOf('牵引车') || state.form.vehicleType.indexOf('货车') || state.form.vehicleType.indexOf('挂车')){
  429. state.form.vanType=2
  430. state.form.isTractor = 1;
  431. }else{
  432. state.form.vanType=3
  433. }
  434. }
  435. // 判断车辆用户类型
  436. const judgeUseUserType=()=>{
  437. if(state.form.vanType==1){
  438. state.vehicleCustomerTypeRange=[
  439. {
  440. 'value':0,
  441. 'label':"普通车"
  442. }
  443. ]
  444. }else{
  445. state.vehicleCustomerTypeRange=[
  446. {
  447. 'value':0,
  448. 'label':"普通车"
  449. },
  450. {
  451. 'value': "道路运输证经营范围仅有“货物专用运输(集装箱) ”的牵引车办理J类型集装箱",
  452. 'label': 24,
  453. },
  454. {
  455. 'value': "道路运输证经营范围不含“货物专用运输(集装箱)”的牵引车",
  456. 'label': 27,
  457. },
  458. {
  459. 'value': '道路运输证经营范围除“货物专用运输 (集装 箱)"外,还有“普通货运”等其他项目的牵引车办理J2类型集装箱',
  460. 'label': 28,
  461. }
  462. ]
  463. }
  464. }
  465. const checkCodeRequest = () => {
  466. if(!state.code){
  467. msg("请输入验证码");
  468. return;
  469. }
  470. const options = {
  471. type: 2,
  472. data: {
  473. mobile: state.form.ownerTel,
  474. code: state.code
  475. },
  476. method: "POST",
  477. showLoading: true,
  478. };
  479. return new Promise(async (resolve, reject) => {
  480. const res = await requestNew(messageValid, options);
  481. const data = res;
  482. resolve(data);
  483. }).catch((error) => {
  484. reject(error);
  485. });
  486. }
  487. //车牌号输入
  488. const carNumber = (val : any) => {
  489. state.form.vehiclePlate = val.trim();
  490. };
  491. const savaHandle = () => {
  492. if(!state.form.vehPosImgUrl){
  493. msg("请上传行驶证主页");
  494. return;
  495. }
  496. if(!state.form.vehNegImgUrl){
  497. msg("请上传行驶证副页");
  498. return;
  499. }
  500. if(!state.form.ownerName){
  501. msg("请输入变更车主姓名");
  502. return;
  503. }
  504. if(!state.form.vehicleType){
  505. msg("请输入变更车辆类型");
  506. return;
  507. }
  508. if(!state.form.ownerIdTypeStr){
  509. msg("请选择变更证件类型");
  510. return;
  511. }
  512. if(!checkStr(state.form.ownerIdNum, "card")){
  513. msg("请输入正确变更证件号码");
  514. return;
  515. }
  516. if(!state.form.ownerAddress){
  517. msg("请输入变更地址");
  518. return;
  519. }
  520. if(!state.form.totalMass){
  521. msg("请输入总质量");
  522. return;
  523. }
  524. if(!state.form.maintenaceMass){
  525. msg("请输入整备质量");
  526. return;
  527. }
  528. if(!state.form.axleCount){
  529. msg("请输入车轴数");
  530. return;
  531. }
  532. if(!state.form.vehicleDimensions){
  533. msg("请输入外廓尺寸");
  534. return;
  535. }
  536. if(!state.form.approvedCount){
  537. msg("请输入核定载人数");
  538. return;
  539. }
  540. if(!state.form.engineNum){
  541. msg("请输入发动机号码");
  542. return;
  543. }
  544. if(!state.form.vin){
  545. msg("请输入车辆识别号");
  546. return;
  547. }
  548. // 测完放开
  549. // checkCodeRequest().then((val : any) => {
  550. const options = {
  551. type: 2,
  552. data: {
  553. ...state.form
  554. },
  555. method: "POST",
  556. showLoading: true,
  557. };
  558. //调用方式
  559. requestNew(vehicleInfoChangeApply, options)
  560. .then((res) => {
  561. console.log("res",res)
  562. msg(res.msg)
  563. setTimeout(() => {
  564. uni.navigateBack({
  565. delta: 2
  566. })
  567. }, 2000)
  568. })
  569. .catch((err) => {
  570. console.log(err);
  571. });
  572. // })
  573. }
  574. const changeOwnerIdType = (item) => {
  575. state.form.ownerIdType = item[0].value
  576. state.form.ownerIdTypeStr = item[0].label
  577. console.log(item)
  578. }
  579. const vehicleCustomerTypeType = (item) => {
  580. state.form.vehicleCustomerType = item[0].value
  581. state.form.vehicleCustomerTypeName = item[0].label
  582. console.log(item)
  583. }
  584. const takePhotoMode = (index) => {
  585. console.log("index", index)
  586. state.isTakePhotoModeShow = true
  587. state.choiceIndex = index
  588. }
  589. // val 1 经办人身份证正面URL 2 办人身份证反面URL 3开户人授权书URL
  590. const cardFileImageUpdate = (val) => {
  591. uni.chooseImage({
  592. count: 1, //只能选取一张照片
  593. sizeType: ["original", "compressed"], //可以指定是原图还是压缩图,默认二者都有
  594. sourceType: ["camera", "album"], //从相册选择
  595. success: function (res) {
  596. uploadFile(res.tempFilePaths[0], "", "").then((data) => {
  597. if (val == 1) {
  598. state.form.ownerPosImgUrl = data;
  599. } else if(val == 2) {
  600. state.form.ownerNegImgUrl = data;
  601. }else if(val == 3) {
  602. state.form.ownerLetterOfAuthorizationImgUrl = data;
  603. }else if(val == 4) {
  604. state.form.unitAuthorizationLetterImgUrl = data;
  605. }
  606. })
  607. },
  608. });
  609. };
  610. let waitTime = ref(0)
  611. //倒计时函数
  612. const codeInterval = () => {
  613. waitTime.value = 60
  614. let timer = setInterval(() => {
  615. if (waitTime.value == 1) {
  616. clearInterval(timer)
  617. }
  618. waitTime.value -= 1
  619. }, 1000)
  620. }
  621. const getCode = () => {
  622. console.log(123);
  623. if (checkStr(state.form.ownerTel, "mobile")) {
  624. sendCodeApi()
  625. codeInterval()
  626. } else {
  627. uni.showToast({
  628. title: '请输入正确的手机号',
  629. icon: 'none'
  630. });
  631. }
  632. }
  633. // 发送验证码
  634. const sendCodeApi = () => {
  635. //参数说明
  636. let options = {
  637. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  638. data: {
  639. mobile: state.form.ownerTel
  640. }, //请求参数
  641. method: "POST", //提交方式(默认POST)
  642. showLoading: true, //是否显示加载中(默认显示)
  643. };
  644. //调用方式
  645. requestNew(sendMessage, options)
  646. .then((res) => {
  647. let data = res
  648. console.log(data, "#################");
  649. if (data.info == "成功") {
  650. msg("发送成功")
  651. console.log('######################CCCCCCCCCCCCCCCCC');
  652. }
  653. })
  654. .catch((err) => {
  655. console.log(err);
  656. });
  657. }
  658. const cancle = () => {
  659. state.isTakePhotoModeShow = false
  660. }
  661. const takePhoto = (val) => {
  662. console.log("拍照", val)
  663. state.phoneType = val;
  664. state.showImg = true;
  665. }
  666. const xiangce = (val) => {
  667. console.log("val", val)
  668. if (state.choiceIndex == 3) {
  669. var imageType = 1;
  670. } else {
  671. var imageType = 2;
  672. }
  673. chooseImageCompress((res) => {
  674. state.images = res.tempFilePath ? res.tempFilePath : res.tempFilePaths[0]
  675. state.showImg = false
  676. state.phoneType = state.choiceIndex
  677. state.isTakePhotoModeShow = false
  678. console.log("res==",res,state.choiceIndex,state.images)
  679. })
  680. }
  681. const confirmReturn = (val) => {
  682. console.log("进来了")
  683. if (state.choiceIndex == 3) {
  684. var imageType = 1;
  685. } else {
  686. var imageType = 2;
  687. }
  688. state.phoneType = 0
  689. state.isTakePhotoModeShow = false
  690. uploadFile(val.tempImagePath, imageType, vehicleLicenseOcr).then((data) => {
  691. console.log('输出内容=====================', state.choiceIndex)
  692. if (state.choiceIndex == 3) {
  693. state.form.ownerName = data.man;
  694. state.form.ownerAddress = data.address;
  695. state.form.vehicleType = data.vehicle;
  696. state.form.vin = data.vin;
  697. state.form.engineNum = data.engine;
  698. state.form.vehPosImgUrl = data.imageUrl;
  699. state.form.vehPosImgOcrId = data.ocrResultId;
  700. // 判断客货类型
  701. judgeVanType()
  702. } else {
  703. state.form.approvedCount = data.apc.slice(0,-1);
  704. state.form.maintenaceMass = data.unladen.slice(0,-2);
  705. let overall=data.overall.replaceAll("x", "X")
  706. state.form.vehicleDimensions = overall.slice(0,-2);
  707. state.form.totalMass = data.gross ? data.gross.slice(0,-2) : 0;
  708. state.form.vehNegImgUrl = data.imageUrl;
  709. state.form.vehNegImgOcrId = data.ocrResultId;
  710. // 计算收费车型
  711. calculateVehicleType(state.form.approvedCount,state.form.axleCount,state.form.vehicleDimensions,state.form.totalMass,state.form.vanType, function (res) {
  712. state.form.vehicleTypeNew=res
  713. });
  714. // 判断车辆用户类型
  715. judgeUseUserType()
  716. console.log('=====================', state.form.vehNegImgUrl, state)
  717. }
  718. state.isTakePhotoModeShow = false
  719. })
  720. console.log("图片地址val", val.tempImagePath)
  721. }
  722. const camera = () => {
  723. state.phoneType = 0
  724. }
  725. const radioChange = (evt) => {
  726. console.log("evt.detail.value", evt.detail.value)
  727. for (let i = 0; i < state.items.length; i++) {
  728. if (state.items[i].value == evt.detail.value) {
  729. state.form.isMyselfHandle = i+1;
  730. break;
  731. }
  732. }
  733. console.log("state.form.isMyselfHandle", state.form.isMyselfHandle)
  734. }
  735. const radioChangeqyc = (evt) => {
  736. console.log("evt.detail.value", evt.detail.value)
  737. for (let i = 0; i < state.itemsqyc.length; i++) {
  738. if (state.items[i].value == evt.detail.value) {
  739. state.form.isTractor = i;
  740. break;
  741. }
  742. }
  743. console.log("state.form.isTractor", state.form.isTractor)
  744. }
  745. </script>
  746. <style lang="scss" scoped>
  747. .bg {
  748. background-color: white;
  749. width: 90%;
  750. margin: 0 auto;
  751. margin-top: 20rpx;
  752. border-radius: 12px;
  753. border: 1px solid #FFFFFF;
  754. padding: 30rpx 20rpx;
  755. overflow: hidden;
  756. box-sizing: border-box;
  757. .title_wrap {
  758. display: flex;
  759. font-weight: 400;
  760. justify-content: space-between;
  761. .title {
  762. font-size: 30rpx;
  763. color: #01243A;
  764. }
  765. }
  766. .des {
  767. font-weight: 400;
  768. font-size: 28rpx;
  769. color: #01243A;
  770. line-height: 56rpx;
  771. margin-top: 10rpx;
  772. text-indent: 1rem;
  773. }
  774. }
  775. .action {
  776. position: absolute;
  777. left: 0;
  778. height: 160rpx;
  779. background-color: #fff;
  780. border-radius: 30rpx 30rpx 0 0;
  781. width: 100vw;
  782. display: flex;
  783. align-items: center;
  784. justify-content: center;
  785. flex-direction: column;
  786. margin-top: 20rpx;
  787. }
  788. .card{
  789. display: flex;
  790. align-items: center;
  791. image{
  792. width: 120rpx;
  793. height: 120rpx;
  794. margin-right: 20rpx;
  795. }
  796. .details view:first-child{
  797. margin-bottom: 10rpx;
  798. }
  799. }
  800. .picture-wrapper {
  801. margin-top: 30rpx;
  802. .bg1 {
  803. background: #F5F9FB;
  804. border-radius: 10rpx;
  805. padding: 40rpx 30rpx;
  806. display: flex;
  807. justify-content: space-between;
  808. .name {
  809. padding-top: 30rpx;
  810. font-size: 32rpx;
  811. font-family: SourceHanSansSC, SourceHanSansSC;
  812. font-weight: 500;
  813. color: #111;
  814. line-height: 34rpx;
  815. }
  816. .value {
  817. margin-top: 20rpx;
  818. font-size: 22rpx;
  819. font-family: SourceHanSansSC, SourceHanSansSC;
  820. font-weight: 400;
  821. color: #999999;
  822. line-height: 24rpx;
  823. }
  824. .tip {
  825. margin-top: 20rpx;
  826. text-align: center;
  827. width: 100rpx;
  828. height: 30rpx;
  829. border-radius: 6rpx;
  830. border: 1rpx solid #CCB375;
  831. .tip-value {
  832. font-size: 20rpx;
  833. font-family: Microsoft YaHei;
  834. font-weight: 400;
  835. color: #CCB375;
  836. line-height: 30rpx;
  837. opacity: 1;
  838. }
  839. }
  840. }
  841. .icon {
  842. width: 304rpx;
  843. height: 190rpx;
  844. background-image: var(--bgimg);
  845. background-size: 100% 100%;
  846. background-repeat: no-repeat;
  847. }
  848. }
  849. .search{
  850. background: #F8F4E7;
  851. border-radius: 10rpx;
  852. border: 1px solid #CCB375;
  853. font-size: 24rpx;
  854. color: #CCB375;
  855. padding: 0rpx 14rpx;
  856. flex-shrink: 0;
  857. height: 60rpx;
  858. line-height: 60rpx;
  859. margin-left: 20rpx;
  860. }
  861. .showworld{
  862. display: flex;
  863. justify-content: flex-end;
  864. }
  865. .choice-takePhoto-wrap {
  866. width: 100%;
  867. height: 100vh;
  868. background-color: rgba(127, 127, 127, 0.2);
  869. position: fixed;
  870. left: 0;
  871. top: 0;
  872. z-index: 11111;
  873. .choice-takePhoto {
  874. position: absolute;
  875. bottom: 0;
  876. background-color: white;
  877. width: 100%;
  878. border-radius: 20rpx 20rpx 0 0;
  879. }
  880. .choice-takePhoto>view:first-child {
  881. text-align: center;
  882. height: 80rpx;
  883. line-height: 80rpx;
  884. border-bottom: 1rpx solid rgba(127, 127, 127, 0.3);
  885. background-color: white;
  886. }
  887. .choice-takePhoto>view:last-child {
  888. text-align: center;
  889. height: 80rpx;
  890. line-height: 80rpx;
  891. border-top: 6rpx solid rgba(127, 127, 127, 0.1);
  892. background-color: white;
  893. }
  894. .choice-takePhoto>view {
  895. text-align: center;
  896. height: 80rpx;
  897. line-height: 80rpx;
  898. background-color: white;
  899. }
  900. }
  901. .right-show{
  902. display: flex;
  903. justify-content: flex-end;
  904. }
  905. </style>