提交

src/view/motorVehicle/components/fingerboard.vue

@@ -1,5 +1,10 @@
 <template>
-  <van-popup :overlay-style="{'background-color': 'rgba(0,0,0,0)'}" v-model:show="show" position="bottom" :style="{ height: '15em' }">
+  <van-popup
+    :overlay-style="{ 'background-color': 'rgba(0,0,0,0)' }"
+    v-model:show="show"
+    position="bottom"
+    :style="{ height: '15em' }"
+  >
     <div class="fingerboard">
       <div class="tooltip">
         <van-button
@@ -9,7 +14,11 @@
         >
           新能源
         </van-button>
-        <van-button type="default" size="small" @click="() => changeShow(false)">
+        <van-button
+          type="default"
+          size="small"
+          @click="() => changeShow(false)"
+        >
           完成
         </van-button>
       </div>
@@ -20,11 +29,10 @@
         :key="index"
       >
         <div
-          class="item"
+          :class="{ item: true, delete: o == 'delete', read:  isRead(o)}"
           v-for="(o, i) in item"
           :key="index + i"
-          :style="o == 'delete'? 'flex: 3;padding-top: 5px' : ''"
-          @click="() => o !== 'delete' ? setKey(o) : deleteKey()"
+          @click="() => setKeyV(o)"
         >
           <span v-text="o" v-if="o !== 'delete'"></span>
           <svg
@@ -55,10 +63,10 @@ const show = ref(false);
 const isNew = ref(false);
 const emit = defineEmits(['changeIsNew']);
 const props = defineProps({
-    isNew: {
-        type: Boolean,
-    }
-})
+  isNew: {
+    type: Boolean,
+  },
+});
 const jp = [
   [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
   ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
@@ -68,6 +76,18 @@ const jp = [
 
 let fingerboardChepai = [];
 
+// 默认第一位a或u
+const setKeyV = o => {
+  const next = o === 'A' || o === 'U';
+  if (fingerboardChepai.length === 0 && !next) return;
+  o !== 'delete' ? setKey(o) : deleteKey();
+};
+
+// 是否禁用其他
+const isRead = o => {
+    return !(o === 'A' || o === 'U') && !fingerboardChepai.length
+}
+
 const setKey = key => {
   // 键入内容
   if (isNew.value) {
@@ -77,7 +97,8 @@ const setKey = key => {
     // 燃油车6位
     if (fingerboardChepai.length >= 6) return showToast('超出车牌位数限制');
   }
-  if (fingerboardChepai.length === 0 && /[0-9]/.test(key)) return showToast('车牌首位必须为字母');
+  if (fingerboardChepai.length === 0 && /[0-9]/.test(key))
+    return showToast('车牌首位必须为字母');
   key !== '' && fingerboardChepai.push(key);
 };
 
@@ -124,6 +145,15 @@ defineExpose({
       box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
       background-color: #fff;
     }
+
+    .delete {
+      flex: 3;
+      padding-top: 5px;
+    }
+
+    .read{
+        color: #999;
+    }
   }
 }
 </style>