addVehicle.vue 55 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653
  1. <!-- 管理车辆 -->
  2. <template>
  3. <view @click='hidden' class="content">
  4. <view class="flex s-row container">
  5. <view class="flex row">
  6. <view class="left-text">车型</view>
  7. <view class="color" @click="selectCarModel">{{dataDetails.carCategory}} {{dataDetails.carType}}</view>
  8. <view>></view>
  9. <u-picker :show="carModel" :columns="carModelColumns" :closeOnClickOverlay='true' @close='carModelClose'
  10. @cancel='carModelClose' @confirm='confirmCarModel' @change="changeCarModel"></u-picker>
  11. </view>
  12. <view class="title">道路运输证</view>
  13. <view @click="uploadImg(8)" class="picture picture8" v-if="!dataDetails.operationCertificate">
  14. <image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
  15. <view class="text">上传道路运输证</view>
  16. </view>
  17. <view v-if="dataDetails.operationCertificate" @click.stop="uploadImg(8)" class="preview-card-img picture">
  18. <view @click.stop="delCard(1)">
  19. <image class='del-card' src="@/static/images/common/quxiao@2x.png">
  20. </image>
  21. </view>
  22. <image class="" :src="dataDetails.operationCertificate" mode="aspectFit"></image>
  23. </view>
  24. <view class="flex row">
  25. <view class="left-text">道路运输证号</view>
  26. <u--input maxlength='12' placeholder="输入道路运输证号" inputAlign='right' border="none"
  27. v-model="dataDetails.operationCertificateNumber">
  28. </u--input>
  29. </view>
  30. <view class="flex row flex-space-between">
  31. <view class="left-text">道路运输证有效期</view>
  32. <view class="" @click="selectValidityPeriod(4)">
  33. <view :style="{'color':dataDetails.operationCertificateValidityDate?'#000':'rgb(192, 196, 204)'}">
  34. {{dataDetails.operationCertificateValidityDate?dataDetails.operationCertificateValidityDate:'选择有效期'}}
  35. <image v-if='!dataDetails.operationCertificateValidityDate' style='width:12px;height:12px;' src="../../../static/right.png" mode=""></image>
  36. </view>
  37. </view>
  38. </view>
  39. <view v-if="sign == '挂车'">
  40. <view class="title">挂车道路运输证</view>
  41. <view @click="uploadImg(9)" class="picture picture9" v-if="!dataDetails.trailerOperationCertificate">
  42. <image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
  43. <view class="text">上传挂车道路运输证</view>
  44. </view>
  45. <view v-if="dataDetails.trailerOperationCertificate" @click.stop="uploadImg(9)"
  46. class="preview-card-img picture">
  47. <view @click.stop="delCard(2)">
  48. <image class='del-card' src="@/static/images/common/quxiao@2x.png">
  49. </image>
  50. </view>
  51. <image class="" :src="dataDetails.trailerOperationCertificate" mode="aspectFit"></image>
  52. </view>
  53. </view>
  54. <view class="flex row" v-if="sign == '挂车'">
  55. <view class="left-text">挂车道路运输证号</view>
  56. <u--input maxlength='12' placeholder="输入挂车道路运输证号" inputAlign='right' border="none"
  57. v-model="dataDetails.trailerOperationCertificateNumber">
  58. </u--input>
  59. </view>
  60. <view class="flex row flex-space-between" v-if="sign == '挂车'">
  61. <view class="left-text">挂车道路运输证有效期</view>
  62. <view class="" @click="selectValidityPeriod(5)">
  63. <view :style="{'color':dataDetails.trailerOperationCertificateValidityDate?'#000':'rgb(192, 196, 204)'}">
  64. {{dataDetails.trailerOperationCertificateValidityDate?dataDetails.trailerOperationCertificateValidityDate:'选择有效期'}}
  65. <image v-if='!dataDetails.trailerOperationCertificateValidityDate' style='width:12px;height:12px;' src="../../../static/right.png" mode=""></image>
  66. </view>
  67. </view>
  68. </view>
  69. <view class="title" v-if="sign == '挂车'">牵引车行驶证主页</view>
  70. <view class="title" v-if="sign == '非挂车'">行驶证主页</view>
  71. <view @click="uploadImg(3)" class="picture picture3" v-if="!dataDetails.drivingLicenseHomePage">
  72. <image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
  73. <view class="text" v-if="sign == '挂车'">上传牵引车行驶证主页</view>
  74. <view class="text" v-else>上传行驶证主页</view>
  75. </view>
  76. <view v-if="dataDetails.drivingLicenseHomePage" @click.stop="uploadImg(3)" class="preview-card-img picture">
  77. <view @click.stop="delCard(3)">
  78. <image class='del-card' src="@/static/images/common/quxiao@2x.png">
  79. </image>
  80. </view>
  81. <image class="" :src="dataDetails.drivingLicenseHomePage" mode="aspectFit"></image>
  82. </view>
  83. <view class="title" v-if="sign == '挂车'">牵引车行驶证副页</view>
  84. <view class="title" v-if="sign == '非挂车'">行驶证副页</view>
  85. <view @click="uploadImg(4)" class="picture picture4" v-if="!dataDetails.drivingLicenseBackPage">
  86. <image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
  87. <view class="text" v-if="sign == '挂车'">上传牵引车行驶证副页</view>
  88. <view class="text" v-else>上传行驶证副页</view>
  89. </view>
  90. <view v-if="dataDetails.drivingLicenseBackPage" @click.stop="uploadImg(4)" class="preview-card-img picture">
  91. <view @click.stop="delCard(4)">
  92. <image class='del-card' src="@/static/images/common/quxiao@2x.png">
  93. </image>
  94. </view>
  95. <image class="" :src="dataDetails.drivingLicenseBackPage" mode="aspectFit"></image>
  96. </view>
  97. <view class="flex row flex-space-between">
  98. <view class="left-text">行驶证车辆类型</view>
  99. <u--input maxlength='10' placeholder="输入行驶证上的车辆类型" inputAlign='right' border="none"
  100. v-model="dataDetails.vehicleType">
  101. </u--input>
  102. </view>
  103. <view class="flex row flex-space-between">
  104. <view class="left-text">行驶证档案编号</view>
  105. <u--input maxlength='12' placeholder="输入行驶证档案编号" inputAlign='right' border="none"
  106. v-model="dataDetails.drivingLicenseNumber">
  107. </u--input>
  108. </view>
  109. <view class="flex row flex-space-between">
  110. <view class="left-text">注册日期</view>
  111. <view class="" @click="selectValidityPeriod(6)">
  112. <view :style="{'color':dataDetails.drivingLicenseRegistrationDate?'#000':'rgb(192, 196, 204)'}">
  113. {{dataDetails.drivingLicenseRegistrationDate?dataDetails.drivingLicenseRegistrationDate:'选择注册日期'}}
  114. <image v-if='!dataDetails.drivingLicenseRegistrationDate' style='width:12px;height:12px;' src="../../../static/right.png" mode=""></image>
  115. </view>
  116. </view>
  117. </view>
  118. <view class="flex row flex-space-between">
  119. <view class="left-text">发证日期</view>
  120. <view class="" @click="selectValidityPeriod(7)">
  121. <view :style="{'color':dataDetails.drivingLicenseIssueDate?'#000':'rgb(192, 196, 204)'}">
  122. {{dataDetails.drivingLicenseIssueDate?dataDetails.drivingLicenseIssueDate:'选择发证日期'}}
  123. <image v-if='!dataDetails.drivingLicenseIssueDate' style='width:12px;height:12px;' src="../../../static/right.png" mode=""></image>
  124. </view>
  125. </view>
  126. </view>
  127. <view class="flex row flex-space-between">
  128. <view class="left-text">行驶证有效期</view>
  129. <view class="" @click="selectValidityPeriod(1)">
  130. <view :style="{'color':dataDetails.drivingLicenseValidityDate?'#000':'rgb(192, 196, 204)'}">
  131. {{dataDetails.drivingLicenseValidityDate?dataDetails.drivingLicenseValidityDate:'选择有效截止日期'}}
  132. <image v-if='!dataDetails.drivingLicenseValidityDate' style='width:12px;height:12px;' src="../../../static/right.png" mode=""></image>
  133. </view>
  134. </view>
  135. </view>
  136. <view class="flex row flex-space-between">
  137. <view class="left-text">使用性质</view>
  138. <u--input placeholder="输入使用性质" inputAlign='right' border="none" v-model="dataDetails.useNature"
  139. disabled>
  140. </u--input>
  141. </view>
  142. <view class="flex row flex-space-between">
  143. <view class="left-text">发证机关</view>
  144. <u--input placeholder="输入发证机关" inputAlign='right' border="none" maxlength="25" v-model="dataDetails.lssuingAuthority">
  145. </u--input>
  146. </view>
  147. <view class="flex row noborder">
  148. <view class="left-text">车辆能源类型</view>
  149. <view style='text-align:right;width:50%;' class="" @click="driveType">
  150. <view :style="{'color':dataDetails.energyType?'#000':'rgb(192, 196, 204)'}">
  151. {{dataDetails.energyType?dataDetails.energyType:'选择车辆能源类型'}}
  152. <image v-if='!dataDetails.energyType' style='width:12px;height:12px;' src="../../../static/right.png" mode=""></image>
  153. </view>
  154. <!-- {{dataDetails.energyType?dataDetails.energyType:'选择车辆能源类型>'}}> -->
  155. </view>
  156. </view>
  157. <view class="" v-if="sign == '挂车'">
  158. <view class="title">挂车行驶证主页</view>
  159. <view @click="uploadImg(5)" class="picture picture5" v-if="!dataDetails.trailerLicenseHomePage">
  160. <image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
  161. <view class="text">上传挂车行驶证主页</view>
  162. </view>
  163. <view v-if="dataDetails.trailerLicenseHomePage" @click.stop="uploadImg(5)"
  164. class="preview-card-img picture">
  165. <view @click.stop="delCard(5)">
  166. <image class='del-card' src="@/static/images/common/quxiao@2x.png">
  167. </image>
  168. </view>
  169. <image class="" :src="dataDetails.trailerLicenseHomePage" mode="aspectFit"></image>
  170. </view>
  171. </view>
  172. <view v-if="sign == '挂车'">
  173. <view class="title">挂车行驶证副页</view>
  174. <view @click="uploadImg(6)" class="picture picture6" v-if="!dataDetails.trailerLicenseBackPage">
  175. <image class="xj-image" src="@/static/images/mine/ic_shanchuan@2x.png"></image>
  176. <view class="text">上传挂车行驶证副页</view>
  177. </view>
  178. <view v-if="dataDetails.trailerLicenseBackPage" @click.stop="uploadImg(6)"
  179. class="preview-card-img picture">
  180. <view @click.stop="delCard(6)">
  181. <image class='del-card' src="@/static/images/common/quxiao@2x.png">
  182. </image>
  183. </view>
  184. <image class="" :src="dataDetails.trailerLicenseBackPage" mode="aspectFit"></image>
  185. </view>
  186. </view>
  187. <view class="flex row flex-space-between" v-if="sign == '挂车'">
  188. <view class="left-text">挂车行驶证档案编号</view>
  189. <u--input maxlength='12' placeholder="输入挂车行驶证档案编号" inputAlign='right' border="none"
  190. v-model="dataDetails.trailerLicenseNumber">
  191. </u--input>
  192. </view>
  193. <view class="flex row flex-space-between" v-if="sign == '挂车'">
  194. <view class="left-text">注册日期</view>
  195. <view class="" @click="selectValidityPeriod(8)">
  196. <view :style="{'color':dataDetails.trailerLicenseRegistrationDate?'#000':'rgb(192, 196, 204)'}">
  197. {{dataDetails.trailerLicenseRegistrationDate?dataDetails.trailerLicenseRegistrationDate:'选择注册日期'}}
  198. <image v-if='!dataDetails.trailerLicenseRegistrationDate' style='width:12px;height:12px;' src="../../../static/right.png" mode=""></image>
  199. </view>
  200. <!-- {{dataDetails.trailerLicenseRegistrationDate?dataDetails.trailerLicenseRegistrationDate:'选择注册日期>'}} -->
  201. </view>
  202. </view>
  203. <view class="flex row flex-space-between" v-if="sign == '挂车'">
  204. <view class="left-text">发证日期</view>
  205. <view class="" @click="selectValidityPeriod(9)">
  206. <view :style="{'color':dataDetails.trailerLicenseIssueDate?'#000':'rgb(192, 196, 204)'}">
  207. {{dataDetails.trailerLicenseIssueDate?dataDetails.trailerLicenseIssueDate:'选择发证日期'}}
  208. <image v-if='!dataDetails.trailerLicenseIssueDate' style='width:12px;height:12px;' src="../../../static/right.png" mode=""></image>
  209. </view>
  210. <!-- {{dataDetails.trailerLicenseIssueDate?dataDetails.trailerLicenseIssueDate:'选择发证日期>'}} -->
  211. </view>
  212. </view>
  213. <view class="flex row flex-space-between" v-if="sign == '挂车'">
  214. <view class="left-text">挂车行驶证有效期</view>
  215. <view class="" @click="selectValidityPeriod(2)">
  216. <view :style="{'color':dataDetails.trailerLicenseValidityDate?'#000':'rgb(192, 196, 204)'}">
  217. {{dataDetails.trailerLicenseValidityDate?dataDetails.trailerLicenseValidityDate:'选择有效截止日期'}}
  218. <image v-if='!dataDetails.trailerLicenseValidityDate' style='width:12px;height:12px;' src="../../../static/right.png" mode=""></image>
  219. </view>
  220. <!-- {{dataDetails.trailerLicenseValidityDate?dataDetails.trailerLicenseValidityDate:'选择有效截止日期>'}} -->
  221. </view>
  222. </view>
  223. <view class="flex row flex-space-between" v-if="sign == '挂车'">
  224. <view class="left-text">使用性质</view>
  225. <u--input placeholder="输入使用性质" inputAlign='right' border="none" v-model="dataDetails.guaUseNature"
  226. disabled>
  227. </u--input>
  228. </view>
  229. <view class="flex row flex-space-between" v-if="sign == '挂车'">
  230. <view class="left-text">发证机关</view>
  231. <u--input placeholder="输入发证机关" inputAlign='right' border="none" maxlength="25"
  232. v-model="dataDetails.guaLssuingAuthority">
  233. </u--input>
  234. </view>
  235. <!-- 牵引车 -->
  236. <view class="flex row" v-if="sign == '挂车'">
  237. <view class="left left-text">牵引车车牌号</view>
  238. <view class="right flex">
  239. <input class="car-uumber" v-model='dataDetails.carNumber' @click.stop="handleShowKeyboard(index)"
  240. :disabled="true" placeholder="输入牵引车车牌号" name="input"></input>
  241. </view>
  242. </view>
  243. <view class="flex row" v-if="sign == '非挂车'">
  244. <view class="left left-text">车牌号</view>
  245. <view class="right flex">
  246. <input class="car-uumber" v-model='dataDetails.carNumber' @click.stop="handleShowKeyboard(index)"
  247. :disabled="true" placeholder="输入车牌号" name="input"></input>
  248. </view>
  249. </view>
  250. <view class="flex row flex-space-between">
  251. <view class="left-text">车牌颜色</view>
  252. <view class='flex'>
  253. <view class="color" @click="selectNoColor">{{dataDetails.carNumberColour}}</view>
  254. <view>
  255. <image v-if='!dataDetails.carNumberColour' style='width:12px;height:12px;' src="../../../static/right.png" mode=""></image></view>
  256. </view>
  257. </view>
  258. <view class="flex row">
  259. <view class="left-text">车辆所属车主</view>
  260. <input style='text-align:right;' placeholder="输入车主姓名" v-model="dataDetails.owner" type="text">
  261. <!-- <u--input inputAlign='left' border="none"> -->
  262. <!-- </u--input> -->
  263. </view>
  264. <view class="flex row" v-if="sign == '非挂车'">
  265. <view class="left-text">总质量(千克)</view>
  266. <u--input type='number' placeholder="输入总质量" inputAlign='right' border="none" v-model="dataDetails.carTotalWeight">
  267. </u--input>
  268. </view>
  269. <view class="flex row" v-if="sign == '非挂车'">
  270. <view class="left-text">核定载质量(千克)</view>
  271. <u--input placeholder="输入核定载质量" inputAlign='left' border="none" v-model="dataDetails.carApprovedWeight">
  272. </u--input>
  273. </view>
  274. <view class="flex row" v-if="sign == '挂车'">
  275. <view class="left-text">整备质量(千克)</view>
  276. <u--input type='number' placeholder="输入整备质量" inputAlign='right' border="none" v-model="dataDetails.servicingWeight">
  277. </u--input>
  278. </view>
  279. <view class="flex row noborder" v-if="sign == '挂车'">
  280. <view style='width:390rpx;' class="left-text">牵引车外廓尺寸(毫米)</view>
  281. </view>
  282. <view class="flex row noborder" v-if="sign == '非挂车'">
  283. <view class="left-text">外廓尺寸(毫米)</view>
  284. </view>
  285. <view class="flex row noborder input-ckg">
  286. <view class="input-positon">
  287. <!-- <input type='number' class="input" placeholder="长" border="none"
  288. v-model="dataDetails.carLong"> -->
  289. <u--input type='number' class="input" placeholder="长" inputAlign='left' border="none"
  290. v-model="dataDetails.carLong">
  291. </u--input>
  292. <view class="position-right">
  293. mm
  294. </view>
  295. </view>
  296. <view class="star">*</view>
  297. <view class="input-positon">
  298. <!-- <input type='number' class="input" placeholder="宽" border="none"
  299. v-model="dataDetails.carWidth"> -->
  300. <u--input type='number' placeholder="宽" inputAlign='left' border="none" v-model="dataDetails.carWidth">
  301. </u--input>
  302. <view class="position-right">
  303. mm
  304. </view>
  305. </view>
  306. <view class="star">*</view>
  307. <view class="input-positon">
  308. <!-- <input type='number' class="input" placeholder="高" border="none"
  309. v-model="dataDetails.carHeight"> -->
  310. <u--input type='number' placeholder="高" inputAlign='left' border="none" v-model="dataDetails.carHeight">
  311. </u--input>
  312. <view class="position-right">
  313. mm
  314. </view>
  315. </view>
  316. </view>
  317. <view class="flex row noborder s-row">
  318. <view class="left-text" style="width: 100%;" v-if="sign == '挂车'">上传人和牵引车合影(牵引车牌号可见)</view>
  319. <view class="left-text" style="width: 100%;" v-if="sign == '非挂车'">上传人车合影(车头车牌号可见)</view>
  320. <u-upload class="uview-upload" :fileList="fileList1" @afterRead="afterRead($event,'1')"
  321. @delete="deletePic" name="1" multiple :maxCount="1"></u-upload>
  322. </view>
  323. <!-- 挂车 -->
  324. <view v-if="sign == '挂车'">
  325. <view class="flex row">
  326. <view class="left left-text">挂车车牌号</view>
  327. <view class="right flex">
  328. <input class="car-uumber" v-model='dataDetails.guaCarNumber'
  329. @click.stop="handleShowKeyboard1(index)" :disabled="true" placeholder-class= "phsy" placeholder="输入挂车牌号"
  330. name="input"></input>
  331. </view>
  332. </view>
  333. <view class="flex row">
  334. <view class="left-text">挂车车辆所属车主</view>
  335. <u--input placeholder="输入车主姓名" inputAlign='right' border="none" v-model="dataDetails.guaOwner">
  336. </u--input>
  337. </view>
  338. <view class="flex row">
  339. <view class="left-text">挂车整备质量(千克)</view>
  340. <u--input type='number' placeholder="输入整备质量" inputAlign='right' border="none"
  341. v-model="dataDetails.guaServicingWeight">
  342. </u--input>
  343. </view>
  344. <view class="flex row">
  345. <view class="left-text">挂车核定载质量(千克)</view>
  346. <u--input type='number' placeholder="输入核定载质量" inputAlign='right' border="none"
  347. v-model="dataDetails.guaCarApprovedWeight">
  348. </u--input>
  349. </view>
  350. <view class="flex row noborder">
  351. <view style='width:390rpx;' class="left-text">挂车外廓尺寸(毫米)</view>
  352. </view>
  353. <view class="flex row noborder input-ckg">
  354. <view class="input-positon">
  355. <u--input type='number' class="input" placeholder="长" inputAlign='left' border="none"
  356. v-model="dataDetails.guaCarLong">
  357. </u--input>
  358. <view class="position-right">
  359. mm
  360. </view>
  361. </view>
  362. <view class="star">*</view>
  363. <view class="input-positon">
  364. <u--input type='number' placeholder="宽" inputAlign='left' border="none" v-model="dataDetails.guaCarWidth">
  365. </u--input>
  366. <view class="position-right">
  367. mm
  368. </view>
  369. </view>
  370. <view class="star">*</view>
  371. <view class="input-positon">
  372. <u--input type='number' placeholder="高" inputAlign='left' border="none" v-model="dataDetails.guaCarHeight">
  373. </u--input>
  374. <view class="position-right">
  375. mm
  376. </view>
  377. </view>
  378. </view>
  379. <view class="flex row noborder s-row">
  380. <view class="left-text" style="width: 100%;">上传人和挂车合影(挂车车牌号可见)</view>
  381. <u-upload class="uview-upload" :fileList="fileList2" @afterRead="afterRead1($event,'2')"
  382. @delete="deletePic" name="2" multiple :maxCount="1"></u-upload>
  383. </view>
  384. </view>
  385. <!-- <view class="level1-title">证件信息</view> -->
  386. </view>
  387. <view class='submit-btn-wrap'>
  388. <view class="submit-btn" @click="$u.throttle(submit, 5000)">提交</view>
  389. </view>
  390. <master-keyboard ref="keyboard" keyboardtype="car" :show="keyShow" :randomNumber="true" :newCar="false"
  391. :defaultValue="carNumber" @keyboardClick="handleClick"></master-keyboard>
  392. <master-keyboard ref="keyboard1" :guastatus='true' keyboardtype="car" :show="keyShow1" :randomNumber="true" :newCar="false"
  393. :defaultValue="carNumber1" @keyboardClick="handleClick1"></master-keyboard>
  394. <u-toast ref="uToast"></u-toast>
  395. <u-action-sheet :actions="$helper.imgTypeList" :title="$helper.imgType" :show="isShowimgType"
  396. @select="imgTypeSelect" :closeOnClickOverlay="true" :closeOnClickAction="true" @close="isShowimgType=false">
  397. </u-action-sheet>
  398. <u-picker :show="carColor" :columns="colorColumns" :closeOnClickOverlay='true' @close='colorClose'
  399. @cancel='colorClose' @confirm='confirmColor' ></u-picker>
  400. <u-picker :show="isShowValidity" ref="uPicker" :columns="validityPeriod" @confirm="confirmValidityPeriod"
  401. :closeOnClickOverlay='true' @close='isShowValidity=false' @cancel='isShowValidity=false'>
  402. </u-picker>
  403. <u-picker :show="isShowCarType" ref="uPicker" :columns="carTypeList" @confirm="confirmCarType"
  404. :closeOnClickOverlay='true' @close='isShowCarType=false' @cancel='isShowCarType=false'>
  405. </u-picker>
  406. </view>
  407. </template>
  408. <script>
  409. import uploadImage from '@/components/ossutil/uploadFile.js';
  410. import permision from "@/js_sdk/wa-permission/permission.js"
  411. import keyboard from "@/components/master-keyboard/master-keyboard.vue";
  412. var _this;
  413. import {
  414. mapState
  415. } from 'vuex';
  416. export default {
  417. data() {
  418. return {
  419. index: '',
  420. keyShow: false,
  421. keyShow1: false,
  422. carNumber: '',
  423. carNumber1: "",
  424. dataDetails: {
  425. // driverId: '',
  426. // carNumber: '',
  427. carNumberColour: '黄色',
  428. carCategory: '挂车',
  429. carType: '高栏',
  430. useNature: "营业特种车",
  431. guaUseNature: "营运挂车",
  432. energyType:"汽油",
  433. owner:''
  434. // carTotalWeight: '',
  435. // carApprovedWeight: '',
  436. // carLong: '',
  437. // carWidth: '',
  438. // carHeight: '',
  439. // addressUrl: ''
  440. },
  441. carTypeList:[["汽油","柴油","油电混合","纯电动","插电式混合动力","增程式"]],
  442. isShowCarType:false,
  443. carModelColumns: [
  444. ['挂车', '非挂车'],
  445. ['高栏', '集装箱', '自卸车']
  446. ],
  447. carModelColumnData: [
  448. ['高栏', '集装箱', '自卸车'],
  449. ['重型仓栏']
  450. ],
  451. colorColumns: [
  452. ['黄色', '蓝色']
  453. ],
  454. carColor: false,
  455. carModel: false,
  456. fileList1: [],
  457. fileList2: [],
  458. ValidityPeriodType: "",
  459. validityPeriod: [],
  460. isShowValidity: false,
  461. uploadType: '',
  462. isShowimgType: false,
  463. sign: "挂车"
  464. };
  465. },
  466. computed: {
  467. ...mapState(['hasLogin', 'userInfo', 'firstAuthentication']),
  468. },
  469. onLoad(options) {
  470. _this = this;
  471. this.dataDetails.commonId = this.userInfo.id
  472. this.get_camera_permission()
  473. this.validityPeriod = this.$helper.makeValidityPeriod()
  474. },
  475. methods: {
  476. async get_camera_permission() {
  477. var photol=await permision.requestAndroidPermission("android.permission.CAMERA")
  478. if(photol == false){
  479. uni.showModal({
  480. title: '提示',
  481. content: '您已经关闭相册权限,去设置',
  482. success: function (res) {
  483. if (res.confirm) {
  484. permision.gotoAppPermissionSetting()
  485. // plus.runtime.openURL("app-settings:");
  486. } else if (res.cancel) {
  487. console.log('用户点击取消');
  488. }
  489. }
  490. });
  491. }
  492. },
  493. driveType(){
  494. this.isShowCarType = true
  495. },
  496. confirmCarType(e){
  497. this.dataDetails.energyType = e.value[0]
  498. this.isShowCarType = false
  499. },
  500. hidden(){
  501. this.$refs.keyboard.open(false)
  502. this.$refs.keyboard1.open(false)
  503. },
  504. //挂车牌号弹出键盘
  505. handleShowKeyboard1(index) {
  506. if (this.dataDetails.guaCarNumber == '') {
  507. this.carNumber1 = ''
  508. } else {
  509. this.carNumber1 = this.dataDetails.guaCarNumber
  510. }
  511. if (this.$refs.keyboard1.open) {
  512. this.$refs.keyboard1.open(false) //true 键盘显示 false 键盘隐藏
  513. } else {
  514. this.$refs.keyboard1[0].open(false)
  515. }
  516. this.index = index
  517. if (this.$refs.keyboard1.open) {
  518. this.$refs.keyboard1.open(true) //true 键盘显示 false 键盘隐藏
  519. } else {
  520. this.$refs.keyboard1[0].open(true)
  521. }
  522. },
  523. handleClick1(e) {
  524. this.carNumber1 = e.value
  525. this.dataDetails.guaCarNumber = e.value //键盘输入值
  526. },
  527. delCard(type) {
  528. switch (type) {
  529. case 1:
  530. _this.dataDetails.operationCertificate = "" //道路运输证
  531. break;
  532. case 2:
  533. _this.dataDetails.trailerOperationCertificate = "" //挂车道路运输证
  534. break;
  535. case 3:
  536. _this.dataDetails.drivingLicenseHomePage = "" //牵引车行驶证
  537. break;
  538. case 4:
  539. _this.dataDetails.drivingLicenseBackPage = "" //牵引车行驶证副页
  540. break;
  541. case 5:
  542. _this.dataDetails.trailerLicenseHomePage = "" //挂车行驶证
  543. break;
  544. case 6:
  545. _this.dataDetails.trailerLicenseBackPage = ""//挂车行驶证副页
  546. break;
  547. }
  548. _this.$forceUpdate()
  549. },
  550. uploadImg(type) {
  551. this.uploadType = type
  552. this.imgTypeSelect()
  553. // this.isShowimgType = true
  554. },
  555. selectValidityPeriod(type) {
  556. this.ValidityPeriodType = type
  557. this.isShowValidity = true
  558. },
  559. // 上传图片
  560. imgTypeSelect(val) {
  561. // if (val.name == '相册') {
  562. uni.chooseImage({
  563. count: 1,
  564. success: function(res) {
  565. uploadImage("images", res.tempFilePaths[0], 'appData/',
  566. result => {
  567. // 上传成功回调函数
  568. console.log('图片地址-----', result)
  569. switch (_this.uploadType) {
  570. case 1:
  571. _this.dataDetails.driverLicenseHomePage = result
  572. break;
  573. case 2:
  574. _this.dataDetails.driverLicenseBackPage = result
  575. break;
  576. case 3:
  577. _this.dataDetails.drivingLicenseHomePage = result
  578. _this.$request.baseRequest('get',
  579. '/driverCarInfo/api/driveringLicenseShibie', {
  580. image: result,
  581. flag: 1
  582. }).then(res => {
  583. if (res.data) {
  584. _this.dataDetails.carNumber = res.data
  585. .carNum //车牌号
  586. _this.dataDetails.vehicleType = res.data.vehicleType
  587. _this.dataDetails.carCode =res.data.carCode
  588. _this.dataDetails.owner = res.data
  589. .owner //车辆所有人
  590. _this.$forceUpdate()
  591. }
  592. })
  593. .catch(res => {
  594. uni.$u.toast(res.message);
  595. });
  596. break;
  597. case 4:
  598. _this.dataDetails.drivingLicenseBackPage = result
  599. _this.$request.baseRequest('get',
  600. '/driverCarInfo/api/driveringLicenseShibie', {
  601. image: result,
  602. flag: 2
  603. }).then(res => {
  604. if (res.data) {
  605. if (res.data.issuingAuthority) { //行驶证发证机关
  606. _this.dataDetails.lssuingAuthority = res
  607. .data.issuingAuthority
  608. }
  609. if (res.data
  610. .licenseRegistrationDate) { //行驶证注册日期
  611. _this.dataDetails
  612. .drivingLicenseRegistrationDate = res
  613. .data.licenseRegistrationDate
  614. }
  615. if (res.data.licenseIssueDate) { //行驶证发证日期
  616. _this.dataDetails.drivingLicenseIssueDate =
  617. res.data.licenseIssueDate
  618. }
  619. _this.dataDetails.drivingLicenseValidityDate =
  620. res.data.driveringEndDate //行驶证有效期
  621. _this.dataDetails.drivingLicenseNumber = res
  622. .data.driveringNum //行驶证档案编号
  623. if (_this.sign == "非挂车") {
  624. if (res.data.servicingMass && res.data
  625. .servicingMass.indexOf("kg") != -1) {
  626. res.data.servicingMass = res.data
  627. .servicingMass.slice(0, res.data
  628. .servicingMass.length - 2)
  629. }
  630. _this.dataDetails.carTotalWeight = res.data
  631. .servicingMass //总质量
  632. }
  633. if(res.data.approvedLoadMass.indexOf("kg") != -1){
  634. res.data.approvedLoadMass = res.data.approvedLoadMass.slice(0, res.data.approvedLoadMass.length - 2)
  635. }
  636. _this.dataDetails.carApprovedWeight = res.data
  637. .approvedLoadMass //核定载质量
  638. if (res.data.size && res.data.size.indexOf(
  639. "mm") != -1) {
  640. res.data.size = res.data.size.slice(0, res
  641. .data.size.length - 2);
  642. }
  643. _this.dataDetails.carLong = res.data.size
  644. .split("X")[0] //车长
  645. _this.dataDetails.carWidth = res.data.size
  646. .split("X")[1] //车宽
  647. _this.dataDetails.carHeight = res.data.size
  648. .split("X")[2] //车高
  649. _this.$forceUpdate()
  650. }
  651. })
  652. .catch(res => {
  653. uni.$u.toast(res.message);
  654. });
  655. break;
  656. case 5: //挂车行驶证
  657. _this.dataDetails.trailerLicenseHomePage = result
  658. _this.$request.baseRequest('get',
  659. '/driverCarInfo/api/driveringLicenseShibie', {
  660. image: result,
  661. flag: 1
  662. }).then(res => {
  663. if (res.data) {
  664. if (res.data.issuingAuthority) { //行驶证发证机关
  665. _this.dataDetails.guaLssuingAuthority = res
  666. .data.issuingAuthority
  667. }
  668. if (res.data.licenseRegistrationDate) { //行驶证注册日期
  669. _this.dataDetails
  670. .trailerLicenseRegistrationDate = res.data
  671. .licenseRegistrationDate
  672. }
  673. if (res.data.licenseIssueDate) { //行驶证发证日期
  674. _this.dataDetails.trailerLicenseIssueDate = res
  675. .data.licenseIssueDate
  676. }
  677. _this.dataDetails.guaCarNumber = res.data
  678. .carNum //车牌号
  679. _this.dataDetails.guaOwner = res.data
  680. .owner //车辆所有人
  681. _this.$forceUpdate()
  682. }
  683. })
  684. .catch(res => {
  685. uni.$u.toast(res.message);
  686. });
  687. break;
  688. case 6:
  689. _this.dataDetails.trailerLicenseBackPage = result
  690. _this.$request.baseRequest('get',
  691. '/driverCarInfo/api/driveringLicenseShibie', {
  692. image: result,
  693. flag: 2
  694. }).then(res => {
  695. if (res.data) {
  696. _this.dataDetails.trailerLicenseValidityDate =
  697. res.data.driveringEndDate //挂车行驶证有效期
  698. _this.dataDetails.trailerLicenseNumber = res
  699. .data.driveringNum //挂车行驶证档案编号
  700. if (res.data.servicingMass && res.data
  701. .servicingMass.indexOf("kg") != -1) {
  702. res.data.servicingMass = res.data
  703. .servicingMass.slice(0, res.data
  704. .servicingMass.length - 2)
  705. }
  706. if(res.data.approvedLoadMass.indexOf("kg") != -1){
  707. res.data.approvedLoadMass = res.data.approvedLoadMass.slice(0, res.data.approvedLoadMass.length - 2)
  708. }
  709. _this.dataDetails.guaServicingWeight = res.data.servicingMass //总质量
  710. _this.dataDetails.guaCarApprovedWeight = res.data.approvedLoadMass //核定载质量
  711. if (res.data.size && res.data.size.indexOf(
  712. "mm") != -1) {
  713. res.data.size = res.data.size.slice(0, res
  714. .data.size.length - 2);
  715. }
  716. _this.dataDetails.guaCarLong = res.data.size
  717. .split("X")[0] //车长
  718. _this.dataDetails.guaCarWidth = res.data.size
  719. .split("X")[1] //车宽
  720. _this.dataDetails.guaCarHeight = res.data.size
  721. .split("X")[2] //车高
  722. _this.$forceUpdate()
  723. }
  724. })
  725. .catch(res => {
  726. uni.$u.toast(res.message);
  727. });
  728. break;
  729. case 7:
  730. _this.dataDetails.qualificationCertificate = result
  731. break;
  732. case 8:
  733. _this.dataDetails.operationCertificate = result
  734. _this.$request.baseRequest('get',
  735. '/driverCarInfo/api/tranLicenseShibie', {
  736. image: result
  737. }).then(res => {
  738. if (res.data) {
  739. _this.dataDetails.operationCertificateNumber =
  740. res.data.tranNumber
  741. _this.dataDetails
  742. .operationCertificateValidityDate = res
  743. .data.tranEndDate
  744. _this.$forceUpdate()
  745. }
  746. })
  747. .catch(res => {
  748. uni.$u.toast(res.message);
  749. });
  750. break;
  751. case 9:
  752. _this.dataDetails.trailerOperationCertificate = result
  753. _this.$request.baseRequest('get',
  754. '/driverCarInfo/api/tranLicenseShibie', {
  755. image: result
  756. }).then(res => {
  757. if (res.data) {
  758. _this.dataDetails
  759. .trailerOperationCertificateNumber = res
  760. .data.tranNumber
  761. _this.dataDetails
  762. .trailerOperationCertificateValidityDate =
  763. res.data.tranEndDate
  764. _this.$forceUpdate()
  765. }
  766. })
  767. .catch(res => {
  768. uni.$u.toast(res.message);
  769. });
  770. break;
  771. }
  772. _this.$forceUpdate()
  773. }
  774. )
  775. }
  776. });
  777. // }
  778. },
  779. confirmValidityPeriod(e) {
  780. console.log('confirm', e)
  781. if(e.value[0]==''){
  782. this.$refs.uToast.show({
  783. type: 'error',
  784. message: "年份不能为空!",
  785. })
  786. return
  787. }else if(e.value[1]==''){
  788. this.$refs.uToast.show({
  789. type: 'error',
  790. message: "月份不能为空!",
  791. })
  792. return
  793. }else if(e.value[2]==''){
  794. this.$refs.uToast.show({
  795. type: 'error',
  796. message: "日期不能为空!",
  797. })
  798. return
  799. }
  800. var date=new Date()
  801. var text=''
  802. switch (this.ValidityPeriodType) {
  803. case 4:
  804. text='道路运输证已过期!'
  805. break
  806. case 5:
  807. text='挂车道路运输证已过期!'
  808. break
  809. case 1:
  810. text='行驶证已过期!'
  811. break
  812. case 2:
  813. text='挂车行驶证已过期!'
  814. break
  815. }
  816. if(this.ValidityPeriodType==1||this.ValidityPeriodType==2||this.ValidityPeriodType==4||this.ValidityPeriodType==5){
  817. if(e.value[0]<date.getFullYear()){
  818. this.$refs.uToast.show({
  819. type: 'error',
  820. message: text,
  821. })
  822. return
  823. }
  824. if(e.value[0]==date.getFullYear()&&Number(e.value[1])<(date.getMonth()+1)){
  825. this.$refs.uToast.show({
  826. type: 'error',
  827. message: text,
  828. })
  829. return
  830. }
  831. if(e.value[0]==date.getFullYear()&&Number(e.value[1])==(date.getMonth()+1)&&Number(e.value[2])<=(date.getDate())){
  832. this.$refs.uToast.show({
  833. type: 'error',
  834. message: text,
  835. })
  836. return
  837. }
  838. }
  839. switch (this.ValidityPeriodType) {
  840. case 0:
  841. this.dataDetails.driverLicenseValidityDate = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
  842. break
  843. case 1:
  844. this.dataDetails.drivingLicenseValidityDate = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
  845. break
  846. case 2:
  847. this.dataDetails.trailerLicenseValidityDate = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
  848. break
  849. case 3:
  850. this.dataDetails.qualificationCertificateValidityDate = e.value[0] + '-' + e.value[1] + '-' + e
  851. .value[2]
  852. break
  853. case 4:
  854. this.dataDetails.operationCertificateValidityDate = e.value[0] + '-' + e.value[1] + '-' + e.value[
  855. 2]
  856. break
  857. case 5:
  858. this.dataDetails.trailerOperationCertificateValidityDate = e.value[0] + '-' + e.value[1] + '-' + e
  859. .value[2]
  860. case 6: //行驶证注册日期
  861. this.dataDetails.drivingLicenseRegistrationDate = e.value[0] + '-' + e.value[1] + '-' + e
  862. .value[2]
  863. break
  864. case 7: //行驶证发证日期
  865. this.dataDetails.drivingLicenseIssueDate = e.value[0] + '-' + e.value[1] + '-' + e
  866. .value[2]
  867. break
  868. case 8: //挂车行驶证注册日期
  869. this.dataDetails.trailerLicenseRegistrationDate = e.value[0] + '-' + e.value[1] + '-' + e
  870. .value[2]
  871. break
  872. case 9: //挂车行驶证发证日期
  873. this.dataDetails.trailerLicenseIssueDate = e.value[0] + '-' + e.value[1] + '-' + e
  874. .value[2]
  875. break
  876. }
  877. this.isShowValidity = false
  878. },
  879. // 车型切换
  880. changeCarModel(e) {
  881. const {
  882. columnIndex,
  883. index,
  884. // 微信小程序无法将picker实例传出来,只能通过ref操作
  885. picker = this.$refs.carTypePicker
  886. } = e
  887. if (columnIndex === 0) {
  888. // 模拟网络请求
  889. picker.setColumnValues(1, this.carModelColumnData[index])
  890. }
  891. },
  892. // 删除图片
  893. deletePic(event) {
  894. this[`fileList${event.name}`].splice(event.index, 1)
  895. },
  896. // 新增图片
  897. async afterRead(event, num) {
  898. // 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
  899. let lists = [].concat(event.file)
  900. let fileListLen = this[`fileList${event.name}`].length
  901. lists.map((item) => {
  902. this[`fileList${event.name}`].push({
  903. ...item,
  904. status: 'uploading',
  905. message: '上传中'
  906. })
  907. })
  908. for (let i = 0; i < lists.length; i++) {
  909. const result = await this.uploadFilePromise(lists[i].url, num)
  910. let item = this[`fileList${event.name}`][fileListLen]
  911. this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
  912. status: 'success',
  913. message: '',
  914. url: result
  915. }))
  916. fileListLen++
  917. }
  918. },
  919. // 新增图片
  920. async afterRead1(event, num) {
  921. console.log(event)
  922. // 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
  923. let lists = [].concat(event.file)
  924. let fileListLen = this[`fileList${event.name}`].length
  925. lists.map((item) => {
  926. this[`fileList${event.name}`].push({
  927. ...item,
  928. status: 'uploading',
  929. message: '上传中'
  930. })
  931. })
  932. for (let i = 0; i < lists.length; i++) {
  933. const result = await this.uploadFilePromise(lists[i].url, num)
  934. let item = this[`fileList${event.name}`][fileListLen]
  935. this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
  936. status: 'success',
  937. message: '',
  938. url: result
  939. }))
  940. fileListLen++
  941. }
  942. },
  943. uploadFilePromise(url, num) {
  944. uploadImage('image', url, 'appData/',
  945. result => {
  946. // 上传成功回调函数
  947. console.log('图片地址', result)
  948. if (num == 1) {
  949. if (!this.dataDetails.addressUrl) {
  950. this.dataDetails.addressUrl = result
  951. } else {
  952. this.dataDetails.addressUrl = this.dataDetails.addressUrl + ',' + result
  953. }
  954. } else if (num == 2) {
  955. if (!this.dataDetails.guaAddressUrl) {
  956. this.dataDetails.guaAddressUrl = result
  957. } else {
  958. this.dataDetails.guaAddressUrl = this.dataDetails.guaAddressUrl + ',' + result
  959. }
  960. }
  961. }
  962. )
  963. },
  964. //车牌号弹出键盘
  965. handleShowKeyboard(index) {
  966. if (this.dataDetails.carNumber == '') {
  967. this.carNumber = ''
  968. } else {
  969. this.carNumber = this.dataDetails.carNumber
  970. }
  971. if (this.$refs.keyboard.open) {
  972. this.$refs.keyboard.open(false) //true 键盘显示 false 键盘隐藏
  973. } else {
  974. this.$refs.keyboard[0].open(false)
  975. }
  976. this.index = index
  977. if (this.$refs.keyboard.open) {
  978. this.$refs.keyboard.open(true) //true 键盘显示 false 键盘隐藏
  979. } else {
  980. this.$refs.keyboard[0].open(true)
  981. }
  982. },
  983. //车牌号弹出键盘
  984. handleClick(e) {
  985. this.carNumber = e.value
  986. this.dataDetails.carNumber = e.value //键盘输入值
  987. },
  988. confirmColor(val) {
  989. this.dataDetails.carNumberColour = val.value[0]
  990. this.carColor = false
  991. },
  992. colorClose() {
  993. this.carColor = false
  994. },
  995. selectNoColor() {
  996. this.carColor = true
  997. },
  998. confirmCarModel(val) {
  999. if (val.value[0] == '挂车') {
  1000. this.dataDetails.useNature = "营业特种车"
  1001. this.dataDetails.guaUseNature = "营运挂车"
  1002. } else if (val.value[0] == '非挂车') {
  1003. this.dataDetails.useNature = "营运货车"
  1004. }
  1005. this.sign = val.value[0]
  1006. // this.dataDetails.carType = val.value[0] + ' ' + val.value[1]
  1007. this.dataDetails.carCategory = val.value[0]
  1008. this.dataDetails.carType = val.value[1]
  1009. this.carModel = false
  1010. },
  1011. carModelClose() {
  1012. this.carModel = false
  1013. },
  1014. selectCarModel() {
  1015. this.carModel = true
  1016. },
  1017. selectNoColor() {
  1018. this.carColor = true
  1019. },
  1020. unloadGroupPhoto() {
  1021. uni.chooseImage({
  1022. count: 1,
  1023. success: function(res) {
  1024. console.log(JSON.stringify(res.tempFilePaths));
  1025. uploadImage('image', res.tempFilePaths[0], 'appData/',
  1026. result => {
  1027. // 上传成功
  1028. console.log('图片地址', result)
  1029. }
  1030. )
  1031. }
  1032. });
  1033. },
  1034. validate() {
  1035. if (uni.$u.test.isEmpty(this.dataDetails.operationCertificate)) {
  1036. this.$refs.uToast.show({
  1037. type: 'error',
  1038. message: "道路运输证不能为空!",
  1039. })
  1040. return true
  1041. }
  1042. if (uni.$u.test.isEmpty(this.dataDetails.operationCertificateNumber)) {
  1043. this.$refs.uToast.show({
  1044. type: 'error',
  1045. message: "道路运输证号不能为空!",
  1046. })
  1047. return true
  1048. }
  1049. if (this.dataDetails.operationCertificateNumber.length!=12) {
  1050. this.$refs.uToast.show({
  1051. type: 'error',
  1052. message: "道路运输证号输入错误!",
  1053. })
  1054. return true
  1055. }
  1056. if (uni.$u.test.isEmpty(this.dataDetails.operationCertificateValidityDate)) {
  1057. this.$refs.uToast.show({
  1058. type: 'error',
  1059. message: "道路运输证有效期不能为空!",
  1060. })
  1061. return true
  1062. }
  1063. if (this.sign == '挂车') {
  1064. if (uni.$u.test.isEmpty(this.dataDetails.trailerOperationCertificate)) {
  1065. this.$refs.uToast.show({
  1066. type: 'error',
  1067. message: "挂车道路运输证不能为空!",
  1068. })
  1069. return true
  1070. }
  1071. if (uni.$u.test.isEmpty(this.dataDetails.trailerOperationCertificateNumber)) {
  1072. this.$refs.uToast.show({
  1073. type: 'error',
  1074. message: "挂车道路运输证号不能为空!",
  1075. })
  1076. return true
  1077. }
  1078. if (this.dataDetails.trailerOperationCertificateNumber.length!=12) {
  1079. this.$refs.uToast.show({
  1080. type: 'error',
  1081. message: "挂车道路运输证号输入错误!",
  1082. })
  1083. return true
  1084. }
  1085. if (uni.$u.test.isEmpty(this.dataDetails.trailerOperationCertificateValidityDate)) {
  1086. this.$refs.uToast.show({
  1087. type: 'error',
  1088. message: "挂车道路运输证有效期不能为空!",
  1089. })
  1090. return true
  1091. }
  1092. }
  1093. if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseHomePage)) {
  1094. this.$refs.uToast.show({
  1095. type: 'error',
  1096. message: "行驶证主页不能为空!",
  1097. })
  1098. return true
  1099. }
  1100. if (this.dataDetails.vehicleType.length<2||this.dataDetails.vehicleType.length>10) {
  1101. this.$refs.uToast.show({
  1102. type: 'error',
  1103. message: "行驶证车辆类型输入错误!",
  1104. })
  1105. return true
  1106. }
  1107. if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseNumber)) {
  1108. this.$refs.uToast.show({
  1109. type: 'error',
  1110. message: "行驶证档案编号不能为空!",
  1111. })
  1112. return true
  1113. }
  1114. if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseNumber)) {
  1115. this.$refs.uToast.show({
  1116. type: 'error',
  1117. message: "行驶证档案编号不能为空!",
  1118. })
  1119. return true
  1120. }
  1121. if (this.dataDetails.drivingLicenseNumber.length!=12) {
  1122. this.$refs.uToast.show({
  1123. type: 'error',
  1124. message: "行驶证档案编号输入错误!",
  1125. })
  1126. return true
  1127. }
  1128. if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseRegistrationDate)) {
  1129. this.$refs.uToast.show({
  1130. type: 'error',
  1131. message: "行驶证注册日期不能为空!",
  1132. })
  1133. return true
  1134. }
  1135. if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseIssueDate)) {
  1136. this.$refs.uToast.show({
  1137. type: 'error',
  1138. message: "行驶证发证日期不能为空!",
  1139. })
  1140. return true
  1141. }
  1142. if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseValidityDate)) {
  1143. this.$refs.uToast.show({
  1144. type: 'error',
  1145. message: "行驶证有效期不能为空!",
  1146. })
  1147. return true
  1148. }
  1149. if (uni.$u.test.isEmpty(this.dataDetails.lssuingAuthority)) {
  1150. this.$refs.uToast.show({
  1151. type: 'error',
  1152. message: "行驶证发证机关不能为空!",
  1153. })
  1154. return true
  1155. }
  1156. if (this.dataDetails.lssuingAuthority.length<5||this.dataDetails.lssuingAuthority.length>25) {
  1157. this.$refs.uToast.show({
  1158. type: 'error',
  1159. message: "行驶证发证机关输入错误!",
  1160. })
  1161. return true
  1162. }
  1163. if (uni.$u.test.isEmpty(this.dataDetails.energyType)) {
  1164. this.$refs.uToast.show({
  1165. type: 'error',
  1166. message: "能源类型不能为空!",
  1167. })
  1168. return true
  1169. }
  1170. if (this.sign == '挂车') {
  1171. if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseHomePage)) {
  1172. this.$refs.uToast.show({
  1173. type: 'error',
  1174. message: "挂车行驶证主页不能为空!",
  1175. })
  1176. return true
  1177. }
  1178. if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseBackPage)) {
  1179. this.$refs.uToast.show({
  1180. type: 'error',
  1181. message: "挂车行驶证副页不能为空!",
  1182. })
  1183. return true
  1184. }
  1185. if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseNumber)) {
  1186. this.$refs.uToast.show({
  1187. type: 'error',
  1188. message: "挂车行驶证档案编号不能为空!",
  1189. })
  1190. return true
  1191. }
  1192. if (this.dataDetails.trailerLicenseNumber.length!=12) {
  1193. this.$refs.uToast.show({
  1194. type: 'error',
  1195. message: "挂车行驶证档案编号输入错误!",
  1196. })
  1197. return true
  1198. }
  1199. if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseRegistrationDate)) {
  1200. this.$refs.uToast.show({
  1201. type: 'error',
  1202. message: "挂车行驶证注册日期不能为空!",
  1203. })
  1204. return true
  1205. }
  1206. if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseIssueDate)) {
  1207. this.$refs.uToast.show({
  1208. type: 'error',
  1209. message: "挂车行驶证发证日期不能为空!!",
  1210. })
  1211. return true
  1212. }
  1213. if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseValidityDate)) {
  1214. this.$refs.uToast.show({
  1215. type: 'error',
  1216. message: "挂车行驶证有效期不能为空!",
  1217. })
  1218. return true
  1219. }
  1220. if (uni.$u.test.isEmpty(this.dataDetails.guaLssuingAuthority)) {
  1221. this.$refs.uToast.show({
  1222. type: 'error',
  1223. message: "挂车行驶证发证机关不能为空!",
  1224. })
  1225. return true
  1226. }
  1227. if (this.dataDetails.guaLssuingAuthority.length<5||this.dataDetails.guaLssuingAuthority.length>25) {
  1228. this.$refs.uToast.show({
  1229. type: 'error',
  1230. message: "挂车行驶证发证机关输入错误!",
  1231. })
  1232. return true
  1233. }
  1234. }
  1235. // true 为校验不通过
  1236. if (uni.$u.test.isEmpty(this.dataDetails.carNumber)) {
  1237. this.$refs.uToast.show({
  1238. type: 'error',
  1239. message: "车牌号不能为空!",
  1240. })
  1241. return true
  1242. }
  1243. if (uni.$u.test.isEmpty(this.dataDetails.owner)) {
  1244. console.log(this.dataDetails.owner)
  1245. this.$refs.uToast.show({
  1246. type: 'error',
  1247. message: "车辆所属车主不能为空!",
  1248. })
  1249. return true
  1250. }
  1251. if (uni.$u.test.isEmpty(this.dataDetails.carTotalWeight) && this.sign == '非挂车') {
  1252. this.$refs.uToast.show({
  1253. type: 'error',
  1254. message: "总质量不能为空!",
  1255. })
  1256. return true
  1257. }
  1258. if (uni.$u.test.isEmpty(this.dataDetails.carTotalWeight)&& this.sign == '非挂车' && this.dataDetails.carTotalWeight<500
  1259. ||uni.$u.test.isEmpty(this.dataDetails.carTotalWeight)&& this.sign == '非挂车' && this.dataDetails.carTotalWeight>60000) {
  1260. this.$refs.uToast.show({
  1261. type: 'error',
  1262. message: "总质量输入错误!",
  1263. })
  1264. return true
  1265. }
  1266. if (uni.$u.test.isEmpty(this.dataDetails.carApprovedWeight) && this.sign == '非挂车') {
  1267. this.$refs.uToast.show({
  1268. type: 'error',
  1269. message: "核定载质量不能为空!",
  1270. })
  1271. return true
  1272. }
  1273. if (uni.$u.test.isEmpty(this.dataDetails.carApprovedWeight)&& this.sign == '非挂车' && this.dataDetails.carApprovedWeight<500||
  1274. uni.$u.test.isEmpty(this.dataDetails.carApprovedWeight) && this.sign == '非挂车' && this.dataDetails.carApprovedWeight>60000) {
  1275. this.$refs.uToast.show({
  1276. type: 'error',
  1277. message: "核定载质量输入错误!",
  1278. })
  1279. return true
  1280. }
  1281. if (uni.$u.test.isEmpty(this.dataDetails.servicingWeight) && this.sign == '挂车') {
  1282. this.$refs.uToast.show({
  1283. type: 'error',
  1284. message: "整备质量不能为空!",
  1285. })
  1286. return true
  1287. }
  1288. if (uni.$u.test.isEmpty(this.dataDetails.carLong) || uni.$u.test.isEmpty(this.dataDetails.carWidth) || uni
  1289. .$u.test.isEmpty(this.dataDetails.carHeight)) {
  1290. this.$refs.uToast.show({
  1291. type: 'error',
  1292. message: "外廓尺寸不能为空!",
  1293. })
  1294. return true
  1295. }
  1296. if (this.sign == '挂车') {
  1297. if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseHomePage)) {
  1298. this.$refs.uToast.show({
  1299. type: 'error',
  1300. message: "挂车行驶证主页不能为空!",
  1301. })
  1302. return true
  1303. }
  1304. if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseBackPage)) {
  1305. this.$refs.uToast.show({
  1306. type: 'error',
  1307. message: "挂车行驶证副页不能为空!",
  1308. })
  1309. return true
  1310. }
  1311. if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseNumber)) {
  1312. this.$refs.uToast.show({
  1313. type: 'error',
  1314. message: "挂车行驶证档案编号不能为空!",
  1315. })
  1316. return true
  1317. }
  1318. if (uni.$u.test.isEmpty(this.dataDetails.guaCarNumber)) {
  1319. this.$refs.uToast.show({
  1320. type: 'error',
  1321. message: "挂车车牌号不能为空!",
  1322. })
  1323. return true
  1324. }
  1325. if (uni.$u.test.isEmpty(this.dataDetails.guaOwner)) {
  1326. this.$refs.uToast.show({
  1327. type: 'error',
  1328. message: "车辆所属车主不能为空!",
  1329. })
  1330. return true
  1331. }
  1332. if (uni.$u.test.isEmpty(this.dataDetails.guaServicingWeight)) {
  1333. this.$refs.uToast.show({
  1334. type: 'error',
  1335. message: "挂车整备质量不能为空!",
  1336. })
  1337. return true
  1338. }
  1339. if (uni.$u.test.isEmpty(this.dataDetails.guaCarApprovedWeight)) {
  1340. this.$refs.uToast.show({
  1341. type: 'error',
  1342. message: "挂车核定载质量不能为空!",
  1343. })
  1344. return true
  1345. }
  1346. if (this.dataDetails.guaCarApprovedWeight<500||this.dataDetails.guaCarApprovedWeight>60000) {
  1347. this.$refs.uToast.show({
  1348. type: 'error',
  1349. message: "挂车核定载质量输入错误!",
  1350. })
  1351. return true
  1352. }
  1353. if (uni.$u.test.isEmpty(this.dataDetails.guaCarLong) || uni.$u.test.isEmpty(this.dataDetails.guaCarWidth) || uni.$u.test.isEmpty(this.dataDetails.guaCarHeight)) {
  1354. this.$refs.uToast.show({
  1355. type: 'error',
  1356. message: "挂车外廓尺寸不能为空!",
  1357. })
  1358. return true
  1359. }
  1360. // if (this.dataDetails.fileList2.length == 0) {
  1361. // this.$refs.uToast.show({
  1362. // type: 'error',
  1363. // message: "人和挂车合影不能为空!",
  1364. // })
  1365. // return true
  1366. // }
  1367. }
  1368. return false
  1369. },
  1370. submit() {
  1371. this.dataDetails.driverId = uni.getStorageSync("firstAuthentication").id
  1372. // 校验
  1373. if (this.validate()) return
  1374. if (!this.dataDetails.carApprovedWeight) {
  1375. delete this.dataDetails.carApprovedWeight
  1376. }
  1377. if(this.dataDetails.carCategory == "非挂车"){
  1378. delete this.dataDetails.guaUseNature
  1379. }
  1380. if(this.dataDetails.carCategory == "挂车"){
  1381. if(this.dataDetails.guaCarNumber.indexOf('挂')==-1){
  1382. this.dataDetails.guaCarNumber=this.dataDetails.guaCarNumber+'挂'
  1383. }
  1384. }
  1385. this.$request.baseRequest('post', '/driverCarInfo/api/addInfo', this.dataDetails).then(res => {
  1386. if (res.code == '200') {
  1387. this.$refs.uToast.show({
  1388. type: 'success',
  1389. message: "提交成功!",
  1390. complete() {
  1391. uni.navigateBack({
  1392. delta: 1
  1393. });
  1394. // uni.$u.route('/pages/mine/manageVehicles/index');
  1395. }
  1396. })
  1397. // this.$refs.uToast.show({
  1398. // ...params
  1399. // })
  1400. // uni.$u.route('/pages/mine/manageVehicles/index');
  1401. } else if (res.code == '400'){
  1402. uni.$u.toast('您输入的内容有问题,请检查后重新提交');
  1403. }else{
  1404. uni.$u.toast(res.message);
  1405. }
  1406. })
  1407. .catch(res => {
  1408. console.log(res)
  1409. uni.$u.toast(res.message);
  1410. });
  1411. },
  1412. },
  1413. }
  1414. </script>
  1415. <style lang="scss" scoped>
  1416. .container {
  1417. margin: 20rpx;
  1418. background: white;
  1419. padding: 0 20rpx;
  1420. border-radius: 20rpx;
  1421. padding-bottom: 200rpx;
  1422. .left-text {
  1423. // background: red;
  1424. width: 290rpx;
  1425. color: #333333;
  1426. display: flex;
  1427. align-items: center;
  1428. }
  1429. .row {
  1430. border-bottom: 1px solid #EEEEEE;
  1431. padding-bottom: 28rpx;
  1432. margin-top: 26rpx;
  1433. .ch-style {}
  1434. }
  1435. .row-ch {
  1436. padding-right: 250rpx;
  1437. box-sizing: border-box;
  1438. }
  1439. .row {
  1440. border-bottom: 1px solid #EEEEEE;
  1441. padding-bottom: 28rpx;
  1442. margin-top: 26rpx;
  1443. }
  1444. .left-text {
  1445. // background: red;
  1446. width: 320rpx;
  1447. color: #333333;
  1448. display: flex;
  1449. align-items: center;
  1450. }
  1451. .picture {
  1452. position: relative;
  1453. width: 100%;
  1454. height: 440rpx;
  1455. display: flex;
  1456. justify-content: center;
  1457. flex-direction: column;
  1458. align-items: center;
  1459. .text {
  1460. margin-top: 20rpx;
  1461. }
  1462. }
  1463. .picture1 {
  1464. background: url(../../../static/images/mine/jzz.png);
  1465. background-size: 100% 100%;
  1466. }
  1467. .picture2 {
  1468. background: url(../../../static/images/mine/jzf.png);
  1469. background-size: 100% 100%;
  1470. }
  1471. .picture3 {
  1472. background: url(../../../static/images/mine/xsz.png);
  1473. background-size: 100% 100%;
  1474. }
  1475. .picture4 {
  1476. background: url(../../../static/images/mine/xsf.png);
  1477. background-size: 100% 100%;
  1478. }
  1479. .picture5 {
  1480. background: url(../../../static/images/mine/gcxsz.png);
  1481. background-size: 100% 100%;
  1482. }
  1483. .picture6 {
  1484. background: url(../../../static/images/mine/gcxsf.png);
  1485. background-size: 100% 100%;
  1486. }
  1487. .picture7 {
  1488. background: url(../../../static/images/mine/cy.png);
  1489. background-size: 100% 100%;
  1490. }
  1491. .picture8 {
  1492. background: url(../../../static/images/mine/cy.png);
  1493. background-size: 100% 100%;
  1494. }
  1495. .picture9 {
  1496. background: url(../../../static/images/mine/cy.png);
  1497. background-size: 100% 100%;
  1498. }
  1499. .xj-image {
  1500. width: 100rpx;
  1501. height: 100rpx;
  1502. }
  1503. .title {
  1504. color: #999999;
  1505. margin: 20rpx 0;
  1506. }
  1507. }
  1508. .input-ckg {
  1509. height: 86rpx;
  1510. margin-top: 0 !important;
  1511. padding-bottom: 0 !important;
  1512. .u-input {
  1513. height: 100%;
  1514. background: #F7F8FA;
  1515. padding-left: 10rpx !important;
  1516. padding-right: 85rpx !important;
  1517. }
  1518. .star {
  1519. display: flex;
  1520. align-items: center;
  1521. margin: 0 10rpx;
  1522. }
  1523. .input-positon {
  1524. position: relative;
  1525. }
  1526. .position-right {
  1527. position: absolute;
  1528. right: 20rpx;
  1529. top: 0;
  1530. width: 60rpx;
  1531. height: 50rpx;
  1532. bottom: 0;
  1533. margin: auto;
  1534. }
  1535. }
  1536. .picture {
  1537. margin-top: 20rpx;
  1538. background: #F5F6FA;
  1539. width: 212rpx;
  1540. height: 212rpx;
  1541. border-radius: 10rpx;
  1542. display: flex;
  1543. flex-direction: column;
  1544. justify-content: center;
  1545. align-items: center;
  1546. color: #6A7282;
  1547. }
  1548. .submit-btn-wrap{
  1549. position: fixed;
  1550. z-index:1000;
  1551. bottom:0;left:0;
  1552. width:100%;
  1553. padding:40rpx 0;
  1554. background:#fff;
  1555. }
  1556. .submit-btn {
  1557. bottom: 40rpx;
  1558. width: 90%;
  1559. background: #2772FB;
  1560. color: white;
  1561. text-align: center;
  1562. margin:0 auto;
  1563. padding: 30rpx 0;
  1564. border-radius: 50rpx;
  1565. }
  1566. .del-card {
  1567. position: absolute;
  1568. top: -10rpx;
  1569. right: -6rpx;
  1570. width: 80rpx;
  1571. height: 80rpx;
  1572. z-index: 9;
  1573. }
  1574. /deep/.uni-input-input:disabled{
  1575. background:transparent;
  1576. }
  1577. .phsy {
  1578. // font-size: 20px !important;
  1579. color: #999 !important
  1580. }
  1581. .car-uumber{
  1582. text-align:right;
  1583. }
  1584. </style>