找桩地图模式 卡片

pages/searchPile/searchPile.vue

@@ -227,55 +227,126 @@
 					 src="@/static/img/location.png" border-radius="8" bg-color="#ffffff" width="30px" height="30px" @click="setCenter"></u-image>
 					 
 				</view>
-				<view v-if="stationsmap.length>0" class="chargerCard" style="border-radius: 20rpx;"> 
-					<swiper :current="currentIndex" @change="swiperChange" slide-change-transition-end='swiperTransitionEnd' @transition="swiperTransition" style="height: 100%;">
+			<!-- 新版卡片 -->	
+			<view  class="chargerCard" >
+				<view  class="charing-slow charing-slow-2" >
+														<view class="address">
+															<view class="name oldTextjp" oldstyle="font-size: 20px;">
+																荆鹏软件园充电站B01
+															</view>
+															<view class="distance oldTextjp2" oldstyle="font-size: 16px;" >
+																<text class="iconfont" style="color:#666666">&#xe615;</text>
+																小于100米
+															</view>
+															<!-- <view class="distance oldTextjp2" oldstyle="font-size: 16px;">
+																<text class="iconfont" style="color:#666666">&#xe615;</text>
+																暂无定位
+															</view> -->
+														</view>
+														<view class="sign">
+															<view class="sign-1" >会员享服务费8.5折</view>
+															<view class="sign-2">2小时停车免费</view>
+															<view class="sign-2">服务费代金券</view>
+															<view class="sign-2">包月卡</view>
+															<view class="sign-2">超级代金券</view>
+														</view>
+														<view class="price-free">
+														<view class="price">
+															<view class="price-1">
+																<view class="num">1.21</view>
+																<view class="unit oldTextjp2" oldstyle="font-size: 14px;">
+																	 元/度 起
+																</view>
+															</view>
+															<view class="price-2 oldTextjp2" oldstyle="font-size: 14px;" >
+																<text class="num">1.23</text>
+																<text class="unit">元/度 起</text>
+															</view>
+														</view>
+														<view class="free">
+															<view class="fast" >
+																<view class="fast-font">
+																	快
+																</view>
+																<view class="num">
+																	1/2
+																</view>
+															</view>
+															<view class="slow" >
+																<view class="slow-font">
+																	慢
+																</view>
+																<view class="num">
+																	1/2
+																</view>
+															</view>
+														</view>
+													</view>
+													</view>
+			</view>
+<!-- 老版卡片-->
+				<!-- <view v-if="stationsmap.length>0" class="chargerCard" >
+					<swiper v-if="stationsmap.length>0" :current="currentIndex" @change="swiperChange" slide-change-transition-end='swiperTransitionEnd' @transition="swiperTransition" style="height: 100%;">
 					 	<swiper-item v-for="(item,index) in stationsmap" :key="item.id" style="height: 100%;">							 
 							
 							<view class="swiper-item" style="height: 100%; background-color: #ffffff;" @click="stationDetail(item)">
-								<view class="card_item" style="padding-top: 5rpx;">
-									<view style="display: flex;flex-direction: row;">
-										<view :class="item.type == '快充' ? 'fast-charge':(item.type == '慢充' ? 'trickle-charge':'fast-trickle-charge')" >
-											{{item.type}}
-										</view>
-										<view class="font-weight3"  >
-											{{item.name}}											
-										</view>
-										
-									</view>
-								</view>		
-								<view class="card_item" style="color:#8898A9;">
-									{{item.position}}
-								</view>
-								
-								<view class="card_item2" >
- 									<view style="color:#FF6573;margin-right: 10rpx;">
-										{{item.price.toFixed(2)}}
-									</view>
-									<view style="display: flex; justify-content: center;align-items: center">
-									 元/度 起								
-									</view>
-								</view>
-								<view class="card_item" style="border-bottom: #F1F4F3; border-bottom-width: 2rpx;border-style: solid;border-top-width: 0rpx;border-left-width: 0rpx;border-right-width:0rpx; padding-bottom:20rpx">
-									<view style="display: flex;flex-direction: row;" v-if="item.parkingDescription">
-										<view style="background-color: #7DB1FF;padding-left: 10rpx;padding-right: 10rpx;color: #FFFFFF;">
-											P
-										</view>
-										<label>{{item.parkingDescription}}</label>
-									</view>
-									<view style="display: flex;flex-direction: row;">
-										<view style="color: #00B962;" class="font-weight2">
-											空闲{{item.idleNum}}
-										</view>
-										
-										<view class="font-weight2">
-											/总数{{item.total}}
-										</view>
-									</view>
-								</view>
-								
-								<view class="card_item" style="padding-bottom: 20rpx;">
+							
+							<view  class="charing-slow charing-slow-2"   @click="stationDetail(item)">
+													<view class="address">
+														<view class="name oldTextjp" oldstyle="font-size: 20px;">
+															{{item.name}}
+														</view>
+														<view class="distance oldTextjp2" oldstyle="font-size: 16px;" v-if="item.distance != '99999999'">
+															<text class="iconfont" style="color:#666666">&#xe615;</text>
+															{{item.distance!=null && item.distance>0.1 ? item.distance.toFixed(1)+'公里' : '小于100米'}}
+														</view>
+														<view class="distance oldTextjp2" oldstyle="font-size: 16px;" v-else>
+															<text class="iconfont" style="color:#666666">&#xe615;</text>
+															暂无定位
+														</view>
+													</view>
+													<view class="sign">
+														<view class="sign-1" v-if="item.giveDiscount">服务费{{item.discountRatio/10}}折</view>
+														<view class="sign-2" v-if="item.tagList.length != 0" v-for="(tagName,tagIndex) in item.tagList" :key="tagIndex">{{tagName}}</view>
+													</view>
+													<view class="price-free">
+													<view class="price">
+														<view class="price-1">
+															<view class="num">{{!item.giveDiscount ? (item.electricityPrice+item.servicePrice).toFixed(2)
+															: (item.electricityPrice+item.discountServicePrice).toFixed(2)}}</view>
+															<view class="unit oldTextjp2" oldstyle="font-size: 14px;">
+																 元/度 起
+															</view>
+														</view>
+														<view class="price-2 oldTextjp2" oldstyle="font-size: 14px;" v-if="item.giveDiscount">
+															<text class="num">{{(item.electricityPrice+item.servicePrice).toFixed(2)}}</text>
+															<text class="unit">元/度 起</text>
+														</view>
+													</view>
+													<view class="free">
+														<view class="fast" v-if="item.type == '快充' || item.type == '快/慢'">
+															<view class="fast-font">
+																快
+															</view>
+															<view class="num">
+																{{item.fastAvailableNum}}/{{item.fastNum}}
+															</view>
+														</view>
+														<view class="slow" v-if="item.type == '慢充' || item.type == '快/慢'">
+															<view class="slow-font">
+																慢
+															</view>
+															<view class="num">
+																{{item.slowAvailableNum}}/{{item.slowNum}}
+															</view>
+														</view>
+													</view>
+												</view>
+							</view>
+																				
+							<view class="card_item" >
 									<u-button shape='circle' style="color: #00B962;" @click="getScanCode" >
-										<u-icon name="scan" size="26" color="#00B962" style="margin-right: 20rpx;"></u-icon>
+										<u-icon name="scan" size="26" color="#00B962" ></u-icon>
 										<label>扫码充电</label>
 									</u-button>
 									
@@ -296,11 +367,11 @@
 											
 									</view>
 									
-								</view>
+								</view> 
 							</view>
 						</swiper-item>
 					</swiper>
-				</view>
+				</view> -->
 
 			</view>
 		</view>
@@ -1463,59 +1534,40 @@ export default {
 	
 }
 .chargerCard{
-/*	background-color: #fff;
-	margin: 0 12px;
-	border-radius: 8px;
-	padding: 10px 12px 0px;
-	position: absolute;
-	bottom: 68px;
-	left: 0;
-	right: 0;
-	z-index:1021
-*/
+   
 	background-color: #fff;
 	margin: 0 24rpx;
 	border-radius: 16rpx;
-	padding: 20rpx 24rpx 0rpx;
+	// overflow: hidden;
 	bottom: 68px;
 	left: 0;
 	right: 0;	
 	position: fixed; 
-	@include themeify{
-		height:themed('cardHeight'); 
-	} 
-	/*
-	z-index: 1021; 
-	width: 80%;
-	margin-left: 10%;
-	bottom: 50rpx;
+	// height: 380rpx;
+	
+	
+	
+	// @include themeify{
+	// 	height:themed('cardHeight'); 
+	// } 
 	
-	*/
 }
+
+
 .arrow{
 	margin-right: 15rpx;
 }
 .card_item{
 	display: flex;
 	flex-direction: row;
+	
 	@include themeify{
  		font-size: themed('font-size2');
  	}
 	justify-content: space-between;
-	margin-left: 20rpx;
-	margin-right: 20rpx;
-	margin-bottom: 10rpx;
-}
-.card_item2{
-	display: flex;
-	flex-direction: row;
-	@include themeify{
- 		font-size: themed('font-size2');
- 	}
-	margin-left: 20rpx;
-	margin-right: 20rpx;
-	margin-bottom: 10rpx;
+
 }
+
 .round{
 	border-radius:50rpx; 
 	background-color: #00B962;
@@ -1539,7 +1591,7 @@ export default {
 	text-align: center;
 	justify-content: center;
 	align-items: center;
-	width:125rpx;
+	// width:125rpx;
   }
 
 .swiper-item{
@@ -1549,7 +1601,11 @@ export default {
  	margin-left: 4rpx;
  
  }
- 
+ .charing-slow-2{
+	 margin: 0 0 10px 0 !important;
+	 // border-bottom: 1px solid rgba(238, 242, 240, 100);
+	 
+ }
  .charing-slow {
  	background-color: #fff;
 	margin: 40rpx;