|
|
@@ -16,11 +16,11 @@
|
|
|
<p v-else >暂无充电站</p>
|
|
|
<p><span style="color: #1677ff;" @click="getPoint()">重新定位？</span></p>
|
|
|
</view>
|
|
|
- <view class="chargeHead" v-if="stationList.length" >已为您查询附近2公里内的充电站</view>
|
|
|
+ <view class="chargeHead" v-if="stationList.length" >已为您查询附近2公里的充电站</view>
|
|
|
|
|
|
<template v-for="(item,i) in stationList">
|
|
|
|
|
|
- <view class="chargeList-item " @click="stationIdSelect=item.id,stationShow=false,getList()" :class="{
|
|
|
+ <view class="chargeList-item " @click="selectStationBtn(item)" :class="{
|
|
|
|
|
|
}" :key="i">
|
|
|
|
|
|
@@ -30,12 +30,7 @@
|
|
|
<p>名称</p>
|
|
|
<span> {{item.name}}</span>
|
|
|
</view>
|
|
|
- <view class="chargeList-item-row" v-if="false">
|
|
|
- <u-icon name="shoujichongdian" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>
|
|
|
- <p>空闲</p>
|
|
|
- <span>{{item.availableNumOfChannel}}</span>
|
|
|
-
|
|
|
- </view>
|
|
|
+
|
|
|
<!-- <view class="chargeList-item-row">
|
|
|
<u-icon name="juli" custom-prefix="custom-icon" color="#1677ff" size="40"></u-icon>
|
|
|
<p>位置</p>
|
|
|
@@ -48,7 +43,10 @@
|
|
|
<span>{{item.address}}</span>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </template>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <u-divider bg-color="#F2F4F4" v-if="recordsTotal&&stationList.length==recordsTotal" border-color="#CFD2D5">已经到底了</u-divider>
|
|
|
+
|
|
|
|
|
|
</view>
|
|
|
|
|
|
@@ -60,7 +58,9 @@
|
|
|
<p><span style="color: #1677ff;" @click="getPoint()">查询附近站点</span></p>
|
|
|
</view>
|
|
|
|
|
|
- <view class="chargeHead" v-if="list.length" >{{stationName}}<span @click="getPoint()">查询附近站点</span></view>
|
|
|
+ <view class="chargeHead2" v-if="list.length" >
|
|
|
+ <view>{{stationName}}</view>
|
|
|
+ <view class="chargeHead2span" @click="getPoint()">查询附近站点</view></view>
|
|
|
|
|
|
<template v-for="(item,i) in list">
|
|
|
<view class="chargeList-item " @click="select=item.id,selectBtn()" :class="{
|
|
|
@@ -92,7 +92,14 @@
|
|
|
<span>荆鹏软件园1号充电桩</span>
|
|
|
</view> -->
|
|
|
</view>
|
|
|
- </template>
|
|
|
+ </template>
|
|
|
+ <view style="
|
|
|
+ display: flex;
|
|
|
+" >
|
|
|
+ <u-button type="success" size="medium" @click="navigate" v-if="selectStation.id&&selectStation.latitude&&selectStation.longitude" >点击查看地图导航</u-button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -112,13 +119,16 @@
|
|
|
stationIdSelect: '',
|
|
|
stationShow: false,
|
|
|
select: '',
|
|
|
- selectBtnId: '',
|
|
|
+ selectBtnId: '',
|
|
|
+ selectStation:{},
|
|
|
index: false,
|
|
|
stationName:'',
|
|
|
isReady:false,
|
|
|
isPoint:true,
|
|
|
longitude: 0,
|
|
|
- latitude: 0,
|
|
|
+ latitude: 0,
|
|
|
+ pageIndex: 1,
|
|
|
+ recordsTotal: 0,
|
|
|
}
|
|
|
},
|
|
|
onLoad(op) {
|
|
|
@@ -133,15 +143,54 @@
|
|
|
if (op.index) {
|
|
|
this.index = true;
|
|
|
}
|
|
|
- WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
|
|
|
+ WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode', 'openLocation']).then((res) => {
|
|
|
// //(res)
|
|
|
this.isReady=true;
|
|
|
|
|
|
}).catch(error => {
|
|
|
//(res)
|
|
|
})
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if (this.stationList.length < this.recordsTotal) {
|
|
|
+ this.myLoadmore();
|
|
|
+ }
|
|
|
},
|
|
|
- methods: {
|
|
|
+ methods: {
|
|
|
+ navigate() {
|
|
|
+ // x
|
|
|
+ // :
|
|
|
+ // "112.276527"
|
|
|
+ // y
|
|
|
+ // :
|
|
|
+ // "30.306427"
|
|
|
+ //console.log(item)
|
|
|
+ uni.showLoading({
|
|
|
+
|
|
|
+ })
|
|
|
+ WxJsApi.openLocation({
|
|
|
+ latitude: this.selectStation.latitude, //目的地latitude
|
|
|
+ longitude: this.selectStation.longitude, //目的地longitude
|
|
|
+ name: this.selectStation.name,
|
|
|
+ address: this.selectStation.address,
|
|
|
+ scale: 15, //地图缩放大小，可根据情况具体调整
|
|
|
+ success(res) {
|
|
|
+ uni.hideLoading()
|
|
|
+ },
|
|
|
+ complete() {
|
|
|
+ // uni.hideLoading()
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // //('station'+JSON.stringify(_self.stationDetail.station))
|
|
|
+ // window.location.href = "https://uri.amap.com/marker?position=" + _self.stationDetail.station.longitude +
|
|
|
+ // "," + _self.stationDetail.station.latitude + "&name=" + _self.stationDetail.station.name;
|
|
|
+
|
|
|
+ },
|
|
|
+ myLoadmore() {
|
|
|
+
|
|
|
+ this.pageIndex += 1;
|
|
|
+ this.searchStationData()
|
|
|
+ },
|
|
|
getPoint() {
|
|
|
uni.showToast({
|
|
|
title: "定位中...请打开定位设置",
|
|
|
@@ -168,7 +217,11 @@
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
- searchStationData(){
|
|
|
+ searchStationData(bl){
|
|
|
+ if (bl) {
|
|
|
+ this.stationList = [];
|
|
|
+ this.pageIndex = 1;
|
|
|
+ }
|
|
|
uni.showLoading({
|
|
|
title: "加载中",
|
|
|
mask: true,
|
|
|
@@ -176,13 +229,22 @@
|
|
|
|
|
|
var data={
|
|
|
longitude: this.longitude,
|
|
|
- latitude: this.latitude,
|
|
|
- pageSize:50,
|
|
|
- raidus:2,
|
|
|
+ latitude: this.latitude,
|
|
|
+ pageIndex:this.pageIndex,
|
|
|
+ pageSize:20,
|
|
|
+ radius:2,
|
|
|
}
|
|
|
API.chargingStationData(data).then((res) => {
|
|
|
- this.stationList = res.data.data;
|
|
|
- this.stationShow = true;
|
|
|
+ //this.stationList = res.data.data;
|
|
|
+
|
|
|
+ this.stationList = [
|
|
|
+ ...this.stationList,
|
|
|
+ ...res.data.data
|
|
|
+ ];
|
|
|
+
|
|
|
+ this.stationShow = true;
|
|
|
+ this.recordsTotal = res.data.recordsTotal
|
|
|
+
|
|
|
uni.hideLoading()
|
|
|
|
|
|
}).catch(error => {
|
|
|
@@ -194,10 +256,10 @@
|
|
|
},
|
|
|
customBack() {
|
|
|
|
|
|
- if(this.stationShow&&this.stationId){
|
|
|
+ if(this.stationShow){
|
|
|
try{
|
|
|
this.stationShow=false
|
|
|
- this.stationIdSelect=stationId
|
|
|
+ //this.stationIdSelect=this.stationId
|
|
|
this.getList()
|
|
|
}catch(e){
|
|
|
//TODO handle the exception
|
|
|
@@ -212,6 +274,12 @@
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+ },
|
|
|
+ selectStationBtn(item){
|
|
|
+ this.stationIdSelect=item.id
|
|
|
+ this.stationShow=false
|
|
|
+ this.selectStation=item
|
|
|
+ this.getList()
|
|
|
},
|
|
|
selectBtn() {
|
|
|
this.selectBtnId = this.select;
|
|
|
@@ -229,7 +297,8 @@
|
|
|
})
|
|
|
|
|
|
var data = {
|
|
|
- //deviceId: this.select,
|
|
|
+ //deviceId: this.select,
|
|
|
+ pageIndex:this.pageIndex,
|
|
|
stationId: this.stationIdSelect,
|
|
|
pageSize: 50,
|
|
|
};
|
|
|
@@ -239,7 +308,6 @@
|
|
|
if(this.list.length){
|
|
|
this.stationName=this.list[0].stationName
|
|
|
}
|
|
|
- this.recordsTotal = res.data.recordsTotal
|
|
|
uni.hideLoading()
|
|
|
|
|
|
}).catch(error => {
|
|
|
@@ -288,6 +356,18 @@
|
|
|
float: right;
|
|
|
color: #1677ff;
|
|
|
}
|
|
|
+ }
|
|
|
+ .chargeHead2{
|
|
|
+ padding:0 15px ;
|
|
|
+ margin-top: 10px;
|
|
|
+ justify-content: space-between;
|
|
|
+ display: flex;
|
|
|
+ .chargeHead2span{
|
|
|
+ float: right;
|
|
|
+ white-space: pre;
|
|
|
+ color: #1677ff;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.chargeList-item {
|
|
|
@@ -306,7 +386,8 @@
|
|
|
}
|
|
|
|
|
|
p {
|
|
|
- color: #999;
|
|
|
+ color: #999;
|
|
|
+ white-space: pre;
|
|
|
margin: 0 10px;
|
|
|
}
|
|
|
}
|
zhengkaixin