addVehicle.vue 57 KB

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