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

<template>
	<view>
		<car-common    ref="common"  ></car-common>
	 
		<u-popup v-model="show1" mode="center" border-radius="20">
					<view class="sitePopup">
						<view class="sitePopup-head">
							<h4>9路支线</h4>
							<p>开往：红光路加气站 上车站点：玉桥小区</p>
						</view>
						<view class="sitePopup-main">
							<view class="remind-item-bg remind-item-bg1 ":class="popid==0?'active':''"  @click="selectBtn(0)" >							
								<view class="remind-item remind-item1">
									<u-icon name="icon_tixing-01" custom-prefix="custom-icon" size="72"  color="#fff"></u-icon>
									<span>无提醒</span>
								</view>
							</view>
							<view class="remind-item-bg remind-item-bg2 " :class="popid==1?'active':''" @click="selectBtn(1)">	
								<view class="remind-item remind-item2">
									<u-icon name="icon_tixing-02" custom-prefix="custom-icon" size="72"  color="#fff"></u-icon>
									<span>距离1站</span>
								</view>
							</view>
							<view class="remind-item-bg remind-item-bg3" :class="popid==2?'active':''" @click="selectBtn(2)">
								<view class="remind-item remind-item3">
									<u-icon name="icon_tixing-03" custom-prefix="custom-icon" size="72"  color="#fff"></u-icon>
									<span>距离2站</span>
								</view>
							</view>
						</view>
						<view class="sitePopup-foot">
							<view class="sitePopup-btn" @click="show1 = false">取消</view>
							<view class="sitePopup-btn" @click="radioGroupChange">确定</view>
						</view>
					</view>
				</u-popup>
			 
				
				<u-popup v-model="caritemBl" v-if="stationList.length" mode="center" closeable="true" border-radius="20">
					<view class="sitePopup">
						<view class="sitePopup-head">
							<h1>{{stationList[0].name}} → {{stationList[stationList.length-1].name}}</h1>
							<p>首班：{{routeInfo.startTime}}  末班：{{routeInfo.endTime}}</p>
						</view>
						<view class="sitePopup-main">
							<view class="sitePopup-driver">				
								<view class="driver-info">
									<view class="driver-head">
										<u-avatar :src="caritem.driverInfo.faceImage" size="100"></u-avatar>
									</view>
									<view class="driver-text">
										<h2>{{caritem.licensePlateNumber}}</h2>
										<p>{{caritem.driverInfo.name}}  {{caritem.driverInfo.phone}}</p>
									</view>
								</view>
								<u-icon name="dianhua" v-if="caritem.driverInfo.phone"  @click="makePhoneCall(caritem.driverInfo.phone)"  custom-prefix="custom-icon" size="80" color="#1778fb"></u-icon>
							</view>
						</view>
					</view>
				</u-popup>
			
		
		<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" v-if="false" >
				<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-head" >
			 	<view>{{dis}}</view>
			 	&lt;&lt;&lt; 下方列表可以左右滑动 &gt;&gt;&gt;
			 </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 class="map-route-foot">
			<view class="remind-btn" @click="show1 = true,popid=downItem.isRemind" v-show="!downItem.remindId">
				 
					<u-icon name="md-alarm" custom-prefix="custom-icon" color="#666" size="44"></u-icon>
					<span>设置提醒</span>
		 
			</view>
			<view class="remind-btn" @click="show1 = true,popid=downItem.isRemind" v-show="downItem.remindId" style=" background-color: blue; color: #fff; ">
				
				<u-icon name="md-alarm" custom-prefix="custom-icon" color="#fff" size="44"></u-icon>
					<span>提前{{downItem.isRemind}}站</span>

			</view>
				
			<view class="reset-btn" v-if="false">
				<u-icon name="shuaxin" custom-prefix="custom-icon" color="#666" size="44"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import api from './index.js'
	export default   api
</script>
	
<style scoped lang="scss">
	.map-route-foot{
		position: fixed;
		bottom:10px;
		right: 0px;
		display: flex;
		justify-content: flex-end;
		z-index: 999;
		.remind-btn{
			background-color: #fff;
			height: 40px;
			width: 120px;
			border-radius: 20px;
			line-height: 40px;
			border: 1px solid #eee;
			margin-right: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		span{
			margin-left: 5px;
		}
		.reset-btn{
			background-color: #fff;
			height: 40px;
			width: 40px;
			border-radius: 50%;
			text-align: center;
			line-height: 40px;
			border: 1px solid #eee;
			margin-right: 10px;
		}
	}
	.sitePopup{
			width: 300px;
			padding: 15px;
			border: 10px;
		}
		.sitePopup-head{
			h4{
				font-size: 18px;
			}
		}
		.sitePopup-driver{
			display: flex;
			width: 100%;
			padding-top: 15px;
			border-top: 1px solid #f7f7f7;
			justify-content: space-between;
			.driver-info{
				display: flex;
				.driver-text{
					margin-left: 10px;
				}
			}
		}
		.sitePopup-main{
			display: flex;
			justify-content: space-between;
			margin-top: 20px;
			.remind-item{
				height: 80px;
				width: 80px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-radius: 10px;
				border: 2px solid #fff;
				span{
					color:#fff;
				}
			}
			.remind-item1{
				background-color: #ff6666;
			}
			.remind-item2{
				background-color: #389e0d;
			}
			.remind-item3{
				background-color: #4291ff;
			}
			.remind-item-bg{
				border: 2px solid #fff;
			}
			.remind-item-bg1.active{
				border: 2px solid #ff6666;
				border-radius:10px;
			}
			.remind-item-bg2.active{
				border: 2px solid #389e0d;
				border-radius:10px;
			}
			.remind-item-bg3.active{
				border: 2px solid #4291ff;
				border-radius:10px;
			}
		}
		.sitePopup-foot{
			display: flex;
			justify-content: space-between;
			margin-top: 20px;
			.sitePopup-btn{
				background-color: #ddd;
				flex: 1;
				margin: 5px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				border-radius: 20px;
			}
		}
	.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: 20px;
			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>