1.3版本

apis/route.js

@@ -10,4 +10,12 @@ export function routeDetail(data) {
 		
 		url: '/mobile/passengerApi/routeDetail'
 	})
+}
+
+export function routeShiftList(data) {
+	return request({
+		method: 'post',
+		data: data,
+		url: '/mobile/passengerApi/routeShiftList'
+	})
 }

components/Carmap.vue

@@ -1,7 +1,9 @@
 <template>
 	<view>
 		<view id="container" :style="myStyle"></view>
-		
+	
+			<u-icon name="map-fill" v-if="false" class="input-card"  style="width: 24rem;top: 130px;width: 20px;height: 20px;" color="#999" size="40"></u-icon>
+			
 	</view>
 </template>
 
@@ -9,14 +11,10 @@
 		import MapLoader from '@/utils/AMap'
 	export default {
 		name:"Carmap",
-		props:{
-			myStyle: {
-				require: false,
-				default: "width: 100%; height: 140px;",
-			},
-		},
+		
 		data() {
 			return {
+				myStyle:"width: 100%; height: 140px;",
 				longitude: 112.276527,
 				latitude: 30.306427,
 				AMap:null,
@@ -55,6 +53,7 @@
 				}], 
 				start:{},
 				end:{},
+				carList:[],
 				covers: [
 					{
 						longitude:112.273867,
@@ -70,6 +69,36 @@
 			};
 		},
 		methods:{
+			setCarList(sz){
+					
+					if(this.AMap==null){
+						return
+					}
+					for(var i in this.carList){
+						this.mapbus.remove(this.carList[i]);
+					}
+					var icon0 = require("@/static/img/icon-busPosition.png");
+					
+					this.carList=[]
+					for(var i in sz){
+						var ob=sz[i];
+						var ob1=new AMap.Marker({
+							map: this.mapbus,
+							position: [ob.longitude,ob.latitude],
+							offset: new AMap.Pixel(-5, -5),
+							
+							content:"<img src='"+icon0+"' style='height: 30px;width: 30px' />",
+							
+							zIndex:99,
+							autoRotation: true,
+						});
+						this.carList.push(ob1)
+					}
+					
+			},
+			setMyStyle(s){
+				this.myStyle=s;
+			},
 			setStartend(sz){
 				this.start.setPosition( [sz[0].longitude,sz[0].latitude]);
 			this.end.setPosition( [sz[sz.length-1].longitude,sz[sz.length-1].latitude]);
@@ -257,6 +286,33 @@
 	}
 </script>
 
-<style>
+<style scoped>
+/*去除下标*/
+.amap-logo{
+display: none;
+}
+.amap-copyright{
+opacity:0;
+    font-size: 1px;
+}
 
+.input-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border-radius: .25rem;
+  width: 22rem;
+  border-width: 0;
+  border-radius: 0.4rem;
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  padding: 0.75rem 0.75rem;
+}
 </style>

pages/buytickets/selectSite.js

@@ -19,7 +19,8 @@ export default {
 			upid:'',
 			shiftInfo: {
 
-			},
+			},
+			mapopen:false,
 			list: [{}, {}],
 			//车的位置
 			car: {
@@ -50,7 +51,16 @@ export default {
 		Carmap
 	},
 
-	methods: {
+	methods: {
+		mapopenBtn(){
+			this.mapopen=!this.mapopen;
+			if(this.mapopen){
+				this.$refs.amap.setMyStyle("width: 100%; height: 240px;")
+			}else{
+				this.$refs.amap.setMyStyle("width: 100%; height: 140px;")
+				
+			}
+		},
 		downBtn(item) {
 			
 			if (!this.look&&item.id==this.car.currentStationId&&this.upid!=item.id) {

pages/buytickets/selectSite.vue

@@ -1,6 +1,16 @@
 <template>
 	<view>
-		<car-common   :mytitle="title" ref="common"></car-common>
+		<car-common     ref="common"></car-common>
+		<u-navbar :title="title"  >
+			<view class="slot-wrap"></view>
+			<view class="navbar-right" @click="mapopenBtn"  >
+				<u-icon name="plus-circle" v-if="!mapopen" color="#999" size="28"></u-icon>
+				<span v-if="!mapopen">放大地图</span>
+				<u-icon name="minus-circle" v-if="mapopen" color="#999" size="28"></u-icon>
+				<span v-if="mapopen">缩小地图</span>
+			</view>
+		</u-navbar>
+		
 		<carmap ref="amap"></carmap>
 
 		<view class="map-info">
@@ -413,5 +423,18 @@
 			text-align: center;
 			line-height: 90rpx;
 		}
-	}
+	}
+	.navbar-right {
+			display: flex;
+			margin-right: 20rpx;
+			span{
+				color:rgb(96, 98, 102);
+				margin-left: 3px;
+			}
+		}
+		.slot-wrap {
+				display: flex;
+				align-items: center;
+				flex: 1;
+			}
 </style>

pages/index/index.js

@@ -94,16 +94,9 @@ export default {
 				})
 			},
 			gotoLine(item){
-				if(item.id){
-					this.carhelp.set("form",{});
-					uni.navigateTo({
-						url:'/pages/buytickets/selectSite?id='+item.id
-					})
-				}else{
-					uni.navigateTo({
-						url:'/pages/route/index?id='+item.routeId
-					})
-				}
+				uni.navigateTo({
+					url:'/pages/route/index?id='+item.routeId+"&upid="+item.startStationId
+				})
 				
 			},
 			getPoint() {
@@ -127,8 +120,11 @@ export default {
 				})
 			},
 			passengerNearbyStation(){
-				// this.latitude = '30.306452';
-				//this.longitude = '112.27642';
+				if(process.car.SIMPLE_RUN){
+					this.latitude = '30.306452';
+					this.longitude = '112.27642';
+				}
+			
 				
 				var form={
 					longitude:this.longitude,

pages/route/index.js

@@ -6,12 +6,12 @@ import Carmap from '@/components/Carmap.vue'
 export default {
 	data() {
 		return {
-
+			mapopen:false,
 			initBl: false,
 			title: '乘车人',
 			show: false,
 			id: 0, // 使用 marker点击事件 需要填写id
-
+			upid:'',
 			//地图居中后的位置
 			longitude: 112.276527,
 			latitude: 30.306427,
@@ -19,7 +19,7 @@ export default {
 
 			},
 			list: [{}, {}],
-			 
+			 carList:[],
 			stationList: [],
 			//个人
 			info: {
@@ -37,7 +37,41 @@ export default {
 		Carmap
 	},
 
-	methods: {
+	methods: {
+		showCar(item){
+			for(var i in this.carList){
+				var car= this.carList[i]
+				if(car.currentStationId==item.id){
+					return true;
+				}
+			}
+			return false;
+		},
+		getCar(){
+			if(this.stationList.length==0){
+				return;
+			}
+			var obj={
+				routeId:this.id,
+				startStationId:this.stationList[0].id,
+			}
+			API.routeShiftList(obj).then((response) => {
+				this.carList=response.data;
+				this.$refs.amap.setCarList(response.data);
+				
+			}).catch(error => {
+				this.$refs.common.showLoading(false,error)
+			})
+		},
+		mapopenBtn(){
+			this.mapopen=!this.mapopen;
+			if(this.mapopen){
+				this.$refs.amap.setMyStyle("width: 100%; height: 240px;")
+			}else{
+				this.$refs.amap.setMyStyle("width: 100%; height: 140px;")
+				
+			}
+		},
 		downBtn(item) {
 			
 				this.$refs.amap.setCenter(item);
@@ -52,6 +86,7 @@ export default {
 		},
 		reverse(){
 			this.stationList.reverse();
+			this.getCar()
 			this.$refs.amap.setStartend(this.stationList);
 		},
 		 
@@ -59,8 +94,17 @@ export default {
 			
 			this.$refs.common.showLoading()
 
-			API.routeDetail(this.id).then((response) => {
-				this.stationList=response.data.stationInfoList;
+			API.routeDetail(this.id).then((response) => {
+				
+				var  list=response.data.stationInfoList;
+				if(this.upid&&list.length){
+					
+					if(this.upid==list[list.length-1].id){
+						list.reverse();
+					}
+					this.upid="";
+				}
+				this.stationList=list;
 				this.$refs.common.showLoading(false)
 				
 				var point = [];
@@ -109,7 +153,7 @@ export default {
 			}else{
 					this.getLocation()
 			}
-		
+			this.getCar();
 			var pages = getCurrentPages();
 			var page = (pages[pages.length - 1]).route;
 			if (page == "pages/route/index") {
@@ -139,7 +183,7 @@ export default {
 
 	},
 	onLoad(op) {
-
+		this.upid=op.upid;
 		this.id = op.id
 	},
 	onUnload() {

pages/route/index.vue

@@ -1,7 +1,15 @@
 <template>
 	<view>
-		<car-common  :mytitle="title"  ref="common"  ></car-common>
-		
+		<car-common    ref="common"  ></car-common>
+		<u-navbar :title="title"  >
+			<view class="slot-wrap"></view>
+			<view class="navbar-right" @click="mapopenBtn"  >
+				<u-icon name="plus-circle" v-if="!mapopen" color="#999" size="28"></u-icon>
+				<span v-if="!mapopen">放大地图</span>
+				<u-icon name="minus-circle" v-if="mapopen" color="#999" size="28"></u-icon>
+				<span v-if="mapopen">缩小地图</span>
+			</view>
+		</u-navbar>
 		<carmap ref="amap"></carmap>
 		
 		<view class="map-info">
@@ -21,9 +29,12 @@
 			<view class="map-route-main">
 				<template v-for="item,i in stationList">
 					<view   class="scroll-view-item" 
-					:class="{'map-route-origin':i==0,'map-route-item':i!=0}"
+					:class="{'map-route-origin map-geton ':i==0,'map-route-item':i!=0}"
 					 @click="downBtn(item)">
 						
+						<view class="map-route-car" v-if="showCar(item)">
+							<img src="static/img/car.png" alt="">
+						</view>
 						<view class="map-route-circle"></view>
 						<view class="map-route-line"></view>
 						<view class="map-route-name">
@@ -41,21 +52,23 @@
 	export default   api
 </script>
 <style scoped lang="scss">
-	.map-route{
+	.map-route {
 		border-top: 10px solid #f7f7f7;
 		background-color: #fff;
-		
-		.map-route-head{
-			font-size: 18px;
-			color:#007AFF;
+		padding-bottom: 60px;
+	
+		.map-route-head {
+			font-size: 16px;
+			color: #007AFF;
 			text-align: center;
 			line-height: 40px;
 			border-bottom: 1px solid #eee;
 		}
-		.map-route-main{
+	
+		.map-route-main {
 			padding: 10px;
 			position: relative;
-			overflow-x: scroll!important;
+			overflow-x: scroll !important;
 			display: -webkit-box;
 		}
 	}
@@ -84,110 +97,238 @@
 			margin-left: 6rpx;
 		}
 	}
-	.map-route-origin{
-		position: relative;
-		height: 200px;
-		width:15px;
-		.map-route-circle{
-			position: absolute;
-			left: 0;
-			top:30px;
-			height: 15px;
-			width: 15px;
-			border-radius: 50%;
-			background-color: #999;
-			border: 3px solid #fff;
-			box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
-			z-index: 99;
-		}
-		.map-route-name{
-			position: absolute;
-			top: 50px;
-			width: 16px;
-			line-height: 16px; 
-			z-index: 999;
-			left: 3px;
-		}
-	}
-	.map-route-item{
-		position: relative;
-		height: 200px;
-		width: 60px;
-		.map-route-circle{
-			position: absolute;
-			right: -2px;
-			top:30px;
-			height: 15px;
+	.map-route-origin {
+			position: relative;
+			height: 200px;
 			width: 15px;
-			border-radius: 50%;
-			background-color: #fff;
-			border: 3px solid #1677ff;
-			z-index: 99;
-		}
-		.map-route-line{
-			height:6px;
-			background-color: #1677ff;
-			width:55px;
-			position: absolute;
-			left: 0px;
-			top:35px;
-			z-index: 9;
+			.map-route-circle {
+				position: absolute;
+				left: 0;
+				top: 30px;
+				height: 15px;
+				width: 15px;
+				border-radius: 50%;
+				background-color: #999;
+				border: 3px solid #fff;
+				box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+				z-index: 99;
+			}
+			.map-route-name {
+				position: absolute;
+				top: 50px;
+				width: 16px;
+				line-height: 16px;
+				z-index: 999;
+				left: 3px;
+			}
+			&.map-geton{
+				.map-route-circle {
+					width: 24px;
+					background-color: #fff;
+					height: 24px;
+					border: 3px solid #25ad3b;
+					color:#25ad3b;
+					text-align: center;
+					line-height: 18px;
+					font-size:10px;
+					top:25px;
+					left: -3px;
+				}
+				.map-route-car {
+					height: 30px;
+					width: 30px;
+					position: absolute;
+					right: -10px;
+					top: 2px;
+				
+					img {
+						height: 100%;
+						width: 100%;
+					}
+				}
+			}
 		}
-		.map-route-name{
-			position: absolute;
-			top: 50px;
-			width: 16px;
-			line-height: 16px; 
-			z-index: 999;
-			right: -3px;
-			text-align: center;
+	
+		.map-route-item {
+			position: relative;
+			height: 200px;
+			width: 60px;
+			.map-route-car {
+				height: 30px;
+				width: 30px;
+				position: absolute;
+				right: -10px;
+				top: 2px;
+			
+				img {
+					height: 100%;
+					width: 100%;
+				}
+			}
+			.map-route-circle {
+				position: absolute;
+				right: -2px;
+				top: 30px;
+				height: 15px;
+				width: 15px;
+				border-radius: 50%;
+				background-color: #fff;
+				border: 3px solid #1677ff;
+				z-index: 99;
+			}
+	
+			.map-route-line {
+				height: 6px;
+				background-color: #1677ff;
+				width: 55px;
+				position: absolute;
+				left: 0px;
+				top: 35px;
+				z-index: 9;
+			}
+	
+			.map-route-name {
+				position: absolute;
+				top: 50px;
+				width: 16px;
+				line-height: 16px;
+				z-index: 999;
+				right: -3px;
+				text-align: center;
+			}
 		}
-	}
-	.map-route-item.map-now{
-		.map-route-car{
-			height:30px;
-			width: 30px;
-			position: absolute;
-			left: 10px;
-			top: 5px;
-			img{
-				height: 100%;
-				width: 100%;
+	
+		.map-route-item.map-now {
+			.map-route-car {
+				height: 30px;
+				width: 30px;
+				position: absolute;
+				left: 10px;
+				top: 2px;
+	
+				img {
+					height: 100%;
+					width: 100%;
+				}
 			}
+	
 		}
-		.map-route-circle{
-			border: 3px solid #ff6200;
+		.map-route-item.map-color{	
+			.map-route-circle {
+				border: 3px solid #ff6200;
+			}
+			
+			.map-route-line {
+				background-color: #ff6200;
+			}
 		}
-		.map-route-line{
-			background-color: #ff6200;
+	
+		.map-route-item.map-after {
+			.map-route-circle {
+				border: 3px solid #999;
+			}
+	
+			.map-route-line {
+				background-color: #999;
+			}
 		}
-	}
-	.map-route-item.map-after{
-		.map-route-circle{
-			border: 3px solid #999;
+	
+		.map-route-item.map-geton {
+			.map-geton-mark {
+				width:20px;
+				height: 20px;
+				right: 0;
+				position: absolute;
+				right: -4px;
+				top: 5px;
+				img {
+					height: 100%;
+					width: 100%;
+				}
+			}
+	
+			.map-route-circle {
+				width: 24px;
+				height: 24px;
+				border: 3px solid #25ad3b;
+				color:#25ad3b;
+				text-align: center;
+				line-height: 18px;
+				font-size:10px;
+				top:25px;
+				right: -8px;
+			}
+	
+			.map-route-name {
+				color: #25ad3b
+			}
 		}
-		.map-route-line{
-			background-color: #999;
+	.map-route-item.map-geton1 {
+			.map-geton-mark {
+				width: 20px;
+				height: 20px;
+				right: 0;
+				position: absolute;
+				right: -4px;
+				top: 5px;
+	
+				img {
+					height: 100%;
+					width: 100%;
+				}
+			}
+	
+			.map-route-circle {
+				border: 3px solid #25ad3b;
+			}
+	
+			.map-route-name {
+				color: #25ad3b
+			}
 		}
-	}
-	.map-route-item.map-geton{
-		.map-geton-mark{
-			width: 20px;
-			height: 20px;
+		.add-foot {
+			position: fixed;
+			background-color: #fff;
+			border-top: 1px solid #eee;
+			z-index: 999;
+			bottom: 0;
+			left: 0;
 			right: 0;
-			position: absolute;
-			right: -4px;
-			top: 5px;
-			img{
-				height: 100%;
-				width: 100%;
+			height: 90rpx;
+			display: flex;
+			justify-content: space-between;
+	
+			.add-foot-price {
+				display: flex;
+				align-items: center;
+				padding-left: 20rpx;
+				font-size: 32rpx;
+	
+				span {
+					color: #1677ff;
+				}
+			}
+	
+			.add-foot-btn {
+				width: 240rpx;
+				background-color: #1677ff;
+				color: #fff;
+				font-size: 32rpx;
+				text-align: center;
+				line-height: 90rpx;
 			}
 		}
-		.map-route-circle{
-			border: 3px solid #25ad3b;
-		}
-		.map-route-name{
-			color:#25ad3b
-		}
-	}
+		.navbar-right {
+				display: flex;
+				margin-right: 20rpx;
+				span{
+					color:rgb(96, 98, 102);
+					margin-left: 3px;
+				}
+			}
+			.slot-wrap {
+					display: flex;
+					align-items: center;
+					flex: 1;
+				}
 </style>