editVehicle.vue 56 KB

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