快递轨迹

api/views/salesSlip/transportation.js

@@ -0,0 +1,10 @@
+import http from '@/http/api.js'
+
+//获取快递地图
+export function detail(id, params) {
+  return http.request({
+    url: '/blade-pay/expressDelivery/trajectory/' + id,
+    method: 'get',
+    params
+  })
+}

pages.json

@@ -88,7 +88,17 @@
 			"style": {
 				"navigationBarTitleText": "待付款"
 			}
-		}]
+		},{
+            "path": "salesSlip/transportation",
+            "style": {
+                "navigationBarTitleText": "运输信息"
+            }
+        },{
+            "path" : "salesSlip/message",
+            "style": {
+                "navigationBarTitleText": "快递详情"
+            }
+        }]
 	}, 
 	
 	{

pages/views/salesSlip/message.vue

@@ -0,0 +1,41 @@
+<template>
+	<view class="box">
+		<view class="data">
+			<u-steps current="0" :dot="true" direction="column" activeColor="#fd4b09" style="z-index: 3;">
+				<u-steps-item :title="item.context" :desc="item.ftime" v-for="(item,index) in data"></u-steps-item>
+			</u-steps>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				data: []
+			}
+		},
+		onLoad: function(option) {
+			const item = JSON.parse(decodeURIComponent(option.steps));
+			console.log(item);
+			this.data = item;
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	.box {
+		padding: 20rpx 30rpx;
+		
+		.data {
+			
+			padding: 20rpx 30rpx;
+			
+			border-radius: 30rpx;
+			background-color: #fff;
+		}
+	}
+</style>

pages/views/salesSlip/orderDetails.vue

@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<view class="contentBox">
+		<view class="contentBox" @click="expressageClick(form)">
 			<view style="width: 100%;margin: 0 auto;">
 				<u-cell-group :border="false">
 					<u-cell :border="false" center title="快递信息" arrow-direction="down">
@@ -23,6 +23,10 @@
 					<view>收货地址:</view>
 					<view>{{form.recAddress || ''}}</view>
 				</view>
+				<view class="textBox">
+					<view>货运编号:</view>
+					<view>{{form.expressNo || ''}}</view>
+				</view>
 			</view>
 		</view>
 		<view class="contentBox">
@@ -168,10 +172,10 @@
 			}).then(res => {
 				console.log(234324324);
 				this.form = res.data
-				console.log(this.form);
-				this.form.orderItemsList.map(item=>{
-					item.totalAmount = item.price * item.goodsNum
-				})
+				console.log(this.form);
+				this.form.orderItemsList.map(item=>{
+					item.totalAmount = item.price * item.goodsNum
+				})
 				
 				if (this.form.status == '已发货' ) {
 					_this.isDisabled = true;
@@ -195,6 +199,59 @@
 			confirmReceipt() {
 				console.log(1);
 			},
+			// 快递信息点击事件
+			expressageClick(form) {
+				if (form.shipType === '快递') {
+					let reg = /.+?(省|市|自治区|自治州|县|区)/g; // 省市区的正则
+					let from = '';
+					let to = '';
+					// 出发城市
+					if (form.shippingAddress != null) {
+						let fromList = form.shippingAddress.match(reg);
+						for (var i = 0; i < fromList.length; i++) {
+							from += fromList[i]
+							if (fromList.length - 1 > i) {
+								from += '-'
+							}
+						}
+					}
+					// 目的城市
+					if (form.recAddress != null) {
+						let toList = form.recAddress.match(reg);
+						for (var i = 0; i < toList.length; i++) {
+							to += toList[i]
+							if (toList.length - 1 > i) {
+								to += '-'
+							}
+						}
+					}
+					// 地点
+					let city = '';
+					if (from != '') {
+						city += '&from=' + from;
+					}
+					if (to != '') {
+						city += '&to=' + to;
+					}
+					// com: '查询的快递公司的编码',
+					// num: '查询的快递单号',
+					// phone: '收件人或寄件人的手机号或固话',
+					// from: '出发地城市，省-市-区',
+					// to: '目的地城市，省-市-区'
+					
+					// url: './transportation?id=' + form.id +'&com=' + form.courierCorporation + '&num=' + form.courierNumber +
+					// 	'&phone=' + form.corpTel + city
+					// uni.navigateTo({
+					// 	url: './transportation?id=' + form.id +
+					// 		'&com=shentong&num=773236818683545&phone=15568850829&to=山东省-青岛市-李沧区'
+					// });
+				
+					uni.navigateTo({
+						url: './transportation?id=' + form.id +'&com=' + form.logisticsCorpId + '&num=' + form.expressNo +
+						'&phone=' + form.phone + city
+					});
+				}
+			},
 			//申请退款按钮
 			requestRefund() {
 				let _this = this

pages/views/salesSlip/transportation.vue

@@ -0,0 +1,122 @@
+<template>
+	<view>
+		<web-view :src="url" webview-styles="height: 100rpx;width: 100%;" :fullscreen="false">
+			<!-- <cover-view class="message" @touchstart="start" @touchmove="move" :style="{'height':messageHeight + 'px'}">
+				<u-steps current="0" :dot="true" direction="column" activeColor="#fd4b09" style="z-index: 3;">
+					<u-steps-item :title="item.context" :desc="item.ftime" v-for="(item,index) in steps"></u-steps-item>
+				</u-steps>
+			</cover-view> -->
+
+			<cover-view class="message">
+				<cover-view @click="aabcc()">查看详情>></cover-view>
+				<cover-view style="display: flex; margin-top: 15rpx;">
+					<cover-view
+						style="width: 20rpx; height: 20rpx; border-radius: 10rpx; background-color: #fd4b09; margin-top: 10rpx;">
+					</cover-view>
+					<cover-view class="data">{{steps[0].context}}</cover-view>
+				</cover-view>
+			</cover-view>
+		</web-view>
+	</view>
+</template>
+
+<script>
+	import {
+		detail
+	} from '@/api/views/salesSlip/transportation'
+	export default {
+		data() {
+			return {
+				// 物流地图链接
+				url: '',
+				// 步骤
+				steps: [],
+				// 坐标
+				// coord: {
+				// 	// 开始位置
+				// 	startY: '',
+				// 	// 上一个滑动距离
+				// 	move: ''
+				// },
+				// messageHeight: 140,
+				// messageHeightTwo: 140
+			};
+		},
+		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
+			let data = {
+				com: option.com,
+				num: option.num,
+				phone: option.phone,
+				from: option.from,
+				to: option.to
+			}
+
+			detail(option.id, data).then(res => {
+				this.url = res.data.trailUrl;
+				this.steps = res.data.data;
+			})
+		},
+		onPageScroll(e) {
+			console.log(e);
+		},
+		methods: {
+			aabcc() {
+				uni.navigateTo({
+					url: `./message?steps=${encodeURIComponent(JSON.stringify(this.steps))}`
+				});
+			}
+			// start(e) {
+			// 	this.coord.startY = e.changedTouches[0].pageY; //手指按下时的Y坐标
+			// 	if (this.messageHeight != 140) {
+			// 		this.messageHeightTwo = this.messageHeight;
+			// 	}
+			// },
+			// move(event) {
+			// 	let touches = event.touches[0]
+			// 	let move = Math.round(this.coord.startY - touches.pageY);
+			// 	this.messageHeight = this.messageHeightTwo + move;
+
+			// 	// this.coord.move = move;
+
+			// 	if (this.messageHeight < 140) {
+			// 		this.messageHeight = 140;
+			// 	}
+			// }
+		}
+	}
+</script>
+
+<style lang="scss">
+	.message {
+
+		box-sizing: border-box;
+		position: fixed;
+		left: 50%;
+		transform: translateX(-50%);
+
+		bottom: 0;
+		width: 95%;
+		height: 300rpx;
+		border-radius: 30rpx 30rpx 0 0;
+		padding: 20rpx 30rpx;
+
+		background-color: #fff;
+		text-align: right;
+		color: #fd4b09;
+
+		// 当前快递信息
+		.data {
+			width: 100%;
+			height: 100%;
+			margin-left: 20rpx;
+
+			color: #000;
+			text-align: left;
+			white-space: pre-wrap;
+		}
+	}
+
+	cover-view {
+		z-index: 9999;
+	}
+</style>