|
@@ -1,150 +1,152 @@
|
|
<template>
|
|
<template>
|
|
- <scroll-view :class="['scroll-Y' ,'color-scroll-Y', theme]">
|
|
|
|
- <div class="wrap">
|
|
|
|
- <div class="parkingFee">
|
|
|
|
- <!-- 菜单 -->
|
|
|
|
- <div
|
|
|
|
- :class="{
|
|
|
|
|
|
+ <div>
|
|
|
|
+ <scroll-view :class="['scroll-Y' ,'color-scroll-Y', theme]">
|
|
|
|
+ <div class="wrap">
|
|
|
|
+ <div class="parkingFee">
|
|
|
|
+ <!-- 菜单 -->
|
|
|
|
+ <div
|
|
|
|
+ :class="{
|
|
top_menu: true,
|
|
top_menu: true,
|
|
blue_top_menu: custTypeId === 1,
|
|
blue_top_menu: custTypeId === 1,
|
|
green_top_menu: custTypeId === 2,
|
|
green_top_menu: custTypeId === 2,
|
|
}"
|
|
}"
|
|
- v-if="custTypeId >= 0"
|
|
|
|
- >
|
|
|
|
- <div class="menu_item" @click="doRouter">
|
|
|
|
- <img :src="`${require(`./static/images/icon-order.png`)}`" />
|
|
|
|
- <span>缴费记录</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="menu_item" @click="doRouter3" v-if="source !== 'KIP'">
|
|
|
|
- <img :src="`${require(`./static/images/icon-coupon.png`)}`" />
|
|
|
|
- <span>停车券兑换</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="menu_item" @click="doRouter1">
|
|
|
|
- <img :src="`${require(`./static/images/icon-ticket.png`)}`" />
|
|
|
|
- <span>停车开票</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="menu_item" @click="doRouter2">
|
|
|
|
- <img :src="`${require(`./static/images/icon-car.png`)}`" />
|
|
|
|
- <span>车辆管理</span>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <!-- 中控 -->
|
|
|
|
- <div class="parkingFee-bottom">
|
|
|
|
- <div style="height: 40px; background-color: #FBFCFF;" v-if="source === 'KIP'"></div>
|
|
|
|
- <div :class="['parkingFee-tab', tabbarActive === '无牌缴费' && 'unlicensed-box-bottom']" v-if="supportUnlicensed && source !== 'KIP'">
|
|
|
|
- <div :class="['bar', tabbarActive === '手动缴费' && 'active']" @click="tabbarActiveEvent('手动缴费')">手动缴费</div>
|
|
|
|
- <div :class="['bar', tabbarActive === '无牌缴费' && 'active']" @click="tabbarActiveEvent('无牌缴费')">无牌缴费</div>
|
|
|
|
|
|
+ v-if="custTypeId >= 0"
|
|
|
|
+ >
|
|
|
|
+ <div class="menu_item" @click="doRouter">
|
|
|
|
+ <img :src="`${require(`./static/images/icon-order.png`)}`" />
|
|
|
|
+ <span>缴费记录</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="menu_item" @click="doRouter3" v-if="source !== 'KIP'">
|
|
|
|
+ <img :src="`${require(`./static/images/icon-coupon.png`)}`" />
|
|
|
|
+ <span>停车券兑换</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="menu_item" @click="doRouter1">
|
|
|
|
+ <img :src="`${require(`./static/images/icon-ticket.png`)}`" />
|
|
|
|
+ <span>停车开票</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="menu_item" @click="doRouter2">
|
|
|
|
+ <img :src="`${require(`./static/images/icon-car.png`)}`" />
|
|
|
|
+ <span>车辆管理</span>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <!-- 中控 -->
|
|
|
|
+ <div class="parkingFee-bottom">
|
|
|
|
+ <div style="height: 40px; background-color: #FBFCFF;" v-if="source === 'KIP'"></div>
|
|
|
|
+ <div :class="['parkingFee-tab', tabbarActive === '无牌缴费' && 'unlicensed-box-bottom']" v-if="supportUnlicensed && source !== 'KIP'">
|
|
|
|
+ <div :class="['bar', tabbarActive === '手动缴费' && 'active']" @click="tabbarActiveEvent('手动缴费')">手动缴费</div>
|
|
|
|
+ <div :class="['bar', tabbarActive === '无牌缴费' && 'active']" @click="tabbarActiveEvent('无牌缴费')">无牌缴费</div>
|
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 手动缴费 -->
|
|
|
|
- <div class="manual-box" v-if="tabbarActive === '手动缴费'">
|
|
|
|
- <div class="parkingFee-search">
|
|
|
|
- <div class="search_tip_1" :style="{paddingTop: supportUnlicensed? '0': '32px'}">
|
|
|
|
- <div class="title">车辆类型</div>
|
|
|
|
- <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 class="manual-box" v-if="tabbarActive === '手动缴费'">
|
|
|
|
+ <div class="parkingFee-search">
|
|
|
|
+ <div class="search_tip_1" :style="{paddingTop: supportUnlicensed? '0': '32px'}">
|
|
|
|
+ <div class="title">车辆类型</div>
|
|
|
|
+ <k-tab type="fill" @change="toggleType" :tabs="['普通车牌', '新能源', '特殊车牌']" />
|
|
</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 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> -->
|
|
- <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 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>
|
|
</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] }}
|
|
|
|
|
|
+ <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>
|
|
- <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 class="vehicleMgt-content" v-if="carList.length">
|
|
|
|
+ <div class="item" v-for="(item, index) in carList" :key="index" @click="toHandleSearch(item, 1)" :class="vehicleNumber == item ? 'vehicleMgt-content_cls' : ''">
|
|
|
|
+ {{ item | formatCarno }}
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
- <div class="vehicleMgt-list">
|
|
|
|
- <div class="vehicleMgt-title">
|
|
|
|
- <div>历史查询车辆</div>
|
|
|
|
- <!-- <image src="./static/images/icon5.png" class="vehicleMgt-title-img"/> -->
|
|
|
|
|
|
+
|
|
|
|
+ <!-- 无牌缴费 -->
|
|
|
|
+ <div class="unlicensed-box" v-else>
|
|
|
|
+ <!-- 无牌车 -->
|
|
|
|
+ <!-- <k-illustration name="no-parking-fee" description="未查询到无牌车信息" /> -->
|
|
|
|
+ <div class="no-car-unlicensed-box" v-if="!unlicensedCar">
|
|
|
|
+ <img :src="`${require(`./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(`./static/images/unlicensed-scan.png`)}`" /><sapn class="text">扫描进场二维码领取无牌车号牌</sapn>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- <div class="vehicleMgt-content" v-if="carList.length">
|
|
|
|
- <div class="item" v-for="(item, index) in carList" :key="index" @click="toHandleSearch(item, 1)" :class="vehicleNumber == item ? 'vehicleMgt-content_cls' : ''">
|
|
|
|
- {{ item | formatCarno }}
|
|
|
|
|
|
+ <!-- 有无牌车 -->
|
|
|
|
+ <div class="in-car" v-else>
|
|
|
|
+ <div class="car-number-box">
|
|
|
|
+ <img :src="`${require(`./static/images/unlicensed-0.png`)}`" />
|
|
|
|
+ <div class="car-number">
|
|
|
|
+ <div class="number">{{ unlicensedCar }}</div>
|
|
|
|
+ <div class="tips">车辆类型:无牌车辆</div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="search-btn" @click="unlicensedToPay">去支付</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
- <!-- 无牌缴费 -->
|
|
|
|
- <div class="unlicensed-box" v-else>
|
|
|
|
- <!-- 无牌车 -->
|
|
|
|
- <!-- <k-illustration name="no-parking-fee" description="未查询到无牌车信息" /> -->
|
|
|
|
- <div class="no-car-unlicensed-box" v-if="!unlicensedCar">
|
|
|
|
- <img :src="`${require(`./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(`./static/images/unlicensed-scan.png`)}`" /><sapn class="text">扫描进场二维码领取无牌车号牌</sapn>
|
|
|
|
|
|
+ <div class="parkingFee-top">
|
|
|
|
+ <div class="top_content">
|
|
|
|
+ <div class="title_box">
|
|
|
|
+ <span class="btn">缴费说明</span>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
- <!-- 有无牌车 -->
|
|
|
|
- <div class="in-car" v-else>
|
|
|
|
- <div class="car-number-box">
|
|
|
|
- <img :src="`${require(`./static/images/unlicensed-0.png`)}`" />
|
|
|
|
- <div class="car-number">
|
|
|
|
- <div class="number">{{ unlicensedCar }}</div>
|
|
|
|
- <div class="tips">车辆类型:无牌车辆</div>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <!-- <div class="sub_title_box">-->
|
|
|
|
+ <!-- <span class="btn">基础计费规则:</span>-->
|
|
|
|
+ <!-- </div>-->
|
|
|
|
+
|
|
|
|
+ <div class="info" :class="!init_ch ? 'info_show' : ''">
|
|
|
|
+ <!-- <p></p> -->
|
|
|
|
+ <!-- <p>{{ description }}</p> -->
|
|
|
|
+ <div v-html="description"></div>
|
|
</div>
|
|
</div>
|
|
- <div class="search-btn" @click="unlicensedToPay">去支付</div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="parkingFee-top">
|
|
|
|
- <div class="top_content">
|
|
|
|
- <div class="title_box">
|
|
|
|
- <span class="btn">缴费说明</span>
|
|
|
|
- </div>
|
|
|
|
-<!-- <div class="sub_title_box">-->
|
|
|
|
-<!-- <span class="btn">基础计费规则:</span>-->
|
|
|
|
-<!-- </div>-->
|
|
|
|
-
|
|
|
|
- <div class="info" :class="!init_ch ? 'info_show' : ''">
|
|
|
|
- <!-- <p></p> -->
|
|
|
|
- <!-- <p>{{ description }}</p> -->
|
|
|
|
- <div v-html="description"></div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="top_down" @click="top_display" v-if="!init_ch && description && description.length > 60"><van-icon name="arrow-down" /></div>
|
|
|
|
+ <div class="top_down" @click="top_display" v-else><van-icon name="arrow-up" /></div>
|
|
</div>
|
|
</div>
|
|
- <div class="top_down" @click="top_display" v-if="!init_ch && description && description.length > 60"><van-icon name="arrow-down" /></div>
|
|
|
|
- <div class="top_down" @click="top_display" v-else><van-icon name="arrow-up" /></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <plate-number ref="plateKeyboard" :noDisBtn="[32, 33, 34,35, 36, 37]" :carType="carType" :active="active" :ind="ind" :numArr="numArr" @carnoArr="updateCarno"></plate-number>
|
|
|
|
- </div>
|
|
|
|
- </scroll-view>
|
|
|
|
|
|
+ </scroll-view>
|
|
|
|
+ <plate-number ref="plateKeyboard" :noDisBtn="[32, 33, 34,35, 36, 37]" :carType="carType" :active="active" :ind="ind" :numArr="numArr" @carnoArr="updateCarno"></plate-number>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|