123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371 |
- <template>
- <div class="license-plate-panel">
- <div class="input-area">
- <div v-for="(num, index) in 8" :key="num" @click="selectHandle(index)" :class="{ active: selected === index }" class="input-text">
- {{ licensePlate[index] }}
- </div>
- </div>
- <div class="keyboard-panel">
- <div class="tool-bar">
- <div @click="cancelHandle">取消</div>
- <div @click="okHandle" class="btn-ok" :class="{ right: isRight }">
- 确定
- </div>
- </div>
- <div class="text-panel">
- <div class="row" v-if="selected !== 0">
- <div class="text-key" v-for="text in carNum" :key="text" @click="numHandle(text)" :class="{'disabled': numDisable}">
- {{ text }}
- </div>
- </div>
- <div class="row" v-for="(keys, row) in carTxt" :key="row" v-if="selected === 0">
- <div v-for="text in keys" :key="text" @click="keyHandle(text)" class="text-key" :class="{'selected': licensePlate[selected] === text}">
- {{ text }}
- </div>
- <template v-if="row === carTxt.length - 1">
- <div style="flex: 1"></div>
- <div class="text-key del-key" @click="deleteKey()">
- 删除
- </div>
- </template>
- </div>
- <div class="row" v-for="(keys2, row2) in carLetter" :key="row2" v-if="selected !== 0">
- <div v-for="text in keys2" :key="text" @click="keyHandle(text)"
- :class="{'text-key': true,
- 'disabled': false ,
- 'selected': licensePlate[selected] === text
- }">
- {{ text }}
- </div>
- <template v-if="row2 === carLetter.length - 1">
- <div style="flex: 1"></div>
- <div class="text-key del-key" @click="deleteKey()">
- 删除
- </div>
- </template>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: 'LicensePlatNum',
- props: {
- code: {
- type: [String,Object],
- default: ''
- }
- },
- watch: {
- code: {
- handler(newVal,oldVal) {
- console.log(newVal,'nnnnnnnn')
- console.log('nnnnnnnn1111111')
- const codes = newVal.split('');
- for (let i = 0; i < 8; i++) {
- this.licensePlate[i] = codes[i] || '';
- }
- let index = codes.length - 1;
- if (index < 0) {
- index = 0;
- }
- this.selectHandle(index);
- },
- immediate: true,
- deep: true
- }
- },
- data() {
- return {
- licensePlate: {
- 0: '',
- 1: '',
- 2: '',
- 3: '',
- 4: '',
- 5: '',
- 6: '',
- 7: ''
- },
- selected: 0,
- keyRows: [],
- keyLast: [],
- carTxt: [
- ['陕', '京', '沪', '粤', '津', '冀', '豫', '云', '辽', '黑'],
- ['皖', '鲁', '苏', '浙', '赣', '鄂', '桂', '甘', '晋', '湘'],
- ['蒙', '吉', '闽', '贵', '渝', '川', '青', '琼', '宁', '藏'],
- [ '新', '使', '领']
- ],
- numDisable: true,
- disableList: {
- // 1: ['Z']
- },
- carNum: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
- carLetter: [
- ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K'],
- ['L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V'],
- ['W', 'X', 'Y', 'Z'],
- ['挂', '学', '警', '港', '澳']
- ]
- };
- },
- computed: {
- isRight() {
- // const val = Object.values(this.licensePlate).join('');
- // 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(
- // val
- // );
- return true
- }
- },
- mounted() {
- const codes = this.code.split('');
- for (let i = 0; i < 8; i++) {
- this.licensePlate[i] = codes[i] || '';
- }
- let index = codes.length - 1;
- if (index < 0) {
- index = 0;
- }
- this.selectHandle(index);
- },
- methods: {
- getStyle(item) {
- return 'disable';
- // return {
- // 'text-key-last': this.selected === 0,
- // 'disable': !this.isEnable(item),
- // 'selected': this.licensePlate[this.selected] === item
- // };
- },
- getNumStyle(item) {
- return {
- disable: this.numDisable,
- selected: this.licensePlate[this.selected] === item
- };
- },
- isEnable(item) {
- const _dis = this.disableList[this.selected];
- console.log(item,_dis,'-------')
- if (_dis) {
- console.log(_dis.indexOf(item) !== -1, item);
- return _dis.indexOf(item) !== -1;
- }
- return false;
- },
- selectHandle(item) {
- this.selected = item;
- console.log(item,this.selected, '-------index------')
- if (item === 0) {
- // this.keyRows = this.carTxt;
- } else {
- // this.keyRows = this.carLetter;
- this.numDisable = item === 1;
- }
- },
- keyHandle(text) {
- console.log(text,'ttttttt')
- if (!this.isEnable(text)) {
- this.licensePlate[this.selected] = text;
- const next = this.selected + 1;
- if (next <= 7) {
- this.selectHandle(next);
- }
- }
- },
- numHandle(text) {
- if (!this.numDisable) {
- this.licensePlate[this.selected] = text;
- const next = this.selected + 1;
- if (next <= 7) {
- this.selectHandle(next);
- }
- }
- },
- deleteKey() {
- if (this.licensePlate[this.selected] !== '') {
- this.licensePlate[this.selected] = '';
- } else if (this.selected !== 0) {
- this.selectHandle(this.selected - 1);
- this.licensePlate[this.selected] = '';
- }
- },
- cancelHandle() {
- this.claer();
- this.$emit('cancel');
- },
- claer() {
- this.licensePlate = {
- 0: '',
- 1: '',
- 2: '',
- 3: '',
- 4: '',
- 5: '',
- 6: '',
- 7: ''
- };
- this.selected = 0;
- },
- okHandle() {
- if (this.isRight) {
- const val = Object.values(this.licensePlate).join('');
- this.claer();
- this.$emit('ok', val);
- }
- }
- }
- };
- </script>
- <style lang="less">
- .license-plate-panel {
- position: absolute;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 10000;
- background-color: #fff;
- border-top: 1px solid #ddd;
- .input-area {
- display: flex;
- padding: 5vh 0;
- box-sizing: border-box;
- justify-content: center;
- .input-text {
- width: 10vw;
- height: 10vw;
- line-height: 10vw;
- box-sizing: border-box;
- border-top: 1px solid #dcdee2;
- border-right: 1px solid #dcdee2;
- border-bottom: 1px solid #dcdee2;
- text-align: center;
- font-size: 32upx;
- &.active {
- border: 1px solid #2db7f5 !important;
- }
- &:first-child {
- overflow: hidden;
- position: relative;
- &::after {
- content: '';
- position: absolute;
- bottom: -5px;
- right: -5px;
- width: 10px;
- height: 10px;
- background-color: #dcdee2;
- transform: rotate(45deg);
- }
- &.active::after {
- background-color: #2db7f5;
- }
- }
- &:last-child {
- margin-left: 5px;
- border: 1px dashed #dcdee2;
- &.active {
- border: 1px dashed #2db7f5 !important;
- }
- }
- &:nth-child(2) {
- margin-right: 25px;
- position: relative;
- &::after {
- content: '';
- position: absolute;
- border-radius: 50%;
- top: 50%;
- right: -15px;
- transform: translateY(-50%);
- width: 5px;
- height: 5px;
- background-color: #000;
- }
- }
- &:first-child, &:nth-child(3) {
- border-left: 1px solid #dcdee2;
- }
- }
- }
- .keyboard-panel {
- position: relative;
- bottom: 0;
- border-top: 1px solid #eef0f4;
- background: #eeeeee;
- box-sizing: border-box;
- width: 100%;
- .tool-bar {
- display: flex;
- font-size: 32upx;
- justify-content: space-between;
- background-color: #fff;
- padding: 10px 15px;
- }
- .text-panel {
- padding: 0 1vw 5px 1vw;
- }
- .row {
- display: flex;
- margin: 1vw 0;
- }
- .text-key {
- display: inline-block;
- text-align: center;
- font-size: 32upx;
- width: 8.8vw;
- margin: 0 0.5vw;
- padding: 10px 0;
- box-shadow: 0 1px 2px #dddddd;
- border-radius: 4px;
- background-color: #ffffff;
- text-align: center;
- flex-shrink: 0;
- flex-grow: 0;
- }
- .text-key.disabled {
- background-color: #f1f1f1;
- color: #bebebe;
- }
- .text-key.selected {
- background-color: #2db7f5;
- color: #fff;
- }
- .del-key {
- width: 19vw;
- color: red;
- }
- .btn-ok {
- color: #c5c8ce;
- &.right {
- color: #00aaff;
- }
- }
- }
- }
- </style>
|