jp-commuter-ds/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>{{title}}</h4>
							<p v-if="stationList.length">开往：{{stationList[stationList.length-1].name}} </p>
							<p v-if="stationList.length">上车站点：{{downItem.name}}</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="caritemBl2" 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" v-if="false">
							<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>{{showname(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"  :is-back="false"  >
			<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"  @clickMap="carShow2" ></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,'map-now':item.currentStationStatus=='2'}"
					 >
						
						<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/plate4.png?v=1" 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 class="map-route-main" v-if="false"  >
				<!-- <view class="map-route-origin">
					<view class="map-route-circle"></view>
					<view class="map-route-name">
						1锣场
					</view>
				</view> -->
				<view class="map-route-origin map-geton">
					<view class="map-route-car">
						<img src="static/img/car.png" alt="">
					</view>
					<view class="map-route-circle">上</view>
					<view class="map-route-name">
						1锣场
					</view>
				</view>
				<view class="map-route-item map-after">
					<view class="map-route-circle"></view>
					<view class="map-route-line"></view>
					<view class="map-route-name">
						2东方大道
					</view>
				</view>
				<view class="map-route-item map-now">
					<view class="map-route-car">
						<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">
						3小天鹅
					</view>
				</view>
				<view class="map-route-item map-color">
					<view class="map-route-circle"></view>
					<view class="map-route-line"></view>
					<view class="map-route-name">
						4宿架转盘转盘
					</view>
				</view>
				<view class="map-route-item">
					<view class="map-route-car">
						<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">
						5荆棉
					</view>
				</view>
				<view class="map-route-item map-geton">
					<view class="map-route-car">
						<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">
						6跃进村
					</view>
				</view>
				<view class="map-route-item">
					<view class="map-route-circle"></view>
					<view class="map-route-line"></view>
					<view class="map-route-name">
						7变电站
					</view>
				</view>
				<view class="map-route-item">
					<view class="map-route-circle"></view>
					<view class="map-route-line"></view>
					<view class="map-route-name">
						8跃进村
					</view>
				</view>
				<view class="map-route-item">
					<view class="map-route-circle"></view>
					<view class="map-route-line"></view>
					<view class="map-route-name">
						9变电站
					</view>
				</view>
			</view>
		
		</view>
		<view class="map-route-foot">
			<view class="remind-btn" v-if="false"   @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-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>