|
|
@@ -38,7 +38,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-navbar>
|
|
|
- <view class="content">
|
|
|
+ <view class="content" >
|
|
|
<view v-if="show" class="preference" :style="show ? 'z-index:1024;top:'+navBarHeight+'px;' : 'z-index:0'">
|
|
|
<view class="preference_group">
|
|
|
<view class="preference_group_item"><label class="preference_label">距离我</label></view>
|
|
|
@@ -125,9 +125,10 @@
|
|
|
<u-button @click="close" style="width: 70%;background-color: #00B962;">确定</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view v-show="!viewMode">
|
|
|
- <view v-for="(item,index) in stations" :key="item.id" >
|
|
|
- <text class="fast-charge">{{item.type}}</text> <text class="station-items">{{item.name}}</text>
|
|
|
+ <view v-show="!viewMode" >
|
|
|
+
|
|
|
+ <view v-for="(item,index) in stations" :key="item.id" class="charing-slow" >
|
|
|
+ <text :class="item.type == '快充' ? 'fast-charge':'trickle-charge'">{{item.type}}</text> <text class="station-items">{{item.name}}</text>
|
|
|
<view class="address">
|
|
|
{{item.position}}
|
|
|
</view>
|
|
|
@@ -150,109 +151,16 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <!--
|
|
|
- <view class="charing-slow">
|
|
|
- <text class="fast-charge">快充</text> <text class="station-items">荆沙大道救助站充电站</text>
|
|
|
- <view class="address">
|
|
|
- 湖北省荆州市沙市区江津东路附155号
|
|
|
- </view>
|
|
|
- <view class="price">
|
|
|
- <view class="num">1.25</view>
|
|
|
- <view class="unit">
|
|
|
- 起 元/度
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="park">
|
|
|
- <text class="park-p">p</text>
|
|
|
- <text class="park-text">2小时免费停车</text>
|
|
|
- </view>
|
|
|
- <view class="free">
|
|
|
- <view class="free-num">
|
|
|
- <text style="color:#009143;">空闲10</text>/总数10
|
|
|
- </view>
|
|
|
- <view class="distance">
|
|
|
- <text class="iconfont distance-font"></text>1.2公里 3分钟
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="charing-slow">
|
|
|
- <text class="trickle-charge">慢充</text> <text class="station-items">荆鹏软件园充电站</text>
|
|
|
- <view class="address">
|
|
|
- 湖北省荆州市沙市区江津东路附155号
|
|
|
- </view>
|
|
|
- <view class="price">
|
|
|
- <view class="num">1.25</view>
|
|
|
- <view class="unit">
|
|
|
- 起 元/度
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="park">
|
|
|
- <text class="park-p">p</text>
|
|
|
- <text class="park-text">2小时免费停车</text>
|
|
|
- </view>
|
|
|
- <view class="free">
|
|
|
- <view class="free-num">
|
|
|
- <text style="color:#009143;">空闲1</text>/总数5
|
|
|
- </view>
|
|
|
- <view class="distance">
|
|
|
- <text class="iconfont distance-font"></text>0.1公里 1分钟
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="charing-slow">
|
|
|
- <text class="fast-charge">快充</text> <text class="station-items">荆沙大道救助站充电站</text>
|
|
|
- <view class="address">
|
|
|
- 湖北省荆州市沙市区荆沙大道15号
|
|
|
- </view>
|
|
|
- <view class="price">
|
|
|
- <view class="num">1.20</view>
|
|
|
- <view class="unit">
|
|
|
- 起 元/度
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="park">
|
|
|
- <text class="park-p">p</text>
|
|
|
- <text class="park-text">2小时免费停车</text>
|
|
|
- </view>
|
|
|
- <view class="free">
|
|
|
- <view class="free-num">
|
|
|
- <text style="color:#009143;">空闲10</text>/总数10
|
|
|
- </view>
|
|
|
- <view class="distance">
|
|
|
- <text class="iconfont distance-font"></text>1.2公里 3分钟
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>-->
|
|
|
+
|
|
|
+ <u-divider margin-top="20" bg-color="#F2F4F4">已经到底了</u-divider>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</view>
|
|
|
- <view v-show="viewMode">
|
|
|
+ <view v-show="viewMode" >
|
|
|
<view>
|
|
|
- <Chargermap ref="amap" @onload="mapdown" @clickMap="clickMap"></Chargermap>
|
|
|
+ <Chargermap ref="amap" @onload="mapdown" @clickMap="clickMap"></Chargermap>
|
|
|
</view>
|
|
|
-
|
|
|
- <!--<view class="charing-slow">
|
|
|
- <text class="fast-charge">快充</text> <text class="station-items">荆沙大道救助站充电站</text>
|
|
|
- <view class="address">
|
|
|
- 湖北省荆州市沙市区江津东路附155号
|
|
|
- </view>
|
|
|
- <view class="price">
|
|
|
- <view class="num">1.25</view>
|
|
|
- <view class="unit">
|
|
|
- 起 元/度
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="park">
|
|
|
- <text class="park-p">p</text>
|
|
|
- <text class="park-text">2小时免费停车</text>
|
|
|
- </view>
|
|
|
- <view class="free">
|
|
|
- <view class="free-num">
|
|
|
- <text style="color:#009143;">空闲10</text>/总数10
|
|
|
- </view>
|
|
|
- <view class="distance">
|
|
|
- <text class="iconfont distance-font"></text>1.2公里 3分钟
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>-->
|
|
|
|
|
|
<view v-if="stations.length>0" class="chargerCard" style="border-radius: 20rpx;" >
|
|
|
<swiper :current="currentIndex" @change="swiperChange" @transition="swiperTransition" style="height: 100%;">
|
|
|
@@ -319,8 +227,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <u-divider margin-top="20" bg-color="#F2F4F4">已经到底了</u-divider>
|
|
|
- <u-tabbar v-model="current" :list="tabbarList" active-color="#009143"></u-tabbar>
|
|
|
+ <u-tabbar v-model="current" :list="tabbarList" active-color="#009143"></u-tabbar>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -430,6 +337,40 @@ export default {
|
|
|
this.getNearbyStationInfo();
|
|
|
this.isReady = true;
|
|
|
this.$refs.amap.init();
|
|
|
+
|
|
|
+ //let state = {};
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: (res) => {
|
|
|
+ // #ifndef MP
|
|
|
+ let navbarH = 0
|
|
|
+ // #endif
|
|
|
+ // #ifdef MP
|
|
|
+ let navbarH = uni.upx2px(90)
|
|
|
+ // #endif
|
|
|
+ /*state.status_width = res.windowWidth;
|
|
|
+ console.log('window width'+state.status_width);*/
|
|
|
+
|
|
|
+ let scrollH = res.windowHeight;// - uni.upx2px(88) - navbarH
|
|
|
+ console.log('布局结果'+ JSON.stringify(res));
|
|
|
+ console.log('scrollH'+scrollH)
|
|
|
+ //#ifdef MP-WEIXIN
|
|
|
+ const {
|
|
|
+ statusBarHeight,
|
|
|
+ windowWidth,
|
|
|
+ } = uni.getSystemInfoSync();
|
|
|
+ console.log('height ' + statusBarHeight);
|
|
|
+ //this.status_height = uni.getStatusbarHeight();
|
|
|
+ let res1 = uni.getMenuButtonBoundingClientRect()
|
|
|
+ console.log('layout selectHeight '+JSON.stringify(res1))
|
|
|
+ //state.selectHeight = (res1.top-res.statusBarHeight)*2+ res1.height;
|
|
|
+ //#endif
|
|
|
+ //console.log('status height'+state.status_height)
|
|
|
+ _self.$refs.amap.setMyStyle("height:"+(scrollH-88-50)+ "px;width:100%;");
|
|
|
+ }
|
|
|
+ })
|
|
|
+// this.$refs.amap.setMyStyle("height:1500rpx;width:100%;");
|
|
|
+// this.$refs.amap.setMyStyle("height:calc(100%-176rpx);width:100%;");
|
|
|
+
|
|
|
// console.log('longitude3 '+this.longitude)
|
|
|
// console.log('latitude3 '+this.latitude)
|
|
|
},
|
|
|
@@ -564,16 +505,20 @@ export default {
|
|
|
let obj = {name:'荆鹏软件园充电站'+i.toString(),
|
|
|
position:'湖北省荆州市沙市区江津东路附155号',
|
|
|
price:1.2,idleNum:10,total:10,distance:0.1,
|
|
|
- time:1,type:'慢充',
|
|
|
+ time:1,
|
|
|
+ type:'慢充',
|
|
|
id: i,
|
|
|
park: i%2 == 0? '以实际费用为准':'2小时免费停车',
|
|
|
longitude: 112.28541 + i * 0.001,
|
|
|
latitude: 30.308354 + i * 0.01
|
|
|
};
|
|
|
- if(i == 0){
|
|
|
+ if(i%2 == 0){
|
|
|
obj.longitude = 112.28571 ;
|
|
|
obj.latitude = 30.307539;
|
|
|
+ }else{
|
|
|
+ obj.type = '快充';
|
|
|
}
|
|
|
+
|
|
|
//arr.push(obj);
|
|
|
this.stations.push(obj);
|
|
|
}
|
|
|
@@ -744,16 +689,14 @@ export default {
|
|
|
|
|
|
.charing-slow {
|
|
|
background-color: #fff;
|
|
|
- margin: 0 12px;
|
|
|
- border-radius: 8px;
|
|
|
+ margin: 20rpx;
|
|
|
+ border-radius: 8px;
|
|
|
padding: 10px 12px 0px;
|
|
|
- position: fixed;
|
|
|
- bottom: 68px;
|
|
|
+ position: relative;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
- /*height: 25%;*/
|
|
|
-
|
|
|
- .fast-charge1 {
|
|
|
+}
|
|
|
+ .fast-charge {
|
|
|
display: inline-block;
|
|
|
width: 44px;
|
|
|
height: 20px;
|
|
|
@@ -764,6 +707,17 @@ export default {
|
|
|
font-size: 12px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
+ .trickle-charge {
|
|
|
+ display: inline-block;
|
|
|
+ width: 44px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 20px;
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: rgba(0, 185, 98, 100);
|
|
|
+ color: rgba(255, 255, 255, 100);
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
|
|
|
.station-items {
|
|
|
display: inline-block;
|
|
|
@@ -799,52 +753,65 @@ export default {
|
|
|
display: flex;
|
|
|
height: 20px;
|
|
|
|
|
|
- .num {
|
|
|
- height: 20px;
|
|
|
- color: rgba(255, 98, 0, 100);
|
|
|
- font-size: 20px;
|
|
|
- text-align: left;
|
|
|
- font-family: Roboto-medium;
|
|
|
- }
|
|
|
-
|
|
|
- .unit {
|
|
|
- height: 14px;
|
|
|
- line-height: 14px;
|
|
|
- color: rgba(102, 102, 102, 100);
|
|
|
- font-size: 14px;
|
|
|
- text-align: left;
|
|
|
- font-family: AlibabaPuHui-regular;
|
|
|
- margin-top: 6px;
|
|
|
- margin-left: 4px;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+ .num {
|
|
|
+ height: 20px;
|
|
|
+ color: rgba(255, 98, 0, 100);
|
|
|
+ font-size: 20px;
|
|
|
+ text-align: left;
|
|
|
+ font-family: Roboto-medium;
|
|
|
+ }
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ height: 14px;
|
|
|
+ line-height: 14px;
|
|
|
+ color: rgba(102, 102, 102, 100);
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: left;
|
|
|
+ font-family: AlibabaPuHui-regular;
|
|
|
+ margin-top: 6px;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
.park {
|
|
|
margin-top: 8px;
|
|
|
display: flex;
|
|
|
|
|
|
- .park-p {
|
|
|
- display: inline-block;
|
|
|
- width: 20px;
|
|
|
- height: 18px;
|
|
|
- line-height: 12px;
|
|
|
- text-align: center;
|
|
|
- background-color: rgba(125, 177, 255, 100);
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+
|
|
|
|
|
|
- .park-text {
|
|
|
- display: inline-block;
|
|
|
- width: 300px;
|
|
|
- height: 17px;
|
|
|
- color: rgba(102, 102, 102, 100);
|
|
|
- font-size: 12px;
|
|
|
- text-align: left;
|
|
|
- margin-left: 4px;
|
|
|
- margin-top: 2px;
|
|
|
- }
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
+ .park-p {
|
|
|
+ display: inline-block;
|
|
|
+ width: 20px;
|
|
|
+ height: 18px;
|
|
|
+ line-height: 12px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: rgba(125, 177, 255, 100);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .park-text {
|
|
|
+ display: inline-block;
|
|
|
+ width: 300px;
|
|
|
+ height: 17px;
|
|
|
+ color: rgba(102, 102, 102, 100);
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: left;
|
|
|
+ margin-left: 4px;
|
|
|
+ margin-top: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .map {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ #container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
.free {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
@@ -852,27 +819,27 @@ export default {
|
|
|
border-top: 1px solid rgba(238, 242, 240, 100);
|
|
|
margin-top: 10px;
|
|
|
|
|
|
- .free-num {
|
|
|
- line-height: 52px;
|
|
|
- font-size: 16px
|
|
|
- }
|
|
|
-
|
|
|
- .distance {
|
|
|
- width: 130px;
|
|
|
- height: 28px;
|
|
|
- line-height: 28px;
|
|
|
- color: rgba(255, 255, 255, 100);
|
|
|
- font-size: 14px;
|
|
|
- background-color: #00b962;
|
|
|
- border-radius: 50px;
|
|
|
- margin: 12px;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- .distance-font {
|
|
|
- font-size: 16px
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ }
|
|
|
+ .free-num {
|
|
|
+ line-height: 52px;
|
|
|
+ font-size: 16px
|
|
|
+ }
|
|
|
+ .distance {
|
|
|
+ width: 130px;
|
|
|
+ height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: rgba(255, 255, 255, 100);
|
|
|
+ font-size: 14px;
|
|
|
+ background-color: #00b962;
|
|
|
+ border-radius: 50px;
|
|
|
+ margin: 12px;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ .distance-font {
|
|
|
+ font-size: 16px
|
|
|
+ }
|
|
|
</style>
|
