LicensePlatNum.vue 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371
  1. <template>
  2. <div class="license-plate-panel">
  3. <div class="input-area">
  4. <div v-for="(num, index) in 8" :key="num" @click="selectHandle(index)" :class="{ active: selected === index }" class="input-text">
  5. {{ licensePlate[index] }}
  6. </div>
  7. </div>
  8. <div class="keyboard-panel">
  9. <div class="tool-bar">
  10. <div @click="cancelHandle">取消</div>
  11. <div @click="okHandle" class="btn-ok" :class="{ right: isRight }">
  12. 确定
  13. </div>
  14. </div>
  15. <div class="text-panel">
  16. <div class="row" v-if="selected !== 0">
  17. <div class="text-key" v-for="text in carNum" :key="text" @click="numHandle(text)" :class="{'disabled': numDisable}">
  18. {{ text }}
  19. </div>
  20. </div>
  21. <div class="row" v-for="(keys, row) in carTxt" :key="row" v-if="selected === 0">
  22. <div v-for="text in keys" :key="text" @click="keyHandle(text)" class="text-key" :class="{'selected': licensePlate[selected] === text}">
  23. {{ text }}
  24. </div>
  25. <template v-if="row === carTxt.length - 1">
  26. <div style="flex: 1"></div>
  27. <div class="text-key del-key" @click="deleteKey()">
  28. 删除
  29. </div>
  30. </template>
  31. </div>
  32. <div class="row" v-for="(keys2, row2) in carLetter" :key="row2" v-if="selected !== 0">
  33. <div v-for="text in keys2" :key="text" @click="keyHandle(text)"
  34. :class="{'text-key': true,
  35. 'disabled': false ,
  36. 'selected': licensePlate[selected] === text
  37. }">
  38. {{ text }}
  39. </div>
  40. <template v-if="row2 === carLetter.length - 1">
  41. <div style="flex: 1"></div>
  42. <div class="text-key del-key" @click="deleteKey()">
  43. 删除
  44. </div>
  45. </template>
  46. </div>
  47. </div>
  48. </div>
  49. </div>
  50. </template>
  51. <script>
  52. export default {
  53. name: 'LicensePlatNum',
  54. props: {
  55. code: {
  56. type: [String,Object],
  57. default: ''
  58. }
  59. },
  60. watch: {
  61. code: {
  62. handler(newVal,oldVal) {
  63. console.log(newVal,'nnnnnnnn')
  64. console.log('nnnnnnnn1111111')
  65. const codes = newVal.split('');
  66. for (let i = 0; i < 8; i++) {
  67. this.licensePlate[i] = codes[i] || '';
  68. }
  69. let index = codes.length - 1;
  70. if (index < 0) {
  71. index = 0;
  72. }
  73. this.selectHandle(index);
  74. },
  75. immediate: true,
  76. deep: true
  77. }
  78. },
  79. data() {
  80. return {
  81. licensePlate: {
  82. 0: '',
  83. 1: '',
  84. 2: '',
  85. 3: '',
  86. 4: '',
  87. 5: '',
  88. 6: '',
  89. 7: ''
  90. },
  91. selected: 0,
  92. keyRows: [],
  93. keyLast: [],
  94. carTxt: [
  95. ['陕', '京', '沪', '粤', '津', '冀', '豫', '云', '辽', '黑'],
  96. ['皖', '鲁', '苏', '浙', '赣', '鄂', '桂', '甘', '晋', '湘'],
  97. ['蒙', '吉', '闽', '贵', '渝', '川', '青', '琼', '宁', '藏'],
  98. [ '新', '使', '领']
  99. ],
  100. numDisable: true,
  101. disableList: {
  102. // 1: ['Z']
  103. },
  104. carNum: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
  105. carLetter: [
  106. ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K'],
  107. ['L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V'],
  108. ['W', 'X', 'Y', 'Z'],
  109. ['挂', '学', '警', '港', '澳']
  110. ]
  111. };
  112. },
  113. computed: {
  114. isRight() {
  115. // const val = Object.values(this.licensePlate).join('');
  116. // return /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/.test(
  117. // val
  118. // );
  119. return true
  120. }
  121. },
  122. mounted() {
  123. const codes = this.code.split('');
  124. for (let i = 0; i < 8; i++) {
  125. this.licensePlate[i] = codes[i] || '';
  126. }
  127. let index = codes.length - 1;
  128. if (index < 0) {
  129. index = 0;
  130. }
  131. this.selectHandle(index);
  132. },
  133. methods: {
  134. getStyle(item) {
  135. return 'disable';
  136. // return {
  137. // 'text-key-last': this.selected === 0,
  138. // 'disable': !this.isEnable(item),
  139. // 'selected': this.licensePlate[this.selected] === item
  140. // };
  141. },
  142. getNumStyle(item) {
  143. return {
  144. disable: this.numDisable,
  145. selected: this.licensePlate[this.selected] === item
  146. };
  147. },
  148. isEnable(item) {
  149. const _dis = this.disableList[this.selected];
  150. console.log(item,_dis,'-------')
  151. if (_dis) {
  152. console.log(_dis.indexOf(item) !== -1, item);
  153. return _dis.indexOf(item) !== -1;
  154. }
  155. return false;
  156. },
  157. selectHandle(item) {
  158. this.selected = item;
  159. console.log(item,this.selected, '-------index------')
  160. if (item === 0) {
  161. // this.keyRows = this.carTxt;
  162. } else {
  163. // this.keyRows = this.carLetter;
  164. this.numDisable = item === 1;
  165. }
  166. },
  167. keyHandle(text) {
  168. console.log(text,'ttttttt')
  169. if (!this.isEnable(text)) {
  170. this.licensePlate[this.selected] = text;
  171. const next = this.selected + 1;
  172. if (next <= 7) {
  173. this.selectHandle(next);
  174. }
  175. }
  176. },
  177. numHandle(text) {
  178. if (!this.numDisable) {
  179. this.licensePlate[this.selected] = text;
  180. const next = this.selected + 1;
  181. if (next <= 7) {
  182. this.selectHandle(next);
  183. }
  184. }
  185. },
  186. deleteKey() {
  187. if (this.licensePlate[this.selected] !== '') {
  188. this.licensePlate[this.selected] = '';
  189. } else if (this.selected !== 0) {
  190. this.selectHandle(this.selected - 1);
  191. this.licensePlate[this.selected] = '';
  192. }
  193. },
  194. cancelHandle() {
  195. this.claer();
  196. this.$emit('cancel');
  197. },
  198. claer() {
  199. this.licensePlate = {
  200. 0: '',
  201. 1: '',
  202. 2: '',
  203. 3: '',
  204. 4: '',
  205. 5: '',
  206. 6: '',
  207. 7: ''
  208. };
  209. this.selected = 0;
  210. },
  211. okHandle() {
  212. if (this.isRight) {
  213. const val = Object.values(this.licensePlate).join('');
  214. this.claer();
  215. this.$emit('ok', val);
  216. }
  217. }
  218. }
  219. };
  220. </script>
  221. <style lang="less">
  222. .license-plate-panel {
  223. position: absolute;
  224. left: 0;
  225. right: 0;
  226. bottom: 0;
  227. z-index: 10000;
  228. background-color: #fff;
  229. border-top: 1px solid #ddd;
  230. .input-area {
  231. display: flex;
  232. padding: 5vh 0;
  233. box-sizing: border-box;
  234. justify-content: center;
  235. .input-text {
  236. width: 10vw;
  237. height: 10vw;
  238. line-height: 10vw;
  239. box-sizing: border-box;
  240. border-top: 1px solid #dcdee2;
  241. border-right: 1px solid #dcdee2;
  242. border-bottom: 1px solid #dcdee2;
  243. text-align: center;
  244. font-size: 32upx;
  245. &.active {
  246. border: 1px solid #2db7f5 !important;
  247. }
  248. &:first-child {
  249. overflow: hidden;
  250. position: relative;
  251. &::after {
  252. content: '';
  253. position: absolute;
  254. bottom: -5px;
  255. right: -5px;
  256. width: 10px;
  257. height: 10px;
  258. background-color: #dcdee2;
  259. transform: rotate(45deg);
  260. }
  261. &.active::after {
  262. background-color: #2db7f5;
  263. }
  264. }
  265. &:last-child {
  266. margin-left: 5px;
  267. border: 1px dashed #dcdee2;
  268. &.active {
  269. border: 1px dashed #2db7f5 !important;
  270. }
  271. }
  272. &:nth-child(2) {
  273. margin-right: 25px;
  274. position: relative;
  275. &::after {
  276. content: '';
  277. position: absolute;
  278. border-radius: 50%;
  279. top: 50%;
  280. right: -15px;
  281. transform: translateY(-50%);
  282. width: 5px;
  283. height: 5px;
  284. background-color: #000;
  285. }
  286. }
  287. &:first-child, &:nth-child(3) {
  288. border-left: 1px solid #dcdee2;
  289. }
  290. }
  291. }
  292. .keyboard-panel {
  293. position: relative;
  294. bottom: 0;
  295. border-top: 1px solid #eef0f4;
  296. background: #eeeeee;
  297. box-sizing: border-box;
  298. width: 100%;
  299. .tool-bar {
  300. display: flex;
  301. font-size: 32upx;
  302. justify-content: space-between;
  303. background-color: #fff;
  304. padding: 10px 15px;
  305. }
  306. .text-panel {
  307. padding: 0 1vw 5px 1vw;
  308. }
  309. .row {
  310. display: flex;
  311. margin: 1vw 0;
  312. }
  313. .text-key {
  314. display: inline-block;
  315. text-align: center;
  316. font-size: 32upx;
  317. width: 8.8vw;
  318. margin: 0 0.5vw;
  319. padding: 10px 0;
  320. box-shadow: 0 1px 2px #dddddd;
  321. border-radius: 4px;
  322. background-color: #ffffff;
  323. text-align: center;
  324. flex-shrink: 0;
  325. flex-grow: 0;
  326. }
  327. .text-key.disabled {
  328. background-color: #f1f1f1;
  329. color: #bebebe;
  330. }
  331. .text-key.selected {
  332. background-color: #2db7f5;
  333. color: #fff;
  334. }
  335. .del-key {
  336. width: 19vw;
  337. color: red;
  338. }
  339. .btn-ok {
  340. color: #c5c8ce;
  341. &.right {
  342. color: #00aaff;
  343. }
  344. }
  345. }
  346. }
  347. </style>