更新

2023-08-30 11:32:32 +08:00
parent 90e2d26117
commit 6df26c7fe5
12 changed files with 590 additions and 230 deletions
--- a/BagStation/pages/newRoutePlanning/chooseLocation.vue
+++ b/BagStation/pages/newRoutePlanning/chooseLocation.vue
@@ -1,13 +1,13 @@
 <template>
 	<view class="seach_body">
 		<view class="seach_input">
-			<view @click="isShowFn" class="seach_input_left color-66">
+			<!-- <view @click="isShowFn" class="seach_input_left color-66">
 				<uni-icons class="mar" type="search" size="20"></uni-icons>
 				<view>{{addressData.city}}</view>
 				<uni-icons color="#bbbbbb" class="bottom" type="back" size="15"></uni-icons>
-			</view>
+			</view> -->
 			<view class="seach_input_right">
-				<input v-model="seachValue" placeholder="请输入地址" type="text" @confirm="seachFn" />
+				<input style="flex:1" v-model="seachValue" placeholder="请输入地址" type="text" @confirm="seachFn" />
 				<view @click="seachFn" class="seach_input_butten"> 搜索</view>
 				<!-- <uni-combox @input="seachFn" emptyTips="请输入内容" class="seach_input_right_input" :border="false" :candidates="candidates" placeholder="Location..."></uni-combox> -->
 			</view>
@@ -17,7 +17,7 @@
 				<view @click="seleClick(item)" v-for="(item,index) in List" class="list_item">
 					<view class="list_item_size">{{item.title}}</view>
 					<view class="list_item_samall_size">{{item.address}}</view>
-				</view> 
+				</view>
 			</scroll-view>
 		</view>
 		<charge :addressData="addressData" @chargeChange='chargeChange' v-model="isShow.address"></charge>
@@ -28,7 +28,7 @@
 	import amapFile from '@/utils/qqmap-wx-jssdk.js'
 	import charge from './components/charge.vue'
 	export default {
-		components:{
+		components: {
 			charge
 		},
 		data() {
@@ -41,7 +41,7 @@
 				isShow: {
 					address: false
 				},
-				type:1,
+				type: 1,
 				seachValue: '',
 				List: [],
 				TXSDK: null,
@@ -66,10 +66,14 @@
 				console.log(this.List, Boolean(Number(this.List)))
 				this.TXSDK.reverseGeocoder({
 					sig: 'mOPvEv4WmyaxymycTYy00pSiad2jnQil',
-					location:that.location,
-					success(e){
-						({province:that.addressData.province,city:that.addressData.city,district:that.addressData.area}=e.result.address_component)
-						console.log(e,that.addressData,'地址逆解析')
+					location: that.location,
+					success(e) {
+						({
+							province: that.addressData.province,
+							city: that.addressData.city,
+							district: that.addressData.area
+						} = e.result.address_component)
+						console.log(e, that.addressData, '地址逆解析')
 					},
 					fail(e) {
 						console.log(e, '地址逆解析 错误')
@@ -83,16 +87,16 @@
 			});
 		},
 		methods: {
-			seleClick(e){
-				uni.$emit('UpdateAddress',e,this.type)
+			seleClick(e) {
+				uni.$emit('UpdateAddress', e, this.type)
 				uni.navigateBack()
 			},
-			chargeChange(e){
-				this.addressData = Object.assign(this.addressData,e)
+			chargeChange(e) {
+				this.addressData = Object.assign(this.addressData, e)
 				console.log(e)
 			},
 			isShowFn() {
-				 this.isShow.address = true
+				this.isShow.address = true
 			},
 			loding(e) {
 				if (e) {
@@ -106,14 +110,15 @@
 					}, 500);
 				}
 			},
-			getRegion(){
+			getRegion() {
 				let that = this
 				this.loding(true)
 				this.TXSDK.search({
 					sig: 'mOPvEv4WmyaxymycTYy00pSiad2jnQil',
 					keyword: that.seachValue,
 					auto_extend: '0',
-					region:that.addressData.province.indexOf('市')!==-1? that.addressData.province : that.addressData.province + that.addressData.city,
+					region: that.addressData.province.indexOf('市') !== -1 ? that.addressData.province : that
+						.addressData.province + that.addressData.city,
 					page_size: that.pageSize.page_size,
 					location: that.location || '',
 					page_index: that.pageSize.page,
@@ -138,20 +143,45 @@
 					},
 				})
 			},
+			getSuggestion() {
+				this.loding(true)
+				this.TXSDK.getSuggestion({
+					sig: 'mOPvEv4WmyaxymycTYy00pSiad2jnQil',
+					keyword: this.seachValue,
+					region: this.addressData.city || '全国',
+					page_size: this.pageSize.page_size,
+					page_index: this.pageSize.page,
+					success: e => {
+						this.loding(false)
+						if (e.message !== 'query ok') return
+						if (e.data.length == 0) {
+							uni.showToast({
+								title: '没有数据了',
+								icon: 'none'
+							})
+						}
+						if (this.pageSize.page > 1) {
+							this.List = this.List.concat(e.data)
+							return
+						}
+						this.List = e.data
+					}
+				})
+			},
 			seachFn(e) {
 				this.pageSize.page = 1
-				this.getRegion()
+				this.getSuggestion()
 			},
 			lower() {
 				this.pageSize.page += 1
-				this.getRegion()
+				this.getSuggestion()
 			},
 		}
 	}
 </script>

 <style scoped>
-	.seach_input_butten{
+	.seach_input_butten {
 		color: #FF6700;
 		height: 100%;
 		white-space: nowrap;
@@ -159,6 +189,7 @@
 		align-items: center;
 		padding: 0 10rpx;
 	}
+
 	.list_item_samall_size {
 		color: #BBBBBB;
 		font-size: 24rpx;
@@ -209,7 +240,7 @@

 	.seach_input_right {
 		flex: 1;
-		margin:0 10rpx;
+		margin: 0 10rpx;
 		display: flex;
 		align-items: center;
 	}
--- a/BagStation/pages/newRoutePlanning/components/footerScroll.vue
+++ b/BagStation/pages/newRoutePlanning/components/footerScroll.vue
@@ -38,14 +38,37 @@
 			</view>
 			<view class="screen_bottom">沿途站点</view>
 		</view> -->
-		<!--  图标 -->
-		    <mapIcon @swich='swich' @reset='reset' ref='mapIcon' :polyline='polyline' @strategy='strategy'  />
-			<!--  收藏 -->
-			<recentSearch  ref='recentSearch' v-if='!isShow.screen&&list.length!==0' @mapRoutePlanning='mapRoutePlanning'></recentSearch>
-			<!-- 价格筛选 -->
-			<screen  @swich='swich' @mapEventListeners='mapEventListeners' ref = 'screen'  @filter='filter' v-show="isShow.screen&&!isShow.serviceStation" :selePrice='selePrice'/>
-			<!-- 详情 -->
-			<serviceStation  @openMapApp='openMapApp' @dragMap='dragMap'  :details='details' v-if="isShow.serviceStation"/>
+		<!-- 油站列表 -->
+		<view class="site" v-if="isShow.screen">
+			
+			<view @click="showSite">油站列表</view>
+		</view>
+		<view class="line" v-if="isShow.screen">
+			<view @click="showLine">线路切换(3)</view>
+			<view v-if="isShow.strategy">
+				<view @click="strategy('LEAST_TIME')" style="top:-270rpx" class="strategy-item"
+					:class="seleIndex=='LEAST_TIME'? 'active' :'' ">
+					推荐路线
+				</view>
+				<view @click="strategy('LEAST_FEE')" style="top:-180rpx" class="strategy-item"
+					:class="seleIndex=='LEAST_FEE'? 'active' :'' ">费用最少</view>
+				<view @click="strategy('AVOID_HIGHWAY')" style="top:-90rpx" class="strategy-item"
+					:class="seleIndex=='AVOID_HIGHWAY'? 'active' :'' ">不走高速</view>
+			</view>
+		</view>
+		<!-- 定位 -->
+		<view class="position">
+			<image @click="reset" src="https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油运营小程序/myPosition.png"></image>
+		</view>
+		<!-- <mapIcon @swich='swich' @reset='reset' ref='mapIcon' :polyline='polyline' @strategy='strategy' /> -->
+		<!--  收藏 -->
+		<recentSearch ref='recentSearch' v-if='!isShow.screen&&list.length!==0' @mapRoutePlanning='mapRoutePlanning'>
+		</recentSearch>
+		<!-- 价格筛选 -->
+		<screen @swich='swich' @mapEventListeners='mapEventListeners' ref='screen' @filter='filter'
+			v-show="isShow.screen&&!isShow.serviceStation" :selePrice='selePrice' />
+		<!-- 详情 -->
+		<serviceStation @openMapApp='openMapApp' @dragMap='dragMap' :details='details' v-if="isShow.serviceStation" />
 	</view>
 </template>
 <script>
@@ -54,16 +77,16 @@
 	import mapIcon from './mapIcon.vue'
 	import serviceStation from './serviceStation.vue'
 	export default {
-		components:{
+		components: {
 			screen,
 			recentSearch,
 			mapIcon,
 			serviceStation
 		},
 		props: {
-			selePrice:{
-				type:Object,
-				default:()=>{
+			selePrice: {
+				type: Object,
+				default: () => {
 					return null
 				}
 			},
@@ -73,97 +96,114 @@
 					return []
 				}
 			},
-			details:{
-				type:Object,
-				default:()=>{
+			details: {
+				type: Object,
+				default: () => {
 					return null
 				}
+			},
+			markers:{
+				type: Array,
+				default: () => {
+					return []
+				}
 			}
 		},
 		data() {
 			return {
-				seleIndex:1,
-				filterData:[
-					{
-						lable:'所有价格',
-						value:0
+				seleIndex: 'LEAST_TIME',
+				filterData: [{
+						lable: '所有价格',
+						value: 0
 					},
 					{
-						lable:'低于7.72',
-						value:1
+						lable: '低于7.72',
+						value: 1
 					},
 					{
-						lable:'最低价格',
-						value:2
+						lable: '最低价格',
+						value: 2
 					}
 				],
 				list: [],
 				isShow: {
 					screen: false, //路线规划价格筛选条件
-					filterBox:false,//价格显示控制，已迁移组件内部
-					strategy:false,//路线规划策略选着
-					serviceStation:false,//油站详情控件
-					
+					filterBox: false, //价格显示控制，已迁移组件内部
+					strategy: false, //路线规划策略选着
+					serviceStation: false, //油站详情控件
+
 				}
 			}
 		},
 		created() {
 			//获取最近地址列表
 			this.list = uni.getStorageSync('recentSearch') || [];
-			console.log(this.list)
+			// console.log(this.list)
 		},
 		watch: {
 			//是否开始路线规划控制最近搜索显示隐藏
 			polyline: function(n, o) {
 				n.length !== 0 ? this.isShow.screen = true : this.isShow.screen = false
 			},
-			details:function(n,o){
-				this.isShow.serviceStation = n? true:false
-				console.log(n,'油站点击','控件状态→',this.isShow.serviceStation)
+			details: function(n, o) {
+				this.isShow.serviceStation = n ? true : false
+				console.log(n, '油站点击', '控件状态→', this.isShow.serviceStation)
 			}
 		},
 		methods: {
-			swich(e){
-				if(e){
+			showSite() {
+				console.log('footerScroll this.markers',this.markers)
+				let markers = encodeURIComponent(JSON.stringify(this.markers))
+				uni.navigateTo({
+					url:`/BagStation/pages/newRoutePlanning/siteList?markers=${markers}`
+				})
+			},
+			showLine() {
+				this.isShow.strategy = !this.isShow.strategy
+			},
+			strategy(e) {
+				this.seleIndex = e;
+				setTimeout(() => {
+					this.isShow.strategy = false
+					this.$emit('mapEventListeners', 'updateRoute', null, null, this.seleIndex);
+				}, 500)
+			},
+			swich(e) {
+				if (e) {
 					this.$refs.screen.closeFn()
-				}else{
-					this.$refs.mapIcon.isShow.strategy=false
+				} else {
+					this.isShow.strategy = false
 				}
 				this.$emit('closeAddressSelector')
+			}, 
+			mapIconClose() { 
+				this.isShow.strategy = false
 			},
-			mapIconClose(){
-				this.$refs.mapIcon.isShow.strategy=false
-			},
-			screenClose(){
+			screenClose() {
 				this.$refs.screen.closeFn()
 			},
-			openMapApp(){
-				console.log('导')
+			openMapApp() {
 				this.$emit('openMapApp')
 			},
-			mapEventListeners(e,w,j=''){
-				console.log(e,w,'****')
-				this.$emit(e,w,j)
+			mapEventListeners(e, w, j = '') {
+				// console.log(e, w, '****')
+				this.$emit(e, w, j)
 			},
-			filter(){
+			filter() {
 				return {
-					enterprisePrice:this.$refs.screen.getprice()
+					enterprisePrice: this.$refs.screen.getprice()
 				}
 			},
-			reset(){
-					this.$emit('mapEventListeners','reset')
+			reset() {
+				this.$emit('mapEventListeners', 'reset')
 			},
-			strategy(e){
-					this.$emit('mapEventListeners','updateRoute',null,null,e);
-					
-			},
-			dragMap(e,w){
-				console.log('组件内触发')
-				this.$emit('dragMap',e,w)
+			dragMap(e, w) {
+				// console.log('组件内触发')
+				this.$emit('dragMap', e, w)
 			},
 			//点击最近开始路线规划
 			mapRoutePlanning(e, i) {
-				this.$emit('mapEventListeners','cardPlanning', e)
+				this.$emit('mapEventListeners', 'cardPlanning', e)
 			},
 			//修改缓存最近搜索逻辑
 			collection(e, i) {
@@ -199,25 +239,100 @@
 </script>

 <style lang="scss">
-	.seleStrategy{
+	.site {
+		position: absolute;
+		top: -95rpx;
+		right: 350rpx;
+		padding: 0 20rpx 0 45rpx;
+		width: 180rpx;
+		height: 70rpx;
+		line-height: 70rpx;
+		font-size: 28rpx;
+		border-radius: 15rpx;
+		background: url('../../../../static/img/list.png') #fff 10rpx center/32rpx 32rpx no-repeat;
+	}
+	.line {
+		position: absolute;
+		top: -95rpx;
+		right: 110rpx;
+		padding: 0 20rpx 0 45rpx;
+		width: 212rpx;
+		height: 70rpx;
+		line-height: 70rpx;
+		font-size: 28rpx;
+		border-radius: 15rpx;
+		background: url('../../../../static/img/switch.png') #fff 10rpx center/33rpx 33rpx no-repeat;
+	}
+
+	.position {
+		position: absolute;
+		top: -90rpx;
+		right: 30rpx;
+		padding-top: 8rpx;
+		width: 60rpx;
+		height: 60rpx;
+		border-radius: 15rpx;
+		background: #fff;
+		text-align: center;
+
+		image {
+			width: 45rpx;
+			height: 45rpx;
+		}
+	}
+
+	.strategy-item {
+		position: absolute;
+		left: 0;
+		top: 0;
 		height: 80rpx;
 		width: 180rpx;
-		background-color: #FFFFFF;
+		text-align: center;
+		line-height: 80rpx;
+		background: #fff;
+		border-radius: 10px;
+
+		&.active {
+			background: #FF6700;
+			color: #fff;
+		}
+	}
+
+	.Strategy {
+		height: 80rpx;
+		width: 180rpx;
+		background-color: #FF6700;
 		border-radius: 10px;
 		position: absolute;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		transition: top .3s,right 0.3s,opacity 0s;
+		transition: top .3s, right 0.3s, opacity 0s;
 		overflow: hidden;
+		color: #FFFFFF;
 	}
-	.mapIcon{
-		text-align: end;
-		padding-right: 30rpx;
-		padding-bottom: 15rpx;
-		position: relative;
-		height: 80rpx;
-	}
+
+	// .seleStrategy {
+	// 	height: 80rpx;
+	// 	width: 180rpx;
+	// 	background-color: #FFFFFF;
+	// 	border-radius: 10px;
+	// 	position: absolute;
+	// 	display: flex;
+	// 	align-items: center;
+	// 	justify-content: center;
+	// 	transition: top .3s, right 0.3s, opacity 0s;
+	// 	overflow: hidden;
+	// }
+
+	// .mapIcon {
+	// 	text-align: end;
+	// 	padding-right: 30rpx;
+	// 	padding-bottom: 15rpx;
+	// 	position: relative;
+	// 	height: 80rpx;
+	// }
+
 	.filterBox {
 		position: absolute;
 		width: max-content;
@@ -315,7 +430,7 @@
 		position: absolute;
 		z-index: 999999;
 		width: 100vw;
-		bottom:0rpx;
+		bottom: 0rpx;
 		// height: 300rpx;
 	}

--- a/BagStation/pages/newRoutePlanning/components/mapIcon.vue
+++ b/BagStation/pages/newRoutePlanning/components/mapIcon.vue
@@ -1,8 +1,10 @@
 <template>
 	<view class="mapIcon">
-		<view  class="Position">
-			<image @click="$emit('reset')" v-if="polyline.length==0" src="https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油运营小程序/myPosition.png"  ></image>
-			<image @click="$emit('swich',true);isShow.strategy=!isShow.strategy" v-else src="../../../static/img/trajectory.png"  ></image>
+		<view class="Position">
+			<image @click="$emit('reset')" v-if="polyline.length==0"
+				src="https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油运营小程序/myPosition.png"></image>
+			<image @click="$emit('swich',true);isShow.strategy=!isShow.strategy" v-else
+				src="../../../static/img/trajectory.png"></image>
 		</view>
 		<!-- <uni-icons  v-if="polyline.length!==0"  @click=" isShow.strategy=!isShow.strategy" type="map-pin-ellipse" size='25'></uni-icons> -->
 		<view @click="strategy('LEAST_TIME')"
@@ -111,18 +113,21 @@
 </script>

 <style lang="scss">
-	.Position image{
-		width: 45rpx;height: 45rpx;
+	.Position image {
+		width: 45rpx;
+		height: 45rpx;
 	}
-	.Position{
+
+	.Position {
 		border-radius: 10px;
-		    border-radius: 10px;
-		    background-color: #FFFFFF;
-		    padding: 10rpx;
-		    width: min-content;
-		    float: right;
-		
+		border-radius: 10px;
+		background-color: #FFFFFF;
+		padding: 10rpx;
+		width: min-content;
+		float: right;
+
 	}
+
 	.seleStrategy {
 		height: 80rpx;
 		width: 180rpx;
@@ -132,7 +137,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		transition: top .3s, right 0.3s, opacity 0s,display 0s;
+		transition: top .3s, right 0.3s, opacity 0s, display 0s;
 		overflow: hidden;
 	}

--- a/BagStation/pages/newRoutePlanning/components/screen.vue
+++ b/BagStation/pages/newRoutePlanning/components/screen.vue
@@ -1,25 +1,26 @@
 <template>
-		<view  class="screen">
-			<view class="screen_left">
-				<!-- <uni-icons type="smallcircle-filled" size='25'></uni-icons> -->
-				<image style="width: 50rpx;height: 50rpx;" src="../../../static/img/price.png"></image>
-				<view class="screen_text">
-					<text @click="showFn" >{{filterData[seleIndex].lable}}</text>
-					<view v-if="isShow.filterBox" class="filterBox">
-						<view @click="priceSele(item,index)" :style="{color:index==seleIndex?'#666666':''}" v-for="(item,index) in filterData">{{item.lable}}</view>
-					</view>
+	<view class="screen">
+		<view class="screen_left">
+			<!-- <uni-icons type="smallcircle-filled" size='25'></uni-icons> -->
+			<image style="width: 50rpx;height: 50rpx;" src="../../../static/img/price.png"></image>
+			<view class="screen_text">
+				<text @click="showFn">{{filterData[seleIndex].lable}}</text>
+				<view v-if="isShow.filterBox" class="filterBox">
+					<view @click="priceSele(item,index)" :style="{color:index==seleIndex?'#666666':''}"
+						v-for="(item,index) in filterData">{{item.lable}}</view>
 				</view>
-				<image style="width: 40rpx;height: 25rpx;" src="../../../static/img/chevron-up.png"></image>
 			</view>
-			<view @click="move" class="screen_bottom">{{site?'沿途站点':'全路径'}}</view>
+			<image style="width: 40rpx;height: 25rpx;" src="../../../static/img/chevron-up.png"></image>
 		</view>
+		<view @click="move" class="screen_bottom">{{site?'沿途站点':'全路径'}}</view>
+	</view>
 </template>
 <script>
 	export default {
 		props: {
-			selePrice:{
-				type:Object,
-				default:()=>{
+			selePrice: {
+				type: Object,
+				default: () => {
 					return null
 				}
 			},
@@ -32,82 +33,84 @@
 		},
 		data() {
 			return {
-				site:true,
-				seleIndex:1,
-				filterData:[],
+				site: true,
+				seleIndex: 1,
+				filterData: [],
 				list: [],
 				isShow: {
 					screen: false,
-					filterBox:false,
-					strategy:false
+					filterBox: false,
+					strategy: false
 				}
 			}
 		},
 		created() {
 			// this.list = uni.getStorageSync('recentSearch') || [];
 			// console.log(this.list)
-			
+
 		},
 		watch: {
 			polyline: function(n, o) {
 				n.length !== 0 ? this.isShow.screen = true : this.isShow.screen = false;
-				
+
 			},
 			selePrice: function(n, o) {
-				console.log(this.selePrice,'jiage');
+				console.log(this.selePrice, 'jiage');
 				// this.filterData[1].lable = '低于' + this.selePrice.middlePrice;
 				// this.filterData[1].value = this.selePrice.middlePrice;
 				// this.filterData[2].lable = '最低价格';
 				// this.filterData[2].value = this.selePrice.minPrice;
 				// this.filterData
 				this.filterData = []
-				if(n){
-					Object.keys(this.selePrice).forEach((item,index)=>{
-						if(this.selePrice[item]!==null){
+				if (n) {
+					Object.keys(this.selePrice).forEach((item, index) => {
+						if (this.selePrice[item] !== null) {
 							this.filterData.push({
-								lable:item=='middlePrice'?'低于'  + this.moneyIntercept(this.selePrice.middlePrice)  :'最低价格',
-								value:item=='middlePrice'? this.moneyIntercept(this.selePrice.middlePrice)  : this.moneyIntercept(this.selePrice.minPrice)
+								lable: item == 'middlePrice' ? '低于' + this.moneyIntercept(this
+									.selePrice.middlePrice) : '最低价格',
+								value: item == 'middlePrice' ? this.moneyIntercept(this.selePrice
+									.middlePrice) : this.moneyIntercept(this.selePrice.minPrice)
 							})
 						}
 					})
 					this.filterData.unshift({
-						lable:'所有价格',
-						value:99999
+						lable: '所有价格',
+						value: 99999
 					});
-					if(	this.filterData.length==1){
-						 this.seleIndex = 0;
-					}else{
+					if (this.filterData.length == 1) {
+						this.seleIndex = 0;
+					} else {
 						this.seleIndex = 1;
 					}
 				}
-				
+
 			}
 		},
 		methods: {
-			closeFn(){
-				this.isShow.filterBox=false
+			closeFn() {
+				this.isShow.filterBox = false
 			},
-			showFn(e){
-				this.isShow.filterBox=!this.isShow.filterBox;
-				this.$emit('swich',false);
+			showFn(e) {
+				this.isShow.filterBox = !this.isShow.filterBox;
+				this.$emit('swich', false);
 			},
-			move(){
-				this.$emit('mapEventListeners','mapEventListeners','MoveToLocation',this.site);
+			move() {
+				this.$emit('mapEventListeners', 'mapEventListeners', 'MoveToLocation', this.site);
 				this.site = !this.site;
-				
+
 			},
-			getprice(){
-				if(	this.filterData.length==1) this.seleIndex = 0;
-				return this.filterData[this.seleIndex].value||0.00
+			getprice() {
+				if (this.filterData.length == 1) this.seleIndex = 0;
+				return this.filterData[this.seleIndex].value || 0.00
 			},
-			priceSele(e,w){
+			priceSele(e, w) {
 				this.seleIndex = w;
 				this.isShow.filterBox = false;
-				this.$emit('mapEventListeners','mapEventListeners','localScreen','footer')
+				this.$emit('mapEventListeners', 'mapEventListeners', 'localScreen', 'footer')
 				console.log(e)
 			},
-			mapRoutePlanning(e,i) {
-				this.$emit('mapEventListeners','cardPlanning', e)
+			mapRoutePlanning(e, i) {
+				this.$emit('mapEventListeners', 'cardPlanning', e)
 			},
 			collection(e, i) {
 				let recentSearch = uni.getStorageSync('recentSearch');
@@ -142,7 +145,7 @@
 </script>

 <style lang="scss">
-	.seleStrategy{
+	.seleStrategy {
 		height: 80rpx;
 		width: 180rpx;
 		background-color: #FFFFFF;
@@ -151,16 +154,18 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		transition: top .3s,right 0.3s,opacity 0s;
+		transition: top .3s, right 0.3s, opacity 0s;
 		overflow: hidden;
 	}
-	.mapIcon{
+
+	.mapIcon {
 		text-align: end;
 		padding-right: 30rpx;
 		padding-bottom: 15rpx;
 		position: relative;
 		height: 80rpx;
 	}
+
 	.filterBox {
 		position: absolute;
 		width: max-content;
--- a/BagStation/pages/newRoutePlanning/newRoutePlanning.vue
+++ b/BagStation/pages/newRoutePlanning/newRoutePlanning.vue
@@ -5,10 +5,10 @@
 			@mapEventListeners='mapEventListeners' :polyline="polyline" :Route="Route" />
 		<footerScroll @closeAddressSelector='closeAddressSelector' @openMapApp='openMapApp' ref='footerScroll'
 			:selePrice='selePrice' @dragMap='dragMap' :details='details' :polyline="polyline"
-			@mapEventListeners='mapEventListeners' />
+			@mapEventListeners='mapEventListeners' :markers="markers" />
 		<view class="map_body">
-			<map @bindregionchange='bindregionchange' @tap='poitap' @updated='mapUpdated' :scale='mapScale' @callouttap='callouttap'
-				:enable-scroll='enableScroll' @markertap='markertap' :polyline="polyline"
+			<map @bindregionchange='bindregionchange' @tap='poitap' @updated='mapUpdated' :scale='mapScale'
+				@callouttap='callouttap' :enable-scroll='enableScroll' @markertap='markertap' :polyline="polyline"
 				subkey="UTXBZ-BUH6D-TQD44-HCEG4-UKOFT-U2BDN" layer-style='2' id="map_Id" :show-location="true"
 				:markers="markers" class="map_xx" :latitude="coordinate.latitude" :longitude="coordinate.longitude">
 				<cover-view slot="callout">
@@ -83,14 +83,21 @@
 				key: 'UTXBZ-BUH6D-TQD44-HCEG4-UKOFT-U2BDN'
 			});
 		},
-		watch:{
-			enableScroll:function(n,o){
-				console.log('全局是否可拖动',n)
+		watch: {
+			enableScroll: function(n, o) {
+				console.log('全局是否可拖动', n)
 			}
 		},
 		methods: {
-			bindregionchange(e){
-				console.log(e,'***********')
+			perspectives(item) {
+				let {
+					latitude,
+					longitude
+				} = item
+				this.newMapMoveToLocation(longitude, latitude, 'reset')
+			},
+			bindregionchange(e) {
+				console.log(e, '***********')
 			},
 			mapUpdated(e) {
 				let that = this
@@ -111,7 +118,8 @@
 			async mapEventListeners(e) {
 				switch (e) {
 					case 'updateRoute':
-						this.mapRoutePlanning(arguments[1] ? arguments[1] : this.Route.start, arguments[2] ? arguments[2] : this.Route.end, arguments[3] ? arguments[3] : 'LEAST_TIME')
+						this.mapRoutePlanning(arguments[1] ? arguments[1] : this.Route.start, arguments[2] ? arguments[
+							2] : this.Route.end, arguments[3] ? arguments[3] : 'LEAST_TIME')
 						break;
 					case 'UpdateLocation':
 						this.UpdateLocation(arguments[1], arguments[2])
@@ -121,10 +129,10 @@
 						this.mapRoutePlanning()
 						break;
 					case 'details':
-							// this.details.a = 1 ;
-							let d = arguments[1]
-							this.details = d;
-							this.newMapMoveToLocation(this.details.longitude, this.details.latitude)
+						// this.details.a = 1 ;
+						let d = arguments[1]
+						this.details = d;
+						this.newMapMoveToLocation(this.details.longitude, this.details.latitude)
 						break;
 					case 'apiScreen':
 						//接口更新站点 
@@ -134,13 +142,14 @@
 						let markerList = await this.mapUpdateMarkers(this.polyline[0].points, oilProductCode, juLi,
 							siteChannel);
 						//处理站点数据回显
+
 						this.spareMarkers = this.locationProcessing(markerList);
-						this.markers =   await this.filterMarkers(JSON.parse(JSON.stringify(this.spareMarkers)));
+						this.markers = await this.filterMarkers(JSON.parse(JSON.stringify(this.spareMarkers)));
 						break;
 					case 'localScreen':
 						// 手动筛选 备份下数据
 						let markers = JSON.parse(JSON.stringify(this.spareMarkers));
-						this.markers =  await this.filterMarkers(markers);
+						this.markers = await this.filterMarkers(markers);
 						/* 老版更新价格  
 						this.markers =  await this.filterMarkers(markers);
 						if (arguments[1] !== 'footer') {
@@ -168,7 +177,7 @@
 						 	this.markers = this.filterMarkers(this.markers,this.$refs.footerScroll.filter());
 						 },0)
 						*/
-						
+
 						break;
 					case 'MoveToLocation':
 						arguments[1] ? (this.newMapMoveToLocation(this.Route.start.longitude, this.Route.start
@@ -189,7 +198,7 @@
 				// 获取路径
 				let res = await this.getMapRoutePlanning(start, end, strategy);
 				//处理数据
-				 this.polyline = this.RoutePlanningHandle(res);
+				this.polyline = this.RoutePlanningHandle(res);
 				//缩放显示所有经纬度
 				this.zoomRoutePlanning();
 				// 获取筛选数据 更新油站站点
@@ -200,10 +209,14 @@
 				} = this.$refs.addressSelector.datassFn();
 				let markerList = await this.mapUpdateMarkers(this.polyline[0].points, oilProductCode, juLi,
 					siteChannel);
+				console.log('newRoutePlanning markerList', markerList)
 				//处理油站站点数据并显示
 				this.spareMarkers = this.locationProcessing(markerList);
+				console.log('newRoutePlanning spareMarkers', this.spareMarkers)
 				let markers = JSON.parse(JSON.stringify(this.spareMarkers));
-				this.markers  =  await this.filterMarkers(markers);
+				console.log('markers', markers)
+				this.markers = await this.filterMarkers(markers);
+				console.log('newRoutePlanning this.markers', this.markers)
 			},
 			// 更新最近搜索
 			UpdateLocation(Route, type) {
@@ -229,7 +242,7 @@
 			UpdateAddress() {
 				let that = this
 				uni.$on('UpdateAddress', function(region, type) {
-					console.log(`%c ${(type=='start'?'起点更新':'终点更新')} 地址→ ${region.title}`,'color:red;font-size:50px')
+					// console.log(`%c ${(type=='start'?'起点更新':'终点更新')} 地址→ ${region.title}`,'color:red;font-size:50px')
 					that.Route[type].longitude = region.location.lng;
 					that.Route[type].latitude = region.location.lat;
 					that.Route[type].title = region.title;
@@ -268,12 +281,12 @@
 							res(e)
 						},
 						fail(e) {
-							setTimeout(()=>{
+							setTimeout(() => {
 								uni.showToast({
-									title:e.msg,
-									icon:"none"
+									title: e.msg,
+									icon: "none"
 								});
-							},1000)
+							}, 1000)
 							rej(e)
 							console.log('获取路线规划失败', e)
 						}
@@ -337,7 +350,7 @@
 			},
 			// 点击地图
 			poitap() {
-				if(this.polyline.length==0) return;
+				if (this.polyline.length == 0) return;
 				this.$refs.footerScroll.isShow.screen = true;
 				this.$refs.footerScroll.isShow.serviceStation = false;
 				this.enableScroll = true;
@@ -354,7 +367,9 @@
 					oilProductCode: oilProductCode ? oilProductCode : '0#',
 					juLi: juLi ? juLi : '5',
 					siteChannel: siteChannel,
-					countJuLi: points[0].distance
+					countJuLi: points[0].distance,
+					latitude: this.coordinate.latitude,
+					longitude: this.coordinate.longitude
 				}
 				let taht = this;
 				return new Promise(function(re, rj) {
@@ -369,27 +384,17 @@
 							rj(markerList.code + markerList.msg)
 							return
 						}
-						// if (markerList.data.length == 0) {
-						// 	setTimeout(() => {	
-						// 		uni.showToast({
-						// 			title: '暂无油站信息' + markerList.data.length,
-						// 			icon: 'none'
-						// 		})
-						// 	}, 500)
-						// 	rj('暂无油站信息' + markerList.data.length)
-						// 	return
-						// }
 						taht.selePrice = {
 							middlePrice: markerList.data.middlePrice,
 							minPrice: markerList.data.minPrice
 						}
-						re(markerList.data.siteGeoVos)
+						re(markerList.data.siteGeoVoList)
 					})
 				})
 			},
 			//定位处理
 			locationProcessing(markerList) {
-				console.log(markerList, '----')
+				// console.log(markerList, '----')
 				markerList.forEach((item, index) => {
 					let configure = {
 						siteId: item.id,
@@ -419,7 +424,7 @@
 					longitude: String(this.coordinate.longitude),
 					siteId: seleMark[0].siteId
 				});
-				console.log(details, '***')
+				// console.log(details, '***')
 				if (details.code !== 20000) {
 					uni.showToast({
 						title: details.msg,
@@ -485,7 +490,7 @@

 			},
 			//价格排序
-			priceSort(list){
+			priceSort(list) {
 				let sort = list.sort((a, b) => {
 					return a.enterprisePrice - b.enterprisePrice
 				});
@@ -493,32 +498,38 @@
 			},
 			//手动筛选
 			filterMarkers(e, w) {
-				let that = this 
-				return new Promise(function(re,rj){
+				let that = this
+				return new Promise(function(re, rj) {
 					w = that.$refs.addressSelector.datassFn();
 					let filterMarkers = [];
 					//第一步筛选 是否高速
-					let highSpeedMarkers = Object.keys(w).includes('highSpeed') && w.highSpeed ? e.filter((item, index) => {
+					let highSpeedMarkers = Object.keys(w).includes('highSpeed') && w.highSpeed ? e.filter((item,
+						index) => {
 						return Number(w.highSpeed) == 2 ? item : item.highSpeedMark == Number(w.highSpeed)
 					}) : e;
-					let sort = that.priceSort(highSpeedMarkers);
-					that.selePrice = sort.length !== 0?
-					{
-						middlePrice: sort[Number.isInteger((sort.length / 2)) ? (sort.length / 2)  : ((sort.length + 1) / 2) - 1].enterprisePrice,
+					
+					let copy = JSON.parse(JSON.stringify(highSpeedMarkers))
+					
+					let sort = that.priceSort(copy);
+					that.selePrice = sort.length !== 0 ? {
+						middlePrice: sort[Number.isInteger((sort.length / 2)) ? (sort.length / 2) : ((sort
+							.length + 1) / 2) - 1].enterprisePrice,
 						minPrice: sort[0].enterprisePrice,
-					}:{};
+					} : {};
 					// 获取更新之后的值 this.$nextTick()也行
-					setTimeout(()=>{w = Object.assign(w,that.$refs.footerScroll.filter());},0)
+					setTimeout(() => {
+						w = Object.assign(w, that.$refs.footerScroll.filter());
+					}, 0)
 					//第二步筛选价格 
-					setTimeout(()=>{
-						filterMarkers = Object.keys(w).includes('enterprisePrice') && w.enterprisePrice ? 
-						highSpeedMarkers.filter((item, index) => {
-							return item.enterprisePrice <= Number(w.enterprisePrice)
-						}) : highSpeedMarkers;
+					setTimeout(() => {
+						filterMarkers = Object.keys(w).includes('enterprisePrice') && w.enterprisePrice ?
+							highSpeedMarkers.filter((item, index) => {
+								return item.enterprisePrice <= Number(w.enterprisePrice)
+							}) : highSpeedMarkers;
 						re(filterMarkers)
-					},0)
+					}, 0)
 				})
-			
+
 			},
 			copy(obj) {
 				let newobj = null // 接受拷贝的新对象
@@ -536,11 +547,11 @@
 			dragMap(e, w) {
 				let that = this
 				this.enableScroll = w;
-				console.log('辅助控件触发;是否可以拖动地图1>',that.enableScroll)
+				console.log('辅助控件触发;是否可以拖动地图1>', that.enableScroll)
 				this.newMapMoveToLocation(e.longitude, e.latitude)
 				uni.$on('dragMap', function(e) {
 					that.enableScroll = e
-					console.log('辅助控件触发;是否可以拖动地图>',that.enableScroll)
+					console.log('辅助控件触发;是否可以拖动地图>', that.enableScroll)
 				})
 			}
 		}
--- a/BagStation/pages/newRoutePlanning/siteList.vue
+++ b/BagStation/pages/newRoutePlanning/siteList.vue
@@ -0,0 +1,188 @@
+<template>
+	<view class="site-list">
+		<view class="container" v-if="siteList.length">
+			<list >
+				<view class="item" v-for="item,index in siteList" :key="index">
+					<image
+						:src="item.siteImages || 'https://static.czb365.com/1647787216992.jpg?x-oss-process=image/resize,m_lfit,h_420,w_630/format,png'">
+					</image>
+					<view>{{item.siteName}}</view>
+					<view>
+						<view>{{item.address}}</view> <text>{{item.juli | adjust}}km</text>
+					</view>
+					<view>0# ￥7.94</view>
+					<view>
+						<view @click="lookPosition(item)">查看位置</view>
+						<view @click="jump(item)">查看详情</view>
+					</view>
+				</view>
+			</list>
+		</view>
+		<view v-else class="empty">
+			<image src="../../../static/img/empty.png"></image>
+			<view>当前线路附近暂无油站</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				siteList: []
+			}
+		},
+		onLoad(options) {
+			if (!options.markers) return
+			let markers = JSON.parse(decodeURIComponent(options.markers))
+			this.siteList = markers
+			console.log('site markers',markers)
+		},
+		filters: {
+			adjust(val) {
+				if (!val) return '--'
+				val = +val
+				return val.toFixed(2)
+			}
+		},
+		methods: {
+			lookPosition(item) {
+				// console.log(getCurrentPages())
+				getCurrentPages()[0].$vm.perspectives(item)
+				uni.navigateBack()
+			},
+			jump(item) {
+				let obj = {
+					siteId: item.id,
+					longitude: item.longitude,
+					latitude: item.latitude,
+				}
+				let itemS = JSON.stringify(obj)
+				// return
+				uni.navigateTo({
+					url: `../stationDetail/stationDetail?item=${itemS}&&types=map`
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	// page {
+	// 	background: #f0f0f0;
+	// }
+	.empty {
+		padding-top: 150rpx;
+		width: 100%;
+		background: #fff;
+		text-align: center;
+		image {
+			width: 450rpx;
+			height: 381rpx;
+		}
+		view {
+			color: #999;
+		}
+	}
+	.site-list {
+		min-height: 100vh;
+		.container {
+			padding: 50rpx;
+			background: #f0f0f0;
+		}
+	}
+
+	.item {
+		position: relative;
+		padding: 30rpx 30rpx 100rpx 160rpx;
+		margin-bottom: 30rpx;
+		min-height: 200rpx;
+		background: #fff;
+		// border: 1px solid #333;
+		border-radius: 15rpx;
+
+		>view {
+			&:nth-of-type(1) {
+				font-weight: 550;
+				font-size: 32rpx;
+			}
+
+			&:nth-of-type(2) {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				margin-top: 10rpx;
+				font-size: 24rpx;
+				color: #999;
+
+				view {
+					width: 80%;
+				}
+
+				// text {
+				// 	float: right;
+				// }
+			}
+
+			&:nth-of-type(3) {
+				font-weight: 550;
+				margin-top: 10rpx;
+				color: #FF8C00;
+			}
+
+			&:nth-of-type(4) {
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				width: 100%;
+				height: 80rpx;
+
+				&::before {
+					content: '';
+					position: absolute;
+					top: 0;
+					left: 50%;
+					transform: translateX(-50%);
+					width: 90%;
+					height: 1rpx;
+					background: #d3d3d3;
+				}
+
+				view {
+					display: inline-block;
+					width: 50%;
+					height: 80rpx;
+					text-align: center;
+					line-height: 80rpx;
+
+					&:nth-of-type(1) {
+						color: #1E90FF;
+					}
+
+					&:nth-of-type(2) {
+						color: #FF8C00;
+					}
+				}
+
+				&::after {
+					content: '';
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translateY(-50%);
+					width: 1rpx;
+					height: 30rpx;
+					background: #d3d3d3;
+				}
+			}
+		}
+
+		image {
+			position: absolute;
+			left: 30rpx;
+			top: 13%;
+			width: 100rpx;
+			height: 100rpx;
+		}
+	}
+</style>