车牌ui修改优化

src/pages/parkingFee/vehicleAddOrEdit.vue

@@ -1,241 +1,67 @@
 <template>
-  <div :class="theme" style="background-color: #f4f7ff">
-    <scroll-view class="wrap">
-      <div class="car-number-box">
-        <div :style="{ border: custTypeId === 0 ? '' : '1px solid #C69C6D' }">
-          <div class="switch-container" v-if="custTypeId === 0">
-            <div class="car-type">车牌类型</div>
-            <div class="switch">
-              <div
-                v-for="(item, index) in licensePlateTypeArr"
-                :key="index"
-                :class="index == carType ? 'switch-active' : ''"
-                @click="toggleType(index)"
-              >
-                {{ item.label }}
-              </div>
-            </div>
-          </div>
-          <!--  -->
-          <div class="switch-container-else" v-else>
-            <div
-              v-for="(item, index) in licensePlateTypeArr"
-              :key="index"
-              class="switch-item"
-              :class="index == carType ? 'switch-selected' : 'switch-else'"
-              @click="toggleType(index)"
-            >
-              <div
-                :class="
-                  index == carType ? 'switch-blue-color' : 'switch-blue-bg'
-                "
-                v-if="custTypeId === 1"
-              >
-                {{ item.label }}
-              </div>
-              <div
-                :class="
-                  index == carType ? 'switch-green-color' : 'switch-green-bg'
-                "
-                v-if="custTypeId === 2"
-              >
-                {{ item.label }}
-              </div>
-              <div class="switch-line" v-if="index == carType"></div>
-            </div>
-          </div>
-          <div
-            class="input-box"
-            :style="{ margin: custTypeId === 0 ? '' : '0 44px 0 35px' }"
-          >
-            <div
-              class="li"
-              @click="clickShowKeyboard(0)"
-              :style="{
-                color:
-                  custTypeId === 0
-                    ? '#333'
-                    : custTypeId === 1
-                    ? '#333 '
-                    : '#333',
-              }"
-              :class="[active === 0 ? 'active' : '']"
-            >
-              {{ numArr[0] }}
-            </div>
-            <div
-              class="li"
-              @click="clickShowKeyboard(1)"
-              :style="{
-                color:
-                  custTypeId === 0
-                    ? '#333'
-                    : custTypeId === 1
-                    ? '#333 '
-                    : '#333',
-              }"
-              :class="[active === 1 ? 'active' : '']"
-            >
-              {{ numArr[1] }}
-            </div>
-            <div
-              class="dot"
-              :style="{
-                color:
-                  custTypeId === 0
-                    ? '#333'
-                    : custTypeId === 1
-                    ? '#333 '
-                    : '#333',
-              }"
-            >
-              ·
-            </div>
-            <div
-              class="li"
-              @click="clickShowKeyboard(2)"
-              :style="{
-                color:
-                  custTypeId === 0
-                    ? '#333'
-                    : custTypeId === 1
-                    ? '#333 '
-                    : '#333',
-              }"
-              :class="[active === 2 ? 'active' : '']"
-            >
-              {{ numArr[2] }}
-            </div>
-            <div
-              class="li"
-              @click="clickShowKeyboard(3)"
-              :style="{
-                color:
-                  custTypeId === 0
-                    ? '#333'
-                    : custTypeId === 1
-                    ? '#333 '
-                    : '#333',
-              }"
-              :class="[active === 3 ? 'active' : '']"
-            >
-              {{ numArr[3] }}
-            </div>
-            <div
-              class="li"
-              @click="clickShowKeyboard(4)"
-              :style="{
-                color:
-                  custTypeId === 0
-                    ? '#333'
-                    : custTypeId === 1
-                    ? '#333 '
-                    : '#333',
-              }"
-              :class="[active === 4 ? 'active' : '']"
-            >
-              {{ numArr[4] }}
-            </div>
-            <div
-              class="li"
-              @click="clickShowKeyboard(5)"
-              :style="{
-                color:
-                  custTypeId === 0
-                    ? '#333'
-                    : custTypeId === 1
-                    ? '#333 '
-                    : '#333',
-              }"
-              :class="[active === 5 ? 'active' : '']"
-            >
-              {{ numArr[5] }}
-            </div>
-            <div
-              class="li"
-              @click="clickShowKeyboard(6)"
-              :style="{
-                color:
-                  custTypeId === 0
-                    ? '#333'
-                    : custTypeId === 1
-                    ? '#333 '
-                    : '#333',
-              }"
-              :class="[active === 6 ? 'active' : '']"
-            >
-              {{ numArr[6] }}
-            </div>
-            <div
-              v-if="carType == 1"
-              class="li"
-              @click="clickShowKeyboard(7)"
-              :style="{
-                color:
-                  custTypeId === 0
-                    ? '#333'
-                    : custTypeId === 1
-                    ? '#333 '
-                    : '#333',
-              }"
-              :class="[active === 7 ? 'active' : '']"
-            >
-              <span v-if="numArr[7]">{{ numArr[7] }}</span>
-            </div>
-          </div>
+  <div :class="['wrap', theme]">
+    <!-- <wx-points-commit ref='wxPointsCommit'></wx-points-commit> -->
+    <div>
+      <div class="search_tip_1">
+        <div class="title">车辆类型</div>
+        <k-tab type="fill" @change="toggleType" :tabs="['普通车牌', '新能源', '特殊车牌']" />
+      </div>
+      <div class="input-box">
+        <!-- <div v-for="i in carType === 1 ? 8 : 7" class="li" :key="`numArr${i}`" @click="clickShowKeyboard(i)" :class="[active === i ? 'active' : '']">
+                  {{ numArr[i] }}
+                </div> -->
+        <div class="li" @click="clickShowKeyboard(0)" :class="[active === 0 ? 'active' : '']">
+          {{ numArr[0] }}
         </div>
-
-        <div class="reminder">
-          <div class="reminder-title">温馨提示:</div>
-          <div class="reminder-content">
-            ·用户可以添加多个"燃油车牌号"或"新能源车牌号"
-          </div>
-          <div class="reminder-content">·用户可以更改或删除已经绑定车牌</div>
+        <div class="li" @click="clickShowKeyboard(1)" :class="[active === 1 ? 'active' : '']">
+          {{ numArr[1] }}
+        </div>
+        <div class="input_box_dian">·</div>
+        <div class="li" @click="clickShowKeyboard(2)" :class="[active === 2 ? 'active' : '']">
+          {{ numArr[2] }}
+        </div>
+        <div class="li" @click="clickShowKeyboard(3)" :class="[active === 3 ? 'active' : '']">
+          {{ numArr[3] }}
+        </div>
+        <div class="li" @click="clickShowKeyboard(4)" :class="[active === 4 ? 'active' : '']">
+          {{ numArr[4] }}
+        </div>
+        <div class="li" @click="clickShowKeyboard(5)" :class="[active === 5 ? 'active' : '']">
+          {{ numArr[5] }}
+        </div>
+        <div :class="['li', carType !== 1 && 'dashed', active === 6 ? 'active' : '']" @click="clickShowKeyboard(6)">
+          {{ numArr[6] }}
+        </div>
+        <div class="li dashed green-active" @click="clickShowKeyboard(7)" :class="[active === 7 ? 'active' : '']" >
+          <span v-if="numArr[7] && carType === 1">{{ numArr[7] }}</span>
+          <img v-else :src="require('./static/images/unlicensed/leaf.svg')">
         </div>
       </div>
-    </scroll-view>
-    <div class="btn-box">
-      <div class="btnpb"></div>
-      <div
-        class="confirm-btn"
-        :class="disabledBtn ? 'disabled-btn' : ''"
-        :disabled="disabledBtn"
-        @click="handleAddLicensePlateByKipMember"
-      >
-        确认{{ carInfo.id ? '修改' : '添加' }}
-      </div>
+      <k-button :title="$route.query.carno ? '确认修改' : '确认添加'" style="margin: 46px auto 43px; display: block" :disabled="disabledBtn" disabledColor="#D1D2D9" @click="handleAddLicensePlateByKipMember" />
+      <!-- <div class="confirm-btn" :class="disabledBtn ? 'disabled-btn' : ''" :disabled="disabledBtn" @click="handleAddLicensePlateByKipMember" v-if="custTypeId === 0">确认添加</div> -->
+      <!-- <div class="confirm-btn-else" :class="custTypeId === 1 ? 'confirm-btn-blue' : 'confirm-btn-green'" @click="handleAddLicensePlateByKipMember" v-else>确认添加</div> -->
+    </div>
+
+    <div class="reminder">
+      <div class="reminder-title">温馨提示:</div>
+      <div class="reminder-content">·用户可以添加多个"燃油车牌号"或"新能源车牌号"</div>
+      <div class="reminder-content">·用户可以更改或删除已经绑定车牌</div>
     </div>
-    <plate-number
-      ref="plateKeyboard"
-      :carType="carType"
-      :active="active"
-      :ind="ind"
-      :numArr="numArr"
-      @carnoArr="updateCarno"
-      :disBtn="[38]"
-    ></plate-number>
+    <plate-number ref="plateKeyboard" :noDisBtn="[32, 33, 34,35,36,37 ]"  :disBtn="[38]" :carType="carType" :active="active" :ind="ind" :numArr="numArr" @carnoArr="updateCarno"></plate-number>
   </div>
 </template>
 
 <script>
-import vehicleAddOrEditJs from './mixins/vehicleAddOrEdit'
+import vehicleAddOrEditJs from './mixins/vehicleAddOrEdit';
 import baseMixins from './mixins/base'
 export default {
-  mixins:[baseMixins, vehicleAddOrEditJs]
-}
+  mixins: [baseMixins, vehicleAddOrEditJs],
+};
 </script>
 
 <style lang="less" scoped>
 .wrap {
   // padding: 30px;
-
-  .car-number-box {
-    margin-top: 24px;
-    padding: 30px;
-    background-color: #fafbff;
-    border: 1px solid #d8dae0;
-  }
-
   .switch-container-else {
     margin-bottom: 72px;
     width: 100%;
@@ -244,46 +70,38 @@ export default {
     justify-content: space-around;
     align-items: center;
     font-size: 28px;
-
     .switch-item:nth-of-type(1) {
       .switch-else {
         border-right: 1px solid #c69c6d;
       }
     }
-
     .switch-item:nth-of-type(2) {
       .switch-else {
         border-right: 1px solid #c69c6d;
       }
     }
-
     .switch-item {
       width: 33.3%;
       height: 78px;
       line-height: 78px;
       text-align: center;
     }
-
     .switch-green-bg {
       background: #0d6b38;
       color: #ffffff;
       box-sizing: border-box;
     }
-
     .switch-green-color {
       color: #0d6b38;
     }
-
     .switch-blue-bg {
       background: #023694;
       color: #ffffff;
       box-sizing: border-box;
     }
-
     .switch-blue-color {
       color: #023694;
     }
-
     .switch-line {
       width: 104px;
       height: 3px;
@@ -292,186 +110,145 @@ export default {
       opacity: 1;
     }
   }
-
   .switch-container {
-    margin-bottom: 10px;
-    width: 100%;
-    margin-left: -1px;
-    font-size: 24px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 30px;
-
-    .car-type {
-      font-size: 34px;
-      font-weight: 600;
-      color: #333333;
-      line-height: 50px;
-      // width: 144px;
-      margin-right: 54px;
-    }
-
-    .switch {
-      flex: 1;
-      font-size: 28px;
-      width: 470px;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      border: 1px solid #999999;
-      height: 54px;
-      color: #999999;
-      overflow: hidden;
-      border-radius: 50px;
-
-      div {
-        height: 100%;
-        border-radius: 27px;
-        line-height: 54px;
-        text-align: center;
-      }
-
-      div:nth-child(1) {
-        width: 37%;
-      }
-
-      div:nth-child(2) {
-        width: 36%;
-      }
-
-      div:nth-child(3) {
-        width: 37%;
-      }
-
-      .switch-active {
-        color: #fff;
-        background-image: linear-gradient(to right, #7e4fa1, #433c7f);
-        background: var(--k-color-primary-01, #064c8a);
-      }
-    }
   }
 
+  // 车牌号 & 虚拟键盘
   .input-box {
-    // width: 100%;
-    height: 100px;
-    margin: auto;
-    // background: rgba(255, 255, 255, 1);
-    border-radius: 0.4rem;
-    margin: 1rem auto;
+    width: 100%;
+    flex: 1;
     display: flex;
+    padding-bottom: 40px;
+    padding: 0 17px;
     justify-content: center;
-
-    .li:first-child {
-      // border-top-left-radius: 20px;
-      // border-bottom-left-radius: 20px;
-    }
+    box-sizing: border-box;
 
     .li {
-      flex: 1;
-      border: 1px solid rgba(206, 208, 210, 1);
+      width: 100%;
+      border: 1px solid #d9dbe0;
       box-sizing: border-box;
-      margin: 0 2px;
-      font-size: 50px;
+      height: 90px;
       display: flex;
       align-items: center;
       justify-content: center;
       color: #333333;
-      border-radius: 4px;
       background-color: #f4f7ff;
-      margin-right: 26px;
-
-      img {
-        width: 80%;
-        height: 100%;
+      border-radius: 4px;
+      font-size: 40px;
+      margin: 0 3px;
+      &.dashed {
+        background-color: #fafbff;
+        border-style: dashed;
       }
-
       &.active {
-        border-color: #333333;
+        border-color: var(--k-color-primary);
       }
-      &:last-child {
-        margin-right: 0;
+      &.green-active {
+        background: #F8FFED;
+        border-color: #7DB124;
+        color: #7DB124;
+        img{
+
+          width: 41px;
+          height: 39px;
+        }
       }
     }
 
-    .dot {
+    .input_box_dian {
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 120px;
-      color: #333333;
-      margin-right: 18px;
+      height: 70px;
+      color: var(--k-color-primary);
     }
   }
 
-  .reminder {
-    margin-top: 20px;
-
-    .reminder-title {
-      margin-bottom: 8px;
-    }
-
-    .reminder-content {
-      font-size: 26px;
-      padding-top: 3px;
-      color: #898989;
-    }
-  }
-}
-.btn-box {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  background-color: #f9f9ff;
-  padding: 30px;
-  box-shadow: 0px 13px 33px 0px rgba(190, 187, 187, 0.2);
-
-  &.btnpb {
-    width: 100%;
-    padding-bottom: constant(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom);
-  }
-
   .confirm-btn {
     color: #fff;
     margin: 0 auto;
     height: 90px;
     width: 98%;
     line-height: 90px;
-    font-size: 34px;
+    border-radius: 80px;
+    font-size: 17px;
     text-align: center;
-    background: var(--k-color-primary-01, #064c8a);
-    border-radius: 45px;
+    background-image: linear-gradient(to right, #7e4fa1, #433c7f);
   }
-
   .confirm-btn-else {
     width: 636px;
-    height: 90px;
+    height: 87px;
     color: white;
-    line-height: 90px;
+    line-height: 87px;
     text-align: center;
     font-size: 34px;
     opacity: 1;
-    border-radius: 45px;
-    background: #d8dae0;
+    border-radius: 43px;
     margin: 64px auto 31px;
   }
-
   .confirm-btn-blue {
     background: #023694;
   }
-
   .confirm-btn-green {
     background: #0d6b38;
   }
-
   .disabled-btn {
-    background-color: #d8dae0;
+    background-color: #c1c1c1;
     background-image: none;
-    font-size: 34px;
-    font-weight: 400;
-    color: #ffffff;
+  }
+
+  .reminder {
+    // margin-top: 20px;
+
+    .reminder-title {
+      margin-bottom: 18px;
+      padding: 0 30px;
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 30px;
+      line-height: 40px;
+      /* identical to box height, or 133% */
+
+
+      color: #333333;
+    }
+
+    .reminder-content {
+      // font-size: 26px;
+      // padding-top: 3px;
+      // color: #898989;
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 26px;
+      line-height: 40px;
+      padding: 0 33px;
+      /* or 154% */
+      color: #999999;
+    }
+    .reminder-content:nth-child(2) {
+      margin-bottom: 11px;
+    }
+  }
+  .search_tip_1 {
+    padding: 37px 27px 40px;
+    display: flex;
+    align-items: center;
+    .title {
+      // font-size: 30px;
+      margin-right: 33px;
+      font-family: 'PingFang SC';
+      font-style: normal;
+      font-weight: 500;
+      font-size: 30px;
+      line-height: 36px;
+      color: #333333;
+    }
+    .k-tab-group-fill {
+      flex: 1;
+    }
   }
 }
 </style>