|
|
@@ -6,7 +6,40 @@
|
|
|
<view class="navbar-left"></view>
|
|
|
<view class="navbar-right" @click="selectBtn"><span>确定选择</span></view>
|
|
|
</view> -->
|
|
|
- </ujp-navbar>
|
|
|
+ </ujp-navbar>
|
|
|
+
|
|
|
+ <u-select ref="refselect" title="" v-model="tabsFrom.show1" :defaultValue="current"
|
|
|
+
|
|
|
+ :list="selectList" value-name="id" label-name="name"
|
|
|
+
|
|
|
+ @confirm="selector1confirm" >
|
|
|
+ </u-select>
|
|
|
+ <view class="head-head" style="background: #fff;">
|
|
|
+ <view style="
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ " >
|
|
|
+ <view style="width: 30%;" @click="tabsFrom.show1=true">
|
|
|
+ {{tabsFrom.show1Text}} <u-icon name="arrow-down" color="#999999"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view style="width: 70%;">
|
|
|
+ <u-search placeholder="搜索站点名称或地址" :show-action="false"
|
|
|
+
|
|
|
+ @change="searchStationData(1)" @search="searchStationData(1)" @click="searchStationData(1)"
|
|
|
+ @custom='searchStationData(1)'
|
|
|
+ v-model="keyword"></u-search>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="head-head-placeholder ">
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
|
|
|
<view class="chargeListStation" v-show="stationShow">
|
|
|
<view style="text-align: center;margin-top: 100px" v-if="!stationList.length">
|
|
|
@@ -16,11 +49,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" >已为您查询附近的充电站</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 +63,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 +76,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 +91,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 +125,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 +152,35 @@
|
|
|
stationIdSelect: '',
|
|
|
stationShow: false,
|
|
|
select: '',
|
|
|
- selectBtnId: '',
|
|
|
+ selectBtnId: '',
|
|
|
+ selectStation:{},
|
|
|
index: false,
|
|
|
stationName:'',
|
|
|
isReady:false,
|
|
|
isPoint:true,
|
|
|
longitude: 0,
|
|
|
- latitude: 0,
|
|
|
+ latitude: 0,
|
|
|
+ pageIndex: 1,
|
|
|
+ recordsTotal: 0,
|
|
|
+ keyword:"",
|
|
|
+ selectList:[
|
|
|
+ {id:0,name:"全部"},
|
|
|
+ {id:2,name:"附近2公里"},
|
|
|
+ {id:5,name:"附近5公里"},
|
|
|
+ {id:10,name:"附近10公里"},
|
|
|
+ {id:20,name:"附近20公里"},
|
|
|
+ {id:50,name:"附近50公里"},
|
|
|
+ ],
|
|
|
+ current:[1],
|
|
|
+ tabsFrom: {
|
|
|
+ show1: false,
|
|
|
+ show1Index: 2,
|
|
|
+ show2Index: '',
|
|
|
+ show2: false,
|
|
|
+ show1Text: "附近2公里",
|
|
|
+ show2Text: "全部时间",
|
|
|
+
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
onLoad(op) {
|
|
|
@@ -133,15 +195,68 @@
|
|
|
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: {
|
|
|
+ selector1confirm(e){
|
|
|
+ console.log(e)
|
|
|
+ var value = e[0].value
|
|
|
+ var index=this.selectList.findIndex(item=>{
|
|
|
+ return item.id==value
|
|
|
+ })
|
|
|
+ this.current=[index]
|
|
|
+
|
|
|
+ this.tabsFrom.show1Index=e[0].value
|
|
|
+
|
|
|
+ this.tabsFrom.show1Text=e[0].label
|
|
|
+ this.searchStationData(1)
|
|
|
+
|
|
|
+ },
|
|
|
+ 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 +283,11 @@
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
- searchStationData(){
|
|
|
+ searchStationData(bl){
|
|
|
+ if (bl) {
|
|
|
+ this.stationList = [];
|
|
|
+ this.pageIndex = 1;
|
|
|
+ }
|
|
|
uni.showLoading({
|
|
|
title: "加载中",
|
|
|
mask: true,
|
|
|
@@ -176,13 +295,26 @@
|
|
|
|
|
|
var data={
|
|
|
longitude: this.longitude,
|
|
|
- latitude: this.latitude,
|
|
|
- pageSize:50,
|
|
|
- raidus:2,
|
|
|
+ latitude: this.latitude,
|
|
|
+ pageIndex:this.pageIndex,
|
|
|
+ pageSize:20,
|
|
|
+ stationName:this.keyword
|
|
|
+
|
|
|
+ }
|
|
|
+ if(this.tabsFrom.show1Index){
|
|
|
+ data.radius=this.tabsFrom.show1Index
|
|
|
}
|
|
|
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,16 +326,30 @@
|
|
|
},
|
|
|
customBack() {
|
|
|
|
|
|
- if(this.stationShow&&this.stationId){
|
|
|
- this.stationShow=false
|
|
|
- this.stationIdSelect=stationId
|
|
|
- this.getList()
|
|
|
+ if(this.stationShow){
|
|
|
+ try{
|
|
|
+ this.stationShow=false
|
|
|
+ //this.stationIdSelect=this.stationId
|
|
|
+ this.getList()
|
|
|
+ }catch(e){
|
|
|
+ //TODO handle the exception
|
|
|
+ uni.redirectTo({
|
|
|
+ url: '/pages/charge/index'
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
}else{
|
|
|
uni.redirectTo({
|
|
|
url: '/pages/charge/index'
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+ },
|
|
|
+ selectStationBtn(item){
|
|
|
+ this.stationIdSelect=item.id
|
|
|
+ this.stationShow=false
|
|
|
+ this.selectStation=item
|
|
|
+ this.getList()
|
|
|
},
|
|
|
selectBtn() {
|
|
|
this.selectBtnId = this.select;
|
|
|
@@ -221,7 +367,8 @@
|
|
|
})
|
|
|
|
|
|
var data = {
|
|
|
- //deviceId: this.select,
|
|
|
+ //deviceId: this.select,
|
|
|
+ pageIndex:this.pageIndex,
|
|
|
stationId: this.stationIdSelect,
|
|
|
pageSize: 50,
|
|
|
};
|
|
|
@@ -231,7 +378,6 @@
|
|
|
if(this.list.length){
|
|
|
this.stationName=this.list[0].stationName
|
|
|
}
|
|
|
- this.recordsTotal = res.data.recordsTotal
|
|
|
uni.hideLoading()
|
|
|
|
|
|
}).catch(error => {
|
|
|
@@ -280,6 +426,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 {
|
|
|
@@ -298,7 +456,8 @@
|
|
|
}
|
|
|
|
|
|
p {
|
|
|
- color: #999;
|
|
|
+ color: #999;
|
|
|
+ white-space: pre;
|
|
|
margin: 0 10px;
|
|
|
}
|
|
|
}
|
|
|
@@ -306,5 +465,40 @@
|
|
|
|
|
|
.chargeList-item.active {
|
|
|
border: 1px solid #1677ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .head-head-placeholder{
|
|
|
+ height: 100rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ .head-head{
|
|
|
+ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
|
|
|
+ padding:24rpx;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 80rpx;
|
|
|
+ z-index: 991;
|
|
|
+ .head-body{
|
|
|
+ margin-top: 32rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ .head-btn{
|
|
|
+ text-align: center;
|
|
|
+ width: 31%;
|
|
|
+ padding: 12rpx;
|
|
|
+ border: 1px solid #f2f2f2;
|
|
|
+ background-color:#f2f2f2 ;
|
|
|
+ border-radius: 6px;
|
|
|
+ span{
|
|
|
+ margin-left: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .head-select{
|
|
|
+ border: 1px solid #1677FF;
|
|
|
+ background-color:#1677FF ;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
zkx