znyc.dispatching.wx/pages/warnItemInfo/warnItemInfo.vue

<template>
	<view>
		<map
			subkey="WANBZ-6C56D-6P34Y-HWNMG-YHAH7-BJFP5"
			:latitude="warnItemInfo.latitude" 
			:longitude="warnItemInfo.longitude"
			scale="17"
			:markers="markers" 
			show-location="true"
			@callouttap="onSelectCar"
		>
			<view slot="callout">
				<block v-for="(item,index) in markers" :key="index">
					<cover-view :marker-id="item.id" class="callout_box">
						<cover-image class="qipao_css" src="/static/images/common/wranItemInfo_bg.png"></cover-image>
						<cover-view>{{warnItemInfo.vehicleCode}}</cover-view>
						<cover-view class="cover_line"></cover-view>
						<cover-view class="right">查车</cover-view>
						<cover-image class="right_icon" src="/static/images/common/go_right.png"></cover-image>
					</cover-view>
				</block>
			</view>
		</map>
		<view class="bot_time_card">
			<view class="list_item">
				<view class="list_item_top">
					<view class="list_item_lef">
						{{warnItemInfo.vehicleCode}} ({{warnItemInfo.vehiclePlate}})
					</view>
					<view class="list_item_right">
						<text>速度：</text>
						<text>{{warnItemInfo.speed}}km/h</text>
					</view>
				</view>
				<view class="list_item_bot">
					<view class="list_item_bot_bot">
						<view class="list_item_bot_bot_left">报警时间:</view>
						<view class="list_item_bot_bot_rig">{{warnItemInfo.gpsTime}}</view>
					</view>
					<view class="list_item_bot_bot">
						<view class="list_item_bot_bot_left">报警位置:</view>
						<view class="list_item_bot_bot_rig">{{warnItemInfo.address}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				warnItemInfo:null,
				markers:[],
			};
		},
		onLoad(options) {
			let item = JSON.parse(options.data);
			let {latitude,longitude,vehicleId} = item;
			this.warnItemInfo = item;
			this.markers =  [{
				iconPath: '/static/images/common/static.png',
				latitude,
				longitude,
				id:vehicleId,
				width: 17,
				height: 32,
				customCallout:{
					display: 'ALWAYS'
				}
			}];
		},
		methods:{
			onSelectCar(e){
				var pages = getCurrentPages();// 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				var prevPage = pages[0];  //index
				//条件编译
				//#ifdef H5 
				prevPage._data.selectCarId = e.detail.markerId; //h5中的修改方法
				//#endif
				//#ifdef MP
				prevPage.$vm._data.selectCarId = e.detail.markerId;//小程序中的修改方法
				//#endif
				uni.navigateBack({
					delta:3
				})//返回上一页面
			}
		}
	}
</script>

<style lang="scss" scoped>
map {
	width: 100vw;
	height: calc(100vh - 250rpx);
}
.callout_box{
	height: 70rpx;
	position: relative;
	display: flex;
	justify-content: center;
	font-size: 28rpx;
	padding-top: 12rpx;
	padding-left: 12rpx;
	padding-right: 12rpx;
	box-sizing: border-box;
	.qipao_css{
		width: 100%; 
		height: 70rpx;
	    position: absolute;
		left: 0;
	    top: 0;
	    z-index: 1;
	}
	cover-view{
	    position: relative;
	    z-index: 2;
	}
	.cover_line{
	    width: 2rpx;
	    height: 1em;
	    background: #E4E4E4;
	    margin: 0 16rpx;
	}
	.right{
	    color: #4680E9;
	}
	.right_icon{
		width:20rpx;
		height:20rpx;
	    position: relative;
	    z-index: 2;
	    top: 6rpx;
	}
}
.list_item{
	width: 100%;
	height: 250rpx;
	background-color: white;
	margin-bottom: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* padding: 20rpx 0rpx; */
	.list_item_top{
		height: 80rpx;
		width: 95%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		.list_item_right{
			display: flex;
			flex-direction: row;
			align-items: center;
			color: #FF582D;
			image{
				width: 32rpx;
				height: 32rpx;
				margin-right: 6rpx;
			}
		}
		.list_item_lef{
			font-weight: bold;
			color: #353535;
			display: flex;
			flex-direction: row;
			align-items: baseline;
		}
		.list_item_lef image{
			width: 35rpx;
			height: 27rpx;
			margin-right: 5px;
		}
	}
	.list_item_bot{
		width: 95%;
		display: flex;
		flex-direction: column;
		border-top: 1rpx solid rgb(231, 230, 230);
		font-size:14px;
		.list_item_bot_bot{
			display: flex;
			flex-direction: row;
			margin-top: 15rpx;
			color: #363636;
		}
		.list_item_bot_bot_left{
			width: 135rpx;
			display: flex;
			flex-wrap: nowrap;
		}
		.list_item_bot_bot_rig{
			width:  calc(100% - 175rpx);
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}
	
}
</style>