Merge pull request #446 from John-Hong/John/release-3.2.0/KIP-13631

feat(KIP-13631): 功能优化 | 特殊车辆适配首位字母或数字车辆查费

src/components/plate-number/plateNumber.vue

@@ -10,7 +10,7 @@
           <div class="sure" @click.stop="close_keyboard">确认</div>
         </div>
         <div class="plate_chinese_box">
-          <button size="small" :class="[item.id === 99 && 'del']" v-for="(item, index) in ChineseList" :key="item.id" :disabled="disabledKeyboard(index)" @click="checkChinese(index)">
+          <button size="small" :class="[item.id === 99 && 'del',  item.id === 66 && 'mini']" v-for="(item, index) in ChineseList" :key="item.id" :disabled="disabledKeyboard(index)" @click="checkChinese(index)">
             <span v-if="item.id !== 99">{{ item.name }}</span>
             <img v-else :src="require(`../../static/images/close.png`)" alt="" />
           </button>
@@ -28,11 +28,19 @@
         </div>
         <div class="close-box">
           <div class="plate_number_box">
-            <!-- :disabled="item.id === 45 || item.id === 46 ? true : false" -->
-            <button :disabled="item.id === 45 || item.id === 46 ? true : false" size="small" v-for="(item, index) in English_Number" :key="item.id" :class="[item.id === 99 && 'del', item.id === 66 && 'mini']"  @click="checkEnglish_num(index)">
-              <span v-if="item.id !== 99">{{ item.name }}</span>
-              <img v-else :src="require(`../../static/images/back.png`)" alt="" />
-            </button>
+            <div class="row-box" v-for="(row, rowIndex) in English_Number" :key="`rowIndex${rowIndex}`">
+              <button v-if="rowIndex === 3"  :key="`area${rowIndex}`" class="area"  @click="checkEnglish_num('area')">
+                地区
+              </button>
+              <div class="col-box">
+                <button :disabled="['I','O'].indexOf(item) > -1" size="small" v-for="(item, index) in row" :key="item" @click="checkEnglish_num(item)">
+                  <span >{{ item }}</span>
+                </button>  
+              </div>
+              <button v-if="rowIndex === 3"  :key="`close${rowIndex}`" class="del area"  @click="checkEnglish_num('close')">
+                <img :src="require(`../../static/images/close.png`)" alt="" />
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -84,325 +92,14 @@ export default {
       chinese_popup: false,
       allBoard_popup: false,
       ChineseList: [
-        {
-          name: '京',
-          id: 1,
-        },
-        {
-          name: '沪',
-          id: 2,
-        },
-        {
-          name: '粤',
-          id: 3,
-        },
-        {
-          name: '津',
-          id: 4,
-        },
-        {
-          name: '冀',
-          id: 5,
-        },
-        {
-          name: '晋',
-          id: 6,
-        },
-        {
-          name: '蒙',
-          id: 7,
-        },
-        {
-          name: '辽',
-          id: 8,
-        },
-        {
-          name: '吉',
-          id: 9,
-        },
-        {
-          name: '黑',
-          id: 10,
-        },
-        {
-          name: '苏',
-          id: 11,
-        },
-        {
-          name: '浙',
-          id: 12,
-        },
-        {
-          name: '皖',
-          id: 13,
-        },
-        {
-          name: '闽',
-          id: 14,
-        },
-        {
-          name: '赣',
-          id: 15,
-        },
-        {
-          name: '鲁',
-          id: 16,
-        },
-        {
-          name: '豫',
-          id: 17,
-        },
-        {
-          name: '鄂',
-          id: 18,
-        },
-        {
-          name: '湘',
-          id: 19,
-        },
-        {
-          name: '桂',
-          id: 20,
-        },
-        {
-          name: '琼',
-          id: 21,
-        },
-        {
-          name: '渝',
-          id: 22,
-        },
-        {
-          name: '川',
-          id: 23,
-        },
-        {
-          name: '贵',
-          id: 24,
-        },
-        {
-          name: '云',
-          id: 25,
-        },
-        {
-          name: '藏',
-          id: 26,
-        },
-        {
-          name: '陕',
-          id: 27,
-        },
-        {
-          name: '甘',
-          id: 28,
-        },
-        {
-          name: '青',
-          id: 29,
-        },
-        {
-          name: '宁',
-          id: 30,
-        },
-        /* {
-          name: 'ABC',
-          id: 66,
-        }, */
-        {
-          name: '新',
-          id: 31,
-        },
-        {
-          name: '使',
-          id: 32,
-        },
-        {
-          name: '领',
-          id: 33,
-        },
-        {
-          name: '警',
-          id: 34,
-        },
-        {
-          name: '学',
-          id: 35,
-        },
-        {
-          name: '港',
-          id: 36,
-        },
-        {
-          name: '澳',
-          id: 37,
-        },
-        {
-          name: '台',
-          id: 38,
-        },
-        {
-          name: '临',
-          id: 39,
-        },
-        {
-          name: '←',
-          id: 99,
-        },
-      ],
-      English_Number: [
-        {
-          name: '1',
-          id: 28,
-        },
-        {
-          name: '2',
-          id: 29,
-        },
-        {
-          name: '3',
-          id: 30,
-        },
-        {
-          name: '4',
-          id: 31,
-        },
-        {
-          name: '5',
-          id: 32,
-        },
-        {
-          name: '6',
-          id: 33,
-        },
-        {
-          name: '7',
-          id: 34,
-        },
-        {
-          name: '8',
-          id: 35,
-        },
-        {
-          name: '9',
-          id: 36,
-        },
-        {
-          name: '0',
-          id: 37,
-        },
-        {
-          name: 'Q',
-          id: 38,
-        },
-        {
-          name: 'W',
-          id: 39,
-        },
-        {
-          name: 'E',
-          id: 40,
-        },
-        {
-          name: 'R',
-          id: 41,
-        },
-        {
-          name: 'T',
-          id: 42,
-        },
-        {
-          name: 'Y',
-          id: 43,
-        },
-        {
-          name: 'U',
-          id: 44,
-        },
-        {
-          name: 'I',
-          id: 45,
-        },
-        {
-          name: 'O',
-          id: 46,
-        },
-        {
-          name: 'P',
-          id: 47,
-        },
-        {
-          name: 'A',
-          id: 48,
-        },
-        {
-          name: 'S',
-          id: 49,
-        },
-        {
-          name: 'D',
-          id: 50,
-        },
-        {
-          name: 'F',
-          id: 51,
-        },
-        {
-          name: 'G',
-          id: 52,
-        },
-        {
-          name: 'H',
-          id: 53,
-        },
-        {
-          name: 'J',
-          id: 54,
-        },
-        {
-          name: 'K',
-          id: 55,
-        },
-        {
-          name: 'L',
-          id: 56,
-        },
-        {
-          name: '地区',
-          id: 66,
-        },
-        {
-          name: 'Z',
-          id: 57,
-        },
-        {
-          name: 'X',
-          id: 58,
-        },
-        {
-          name: 'C',
-          id: 59,
-        },
-        {
-          name: 'V',
-          id: 60,
-        },
-        {
-          name: 'B',
-          id: 61,
-        },
-        {
-          name: 'N',
-          id: 62,
-        },
-        {
-          name: 'M',
-          id: 63,
-        },
-        {
-          name: '←',
-          id: 99,
-        },
+        {name: '京', id: 1,}, {name: '沪', id: 2,}, {name: '粤', id: 3,}, {name: '津', id: 4,}, {name: '冀', id: 5,}, {name: '晋', id: 6,}, {name: '蒙', id: 7,}, {name: '辽', id: 8,}, {name: '吉', id: 9,}, {name: '黑', id: 10,}, {name: '苏', id: 11,}, {name: '浙', id: 12,}, {name: '皖', id: 13,}, {name: '闽', id: 14,}, {name: '赣', id: 15,}, {name: '鲁', id: 16,}, {name: '豫', id: 17,}, {name: '鄂', id: 18,}, {name: '湘', id: 19,}, {name: '桂', id: 20,}, {name: '琼', id: 21,}, {name: '渝', id: 22,}, {name: '川', id: 23,}, {name: '贵', id: 24,}, {name: '云', id: 25,}, {name: '藏', id: 26,}, {name: '陕', id: 27,}, {name: '甘', id: 28,}, {name: '青', id: 29,}, {name: '宁', id: 30,}, {name: 'ABC', id: 66,}, {name: '新', id: 31,}, {name: '使', id: 32,}, {name: '领', id: 33,}, {name: '警', id: 34,}, {name: '学', id: 35,}, {name: '港', id: 36,}, {name: '澳', id: 37,},
+        // {
+        //   name: '台',
+        //   id: 38,
+        // },
+        {name: '临', id: 39,}, {name: 'X', id: 99,},
       ],
+      English_Number: [[1,2,3,4,5,6,7,8,9,0], ['Q','W','E','R','T','Y','U','I','O','P'], ['A','S','D','F','G','H','J','K','L'], ['Z','X','C','V','B','N','M'],],
       carnoIndex: 0,
       activeIndex: -1,
       carnoArr: ['', '', '', '', '', '', ''],
@@ -470,8 +167,9 @@ export default {
         } else {
           this.carnoIndex++;
           this.activeIndex = this.carnoIndex;
-          this.closeKeyboardCN();
-          this.openKeyboardEN();
+          // PS: 如果需要在输入完中文之后，展示字母键盘，打开以下注释
+          // this.closeKeyboardCN();
+          // this.openKeyboardEN();
         }
       }
       this.$emit('carnoArr', {
@@ -483,9 +181,9 @@ export default {
     // 选择车牌号后面的数字和字母
     checkEnglish_num(index) {
       // 点击删除键
-      if (this.English_Number[index].id == 99) {
+      if (index === 'close') {
         this.carnoArr[this.carnoIndex] = '';
-        if (this.search_price == true) {
+        if (this.search_price === true) {
           this.search_price = false;
           this.vehicleMgt_content_index = index;
         }
@@ -497,13 +195,13 @@ export default {
         if (this.carnoIndex === -1) {
           this.close_keyboard();
         }
-      } else if (this.English_Number[index].id == 66) {
+      } else if (index === 'area') {
         //切换中文
         this.closeKeyboardEN();
         this.openKeyboardCN();
       } else {
         // 把选中的字赋值
-        this.$set(this.carnoArr, this.carnoIndex, this.English_Number[index].name);
+        this.$set(this.carnoArr, this.carnoIndex, index);
         if (this.carnoIndex === this.carnoArr.length - 1) {
           this.close_keyboard();
         } else {
@@ -632,6 +330,16 @@ export default {
             height: 30px;
           }
         }
+        &.mini {
+          background-color: #adb3bc;
+          font-family: 'PingFang SC';
+          font-style: normal;
+          font-weight: 400;
+          font-size: 27px;
+          line-height: 38px;
+          text-align: center;
+          color: #000000;
+        }
       }
       button[disabled='disabled'] {
         color: #9da0a3;
@@ -671,12 +379,22 @@ export default {
 
   .plate_number_box {
     width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-
+    //display: flex;
+    //flex-wrap: wrap;
+    //justify-content: center;
+    .row-box {
+      width: 100%;
+      text-align: center;
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: center;
+      
+      .col-box {
+        flex: 1;
+      }
+    }
     button {
-      width: 9%;
+      width: 64px;
       height: 85px;
       line-height: 85px;
       text-align: center;
@@ -684,6 +402,8 @@ export default {
       font-size: 36px;
       background: #ffffff;
       .class-van-button-small;
+      margin-left: 5.5px;
+      margin-right: 5.5px;
 
       &.del {
         img {
@@ -692,8 +412,51 @@ export default {
         }
       }
       &.mini {
-        font-size: 28px;
+        flex-flow: wrap;
+        background-color: #adb3bc;
+        font-family: 'PingFang SC';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 27px;
+        line-height: 38px;
+        text-align: center;
+        color: #000000;
       }
+      &.break {
+        flex-basis: 100%;
+        height: 0;
+        background: transparent;
+        box-shadow: none;
+        margin: 0;
+        padding: 0;
+        border: 0;
+      }
+      &.area {
+        display: block;
+        flex: 0 0 85px;
+        min-width: 85px;
+        height: 85px;
+        margin: 5px 6px;
+
+        
+        font-family: 'PingFang SC';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 28px;
+        line-height: 39px;
+        color: #000000;
+        background-color: #ADB3BC;
+        &.del {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          img{
+            display: block;
+            width: 44px;
+            height: 30px;
+          }
+        }
+      } 
     }
     button[disabled='disabled'] {
       color: #9da0a3;