354 lines
9.1 KiB
Vue
354 lines
9.1 KiB
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> |