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

<template>
  <div :class="theme">
    <scroll-view scroll-y="true" :class="['scroll-Y']">
      <!-- 登录校验 -->
      <!-- <authorize ref="authorize"></authorize> -->
      <!-- <LoginDom></LoginDom> -->
      <div class="wrap">
        <div class="wrap_plate">我的车牌</div>
        <!--        <div v-else class="wrap_plate">车牌号绑定</div>-->
        <div
          class="plate_plate"
          :class=" 'linear-gradient-' + item.licensePlateType "
          v-for="item in licensePlateList"
          :key="item.id"
        >
          <div class="plate_border">
            <div
              class="plate_plate_index plate_plate_index1"
            >
              我的车牌
            </div>
<!--            <img v-if="isHZ && item.eligible" class="discountCar" :src="`${require(`@/pages/parkingFee/static/images/${source ==='KIP' ? 'discountCarOffice': 'discountCar' }.svg`)}`" />-->
            <div class="discountCar" v-if="isHZ && item.eligible">
              优惠车
            </div>
            <div class="plate_plate_index plate_plate_index2">
              {{ item.vehicleNo | formatCarno }}
            </div>
            <div class="plate_plate_index plate_plate_index3 bb">
              <img
                class="car-icon"
                :src="require(`@/pages/parkingFee/static/images/icon-carType.png`)"
              />
              <div>车牌类型</div>
              <div class="licensePlateTypeDesc">
                {{ item.licensePlateTypeDesc }}
              </div>
            </div>
            <!-- <div class="plate_tag-icon" :class="
            item.licensePlateType === 'NEW_ENERGY_CAR_NO'
              ? 'plate_tag_icon_green'
              : item.licensePlateType === 'ORDINARY_CAR_NO'
              ? 'plate_tag_icon_blue'
              : ''
          " v-if="custTypeId > 0"></div> -->
            <div class="plate_plate_index plate_plate_index4">
              <div class="item" @click.stop="toPayBefore(item)">
                <img :src="require(`@/pages/parkingFee/static/images/white_detail.png`)" alt=""/><span>查询{{ isHZ ? '缴费' : ''}}</span>
              </div>
              <div class="item" @click="toEditBefore(item)">
                <img :src="require(`@/pages/parkingFee/static/images/white_edit.png`)" alt=""/><span
              >{{isHZ? '修改': '编辑'}}</span
              >
              </div>
              <div class="item" @click="toDelete(item)">
                <img :src="require(`@/pages/parkingFee/static/images/white_delete.png`)" alt=""/><span
              >删除</span
              >
              </div>
              <!-- <div class="plate_plate_index4_index2">
              <img src="static/images/money.png" @click="toPay(item.vehicleNo)" />
              <img src="static/images/update.png" class="mrg-left-20" @click="toEdit(item)" />
              <img src="static/images/delete.png" class="mrg-left-20" @click="toDelete(item)" />
            </div> -->
            </div>
          </div>
        </div>
<!--        <div
          class="add_plate_no_data"
          v-if="!licensePlateList.length"
          @click="toAdd"
        >
          <div class="add_plate_no_data_title">
            &lt;!&ndash;          <img class="addcar" :src="require(`./static/images/addcar.png`)" alt="" />&ndash;&gt;
            <svg class="addcar" width="40" height="39" viewBox="0 0 40 39" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.5557 0C8.75538 0 0 8.73044 0 19.5C0 30.2696 8.75538 39 19.5557 39C30.356 39 39.1114 30.2696 39.1114 19.5C39.1114 8.73044 30.356 0 19.5557 0ZM29.3336 21.5947H21.6946V29.2119H17.4168V21.5947H9.77786V17.3291H17.4168V9.71191H21.6946V17.3291H29.3336V21.5947Z" fill="var(&#45;&#45;k-color-primary-01)"/>
            </svg>
            添加车牌
          </div>
          <div class="add_plate_no_data_info">添加车牌享受便捷车牌管理服务</div>
        </div>-->
        <div class="new_add_plate_no_data" v-if="!licensePlateList.length" @click="toAdd">
          <svg width="702" height="200" viewBox="0 0 702 200" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="0.5" y="0.5" width="701" height="199" rx="3.5" fill="var(--k-color-primary-05)" stroke="var(--k-color-primary-01)" stroke-dasharray="6"/>
            <path d="M203.26 118.906V120.38H207.99C207.814 121.348 207.572 122.272 207.22 123.152H202.248V124.67H206.516C206.428 124.802 206.34 124.934 206.252 125.088C205.196 126.672 203.634 128.058 201.544 129.202L202.534 130.456C204.734 129.114 206.406 127.596 207.528 125.902C207.748 125.506 207.968 125.11 208.188 124.67H210.3C211.51 126.958 213.578 128.828 216.504 130.258L217.186 128.872C214.81 127.86 213.05 126.452 211.906 124.67H216.526V123.152H208.804C209.112 122.294 209.354 121.37 209.574 120.38H215.558V118.906H203.26ZM204.602 130.522C203.81 132.678 202.864 134.526 201.786 136.088L203.084 137.012C204.162 135.362 205.108 133.404 205.922 131.16L204.602 130.522ZM198.574 118.356L197.474 119.412C198.948 120.424 200.114 121.392 200.95 122.294L202.028 121.216C201.104 120.248 199.938 119.302 198.574 118.356ZM198.046 123.614L196.968 124.67C198.464 125.814 199.63 126.914 200.488 127.926L201.566 126.848C200.62 125.77 199.454 124.692 198.046 123.614ZM200.048 129.686C199.19 132.326 198.178 134.922 197.034 137.43L198.508 138.09C199.564 135.626 200.554 133.008 201.434 130.236L200.048 129.686ZM207.484 138.222C208.584 138.222 209.134 137.584 209.134 136.33V127.904H207.616V135.956C207.616 136.528 207.374 136.836 206.934 136.836C206.362 136.836 205.746 136.792 205.108 136.726L205.438 138.222H207.484ZM214.282 129.994L212.896 130.456C213.864 132.304 214.744 134.46 215.558 136.88L216.966 136.264C216.218 134.042 215.316 131.952 214.282 129.994ZM211.378 130.786L210.036 131.248C210.894 133.096 211.664 135.208 212.368 137.628L213.776 136.99C213.094 134.79 212.302 132.722 211.378 130.786ZM238.042 121.304H230.848V137.87H232.366V136.396H236.502V137.87H238.042V121.304ZM232.366 134.878V122.822H236.502V134.878H232.366ZM222.752 118.092V122.536H219.232V124.076H222.752C222.686 130.104 221.366 134.504 218.814 137.254L219.98 138.288C222.796 135.296 224.248 130.566 224.336 124.076H227.262C227.218 129.972 227.13 133.514 226.998 134.658C226.822 135.912 226.162 136.55 225.04 136.55C224.512 136.55 223.896 136.506 223.192 136.462L223.588 137.914C224.38 137.958 224.93 138.002 225.26 138.002C227.196 138.002 228.274 137.078 228.494 135.274C228.714 133.646 228.824 129.4 228.824 122.536H224.336V118.092H222.752ZM241.936 120.864V122.404H246.336C245.258 124.384 244.07 126.056 242.794 127.376L243.146 128.828H250.472V132.062H241.606V133.602H250.472V138.332H252.078V133.602H260.416V132.062H252.078V128.828H258.854V127.376H252.078V124.142H250.472V127.376H244.796C245.984 125.924 247.062 124.274 248.052 122.404H260.042V120.864H248.822C249.196 120.028 249.57 119.17 249.922 118.268L248.338 117.916C247.942 118.95 247.524 119.94 247.106 120.864H241.936ZM268.16 118.268V124.142H265.828V118.708H264.31V126.716C264.288 131.6 263.738 135.164 262.682 137.364L263.848 138.376C264.838 136.506 265.454 133.8 265.718 130.258H268.38V137.892H269.92V128.784H265.784C265.806 128.124 265.828 127.442 265.828 126.716V125.616H270.91V124.142H269.678V118.268H268.16ZM271.944 119.984V129.29H275.2C274.628 130.17 273.726 130.874 272.472 131.446L273.11 132.458H270.932V133.976H277.664V138.134H279.204V133.976H283.01V132.458H279.204V130.17H277.664V132.458H273.374C274.826 131.82 275.882 130.94 276.542 129.818L276.806 129.29H281.888V119.984H276.96C277.246 119.368 277.466 118.73 277.642 118.048L276.058 117.85C275.904 118.576 275.662 119.28 275.354 119.984H271.944ZM280.436 127.904H277.268C277.444 127.134 277.576 126.254 277.62 125.286H280.436V127.904ZM275.794 127.904H273.374V125.286H276.19C276.146 126.254 276.014 127.112 275.794 127.904ZM273.374 123.944V121.392H276.212V123.944H273.374ZM277.642 121.392H280.436V123.944H277.642V121.392ZM288.422 122.69V127.134H301.6V122.69H288.422ZM300.082 125.77H289.94V124.054H300.082V125.77ZM294.758 117.982L292.954 118.268C293.328 118.752 293.68 119.302 294.01 119.874H285.452V121.37H304.548V119.874H295.748C295.44 119.17 295.11 118.554 294.758 117.982ZM284.968 132.7V134.152H294.604V135.736C294.604 136.484 294.252 136.858 293.592 136.858C292.888 136.858 291.92 136.814 290.688 136.748L291.106 138.2H294.208C295.506 138.2 296.166 137.518 296.166 136.198V134.152H305.032V132.7H296.166V132.282C298.564 131.358 300.698 130.478 302.546 129.62V128.476H287.102V129.906H299.422C297.574 130.676 295.968 131.314 294.604 131.842V132.7H284.968ZM324.854 118.202C320.432 118.818 314.866 119.126 308.156 119.126L308.618 120.556C315.68 120.556 321.356 120.204 325.624 119.544L324.854 118.202ZM326.196 124.802H322.016C322.742 123.856 323.446 122.69 324.15 121.282L322.566 120.688C321.95 122.14 321.202 123.526 320.322 124.802H307.804V129.818H309.344V126.298H324.656V129.818H326.196V124.802ZM310.906 121.106L309.52 121.81C310.29 122.668 311.016 123.658 311.698 124.758L313.062 124.076C312.402 122.998 311.676 122.008 310.906 121.106ZM316.142 120.864L314.712 121.546C315.46 122.426 316.142 123.438 316.802 124.582L318.21 123.856C317.55 122.756 316.846 121.766 316.142 120.864ZM310.488 128.454V129.906H311.368C312.226 131.6 313.656 133.096 315.658 134.372C313.392 135.362 310.598 136.154 307.276 136.77L308.112 138.266C311.742 137.518 314.778 136.528 317.242 135.296C319.53 136.484 322.412 137.474 325.888 138.244L326.812 136.836C323.666 136.198 321.004 135.384 318.826 134.394C320.894 133.118 322.412 131.578 323.38 129.818V128.454H310.488ZM312.996 129.906H321.62C320.608 131.314 319.156 132.546 317.22 133.602C315.306 132.546 313.898 131.314 312.996 129.906ZM335.546 118.972V120.424H340.98V122.382H335.788V130.83H340.914C340.782 132.018 340.408 133.074 339.814 133.954C338.802 133.25 337.878 132.436 337.042 131.512L335.854 132.348C336.734 133.36 337.724 134.24 338.802 134.988C337.79 135.758 336.272 136.418 334.226 136.946L335.04 138.222C337.284 137.628 338.978 136.836 340.166 135.846C342.608 137.254 345.468 138.046 348.768 138.222L349.164 136.77C346.106 136.638 343.444 135.956 341.156 134.746C341.882 133.69 342.322 132.392 342.476 130.83H347.712V122.382H342.52V120.424H348.746V118.972H335.546ZM346.216 129.532H342.52V127.222H346.216V129.532ZM340.98 129.532H337.284V127.222H340.98V129.532ZM337.284 125.924V123.68H340.98V125.924H337.284ZM342.52 123.68H346.216V125.924H342.52V123.68ZM331.432 125.99V138.178H332.994V123.262C333.698 121.81 334.27 120.292 334.754 118.686L333.324 118.026C332.4 121.436 330.882 124.472 328.814 127.112L329.342 128.784C330.09 127.904 330.794 126.958 331.432 125.99ZM369.272 130.368V127.156H370.702V125.792H369.272V122.602H364.938V120.974H370.504V119.588H364.938V118.048H363.42V119.588H358.316V120.974H363.42V122.602H359.328V123.966H363.42V125.792H358.448V127.156H363.42V129.004H359.174V130.368H363.42V135.934C363.156 135.846 362.936 135.78 362.716 135.692C361.88 135.318 361.132 134.482 360.472 133.162C360.582 132.656 360.692 132.106 360.78 131.49L359.306 131.27C358.954 133.844 358.118 135.868 356.798 137.32L358.074 138.2C358.866 137.32 359.526 136.176 360.032 134.724C360.648 135.846 361.352 136.616 362.122 137.012C363.09 137.496 364.938 137.76 367.666 137.782C368.546 137.804 369.514 137.826 370.614 137.826L371.076 136.22C370.108 136.286 368.942 136.33 367.556 136.33C366.566 136.33 365.686 136.286 364.938 136.198V133.734H369.778V132.348H364.938V130.368H369.272ZM364.938 123.966H367.842V125.792H364.938V123.966ZM367.842 127.156V129.004H364.938V127.156H367.842ZM353.696 137.958C354.928 137.958 355.544 137.342 355.544 136.11V129.488C356.248 129.136 356.974 128.762 357.7 128.366V126.782C356.996 127.178 356.292 127.574 355.544 127.926V123.592H357.898V122.074H355.544V118.07H353.96V122.074H351.254V123.592H353.96V128.63C352.97 129.026 351.958 129.356 350.946 129.62L351.342 131.204C352.222 130.896 353.08 130.566 353.96 130.214V135.714C353.96 136.264 353.674 136.55 353.146 136.55C352.596 136.55 352.024 136.506 351.43 136.44L351.76 137.958H353.696ZM373.936 120.864V122.404H378.336C377.258 124.384 376.07 126.056 374.794 127.376L375.146 128.828H382.472V132.062H373.606V133.602H382.472V138.332H384.078V133.602H392.416V132.062H384.078V128.828H390.854V127.376H384.078V124.142H382.472V127.376H376.796C377.984 125.924 379.062 124.274 380.052 122.404H392.042V120.864H380.822C381.196 120.028 381.57 119.17 381.922 118.268L380.338 117.916C379.942 118.95 379.524 119.94 379.106 120.864H373.936ZM400.16 118.268V124.142H397.828V118.708H396.31V126.716C396.288 131.6 395.738 135.164 394.682 137.364L395.848 138.376C396.838 136.506 397.454 133.8 397.718 130.258H400.38V137.892H401.92V128.784H397.784C397.806 128.124 397.828 127.442 397.828 126.716V125.616H402.91V124.142H401.678V118.268H400.16ZM403.944 119.984V129.29H407.2C406.628 130.17 405.726 130.874 404.472 131.446L405.11 132.458H402.932V133.976H409.664V138.134H411.204V133.976H415.01V132.458H411.204V130.17H409.664V132.458H405.374C406.826 131.82 407.882 130.94 408.542 129.818L408.806 129.29H413.888V119.984H408.96C409.246 119.368 409.466 118.73 409.642 118.048L408.058 117.85C407.904 118.576 407.662 119.28 407.354 119.984H403.944ZM412.436 127.904H409.268C409.444 127.134 409.576 126.254 409.62 125.286H412.436V127.904ZM407.794 127.904H405.374V125.286H408.19C408.146 126.254 408.014 127.112 407.794 127.904ZM405.374 123.944V121.392H408.212V123.944H405.374ZM409.642 121.392H412.436V123.944H409.642V121.392ZM433.292 126.716H420.73V138.178H422.314V137.276H432.742V138.2H434.304V132.546H422.314V131.028H433.292V126.716ZM422.314 135.868V133.822H432.742V135.868H422.314ZM422.314 129.752V127.992H431.752V129.752H422.314ZM436.328 124.054H427.968C427.748 123.438 427.506 122.888 427.264 122.382L428.452 123.108C428.936 122.448 429.398 121.744 429.794 120.996H431.18C431.708 121.7 432.17 122.448 432.566 123.24L433.974 122.712C433.71 122.184 433.336 121.612 432.874 120.996H436.79V119.61H430.432C430.608 119.17 430.762 118.73 430.916 118.268L429.398 117.938C428.914 119.522 428.166 120.952 427.11 122.272L427.242 122.36L425.702 122.624C425.944 123.064 426.164 123.526 426.384 124.054H417.672V128.036H419.212V125.418H434.788V128.036H436.328V124.054ZM420.312 120.996H421.566C422.116 121.788 422.6 122.602 422.996 123.438L424.448 122.888C424.14 122.294 423.722 121.656 423.238 120.996H426.934V119.61H421.038C421.214 119.17 421.412 118.73 421.588 118.246L420.07 117.916C419.454 119.588 418.486 121.128 417.166 122.492L418.552 123.372C419.212 122.646 419.784 121.854 420.312 120.996ZM447.152 118.906V129.07H451.75V131.666H446.778V133.162H451.75V136.022H445.854V137.54H459.098V136.022H453.334V133.162H458.284V131.666H453.334V129.07H457.91V118.906H447.152ZM456.392 127.662H453.334V124.692H456.392V127.662ZM451.75 127.662H448.67V124.692H451.75V127.662ZM448.67 123.306V120.314H451.75V123.306H448.67ZM453.334 120.314H456.392V123.306H453.334V120.314ZM439.386 126.188V127.706H441.784V133.228C440.838 133.492 439.87 133.712 438.902 133.888L439.298 135.406C441.63 134.834 443.808 134.13 445.832 133.294V131.754C445.04 132.106 444.248 132.414 443.412 132.7V127.706H445.832V126.188H443.412V120.974H446.096V119.478H439.078V120.974H441.784V126.188H439.386ZM464.004 125.55H467.546V129.224H464.004V125.55ZM467.546 124.12H464.004V120.402H467.546V124.12ZM463.982 130.654H467.546V135.626C467.546 136.418 467.26 136.814 466.71 136.814C466.182 136.814 465.632 136.77 465.016 136.726L465.39 138.134H467.15C468.382 138.134 468.998 137.452 468.998 136.132V118.972H462.574V129.532C462.552 132.612 462.112 135.164 461.232 137.144L462.42 138.244C463.322 136.264 463.85 133.734 463.982 130.654ZM472.342 128.476H472.87C473.354 130.632 474.3 132.568 475.708 134.284C474.828 135.34 473.772 136.198 472.518 136.88L473.354 138.156C474.674 137.452 475.796 136.55 476.764 135.428C477.776 136.418 478.964 137.32 480.372 138.134L481.164 136.792C479.822 136.022 478.656 135.164 477.666 134.196C478.678 132.612 479.404 130.676 479.822 128.41V127.068H472.342V120.402H478.216C478.172 122.074 478.084 123.152 477.93 123.636C477.798 123.966 477.6 124.186 477.336 124.274C477.072 124.34 476.698 124.384 476.17 124.384C475.554 124.384 475.07 124.362 474.696 124.362L475.114 125.726H476.896C478.282 125.726 479.096 125.264 479.36 124.362C479.624 123.482 479.756 121.678 479.756 118.95H470.846V138.222H472.342V128.476ZM474.234 128.476H478.414C478.018 130.214 477.424 131.732 476.61 133.052C475.488 131.688 474.696 130.17 474.234 128.476ZM489.568 117.96C488.644 120.16 486.84 122.008 484.2 123.526L485.168 124.802C486.18 124.186 487.082 123.504 487.918 122.756C488.974 123.68 490.118 124.516 491.35 125.242C488.93 126.21 486.136 126.914 482.946 127.354L483.672 128.85C487.236 128.3 490.382 127.398 493.066 126.166C495.794 127.53 498.896 128.41 502.372 128.806L503.098 127.332C500.04 127.024 497.268 126.342 494.782 125.286C496.806 124.142 498.522 122.756 499.93 121.128V119.852H490.338C490.646 119.324 490.932 118.774 491.174 118.18L489.568 117.96ZM493.044 124.472C491.57 123.702 490.206 122.778 488.974 121.7L489.26 121.348H497.664C496.366 122.536 494.826 123.592 493.044 124.472ZM491.702 127.75C491.702 128.63 491.614 129.466 491.438 130.258H484.442V131.688H490.998C490.822 132.128 490.58 132.546 490.316 132.942C489.172 134.548 486.774 135.89 483.166 136.946L484.222 138.244C488.27 136.968 490.844 135.318 491.966 133.338C492.252 132.81 492.494 132.26 492.67 131.688H499.182C499.116 133.888 498.918 135.252 498.588 135.78C498.236 136.308 497.422 136.594 496.102 136.616L493.506 136.506L493.902 137.936C494.914 137.98 495.772 138.024 496.476 138.024C498.038 138.024 499.138 137.65 499.776 136.924C500.414 136.198 500.744 133.976 500.788 130.258H493.044C493.176 129.466 493.264 128.63 493.264 127.75H491.702Z" fill="#666666"/>
            <path d="M320.812 65.848V68.632H327.34C327.148 69.784 326.86 70.904 326.476 71.96H319.34V74.872H325.036C324.972 75 324.876 75.128 324.78 75.288C323.276 77.432 321.068 79.288 318.156 80.824L320.076 83.224C323.308 81.24 325.74 79 327.404 76.504C327.692 75.992 327.98 75.448 328.268 74.872H331.02C332.812 78.136 335.788 80.824 339.948 82.872L341.26 80.184C338.124 78.84 335.756 77.08 334.156 74.872H340.3V71.96H329.484C329.804 70.904 330.124 69.784 330.38 68.632H338.892V65.848H320.812ZM322.412 82.872C321.324 86.008 320.076 88.664 318.604 90.904L321.1 92.728C322.572 90.296 323.852 87.416 324.94 84.088L322.412 82.872ZM314.348 65.08L312.268 67.096C314.412 68.6 316.076 70.008 317.26 71.32L319.34 69.24C317.996 67.832 316.332 66.456 314.348 65.08ZM313.58 72.728L311.5 74.744C313.676 76.472 315.372 78.04 316.588 79.512L318.7 77.432C317.292 75.864 315.596 74.296 313.58 72.728ZM315.884 81.688C314.668 85.496 313.26 89.208 311.628 92.856L314.444 94.104C315.916 90.552 317.292 86.776 318.54 82.744L315.884 81.688ZM327.02 94.328C328.876 94.328 329.804 93.24 329.804 91.064V79.224H326.892V90.36C326.892 91.224 326.572 91.672 325.964 91.672C325.164 91.672 324.3 91.576 323.404 91.448L324.044 94.328H327.02ZM337.324 82.104L334.7 82.968C336.012 85.72 337.228 88.856 338.316 92.44L341.004 91.224C339.98 87.992 338.732 84.952 337.324 82.104ZM333.132 83.224L330.572 84.088C331.756 86.808 332.844 89.944 333.804 93.528L336.492 92.28C335.532 89.08 334.412 86.072 333.132 83.224ZM371.724 69.272H360.812V93.816H363.724V91.8H368.78V93.816H371.724V69.272ZM363.724 88.888V72.184H368.78V88.888H363.724ZM348.908 64.856V71.064H344.044V74.008H348.908C348.78 82.456 346.924 88.632 343.372 92.472L345.644 94.488C349.644 90.136 351.724 83.32 351.916 74.008H355.372C355.308 82.52 355.212 87.512 355.02 89.016C354.796 90.488 353.996 91.256 352.652 91.256C351.884 91.256 350.956 91.192 349.868 91.096L350.636 93.88C351.788 93.976 352.62 94.04 353.132 94.04C355.948 94.04 357.548 92.824 357.868 90.392C358.188 87.928 358.348 81.496 358.348 71.064H351.916V64.856H348.908ZM377.004 68.632V71.576H382.892C381.452 74.2 379.884 76.344 378.188 78.072L378.892 80.856H389.196V84.92H376.588V87.864H389.196V94.488H392.3V87.864H404.14V84.92H392.3V80.856H401.932V78.072H392.3V73.784H389.196V78.072H382.06C383.564 76.152 384.972 74.008 386.252 71.576H403.66V68.632H387.692C388.172 67.544 388.652 66.424 389.132 65.208L386.092 64.536C385.548 65.944 384.972 67.32 384.396 68.632H377.004ZM414.86 65.112V73.4H412.332V65.752H409.388V77.496C409.356 84.44 408.652 89.496 407.244 92.632L409.484 94.584C410.86 91.896 411.756 88.056 412.14 83H415.212V93.848H418.156V80.152H412.268C412.3 79.32 412.332 78.424 412.332 77.496V76.248H419.404V73.4H417.804V65.112H414.86ZM420.524 67.448V81.496H424.908C424.14 82.456 422.988 83.256 421.484 83.96L422.476 85.496H419.244V88.408H428.78V94.2H431.724V88.408H437.004V85.496H431.724V82.488H428.78V85.496H423.98C425.644 84.632 426.892 83.512 427.756 82.104C427.852 81.912 427.948 81.72 428.076 81.496H435.564V67.448H428.588C428.94 66.648 429.228 65.816 429.452 64.952L426.444 64.568C426.252 65.56 425.932 66.52 425.516 67.448H420.524ZM432.812 78.872H428.94C429.132 77.912 429.292 76.856 429.388 75.704H432.812V78.872ZM426.156 78.872H423.244V75.704H426.636C426.572 76.856 426.412 77.912 426.156 78.872ZM423.244 73.176V70.104H426.7V73.176H423.244ZM429.452 70.104H432.812V73.176H429.452V70.104Z" fill="#333333"/>
            <path d="M277.556 60C266.755 60 258 68.7304 258 79.5C258 90.2696 266.755 99 277.556 99C288.356 99 297.111 90.2696 297.111 79.5C297.111 68.7304 288.356 60 277.556 60ZM287.334 81.5947H279.695V89.2119H275.417V81.5947H267.778V77.3291H275.417V69.7119H279.695V77.3291H287.334V81.5947Z" fill="var(--k-color-primary-01)"/>
            <path d="M279.694 69.7119H275.416V77.3291H267.777V81.5947H275.416V89.2119H279.694V81.5947H287.333V77.3291H279.694V69.7119Z" fill="white"/>
          </svg>
        </div>
        <div class="wrap_plate mt36">
          <div class="title">温馨提示:</div>
          <div class="desc">·用户可以添加多个"燃油车牌号"或"新能源车牌号"</div>
          <div class="desc">·用户可以更改或删除已经绑定车牌</div>
        </div>
      </div>
    </scroll-view>
    <van-popup v-model="deleteDialogSwitch" position="center">
      <div class="popup-dialog">
        <div class="dialog-title">
          <span class="dialog-title-text">删除已绑定车牌</span>
        </div>
        <div class="dialog-content border-top">
          <span class="dialog-content-text">是否确认删除已经绑定车牌</span>
          <span class="dialog-content-carno">{{ activeCarno }}</span>
        </div>
        <div class="dialog-button-group">
          <div class="dialog-button" @click="cancelDelete">
            <span class="dialog-button-text">取消</span>
          </div>
          <div class="dialog-button border-left" @click="doDelete">
            <span class="dialog-button-text">确定</span>
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="deleteSuccessDialogSwitch" position="center">
      <div class="popup-dialog">
        <div class="dialog-content">
          <uni-icons
            type="checkbox-filled"
            size="60"
            color="#7DB124"
          ></uni-icons>
          <span class="dialog-content-text">删除成功</span>
        </div>
        <div class="dialog-button-group">
          <div class="dialog-button" @click="confirmDialog">
            <span class="dialog-button-text">确定</span>
          </div>
        </div>
      </div>
    </van-popup>
    <div
      class="add_plate_box"
      v-if="licensePlateList.length && licensePlateList.length < 3"
      @click="toAdd"
    >
      <div class="add_plate_btn">+添加车牌号</div>
      <div class="btnpb"></div>
    </div>
    <van-dialog class="dialog-box" v-model="show" title="删除已绑定车牌" show-cancel-button confirm-button-color="var(--k-color-primary-01, #064c8a)" @confirm="doDelete">
      <div class="info">是否确认删除已经绑定车牌</div>
      <div class="activeCarno">{{ activeCarnoFilter(activeCarno) }}</div>
    </van-dialog>
    <checkCarPopup ref="checkCarPopup"></checkCarPopup>
  </div>
</template>

<script>
import vehicleManagementJs from './mixins/vehicleManagement'
import baseMixins from './mixins/base'

export default {
  mixins: [baseMixins,vehicleManagementJs]
}
</script>

<style lang="less" scoped>
.scroll-Y {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f4f7ff;
}

.wrap {
  display: flex;
  flex-direction: column;
  width: 100%;

  .wrap_plate {
    margin-top: 24px;
    margin-left: 40px;
    font-style: normal;
    font-weight: 500;
    font-size: 34px;
    color: #333333;

    &.mt36 {
      margin-top: 36px;
    }

    .title {
      // width: 180px;
      // height: 50px;
      // font-family: PingFangHK-Semibold, PingFangHK;
      color: #333333;
      margin-bottom: 20px;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 30px;
      line-height: 40px;
    }

    .desc {
      color: #999999;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 26px;
      line-height: 40px;
    }
  }

  .border-change {
    border: 4px solid #707070;
  }

  .plate_tag-icon {
    position: absolute;
    left: 0;
    top: 40px;
    width: 20px;
    height: 13px;
    opacity: 1;
    border-radius: 0px 12px 1px 0px;
  }

  .plate_tag_icon_green {
    background: #39b54a;
  }

  .plate_tag_icon_blue {
    background: #29abe2;
  }

  .plate_plate {
    width: 670px;
    margin-left: 40px;
    margin-top: 20px;
    padding: 4px;
    border-radius: 20px 128px 20px 20px;

    .plate_border {
      // border-radius: 17px 125px 17px 17px;
      background-color: var(--k-color-primary-01, #064c8a);
      border-radius: 4px;
      padding: 30px;
      color: #ffffff;
      position: relative;

      .plate_tag {
        display: inline-block;
        width: 23px;
        height: 14px;
        border-top-right-radius: 18px;
      }

      .bgc-0 {
        background-color: #29abe2;
      }

      .bgc-1 {
        background-color: #39b54a;
      }

      .bgc-2 {
        background-color: #bc9f6d;
      }
    }

    .plate_plate_index {
      padding-top: 10px;
      font-size: 26px;
    }
    .discountCar {
      position: absolute;
      right: 30px;
      top: 30px;
      width: 120px;
      height: 44px;
      line-height: 44px;
      background-color: var(--k-color-primary-02, #064c8a);
      text-align: center;
      font-size: 28px;
      font-weight: 400;
      border-radius: 22px;
      font-style: normal;
      color: #FFFFFF;
    }
    .plate_plate_index1,
    .plate_plate_index3 {
      font-size: 28px;
      // font-weight: 400;
      color: #ffffff;
      line-height: 40px;
      display: flex;
      align-items: center;

      .car-icon {
        width: 40px;
        height: 40px;
        margin-right: 10px;
      }

      .licensePlateTypeDesc {
        margin-left: 5px;
        font-size: 28px;
        color: #ffffff;
        line-height: 40px;
        margin-left: 20px;
      }

      &.bb {
        padding-bottom: 23px;
        margin-bottom: 23px;
        border-bottom: 0.5px solid #ffffff;
      }
    }

    .plate_plate_index1 {
      display: inline-block;
      // padding-left: 14px;
    }

    .plate_plate_index2 {
      font-weight: 500;
      font-size: 38px;
      font-weight: 600;
      color: #ffffff;
      line-height: 53px;
    }

    .plate_plate_index4 {
      display: flex;
      justify-content: space-between;
      padding: 0 26px;
      

      .plate_plate_index4_index2 {
        width: 164px;
      }

      .item {
        //width: 100%;
        //flex: 1;
        font-size: 28px;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        white-space: nowrap;
        &:nth-child(2) {
          &::after {
            content: '';
            width: 1px;
            height: 30px;
            position: absolute;
            right: -52%;
            background-color: rgba(255, 255, 255, 0.3);
          }
          &::before {
            content: '';
            width: 1px;
            height: 30px;
            position: absolute;
            left: -52%;
            background-color: rgba(255, 255, 255, 0.3);
          }
        }

        &:last-child {
          &::after {
            width: 0px;
          }
        }

        img {
          width: 27px;
          height: 27px;
          margin-right: 15px;
        }

        span {
          text-align: left;
        }
      }
    }
  }

  .linear-gradient-ORDINARY_CAR_NO {
    // background-image: linear-gradient(#29abe2, #2e3393);
  }

  .linear-gradient-NEW_ENERGY_CAR_NO {
    // background-image: linear-gradient(#8bc63f, #026937);
  }

  .linear-gradient-SPECIAL_CAR_NO {
    // background-image: linear-gradient(#caa86e, #666666);
  }

  .mrg-left-20 {
    margin-left: 20px;
  }
}

.popup-dialog {
  // width: 300px;
  border-radius: 10px;
  background-color: #fff;
}

.dialog-title {
  flex-direction: row;
  justify-content: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.dialog-title-text {
  font-size: 16px;
  font-weight: 500;
}

.dialog-content {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px;
}

.border-top {
  border-top-color: #f5f5f5;
  border-top-style: solid;
  border-top-width: 1px;
}

.dialog-content-text {
  font-size: 14px;
}

.dialog-content-carno {
  font-weight: 500;
  font-size: 16px;
  margin-top: 8px;
}

.dialog-button-group {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  border-top-color: #f5f5f5;
  border-top-style: solid;
  border-top-width: 1px;
}

.dialog-button {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */

  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 45px;
}

.border-left {
  border-left-color: #f0f0f0;
  border-left-style: solid;
  border-left-width: 1px;
}

.dialog-button-text {
  font-size: 14px;
  color: #6e6e6e;
}

.add_plate_no_data {
  width: 90%;
  text-align: center;
  height: 200px;
  // border: 1px dashed #eaeaea;
  border: 1px dashed var(--k-color-primary-01);
  border-radius: 4px;
  // margin-left: 40px;
  margin: 0 auto;
  margin-top: 20px;
  color: #333;
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  background-color: var(--k-color-primary-06);
  font-family: 'PingFang SC';
  line-height: 45px;
  // display: flex;
  .addcar {
    width: 39px;
    height: 39px;
    margin-right: 13px;
    //vertical-align: middle;
  }
  .add_plate_no_data_title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 11px;
    padding-top: 60px;
    //vertical-align: middle;
  }
  .add_plate_no_data_info{
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 31px;
    /* identical to box height */
    color: #666666;
  }
}

.new_add_plate_no_data {
  width: 90%;
  text-align: center;
  height: 200px;
  margin: 20px auto 0;
  svg{
    width: 100%;
    height: 100%;
  }
}

.add_plate_box {
  text-align: center;
  // border: 1px dashed #eaeaea;
  background-color: #fafbff;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 999;
  padding: 30px 30px 50px 30px;
  box-shadow: 0 0 2px 0 hsla(0, 6%, 58%, 0.6);

  .btnpb {
    width: 100%;
  }

  .add_plate_btn {
    width: 100%;
    // margin-left: 30px;
    height: 90px;
    line-height: 90px;
    background-color: var(--k-color-primary-01);
    border-radius: 45px;
    font-size: 34px;
    font-weight: 400;
    color: #ffffff;
  }
}

.dialog-box {
  border-radius: 10px;
  
  .van-dialog__header {}
  /deep/ .van-dialog__content {
    margin-top: 34px;
    
    text-align: center;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    color: #333333;
    .info {
      margin-bottom: 20px;  
    }
    .activeCarno {
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 500;
      font-size: 36px;
      margin-bottom: 28px;
    }
  }
}
</style>