|
@@ -3,6 +3,204 @@
|
|
|
<scroll-view :class="['scroll-Y' ,'color-scroll-Y']">
|
|
|
<div class="wrap">
|
|
|
<div class="parkingFee">
|
|
|
+ <!-- <wx-points-commit ref='wxPointsCommit'></wx-points-commit> -->
|
|
|
+ <!-- KIP菜单 -->
|
|
|
+ <div
|
|
|
+ v-if="source === 'KIP'"
|
|
|
+ :class="{
|
|
|
+ top_menu: true,
|
|
|
+ blue_top_menu: custTypeId === 1,
|
|
|
+ green_top_menu: custTypeId === 2,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div class="menu_item" @click="menuToPage('PAYMENT_RECORDS')">
|
|
|
+ <img :src="`${require(`@/pages/parkingFee/static/images/icon-order.png`)}`" />
|
|
|
+ <span>缴费记录</span>
|
|
|
+ </div>
|
|
|
+ <div class="menu_item" @click="menuToPage('PARKING_INVOICE')">
|
|
|
+ <img :src="`${require(`@/pages/parkingFee/static/images/icon-ticket.png`)}`" />
|
|
|
+ <span>停车开票</span>
|
|
|
+ </div>
|
|
|
+ <div class="menu_item" @click="menuToPage('VEHICLE_MANAGE')">
|
|
|
+ <img :src="`${require(`@/pages/parkingFee/static/images/icon-car.png`)}`" />
|
|
|
+ <span>车辆管理</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 菜单 -->
|
|
|
+ <div
|
|
|
+ :class="{
|
|
|
+ top_menu: true,
|
|
|
+ blue_top_menu: custTypeId === 1,
|
|
|
+ green_top_menu: custTypeId === 2,
|
|
|
+ }"
|
|
|
+ v-if="custTypeId >= 0 && (portalsByLbsList.length < 5 || portalsByLbsList.length === 5) && source !== 'KIP'"
|
|
|
+ >
|
|
|
+ <div class="menu_item" @click="menuToPage('PAYMENT_RECORDS')" v-if="portalsByLbsList.indexOf('PAYMENT_RECORDS') > -1">
|
|
|
+ <img :src="`${require(`@/pages/parkingFee/static/images/icon-order.png`)}`" />
|
|
|
+ <span>缴费记录</span>
|
|
|
+ </div>
|
|
|
+ <div class="menu_item" @click="menuToPage('COUPON_EXCHANGE')" v-if="portalsByLbsList.indexOf('COUPON_EXCHANGE') > -1">
|
|
|
+ <img :src="`${require(`@/pages/parkingFee/static/images/icon-coupon.png`)}`" />
|
|
|
+ <span>停车券兑换</span>
|
|
|
+ </div>
|
|
|
+ <div class="menu_item" @click="menuToPage('PARKING_INVOICE')" v-if="portalsByLbsList.indexOf('PARKING_INVOICE') > -1">
|
|
|
+ <img :src="`${require(`@/pages/parkingFee/static/images/icon-ticket.png`)}`" />
|
|
|
+ <span>停车开票</span>
|
|
|
+ </div>
|
|
|
+ <div class="menu_item" @click="menuToPage('VEHICLE_MANAGE')" v-if="portalsByLbsList.indexOf('VEHICLE_MANAGE') > -1">
|
|
|
+ <img :src="`${require(`@/pages/parkingFee/static/images/icon-car.png`)}`" />
|
|
|
+ <span>车辆管理</span>
|
|
|
+ </div>
|
|
|
+ <div class="menu_item" @click="menuToPage('PARKING_BENEFITS')" v-if="portalsByLbsList.indexOf('PARKING_BENEFITS') > -1">
|
|
|
+ <img :src="`${require(`@/pages/parkingFee/static/images/parkingRights.svg`)}`" />
|
|
|
+ <span>停车权益</span>
|
|
|
+ </div>
|
|
|
+ <div class="menu_item" @click="menuToPage('FIND_CAR')" v-if="portalsByLbsList.indexOf('FIND_CAR') > -1" >
|
|
|
+ <img :src="`${require(`@/pages/parkingFee/static/images/find_car.png`)}`"/>
|
|
|
+ <span>反向寻车</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 菜单2 -->
|
|
|
+ <div v-else-if="custTypeId >= 0 && portalsByLbsList.length > 5 && source !== 'KIP'">
|
|
|
+ <div
|
|
|
+ :class="{
|
|
|
+ top_menu2: true,
|
|
|
+ blue_top_menu: custTypeId === 1,
|
|
|
+ green_top_menu: custTypeId === 2,
|
|
|
+ }"
|
|
|
+
|
|
|
+ >
|
|
|
+ <div class="menu_item" @click="menuToPage('PAYMENT_RECORDS')" v-if="portalsByLbsList.indexOf('PAYMENT_RECORDS') > -1">
|
|
|
+ <img :src="`${require(`@/pages/parkingFee/static/images/icon-order.png`)}`" />
|
|
|
+ <span>缴费记录</span>
|
|
|
+ </div>
|
|
|
+ <div class="menu_item" @click="menuToPage('COUPON_EXCHANGE')" v-if="portalsByLbsList.indexOf('COUPON_EXCHANGE') > -1">
|
|
|
+ <img :src="`${require(`@/pages/parkingFee/static/images/icon-coupon.png`)}`" />
|
|
|
+ <span>停车券兑换</span>
|
|
|
+ </div>
|
|
|
+ <div class="menu_item" @click="menuToPage('PARKING_INVOICE')" v-if="portalsByLbsList.indexOf('PARKING_INVOICE') > -1">
|
|
|
+ <img :src="`${require(`@/pages/parkingFee/static/images/icon-ticket.png`)}`" />
|
|
|
+ <span>停车开票</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 菜单3 -->
|
|
|
+ <div
|
|
|
+ :class="{
|
|
|
+ top_menu: true,
|
|
|
+ blue_top_menu: custTypeId === 1,
|
|
|
+ green_top_menu: custTypeId === 2,
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div class="menu_item" @click="menuToPage('FIND_CAR')" v-if="portalsByLbsList.indexOf('FIND_CAR') > -1">
|
|
|
+ <img :src="`${require(`@/pages/parkingFee/static/images/find_car.png`)}`"/>
|
|
|
+ <span>反向寻车</span>
|
|
|
+ </div>
|
|
|
+ <div class="menu_item" @click="menuToPage('VEHICLE_MANAGE')">
|
|
|
+ <img :src="`${require(`@/pages/parkingFee/static/images/icon-car.png`)}`" v-if="portalsByLbsList.indexOf('VEHICLE_MANAGE') > -1" />
|
|
|
+ <span>车辆管理</span>
|
|
|
+ </div>
|
|
|
+ <div class="menu_item" @click="menuToPage('PARKING_BENEFITS')" v-if="portalsByLbsList.indexOf('PARKING_BENEFITS') > -1">
|
|
|
+ <img :src="`${require(`@/pages/parkingFee/static/images/parkingRights.svg`)}`" />
|
|
|
+ <span>停车权益</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 中控 -->
|
|
|
+ <div class="parkingFee-bottom">
|
|
|
+ <div style="height: 40px; background-color: #FBFCFF;" v-if="source === 'KIP'"></div>
|
|
|
+ <div v-if="supportUnlicensed && source !== 'KIP'" :class="['parkingFee-tab', tabbarActive === 'paymentForUnregisteredVehicle' && 'unlicensed-box-bottom']">
|
|
|
+ <div :class="['bar', tabbarActive === 'manualPayment' && 'active']" @click="tabbarActiveEvent('manualPayment')">手动缴费</div>
|
|
|
+ <div :class="['bar', tabbarActive === 'paymentForUnregisteredVehicle' && 'active']" @click="tabbarActiveEvent('paymentForUnregisteredVehicle')">无牌缴费</div>
|
|
|
+ </div>
|
|
|
+ <!-- 无牌缴费 -->
|
|
|
+ <div class="unlicensed-box" v-if="tabbarActive === 'paymentForUnregisteredVehicle'">
|
|
|
+ <!-- 无牌车 -->
|
|
|
+ <div class="no-car-unlicensed-box" v-if="!unlicensedCar">
|
|
|
+ <img :src="`${require(`@/pages/parkingFee/static/images/unlicensed-1.png`)}`" />
|
|
|
+ <div class="no-car-unlicensed-info">未查询到无牌车信息</div>
|
|
|
+ <div class="search-btn no-car-unlicensed-btn" @click="scanCarCode">
|
|
|
+ <!-- <van-icon name="scan" />扫描进场二维码领取无牌车号牌 -->
|
|
|
+ <img class="unlicensed-scan" :src="`${require(`@/pages/parkingFee/static/images/unlicensed-scan.png`)}`" /><span class="text">扫描进场二维码领取无牌车号牌</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 有无牌车 -->
|
|
|
+ <div class="in-car" v-if="unlicensedCar">
|
|
|
+ <div class="car-number-box">
|
|
|
+ <img :src="`${require(`@/pages/parkingFee/static/images/unlicensed-0.png`)}`" />
|
|
|
+ <div class="car-number">
|
|
|
+ <div class="number">{{ unlicensedCar }}</div>
|
|
|
+ <div class="tips">车辆类型:无牌车辆</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="search-btn" @click="unlicensedToPay">去支付</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 手动缴费: v-show="tabbarActive === 'manualPayment'" -->
|
|
|
+ <div class="manual-box" v-else>
|
|
|
+ <div class="parkingFee-search">
|
|
|
+ <div class="search_tip_1" :style="{paddingTop: supportUnlicensed? '0': '32px'}">
|
|
|
+ <div class="title">车辆类型</div>
|
|
|
+<!-- <k-tab ref="k-tab" type="fill" @change="toggleType" :tabs="['燃油车牌', '新能源', '特殊车牌']" />-->
|
|
|
+ <k-tab ref="k-tab" type="fill" @change="toggleType" :tabs="['燃油车牌', '新能源', '特殊车牌']" />
|
|
|
+ </div>
|
|
|
+ <!-- <div class="search_tip">
|
|
|
+ <div class="title">车辆类型</div>
|
|
|
+ <div class="search_tip_pt">
|
|
|
+ <div :class="carType == 0 ? 'search_tip_pt_index' : ''" @click="toggleType(0)">燃油车牌</div>
|
|
|
+ <div :class="carType == 1 ? 'search_tip_pt_index' : ''" @click="toggleType(1)">新能源</div>
|
|
|
+ <div :class="carType == 2 ? 'search_tip_pt_index' : ''" @click="toggleType(2)">特殊车牌</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="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="carType === 1">{{ numArr[7] }}</span>
|
|
|
+ <img v-else :src="require('@/pages/parkingFee/static/images/unlicensed/leaf.svg')">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <k-button title="查询缴费" style="margin-top: 46px;margin-bottom: 43px;" :disabled="disabledBtn" disabledColor="#D1D2D9" @click="preHandleSearch" />
|
|
|
+ <!-- <div type="primary" class="search-btn" :class="disabledBtn ? 'disabled-btn' : ''" :disabled="disabledBtn" @click="preHandleSearch">查询缴费</div> -->
|
|
|
+ </div>
|
|
|
+ <div class="vehicleMgt-list">
|
|
|
+ <div class="vehicleMgt-title">
|
|
|
+ <div>历史查询车辆</div>
|
|
|
+ <!-- <image src="./static/images/icon5.png" class="vehicleMgt-title-img"/> -->
|
|
|
+ </div>
|
|
|
+ <div class="vehicleMgt-content" v-if="carList.length">
|
|
|
+ <div class="item" v-for="(item, index) in carList" :key="index" @click="toHandleSearchBefore(item, 1)" :class="vehicleNumber == item ? 'vehicleMgt-content_cls' : ''">
|
|
|
+ {{ item | formatCarno }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="parkingFee-top">
|
|
|
|
|
|
<div class="top_content ql-snow">
|