addVehicle.vue 57 KB

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