|
|
@@ -1,1755 +1,868 @@
|
|
|
<template>
|
|
|
-
|
|
|
<view>
|
|
|
-
|
|
|
<u-navbar :is-back="false" height="88" style="background-color: bisque;">
|
|
|
-
|
|
|
<view style="display: flex;flex-direction: column; width: 100%;height: 100%;">
|
|
|
-
|
|
|
<view style="display: flex;flex-direction: row; height: 100%; align-items: center;margin-top:0rpx;padding-top: 0rpx;padding-bottom: 20rpx;">
|
|
|
-
|
|
|
<view style="margin-left:20rpx;">
|
|
|
-
|
|
|
<label class="arrow">{{ area }}</label>
|
|
|
-
|
|
|
<u-icon name="arrow-down-fill" size="13" color="#c0c4cc"></u-icon>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
<view style="margin-left: 20rpx;margin-right: 20rpx; flex:1"><u-search placeholder="搜索站点名称" v-model="keyword" :showAction="false"></u-search></view>
|
|
|
-
|
|
|
<view style="margin-right: 20rpx;" v-show="viewMode" @click="listMode">
|
|
|
-
|
|
|
<text class="iconfont"></text> <text class="list">列表</text>
|
|
|
-
|
|
|
<!-- <u-icon name="list-dot" size="26" color="#c0c4cc"></u-icon>
|
|
|
-
|
|
|
<label>列表</label>-->
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
<view style="margin-right: 20rpx;" v-show="!viewMode" @click="mapMode">
|
|
|
-
|
|
|
<text class="iconfont"></text> <text class="list">地图</text>
|
|
|
-
|
|
|
<!--<u-icon name="map" size="26" color="#c0c4cc"></u-icon>
|
|
|
-
|
|
|
<label>地图</label>
|
|
|
-
|
|
|
-->
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
|
|
|
-
|
|
|
-
|
|
|
<view style="display: flex;flex-direction: row;width:100%; justify-content: space-between;align-items: center;">
|
|
|
-
|
|
|
<view style="margin-left: 20rpx;">
|
|
|
-
|
|
|
<label class="arrow">{{ info.miles_type[preference.miles_index].text }}</label>
|
|
|
-
|
|
|
<u-icon name="arrow-down-fill" size="13" color="#c0c4cc"></u-icon>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
<view style="margin-left: 20rpx;margin-right: 20rpx;flex:1">
|
|
|
-
|
|
|
<label class="arrow">{{ info.obc_type[preference.obc_type_index].text }}</label>
|
|
|
-
|
|
|
<u-icon name="arrow-down-fill" size="13" color="#c0c4cc"></u-icon>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
<view style="margin-right: 20rpx;" @click="open">
|
|
|
-
|
|
|
<label class="arrow">{{ action }}</label>
|
|
|
-
|
|
|
<u-icon v-if="show" name="arrow-down-fill" size="13" color="#00B962"></u-icon>
|
|
|
-
|
|
|
<u-icon v-else name="arrow-down-fill" size="13" color="#c0c4cc"></u-icon>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
</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>
|
|
|
-
|
|
|
<view>
|
|
|
-
|
|
|
<u-tag
|
|
|
-
|
|
|
class="preference_item"
|
|
|
-
|
|
|
v-for="(item, index) in info.miles_type"
|
|
|
-
|
|
|
:style="index == preference.miles_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
|
|
|
-
|
|
|
shape="circle"
|
|
|
-
|
|
|
:text="item.text"
|
|
|
-
|
|
|
@click="selectMiles(index)"
|
|
|
-
|
|
|
></u-tag>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
<view class="preference_group">
|
|
|
-
|
|
|
<view class="preference_group_item"><label class="preference_label">充电站类型</label></view>
|
|
|
-
|
|
|
<view>
|
|
|
-
|
|
|
<u-tag
|
|
|
-
|
|
|
class="preference_item"
|
|
|
-
|
|
|
v-for="(item, index) in info.obc_type"
|
|
|
-
|
|
|
:style="index == preference.obc_type_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
|
|
|
-
|
|
|
shape="circle"
|
|
|
-
|
|
|
:text="item.text"
|
|
|
-
|
|
|
@click="selectOBSType(index)"
|
|
|
-
|
|
|
></u-tag>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
|
|
|
-
|
|
|
<view class="preference_group">
|
|
|
-
|
|
|
<view class="preference_group_item"><label class="preference_label">是否对外开放</label></view>
|
|
|
-
|
|
|
<view>
|
|
|
-
|
|
|
<u-tag
|
|
|
-
|
|
|
class="preference_item_plus"
|
|
|
-
|
|
|
v-for="(item, index) in info.obc_status"
|
|
|
-
|
|
|
:style="index == preference.obc_status_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
|
|
|
-
|
|
|
shape="circle"
|
|
|
-
|
|
|
:text="item.text"
|
|
|
-
|
|
|
@click="selectOBSStatus(index)"
|
|
|
-
|
|
|
></u-tag>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
<view class="preference_group">
|
|
|
-
|
|
|
<view class="preference_group_item"><label class="preference_label">充电桩电压 (V)</label></view>
|
|
|
-
|
|
|
<view>
|
|
|
-
|
|
|
<u-tag
|
|
|
-
|
|
|
class="preference_item_plus"
|
|
|
-
|
|
|
v-for="(item, index) in info.obc_voltage"
|
|
|
-
|
|
|
:style="index == preference.obc_voltage_index ? 'background-color:#00B962;color:#FFFFFF' : 'background-color:#EFF4F2;color:#926666'"
|
|
|
-
|
|
|
shape="circle"
|
|
|
-
|
|
|
:text="item.text"
|
|
|
-
|
|
|
@click="selectOBCVoltage(index)"
|
|
|
-
|
|
|
></u-tag>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
<view class="preference_group">
|
|
|
-
|
|
|
<view class="preference_group_item"><label class="preference_label">充电桩电压 (kW)</label></view>
|
|
|
-
|
|
|
<view style="height: 50rpx;margin-left: 30rpx;">
|
|
|
-
|
|
|
<DoubleSlider
|
|
|
-
|
|
|
ref="obc_voltage"
|
|
|
-
|
|
|
sliderHeight="15rpx"
|
|
|
-
|
|
|
blockSize="36rpx"
|
|
|
-
|
|
|
:minValue="info.obc_power.minValue"
|
|
|
-
|
|
|
:maxValue="info.obc_power.maxValue"
|
|
|
-
|
|
|
v-model="preference.obc_power"
|
|
|
-
|
|
|
:currentMinValue="preference.obc_power.minValue"
|
|
|
-
|
|
|
:currentMaxValue="preference.obc_power.maxValue"
|
|
|
-
|
|
|
labelColor="#B8C9C5"
|
|
|
-
|
|
|
borderRadius="25rpx"
|
|
|
-
|
|
|
borderColor="#00B962"
|
|
|
-
|
|
|
borderStyle="solid"
|
|
|
-
|
|
|
borderWidth="3rpx"
|
|
|
-
|
|
|
blockColor="#FFFFFF"
|
|
|
-
|
|
|
activeColor="#00B962"
|
|
|
-
|
|
|
indicatorColor="#DBDBDB"
|
|
|
-
|
|
|
@change="handlerDoubleSlider"
|
|
|
-
|
|
|
> </DoubleSlider>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
<view class="preference_group">
|
|
|
-
|
|
|
<view style="margin-left: 30rpx;"><u-checkbox shape="circle" v-model="preference.save_preference" @change="radioChange">保存偏好设置</u-checkbox></view>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
<view style="display: flex;flex-direction: row;">
|
|
|
-
|
|
|
<u-button @click="reset" style="width: 30%;">重置</u-button>
|
|
|
-
|
|
|
<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>
|
|
|
-
|
|
|
<view class="price">
|
|
|
-
|
|
|
<view class="num">{{item.price}}</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;">空闲{{item.idleNum}}</text>/总数{{item.total}}
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
<view class="distance">
|
|
|
-
|
|
|
<text class="iconfont distance-font"></text>{{item.distance}}公里 {{item.time}}分钟
|
|
|
-
|
|
|
</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 @onMoveEnd="moveEnd" 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%;">
|
|
|
-
|
|
|
<swiper-item v-for="(item,index) in stations" style="height: 100%;">
|
|
|
-
|
|
|
|
|
|
-
|
|
|
<view class="swiper-item" style="height: 100%; background-color: #ffffff;">
|
|
|
-
|
|
|
<view class="card_item" style="font-size: 35rpx;padding-top: 5rpx;">
|
|
|
-
|
|
|
<view style="display: flex;flex-direction: row;">
|
|
|
-
|
|
|
<view class="round2" style="margin-right: 5rpx;">
|
|
|
-
|
|
|
{{item.type}}
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
<view>
|
|
|
-
|
|
|
{{item.name}}
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
<view class="card_item" style="color:#8898A9;font-size: 15rpx;">
|
|
|
-
|
|
|
{{item.position}}
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
|
|
|
-
|
|
|
<view class="card_item2" >
|
|
|
-
|
|
|
<view style="color:#FF6573;font-size:45rpx;margin-right: 10rpx;">
|
|
|
-
|
|
|
{{item.price}}
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
<view style="display: flex; justify-content: center;align-items: center">
|
|
|
-
|
|
|
起 元/度
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
<view class="card_item" style="border-bottom: #F1F4F3; border-bottom-width: 2rpx;border-style: solid;border-top-width: 0rpx;border-left-width: 0rpx;border-right-width:0rpx; padding-bottom:20rpx">
|
|
|
-
|
|
|
<view style="display: flex;flex-direction: row;">
|
|
|
-
|
|
|
<view style="background-color: #7DB1FF;padding-left: 10rpx;padding-right: 10rpx;">
|
|
|
-
|
|
|
P
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
<label>{{item.park}}</label>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
<view style="display: flex;flex-direction: row;">
|
|
|
-
|
|
|
<view style="color: #00B962;">
|
|
|
-
|
|
|
空闲{{item.idleNum}}
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
|
|
|
-
|
|
|
<view>
|
|
|
-
|
|
|
/总数{{item.total}}
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
<view class="card_item" style="padding-bottom: 20rpx;">
|
|
|
-
|
|
|
- <u-button shape='circle' style="color: #00B962;">
|
|
|
-
|
|
|
+ <u-button shape='circle' style="color: #00B962;" @click="charge(item)">
|
|
|
<u-icon name="scan" size="26" color="#00B962" style="margin-right: 20rpx;"></u-icon>
|
|
|
-
|
|
|
<label>扫码充电</label></u-button>
|
|
|
-
|
|
|
<view class="round">
|
|
|
-
|
|
|
<text class="iconfont distance-font"></text>
|
|
|
-
|
|
|
<view style="margin-right: 10rpx;">
|
|
|
-
|
|
|
{{item.distance}}公里
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
<view style="margin-right: 10rpx;">
|
|
|
-
|
|
|
{{item.time}}分钟
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
</swiper-item>
|
|
|
-
|
|
|
</swiper>
|
|
|
-
|
|
|
</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>
|
|
|
|
|
|
-
|
|
|
-
|
|
|
<script>
|
|
|
-
|
|
|
// import api from './site-index.js'
|
|
|
-
|
|
|
// export default api
|
|
|
-
|
|
|
import * as api from '@/apis/site.js';
|
|
|
-
|
|
|
import Chargermap from '@/components/Chargermap.vue';
|
|
|
-
|
|
|
import DoubleSlider from '@/components/double-slider/DoubleSlider.vue';
|
|
|
|
|
|
-
|
|
|
-
|
|
|
let _self;
|
|
|
-
|
|
|
export default {
|
|
|
-
|
|
|
components: {
|
|
|
-
|
|
|
Chargermap,
|
|
|
-
|
|
|
DoubleSlider
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
data() {
|
|
|
-
|
|
|
return {
|
|
|
-
|
|
|
tabbarList: [{
|
|
|
-
|
|
|
iconPath: "home-3-line",
|
|
|
-
|
|
|
selectedIconPath: "home-3-fill",
|
|
|
-
|
|
|
text: '主页 ',
|
|
|
-
|
|
|
count: 0,
|
|
|
-
|
|
|
isDot: true,
|
|
|
-
|
|
|
customIcon: true,
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
{
|
|
|
-
|
|
|
iconPath: "road-map-line",
|
|
|
-
|
|
|
selectedIconPath: "road-map-fill",
|
|
|
-
|
|
|
text: '找桩',
|
|
|
-
|
|
|
midButton: true,
|
|
|
-
|
|
|
customIcon: true,
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
{
|
|
|
-
|
|
|
iconPath: "user-5-line",
|
|
|
-
|
|
|
selectedIconPath: "user-5-fill",
|
|
|
-
|
|
|
text: '我的',
|
|
|
-
|
|
|
count: 0,
|
|
|
-
|
|
|
isDot: false,
|
|
|
-
|
|
|
customIcon: true,
|
|
|
-
|
|
|
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
],
|
|
|
-
|
|
|
currentIndex:-1,
|
|
|
-
|
|
|
navBarHeight:88,
|
|
|
-
|
|
|
viewMode: true, //地图
|
|
|
-
|
|
|
keyword: '',
|
|
|
-
|
|
|
show: false,
|
|
|
-
|
|
|
mapopen: false,
|
|
|
-
|
|
|
isReady: false,
|
|
|
-
|
|
|
id: '',
|
|
|
-
|
|
|
longitude: 112.28468,
|
|
|
-
|
|
|
latitude: 30.307094,
|
|
|
-
|
|
|
// longitude: '',
|
|
|
-
|
|
|
// latitude: '',
|
|
|
-
|
|
|
nearbyStationInfo: {
|
|
|
-
|
|
|
nearbyShiftDTOList: []
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
area: '荆州市',
|
|
|
-
|
|
|
action: '筛选',
|
|
|
-
|
|
|
preference: {
|
|
|
-
|
|
|
miles_index: 3,
|
|
|
-
|
|
|
obc_type_index: 0,
|
|
|
-
|
|
|
obc_status_index: 0,
|
|
|
-
|
|
|
obc_voltage_index: 0,
|
|
|
-
|
|
|
save_preference: false,
|
|
|
-
|
|
|
obc_power: { minValue: 0, maxValue: 500 }
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
stations:[
|
|
|
-
|
|
|
/* {name:'荆鹏软件园充电站',position:'湖北省荆州市沙市区江津东路附155号',price:1.2,idle:10,total:10,distance:0.1,time:1,type:'慢充'},
|
|
|
-
|
|
|
{name:'荆鹏软件园充电站2',position:'湖北省荆州市沙市区江津东路附156号',price:1.2,idle:10,total:10,distance:0.1,time:1,type:'快充'},
|
|
|
-
|
|
|
{name:'荆鹏软件园充电站3',position:'湖北省荆州市沙市区江津东路附157号',price:1.2,idle:10,total:10,distance:0.1,time:1,type:'慢充'},
|
|
|
-
|
|
|
{name:'荆鹏大道求助站充电站',position:'湖北省荆州市沙市区江津东路附158号',price:1.2,idle:10,total:10,distance:0.1,time:1,type:'快充'},
|
|
|
-
|
|
|
*/
|
|
|
-
|
|
|
],
|
|
|
-
|
|
|
info: {
|
|
|
-
|
|
|
miles_type: [
|
|
|
-
|
|
|
{ distance: 1, text: '1公里' },
|
|
|
-
|
|
|
{ distance: 2, text: '2公里' },
|
|
|
-
|
|
|
{ distance: 5, text: '5公里' },
|
|
|
-
|
|
|
{ distance: 10, text: '10公里' },
|
|
|
-
|
|
|
{ distance: 20, text: '20公里' },
|
|
|
-
|
|
|
{ distance: 50, text: '50公里' },
|
|
|
-
|
|
|
{ distance: 100, text: '100公里' },
|
|
|
-
|
|
|
{ distance: 200, text: '200公里' }
|
|
|
-
|
|
|
],
|
|
|
-
|
|
|
obc_type: [{ value: 0, text: '直流快充' }, { value: 1, text: '交流慢充' }],
|
|
|
-
|
|
|
obc_status: [{ value: 0, text: '对外开放' }, { value: 1, text: '不对外开放' }],
|
|
|
-
|
|
|
obc_voltage: [{ value: 0, text: '低于700V' }, { value: 1, text: '700V及以上' }],
|
|
|
-
|
|
|
obc_power: { minValue: 0, maxValue: 1000 }
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
};
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
onLoad(op) {
|
|
|
-
|
|
|
_self = this;
|
|
|
-
|
|
|
console.log('longitude0 ' + _self.longitude);
|
|
|
-
|
|
|
console.log('latitude0 ' + _self.latitude);
|
|
|
-
|
|
|
if (op != null) {
|
|
|
-
|
|
|
if (op.longitude != null) this.longitude = op.longitude;
|
|
|
-
|
|
|
if (op.latitude != null) this.latitude = op.latitude;
|
|
|
-
|
|
|
if (op.id != null) this.id = op.id;
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
onReady() {
|
|
|
-
|
|
|
// console.log('longitude2 '+this.longitude)
|
|
|
-
|
|
|
// console.log('latitude2 '+this.latitude)
|
|
|
-
|
|
|
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)
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
onShow() {
|
|
|
-
|
|
|
if (this.isReady) {
|
|
|
-
|
|
|
this.getNearbyStationInfo();
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
methods: {
|
|
|
-
|
|
|
+ charge(item){
|
|
|
+ console.log('扫码充电')
|
|
|
+ //#ifdef MP-WEIXIN
|
|
|
+ uni.scanCode({
|
|
|
+ success:function(res){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'chargingPileDetails?pile='+encodeURIComponent(JSON.stringify(data))
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ //#endif
|
|
|
+
|
|
|
+ console.log('扫码充电1')
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'stationAndPile/chargingPileDetails'
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ moveEnd(e){
|
|
|
+ console.log('moveEnd'+JSON.stringify(e))
|
|
|
+ },
|
|
|
clickTabItem (index) {
|
|
|
-
|
|
|
|
|
|
-
|
|
|
this.currentIndex = index
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
swiperChange (e) {
|
|
|
-
|
|
|
this.currentIndex = e.detail.current
|
|
|
-
|
|
|
let station = this.stations[this.currentIndex];
|
|
|
-
|
|
|
|
|
|
-
|
|
|
let posCenter= {longitude: station.longitude,latitude: station.latitude};
|
|
|
-
|
|
|
console.log('currentIndex'+JSON.stringify(this.currentIndex))
|
|
|
-
|
|
|
console.log('currentIndex'+JSON.stringify(posCenter))
|
|
|
-
|
|
|
console.log('station'+JSON.stringify(station))
|
|
|
-
|
|
|
this.$refs.amap.setCenter(posCenter);
|
|
|
-
|
|
|
this.$refs.amap.updateCharger(station);
|
|
|
-
|
|
|
//console.log('currentIndex'+e.detail.current)
|
|
|
-
|
|
|
/*if(e.detail.current>= 2) {
|
|
|
-
|
|
|
this.scrollIntoView = 'index' + (e.detail.current-2)
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
*/
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
swiperTransition (e) {
|
|
|
-
|
|
|
// console.log(e)
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
listMode() {
|
|
|
-
|
|
|
this.viewMode = false
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
mapMode() {
|
|
|
-
|
|
|
this.viewMode = true
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
radioChange(e) {
|
|
|
-
|
|
|
// console.log('e'+JSON.stringify(e))
|
|
|
-
|
|
|
this.preference.save_preference = e.value;
|
|
|
-
|
|
|
// console.log('save_preference '+this.preference.save_preference);
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
handlerDoubleSlider(e) {
|
|
|
-
|
|
|
// console.log('e'+JSON.stringify(e))
|
|
|
-
|
|
|
this.preference.obc_power = e;
|
|
|
-
|
|
|
//this.preference.obc_power.minValue = e.minValue;
|
|
|
-
|
|
|
//this.preference.obc_power.maxValue = e.maxValue;
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
selectOBSType(index) {
|
|
|
-
|
|
|
this.preference.obc_type_index = index;
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
selectOBSStatus(index) {
|
|
|
-
|
|
|
this.preference.obc_status_index = index;
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
selectOBCVoltage(index) {
|
|
|
-
|
|
|
this.preference.obc_voltage_index = index;
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
selectMiles(index) {
|
|
|
-
|
|
|
this.preference.miles_index = index;
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
reset() {
|
|
|
-
|
|
|
this.preference.obc_status_index = 0;
|
|
|
-
|
|
|
this.preference.obc_voltage_index = 0;
|
|
|
-
|
|
|
this.preference.obc_type_index = 0;
|
|
|
-
|
|
|
this.preference.miles_index = 3;
|
|
|
-
|
|
|
this.preference.save_preference = false;
|
|
|
-
|
|
|
// this.$refs.obc_voltage.currentValue = [0,100];
|
|
|
-
|
|
|
this.preference.obc_power.minValue = 0;
|
|
|
-
|
|
|
this.preference.obc_power.maxValue = 500;
|
|
|
-
|
|
|
this.preference.obc_power.minP = Math.floor((this.preference.obc_power.minValue / (this.info.obc_power.maxValue - this.info.obc_power.minValue)) * 100);
|
|
|
-
|
|
|
this.preference.obc_power.maxP = Math.floor((this.preference.obc_power.maxValue / (this.info.obc_power.maxValue - this.info.obc_power.minValue)) * 100);
|
|
|
-
|
|
|
// console.log('minP'+this.preference.obc_power.minP)
|
|
|
-
|
|
|
// console.log('maxP'+this.preference.obc_power.maxP)
|
|
|
-
|
|
|
this.$refs.obc_voltage.reset(this.preference.obc_power);
|
|
|
-
|
|
|
// this.$refs.obc_voltage.currentMaxValue = this.preference.obc_power[1];
|
|
|
-
|
|
|
// console.log('reset')
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
open() {
|
|
|
-
|
|
|
this.show = true;
|
|
|
-
|
|
|
//this.$refs.obc_voltage.currentMinValue = this.preference.obc_power[0];
|
|
|
-
|
|
|
//this.$refs.obc_voltage.currentMaxValue = this.preference.obc_power[1];
|
|
|
-
|
|
|
console.log('open');
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
close() {
|
|
|
-
|
|
|
console.log('偏好设置' + JSON.stringify(this.preference));
|
|
|
-
|
|
|
this.show = false;
|
|
|
-
|
|
|
// console.log('close');
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
// 获取当前位置
|
|
|
-
|
|
|
clickMap(obj) {
|
|
|
-
|
|
|
//this.currentIndex = 5;
|
|
|
-
|
|
|
// console.log('longitude1 ' + _self.longitude);
|
|
|
-
|
|
|
// console.log('latitude1 ' + _self.latitude);
|
|
|
-
|
|
|
if (obj == null || obj.type == null) return;
|
|
|
-
|
|
|
if (obj.type == 'charger') {
|
|
|
-
|
|
|
api.getChargerInfoById(obj).then(
|
|
|
-
|
|
|
function(data) {
|
|
|
-
|
|
|
if (obj.obj != null) {
|
|
|
-
|
|
|
//obj.obj.price = 2.25;
|
|
|
-
|
|
|
//obj.obj.idleNum = 12;
|
|
|
-
|
|
|
_self.$refs.amap.updateCharger(obj.obj);
|
|
|
-
|
|
|
let index = _self.stations.findIndex(item => item.id == obj.obj.id);
|
|
|
-
|
|
|
_self.currentIndex = index;
|
|
|
-
|
|
|
console.log('find Index'+index);
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
// console.log('点击1'+JSON.stringify(obj));
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
function(err) {
|
|
|
-
|
|
|
console.log('点击2' + JSON.stringify(obj));
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
);
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
mapdown() {
|
|
|
-
|
|
|
//console.log('this'+JSON.stringify(this))
|
|
|
-
|
|
|
// console.log('longitude1 ' + this.longitude);
|
|
|
-
|
|
|
// console.log('latitude1 ' + this.latitude);
|
|
|
|
|
|
-
|
|
|
-
|
|
|
var obj = {
|
|
|
-
|
|
|
longitude: _self.longitude,
|
|
|
-
|
|
|
latitude: _self.latitude
|
|
|
-
|
|
|
};
|
|
|
-
|
|
|
// console.log('obj ' + JSON.stringify(obj));
|
|
|
-
|
|
|
this.$refs.amap.setPerson(obj);
|
|
|
-
|
|
|
/* var obj2 = {
|
|
|
-
|
|
|
longitude: this.nearbyStationInfo.longitude,
|
|
|
-
|
|
|
latitude: this.nearbyStationInfo.latitude
|
|
|
-
|
|
|
};*/
|
|
|
-
|
|
|
let arr = [];
|
|
|
-
|
|
|
for (let i = 0; i < 10; i++) {
|
|
|
-
|
|
|
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);
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
console.log('stations'+JSON.stringify(this.stations))
|
|
|
|
|
|
-
|
|
|
-
|
|
|
this.$refs.amap.setChargerList(this.stations);
|
|
|
-
|
|
|
//this.$refs.amap.setPerson(obj);
|
|
|
-
|
|
|
//this.$refs.amap.setSite(obj2);
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
gotoLine(item, downid) {
|
|
|
-
|
|
|
uni.navigateTo({
|
|
|
-
|
|
|
url: '/pages/route/index?id=' + item.routeId + '&upid=' + item.startStationId + '&downid=' + downid
|
|
|
-
|
|
|
});
|
|
|
-
|
|
|
},
|
|
|
-
|
|
|
mapopenBtn() {
|
|
|
-
|
|
|
this.mapopen = !this.mapopen;
|
|
|
-
|
|
|
if (this.mapopen) {
|
|
|
-
|
|
|
this.$refs.amap.setMyStyle('width: 100%; height: 340px;');
|
|
|
-
|
|
|
} else {
|
|
|
-
|
|
|
this.$refs.amap.setMyStyle('width: 100%; height: 140px;');
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
},
|
|
|
|
|
|
-
|
|
|
-
|
|
|
getNearbyStationInfo() {
|
|
|
-
|
|
|
var obj = {
|
|
|
-
|
|
|
longitude: this.longitude,
|
|
|
-
|
|
|
latitude: this.latitude,
|
|
|
-
|
|
|
id: this.id
|
|
|
-
|
|
|
};
|
|
|
|
|
|
-
|
|
|
-
|
|
|
//this.$refs.common.showLoading();
|
|
|
-
|
|
|
/*
|
|
|
-
|
|
|
API.nearbyStationInfo(obj).then((res) => {
|
|
|
-
|
|
|
this.nearbyStationInfo=res.data;
|
|
|
-
|
|
|
|
|
|
-
|
|
|
this.$refs.common.showLoading(false);
|
|
|
-
|
|
|
}).catch(error => {
|
|
|
-
|
|
|
this.$refs.common.showLoading(false,error);
|
|
|
-
|
|
|
|
|
|
-
|
|
|
})*/
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
};
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
-
|
|
|
-
|
|
|
<style>
|
|
|
-
|
|
|
.cj-slider {
|
|
|
-
|
|
|
width: 90%;
|
|
|
-
|
|
|
margin: auto;
|
|
|
-
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
.cj-slide__text {
|
|
|
-
|
|
|
text-align: center;
|
|
|
-
|
|
|
padding: 20rpx;
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
.preference_group_item {
|
|
|
-
|
|
|
padding: 15rpx;
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
.preference_group {
|
|
|
-
|
|
|
padding-bottom: 20rpx;
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
.preference {
|
|
|
-
|
|
|
background-color: #ffffff;
|
|
|
-
|
|
|
left: 0rpx;
|
|
|
-
|
|
|
position: absolute;
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
.preference_item {
|
|
|
-
|
|
|
margin-bottom: 10rpx;
|
|
|
-
|
|
|
margin-left: 20rpx;
|
|
|
-
|
|
|
text-align: center;
|
|
|
-
|
|
|
border-style: none;
|
|
|
-
|
|
|
width: 20%;
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
.preference_item_plus {
|
|
|
-
|
|
|
margin-bottom: 10rpx;
|
|
|
-
|
|
|
margin-left: 20rpx;
|
|
|
-
|
|
|
align-items: center;
|
|
|
-
|
|
|
justify-content: center;
|
|
|
-
|
|
|
text-align: center;
|
|
|
-
|
|
|
width: 25%;
|
|
|
-
|
|
|
border-style: none;
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
.preference_label {
|
|
|
-
|
|
|
color: #9f9c99;
|
|
|
-
|
|
|
margin-left: 20rpx;
|
|
|
-
|
|
|
margin-bottom: 100rpx;
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
.map{
|
|
|
-
|
|
|
background-color: #ffffff;
|
|
|
-
|
|
|
left: 0rpx;
|
|
|
-
|
|
|
position: absolute;
|
|
|
-
|
|
|
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
.chargerCard{
|
|
|
-
|
|
|
/* background-color: #fff;
|
|
|
-
|
|
|
margin: 0 12px;
|
|
|
-
|
|
|
border-radius: 8px;
|
|
|
-
|
|
|
padding: 10px 12px 0px;
|
|
|
-
|
|
|
position: absolute;
|
|
|
-
|
|
|
bottom: 68px;
|
|
|
-
|
|
|
left: 0;
|
|
|
-
|
|
|
right: 0;
|
|
|
-
|
|
|
z-index:1021
|
|
|
-
|
|
|
*/
|
|
|
-
|
|
|
background-color: #fff;
|
|
|
-
|
|
|
margin: 0 12px;
|
|
|
-
|
|
|
border-radius: 8px;
|
|
|
-
|
|
|
padding: 10px 12px 0px;
|
|
|
-
|
|
|
bottom: 68px;
|
|
|
-
|
|
|
left: 0;
|
|
|
-
|
|
|
right: 0;
|
|
|
-
|
|
|
position: fixed;
|
|
|
-
|
|
|
height:360rpx;
|
|
|
-
|
|
|
/*
|
|
|
-
|
|
|
z-index: 1021;
|
|
|
-
|
|
|
width: 80%;
|
|
|
-
|
|
|
margin-left: 10%;
|
|
|
-
|
|
|
bottom: 50rpx;
|
|
|
-
|
|
|
|
|
|
-
|
|
|
*/
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
.arrow{
|
|
|
-
|
|
|
margin-right: 15rpx;
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
.card_item{
|
|
|
-
|
|
|
display: flex;
|
|
|
-
|
|
|
flex-direction: row;
|
|
|
-
|
|
|
justify-content: space-between;
|
|
|
-
|
|
|
margin-left: 20rpx;
|
|
|
-
|
|
|
margin-right: 20rpx;
|
|
|
-
|
|
|
margin-bottom: 10rpx;
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
.card_item2{
|
|
|
-
|
|
|
display: flex;
|
|
|
-
|
|
|
flex-direction: row;
|
|
|
-
|
|
|
margin-left: 20rpx;
|
|
|
-
|
|
|
margin-right: 20rpx;
|
|
|
-
|
|
|
margin-bottom: 10rpx;
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
.round{
|
|
|
-
|
|
|
border-radius:50rpx;
|
|
|
-
|
|
|
background-color: #00B962;
|
|
|
-
|
|
|
color: #ffffff;
|
|
|
-
|
|
|
text-align: center;
|
|
|
-
|
|
|
justify-content: center;
|
|
|
-
|
|
|
align-items: center;
|
|
|
-
|
|
|
width: 250rpx;
|
|
|
-
|
|
|
display: flex;
|
|
|
-
|
|
|
flex-direction: row;
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
.round2{
|
|
|
-
|
|
|
border-radius:50rpx;
|
|
|
-
|
|
|
background-color: #00B962;
|
|
|
-
|
|
|
color: #ffffff;
|
|
|
-
|
|
|
text-align: center;
|
|
|
-
|
|
|
justify-content: center;
|
|
|
-
|
|
|
align-items: center;
|
|
|
-
|
|
|
width:125rpx;
|
|
|
-
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
.swiper-item{
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
|
|
|
-
|
|
|
.list {
|
|
|
-
|
|
|
margin-left: 2px;
|
|
|
-
|
|
|
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
|
|
|
-
|
|
|
.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;
|
|
|
-
|
|
|
line-height: 20px;
|
|
|
-
|
|
|
border-radius: 50px;
|
|
|
-
|
|
|
background-color: #9d9fff;
|
|
|
-
|
|
|
color: rgba(255, 255, 255, 100);
|
|
|
-
|
|
|
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;
|
|
|
-
|
|
|
height: 16px;
|
|
|
-
|
|
|
line-height: 16px;
|
|
|
-
|
|
|
font-size: 16px;
|
|
|
-
|
|
|
margin-left: 4px;
|
|
|
-
|
|
|
color: #101010;
|
|
|
-
|
|
|
|
|
|
-
|
|
|
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
|
|
|
-
|
|
|
.fast-charge {
|
|
|
-
|
|
|
display: inline-block;
|
|
|
-
|
|
|
width: 44px;
|
|
|
-
|
|
|
height: 20px;
|
|
|
-
|
|
|
line-height: 20px;
|
|
|
-
|
|
|
border-radius: 50px;
|
|
|
-
|
|
|
background-color: #9d9fff;
|
|
|
-
|
|
|
color: rgba(255, 255, 255, 100);
|
|
|
-
|
|
|
font-size: 12px;
|
|
|
-
|
|
|
text-align: center;
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
|
|
|
-
|
|
|
.address {
|
|
|
-
|
|
|
margin-top: 8px;
|
|
|
-
|
|
|
line-height: 16px;
|
|
|
-
|
|
|
font-size: 11px;
|
|
|
-
|
|
|
color: rgba(119, 119, 119, 100);
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
|
|
|
-
|
|
|
.price {
|
|
|
-
|
|
|
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;
|
|
|
-
|
|
|
height: 52px;
|
|
|
-
|
|
|
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;
|
|
|
|
|
|
- .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>
|
|
|
+ }
|
|
|
+ .distance-font {
|
|
|
+ font-size: 16px
|
|
|
+ }
|
|
|
+</style>
|
zhengkaixin