车牌管理界面UI修改

src/pages/parkingFee/components/purple/vehicleAddOrEdit.vue

@@ -0,0 +1,250 @@
+<template>
+  <div :class="['wrap', theme]">
+    <!-- <wx-points-commit ref='wxPointsCommit'></wx-points-commit> -->
+    <div :style="{ border: custTypeId === 0 ? '' : '1px solid #C69C6D' }">
+      <div class="search_tip_1" v-if="custTypeId === 0">
+        <div class="title">车辆类型</div>
+        <k-tab type="fill" @change="toggleType" :tabs="['普通车牌', '新能源', '特殊车牌']" />
+      </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">
+        <!-- <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="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" @click="clickShowKeyboard(7)" :class="[active === 7 ? 'active' : '']" v-if="carType == 1">
+          <span v-if="numArr[7]">{{ numArr[7] }}</span>
+        </div>
+      </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"></plate-number>
+  </div>
+</template>
+
+<script>
+import vehicleAddOrEditJs from '../../mixins/vehicleAddOrEdit';
+export default {
+  mixins: [vehicleAddOrEditJs],
+};
+</script>
+
+<style lang="less" scoped>
+.wrap {
+  // padding: 30px;
+  .switch-container-else {
+    margin-bottom: 72px;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    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;
+      margin: 10px auto 0;
+      background: #c69c6d;
+      opacity: 1;
+    }
+  }
+  .switch-container {
+  }
+
+  // 车牌号 & 虚拟键盘
+  .input-box {
+    width: 100%;
+    flex: 1;
+    display: flex;
+    padding-bottom: 40px;
+    padding: 0 17px;
+    justify-content: center;
+    box-sizing: border-box;
+
+    .li {
+      width: 100%;
+      border: 1px solid #d9dbe0;
+      box-sizing: border-box;
+      height: 90px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #333333;
+      background-color: #f4f7ff;
+      border-radius: 4px;
+      font-size: 40px;
+      margin: 0 3px;
+      &.dashed {
+        background-color: #fafbff;
+        border-style: dashed;
+      }
+      &.active {
+        border-color: var(--k-color-primary);
+      }
+    }
+
+    .input_box_dian {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 120px;
+      height: 70px;
+      color: var(--k-color-primary);
+    }
+  }
+
+  .confirm-btn {
+    color: #fff;
+    margin: 0 auto;
+    height: 90px;
+    width: 98%;
+    line-height: 90px;
+    border-radius: 80px;
+    font-size: 17px;
+    text-align: center;
+    background-image: linear-gradient(to right, #7e4fa1, #433c7f);
+  }
+  .confirm-btn-else {
+    width: 636px;
+    height: 87px;
+    color: white;
+    line-height: 87px;
+    text-align: center;
+    font-size: 34px;
+    opacity: 1;
+    border-radius: 43px;
+    margin: 64px auto 31px;
+  }
+  .confirm-btn-blue {
+    background: #023694;
+  }
+  .confirm-btn-green {
+    background: #0d6b38;
+  }
+  .disabled-btn {
+    background-color: #c1c1c1;
+    background-image: none;
+  }
+
+  .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>

src/pages/parkingFee/mixins/vehicleAddOrEdit.js

@@ -17,6 +17,12 @@ export default {
     uniPop,
     plateNumber,
   },
+  props:{
+    theme:{
+      type: String,
+      default: ''
+    }
+  },
   data() {
     return {
       carInfo: {},
@@ -170,7 +176,7 @@ export default {
             if (result && result.code == '000000') {
               if (result.data) {
                 Toast({
-                  message: '绑定车牌成功',
+                  message: '修改车牌成功',
                   onClose: () => {
                     this.$router.back();
                   },

src/pages/parkingFee/vehicleAddOrEdit.vue

@@ -1,16 +1,21 @@
 <template>
-  <component :is="componentName"></component>
+  <component :is="componentName" :theme="theme"></component>
 </template>
 
 <script>
 import officeBlueCom from './components/officeBlue/vehicleAddOrEdit.vue';
 import baseParkingFeeCom from './components/base/vehicleAddOrEdit.vue';
+import purpleCom from './components/purple/vehicleAddOrEdit.vue';
 import baseMixins from './mixins/base'
 export default {
   mixins:[baseMixins],
   components: {
     officeBlueCom,
     baseParkingFeeCom,
+    purpleCom
   },
+  mounted() {
+    this.componentName = 'purpleCom';
+  }
 };
 </script>