addVehicle.vue 56 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676
  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 style='width:180px' 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. fail: function(req){
  777. console.log(req,11111)
  778. },
  779. complete: function(req1){
  780. console.log(req1,22222)
  781. },
  782. });
  783. // }
  784. },
  785. confirmValidityPeriod(e) {
  786. console.log('confirm', e)
  787. if(e.value[0]==''){
  788. this.$refs.uToast.show({
  789. type: 'error',
  790. message: "年份不能为空!",
  791. })
  792. return
  793. }else if(e.value[1]==''){
  794. this.$refs.uToast.show({
  795. type: 'error',
  796. message: "月份不能为空!",
  797. })
  798. return
  799. }else if(e.value[2]==''){
  800. this.$refs.uToast.show({
  801. type: 'error',
  802. message: "日期不能为空!",
  803. })
  804. return
  805. }
  806. var date=new Date()
  807. var text=''
  808. switch (this.ValidityPeriodType) {
  809. case 4:
  810. text='道路运输证已过期!'
  811. break
  812. case 5:
  813. text='挂车道路运输证已过期!'
  814. break
  815. case 1:
  816. text='行驶证已过期!'
  817. break
  818. case 2:
  819. text='挂车行驶证已过期!'
  820. break
  821. }
  822. if(this.ValidityPeriodType==1||this.ValidityPeriodType==2||this.ValidityPeriodType==4||this.ValidityPeriodType==5){
  823. if(e.value[0]<date.getFullYear()){
  824. this.$refs.uToast.show({
  825. type: 'error',
  826. message: text,
  827. })
  828. return
  829. }
  830. if(e.value[0]==date.getFullYear()&&Number(e.value[1])<(date.getMonth()+1)){
  831. this.$refs.uToast.show({
  832. type: 'error',
  833. message: text,
  834. })
  835. return
  836. }
  837. if(e.value[0]==date.getFullYear()&&Number(e.value[1])==(date.getMonth()+1)&&Number(e.value[2])<=(date.getDate())){
  838. this.$refs.uToast.show({
  839. type: 'error',
  840. message: text,
  841. })
  842. return
  843. }
  844. }
  845. switch (this.ValidityPeriodType) {
  846. case 0:
  847. this.dataDetails.driverLicenseValidityDate = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
  848. break
  849. case 1:
  850. this.dataDetails.drivingLicenseValidityDate = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
  851. break
  852. case 2:
  853. this.dataDetails.trailerLicenseValidityDate = e.value[0] + '-' + e.value[1] + '-' + e.value[2]
  854. break
  855. case 3:
  856. this.dataDetails.qualificationCertificateValidityDate = e.value[0] + '-' + e.value[1] + '-' + e
  857. .value[2]
  858. break
  859. case 4:
  860. this.dataDetails.operationCertificateValidityDate = e.value[0] + '-' + e.value[1] + '-' + e.value[
  861. 2]
  862. break
  863. case 5:
  864. this.dataDetails.trailerOperationCertificateValidityDate = e.value[0] + '-' + e.value[1] + '-' + e
  865. .value[2]
  866. case 6: //行驶证注册日期
  867. this.dataDetails.drivingLicenseRegistrationDate = e.value[0] + '-' + e.value[1] + '-' + e
  868. .value[2]
  869. break
  870. case 7: //行驶证发证日期
  871. this.dataDetails.drivingLicenseIssueDate = e.value[0] + '-' + e.value[1] + '-' + e
  872. .value[2]
  873. break
  874. case 8: //挂车行驶证注册日期
  875. this.dataDetails.trailerLicenseRegistrationDate = e.value[0] + '-' + e.value[1] + '-' + e
  876. .value[2]
  877. break
  878. case 9: //挂车行驶证发证日期
  879. this.dataDetails.trailerLicenseIssueDate = e.value[0] + '-' + e.value[1] + '-' + e
  880. .value[2]
  881. break
  882. }
  883. this.isShowValidity = false
  884. },
  885. // 车型切换
  886. changeCarModel(e) {
  887. const {
  888. columnIndex,
  889. index,
  890. // 微信小程序无法将picker实例传出来,只能通过ref操作
  891. picker = this.$refs.carTypePicker
  892. } = e
  893. if (columnIndex === 0) {
  894. // 模拟网络请求
  895. picker.setColumnValues(1, this.carModelColumnData[index])
  896. }
  897. },
  898. // 删除图片
  899. deletePic(event) {
  900. this[`fileList${event.name}`].splice(event.index, 1)
  901. },
  902. // 新增图片
  903. async afterRead(event, num) {
  904. // 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
  905. let lists = [].concat(event.file)
  906. let fileListLen = this[`fileList${event.name}`].length
  907. lists.map((item) => {
  908. this[`fileList${event.name}`].push({
  909. ...item,
  910. status: 'uploading',
  911. message: '上传中'
  912. })
  913. })
  914. for (let i = 0; i < lists.length; i++) {
  915. const result = await this.uploadFilePromise(lists[i].url, num)
  916. let item = this[`fileList${event.name}`][fileListLen]
  917. this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
  918. status: 'success',
  919. message: '',
  920. url: result
  921. }))
  922. fileListLen++
  923. }
  924. },
  925. // 新增图片
  926. async afterRead1(event, num) {
  927. console.log(event)
  928. // 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
  929. let lists = [].concat(event.file)
  930. let fileListLen = this[`fileList${event.name}`].length
  931. lists.map((item) => {
  932. this[`fileList${event.name}`].push({
  933. ...item,
  934. status: 'uploading',
  935. message: '上传中'
  936. })
  937. })
  938. for (let i = 0; i < lists.length; i++) {
  939. const result = await this.uploadFilePromise(lists[i].url, num)
  940. let item = this[`fileList${event.name}`][fileListLen]
  941. this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
  942. status: 'success',
  943. message: '',
  944. url: result
  945. }))
  946. fileListLen++
  947. }
  948. },
  949. uploadFilePromise(url, num) {
  950. uploadImage('image', url, 'appData/',
  951. result => {
  952. // 上传成功回调函数
  953. console.log('图片地址', result)
  954. if (num == 1) {
  955. if (!this.dataDetails.addressUrl) {
  956. this.dataDetails.addressUrl = result
  957. } else {
  958. this.dataDetails.addressUrl = this.dataDetails.addressUrl + ',' + result
  959. }
  960. } else if (num == 2) {
  961. if (!this.dataDetails.guaAddressUrl) {
  962. this.dataDetails.guaAddressUrl = result
  963. } else {
  964. this.dataDetails.guaAddressUrl = this.dataDetails.guaAddressUrl + ',' + result
  965. }
  966. }
  967. }
  968. )
  969. },
  970. //车牌号弹出键盘
  971. handleShowKeyboard(index) {
  972. if (this.dataDetails.carNumber == '') {
  973. this.carNumber = ''
  974. } else {
  975. this.carNumber = this.dataDetails.carNumber
  976. }
  977. if (this.$refs.keyboard.open) {
  978. this.$refs.keyboard.open(false) //true 键盘显示 false 键盘隐藏
  979. } else {
  980. this.$refs.keyboard[0].open(false)
  981. }
  982. this.index = index
  983. if (this.$refs.keyboard.open) {
  984. this.$refs.keyboard.open(true) //true 键盘显示 false 键盘隐藏
  985. } else {
  986. this.$refs.keyboard[0].open(true)
  987. }
  988. },
  989. //车牌号弹出键盘
  990. handleClick(e) {
  991. this.carNumber = e.value
  992. this.dataDetails.carNumber = e.value //键盘输入值
  993. },
  994. confirmColor(val) {
  995. this.dataDetails.carNumberColour = val.value[0]
  996. this.carColor = false
  997. },
  998. colorClose() {
  999. this.carColor = false
  1000. },
  1001. selectNoColor() {
  1002. this.carColor = true
  1003. },
  1004. confirmCarModel(val) {
  1005. if (val.value[0] == '挂车') {
  1006. this.dataDetails.useNature = "营业特种车"
  1007. this.dataDetails.guaUseNature = "营运挂车"
  1008. } else if (val.value[0] == '非挂车') {
  1009. this.dataDetails.useNature = "营运货车"
  1010. }
  1011. this.sign = val.value[0]
  1012. // this.dataDetails.carType = val.value[0] + ' ' + val.value[1]
  1013. this.dataDetails.carCategory = val.value[0]
  1014. this.dataDetails.carType = val.value[1]
  1015. this.carModel = false
  1016. },
  1017. carModelClose() {
  1018. this.carModel = false
  1019. },
  1020. selectCarModel() {
  1021. this.carModel = true
  1022. },
  1023. selectNoColor() {
  1024. this.carColor = true
  1025. },
  1026. unloadGroupPhoto() {
  1027. uni.chooseImage({
  1028. count: 1,
  1029. success: function(res) {
  1030. console.log(JSON.stringify(res.tempFilePaths));
  1031. uploadImage('image', res.tempFilePaths[0], 'appData/',
  1032. result => {
  1033. // 上传成功
  1034. console.log('图片地址', result)
  1035. }
  1036. )
  1037. }
  1038. });
  1039. },
  1040. validate() {
  1041. if (uni.$u.test.isEmpty(this.dataDetails.operationCertificate)) {
  1042. this.$refs.uToast.show({
  1043. type: 'error',
  1044. message: "道路运输证不能为空!",
  1045. })
  1046. return true
  1047. }
  1048. if (uni.$u.test.isEmpty(this.dataDetails.operationCertificateNumber)) {
  1049. this.$refs.uToast.show({
  1050. type: 'error',
  1051. message: "道路运输证号不能为空!",
  1052. })
  1053. return true
  1054. }
  1055. if (this.dataDetails.operationCertificateNumber.length!=12) {
  1056. this.$refs.uToast.show({
  1057. type: 'error',
  1058. message: "道路运输证号输入错误!",
  1059. })
  1060. return true
  1061. }
  1062. if (uni.$u.test.isEmpty(this.dataDetails.operationCertificateValidityDate)) {
  1063. this.$refs.uToast.show({
  1064. type: 'error',
  1065. message: "道路运输证有效期不能为空!",
  1066. })
  1067. return true
  1068. }
  1069. if (this.sign == '挂车') {
  1070. if (uni.$u.test.isEmpty(this.dataDetails.trailerOperationCertificate)) {
  1071. this.$refs.uToast.show({
  1072. type: 'error',
  1073. message: "挂车道路运输证不能为空!",
  1074. })
  1075. return true
  1076. }
  1077. if (uni.$u.test.isEmpty(this.dataDetails.trailerOperationCertificateNumber)) {
  1078. this.$refs.uToast.show({
  1079. type: 'error',
  1080. message: "挂车道路运输证号不能为空!",
  1081. })
  1082. return true
  1083. }
  1084. if (this.dataDetails.trailerOperationCertificateNumber.length!=12) {
  1085. this.$refs.uToast.show({
  1086. type: 'error',
  1087. message: "挂车道路运输证号输入错误!",
  1088. })
  1089. return true
  1090. }
  1091. if (uni.$u.test.isEmpty(this.dataDetails.trailerOperationCertificateValidityDate)) {
  1092. this.$refs.uToast.show({
  1093. type: 'error',
  1094. message: "挂车道路运输证有效期不能为空!",
  1095. })
  1096. return true
  1097. }
  1098. }
  1099. if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseHomePage)) {
  1100. this.$refs.uToast.show({
  1101. type: 'error',
  1102. message: "行驶证主页不能为空!",
  1103. })
  1104. return true
  1105. }
  1106. if(!this.dataDetails.vehicleType){
  1107. this.$refs.uToast.show({
  1108. type: 'error',
  1109. message: "行驶证车辆类型不能为空!",
  1110. })
  1111. return true
  1112. }
  1113. if (this.dataDetails.vehicleType.length<2||this.dataDetails.vehicleType.length>10) {
  1114. this.$refs.uToast.show({
  1115. type: 'error',
  1116. message: "行驶证车辆类型输入错误!",
  1117. })
  1118. return true
  1119. }
  1120. if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseNumber)) {
  1121. this.$refs.uToast.show({
  1122. type: 'error',
  1123. message: "行驶证档案编号不能为空!",
  1124. })
  1125. return true
  1126. }
  1127. if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseNumber)) {
  1128. this.$refs.uToast.show({
  1129. type: 'error',
  1130. message: "行驶证档案编号不能为空!",
  1131. })
  1132. return true
  1133. }
  1134. if (this.dataDetails.drivingLicenseNumber.length!=12) {
  1135. this.$refs.uToast.show({
  1136. type: 'error',
  1137. message: "行驶证档案编号输入错误!",
  1138. })
  1139. return true
  1140. }
  1141. if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseRegistrationDate)) {
  1142. this.$refs.uToast.show({
  1143. type: 'error',
  1144. message: "行驶证注册日期不能为空!",
  1145. })
  1146. return true
  1147. }
  1148. if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseIssueDate)) {
  1149. this.$refs.uToast.show({
  1150. type: 'error',
  1151. message: "行驶证发证日期不能为空!",
  1152. })
  1153. return true
  1154. }
  1155. if (uni.$u.test.isEmpty(this.dataDetails.drivingLicenseValidityDate)) {
  1156. this.$refs.uToast.show({
  1157. type: 'error',
  1158. message: "行驶证有效期不能为空!",
  1159. })
  1160. return true
  1161. }
  1162. if (uni.$u.test.isEmpty(this.dataDetails.lssuingAuthority)) {
  1163. this.$refs.uToast.show({
  1164. type: 'error',
  1165. message: "行驶证发证机关不能为空!",
  1166. })
  1167. return true
  1168. }
  1169. if (this.dataDetails.lssuingAuthority.length<5||this.dataDetails.lssuingAuthority.length>25) {
  1170. this.$refs.uToast.show({
  1171. type: 'error',
  1172. message: "行驶证发证机关输入错误!",
  1173. })
  1174. return true
  1175. }
  1176. if (uni.$u.test.isEmpty(this.dataDetails.energyType)) {
  1177. this.$refs.uToast.show({
  1178. type: 'error',
  1179. message: "能源类型不能为空!",
  1180. })
  1181. return true
  1182. }
  1183. if (this.sign == '挂车') {
  1184. if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseHomePage)) {
  1185. this.$refs.uToast.show({
  1186. type: 'error',
  1187. message: "挂车行驶证主页不能为空!",
  1188. })
  1189. return true
  1190. }
  1191. if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseBackPage)) {
  1192. this.$refs.uToast.show({
  1193. type: 'error',
  1194. message: "挂车行驶证副页不能为空!",
  1195. })
  1196. return true
  1197. }
  1198. if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseNumber)) {
  1199. this.$refs.uToast.show({
  1200. type: 'error',
  1201. message: "挂车行驶证档案编号不能为空!",
  1202. })
  1203. return true
  1204. }
  1205. if (this.dataDetails.trailerLicenseNumber.length!=12) {
  1206. this.$refs.uToast.show({
  1207. type: 'error',
  1208. message: "挂车行驶证档案编号输入错误!",
  1209. })
  1210. return true
  1211. }
  1212. if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseRegistrationDate)) {
  1213. this.$refs.uToast.show({
  1214. type: 'error',
  1215. message: "挂车行驶证注册日期不能为空!",
  1216. })
  1217. return true
  1218. }
  1219. if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseIssueDate)) {
  1220. this.$refs.uToast.show({
  1221. type: 'error',
  1222. message: "挂车行驶证发证日期不能为空!!",
  1223. })
  1224. return true
  1225. }
  1226. if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseValidityDate)) {
  1227. this.$refs.uToast.show({
  1228. type: 'error',
  1229. message: "挂车行驶证有效期不能为空!",
  1230. })
  1231. return true
  1232. }
  1233. if (uni.$u.test.isEmpty(this.dataDetails.guaLssuingAuthority)) {
  1234. this.$refs.uToast.show({
  1235. type: 'error',
  1236. message: "挂车行驶证发证机关不能为空!",
  1237. })
  1238. return true
  1239. }
  1240. if (this.dataDetails.guaLssuingAuthority.length<5||this.dataDetails.guaLssuingAuthority.length>25) {
  1241. this.$refs.uToast.show({
  1242. type: 'error',
  1243. message: "挂车行驶证发证机关输入错误!",
  1244. })
  1245. return true
  1246. }
  1247. }
  1248. // true 为校验不通过
  1249. if (uni.$u.test.isEmpty(this.dataDetails.carNumber)) {
  1250. this.$refs.uToast.show({
  1251. type: 'error',
  1252. message: "车牌号不能为空!",
  1253. })
  1254. return true
  1255. }
  1256. if (uni.$u.test.isEmpty(this.dataDetails.owner)) {
  1257. console.log(this.dataDetails.owner)
  1258. this.$refs.uToast.show({
  1259. type: 'error',
  1260. message: "车辆所属车主不能为空!",
  1261. })
  1262. return true
  1263. }
  1264. if (uni.$u.test.isEmpty(this.dataDetails.carTotalWeight) && this.sign == '非挂车') {
  1265. this.$refs.uToast.show({
  1266. type: 'error',
  1267. message: "总质量不能为空!",
  1268. })
  1269. return true
  1270. }
  1271. if (uni.$u.test.isEmpty(this.dataDetails.carTotalWeight)&& this.sign == '非挂车' && this.dataDetails.carTotalWeight<500
  1272. ||uni.$u.test.isEmpty(this.dataDetails.carTotalWeight)&& this.sign == '非挂车' && this.dataDetails.carTotalWeight>60000) {
  1273. this.$refs.uToast.show({
  1274. type: 'error',
  1275. message: "总质量输入错误!",
  1276. })
  1277. return true
  1278. }
  1279. if (uni.$u.test.isEmpty(this.dataDetails.carApprovedWeight) && this.sign == '非挂车') {
  1280. this.$refs.uToast.show({
  1281. type: 'error',
  1282. message: "核定载质量不能为空!",
  1283. })
  1284. return true
  1285. }
  1286. if (uni.$u.test.isEmpty(this.dataDetails.carApprovedWeight)&& this.sign == '非挂车' && this.dataDetails.carApprovedWeight<500||
  1287. uni.$u.test.isEmpty(this.dataDetails.carApprovedWeight) && this.sign == '非挂车' && this.dataDetails.carApprovedWeight>60000) {
  1288. this.$refs.uToast.show({
  1289. type: 'error',
  1290. message: "核定载质量输入错误!",
  1291. })
  1292. return true
  1293. }
  1294. if (uni.$u.test.isEmpty(this.dataDetails.servicingWeight) && this.sign == '挂车') {
  1295. this.$refs.uToast.show({
  1296. type: 'error',
  1297. message: "整备质量不能为空!",
  1298. })
  1299. return true
  1300. }
  1301. if (uni.$u.test.isEmpty(this.dataDetails.carLong) || uni.$u.test.isEmpty(this.dataDetails.carWidth) || uni
  1302. .$u.test.isEmpty(this.dataDetails.carHeight)) {
  1303. this.$refs.uToast.show({
  1304. type: 'error',
  1305. message: "外廓尺寸不能为空!",
  1306. })
  1307. return true
  1308. }
  1309. if (this.sign == '挂车') {
  1310. if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseHomePage)) {
  1311. this.$refs.uToast.show({
  1312. type: 'error',
  1313. message: "挂车行驶证主页不能为空!",
  1314. })
  1315. return true
  1316. }
  1317. if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseBackPage)) {
  1318. this.$refs.uToast.show({
  1319. type: 'error',
  1320. message: "挂车行驶证副页不能为空!",
  1321. })
  1322. return true
  1323. }
  1324. if (uni.$u.test.isEmpty(this.dataDetails.trailerLicenseNumber)) {
  1325. this.$refs.uToast.show({
  1326. type: 'error',
  1327. message: "挂车行驶证档案编号不能为空!",
  1328. })
  1329. return true
  1330. }
  1331. if (uni.$u.test.isEmpty(this.dataDetails.guaCarNumber)) {
  1332. this.$refs.uToast.show({
  1333. type: 'error',
  1334. message: "挂车车牌号不能为空!",
  1335. })
  1336. return true
  1337. }
  1338. if (uni.$u.test.isEmpty(this.dataDetails.guaOwner)) {
  1339. this.$refs.uToast.show({
  1340. type: 'error',
  1341. message: "车辆所属车主不能为空!",
  1342. })
  1343. return true
  1344. }
  1345. if (uni.$u.test.isEmpty(this.dataDetails.guaServicingWeight)) {
  1346. this.$refs.uToast.show({
  1347. type: 'error',
  1348. message: "挂车整备质量不能为空!",
  1349. })
  1350. return true
  1351. }
  1352. if (uni.$u.test.isEmpty(this.dataDetails.guaCarApprovedWeight)) {
  1353. this.$refs.uToast.show({
  1354. type: 'error',
  1355. message: "挂车核定载质量不能为空!",
  1356. })
  1357. return true
  1358. }
  1359. if (this.dataDetails.guaCarApprovedWeight<500||this.dataDetails.guaCarApprovedWeight>60000) {
  1360. this.$refs.uToast.show({
  1361. type: 'error',
  1362. message: "挂车核定载质量输入错误!",
  1363. })
  1364. return true
  1365. }
  1366. if (uni.$u.test.isEmpty(this.dataDetails.guaCarLong) || uni.$u.test.isEmpty(this.dataDetails.guaCarWidth) || uni.$u.test.isEmpty(this.dataDetails.guaCarHeight)) {
  1367. this.$refs.uToast.show({
  1368. type: 'error',
  1369. message: "挂车外廓尺寸不能为空!",
  1370. })
  1371. return true
  1372. }
  1373. if (this.fileList1.length == 0) {
  1374. this.$refs.uToast.show({
  1375. type: 'error',
  1376. message: "请上传人和牵引车合影!",
  1377. })
  1378. return true
  1379. }
  1380. if (this.fileList2.length == 0) {
  1381. this.$refs.uToast.show({
  1382. type: 'error',
  1383. message: "请上传人和挂车合影!",
  1384. })
  1385. return true
  1386. }
  1387. }
  1388. return false
  1389. },
  1390. submit() {
  1391. this.dataDetails.driverId = uni.getStorageSync("firstAuthentication").id
  1392. // 校验
  1393. if (this.validate()) return
  1394. if (!this.dataDetails.carApprovedWeight) {
  1395. delete this.dataDetails.carApprovedWeight
  1396. }
  1397. if(this.dataDetails.carCategory == "非挂车"){
  1398. delete this.dataDetails.guaUseNature
  1399. }
  1400. if(this.dataDetails.carCategory == "挂车"){
  1401. if(this.dataDetails.guaCarNumber.indexOf('挂')==-1){
  1402. this.dataDetails.guaCarNumber=this.dataDetails.guaCarNumber+'挂'
  1403. }
  1404. }
  1405. uni.showLoading({
  1406. mask: true,
  1407. title: '加载中'
  1408. })
  1409. this.$request.baseRequest('post', '/driverCarInfo/api/addInfo', this.dataDetails).then(res => {
  1410. if (res.code == '200') {
  1411. uni.hideLoading()
  1412. this.$refs.uToast.show({
  1413. type: 'success',
  1414. message: "提交成功!",
  1415. complete() {
  1416. uni.navigateBack({
  1417. delta: 1
  1418. });
  1419. // uni.$u.route('/pages/mine/manageVehicles/index');
  1420. }
  1421. })
  1422. // this.$refs.uToast.show({
  1423. // ...params
  1424. // })
  1425. // uni.$u.route('/pages/mine/manageVehicles/index');
  1426. } else if (res.code == '400'){
  1427. uni.$u.toast('您输入的内容有问题,请检查后重新提交');
  1428. }else{
  1429. uni.$u.toast(res.message);
  1430. }
  1431. })
  1432. .catch(res => {
  1433. console.log(res)
  1434. uni.$u.toast(res.message);
  1435. });
  1436. },
  1437. },
  1438. }
  1439. </script>
  1440. <style lang="scss" scoped>
  1441. .container {
  1442. margin: 20rpx;
  1443. background: white;
  1444. padding: 0 20rpx;
  1445. border-radius: 20rpx;
  1446. padding-bottom: 200rpx;
  1447. .left-text {
  1448. // background: red;
  1449. width: 176px;
  1450. color: #333333;
  1451. display: flex;
  1452. align-items: center;
  1453. }
  1454. .row {
  1455. border-bottom: 1px solid #EEEEEE;
  1456. padding-bottom: 28rpx;
  1457. margin-top: 26rpx;
  1458. .ch-style {}
  1459. }
  1460. .row-ch {
  1461. padding-right: 250rpx;
  1462. box-sizing: border-box;
  1463. }
  1464. .row {
  1465. border-bottom: 1px solid #EEEEEE;
  1466. padding-bottom: 28rpx;
  1467. margin-top: 26rpx;
  1468. }
  1469. .left-text {
  1470. // background: red;
  1471. width: 320rpx;
  1472. color: #333333;
  1473. display: flex;
  1474. align-items: center;
  1475. }
  1476. .picture {
  1477. position: relative;
  1478. width: 100%;
  1479. height: 440rpx;
  1480. display: flex;
  1481. justify-content: center;
  1482. flex-direction: column;
  1483. align-items: center;
  1484. .text {
  1485. margin-top: 20rpx;
  1486. }
  1487. }
  1488. .picture1 {
  1489. background: url(../../../static/images/mine/jzz.png);
  1490. background-size: 100% 100%;
  1491. }
  1492. .picture2 {
  1493. background: url(../../../static/images/mine/jzf.png);
  1494. background-size: 100% 100%;
  1495. }
  1496. .picture3 {
  1497. background: url(../../../static/images/mine/xsz.png);
  1498. background-size: 100% 100%;
  1499. }
  1500. .picture4 {
  1501. background: url(../../../static/images/mine/xsf.png);
  1502. background-size: 100% 100%;
  1503. }
  1504. .picture5 {
  1505. background: url(../../../static/images/mine/gcxsz.png);
  1506. background-size: 100% 100%;
  1507. }
  1508. .picture6 {
  1509. background: url(../../../static/images/mine/gcxsf.png);
  1510. background-size: 100% 100%;
  1511. }
  1512. .picture7 {
  1513. background: url(../../../static/images/mine/cy.png);
  1514. background-size: 100% 100%;
  1515. }
  1516. .picture8 {
  1517. background: url(../../../static/images/mine/cy.png);
  1518. background-size: 100% 100%;
  1519. }
  1520. .picture9 {
  1521. background: url(../../../static/images/mine/cy.png);
  1522. background-size: 100% 100%;
  1523. }
  1524. .xj-image {
  1525. width: 100rpx;
  1526. height: 100rpx;
  1527. }
  1528. .title {
  1529. color: #999999;
  1530. margin: 20rpx 0;
  1531. }
  1532. }
  1533. .input-ckg {
  1534. height: 86rpx;
  1535. margin-top: 0 !important;
  1536. padding-bottom: 0 !important;
  1537. .u-input {
  1538. height: 100%;
  1539. background: #F7F8FA;
  1540. padding-left: 10rpx !important;
  1541. padding-right: 85rpx !important;
  1542. }
  1543. .star {
  1544. display: flex;
  1545. align-items: center;
  1546. margin: 0 10rpx;
  1547. }
  1548. .input-positon {
  1549. position: relative;
  1550. }
  1551. .position-right {
  1552. position: absolute;
  1553. right: 20rpx;
  1554. top: 0;
  1555. width: 60rpx;
  1556. height: 50rpx;
  1557. bottom: 0;
  1558. margin: auto;
  1559. }
  1560. }
  1561. .picture {
  1562. margin-top: 20rpx;
  1563. background: #F5F6FA;
  1564. width: 212rpx;
  1565. height: 212rpx;
  1566. border-radius: 10rpx;
  1567. display: flex;
  1568. flex-direction: column;
  1569. justify-content: center;
  1570. align-items: center;
  1571. color: #6A7282;
  1572. }
  1573. .submit-btn-wrap{
  1574. position: fixed;
  1575. z-index:1000;
  1576. bottom:0;left:0;
  1577. width:100%;
  1578. padding:40rpx 0;
  1579. background:#fff;
  1580. }
  1581. .submit-btn {
  1582. bottom: 40rpx;
  1583. width: 90%;
  1584. background: #2772FB;
  1585. color: white;
  1586. text-align: center;
  1587. margin:0 auto;
  1588. padding: 30rpx 0;
  1589. border-radius: 50rpx;
  1590. }
  1591. .del-card {
  1592. position: absolute;
  1593. top: -10rpx;
  1594. right: -6rpx;
  1595. width: 80rpx;
  1596. height: 80rpx;
  1597. z-index: 9;
  1598. }
  1599. /deep/.uni-input-input:disabled{
  1600. background:transparent;
  1601. }
  1602. .phsy {
  1603. // font-size: 20px !important;
  1604. color: #999 !important
  1605. }
  1606. .car-uumber{
  1607. text-align:right;
  1608. }
  1609. </style>