搜索

pages/search/search.vue

@@ -5,77 +5,29 @@
 			<u-search class="search" placeholder="搜索站点名称" v-model="keyword" color="#c8c8c8"></u-search>
 		</u-navbar>
 		<view class="recommend">推荐充电站</view>
-		<view class="charing-slow">
-			<text class="trickle-charge">慢充</text> <text class="station-items">荆鹏软件园充电站</text>
+		<view class="charing-slow" v-for="(item,index) in stations" :key="item.id">
+			<text :class="item.type == '慢充'? 'trickle-charge':'fast-charge'">{{item.type}}</text> <text class="station-items">{{item.name}}</text>
 			<view class="address">
-				湖北省荆州市沙市区江津东路附155号
+				{{item.position}}
 			</view>
 			<view class="price">
-				<view class="num">1.20</view> <view class="unit">
+				<view class="num">{{item.price}}</view> <view class="unit">
 					起 元/度
 				</view>
 			</view>
 			 <view class="park">
 				<text class="park-p">p</text>
-				<text class="park-text">2小时免费停车</text>
+				<text class="park-text">{{item.park}}</text>
 			</view>
 			<view class="free">
 				<view class="free-num">
-					  <text style="color:#009143;">空闲1</text>/总数5
+					  <text style="color:#009143;">空闲{{item.idleNum}}</text>/总数{{item.total}}
 				</view>
 				<view class="distance">
-					<text class="iconfont distance-font">&#xe615;</text>0.1公里 1分钟
+					<text class="iconfont distance-font">&#xe615;</text>{{item.distance}}公里 {{item.time}}分钟
 				</view>
 			</view>
-		</view>
-		<view class="charing-slow">
-			<text class="fast-charge">快充</text> <text class="station-items">荆沙大道救助站充电站</text>
-			<view class="address">
-				湖北省荆州市沙市区江津东路附155号
-			</view>
-			<view class="price">
-				<view class="num">1.25</view> <view class="unit">
-					起 元/度
-				</view>
-			</view>
-			 <view class="park">
-				<text class="park-p">p</text>
-				<text class="park-text">2小时免费停车</text>
-			</view>
-			<view class="free">
-				<view class="free-num">
-				  <text style="color:#009143;">空闲10</text>/总数10
-				</view>
-				<view class="distance">
-					<text class="iconfont distance-font">&#xe615;</text>1.2公里 3分钟
-				</view>
-			</view>
-		</view>
-		
-		<view class="charing-slow">
-			<text class="trickle-charge">慢充</text> <text class="station-items">荆鹏软件园充电站</text>
-			<view class="address">
-				湖北省荆州市沙市区江津东路附155号
-			</view>
-			<view class="price">
-				<view class="num">1.20</view> <view class="unit">
-					起 元/度
-				</view>
-			</view>
-			 <view class="park">
-				<text class="park-p">p</text>
-				<text class="park-text">2小时免费停车</text>
-			</view>
-			<view class="free">
-				<view class="free-num">
-				  <text style="color:#009143;">空闲1</text>/总数5
-				</view>
-				<view class="distance">
-					<text class="iconfont distance-font">&#xe615;</text>0.1公里 1分钟
-				</view>
-			</view>
-		</view>
-		
+		</view>		
 	</view>
 </template>
 
@@ -85,7 +37,13 @@
 		
 		data() {
 			return {
-          
+			  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小时免费停车'},
+					{name:'荆鹏软件园充电站3',position:'湖北省荆州市沙市区江津东路附157号',price:1.2,idleNum:10,total:10,distance:0.2,time:13,type:'慢充',park:'4小时免费停车'},
+					{name:'荆鹏大道求助站充电站',position:'湖北省荆州市沙市区江津东路附158号',price:1.2,idleNum:10,total:10,distance:0.3,time:14,type:'快充',park:'5小时免费停车'},
+				
+				],
 			}
 		},
 		 // conponents:{charingSlows},