|
|
@@ -1,50 +1,21 @@
|
|
|
<template>
|
|
|
<scroll-view
|
|
|
+ style="background-color: #F4F7FF"
|
|
|
scroll-y="true"
|
|
|
- :class="{ 'scroll-Y': true, 'color-scroll-Y': custTypeId !== 0 }"
|
|
|
scroll-bottom="1000"
|
|
|
+ ref="scroll"
|
|
|
>
|
|
|
<!-- <authorize ref="authorize"></authorize>-->
|
|
|
<!-- <div v-if="userInfo && userInfo.vipcode">vipcode: {{userInfo.vipcode}}</div>-->
|
|
|
<div class="wrap">
|
|
|
- <div class="parkingFee">
|
|
|
+ <div class="parkingFee" ref="parkingFee">
|
|
|
<div
|
|
|
class="parkingFee-top bg"
|
|
|
:style="{
|
|
|
- backgroundImage: `url(${require('./static/images/parking-bgi.png')})`,
|
|
|
- backgroundAttachment: 'fixed',
|
|
|
+ // backgroundImage: `url(${require('./static/images/parking-bgi.png')})`,
|
|
|
+ // backgroundAttachment: 'fixed',
|
|
|
}"
|
|
|
>
|
|
|
- <div
|
|
|
- :class="{
|
|
|
- top_content: true,
|
|
|
- blue_top_content: custTypeId === 1,
|
|
|
- green_top_content: custTypeId === 2,
|
|
|
- }"
|
|
|
- :style="{
|
|
|
- 'background-image':
|
|
|
- custTypeId === 1 ? `url(${picUrl}${blueHeadBg});` : '',
|
|
|
- }"
|
|
|
- >
|
|
|
- <div class="title_box">
|
|
|
- <span class="btn">缴费说明</span>
|
|
|
- </div>
|
|
|
- <div class="info" :class="!init_ch ? 'info_show' : ''">
|
|
|
- <span>{{ parkInfoEntity.payinstruction }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="top_down"
|
|
|
- @click="top_display"
|
|
|
- v-if="
|
|
|
- !init_ch &&
|
|
|
- parkInfoEntity.payinstruction &&
|
|
|
- parkInfoEntity.payinstruction.length > 60
|
|
|
- "
|
|
|
- >
|
|
|
- ︾
|
|
|
- </div>
|
|
|
- <div class="top_down" @click="top_display" v-else>︽</div>
|
|
|
<div
|
|
|
:class="{
|
|
|
top_menu: true,
|
|
|
@@ -90,6 +61,7 @@
|
|
|
'parkingFee-bottom': true,
|
|
|
'blue-parkingFee-bottom': custTypeId === 1,
|
|
|
'green-parkingFee-bottom': custTypeId === 2,
|
|
|
+ 'pb65': carList.length < 1
|
|
|
}"
|
|
|
>
|
|
|
<div class="parkingFee-search">
|
|
|
@@ -100,7 +72,7 @@
|
|
|
:class="carType == 0 ? 'search_tip_pt_index' : ''"
|
|
|
@click="toggleType(0)"
|
|
|
>
|
|
|
- 普通车牌
|
|
|
+ 燃油车牌
|
|
|
</div>
|
|
|
<div
|
|
|
:class="carType == 1 ? 'search_tip_pt_index' : ''"
|
|
|
@@ -192,7 +164,6 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<button
|
|
|
- type="primary"
|
|
|
class="search-btn"
|
|
|
:class="disabledBtn ? 'disabled-btn' : ''"
|
|
|
:disabled="disabledBtn"
|
|
|
@@ -219,6 +190,36 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div
|
|
|
+ :class="{
|
|
|
+ top_content: true,
|
|
|
+ blue_top_content: custTypeId === 1,
|
|
|
+ green_top_content: custTypeId === 2,
|
|
|
+ }"
|
|
|
+ :style="{
|
|
|
+ 'background-image':
|
|
|
+ custTypeId === 1 ? `url(${picUrl}${blueHeadBg});` : '',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div class="title_box">
|
|
|
+ <span class="title">缴费说明</span>
|
|
|
+ </div>
|
|
|
+ <div class="info" :class="!init_ch ? 'info_show' : ''">
|
|
|
+ <span>{{ parkInfoEntity.payinstruction }}</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="top_down"
|
|
|
+ @click="top_display"
|
|
|
+ v-if="
|
|
|
+ !init_ch &&
|
|
|
+ parkInfoEntity.payinstruction &&
|
|
|
+ parkInfoEntity.payinstruction.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>
|
|
|
<plate-number
|
|
|
@@ -267,7 +268,7 @@ export default {
|
|
|
numArr: ['', '', '', '', '', '', ''],
|
|
|
active: null,
|
|
|
carList: [], // 车辆列表
|
|
|
- classifyList: ['普通车牌', '新能源', '特殊车牌'], // 车牌类型
|
|
|
+ classifyList: ['燃油车牌', '新能源', '特殊车牌'], // 车牌类型
|
|
|
vehicleNumber: '',
|
|
|
localimgPic: '',
|
|
|
hourMoney: '',
|
|
|
@@ -331,6 +332,11 @@ export default {
|
|
|
},
|
|
|
async created(params) {},
|
|
|
mounted() {
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: "临时停车"
|
|
|
+ })
|
|
|
+ }, 300)
|
|
|
if (this.openid) {
|
|
|
this.openId = this.openid;
|
|
|
this.getParkInfo();
|
|
|
@@ -440,6 +446,7 @@ export default {
|
|
|
if (res.data.code === 0) {
|
|
|
const data = res.data.data || {};
|
|
|
this.carList = data.carList;
|
|
|
+ // this.carList = ['辽A98G89', '沪A98GHJ', '陕A98GHJ0', '沪A98GHJ0', '陕A98GHJ', '辽A98G89'];
|
|
|
this.parkInfoEntity = data.parkInfoEntity;
|
|
|
this.hourMoney =
|
|
|
parseFloat(this.parkInfoEntity.needmoney) /
|
|
|
@@ -736,6 +743,9 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
+page {
|
|
|
+ background-color: #F4F7FF;
|
|
|
+}
|
|
|
.scroll-Y {
|
|
|
width: 100%;
|
|
|
// display: flex;
|
|
|
@@ -761,53 +771,12 @@ export default {
|
|
|
flex-direction: column;
|
|
|
background-size: 100% 30%;
|
|
|
// height: 350px;
|
|
|
- // margin-bottom: 25px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ background: #FAFBFF;
|
|
|
+ border: 1px solid #D8DAE0;
|
|
|
+ border-top: none;
|
|
|
|
|
|
- .top_content {
|
|
|
- padding: 25px 35px;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
|
|
|
- span {
|
|
|
- font-size: 24px;
|
|
|
- color: #898989;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
-
|
|
|
- .title_box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 20px;
|
|
|
-
|
|
|
- .btn {
|
|
|
- padding: 0px 14px;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 20px;
|
|
|
- font-size: 30px;
|
|
|
- color: #000;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .info {
|
|
|
- padding-left: 18px;
|
|
|
- font-size: 27px;
|
|
|
- width: 95%;
|
|
|
- color: #666;
|
|
|
- line-height: 45px;
|
|
|
- }
|
|
|
-
|
|
|
- .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');
|
|
|
@@ -844,20 +813,20 @@ export default {
|
|
|
}
|
|
|
|
|
|
.top_menu {
|
|
|
- margin: 10px auto 0;
|
|
|
- background: #fff;
|
|
|
- padding-top: 50px;
|
|
|
+ //margin: 10px auto 0;
|
|
|
+ background: #FAFBFF;
|
|
|
+ padding: 50px 40px 30px;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- border-radius: 15px;
|
|
|
+ //border-radius: 15px;
|
|
|
// position: absolute;
|
|
|
// left: 50%;
|
|
|
- box-shadow: 0 0 5px #666;
|
|
|
+ //box-shadow: 0 0 5px #666;
|
|
|
// transform: translateX(-50%);
|
|
|
- top: 160px;
|
|
|
- width: calc(100% - 50px);
|
|
|
- height: 250px;
|
|
|
+ //top: 160px;
|
|
|
+ width: 100%;
|
|
|
+ //height: 220px;
|
|
|
|
|
|
.menu_item {
|
|
|
display: flex;
|
|
|
@@ -916,16 +885,23 @@ export default {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- padding: 14px 25px;
|
|
|
+ //padding: 14px 25px;
|
|
|
+ background: #FAFBFF;
|
|
|
+ border: 1px solid #D8DAE0;
|
|
|
box-sizing: border-box;
|
|
|
- padding-bottom: 65px;
|
|
|
+ // padding-bottom: 65px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ &.pb65 {
|
|
|
+ padding-bottom: 65px;
|
|
|
+ }
|
|
|
+
|
|
|
// 车牌号查询
|
|
|
.parkingFee-search {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- background: #fff;
|
|
|
- border-radius: 15px;
|
|
|
+ //background: #fff;
|
|
|
+ //border-radius: 15px;
|
|
|
padding: 26px 25px 20px;
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
@@ -938,23 +914,28 @@ export default {
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
font-size: 30px;
|
|
|
-
|
|
|
+ &:first-child{
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 50px;
|
|
|
+ }
|
|
|
.search_tip_pt {
|
|
|
- font-size: 28px;
|
|
|
+ font-size: 24px;
|
|
|
width: 470px;
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
align-items: center;
|
|
|
- border: 1px solid #8d8d8d;
|
|
|
- height: 70px;
|
|
|
- color: #8d8d8d;
|
|
|
+ border: 1px solid #999999;
|
|
|
+ height: 54px;
|
|
|
+ color: #999999;
|
|
|
overflow: hidden;
|
|
|
border-radius: 50px;
|
|
|
|
|
|
div {
|
|
|
height: 100%;
|
|
|
border-radius: 50px;
|
|
|
- line-height: 65px;
|
|
|
+ line-height: 54px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
@@ -972,7 +953,9 @@ export default {
|
|
|
|
|
|
.search_tip_pt_index {
|
|
|
color: #fff;
|
|
|
- background-image: linear-gradient(to right, #7e4fa1, #433c7f);
|
|
|
+ //background-image: linear-gradient(to right, #7e4fa1, #433c7f);
|
|
|
+ //background-image: linear-gradient(to right, #7e4fa1, #433c7f);
|
|
|
+ background-color: #064C8A;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -982,7 +965,7 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 100px;
|
|
|
margin: auto;
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
+ background: #F4F7FF;
|
|
|
border-radius: 0.4rem;
|
|
|
margin: 1rem auto;
|
|
|
display: flex;
|
|
|
@@ -997,7 +980,7 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- color: #703a98;
|
|
|
+ color: #000000;
|
|
|
|
|
|
img {
|
|
|
width: 80%;
|
|
|
@@ -1005,7 +988,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
&.active {
|
|
|
- border-color: #3e67ff;
|
|
|
+ border-color: #064C8A;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1014,7 +997,7 @@ export default {
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
font-size: 120px;
|
|
|
- color: #703a98;
|
|
|
+ color: #000000;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1023,11 +1006,12 @@ export default {
|
|
|
margin: 0 auto;
|
|
|
height: 90px;
|
|
|
width: 98%;
|
|
|
- line-height: 90px;
|
|
|
+ line-height: 50px;
|
|
|
border-radius: 80px;
|
|
|
- font-size: 34px;
|
|
|
+ font-size: 36px;
|
|
|
text-align: center;
|
|
|
- background-image: linear-gradient(to right, #7e4fa1, #433c7f);
|
|
|
+ //background-image: linear-gradient(to right, #7e4fa1, #433c7f);
|
|
|
+ background-color: #064C8A;
|
|
|
}
|
|
|
|
|
|
.disabled-btn {
|
|
|
@@ -1076,14 +1060,15 @@ export default {
|
|
|
box-sizing: border-box;
|
|
|
border: 2px solid #dcdcdc;
|
|
|
line-height: 60px;
|
|
|
- font-size: 26px;
|
|
|
- border-radius: 10px;
|
|
|
- color: #a5a5a5;
|
|
|
+ font-size: 28px;
|
|
|
+ border-radius: 30px;
|
|
|
+ color: #666666;
|
|
|
+ background-color: #F4F7FF;
|
|
|
}
|
|
|
|
|
|
.vehicleMgt-content_cls {
|
|
|
- color: #703a98;
|
|
|
- border: 2px solid #703a98;
|
|
|
+ color: #F4F7FF;
|
|
|
+ border: 2px solid #064C8A;
|
|
|
}
|
|
|
|
|
|
// .item::after {
|
|
|
@@ -1132,7 +1117,68 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .top_content {
|
|
|
+ padding: 30px 30px;
|
|
|
+ margin-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2
|
|
|
+ margin-bottom: env(safe-area-inset-bottom); // 兼容 IOS>=11.2
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
|
|
|
+ //width: 750px;
|
|
|
+ //height: 280px;
|
|
|
+ background: #FAFBFF;
|
|
|
+ border: 1px solid #D8DAE0;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #898989;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title_box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ // margin-bottom: 20px;
|
|
|
+ .title {
|
|
|
+ // padding: 0px 14px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 36px;
|
|
|
+ color: #000;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: left;
|
|
|
+ line-height: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ // padding-left: 18px;
|
|
|
+ font-size: 30px;
|
|
|
+ width: 100%;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 45px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info_show {
|
|
|
+ word-break: break-all;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ .top_down {
|
|
|
+ margin-top: 20px;
|
|
|
+ width: 100%;
|
|
|
+ // font-size: 20PX;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: center;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
.blue-parkingFee-bottom {
|
|
|
.color-parkingFee-bottom('blue');
|
|
|
}
|
