pages/order/map.nvue

@@ -41,8 +41,19 @@
 			@cancel="show = false" @confirm="payment" :closeOnClickOverlay="true">
 			<div class="slot-content" style="align-items: flex-start;">
 				<text style="width: 270px;">{{content}}</text>
+				<text style="width: 270px;color: #587aec;margin-top: 20rpx;" @click="ruleShow=true">查看收费规则</text>
 			</div>
+			<!-- <div class="slot-content" style="align-items: flex-start;">
+				<text style="width: 270px;">规则</text>
+			</div> -->
 		</u-modal>
+		
+		<u-modal :show="ruleShow" :title="ruleTitle" confirmText="关闭" @close="ruleShow=false"
+			@cancel="ruleShow = false" @confirm="ruleShow = false" :closeOnClickOverlay="true">
+			<div class="slot-content" style="align-items: flex-start;">
+				<text style="width: 270px;">{{ruleContent}}</text>
+			</div>
+			</u-modal>
 		<u-toast ref="uToast"></u-toast>
 	</view>
 </template>
@@ -85,7 +96,9 @@
 				title: "支付",
 				content: "",
 				show: false,
-				obj: {}
+				obj: {},
+				ruleShow:false,
+				ruleContent:"运单结束前，每天首次查看需支付费用,费用金额等于两次付费的跨度天数减1。运单结束后的首次查看需支付费用，金额等于运单运输跨度天数减累计支付金额。",
 			}
 		},
 		onLoad(option) {
@@ -122,6 +135,7 @@
 			},
 			mapChange() {
 				if (this.tips == "切换北斗轨迹") {
+					// this.infoData.lookBeiDouDate = "2023-02-13 02:05:21"
 					if (this.infoData.lookBeiDouDate) { //查看北斗最新时间
 						let date1 = this.infoData.lookBeiDouDate.split(" ")[0]
 						let date2 = new Date()
@@ -218,6 +232,9 @@
 			//模拟获取远程数据
 			getTrack(num) {
 				var that = this
+				uni.showLoading({
+					title: '加载中'
+				})
 				if (num == 0) { //平台轨迹
 					uni.request({
 						url: baseUrl + '/hyOrderTravelPath/getInfo',
@@ -231,6 +248,7 @@
 							'content-type': 'application/json' //'application/x-www-form-urlencoded; charset=UTF-8',
 						},
 						success: (res) => {
+							uni.hideLoading()
 							if (res.data.code == 200) {
 								that.tips = "切换北斗轨迹"
 								if (res.data.data.records.length >0) {
@@ -250,8 +268,9 @@
 									}
 									this.polyline[0].points = trajectory
 								} else {
+									this.polyline[0].points = []
 									uni.showToast({
-										title: '暂无运输轨迹',
+										title: '暂无平台运输轨迹',
 										icon: 'none',
 										duration: 2000
 									})
@@ -271,6 +290,7 @@
 							'content-type': 'application/json' //'application/x-www-form-urlencoded; charset=UTF-8',
 						},
 						success: (res) => {
+							uni.hideLoading()
 							if (res.data.code == 200) {
 								this.tips = "切换平台轨迹"
 								if (res.data.data.longitudeLatitude) {
@@ -284,8 +304,9 @@
 									}
 									this.polyline[0].points = trajectory
 								} else {
+									this.polyline[0].points = []
 									uni.showToast({
-										title: '暂无运输轨迹',
+										title: '暂无北斗运输轨迹',
 										icon: 'none',
 										duration: 2000
 									})
@@ -333,6 +354,11 @@
 			initMapData() {
 				this.initMarkers()
 				this.mapContext = uni.createMapContext('myMap', this)
+				// this.mapContext.includePoints({
+				// 	points: this.polyline[0].points,
+				// 	padding: [100, 100, 1000, 100]
+				// })
+				this.mapContext.getRegion()
 			},
 			test() {
 				this.mapContext.includePoints({
@@ -425,8 +451,8 @@
 				display: flex;
 
 				.return-icon {
-					width: 90rpx;
-					height: 90rpx;
+					width: 70rpx;
+					height: 70rpx;
 				}
 
 			}
@@ -435,27 +461,27 @@
 				flex-direction: row;
 				display: flex;
 				// width: 240rpx;
-				height: 90rpx;
+				height: 70rpx;
 				background-color: #ffffff;
 				border-radius: 50rpx;
 				padding: 0 30rpx;
 
 				.tips {
-					line-height: 90rpx;
+					line-height: 70rpx;
+					font-size: 28rpx;
 				}
 
 				.qiehuan-icon {
 					width: 30rpx;
 					height: 30rpx;
-					margin-top: 30rpx;
+					margin-top: 20rpx;
 					margin-right: 10rpx;
 				}
 			}
 		}
 
 		.infoBox {
-			// width: 90%;
-			height: 260rpx;
+			height: 200rpx;
 			background-color: #FFFFFF;
 			position: fixed;
 			top: 30rpx;
@@ -465,12 +491,11 @@
 			// padding:50rpx;
 			display: flex;
 			flex-direction: row;
-			margin-top: 100px;
+			margin-top: 160rpx;
 
 			.infoBox_left {
-				padding-top: 50rpx;
 				width: 250rpx;
-				padding-top: 80rpx;
+				padding-top: 50rpx;
 				// background-color: #18BC37;
 			}
 
@@ -483,25 +508,25 @@
 
 				.jt-icon {
 					position: relative;
-					top: 75rpx;
+					top: 40rpx;
 					width: 60rpx;
 					margin: auto 10rpx;
 				}
 
 				.send {
-					padding-top: 80rpx;
+					padding-top: 50rpx;
 					width: 180rpx;
 					// background-color: #0077AA;
 				}
 
 				.end {
-					padding-top: 80rpx;
+					padding-top: 50rpx;
 					width: 180rpx;
 				}
 			}
 
 			.title {
-				font-size: 44rpx;
+				font-size: 40rpx;
 				font-weight: 600;
 				text-align: center;
 			}