template-parking-h5/src/crmPages/parkingFee.vue

<template>
  <scroll-view
    scroll-y="true"
    :class="{ 'scroll-Y': true, 'color-scroll-Y': custTypeId !== 0 }"
    scroll-bottom="1000"
  >
    <wx-points-commit ref="wxPointsCommit"></wx-points-commit>

<!--    <authorize ref="authorize"></authorize>-->
    <my-protocol-modal
      ref="szProtocolModal"
      title="会员协议政策更新提示"
    ></my-protocol-modal>
    <view class="wrap">
      <view class="parkingFee">
        <view
          class="parkingFee-top"
          :style="{
            'background-image':
              'url(./static/images/parking-bgi.png);background-attachment: fixed;',
          }"
        >
          <view
            :class="{
              top_content: true,
              blue_top_content: custTypeId === 1,
              green_top_content: custTypeId === 2,
            }"
            :style="{
              'background-image':
                custTypeId === 1 ? `url(${picUrl}${blueHeadBg});` : '',
            }"
          >
            <view class="title_box">
              <text class="btn">缴费说明</text>
            </view>
            <view class="info" :class="!init_ch ? 'info_show' : ''"
              ><text>{{ parkInfoEntity.payinstruction }}</text></view
            >
          </view>
          <view
            class="top_down"
            @click="top_display"
            v-if="!init_ch && parkInfoEntity.payinstruction.length > 60"
            >︾</view
          >
          <view class="top_down" @click="top_display" v-else>︽</view>
          <view
            :class="{
              top_menu: true,
              blue_top_menu: custTypeId === 1,
              green_top_menu: custTypeId === 2,
            }"
            v-if="custTypeId >= 0"
          >
            <view class="menu_item" @click="doRouter">
              <image
                :src="`./static/images/icon2${colorAry[custTypeId]}.png`"
              />
              <text>缴费记录</text>
            </view>
            <view class="menu_item" @click="doRouter3">
              <image
                :src="`./static/images/icon3${colorAry[custTypeId]}.png`"
              />
              <text>停车券兑换</text>
            </view>
            <view class="menu_item" @click="doRouter1">
              <image
                :src="`./static/images/icon4${colorAry[custTypeId]}.png`"
              />
              <text>停车开票</text>
            </view>
            <view class="menu_item" @click="doRouter2">
              <image
                :src="`./static/images/icon1${colorAry[custTypeId]}.png`"
              />
              <text>车辆管理</text>
            </view>
          </view>
        </view>
        <view
          :class="{
            'parkingFee-bottom': true,
            'blue-parkingFee-bottom': custTypeId === 1,
            'green-parkingFee-bottom': custTypeId === 2,
          }"
        >
          <view class="parkingFee-search">
            <view class="search_tip" v-if="custTypeId === 0">
              <view>车辆类型</view>
              <view class="search_tip_pt">
                <view
                  :class="carType == 0 ? 'search_tip_pt_index' : ''"
                  @click="toggleType(0)"
                  >普通车牌</view
                >
                <view
                  :class="carType == 1 ? 'search_tip_pt_index' : ''"
                  @click="toggleType(1)"
                  >新能源</view
                >
                <view
                  :class="carType == 2 ? 'search_tip_pt_index' : ''"
                  @click="toggleType(2)"
                  >特殊车牌</view
                >
              </view>
            </view>
            <view
              :class="{
                blueClassify: custTypeId === 1,
                greenClassify: custTypeId === 2,
              }"
              v-else
            >
              <view
                :class="{ classifyItem: true, isChecked: carType === index }"
                v-for="(item, index) in classifyList"
                :key="index"
              >
                <view @click="toggleType(index)">{{ item }}</view>
              </view>
            </view>
            <view class="input-box">
              <view
                class="li"
                @click="clickShowKeyboard(0)"
                :class="[active === 0 ? 'active' : '']"
              >
                {{ numArr[0] }}
              </view>
              <view
                class="li"
                @click="clickShowKeyboard(1)"
                :class="[active === 1 ? 'active' : '']"
              >
                {{ numArr[1] }}
              </view>
              <view class="input_box_dian">·</view>
              <view
                class="li"
                @click="clickShowKeyboard(2)"
                :class="[active === 2 ? 'active' : '']"
              >
                {{ numArr[2] }}
              </view>
              <view
                class="li"
                @click="clickShowKeyboard(3)"
                :class="[active === 3 ? 'active' : '']"
              >
                {{ numArr[3] }}
              </view>
              <view
                class="li"
                @click="clickShowKeyboard(4)"
                :class="[active === 4 ? 'active' : '']"
              >
                {{ numArr[4] }}
              </view>
              <view
                class="li"
                @click="clickShowKeyboard(5)"
                :class="[active === 5 ? 'active' : '']"
              >
                {{ numArr[5] }}
              </view>
              <view
                class="li"
                @click="clickShowKeyboard(6)"
                :class="[active === 6 ? 'active' : '']"
              >
                {{ numArr[6] }}
              </view>
              <view
                class="li"
                @click="clickShowKeyboard(7)"
                :class="[active === 7 ? 'active' : '']"
                v-if="carType == 1"
              >
                <text v-if="numArr[7]">{{ numArr[7] }}</text>
              </view>
            </view>
            <uni-button
              type="primary"
              class="search-btn"
              :class="disabledBtn ? 'disabled-btn' : ''"
              :disabled="disabledBtn"
              @click="preHandleSearch"
            >
              查询缴费
            </uni-button>
          </view>
          <view class="vehicleMgt-list">
            <view class="vehicleMgt-title">
              <view>历史车辆</view>
              <!-- <image src="./static/images/icon5.png" class="vehicleMgt-title-img"/> -->
            </view>
            <view class="vehicleMgt-content" v-if="carList.length">
              <view
                class="item"
                v-for="(item, index) in carList"
                :key="index"
                @click="toHandleSearch(item, 1)"
                :class="vehicleNumber == item ? 'vehicleMgt-content_cls' : ''"
                >{{ item | formatCarno }}</view
              >
            </view>
          </view>
        </view>
      </view>
    </view>
    <plate-number
      ref="plateKeyboard"
      :carType="carType"
      :active="active"
      :ind="ind"
      :numArr="numArr"
      @carnoArr="updateCarno"
    ></plate-number>
  </scroll-view>
</template>

<script>
import authorize from '@/components/authorize/authorize.vue';
import plateNumber from '@/components/plate-number/plateNumber.vue';
import { REG_SOURCE } from '@/constants.js';
import { mapState } from 'vuex';
import MemberCacheTool from '@/utils/member-cache-tool.js';
import { buildShareSource } from '@/utils/utils.js';
const app = getApp();
export default {
  components: {
    authorize,
    plateNumber,
  },
  data() {
    return {
      vehicleMgt_content_index: -1, //历史车辆选中
      carType: 0, //车辆类型
      init_ch: false, // 字体超出隐藏显示
      search_price: false, //查询按钮隐藏显示
      parkInfoEntity: {},
      show_chinese: false, //是否显示汉字键盘
      show_allBoard: false, //是否显示英文数字键盘
      plate_number: '', //车牌号
      ind: null,
      numArr: ['', '', '', '', '', '', ''],
      active: null,
      carList: [], // 车辆列表
      classifyList: ['普通车牌', '新能源', '特殊车牌'], // 车牌类型
      vehicleNumber: '',
      localimgPic: '',
      hourMoney: '',
      showSq: false,
      blueHeadBg: 'parkingFee/fee-head-bg.png',
      picUrl: this.$picUrl,
      colorAry: ['', '-blue', '-green'],
      openId: null,
      options: null,
      preUrl: '',
      radiusType: null,
      payUrl: '',
    };
  },
  mounted() {
    this.$request({
      // url: this.$baseURL + 'api/1.0/park/checkCarIsInPark',
      url: this.$baseURL + 'api/1.0/park/parkingOrderSwitchBj',
      method: 'POST',
      header: JSON.parse(uni.getStorageSync('handleUser')),
      timeout: 10000,
    })
      .then((res) => {
        // console.log(res.data, 'radius')
        if (res.data.code === 0) {
          this.radiusType = res.data.data;
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: 'none',
          });
        }
      })
      .catch((err) => {
        uni.hideLoading();
        uni.showToast({
          title: '网络超时请稍后再试',
          duration: 2000,
          icon: 'none',
        });
        console.log(err);
      });
  },
  computed: {
    disabledBtn() {
      return this.numArr.findIndex((val) => !val) !== -1;
    },
    ...mapState({
      custTypeId: (state) => state.custTypeId,
    }),
  },
  // 分享
  onShareAppMessage() {
    let mallid = app.globalData.mallid;
    let pullVipcode = app.globalData?.member?.vipcode ?? null;
    let shareLink = 'pages/parkingFee/parkingFee?mallid=' + mallid;
    if (pullVipcode) {
      shareLink += '&pullVipcode=' + pullVipcode;
    }
    shareLink += '&' + buildShareSource('parking', '');
    // console.log('share app link ===> ', shareLink)
    return {
      title: '停车缴费', // 分享标题
      imageUrl: '', // 分享图标
      path: shareLink,
    };
  },
  // 分享
  onShareTimeline() {
    let mallid = app.globalData.mallid;
    let pullVipcode = app.globalData?.member?.vipcode ?? null;
    let shareLink = 'pages/parkingFee/parkingFee?mallid=' + mallid;
    if (pullVipcode) {
      shareLink += '&pullVipcode=' + pullVipcode;
    }
    shareLink += '&' + buildShareSource('parking', '');
    // console.log('share app link ===> ', shareLink)
    return {
      title: '停车缴费', // 分享标题
      imageUrl: '', // 分享图标
      path: shareLink,
    };
  },
  async onLoad(params) {
    this.options = params;
    await this.$onLaunched;
    this.localimgPic = this.$staticPicUrl + '/wxminilocalimg/parkingFee/';
    app.globalData.pullVipcode = params.pullVipcode || '';
    // app.globalData.mallid = params.mallid || app.globalData.mallid
    var ths = this;
    if (app.globalData.member) {
      // ths.getParkInfo()
      app.globalData.isNewMember = '';
      // 场景二维码记录(是否扫码进入)
      app.globalData.paramsScene = {};
      ths.$saveSceneQrcodeDetail(
        'page',
        'parkingFee',
        '停车缴费',
        '',
        '',
        '',
        ''
      );
    }
    // 埋点初始化
    this.parkingTrack = new this.$trackFactory('parking_query_payment', {});
    this.parkingTrack.track(1);
    // console.log('this.parkingTrack::::', this.parkingTrack)
    // 埋点本地化
    this.preUrl = uni.getStorageSync('previousUrl');
    uni.setStorageSync('previousUrl', '/pages/parkingFee/home.vue');
  },
  onShow() {
    const _this = this;
    const openId =
      uni.getStorageSync('openId') ||
      uni.getStorageSync('member').openid ||
      app.globalData.openId;
    if (openId) {
      this.openId = openId;
      this.getParkInfo();
      this.showSq = false;
    } else {
      const regSource = REG_SOURCE.PARKING;
      app.globalData.regSource = regSource;
      if (this.options?.regSource) {
        app.globalData.regSource = REG_SOURCE[this.options?.regSource];
      }
      if (this.options?.tpName) {
        app.globalData.tpName = this.options?.tpName;
      }
      this.$refs.authorize.login('/pages/parkingFee/parkingFee', () => {
        const openId =
          uni.getStorageSync('openId') ||
          uni.getStorageSync('member').openid ||
          app.globalData.openId;
        _this.openId = openId;
        _this.getParkInfo();
      });
      this.showSq = true;
    }
    this.$refs['szProtocolModal'].open();
  },
  methods: {
    toggleType(carType) {
      this.ind = 0;
      this.active = 0;
      this.carType = carType;
      // console.log(this.numArr)
      if (carType === 1) {
        this.numArr = [
          this.numArr[0],
          this.numArr[1],
          this.numArr[2],
          this.numArr[3],
          this.numArr[4],
          this.numArr[5],
          this.numArr[6],
          this.numArr[7],
        ];
      } else {
        this.numArr = [
          this.numArr[0],
          this.numArr[1],
          this.numArr[2],
          this.numArr[3],
          this.numArr[4],
          this.numArr[5],
          this.numArr[6],
        ];
      }
    },
    // 获取停车场信息
    getParkInfo: function () {
      uni.showLoading({
        title: '加载中',
      });
      const openId =
        uni.getStorageSync('openId') ||
        uni.getStorageSync('member').openid ||
        app.globalData.openId;
      let params = {
        mallid: app.globalData.mallid,
        groupId: app.globalData.groupId,
        openid: openId,
        // vipcode: app.globalData.member.vipcode
      };
      this.$md(params);
      this.$request({
        url: this.$baseURL + 'api/1.0/park/parkInfo',
        data: params,
        method: 'POST',
        header: JSON.parse(uni.getStorageSync('handleUser')),
      })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 0) {
            const data = res.data.data || {};
            this.carList = data.carList;
            this.parkInfoEntity = data.parkInfoEntity;
            this.hourMoney =
              parseFloat(this.parkInfoEntity.needmoney) /
              parseFloat(this.parkInfoEntity.tohours);
            let reg = /[;；]/g;
            this.parkInfoEntity.payinstruction =
              this.parkInfoEntity.payinstruction.replace(reg, '\r\n');
            this.parkInfoEntity.hourMoney = this.hourMoney;
            uni.setStorageSync('parkinfo', JSON.stringify(this.parkInfoEntity));
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: 'none',
            });
          }
        })
        .catch((err) => {
          uni.hideLoading();
          uni.showToast({
            title: '网络超时请稍后再试',
            duration: 2000,
            icon: 'none',
          });
          console.log(err);
        });
    },
    //缴费说明隐藏显示
    top_display() {
      this.init_ch = !this.init_ch;
    },
    // 唤起键盘
    clickShowKeyboard(index) {
      this.ind = index;
      this.active = index;
      if (index === 0) {
        this.$refs['plateKeyboard'].openKeyboardCN();
      } else {
        this.$refs['plateKeyboard'].closeKeyboardCN();
        this.$refs['plateKeyboard'].openKeyboardEN();
      }
    },
    // 接收子组件数据
    updateCarno(val) {
      this.numArr = val.numArr;
      this.vehicleNumber = this.numArr.join('');
      this.active = val.active;
      this.ind = val.ind;
    },

    // 节流函数
    throttle(fc, waitTime = 500, imme = true) {
      if (imme) {
        if (!this.flag) {
          this.flag = true;
          typeof fc === 'function' && fc();
          this.timer = setTimeout(() => {
            this.flag = false;
          }, waitTime);
        }
      } else {
        if (!this.flag) {
          this.flag = true;
          this.timer = setTimeout(() => {
            this.flag = false;
            typeof fc === 'function' && fc();
          }, waitTime);
        }
      }
    },

    // 校验车牌号
    preHandleSearch() {
      this.throttle(() => {
        this.handleSearch(this.vehicleNumber, '$ClickQueryAndPayment', 0);
      }, 3000);
    },
    // 历史车牌快速查询
    toHandleSearch(carno, history) {
      this.throttle(() => {
        this.handleSearch(carno, '$ClickHistoryAndPayment', history);
      }, 3000);
    },
    // 查询车费信息
    handleSearch(carno, clickEvent = '$ClickQueryAndPayment', history) {
      this.vehicleNumber = carno;
      uni.showLoading({
        title: '加载中',
      });
      const openId = MemberCacheTool.getOpenId(app);
      const params = {
        carno,
        mallid: app.globalData.mallid,
        openid: openId,
        vipcode: app.globalData.member?.vipcode,
        mobile: app.globalData.member?.mobile,
        groupId: app.globalData.groupId,
        createuser: 'sys_miniprogram',
      };
      // TODO: 暂定埋点传参为车牌类型，是否需要其他参数比如车牌号码；埋点位置是否要放在查询接口回调函数中
      this.$md(params);
      // console.log('this.radiusType:::::',this.radiusType)
      if (this.radiusType === null) {
        this.payUrl = 'api/1.0/park/checkCarIsInParkAndCarFee';
      } else if (this.radiusType === 0) {
        this.payUrl = 'api/1.0/park/checkCarIsInPark';
      }
      this.$store.commit('setRadiusType', this.radiusType);
      var myDate = new Date();
      Date.prototype.Format = function (fmt) {
        // author: meizz
        var o = {
          'M+': this.getMonth() + 1, // 月份
          'd+': this.getDate(), // 日
          'h+': this.getHours(), // 小时
          'm+': this.getMinutes(), // 分
          's+': this.getSeconds(), // 秒
          'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
          S: this.getMilliseconds(), // 毫秒
        };
        if (/(y+)/.test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            (this.getFullYear() + '').substr(4 - RegExp.$1.length)
          );
        for (var k in o)
          if (new RegExp('(' + k + ')').test(fmt))
            fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length == 1
                ? o[k]
                : ('00' + o[k]).substr(('' + o[k]).length)
            );
        return fmt;
      };
      var time2 = new Date().Format('yyyy-MM-dd hh:mm:ss');
      this.parkingTrack.track(100, {
        source_type: '首页',
        source_name: '停车功能球',
        plate_type: this.carType,
        plate_num: carno,
        is_historical_license: history,
        query_time: time2,
      });
      this.$request({
        // url: this.$baseURL + 'api/1.0/park/checkCarIsInPark',
        url: this.$baseURL + this.payUrl,
        data: params,
        method: 'POST',
        timeout: 60000 * 2,
        header: JSON.parse(uni.getStorageSync('handleUser')),
        // timeout: 10000,
      })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 0) {
            // 埋点-业务查询成功
            this.parkingTrack.track(200);
            uni.navigateTo({
              url: './parkingFeeDetail?carno=' + carno,
            });
          } else if (res.data.code === 1) {
            // 当前车辆没有查到账单
            this.parkingTrack.track(400, {
              fail_reason: res.data?.msg,
              query_time: time2,
            });
            uni.navigateTo({
              url:
                './parkingFeePayment?msg=' + res.data.msg + '&carno=' + carno,
            });
          } else if (res.data.code === 2) {
            // 月租车
            uni.navigateTo({
              url: './parkingFeeHint/parkingFeeHint?carno=' + carno,
            });
          } else {
            this.parkingTrack.track(400, {
              fail_reason: res.data?.msg,
              query_time: time2,
            });
            uni.showToast({
              title: res.data?.msg,
              duration: 2000,
              icon: 'none',
            });
          }
        })
        .catch((err) => {
          this.parkingTrack.track(400, {
            fail_reason: '网络超时请稍后再试',
            query_time: time2,
          });
          uni.hideLoading();
          uni.showToast({
            title: '网络超时请稍后再试',
            duration: 2000,
            icon: 'none',
          });
          console.log(err);
        });
    },
    // 车牌号校验
    // isVehicleNumber(vehicleNumber) {
    // 	if (vehicleNumber.length == 7) {
    // 		this.vehicleNumber = vehicleNumber.join('')
    // 		var express =
    // 			/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/;
    // 		if (!express.test(this.vehicleNumber)) {
    // 			uni.showToast({
    // 				title: '请输入正确的车牌号',
    // 				duration: 2000,
    // 				icon: 'none'
    // 			})
    // 			return false
    // 		}
    // 		return true
    // 	}
    // 	if (vehicleNumber.length == 8) {
    // 		this.vehicleNumber = vehicleNumber.join('')
    // 		var express =
    // 			/^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[a-zA-Z](([DF]((?![IO])[a-zA-Z0-9](?![IO]))[0-9]{4})|([0-9]{5}[DF]))|[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/;
    // 		if (!express.test(this.vehicleNumber)) {
    // 			uni.showToast({
    // 				title: '请输入正确的车牌号',
    // 				duration: 2000,
    // 				icon: 'none'
    // 			})
    // 			return false
    // 		}
    // 		return true
    // 	}
    // },
    // 缴费记录
    doRouter: function () {
      // 埋点
      this.parkingTrack.track(101);
      uni.navigateTo({
        url: './parkingFeeList',
      });
    },
    // 车牌管理
    doRouter2: function () {
      // 埋点
      this.parkingTrack.track(104);
      uni.navigateTo({
        url: './vehicleManagement',
      });
    },
    //停车发票
    doRouter1: function () {
      // 埋点
      this.parkingTrack.track(103);
      // 北京停车场开票
      // if (this.parkInfoEntity.parkMallCode === 3) {
      //   uni.navigateToMiniProgram({
      //     appId: this.$etcpAppId,
      //     path: this.$etcpAppInvoicePath,
      //     envVersion: 'release',
      //   })
      //   return
      // }
      uni.navigateTo({
        url: './parkingReceipt/parkingReceipt',
      });
    },
    //停车券兑换
    doRouter3: function () {
      // 埋点
      this.parkingTrack.track(102);
      uni.navigateTo({
        url: '/pages/pointsMall/pointsMall?exchangeTypes=2',
      });
    },
  },
};
</script>
<style lang="less"></style>
<style lang="less" scoped>
@import '../../styles/common.less';
.scroll-Y {
  width: 100%;
  // display: flex;
  // flex-direction: column;
  height: 100vh;
}
.color-scroll-Y {
  background: #e7e9ea;
}

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

  .parkingFee {
    display: flex;
    flex-direction: column;

    .parkingFee-top {
      display: flex;
      flex-direction: column;
      background-size: 100% 30%;
      // height: 350rpx;
      // margin-bottom: 25px;

      .top_content {
        padding: 25rpx 35rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        text {
          font-size: 24rpx;
          color: #898989;
          text-align: left;
        }

        .title_box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 20rpx;

          .btn {
            padding: 0rpx 14rpx;
            box-sizing: border-box;
            border-radius: 20rpx;
            font-size: 30rpx;
            color: #000;
            text-align: center;
          }
        }
        .info {
          padding-left: 18rpx;
          font-size: 27rpx;
          width: 95%;
          color: #666;
          line-height: 45rpx;
        }
        .info_show {
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
      .blue_top_content {
        .color_top_content('blue');
        background-position: 0 0;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .green_top_content {
        .color_top_content('green');
      }
      .color_top_content(@value) {
        @color: 'color-@{value}';
        background-color: @@color;
        text {
          color: @color-white;
        }
        .title_box {
          .btn {
            color: @color-gold;
          }
        }
        .info {
          font-size: 24rpx;
        }
      }
      .top_down {
        width: 100%;
        text-align: center;
        color: #b0a9a9;
      }
    }
    .top_menu {
      margin-top: 10rpx;
      background: #fff;
      padding-top: 50rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      border-radius: 15rpx;
      // position: absolute;
      // left: 50%;
      box-shadow: 0 0 5rpx #666;
      // transform: translateX(-50%);
      top: 160rpx;
      width: 700rpx;
      margin-left: 25rpx;
      height: 250rpx;
      .menu_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 33.3%;
        image {
          width: 100rpx;
          height: 100rpx;
        }
        text {
          font-size: 30rpx;
          margin-top: 10rpx;
        }
      }
    }
    .blue_top_menu {
      .color_top_menu('blue');
      background: @color-pink;
    }
    .green_top_menu {
      .color_top_menu('green');
      background: @color-light-green;
    }
    .color_top_menu(@value) {
      @color: 'color-@{value}';
      margin-top: 0;
      margin-left: 0;
      padding-top: 0;
      width: 100%;
      height: 211rpx;
      color: @@color;
      border-radius: 0;
      align-items: center;
      .menu_item {
        width: 25%;
        image {
          width: 83rpx;
          height: 83rpx;
        }
        text {
          font-size: 24rpx;
          margin-top: 20rpx;
        }
      }
    }
    .parkingFee-bottom {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 14rpx 25rpx;
      box-sizing: border-box;
      padding-bottom: 65px;
      // 车牌号查询
      .parkingFee-search {
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 15rpx;
        padding: 26rpx 25rpx 20rpx;
        box-sizing: border-box;

        .search_tip {
          margin-bottom: 10rpx;
          width: 100%;
          margin-left: -1rpx;
          font-size: 24rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 30rpx;
          .search_tip_pt {
            font-size: 28rpx;
            width: 470rpx;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border: 1rpx solid #8d8d8d;
            height: 70rpx;
            color: #8d8d8d;
            overflow: hidden;
            border-radius: 50rpx;
            view {
              height: 100%;
              border-radius: 50rpx;
              line-height: 65rpx;
              text-align: center;
            }
            view:nth-child(1) {
              width: 37%;
            }
            view:nth-child(2) {
              width: 36%;
            }
            view:nth-child(3) {
              width: 37%;
            }
            .search_tip_pt_index {
              color: #fff;
              background-image: linear-gradient(to right, #7e4fa1, #433c7f);
            }
          }
        }
        // 车牌号 & 虚拟键盘
        .input-box {
          width: 100%;
          height: 100rpx;
          margin: auto;
          background: rgba(255, 255, 255, 1);
          border-radius: 0.4rem;
          margin: 1rem auto;
          display: flex;
          justify-content: center;

          .li {
            flex: 1;
            border: 1px solid rgba(206, 208, 210, 1);
            box-sizing: border-box;
            margin: 0 2px;
            font-size: 50rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #703a98;

            image {
              width: 80%;
              height: 100%;
            }

            &.active {
              border-color: #3e67ff;
            }
          }
          .input_box_dian {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 120rpx;
            color: #703a98;
          }
        }

        .search-btn {
          color: #fff;
          margin: 0 auto;
          height: 90rpx;
          width: 98%;
          line-height: 90rpx;
          border-radius: 80rpx;
          font-size: 34rpx;
          text-align: center;
          background-image: linear-gradient(to right, #7e4fa1, #433c7f);
        }
        .disabled-btn {
          background-color: #c1c1c1 !important;
          background-image: none !important;
        }
      }

      .vehicleMgt-list {
        display: flex;
        flex-direction: column;
        margin-bottom: 35rpx;
        margin-top: 20rpx;
        .vehicleMgt-title {
          width: 91%;
          display: flex;
          justify-content: space-between;
          margin-left: 4%;
          // padding-left: 30rpx;
          padding-top: 30rpx;
          box-sizing: border-box;
          border-top: 1px solid #f2f2f2;
          font-size: 30rpx;
          .vehicleMgt-title-img {
            width: 30rpx;
            height: 30rpx;
          }
        }

        .vehicleMgt-content {
          width: 94%;
          margin-left: 3%;
          display: flex;
          flex-wrap: wrap;
          // justify-content: space-around;
          border-radius: 15rpx;
          .item {
            width: 30%;
            height: 60rpx;
            margin-top: 30rpx;
            margin-left: 16rpx;
            text-align: center;
            box-sizing: border-box;
            border: 2rpx solid #dcdcdc;
            line-height: 60rpx;
            font-size: 26rpx;
            border-radius: 10rpx;
            color: #a5a5a5;
          }
          .vehicleMgt-content_cls {
            color: #703a98;
            border: 2rpx solid #703a98;
          }
          // .item::after {
          // 	content: '';
          // 	display: block;
          // 	height: 1px;
          // 	width: 92%;
          // 	position: absolute;
          // 	background-color: #F2F2F2;
          // 	bottom: 0px;
          // 	left: 4%;
          // }
          // .item:last-child::after {
          // 	display: none;
          // }
        }
      }

      .search-list {
        display: flex;
        flex-direction: column;
        background: #fff;
        padding: 0 30rpx;
        box-sizing: border-box;
        margin-top: 20rpx;
        border-radius: 15rpx;
        width: 100%;

        .list_item {
          padding: 38rpx 0;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #f2f2f2;

          text {
            font-size: 28rpx;
          }

          button {
            height: 60rpx;
            line-height: 60rpx;
            margin: 0;
          }
        }
      }
    }
    .blue-parkingFee-bottom {
      .color-parkingFee-bottom('blue');
    }
    .green-parkingFee-bottom {
      .color-parkingFee-bottom('green');
    }
    .color-parkingFee-bottom(@value) {
      @color: 'color-@{value}';
      width: auto;
      padding-bottom: 0;
      padding: 22rpx 20rpx 0 20rpx;
      .parkingFee-search {
        padding: 0 0 31rpx 0;
        .blueClassify {
          .colorClassify('blue');
        }
        .greenClassify {
          .colorClassify('green');
        }
        .input-box {
          width: 682rpx;
          .li {
            color: @@color;
            &.active {
              border-color: @@color;
            }
          }
          .input_box_dian {
            color: @@color;
          }
        }
        .search-btn {
          font-size: 34rpx;
          background-image: none;
          background-color: @@color;
        }
      }
      .vehicleMgt-list {
        background-color: @color-white;
        .vehicleMgt-title {
          padding-top: 0;
          padding: 23rpx;
          margin-left: 0;
        }
        .vehicleMgt-content {
          width: 100%;
          margin-left: 0;
          padding: 16rpx 35rpx 25rpx 35rpx;
          box-sizing: border-box;
          .item {
            font-size: 28rpx;
            margin-top: 0;
            margin-left: 0;
            margin-right: 30rpx;
            margin-top: 41rpx;
            &:nth-child(-n + 3) {
              margin-top: 0;
            }
            &:nth-child(3n) {
              margin-right: 0;
            }
          }
          .vehicleMgt-content_cls {
            color: @color-white;
            border: 0px;
            background-color: @@color;
          }
        }
      }
    }
  }
}

// 缴费说明
.payInstruct_wrap {
  width: 300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20rpx;

  .scroll {
    height: 600rpx;
    display: flex;
    flex-direction: column;
    padding: 20rpx;
    box-sizing: border-box;

    .payInstruct_title {
      font-size: 30rpx;
      text-align: center;
      padding: 20rpx 0;
      box-sizing: border-box;
      border-bottom: 1px solid #f2f2f2;
    }

    .payInstruct_con {
      display: flex;
      width: 100%;
      padding: 20rpx 10rpx;
      box-sizing: border-box;

      text {
        font-size: 28rpx;
        color: #999;
      }
    }
  }
}

.class-van-button-small {
  min-width: 0;
  border-radius: 10rpx;
  margin: 10rpx 3rpx;
  box-shadow: 10rpx 10rpx 10rpx #aaa;
}

.class-plate-box {
  width: 100%;
  padding: 24rpx 0;
  box-sizing: border-box;
  position: relative;
}

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

  .plate_number_wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #eaf1f9;
    padding: 0 0 10rpx;
    box-sizing: border-box;

    .close-box {
      width: 100%;
      font-size: 24rpx;
      color: #3e67ff;
      text-align: right;
      margin-right: 1.25rem;

      view {
        padding: 10px;
      }
    }

    .plate_chinese_box {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      button {
        width: 9%;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
        padding: 0;
        font-size: 28rpx;
        .class-van-button-small;
      }
    }
  }
}

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

  .allBoard_wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #eaf1f9;
    padding: 0 0 10rpx;
    box-sizing: border-box;
  }

  .close-box {
    padding-top: 22rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    color: #3e67ff;
    text-align: right;
    margin-right: 1.25rem;
  }

  .plate_number_box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    button {
      width: 9%;
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      padding: 0;
      font-size: 28rpx;
      .class-van-button-small;
    }
  }
}

.delBtn {
  color: #fff;
  height: 38rpx;
  line-height: 38rpx;
  font-size: 20rpx;
  width: 124rpx;
  border-radius: 7px;
  text-align: center;
  padding: 4px;
  background-color: #c69c6d;
}

.payThe {
  background-color: #fff;
  width: 100%;

  .pay_index {
    text-align: center;
    width: 200rpx;
    padding-top: 10rpx;
    margin: 0rpx auto;
  }

  .pay_title {
    width: 500rpx;
    display: flex;
    align-items: center;
    margin-top: 30rpx;
  }

  .pay_title1 {
    width: 100%;
    margin-top: 20rpx;
    display: flex;
    align-items: center;
  }

  .pay_title_yhj {
    margin-left: 60rpx;
    font-size: 20rpx;
  }

  .pay_title_yhj1 {
    margin-left: 35rpx;
    font-size: 20rpx;
  }

  .payjf {
    font-size: 20rpx;
    margin-left: 30rpx;
  }

  .paySelect {
    color: rgba(16, 16, 16, 100);
    font-size: 20rpx;
    font-family: Arial;
    border: 1px solid rgba(187, 187, 187, 100);
    border-radius: 10rpx;
    margin-left: 80rpx;
    width: 260rpx;
    height: 80rpx;
  }

  .paySelect1 {
    color: rgba(16, 16, 16, 100);
    font-size: 20rpx;
    font-family: Arial;
    border: 1px solid rgba(187, 187, 187, 100);
    border-radius: 10rpx;
    margin-left: 80rpx;
    width: 260rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
  }

  .pay-se {
    width: 120rpx;
    height: 100%;
    background-color: #d8dce6;

    .pay-se-l {
      height: 48%;
      text-align: center;
      font-size: 50rpx;
      line-height: 68rpx;
    }

    .pay-se-l1 {
      border-left: 1px solid rgba(187, 187, 187, 100);
      border-bottom: 1px solid rgba(187, 187, 187, 100);
    }

    .pay-se-l2 {
      border-left: 1px solid rgba(187, 187, 187, 100);
    }
  }

  .payjfzk {
    font-size: 20rpx;
    color: #8b8c8b;
    margin-top: 10rpx;
    margin-left: 210rpx;
  }

  .pay_time {
    font-size: 28rpx;
    margin-left: 180rpx;
    padding-bottom: 40rpx;
  }

  .pay_time1 {
    margin-top: 26rpx;
  }
}

.pay_jiaof {
  width: 97%;
  height: 60rpx;
  line-height: 60rpx;
  margin-left: 10rpx;
  background-color: #c69c6d;
  text-align: center;
  color: rgba(255, 255, 255, 100);
  font-size: 28rpx;
  font-family: Microsoft Yahei;
  border-radius: 10rpx;
  margin-top: 20rpx;
}

.sq_content {
  width: 700rpx;
  background-color: #fff;
  position: fixed;
  bottom: 25px;
  left: 25rpx;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 15rpx;
  font-size: 16px;
  color: #c69c6d;
  padding: 0rpx 30rpx;
  box-sizing: border-box;
}
.sq_content .btn {
  width: 180rpx;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  background-color: #c69c6d;
  margin-top: -3px;
  border-radius: 25px;
}

// 停车券弹窗
.ticketPopup {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  z-index: 999;

  .popup-title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30rpx 42rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #f2f2f2;
    position: relative;

    text {
      color: #999;
      font-size: 28rpx;
    }

    .useRule-text {
      position: absolute;
      right: 42rpx;
      color: rgb(58, 130, 248);
    }
  }

  .popup_scroll {
    height: 70vh;
    background: #f2f2f2;
  }
  .popup_content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10rpx 20rpx;
    box-sizing: border-box;

    .item {
      display: flex;
      background: #fff;
      margin-bottom: 20rpx;
      border-radius: 10rpx;

      .item-left {
        flex: 1;
        display: flex;
        align-items: center;
        padding: 20rpx 0;
        box-sizing: border-box;
        position: relative;

        .item-type {
          position: absolute;
          top: 0;
          left: 0;
          background: #fff5f1;
          border-radius: 10rpx 0 10rpx 0;
          width: 205rpx;
          display: flex;
          justify-content: center;

          text {
            color: #999;
            font-size: 20rpx;
            text-align: center;
            line-height: 28rpx;
          }
        }

        .item-value {
          color: #c69c6d;
          font-size: 40rpx;
          padding: 10rpx 30rpx;
          box-sizing: border-box;
          width: 205rpx;
          display: flex;
          justify-content: center;

          .b {
            color: #c69c6d;
            font-weight: 600;
            font-size: 60rpx;
          }
        }

        .color_disabled {
          color: #999 !important;
        }
      }
      .item-right {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 8rpx 8rpx 0;
        position: relative;

        text {
          color: #c69c6d;
          font-size: 24rpx;
          padding: 0 20rpx;
          box-sizing: border-box;
        }

        .color_disabled {
          color: #999;
        }

        // 对勾
        .dot {
          position: absolute;
          top: 0;
          right: 0;
          width: 2.25rem;
          height: 2.375rem;
        }
      }
    }
  }
}
// 弹窗按钮
.popup_button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 20rpx;
  box-sizing: border-box;

  text {
    height: 110rpx;
    line-height: 110rpx;
    text-align: center;
  }

  .cancel_btn {
    background: #fff;
    color: #ed1c24 !important;
  }

  .ok_btn {
    background: #c69c6d;
    color: #fff !important;
    width: 120px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
  }
}
</style>