jp-car-phone/pages/route/index.vue

<template>
	<view>
		<car-common    ref="common"  ></car-common>
		<u-modal  v-model="caritemBl" v-if="stationList.length" >
				<view class="slot-content">
						<h4>{{stationList[0].name}} → {{stationList[stationList.length-1].name}}</h4>
				</view>
				<view class="slot-content">
					{{caritem.licensePlateNumber}}{{caritem.driverInfo.name}}{{caritem.driverInfo.phone}}
				</view>
		</u-modal>
		
		
		<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" @onload="mapdown"></carmap>
		
		<view class="map-info">
			<view class="map-text" v-if="stationList.length">
				<h4>{{stationList[0].name}} → {{stationList[stationList.length-1].name}}</h4>
				<p>首班：{{routeInfo.startTime}}  末班：{{routeInfo.endTime}}</p>
			</view>
		
		
			<view class="map-btn" @click="reverse">
				<u-icon name="swap" custom-prefix="custom-icon"  color="#2979ff"></u-icon>
				<span>换向</span>
			</view>
		</view>
		<view class="map-route">
			<view class="map-route-head"   >
				<view  >上车提醒</view>
				<view  >
					 <u-radio-group v-model="downItem.isRemind" @change="radioGroupChange" >
					 	<u-radio 
					 	 
					 		v-for="(dio, index) in radiolist" :key="index" 
					 		:name="dio.isRemind"
					 		>
					 		{{dio.name}}
					 	</u-radio>
					 </u-radio-group>
				</view>
				 
			</view>
			 
			<view class="map-route-main" id="map-route-main">
				
				<template v-for="item,i in stationList">
					<view   class="scroll-view-item" 
					:class="{'map-route-origin map-geton ':i==0,'map-route-item':i!=0,'map-geton':downid==item.id,'map-down':downid==item.id}"
					 >
						
						<view class="map-route-car" v-if="showCar(item)">
							<img src="static/img/car.png" alt=""  @click="carShow(item)">
						</view>
						<view class="map-route-circle"  @click="downBtn(item)" :style="i==0&&downid!=item.id?'border: 3px solid #1e8abd;':''">
			
							<img src="static/img/plate.png" style=" width: 12px; margin-top: 3px;" v-if="downid==item.id" alt="">
						</view>
						
						<view class="map-route-line" @click="downBtn(item)"></view>
						<view class="map-route-name" @click="downBtn(item)">
							{{item.name}}
						</view>
					</view>
				</template> 
			</view>
		
			
		</view>
		
	</view>
</template>

<script>
	import api from './index.js'
	export default   api
</script>
	
<style scoped lang="scss">
	.map-route {
		border-top: 10px solid #f7f7f7;
		background-color: #fff;
		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 {
			padding: 10px;
			position: relative;
			overflow-x: scroll !important;
			display: -webkit-box;
		}
	}
	.map-info{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 20rpx;
	}
	.map-text{
		h4{
			font-size: 16px;
		}
		p{
			margin-top: 10rpx;
			color:#999;
		}
	}
	.map-btn{
		border: 1px solid #007AFF;
		color:#007AFF;
		padding: 5px 15px;
		border-radius:30px ;
		span{
			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-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-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: 2px;
	
				img {
					height: 100%;
					width: 100%;
				}
			}
	
		}
		.map-route-item.map-color{	
			.map-route-circle {
				border: 3px solid #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-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-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
			}
		}
		.add-foot {
			position: fixed;
			background-color: #fff;
			border-top: 1px solid #eee;
			z-index: 999;
			bottom: 0;
			left: 0;
			right: 0;
			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;
			}
		}
		.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>