template-parking-h5/src/pages/parkingFee/vehicleAddOrEdit.vue

<template>
  <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="van-hairline--surround li" @click="clickShowKeyboard(0)" :class="[active === 0 ? 'active' : '']">
          {{ numArr[0] }}
        </div>
        <div class="van-hairline--surround li" @click="clickShowKeyboard(1)" :class="[active === 1 ? 'active' : '']">
          {{ numArr[1] }}
        </div>
        <div class="input_box_dian">·</div>
        <div class="van-hairline--surround li" @click="clickShowKeyboard(2)" :class="[active === 2 ? 'active' : '']">
          {{ numArr[2] }}
        </div>
        <div class="van-hairline--surround li" @click="clickShowKeyboard(3)" :class="[active === 3 ? 'active' : '']">
          {{ numArr[3] }}
        </div>
        <div class="van-hairline--surround li" @click="clickShowKeyboard(4)" :class="[active === 4 ? 'active' : '']">
          {{ numArr[4] }}
        </div>
        <div class="van-hairline--surround li" @click="clickShowKeyboard(5)" :class="[active === 5 ? 'active' : '']">
          {{ numArr[5] }}
        </div>
        <div :class="[' van-hairline--surround li', 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>
      <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" :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 baseMixins from './mixins/base'
export default {
  mixins: [baseMixins, 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: 1px dashed #fafbff;
      }
      &.active {
        border-color: var(--k-color-primary);
      }
      &.van-hairline--surround {
        &::after{
          border-radius: 7px;
          border-color: #D9DBE0;
        }
      }
      &.green-active {
        background: #F8FFED;
        border-color: #7DB124;
        color: #7DB124;
        img{

          width: 41px;
          height: 39px;
        }
      }
    }

    .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>