BagStation/pages/components/price-tab.vue

@@ -32,6 +32,11 @@
 				<view class="padding-top-sm">
 					<text class="cu-tag line-yellow margin-right-xs" v-for="(itemy,index) in tagList" :key="index">{{itemy}}</text>
 				</view>
+				<view class="activity" v-if="siteInfo.activitySwitch">
+					<view class="content">
+						{{siteInfo.activityContent}}
+					</view>
+				</view>
 			</view>
 		</view>
 	</view>
@@ -43,6 +48,12 @@
 			channelList: {
 				type: Array,
 				default () {}
+			},
+			siteInfo:{
+				type: Object,
+				default: () => {
+					return {}
+				}
 			}
 		},
 		data() {
@@ -128,7 +139,7 @@
 	}
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 	.site-icon {
 		width: 2rem;
 		vertical-align: middle;
@@ -137,4 +148,18 @@
 	.my-tag {
 		padding: 0 12rpx;
 	}
+	.activity {
+		margin-top: 15rpx;
+		display: flex;
+		width: 45%;
+		border:2rpx solid #1890FF50;
+		// border-radius: 10rpx;
+		.content {
+			flex: 1;
+			padding: 10rpx 20rpx;
+			line-height: 36rpx;
+			// min-height: 80rpx;
+			color: #1890FF; 
+		}
+	}
 </style>

BagStation/pages/stationDetail/stationDetail.vue

@@ -61,7 +61,7 @@
 		</view>
 		<!-- 价格 -->
 		<price-tab @onChangeChannelCode="getChannelCode" @onChangePayQr="onChangePayQr" @onChangePay="onChangePay"
-		 :channel-list="siteInfo.oilSiteChannelDetailsVos"></price-tab>
+		 :channel-list="siteInfo.oilSiteChannelDetailsVos" :siteInfo="siteInfo"></price-tab>
 
 
 		<!-- 客户评价 -->

components/site-item/site-item.vue

@@ -1,15 +1,23 @@
 <template>
-	<view class="cu-item cur padding no-mr-border site-item" :style="{height:siteItem.oilProductCodeAndPrices && siteItem.oilProductCodeAndPrices.length>3?'220rpx !important':listHeight?listHeight + 'rpx !important':''}">
+	<!-- :style="{height:siteItem.oilProductCodeAndPrices && siteItem.oilProductCodeAndPrices.length>3?'220rpx !important':listHeight?listHeight + 'rpx !important':''}" -->
-		<view class="cu-avatar radius lg "
+	<view class="site-item">
+		<view class="radius"
 			:style="'background-image:url('+(siteItem.siteImages?siteItem.siteImages:defaultLogo)+');'">
 		</view>
 		<view class="content">
+			<view class="action">
+				<view class="text-grey text-sm  " style="padding-top: 6rpx;">
+					<!-- <my-icon iconName="sy-der-icon.png" class="padding-right-xs text-sm"></my-icon> -->
+					{{siteItem.juli|distanceFilter}}
+				</view>
+			</view>
 			<view>
 				<view class="text-cut text-black  text-lg padding-right-sm ">{{siteItem.siteName}}</view>
 			</view>
 			<view class="listTages">
 				<!-- <view v-if="siteItem.siteLevel" class=" cu-tag round bg-self--dark-yellow yu-tag text-xs">{{siteItem.siteLevel}}级</view> -->
-				<view class="cu-tag round bg-self-yellow  yu-tag text-xs" :class="siteItem.channelCode=='XOIL'?'tag-red':''">{{siteItem.listTag|channelCodeFamt}}
+				<view class="cu-tag round bg-self-yellow  yu-tag text-xs"
+					:class="siteItem.channelCode=='XOIL'?'tag-red':''">{{siteItem.listTag|channelCodeFamt}}
 				</view>
 				<view class="cu-tag round bg-self--dark-yellow yu-tag text-xs" v-show="first">距离最近</view>
 			</view>
@@ -18,8 +26,9 @@
 					{{siteItem.address}}
 				</view>
 			</view>
-			<view class="text-gray flex" style="width: calc(100% + 30%);display: flex;flex-wrap: wrap;">
+			<view class="text-gray flex" style="display: flex;flex-wrap: wrap;">
-				<view v-if="listHeight" class="youpin" style="" v-for="(item,index) in siteItem.oilProductCodeAndPrices">
+				<view v-if="listHeight" class="youpin" style=""
+					v-for="(item,index) in siteItem.oilProductCodeAndPrices">
 					<view class="text-bold  oil-main-color text-xl padding-right-xs">
 						{{item.oilProductCode}}
 					</view>
@@ -42,19 +51,18 @@
 						￥{{siteItem.oilSitePrice|moneyFormat}}/L
 					</text>
 					<!-- 	<my-icon iconName="￥.png" class="padding-right-xs icon-rectangle"></my-icon>
-		
 					<my-icon iconName="f.png" class="padding-right-xs "></my-icon> -->
-		
+				</view>
+			</view>
+			<view class="activity" v-if="siteItem.activitySwitch">
+				<view class="title">活动</view>
+				<view class="content">
+					{{siteItem.activityContent}}
 				</view>
 			</view>
 		</view>
 
-		<view class="action"> 
+
-			<view class="text-grey text-sm  " style="padding-top: 6rpx;"> 
-				<!-- <my-icon iconName="sy-der-icon.png" class="padding-right-xs text-sm"></my-icon> -->
-				{{siteItem.juli|distanceFilter}} 
-			</view> 
-		</view> 
 
 	</view>
 </template>
@@ -126,19 +134,41 @@
 	}
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 	.site-item {
-		margin-bottom: 1.8rem; 
+		position: relative;
+		display: flex;
 		align-items: flex-start !important;
-		height: 150rpx!important;
+		padding: 25rpx;
+		// margin-bottom: 1.8rem;
+		line-height:1.5rem;
+		.content {
+			flex:1;
+			overflow: hidden;
+			.action {
+				position: absolute;
+				right: 35rpx;
+				top: 24rpx;
+			}
+		}
+		>.radius {
+			margin-right: 30rpx;
+			width: 96rpx;
+			height: 96rpx;
+			font-size: 2em;
+			background-size: 100% 100%;
+		
+		}
 	}
 
 	.yellow-oil {
 		color: #e8775a;
 	}
+
 	.cu-avatar {
 		background-color: transparent !important;
 	}
+
 	.youpin {
 		border: 1px solid #e4e4e4;
 		display: flex;
@@ -147,7 +177,32 @@
 		margin-right: 5px;
 		margin-bottom: 5px;
 	}
+
 	.text-xl {
 		font-size: 30rpx;
 	}
+	.activity {
+		display: flex;
+		width: 85%;
+		// padding: 10rpx 20rpx;
+		border:2rpx solid #1890FF ;
+		border-radius: 10rpx;
+	
+		.title {
+			width: 20%;
+			padding: 10rpx 0;
+			line-height: 36rpx;
+			text-align: center;
+			color: #1890FF ;
+			background: #1890FF30;
+		}
+	
+		.content {
+			flex: 1;
+			padding: 10rpx 20rpx;
+			line-height: 36rpx;
+			min-height: 80rpx;
+			color: #1890FF;
+		}
+	}
 </style>