OfficeApp/pages/logistics/te.vue

<template>
	<view class="content">
		<view v-if='showLoading'>
			<u-loading-page :loading="showLoading"></u-loading-page>
		</view>
		<view v-else>
			<u-toast ref="uToast"></u-toast>
			<view class="map">
				<map id="map" @click="mapFun" :markers='markers' :scale="scale" :enable-zoom="true" :polyline="polyline"
					style="width:100%;height: 100%;" :latitude="goodsDetil.logistics.shop_lat" :enable-scroll="false"
					:longitude="goodsDetil.logistics.shop_long">
				</map>
			</view>
			<view class="order_info">
				<button @click="mapFun">anniu</button>
				<u-modal :show="showPop" @confirm="confirm" content="56565撒大苏打撒旦" @close="showPop=false"
					:closeOnClickOverlay="true"></u-modal>
				<p class='tit'>订单号: {{goodsDetil.logistics.order_sn}}</p>
				<view class="store_name">
					商户名称 {{goodsDetil.logistics.shop_name}}
				</view>
				<view class="store_time">
					{{goodsDetil.logistics.shop_address}}
				</view>
				<view class="tit_a">
					<text>物流信息</text>
				</view>
				<view class="info" v-for="(item,index) in goodsDetil.record">
					<view style="margin: 20rpx 0;">
						{{item.content }}
					</view>
					<view style="margin: 20rpx 0;">
						{{item.create_time }}
					</view>
				</view>
				<view class="pro_info">
					<view style="color: #999; flex:1">
						商品信息
					</view>
					<view style="flex:4">
						<view v-for="(item,index) in goodsDetil.product" class="goods_tit">
							<text style="width: 60vw;">{{item.goods_name}}</text>
							<text style="float: right;">X{{item.product_num}}{{item.goods_unit}}</text>
						</view>

					</view>

				</view>

				<view class="total">
					共计{{goodsDetil.product_count}}件商品
				</view>
				<u-button type="primary" v-if='goodsDetil.logistics.status==0' @click="qrqodeFn"
					class="custom-style">扫码取货</u-button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getDetil
	} from "@/api/logistics.js"
	import {
		takeGoods
	} from "@/api/logistics.js"
	export default {
		data() {
			return {
				showLoading: true,
				showPop: false,
				goodsDetil: undefined,
				scale: 17,
				latitude: undefined,
				longitude: undefined,
				markers: [{
					latitude: undefined,
					longitude: undefined,
					iconPath: '@/static/images/daoru.png', //显示的图标        
					width: 40, //宽
					height: 40, //高
					title: '商家位置', //标注点名
					alpha: 0.5, //透明度

				}],
				polyline: []

			}
		},
		methods: {
			confirm() {
				// takeGoods({
				// 	order_id: "",
				// 	order_sn: "",
				// 	logistics_id: this.goodsDetil.logistics.id
				// }).then(res => {
				// 	this.showToast()
				// 	setTimeout(() => {
				// 		uni.navigateBack()
				// 	}, 2000)
				// })
				// this.showPop = false
				var packageName = 'com.autonavi.minimap';
				var main = plus.android.runtimeMainActivity();
				var packageManager = main.getPackageManager();
				var PackageManager = plus.android.importClass(packageManager) var packageInfo = packageManager
					.getPackageInfo(packageName, PackageManager.GET_ACTIVITIES);
				if (packageInfo) {
					var Uri = plus.android.importClass("android.net.Uri");
					var url = "amapuri://route/plan?sourceApplication=maxuslife" +
						"&sid=A&slat=36.702558&slon=116.876678&sname=起始地点" +
						"&did=B&dlat=36.649415&dlon=117.122497&dname=结束地点&dev=0&t=0";
					var Intent = plus.android.importClass('android.content.Intent');
					var intent = new Intent();
					intent.setAction(Intent.ACTION_VIEW);
					intent.addCategory(Intent.CATEGORY_DEFAULT);
					var uri = Uri.parse(url);
					//将功能Scheme以URI的方式传入data  intent.setData(uri);intent.setPackage("com.autonavi.minimap");var main = plus.android.runtimeMainActivity();main.startActivity(intent);} else {// alert('未安装' + packageName + '')uni.showToast({title: `目前导航暂只支持${packageName}`})}

				},
				showToast() {
						this.$refs.uToast.show({
							type: 'success',
							title: '成功主题(带图标)',
							message: "操作成功",
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
						})
					},
					/*
					地图相关
					*/
					// 路线规划
					getDriverLine() {
						const that = this;
						const key = "997c9a3d88154fa78f4d28bebc1dd84f";
						//起点坐标
						const origin = "28.908854,105.43639400000002,";
						//给起点坐标一个图标
						this.startingPoint()
						//给终点坐标一个图标
						this.endPoint()
						//终点坐标
						const destination = "28.908447,105.439304,";
						uni.request({
							// url: `https://restapi.amap.com/v3/direction/walking?key=${key}&origin=105.43639400000002,28.908854&destination=105.439304,28.908447`,
							url: `https:restapi.amap.com/v4/direction/bicycling?key=${key}&origin=105.43639400000002,28.908854&destination=105.439304,28.908447`,
							success: (res) => {
								const data = res.data.data;
								var points = [];
								if (data.paths && data.paths[0] && data.paths[0].steps) {
									var steps = data.paths[0].steps;
									for (var i = 0; i < steps.length; i++) {
										//将每一步的数据放到points数组中
										var poLen = steps[i].polyline.split(";");
										for (var j = 0; j < poLen.length; j++) {
											points.push({
												longitude: parseFloat(poLen[j].split(",")[0]),
												latitude: parseFloat(poLen[j].split(",")[1]),
											});
										}
									}
									console.log(data.paths[0].steps[0].instruction)
									that.runningRoute = data.paths[0].steps[0].instruction;
									console.log('行驶路线-----------', that.runningRoute)
								}
								that.polyline = [{
									points: points,
									color: "#0091ff",
									dottedLine: true,
									width: 15,
									arrowLine: true,
									colorList: true,
								}, ];
							},
							fail: function(res) {
								console.log("获取路线失败", res);
							},
						});
					},
					// 规划路线的时候给起点一个marker，
					startingPoint() {
						let point = [{
							id: 1,
							width: 40,
							height: 40,
							latitude: 28.908854,
							longitude: 105.43639400000002,
							iconPath: "https://p4.itc.cn/images03/20200518/90137c12bbac485dbc5bb0fe9d8cf4bd.jpeg",
							anchor: {
								x: 0.5,
								y: 1,
							},
						}, ];
						this.markers = this.markers.concat(point);
					},
					// 规划路线的时候给终点一个marker，
					endPoint() {
						let point = [{
							id: 2,
							width: 40,
							height: 40,
							latitude: 28.908447, //纬度
							longitude: 105.439304,
							//经度
							iconPath: 'https://t9.baidu.com/it/u=414099140,1072313909&fm=193',
							anchor: {
								x: 0.5,
								y: 1,
							},
						}, ];
						this.markers = this.markers.concat(point);
					},

					mapFun() {
						uni.openLocation({
							latitude: Number(this.goodsDetil.logistics.shop_lat),
							longitude: Number(this.goodsDetil.logistics.shop_long),
							address: this.goodsDetil.logistics.shop_address,
							name: this.goodsDetil.logistics.shop_name,
							scale: 15,
						});
					},


					qrqodeFn() {
						uni.scanCode({
							onlyFromCamera: true,
							success: function(res) {
								// console.log('条码类型：' + res.scanType);
								console.log('条码内容：' + res.result);
							}
						});
					},

					// 地图结束
			},
			onLoad(options) {
				getDetil({
					logistics_id: options.id
				}).then(res => {
					this.goodsDetil = res.data
					this.latitude = res.data.logistics.shop_lat
					this.longitude = res.data.logistics.shop_long
					this.markers[0].latitude = res.data.logistics.shop_lat
					this.markers[0].longitude = res.data.logistics.shop_long
					setTimeout(() => {
						this.showLoading = false
					}, 500)
				})
			},
			// onShow() {
			// 	let that = this
			// 	// uni.getLocation({
			// 	// 	type: 'wgs84',
			// 	// 	success: function(res) {
			// 	// 		that.mark[0].latitude = res.latitude
			// 	// 		that.mark[0].longitude = res.longitude
			// 	// 		console.log(that.mark[0])
			// 	// 		console.log(res)

			// 	// 	}
			// 	// });
			// }
		}
</script>

<style lang='scss' scoped>
	.map {
		height: 40vh;
		width: 100vw;

	}


	.custom-style {
		width: 100%;
		background-color: #3C9CFF;
		border: none;
		color: white;
		height: 90rpx;
		line-height: 90rpx;
	}

	.order_info {
		height: auto;
		background-color: white;
		border-radius: 6vw 6vw 0 0;
		transform: translateY(-5vh);
		padding: 5vh 3vw;
		box-sizing: border-box;

		.tit {
			font-weight: bold;
			font-size: 35rpx
		}

		.tit_a {

			display: flex;
			justify-content: space-between;
			font-weight: bold;
			font-size: 35rpx
		}

		.total {
			text-align: right;
			color: #3274F9;
			font-weight: bold;
			font-size: 32rpx;
			margin: 20rpx 0;
		}

		.store_name {
			color: #999999;
			margin: 18rpx 0;
		}

		.store_time {
			color: #999999;
			padding: 0 0 20rpx 0;
			border-bottom: 1px solid #999999;
			margin-bottom: 20rpx;
		}

		.info {
			margin: 10rpx 0;

		}

		.pro_info {
			display: flex;
			justify-content: space-between;
		}


	}

	.goods_tit {
		display: flex;
		justify-content: space-between;
	}

	.icon {

		text-align: center;
		font-size: 50rpx;

		text {
			display: block;
			transform: rotate(90deg);
		}
	}
</style>