editVehicle.vue 56 KB

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