站点详情

components/Chargermap.vue

@@ -326,7 +326,7 @@
 					});
 					 
 					var clickHandler = function(e) {
-					  alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
+						console.log('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
 					};
 					_this.mapcharger.on('click', clickHandler); 
 					_this.$emit('onload')

pages/search/search.vue

@@ -2,7 +2,7 @@
 <template>
 	<view>
 		<u-navbar title="">
-			<u-search class="search" placeholder="搜索站点名称" v-model="keyword" color="#c8c8c8"></u-search>
+			<u-search class="search" placeholder="搜索站点名称" v-model="keyword" color="#c8c8c8" @search="search" @click="search" @clickicon='back' @custom='search'></u-search>
 		</u-navbar>
 		<view class="recommend">推荐充电站</view>
 		<view class="charing-slow" v-for="(item,index) in stations" :key="item.id">
@@ -36,7 +36,9 @@
 	export default {
 		
 		data() {
+			
 			return {
+				keyword:'',
 			  stations:[
 					{name:'荆鹏软件园充电站',position:'湖北省荆州市沙市区江津东路附155号',price:1.2,idleNum:10,total:10,distance:0.1,time:1,type:'慢充',park:'2小时免费停车'},
 					{name:'荆鹏软件园充电站2',position:'湖北省荆州市沙市区江津东路附156号',price:1.2,idleNum:10,total:10,distance:0.15,time:12,type:'快充',park:'3小时免费停车'},
@@ -48,7 +50,15 @@
 		},
 		 // conponents:{charingSlows},
 		methods: {
-
+			back(){
+				console.log('back');
+				uni.navigateBack({
+					delta:1
+				})
+			},
+			search(){
+				console.log('search ' + this.keyword);
+			}
 		}
 	}
 </script>

pages/searchPile/stationAndPile/stationDetails.vue

@@ -4,27 +4,27 @@
 		<!-- 站点信息 -->
 		<view class="station-details">
 			<view class="station-name">
-				荆鹏软件园充电站
+				{{info.station.name}}
 			</view>
 			<view class="details-item" style="margin-top: 22px;">
 				<text class="iconfont" style="color: #00b962;font-size: 20px;">&#xe60a;</text> <text
-					class="item-text">交流慢充</text>
+					class="item-text">{{info.station.type}}</text>
 			</view>
 			<view class="details-item">
 				<text class="iconfont" style="color: #4e94ff;font-size: 20px;"">&#xe60e;</text> <text class="
-					item-text">0.1公里</text>
+					item-text">{{info.station.distance}}公里</text>
 			</view>
 			<view class="details-item">
 				<text class="iconfont" style="color: #ffad79;font-size: 20px;"">&#xe621;</text> <text class="
-					item-text"> 周一到周日 07:00~22:00 (节假日除外)</text>
+					item-text"> {{info.station.time}}</text>
 
 			</view>
 			<view class="station-address">
 				<img src="/static/img/Frame 201.png" alt="">
-				<view class="address-text">
-					湖北省荆州市沙市区江津东路附155号
+				<view class="address-text" >
+					{{info.station.address}}
 				</view>
-				<view class="iconfont address-font">
+				<view class="iconfont address-font" @click="map">
 					&#xe60c;
 				</view>
 			</view>
@@ -33,16 +33,16 @@
 		<view class="price-details">
 			<view class="detail-title">
 				<view class="title-left">价格详情</view>
-				<view class="title-right">
+				<view class="title-right" @click="priceDetail">
 					<view class="right-text">价格详情 </view>
 					<view class="iconfont right-font">&#xe600;</view>
 				</view>
 			</view>
-			<view class="price-item">
-				<view class="text1">慢充</view>
-				<view class="text2">1.20</view>
+			<view class="price-item" v-for="(item,index) in info.prices">
+				<view :class="item.name=='慢充'?'text1':'text5'">{{item.name}}</view>
+				<view class="text2">{{item.price}}</view>
 				<view class="text3">起 元/度</view>
-				<view class="text4">00:00:00 ~ 23:59:59</view>
+				<view class="text4">{{item.time}}</view>
 			</view>
 			<view class="park-item">
 				<view class="text-box">
@@ -50,7 +50,7 @@
 						停车
 					</view>
 					<view class="text2">
-						免费
+						{{info.park.price}}
 					</view>
 				</view>
 				<view class="text3">
@@ -65,146 +65,147 @@
 				设备详情
 			</view>
 			<view class="title-right">
-				<text class="free">空闲1/</text>
-				<text>总数6</text>
+				<text class="free">空闲{{info.devices.idleNum}}/</text>
+				<text>总数{{info.devices.total}}</text>
 			
 			</view>
 		</view>
 		
-		<view class="equipment-item">
-			<view class="left-font iconfont">
+		<view class="equipment-item" v-for="(item,index) in info.devices.items" :key="index">
+			<view class="left-font iconfont" v-if="item.status =='空闲'">
 				&#xe60a;
 			</view>
-			<view class="name">
-				<view class="name-text">
-					1号桩
-				</view>
-				<view class="tag-free">
-					空闲
-				</view>
-			</view>
-			<view class="type">
-				2015国标 | 直流快充 | 120kW
-			</view>
-			<view class="charging-gun">
-				<view class="iconfont">
-					&#xe618;
-				</view>
-				<view class="gun-num">
-					充电枪01
-				</view>
-				<view class="free-state">
-					空闲
-				</view>
-			</view>
-			<view class="charging-gun">
-				<view class="iconfont">
-					&#xe618;
-				</view>
-				<view class="gun-num">
-					充电枪02
-				</view>
-				<view class="recharge-state">
-					充电中 SOC 86.0%
-				</view>
-			</view>
-			
-		
-			
-		</view>
-		<view class="equipment-item">
-			<view class="left-font iconfont" style="color:#ff6200">
-				&#xe60a;
-			</view>
-			<view class="name">
-				<view class="name-text">
-					2号桩
-				</view>
-				<view class="tag-recharge">
-					充电中
-				</view>
-			</view>
-			<view class="type">
-				2015国标 | 直流快充 | 120kW
-			</view>
-			<view class="charging-gun">
-				<view class="iconfont">
-					&#xe618;
-				</view>
-				<view class="gun-num">
-					充电枪01
-				</view>
-				<view class="free-state">
-					空闲
-				</view>
-			</view>
-			<view class="charging-gun">
-				<view class="iconfont">
-					&#xe618;
-				</view>
-				<view class="gun-num">
-					充电枪02
-				</view>
-				<view class="recharge-state">
-					充电中 SOC 86.0%
-				</view>
-			</view>
-			
-		
-			
-		</view>
-		<view class="equipment-item" style="border: none;padding: 0;" >
-			<view class="left-font iconfont" style="color:#ff6200">
+			<view class="left-font iconfont" style="color:#ff6200" v-else>
 				&#xe60a;
 			</view>
 			<view class="name">
 				<view class="name-text">
-					3号桩
+					{{item.name}}
 				</view>
-				<view class="tag-recharge">
-					充电中
+				<view :class="item.status == '空闲'?'tag-free':'tag-recharge'">
+					{{item.status}}
 				</view>
 			</view>
 			<view class="type">
-				2015国标 | 直流快充 | 120kW
-			</view>
-			<view class="charging-gun">
-				<view class="iconfont">
-					&#xe618;
-				</view>
-				<view class="gun-num">
-					充电枪01
-				</view>
-				<view class="free-state">
-					空闲
-				</view>
+				{{item.description}}
 			</view>
-			<view class="charging-gun">
+			<view class="charging-gun" v-for="(item1,index1) in item.plugs" >
 				<view class="iconfont">
 					&#xe618;
 				</view>
 				<view class="gun-num">
-					充电枪02
+					{{item1.name}}
 				</view>
-				<view class="recharge-state">
-					充电中 SOC 86.0%
+				<view :class="item1.status == '空闲'?'free-state':'recharge-state'">
+					{{item1.status == '空闲'?item1.status: item1.status + ' ' + item1.soc}}
 				</view>
-			</view>
-			
-		
-			
-		</view>
+			</view>			
+		</view> 
 		
 	</view>
 	<!-- 底部 -->
 	<view class="bottom">
-		<u-button class="button1" shape="circle" size="medium">扫码充电</u-button>
-		<u-button class="button2" shape="circle" size="medium">导航</u-button>
+		<u-button class="button1" shape="circle" size="medium" @click="charge">扫码充电</u-button>
+		<u-button class="button2" shape="circle" size="medium" @click="navigation">导航</u-button>
 	</view>
 	</view>
 </template>
 
 <script>
+	let _self;
+	export default {
+ 
+		data() {
+			return {
+				currentPos:{
+						name:'荆鹏软件园充电站',
+						longitude: 112.28468,
+						latitude: 30.307094,					
+				},
+				info:{
+					station:{
+						id:1,
+						name:'荆鹏软件园充电站',
+						longitude: 112.28468,
+						latitude: 30.307094,
+						type:'交流慢充',
+						distance:0.1,
+						time:'周一到周日 07:00~22:00(节假日除外)',
+						address:'湖北省荆州市沙市区江津东路附155号'
+					},
+					prices: [
+							{name:'慢充',price:1.20,time:'00:00:00 ~ 23:59.59'},
+							{name:'快充',price:1.20,time:'00:00:00 ~ 23:59.59'},
+						]	 ,
+					park:{ 
+						price:'免费'
+					},
+					
+					devices:{
+						idleNum:1,
+						total:6,
+						items:[
+							{name:'1号桩',status:'空闲',description:'2015国标|直流快充|120kW',plugs:[{name:'充电枪01',status:'空闲',soc:'SOC 86.0%'},{name:'充电枪02',status:'充电中',soc:'SOC 86.0%'}]},
+							{name:'2号桩',status:'充电中',description:'2015国标|直流快充|120kW',plugs:[{name:'充电枪01',status:'空闲',soc:'SOC 86.0%'},{name:'充电枪02',status:'充电中',soc:'SOC 86.0%'}]},
+							{name:'3号桩',status:'充电中',description:'2015国标|直流快充|120kW',plugs:[{name:'充电枪01',status:'空闲',soc:'SOC 86.0%'},{name:'充电枪02',status:'充电中',soc:'SOC 86.0%'}]}
+						]
+					}
+				}
+			}
+		},
+		onLoad(){
+			_self = this;
+		},
+		methods:{
+			navigation(){
+				var packageName = 'com.autonavi.minimap';
+				var main = plus.android.runtimeMainActivity();
+				var packageManager = main.getPackageManager();
+				var PackageManager = plus.android.importClass(packageManager)
+				var packageInfo = packageManager.getPackageInfo(packageName, PackageManager.GET_ACTIVITIES);
+				if (packageInfo) {
+					var Uri = plus.android.importClass("android.net.Uri");
+					var url = "androidamap://route?sourceApplication=amap" +
+						"&sid=A&slat="+this.info.latitude+"&slon="+this.currentPos.longitude+"&sname="+ this.currentPos.name +
+						"&did=B&dlat=" +this.info.latitude.toString()+ "&dlon="+ this.info.longitude+ "&dname="+ this.info.station.name+"&dev=0&t=1";
+					var Intent = plus.android.importClass('android.content.Intent');
+					var intent = new Intent();
+					intent.setAction(Intent.ACTION_VIEW);
+					intent.addCategory(Intent.CATEGORY_DEFAULT);
+					var uri = Uri.parse(url);
+					//将功能Scheme以URI的方式传入data  
+					intent.setData(uri);
+					intent.setPackage("com.autonavi.minimap");
+					var main = plus.android.runtimeMainActivity();
+					main.startActivity(intent);
+				} else {
+					uni.showToast({
+						title:'您暂时没有安装高德地图'
+					})
+				}
+			},
+			charge(){
+				uni.scanCode({
+					success:function(res){
+						uni.navigateTo({
+							url:'chargingPileDetails?pile='+encodeURIComponent(JSON.stringify(data))
+						})
+						
+					}
+				})
+			},
+			priceDetail(){
+				uni.navigateTo({
+					url:'chargePriceDetails?stationId='+_self.info.station.id
+				})
+			},
+			map(){
+				uni.navigateTo({
+					url:'stationDetailsMap'
+				})
+			}
+		}
+	}
 </script>
 
 <style lang="scss" scoped>
@@ -273,7 +274,6 @@
 	// 价格详情
 	.price-details {
 		width: 100%;
-		height: 145px;
 		margin-top: 12px;
 		background-color: #fff;
 		padding: 20px 15px 16px 16px;
@@ -331,6 +331,16 @@
 			font-size: 12px;
 			text-align: center;
 		}
+		.text5{
+			width: 44px;
+			height: 20px;
+			line-height: 20px;
+			border-radius: 50px;
+			background-color: #9d9fff;
+			color: rgba(255, 255, 255, 100);
+			font-size: 12px;
+			text-align: center;
+		}
 		.text2{
 			line-height: 19px;
 			margin-left: 8px;