找桩地图模式下拉列表框

pages/searchPile/searchPile.vue

@@ -3,10 +3,9 @@
 		<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;width: 160rpx;">
+						<uni-combox ref="city" :border="false" v-model="area" :candidates="cities" @updateModel='updateCity' @updateSelector="updateCitySelector"></uni-combox> 
+ 					</view>
 					<view style="margin-left: 20rpx;margin-right: 20rpx; flex:1" >
 						<u-search placeholder="搜索站点名称" v-model="keyword" :showAction="false"  @focus="navigate"></u-search></view>
 					<view style="margin-right: 20rpx;" v-show="viewMode" @click="listMode">
@@ -23,14 +22,23 @@
 				</view>
 
 				<view style="display: flex;flex-direction: row;width:100%; justify-content: space-between;align-items: center;">
+					<view style="margin-left:20rpx;width: 160rpx;">
+						<uni-combox ref="radius" style="width: 200rpx;" :border="false" v-model="radius" :candidates="radiuses"  @updateModel='updateRadius' @updateSelector="updateRadiusSelector"></uni-combox> 
+ 					</view>
+<!--					
 					<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">
+					-->
+					<view style="margin-left:20rpx;margin-right: 20rpx;flex:1">
+						<uni-combox ref="type" style="width: 200rpx;" :border="false" v-model="type" :candidates="types" @updateModel='updateType' @updateSelector="updateTypeSelector"></uni-combox> 
+ 					</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>-->
 					<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>
@@ -40,7 +48,7 @@
 			</view>
 		</u-navbar>
 		<view class="content" >
-			<view v-if="show" class="preference" :style="show ? 'z-index:1024;top:'+navBarHeight+'px;' : 'z-index:0'">
+			<view v-if="show" class="preference" :style="show ? 'z-index:1024;top:'+navBarHeight+'px;' : 'z-index:0'" style="width: 100%;">
 				<view class="preference_group">
 					<view class="preference_group_item"><label class="preference_label">距离我</label></view>
 					<view>
@@ -164,7 +172,7 @@
 			</view>
 			<view v-show="viewMode" >					
 				<view>
-					<Chargermap   @onMoveEnd="moveEnd" ref="amap" @onClicked="onClicked" @onload="mapdown" @clickMap="clickMap"></Chargermap>
+					<Chargermap @onMoveStart="moveStart"   @onMoveEnd="moveEnd" ref="amap" @onClicked="onClicked" @onload="mapdown" @clickMap="clickMap"></Chargermap>
 					<!--@location="location"-->
 					<u-image style='position:absolute;z-index:1023;right:20px;bottom:260px;' src="@/static/img/location.png" width="30px" height="30px" @click="setCenter"></u-image>
 					 
@@ -247,18 +255,31 @@ import * as api from '@/apis/site.js';
 import Chargermap from '@/components/Chargermap.vue';
 import DoubleSlider from '@/components/double-slider/DoubleSlider.vue';
 import Tabbar from '@/components/Tabbar.vue';
+import uniCombox from '@/components/uni-combox/components/uni-combox/uni-combox.vue'
 import * as WxJsApi from '@/utils/wxJsApi.js'
 import MapLoader from '@/utils/AMap'
- 
+//import xflSelect from '@/components/xfl-select/xfl-select.vue'
+
 let _self;
 export default {
 	components: {
 		Chargermap,
 		DoubleSlider,
 		Tabbar, 
+		uniCombox,
+	//	xflSelect
 	},
 	data() {
-		return {
+		return { 
+			showCity:false,
+			showType:false,
+			showRadius:false,
+			cities: [ '荆州市'], 			
+			radiuses:['1公里','2公里','5公里','10公里','20公里','50公里','100公里','200公里'],
+			types:['交流快充','直流慢充'],			
+			area: '荆州市',
+			radius:'',
+			type:'',
 			centerImg:'@/static/img/location.png',
 			currentIndex:-1,
 			navBarHeight:88,
@@ -275,7 +296,6 @@ export default {
 			nearbyStationInfo: {
 				nearbyShiftDTOList: []
 			},
-			area: '荆州市',
 			action: '筛选',
 			preference: {
 				miles_index: 3,
@@ -339,6 +359,17 @@ export default {
 			 this.preference = preference;
 			console.log('preference'+JSON.stringify(preference))
 		 }
+		 this.types = [];
+		 for(let i = 0;i< this.info.obc_type.length;i++){
+			 this.types.push(this.info.obc_type[i].text);
+		 }
+		 this.radiuses = [];
+		 for(let i = 0;i< this.info.miles_type.length;i++){
+			 this.radiuses.push(this.info.miles_type[i].text);
+		 }
+		 this.type = this.info.obc_type[this.preference.obc_type_index].text;
+		 this.radius = this.info.miles_type[this.preference.miles_index].text;
+		 
 		 WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
 		 	// console.log(res)
 		 }).catch(error => {
@@ -367,6 +398,43 @@ export default {
 		this.end();
 	},
 	methods: {
+		updateCitySelector(){
+			console.log('updateCitySelector');
+			this.$refs.type.closeSelector();
+			this.$refs.radius.closeSelector();
+			//this.$refs.city.closeSelector();
+			this.show = false;	
+			
+		},
+		updateTypeSelector(){
+			console.log('updateTypeSelector');
+			//this.$refs.type.closeSelector();
+			this.$refs.radius.closeSelector();
+			this.$refs.city.closeSelector();
+			this.show = false;	
+			
+		},
+		updateRadiusSelector(){
+			console.log('updateRadiusSelector');
+			this.$refs.type.closeSelector();
+			//this.$refs.radius.closeSelector();
+			this.$refs.city.closeSelector();
+			this.show = false;	
+			
+		},
+		updateCity(e){
+			this.close();
+		},
+		updateRadius(e){
+			this.preference.miles_index = e.value;
+			this.close();
+			console.log('updateRadius'+JSON.stringify(e))
+		},
+		updateType(e){
+			this.preference.obc_type_index = e.value;
+			this.close();
+			console.log('updateType'+JSON.stringify(e))
+		},
 		setCenter(){
 			console.log('getPoint')
 			WxJsApi.getLocation().then((res) => {
@@ -420,7 +488,7 @@ export default {
 		},		
 		getPoint() {
 			 
-			console.log('getPoint')
+//			console.log('getPoint')
 			WxJsApi.getLocation().then((res) => {
 				
 				var latitude = parseFloat(res.latitude);
@@ -524,7 +592,7 @@ export default {
 			if(this.preference.obc_power.maxValue!=null)
 				data1.powerEnd = this.preference.obc_power.maxValue.toString();
 			
-			console.log('data1'+JSON.stringify(data1))
+//			console.log('data1'+JSON.stringify(data1))
 			api.getChargingStationData(data1).then(function(res){
 				
 				if(!res.result || !res.data || !res.data.data)
@@ -559,6 +627,10 @@ export default {
 							obj.id = items[i].id;
 						else
 							continue;
+						if(items[i].type.indexOf("1")>=0 && items[i].type.indexOf("2")>=0)
+						{
+							obj.type = '快/慢'
+						}
 						if(items[i].name!=null)
 							obj.name = items[i].name;
 						if(items[i].address!=null)
@@ -603,7 +675,7 @@ export default {
 				}else if(data1.findType == "1")
 				{
 					_self.stationslist = [];
-					console.log('getChargingStationData res2'+JSON.stringify(res));
+	//				console.log('getChargingStationData res2'+JSON.stringify(res));
 					for(let i = 0;i<items.length;i++)
 					{
 						
@@ -625,6 +697,10 @@ export default {
 								obj.id = items[i].id;
 							else
 								continue;
+							if(items[i].type.indexOf("1")>=0 && items[i].type.indexOf("2")>=0)
+							{
+								obj.type = '快/慢'
+							}
 							if(items[i].name!=null)
 								obj.name = items[i].name;
 							if(items[i].address!=null)
@@ -651,7 +727,7 @@ export default {
 					}
 					_self.$refs.amap.searchBtn([_self.longitude, _self.latitude],_self.stationslist)
 					
-					console.log(' getChargingStationData stations'+JSON.stringify(_self.stationslist))
+	//				console.log(' getChargingStationData stations'+JSON.stringify(_self.stationslist))
 					 
 				}
 			},function(err){
@@ -682,10 +758,14 @@ export default {
 			
 		},	*/	
 		moveEnd(e){
+			this.close_all();
 			console.log('moveEnd'+JSON.stringify(e))			
 			let data = {latitude:e.center.lat,longtitude:e.center.lng};
 			this.getChargingStationData(data);
 		},
+		moveStart(e){
+			this.close_all();
+		},
 		clickTabItem (index) {
 			
 			this.currentIndex = index
@@ -714,9 +794,11 @@ export default {
 			// console.log(e)
 		},
 		listMode() {
+			this.close_all();
 			this.viewMode = false
 		},
 		mapMode() {
+			this.close_all();
 			this.viewMode = true
 		},
 		radioChange(e) {
@@ -759,8 +841,16 @@ export default {
 			//			this.$refs.obc_voltage.currentMaxValue = this.preference.obc_power[1];
 			// 			console.log('reset')
 		},
+		close_all(){
+			this.$refs.type.closeSelector();
+			this.$refs.radius.closeSelector();
+			this.$refs.city.closeSelector();
+			this.show = false;			
+		},
 		open() {
-			
+			this.$refs.type.closeSelector();
+			this.$refs.radius.closeSelector();
+			this.$refs.city.closeSelector();
 			this.show = !this.show;
 			//this.$refs.obc_voltage.currentMinValue = this.preference.obc_power[0];
 			//this.$refs.obc_voltage.currentMaxValue = this.preference.obc_power[1];
@@ -768,8 +858,11 @@ export default {
 		},
 		close() {
 			console.log('偏好设置' + JSON.stringify(this.preference));
-			this.show = false;
+			this.close_all();
+//			this.show = false;
 			let data = {latitude:this.latitude,longtitude:this.longitude};	
+			this.type = this.info.obc_type[this.preference.obc_type_index].text;
+			this.radius  = this.info.miles_type[this.preference.miles_index].text;
 			if(this.preference.save_preference)
 				this.carhelp.set('preference',this.preference)  
 			
@@ -777,8 +870,8 @@ export default {
 			// console.log('close');
 		},
 		onClicked(e){
-			this.show=false;
-			console.log('e'+JSON.stringify(e))
+			this.close_all();
+			//console.log('onClicked e'+JSON.stringify(e))
 		},
 		// 获取当前位置
 		clickMap(obj) {