wangluohuoyun-huozhuapp/pages/order/map.nvue

<template>
	<view class="content">
		<div class="top_btn">
			<div class="returnPage">
				<image class="return-icon" src="@/static/images/order/returnPage.png" mode='widthFix'
					@click="returnPage">
				</image>
			</div>
			<div class="qiehuan" @click="mapChange">
				<image class="qiehuan-icon" src="@/static/images/order/qiehuan.png" mode='widthFix'>
				</image>
				<text class="tips">{{tips}}</text>
			</div>
		</div>
		<div class="infoBox">
			<div class="infoBox_left">
				<text class="title">{{infoData.cargoOwnerStatus}}</text>
				<text class="address estimate">预计{{infoData.tranEndDate}}送达</text>
			</div>
			<div class="infoBox_right">
				<div class="send">
					<text class="title">{{infoData.sendCity}}</text>
					<text class="address">{{infoData.sendArea}}</text>
				</div>
				<image class="jt-icon" src="@/static/images/order/jt.png" mode='widthFix'>
				</image>
				<div class="end">
					<text class="title">{{infoData.unloadCity}}</text>
					<text class="address">{{infoData.unloadArea}}</text>
				</div>
			</div>
		</div>
		<map v-if="polyline[0].points.length > 0" ref="myMap" id="myMap" :markers="markers" :polyline="polyline"
			:latitude="polyline[0].points[0].latitude" :longitude="polyline[0].points[0].longitude"
			style="width: 100%; height: 2000rpx" @updated="test" />
		<!-- <view v-if="polyline[0].points.length > 0" class="hcp-bottom">
			<button v-if="startMove" @click="handleStopMove()">暂停移动</button>
			<button v-else @click="handleStartMove()">开始移动</button>
		</view> -->
		<u-modal :show="show" :title="title" :showCancelButton="true" confirmText="确定支付" @close="show=false"
			@cancel="show = false" @confirm="payment" :closeOnClickOverlay="true">
			<div class="slot-content" style="align-items: flex-start;">
				<text style="width: 270px;">{{content}}</text>
			</div>
		</u-modal>
	</view>
</template>

<script>
	const img = '/static/logo.png';
	import * as config from '@/config'
	let baseUrl = config.def().baseUrlNew
	export default {
		data() {
			return {
				scaleNum: 10,
				mapContext: null, //地图对象
				startMove: false, //是否开始回放
				nextPointIndex: 1, //下一个坐标点的索引
				durationTime: 1000, //相邻两点动画持续时长默认1秒
				//路线信息
				polyline: [{
					width: 20,
					points: [],
					arrowLine: true,
					color: '#3591FC',
				}],
				//标记点(即移动标记物)
				markers: [{
					id: 1,
					width: 40,
					height: 40,
					latitude: 0,
					longitude: 0,
					iconPath: img,
					anchor: {
						x: 0.5,
						y: 1
					}
				}],
				infoData: {},
				tips: "切换北斗轨迹",
				title: "支付",
				content: "",
				show: false,
				obj: {}
			}
		},
		onLoad(option) {
			this.id = option.id
			this.infoData = option
			let date = new Date(this.infoData.tranEndDate)
			if (!this.infoData.lookBeiDouDate) {
				this.infoData.lookBeiDouDate = ""
			}
			let getMonth = date.getMonth() + 1
			let day = date.getDate()
			this.infoData.tranEndDate = getMonth + "月" + day + "日"
			this.getTrack(0) //获取轨迹信息(只做演示，未进行远程请求)
		},
		methods: {
			returnPage() {
				// uni.$u.route('/pages/order/index');
				uni.switchTab({
					url: '/pages/order/index'
				});
			},
			// isSameDay(date, dateB){
			// const {
			// 	getFullYear,
			// 	getMonth,
			// 	getDate] = Date.prototypereturn[getFullYear, getMonth, getDate].every(fn =>
			// 	return fn.call(dateA) === fn.cal1(dateB)
			// },
			countDay(d1, d2) {
				var days = d1 - d2
				var time = parseInt(days / (1000 * 60 * 60 * 24))
				time = time ==0?time+1:time//为零代表当天
				return time 
			},
			mapChange() {
				if (this.tips == "切换北斗轨迹") {
					if (this.infoData.lookBeiDouDate) { //查看北斗最新时间
						let date1 = this.infoData.lookBeiDouDate.split(" ")[0]
						let date2 = new Date()
						let year = date2.getFullYear();
						let month = (date2.getMonth() + 1) < 10 ? "0" + (date2.getMonth() + 1) : date2.getMonth() + 1;
						let day = date2.getDate() < 10 ? "0" + date2.getDate() : date2.getDate();
						let date3 = year + "-" + month + "-" + day
						if(this.infoData.cargoOwnerStatus == "已完结"){//如果订单完成 用卸车时间计算天数
							 date3 = this.infoData.unloadingDate.split(" ")[0]//卸车时间
						}
						if (date1 != date3) { //查看北斗更新时间 != 今天
							// unloadingDate 卸车时间
							var k1 = new Date(new Date().toLocaleDateString()).getTime() //当前零点时间蹉
							if(this.infoData.cargoOwnerStatus == "已完结"){
								k1 = new Date(new Date(this.infoData.unloadingDate).toLocaleDateString()).getTime() //卸车时间
							}
							var k2 = new Date(new Date(this.infoData.lookBeiDouDate).toLocaleDateString()).getTime()
							this.obj.amountMoney = this.countDay(k1, k2)
							this.content = "本次查看北斗轨迹将从您的账户余额扣除 " + this.obj.amountMoney + " 元，确认支付查看轨迹?"
							this.show = true
						} else { ////查看北斗更新时间 == 今天（不需要支付）
							this.show = false
							this.getTrack(1) //北斗轨迹
						}
					} else { //没有更新时间证明该订单没有查看过北斗轨迹（需支付）
						let date1 = this.infoData.loadingDate.split(" ")[0]
						let date2 = new Date()
						let year = date2.getFullYear();
						let month = (date2.getMonth() + 1) < 10 ? "0" + (date2.getMonth() + 1) : date2.getMonth() + 1;
						let day = date2.getDate() < 10 ? "0" + date2.getDate() : date2.getDate();
						let date3 = year + "-" + month + "-" + day
						// if(this.infoData.cargoOwnerStatus == "已完结"){//如果订单完成 用卸车时间计算天数
						// 	 date3 = this.infoData.unloadingDate.split(" ")[0]//卸车时间
						// }
						if (date1 == date3) { //装车时间==当前时间
							this.obj.amountMoney = 1
							this.content = "本次查看北斗轨迹将从您的账户余额扣除 " + this.obj.amountMoney + " 元，确认支付查看轨迹?"
							this.show = true
						} else { //装车时间 ！= 当前时间  且没有查看过北斗轨迹
							var k1 = new Date(new Date().toLocaleDateString()).getTime() //当前零点时间蹉
							var k2 = new Date(new Date(this.infoData.loadingDate).toLocaleDateString()).getTime()
							if(this.infoData.cargoOwnerStatus == "已完结"){//如果订单完成 用卸车时间计算天数
								// let date3 = this.infoData.unloadingDate.split(" ")[0]//卸车时间
								k1 = new Date(new Date(this.infoData.unloadingDate).toLocaleDateString()).getTime()
							}
							this.obj.amountMoney = this.countDay(k1, k2)+1//加1算装车当天
							this.show = true
							this.content = "本次查看北斗轨迹将从您的账户余额扣除" + this.obj.amountMoney + "元，确认支付查看轨迹?"
						}
					}
				} else {
					this.tips == "切换北斗轨迹"
					this.getTrack(0)
				}
			},
			payment() {
				if (this.infoData.compName != "个人货主") { //查看北斗轨迹 标识（1个人2企业）
					this.obj.companyId = this.infoData.compId
					this.obj.flag = 2
				} else {
					this.obj.commonId = this.infoData.cargoCommonId
					this.obj.flag = 1
				}
				this.obj.orderId = this.infoData.id
				this.obj.orderNo = this.infoData.orderNo
				uni.request({
					url: baseUrl + '/hyCargoOwnerCapitalInfo/api/lookBeiDou',
					data: this.obj,
					method: 'post',
					header: {
						'content-type': 'application/json' //'application/x-www-form-urlencoded; charset=UTF-8',
					},
					success: (res) => {
						this.show = false
						if (res.data.code == 200) {
							this.getTrack(1) //调北斗
						} else {
							uni.showToast({
								title: '支付失败',
								icon: 'none',
								duration: 2000
							})
							return
						}
					}
				})
			},
			// /hyOrderTravelPath/orderPath   
			//模拟获取远程数据
			getTrack(num) {
				if (num == 0) { //平台轨迹
					uni.request({
						url: baseUrl + '/hyOrderTravelPath/getInfo',
						data: {
							orderId: this.id,
							currentPage: 1,
							pageSize: 9999
						},
						method: 'get',
						header: {
							'content-type': 'application/json' //'application/x-www-form-urlencoded; charset=UTF-8',
						},
						success: (res) => {
							if (res.data.code == 200) {
								if (res.data.data.records.length >0) {
									var trajectory = []
									for (let i = 0; i < res.data.data.records.length; i++) {
										let maplist = []
										if (res.data.data.records[i].longitudeLatitude) {
											maplist = JSON.parse(res.data.data.records[i]
												.longitudeLatitude)
											for (let j = 0; j < maplist.length; j++) {
												trajectory.push({
													latitude: maplist[j].latitude,
													longitude: maplist[j].longitude
												})
											}
										}
									}
									this.polyline[0].points = trajectory
								} else {
									uni.showToast({
										title: '暂无运输轨迹',
										icon: 'none',
										duration: 2000
									})
									return
								}
							}
						}
					})
				} else if (num == 1) {
					uni.request({
						url: baseUrl + '/hyOrderTravelPath/orderPath   ',
						data: {
							orderId: this.id,
						},
						method: 'post',
						header: {
							'content-type': 'application/json' //'application/x-www-form-urlencoded; charset=UTF-8',
						},
						success: (res) => {
							if (res.data.code == 200) {
								this.tips = "切换平台轨迹"
								if (res.data.data.longitudeLatitude) {
									var trajectory = []
									var patharr = JSON.parse(res.data.data.longitudeLatitude)
									for (let i = 0; i < patharr.length; i++) {
										trajectory.push({
											latitude: patharr[i].lat,
											longitude: patharr[i].lon
										});
									}
									this.polyline[0].points = trajectory
								} else {
									uni.showToast({
										title: '暂无运输轨迹',
										icon: 'none',
										duration: 2000
									})
								}
							}
						}
					})
				}

				// this.$request.baseRequest('post', '/hyOrderTravelPath/getInfo', {
				// 		orderId: this.id,
				// 	}).then(res => {
				// 	console.log("res",res)
				// this.polyline[0].points = [
				// 	{latitude: 39.997761, longitude: 116.478935},
				// 	{latitude: 39.997825, longitude: 116.478939},
				// 	{latitude: 39.998549, longitude: 116.478912},
				// 	{latitude: 39.998555, longitude: 116.478998},
				// 	{latitude: 39.998566, longitude: 116.479282},
				// 	{latitude: 39.998528, longitude: 116.479658},
				// 	{latitude: 39.998453, longitude: 116.480151},
				// 	{latitude: 39.998302, longitude: 116.480784},
				// 	{latitude: 39.998184, longitude: 116.481149},
				// 	{latitude: 39.997997, longitude: 116.481573},
				// 	{latitude: 39.997846, longitude: 116.481863},
				// 	{latitude: 39.997718, longitude: 116.482072},
				// 	{latitude: 39.997718, longitude: 116.482362},
				// 	{latitude: 39.998935, longitude: 116.483633},
				// 	{latitude: 39.998968, longitude: 116.48367},
				// 	{latitude: 39.999861, longitude: 116.484648}
				// ]
				// for(var i =0 ;i<7200;i++){
				// 	var latitude = this.polyline[0].points[this.polyline[0].points.length -1].latitude + 0.0001
				// 	var longitude = this.polyline[0].points[this.polyline[0].points.length -1].longitude + 0.0001
				// 	this.polyline[0].points.push({latitude,longitude})
				// }
				var that = this
				setTimeout(() => {
					that.durationTime = Math.ceil(30000 / that.polyline[0].points
						.length) //默认播放全程使用30秒，计算相连两点动画时长
					that.initMapData()
				}, 1000)
			},
			//设置地图
			initMapData() {
				this.initMarkers()
				this.mapContext = uni.createMapContext('myMap', this)
			},
			test() {
				this.mapContext.includePoints({
					points: this.polyline[0].points,
					padding: [100, 100, 1000, 100]
				})
			},
			//设置位置（从起点开始）
			initMarkers() {
				this.markers[0].latitude = this.polyline[0].points[0].latitude
				this.markers[0].longitude = this.polyline[0].points[0].longitude
			},
			//开始移动
			handleStartMove() {
				this.startMove = true
				this.movePoint()
			},
			//停止移动
			handleStopMove() {
				this.startMove = false
			},
			//移动坐标
			movePoint() {
				/*
				//也可以用这个方法
				this.mapContext.moveAlong({
					duration: 30000,
					markerId: this.markers[0].id,
					path: this.polyline[0].points
				})
				return
				*/
				this.mapContext.moveAlong({
					duration: 10000,
					markerId: this.markers[0].id,
					path: this.polyline[0].points
				})
				console.log("this.nextPointIndex1 ", this.nextPointIndex, this.polyline[0].points.length - 1)
				console.log("this.startMove1", this.startMove)
				// this.mapContext.translateMarker({
				// 	duration: this.durationTime,
				// 	markerId: this.markers[0].id,
				// 	destination: {
				// 		latitude: this.polyline[0].points[this.nextPointIndex].latitude,
				// 		longitude: this.polyline[0].points[this.nextPointIndex].longitude
				// 	},
				// 	animationEnd: res => {

				// 		console.log("this.nextPointIndex ",this.nextPointIndex ,this.polyline[0].points.length - 1)
				// 		console.log("this.startMove",this.startMove)
				// 		//播放结束，继续移动到下一个点，最后一个点时结束移动
				// 		if (this.nextPointIndex < this.polyline[0].points.length - 1) {
				// 			this.nextPointIndex++
				// 			if (this.startMove) {
				// 				this.movePoint()
				// 			}
				// 		} else {
				// 			this.nextPointIndex = 1
				// 			this.startMove = false
				// 		}
				// 	}
				// })
			}
		}
	};
</script>

<style lang="scss" scoped>
	.hcp-bottom {
		left: 0;
		bottom: 0;
		width: 750rpx;
		// position: fixed;
	}

	.content {
		.top_btn {
			// background-color: red;
			position: fixed;
			top: 30rpx;
			left: 10px;
			right: 30rpx;
			flex-direction: row;
			display: flex;
			margin-top: 30px;
			justify-content: space-between;

			.returnPage {
				flex-direction: row;
				display: flex;

				.return-icon {
					width: 90rpx;
					height: 90rpx;
				}

			}

			.qiehuan {
				flex-direction: row;
				display: flex;
				// width: 240rpx;
				height: 90rpx;
				background-color: #ffffff;
				border-radius: 50rpx;
				padding: 0 30rpx;

				.tips {
					line-height: 90rpx;
				}

				.qiehuan-icon {
					width: 30rpx;
					height: 30rpx;
					margin-top: 30rpx;
					margin-right: 10rpx;
				}
			}
		}

		.infoBox {
			// width: 90%;
			height: 260rpx;
			background-color: #FFFFFF;
			position: fixed;
			top: 30rpx;
			left: 10px;
			right: 30rpx;
			border-radius: 40rpx;
			// padding:50rpx;
			display: flex;
			flex-direction: row;
			margin-top: 100px;

			.infoBox_left {
				padding-top: 50rpx;
				width: 250rpx;
				padding-top: 80rpx;
				// background-color: #18BC37;
			}

			.infoBox_right {
				background-image: linear-gradient(to right, #f9f7f7, #ffffff);
				display: flex;
				flex-direction: row;
				border-bottom-right-radius: 40rpx;
				border-top-right-radius: 40rpx;

				.jt-icon {
					position: relative;
					top: 75rpx;
					width: 60rpx;
					margin: auto 10rpx;
				}

				.send {
					padding-top: 80rpx;
					width: 180rpx;
					// background-color: #0077AA;
				}

				.end {
					padding-top: 80rpx;
					width: 180rpx;
				}
			}

			.title {
				font-size: 44rpx;
				font-weight: 600;
				text-align: center;
			}

			.address {
				text-align: center;
				color: #8F8F8F;
				font-size: 30rpx;
				margin-top: 15rpx;
			}

			.estimate {
				width: 120px;
				text-align: center;
			}
		}
	}
</style>