editVehicle.vue 55 KB

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