car-number-input.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. <template>
  2. <view>
  3. <view class="car-input-container">
  4. <view class="car-input-box"
  5. v-for="(item,index) in inputList" :key="index" @click="plateInput(index)">
  6. <view class="car-input-item"
  7. :class="[curInput == index?'sel-item':'',(maxNum-1) == index?'last-item':'']" >
  8. <view :class="curInput == index?'sel-item-line':''"></view>
  9. <img :src="xnyImgBase64" class="new-item-img" v-if="(maxNum-1) == index"/>
  10. {{item}}
  11. </view>
  12. </view>
  13. </view>
  14. <view class="car-number-container" v-if="showKeyPop1">
  15. <view class="plate-close" @click="closeKeyboard"><text class="plate-close-btn">关闭</text></view>
  16. <view class="plate-popup-list">
  17. <view class="plate-popup-item province-item" v-for="(item,index) in keyProvince1" :key="index" @click="tapKeyboard(item)">{{item}}</view>
  18. </view>
  19. <view class="plate-popup-list">
  20. <view class="plate-popup-item province-item" v-for="(item,index) in keyProvince2" :key="index" @click="tapKeyboard(item)">{{item}}</view>
  21. </view>
  22. <view class="plate-popup-list">
  23. <view class="plate-popup-item province-item" v-for="(item,index) in keyProvince3" :key="index" @click="tapKeyboard(item)">{{item}}</view>
  24. </view>
  25. <view class="plate-popup-list">
  26. <view class="plate-popup-item province-item" v-for="(item,index) in keyProvince4" :key="index" @click="tapKeyboard(item)">{{item}}</view>
  27. <!-- 删除 -->
  28. <view class="plate-popup-item province-item del" @click="onPlateDelTap">
  29. <image :src="deleteImgBase64" />
  30. </view>
  31. </view>
  32. </view>
  33. <view class="car-number-container" v-if="showKeyPop2">
  34. <view class="plate-close" @click="closeKeyboard"><text class="plate-close-btn">关闭</text></view>
  35. <view class="plate-popup-list">
  36. <view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''"
  37. v-for="(item,index) in keyEnInput1" :key="index" @click="tapKeyboard(item)">
  38. {{item}}
  39. </view>
  40. </view>
  41. <view class="plate-popup-list">
  42. <view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''"
  43. v-for="(item,index) in keyEnInput2" :key="index" @click="tapKeyboard(item)">
  44. {{item}}
  45. </view>
  46. </view>
  47. <view class="plate-popup-list">
  48. <view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''"
  49. v-for="(item,index) in keyEnInput3" :key="index" @click="tapKeyboard(item)">
  50. {{item}}
  51. </view>
  52. </view>
  53. <view class="plate-popup-list">
  54. <view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''"
  55. v-for="(item,index) in keyEnInput4" :key="index" @click="tapKeyboard(item)">
  56. {{item}}
  57. </view>
  58. <!-- 删除 -->
  59. <view class="plate-popup-item del" @click="onPlateDelTap">
  60. <image :src="deleteImgBase64" />
  61. </view>
  62. </view>
  63. </view>
  64. </view>
  65. </template>
  66. <script>
  67. export default {
  68. name: 'car-number-input',
  69. emits: ['numberInputResult'],
  70. props: {
  71. defaultStr:{
  72. type: String,
  73. default: ''
  74. },
  75. plateNum: {
  76. type: String,
  77. default: ''
  78. },
  79. // maxNum: {
  80. // type: Number,
  81. // default: 8
  82. // },
  83. },
  84. data() {
  85. return {
  86. inputList:[" "," "," "," "," "," "," "," "],
  87. curInput:-1,
  88. maxNum:8,
  89. showKeyPop1:false,
  90. showKeyPop2:false,
  91. keyProvince1: ['京', '津', '晋', '冀', '蒙', '辽', '吉', '黑', '沪'],
  92. keyProvince2: ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
  93. keyProvince3: ['粤', '桂', '琼', '渝', '川', '贵', '云', '藏'],
  94. keyProvince4: ['陕', '甘', '青', '宁', '新', 'W' ],
  95. keyEnInput1: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
  96. keyEnInput2: ["Q", "W", "E", "R", "T", "Y", "U", "P", "学", "军"],
  97. keyEnInput3: ["A", "S", "D", "F", "G", "H", "J", "K", "L", "警"],
  98. keyEnInput4: ["Z", "X", "C", "V", "B", "N", "M", "港", "澳"],
  99. lockInput: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
  100. xnyImgBase64:"data:image/png;base64,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PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjItMDktMTlUMTU6MDQ6NDQrMDg6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjItMDktMTlUMTU6MDQ6NDQrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIyLTA5LTE5VDE1OjA0OjQ0KzA4OjAwIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmNjMmVkZmYwLTk0NjktNGJhNC1hODc2LWVkYmJlZjRhYjk0MyIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmJkYTBhZTk3LWFmZWYtOWI0Ni1iOGFhLWZjOTMyMmM5OTk0NCIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjM1N2JlZGY2LTI5YWUtNGJmNS04YjQwLTVlMWQ5YjNlMmJmZiIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9IkRpc3BsYXkiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDozNTdiZWRmNi0yOWFlLTRiZjUtOGI0MC01ZTFkOWIzZTJiZmYiIHN0RXZ0OndoZW49IjIwMjItMDktMTlUMTU6MDQ6NDQrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChNYWNpbnRvc2gpIi8+IDxyZGY6bGkgc3RFdnQ6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",
  101. deleteImgBase64:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAABIBJREFUaEPtWFtoHFUY/v/d9cWAERH1xQvqg60gIl5AFPTBYJrW/OekG5X40FpaabVWxCqCVqt4reCFVn2IbR684ZD5Z0fb4KVQUFtRQp8qXpCCkaKICj4kojvz21PPluNmsnPZTUJg521nz3c7/zlz/hmEJX7hEvcP3QCLXcFuBboVaHMGCi8hIuoHgGva1M8ML5VKv8VxfDAIgkkXVCgAEb2LiLdmVu/swENRFK0Nw/BbQ5s7ABHtQsRNnfWUn61SqZzved6PuQIQ0ROI+KgjdyC/dDEEIp4hIpc56L3MvDJzACLagogvNQhE5JOpqakVk5OT/xSzlB+ltb5KRL50kNdmCqCUGgGANx3zh+M47g/D8Jf8NtpDaK33iMgay3J/agCl1M0A8AEAlE9sGsSjURStrNVqX7dnpRiaiB5HxMcMWkS2twxgS2bMn2Xl/gCAW5j5s2Ly7aMyB9BaXygi7wPAcisrAKCYuda+jeIMmQKMjIycNj09bWb+ekdqHTPvLi7dGWSmAFprFhFyJLcy8wtFLGitXxSRY8y8Yy68PVuqAHAdM3/XSic1ABGNIuI6h+QpZn6kiHkiuh0R37ZYj5mHm3mUUq8DwF32/gFmvrFwAKXUswDwkEOwi5nvKWLeYAYHB5eXSqUjDv5/IZoPxlKpNDA+Pr6vUACl1FYAeN4Bv8XMdxQ138AppczSeK85BBFtRMRXnfsbmdlUo+WVuISUUncCwBsOcm9vb+/qsbGxv9IIs/yfFAIATLATFyJu833/ySxcswJUq9WL6/X69w748yiKhsMwPJaFMOuYhBAN8zt939+clWdWAPfG8Vk5Esfx8HydsnMtp6zmzbikAJcj4mGH5NNKpTLsed7PeYjTxmqtB0TE7IVTm8YmPp3m4kvcA0T0HCI+6KzJoFwur/Y8L0ozluV/IroBET0AONOO/wYALmne2Bm5knuhhOf/bmZ2z4Ms/LPGDA0NXRlF0Tginmf//CmO4xXmkQkAz+QN0fIgIyJGRPcE3sHMJyuTN0FfX19PT0/PVwCwzGJNMzjAzIfMb631ZhF5xan8mO/7a1vppAU4HQBCRHR7oIeZ2Rxwua+mF5C/RWRVEAQfuURa6zUissfe+5WZG51vol6WVuIiRDQd56XOzKz3fX80d4L/ZvkLETlbRB4IgmA8iYOICBG3mJai7V7IPqqutiHOsYKx8bLYrbT1lu2Fxr6JhQBwSqO8pr1prN8i1egEJnUJuSIJ78LmW8xAEAQ/dMJMEY5cAYyAUupeAHjZ2Q8HZ2Zm+icmJv4sYqBdTO4ANsR2ANjmiNeY2X3ctusrM75QABtiJwDc7SiNMvP6zModGqiUOgoAF1i64dTPKk174h0AuM2597SIfNwhby1pzJc5RFzlfBMybfi5uQJUq9VyvV6fAICbFsJ0Kw0R2RQEwWu5AtilZE5KE+KKRQwRMvOg0c8dwIZYhoj3Hf/asGEBQ/wOAB+KyP4gCE6+PRYKsICmU6W6AVKnaJ4HdCswzxOcSt+tQOoUzfOAJV+BfwFJgQjZBThXGAAAAABJRU5ErkJggg=="
  102. }
  103. },
  104. watch: {
  105. defaultStr(val) {
  106. if(val != "" && val != null){
  107. const valList = val.split("")
  108. for (let i in valList) {
  109. this.inputList[i] = valList[i]
  110. }
  111. this.inputList.splice()
  112. }
  113. },
  114. curInput(val){
  115. this.showOrHidePop(val)
  116. this.keyEnInput2 = ["Q", "W", "E", "R", "T", "Y", "U", "O", "P", "军"]
  117. switch(val){
  118. case 1:
  119. this.lockInput = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "学", "军", "警", "港", "澳"]
  120. break
  121. case 2:
  122. this.lockInput = ["O", "学", "军", "警", "港", "澳"]
  123. break
  124. case 3:
  125. this.lockInput = ["O", "学", "军", "警", "港", "澳"]
  126. break
  127. case 4:
  128. this.lockInput = ["O", "学", "军", "警", "港", "澳"]
  129. break
  130. case 5:
  131. this.lockInput = ["O", "学", "军", "警", "港", "澳"]
  132. break
  133. case 6:
  134. this.lockInput = ["O"]
  135. this.keyEnInput2 = ["Q", "W", "E", "R", "T", "Y", "U", "P", "学", "军"]
  136. break
  137. case 7:
  138. this.lockInput = ["O", "学", "军", "警", "港", "澳"]
  139. break
  140. default:
  141. this.lockInput = []
  142. break
  143. }
  144. }
  145. },
  146. created() {
  147. if(this.defaultStr != "" && this.defaultStr != null){
  148. const valList = this.defaultStr.split("")
  149. for (let i in valList) {
  150. this.inputList[i] = valList[i]
  151. }
  152. }
  153. },
  154. methods: {
  155. plateInput(e){
  156. this.curInput = e
  157. this.showOrHidePop(e)
  158. },
  159. showOrHidePop(val){
  160. if(val == -1){
  161. this.showKeyPop1 = false
  162. this.showKeyPop2 = false
  163. this.$emit("show",false)
  164. }else if(val == 0){
  165. this.showKeyPop1 = true
  166. this.showKeyPop2 = false
  167. this.$emit("show",true)
  168. }else{
  169. this.showKeyPop1 = false
  170. this.showKeyPop2 = true
  171. this.$emit("show",true)
  172. }
  173. },
  174. tapKeyboard(e){
  175. if(this.lockInput.includes(e)){
  176. return
  177. }
  178. this.inputList[this.curInput] = e
  179. if(this.curInput < this.maxNum-2){
  180. this.curInput++
  181. }else{
  182. this.curInput = -1
  183. }
  184. this.emitResult()
  185. },
  186. closeKeyboard(){
  187. this.curInput = -1
  188. },
  189. onPlateDelTap(){
  190. this.inputList[this.curInput] = " "
  191. this.curInput--
  192. this.emitResult()
  193. },
  194. emitResult(){
  195. const returnResult = this.inputList.join("")
  196. this.$emit('numberInputResult', returnResult.replace(/\s+/g,''));
  197. }
  198. }
  199. };
  200. </script>
  201. <style scoped lang="scss">
  202. .car-input-container{
  203. position: relative;
  204. .car-input-box{
  205. display: inline-block;
  206. width: 12.5%;
  207. height: 39px;
  208. vertical-align: middle;
  209. .car-input-item{
  210. position: relative;
  211. border: 1px solid #E2E2E2;
  212. height: 40px;
  213. line-height: 40px;
  214. margin-left: 3px;
  215. text-align: center;
  216. font-size: 14px;
  217. .sel-item-line{
  218. position: absolute;
  219. bottom: 3px;
  220. left: 15%;
  221. height: 2px;
  222. background-color: #2979ff;
  223. width: 70%;
  224. }
  225. .new-item-img{
  226. position: absolute;
  227. top: -6px;
  228. left: 50%;
  229. margin-left: -15px;
  230. height: 13px;
  231. width: 30px;
  232. z-index: 9;
  233. }
  234. }
  235. .sel-item{
  236. color: #2979ff;
  237. }
  238. .last-item{
  239. border: 1px solid #18bc37;
  240. }
  241. }
  242. }
  243. .car-number-container{
  244. position: fixed;
  245. z-index: 999;
  246. bottom: 0;
  247. left: 0;
  248. width: 100%;
  249. height: 254px;
  250. background-color: #e8e8e8;
  251. -webkit-box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
  252. box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
  253. overflow: hidden;
  254. text-align: center;
  255. .plate-close{
  256. height: 40px;
  257. line-height: 40px;
  258. text-align: right;
  259. background-color: #FFF;
  260. .plate-close-btn{
  261. font-size: 13.5px;
  262. color: #555;
  263. margin-right: 15px;
  264. }
  265. }
  266. //键盘主体内容-单行
  267. .plate-popup-list {
  268. margin: 0 auto;
  269. overflow: hidden;
  270. display: inline-block;
  271. display: table;
  272. &:last-child {
  273. margin-bottom: 2px;
  274. }
  275. }
  276. //键盘主体内容-单个
  277. .plate-popup-item {
  278. float: left;
  279. font-size: 16px;
  280. width: 8vw;
  281. margin: 0 1vw;
  282. margin-top: 8px;
  283. height: 40px;
  284. line-height: 40px;
  285. background: #FFFFFF;
  286. border-radius: 5px;
  287. color: #4A4A4A;
  288. box-shadow: 0 0 3px #c1c1c1;
  289. image {
  290. width: 20px;
  291. height: 20px;
  292. margin: 10px auto;
  293. }
  294. }
  295. .plate-popup-item:active{
  296. background-color: #EAEAEA;
  297. }
  298. .plate-popup-item.del{
  299. background-color: #dadada;
  300. }
  301. .province-item{
  302. width: 8.8vw;
  303. }
  304. .lock-item{
  305. color: #AAA;
  306. }
  307. }
  308. </style>