|
@@ -68,7 +68,22 @@
|
|
|
<text class="iconfont park-font"></text></view>
|
|
|
|
|
|
</view>
|
|
|
- <view class="infos-item between " oldstyle="font-size: 16px;" @click="map">
|
|
|
+ <template v-if="stationDetail&&stationDetail.stationAddressList&&stationDetail.stationAddressList.length" >
|
|
|
+
|
|
|
+
|
|
|
+ <view class=" stationAddressListClass " v-for="(item ,i) in stationDetail.stationAddressList" :key="i" >
|
|
|
+ <view class="stationAddressListClassAddress">
|
|
|
+ <span class="areaTitleClass">{{item.areaTitle}}</span>
|
|
|
+ <span >{{item.address}}</span>
|
|
|
+ </view>
|
|
|
+ <view @click="map(item)" class="stationAddressListClassDistance" >
|
|
|
+ {{item.distance!=null&&item.distance>0.1 ? item.distance.toFixed(1)+'公里':'小于100米'}}
|
|
|
+ <text class="iconfont park-font"></text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </template >
|
|
|
+ <view class="infos-item between " v-else oldstyle="font-size: 16px;" @click="map">
|
|
|
|
|
|
<view class="position">
|
|
|
<view class="img-box"><img src="../../../assets/img/riLine-navigation-line.svg" alt=""></view>
|
|
@@ -322,9 +337,9 @@
|
|
|
<span style=" text-decoration: line-through;" v-if="station&&station.giveDiscount">{{((pricesInfoCurrent.servicePrice*1000+pricesInfoCurrent.electricityPrice*1000)/1000).toFixed(2)}}元/度</span></td>
|
|
|
|
|
|
</tr>
|
|
|
- <tr v-if="false&&stationDetail&&stationDetail.station&&stationDetail.station.address">
|
|
|
+ <tr v-if="item.device.deviceAddress">
|
|
|
<td colspan="2" >充电桩地址:
|
|
|
- <span style=" margin-left: 4px;" >{{stationDetail.station.address}}</span></td>
|
|
|
+ <span style=" margin-left: 4px;" >{{item.device.deviceAddress}}</span></td>
|
|
|
|
|
|
</tr>
|
|
|
<tr>
|
|
@@ -778,7 +793,7 @@
|
|
|
latitude: _self.stationDetail.station.latitude
|
|
|
};
|
|
|
_self.calculateDistance(startLngLat, endLngLat);
|
|
|
-
|
|
|
+ _self.calculateDistanceList(startLngLat)
|
|
|
/*uni.showToast({
|
|
|
title:'getPoint'+JSON.stringify(res)
|
|
|
})*/
|
|
@@ -796,6 +811,25 @@
|
|
|
// })
|
|
|
})
|
|
|
},
|
|
|
+ calculateDistanceList(startLngLat) {
|
|
|
+ if(_self.stationDetail&&_self.stationDetail.stationAddressList&&_self.stationDetail.stationAddressList.length){
|
|
|
+
|
|
|
+ }else{
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var list=_self.stationDetail.stationAddressList;
|
|
|
+ MapLoader().then(AMap1 => {
|
|
|
+ for(var i in list){
|
|
|
+ var endLngLat=list[i]
|
|
|
+ var lnglat = new AMap.LngLat(startLngLat.longitude, startLngLat.latitude);
|
|
|
+ var myDistance = lnglat.distance([endLngLat.longitude, endLngLat.latitude]);
|
|
|
+ endLngLat.distance = myDistance / 1000;
|
|
|
+ endLngLat.time = myDistance / 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
calculateDistance(startLngLat, endLngLat) {
|
|
|
var _this = this;
|
|
|
//直线距离
|
|
@@ -911,15 +945,23 @@
|
|
|
},
|
|
|
|
|
|
|
|
|
- navigate() {
|
|
|
+ navigate(item) {
|
|
|
+ if(item){
|
|
|
+ if(item.areaTitle){
|
|
|
+ item.name=item.areaTitle
|
|
|
+ }
|
|
|
+
|
|
|
+ }else{
|
|
|
+ item=_self.stationDetail.station
|
|
|
+ }
|
|
|
uni.showLoading({
|
|
|
|
|
|
})
|
|
|
WxJsApi.openLocation({
|
|
|
- latitude:parseFloat( _self.stationDetail.station.latitude),//目的地latitude
|
|
|
- longitude:parseFloat( _self.stationDetail.station.longitude),//目的地longitude
|
|
|
- name: _self.stationDetail.station.name,
|
|
|
- address: _self.stationDetail.station.address,
|
|
|
+ latitude:parseFloat(item.latitude),//目的地latitude
|
|
|
+ longitude:parseFloat(item.longitude),//目的地longitude
|
|
|
+ name: item.name,
|
|
|
+ address: item.address,
|
|
|
scale: 15,//地图缩放大小,可根据情况具体调整
|
|
|
success(res) {
|
|
|
uni.hideLoading()
|
|
@@ -959,7 +1001,7 @@
|
|
|
id
|
|
|
})
|
|
|
},
|
|
|
- map() {
|
|
|
+ map(item) {
|
|
|
this.navigate()
|
|
|
//var item= _self.stationDetail.station
|
|
|
//window.location.href="https://uri.amap.com/marker?position="+ item.longitude+","+item.latitude+"&name="+item.name;
|
|
@@ -986,7 +1028,42 @@
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .stationAddressListClass{
|
|
|
+ display: flex;
|
|
|
+ justify-content:space-between;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin-top: 2px;
|
|
|
+ .areaTitleClass{
|
|
|
+ padding: 2px 4px;
|
|
|
+ width: 36px;
|
|
|
+ height: 20px;
|
|
|
+ line-height: 12px;
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: rgba(0, 185, 98, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ font-family: Arial;
|
|
|
+ }
|
|
|
+ .stationAddressListClassAddress{
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .stationAddressListClassDistance{
|
|
|
+ min-width: 90px;
|
|
|
+ color:#00B962;
|
|
|
+ float: right;
|
|
|
+ width: 90px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
/deep/.u-swiper{
|
|
|
height: 36rpx;
|
|
|
}
|
|
@@ -1188,6 +1265,7 @@
|
|
|
}
|
|
|
|
|
|
.infos-item{
|
|
|
+ width: 100%;
|
|
|
display: flex;
|
|
|
padding: 16rpx 0;
|
|
|
align-items: center;
|