tcwm-uniapp-shop/pages/order/orderMap.vue

<template>
	<view>
		<map id="map" style="width: 100%; height: 720px;" :latitude="latitude" :longitude="longitude" :markers="markers"
			:show-location="true">
		</map>
		<!-- #ifndef APP-PLUS -->
		<cover-view class="controls-title">

			<cover-view class="tabs_box">
				<cover-image class="pay_img" src="../../static/images/my/avatar.png"></cover-image>
				<cover-view class="flex flex-sub margin-left-sm flex-direction justify-between">
					<cover-view class="pay_name">骑手预计<text class="text-df">{{rider.mDateTime}}</text>送达</cover-view>
					<cover-view class="text-gray margin-top" style="margin-top: 5rpx;">
						距离您{{rider.aDouble}}
					</cover-view>
				</cover-view>
				<cover-view class="flex">
					<cover-image class="pay_img1 margin-right" @click="goNav" src="../../static/images/my/im.png">
					</cover-image>
					<cover-image class="pay_img1" @click="call" src="../../static/images/my/phone.png"></cover-image>
				</cover-view>
			</cover-view>
		</cover-view>
		<!-- #endif -->

		<!-- #ifdef APP-PLUS -->
		<cover-view class="controls-titles">
			<cover-view class="tabs_box">
				<cover-view style="position: relative;top: 0rpx;left: 0rpx;">
					<cover-image class="pay_img" src="../../static/images/my/avatar.png"></cover-image>
					<cover-view style="position: absolute;top: 5rpx;left: 120rpx;">
						<cover-view class="pay_name">骑手预计{{rider.mDateTime}}送达</cover-view>
						<cover-view class="text-gray margin-top" style="margin-top: 5rpx;">
							距离您{{rider.aDouble}}
						</cover-view>
					</cover-view>
					<cover-view style="position: absolute;top: 5rpx;right: 0rpx;">
						<cover-view style="position: relative;top: 0rpx;left: 0rpx;">
							<cover-view style="position: absolute;top: 15rpx;right: 40rpx;">
								<cover-image class="pay_img1 margin-right" @click="goNav" src="../../static/images/my/im.png">
								</cover-image>
							</cover-view>
							<cover-view style="position: absolute;top: 15rpx;right: 0rpx;">
								<cover-image class="pay_img1" @click="call" src="../../static/images/my/phone.png"></cover-image>
							</cover-view>
						</cover-view>
					</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: '',
				longitude: '',
				markers: [], //标记点
				indentNumber: '',
				riderUserId: '',
				orderDetails: {},
				rider: {},
				timer: '',
				orderId:'',
			}
		},
		onLoad(option) {
			let that = this
			that.indentNumber = option.indentNumber
			that.orderId = option.orderId
			that.getData()


		},
		onShow() {
			let that = this
			this.timer = setInterval(function() {
				that.getData()
			}, 10000)
		},
		onHide() {
			console.log(this.timer, '定时器')
			clearInterval(this.timer)
		},
		methods: {
			getData() {
				this.$Request.postT('/app/tbindent/userIndentMessage?indentNumber=' + this.indentNumber).then(res => {
					console.log(res)
					if (res.code == 0) {
						this.orderDetails = res.data
						this.riderUserId = this.orderDetails.riderUserId
						this.getLocation()
					}
				});
			},
			getLocation() {
				let data = {
					riderUserId: this.riderUserId,
					lat: this.orderDetails.userLat,
					lng: this.orderDetails.userLng
				}
				this.$Request.getT('/timedtask/selectRiderLocation', data).then(res => {
					if (res.code === 0) {
						this.latitude = res.data.riderLocation.lat;
						this.longitude = res.data.riderLocation.lng;
						this.rider = res.data
						let mDateTime = res.data.mDateTime.length - 14;
						// this.dataDet.orderCode = res.data.orderCode.substring(start, res.data.orderCode.length)
						this.rider.mDateTime = res.data.mDateTime.substring(mDateTime, res.data.mDateTime.length)
						if (this.rider.aDouble > 1000) {
							this.rider.aDouble = Number((this.rider.aDouble / 1000)).toFixed(2) + "km"
						} else {
							if (this.rider.aDouble == 0) {
								this.rider.aDouble = "0m";
							} else {
								this.rider.aDouble = Number(this.rider.aDouble).toFixed(1) + "m";
							}
						}

						let marker = {
							id: 2,
							latitude: res.data.riderLocation.lat,
							longitude: res.data.riderLocation.lng,
							iconPath: '../../static/images/order/rider.png',
							width: '40',
							height: '40',
						}
						this.markers.push(marker)
					}
				});
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.orderDetails.phone
				});
			},
			goNav() {
				// uni.navigateTo({
				// 	url: '/pages/my/chat'
				// })
				uni.navigateTo({
					url: '/pages/my/im?orderId=' + this.orderId
				})
			}
		},
	}
</script>

<style>
	.controls-title {
		width: 90%;
		/* height: 220upx; */
		/* line-height: 220upx; */
		background: #FFFFFF;
		position: fixed;
		bottom: 0rpx;
		margin: 40upx;
		border-radius: 26upx;
		box-shadow: 0upx 30upx 40upx 0upx rgba(187, 170, 163, 0.20);
		/* margin: 0 40rpx; */
		margin-bottom: 50rpx;
	}

	.controls-titles {
		width: 90%;
		/* height: 220upx; */
		/* line-height: 220upx; */
		background: #FFFFFF;
		position: fixed;
		bottom: 180rpx;
		margin: 40upx;
		border-radius: 26upx;
		box-shadow: 0upx 30upx 40upx 0upx rgba(187, 170, 163, 0.20);
		/* margin: 0 40rpx; */
		margin-bottom: 50rpx;
	}

	.tabs_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		margin: 20rpx;
	}

	.pay_tit {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.pay_img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
	}

	.pay_img1 {
		width: 60rpx;
		height: 60rpx;
		border-radius: 10rpx;
	}

	.tabs_bottom {
		margin: 0 20rpx 20rpx;
		display: flex;
	}

	.pay_btn {
		padding: 5rpx 16rpx;
		border: solid 2rpx #999999;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		border-radius: 10rpx;
	}

	.pay_name {
		font-size: 28rpx;
		font-weight: bold;
			display: flex;
		    flex-wrap: wrap;
	}

	.pay_line {
		height: 2rpx;
		background-color: #afafaf;
		margin: 10rpx 0;
	}
</style>