OfficeApp/pages/logistics/deliveryDetil.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" @markertap='mapFun' :markers='markers' :scale="scale" :enable-zoom="true"
					style="width:100%;height: 100%;" :latitude="goodsDetil.logistics.shop_lat" :enable-scroll="false"
					:longitude="goodsDetil.logistics.shop_long">
					<cover-image class="map_btn" @tap="test" src="../../static/img/logistics/DH.png">
					</cover-image>
				</map>
			</view>
			<view class="order_info">


				<p class='tit'>订单号: {{goodsDetil.logistics.order_sn}}</p>
				<view class="store_name">
					商户名称 {{goodsDetil.logistics.shop_name}}
				</view>
				<view class="store_name">
					联系电话 {{goodsDetil.logistics.shop_phone}}
				</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>
				<!-- <u-button type="primary" v-if='goodsDetil.logistics.status==0' @click="takeGood"
					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: [{
					id: 1,
					latitude: undefined,
					longitude: undefined,
					iconPath: '../../static/tabs-icon/home-a.png', //显示的图标        
				}],
			}
		},
		methods: {
			// 唤起高德
			test() {
				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=${this.markers[0].latitude}&dlon=${this.markers[0].longitude}&dname=${this.goodsDetil.logistics.shop_name}&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: `只支持高德地图`,
						icon: 'none'
					})
				}
				console.log("唤醒高德线路规划")
			},
			showToast() {
				this.$refs.uToast.show({
					type: 'success',
					title: '成功主题(带图标)',
					message: "操作成功",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
				})
			},
			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,
				});
			},
			showToast() {
				this.$refs.uToast.show({
					type: 'success',
					title: '成功主题(带图标)',
					message: "操作成功",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
				})
			},
			qrqodeFn() {
				let that = this
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						that.takeGood(res.result)
					}
				});
			},
			// 取货{}
			takeGood(sn) {
				takeGoods({
					logistics_id: this.goodsDetil.logistics.id,
					order_id: this.goodsDetil.logistics.order_id,
					order_sn: sn
				}).then(res => {
					console.log("取货成功")
					// this.$emit('showTost')
					this.showToast()
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				})

			},

			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					}
				});

			}


		},
		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)
			})


		},





	}
</script>

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


	}

	.map_btn {
		width: 50px;
		height: 50px;

		position: absolute;
		bottom: 0px;
		right: 0;
		z-index: 9999999;
	}

	.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;
		position: relative;

		.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>