|
|
@@ -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,7 +49,7 @@
|
|
|
<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">
|
|
|
|
|
|
@@ -128,7 +161,26 @@
|
|
|
longitude: 0,
|
|
|
latitude: 0,
|
|
|
pageIndex: 1,
|
|
|
- recordsTotal: 0,
|
|
|
+ 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) {
|
|
|
@@ -157,6 +209,20 @@
|
|
|
}
|
|
|
},
|
|
|
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
|
|
|
// :
|
|
|
@@ -231,8 +297,12 @@
|
|
|
longitude: this.longitude,
|
|
|
latitude: this.latitude,
|
|
|
pageIndex:this.pageIndex,
|
|
|
- pageSize:20,
|
|
|
- radius:2,
|
|
|
+ pageSize:20,
|
|
|
+ stationName:this.keyword
|
|
|
+
|
|
|
+ }
|
|
|
+ if(this.tabsFrom.show1Index){
|
|
|
+ data.radius=this.tabsFrom.show1Index
|
|
|
}
|
|
|
API.chargingStationData(data).then((res) => {
|
|
|
//this.stationList = res.data.data;
|
|
|
@@ -395,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>
|
zhengkaixin