2023-08-09 09:11:05 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<view class="content">
|
2023-08-09 17:26:01 +08:00
|
|
|
|
<u-toast ref="uToast"></u-toast>
|
2023-08-09 09:11:05 +08:00
|
|
|
|
<view class="map">
|
|
|
|
|
|
<map id="map" :markers='markers' :scale="scale" :enable-zoom="true" :polyline="polyline"
|
2023-08-09 09:25:43 +08:00
|
|
|
|
style="width:100%;height: 100%;" :latitude="latitude" :enable-scroll="false" :longitude="longitude">
|
|
|
|
|
|
</map>
|
2023-08-09 09:11:05 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
<view class="order_info">
|
|
|
|
|
|
<u-modal :show="showPop" @confirm="confirm" content="56565撒大苏打撒旦" @close="showPop=false"
|
|
|
|
|
|
:closeOnClickOverlay="true"></u-modal>
|
|
|
|
|
|
<button @click="getDriverLine">线路规划</button>
|
|
|
|
|
|
<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>
|
2023-08-09 17:26:01 +08:00
|
|
|
|
<u-button type="primary" v-if='goodsDetil.logistics.status==0' @click="confirm"
|
2023-08-09 09:11:05 +08:00
|
|
|
|
class="custom-style">已取货</u-button>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import {
|
|
|
|
|
|
getDetil
|
|
|
|
|
|
} from "@/api/logistics.js"
|
|
|
|
|
|
import {
|
|
|
|
|
|
takeGoods
|
|
|
|
|
|
} from "@/api/logistics.js"
|
|
|
|
|
|
export default {
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
showPop: false,
|
|
|
|
|
|
goodsDetil: undefined,
|
|
|
|
|
|
scale: 17,
|
|
|
|
|
|
latitude: 28.908854,
|
|
|
|
|
|
longitude: 105.43639400000002,
|
|
|
|
|
|
markers: [],
|
|
|
|
|
|
polyline: [],
|
|
|
|
|
|
// https://p4.itc.cn/images03/20200518/90137c12bbac485dbc5bb0fe9d8cf4bd.jpeg
|
|
|
|
|
|
// https://t9.baidu.com/it/u=414099140,1072313909&fm=193
|
|
|
|
|
|
// mark: [{
|
|
|
|
|
|
// id: 0,
|
|
|
|
|
|
// latitude: 28.908854,
|
|
|
|
|
|
// longitude: 105.43639400000002,
|
|
|
|
|
|
// iconPath: 'https://img2.baidu.com/it/u=3116155797,2219949885&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', //显示的图标
|
|
|
|
|
|
|
|
|
|
|
|
// width: 40, //宽
|
|
|
|
|
|
// height: 40, //高
|
|
|
|
|
|
// title: '我在这里', //标注点名
|
|
|
|
|
|
// alpha: 0.5, //透明度
|
|
|
|
|
|
// callout: { //自定义标记点上方的气泡窗口 点击有效
|
|
|
|
|
|
// content: '我的位置', //文本
|
|
|
|
|
|
// color: '#ffffff', //文字颜色
|
|
|
|
|
|
// fontSize: 14, //文本大小
|
|
|
|
|
|
// borderRadius: 15, //边框圆角
|
|
|
|
|
|
// borderWidth: '10',
|
|
|
|
|
|
// bgColor: '#3274F9', //背景颜色
|
|
|
|
|
|
// display: 'ALWAYS', //常显
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
// {
|
|
|
|
|
|
// id: 2,
|
|
|
|
|
|
|
|
|
|
|
|
// latitude: 28.908447, //纬度
|
|
|
|
|
|
// longitude: 105.439304,
|
|
|
|
|
|
// //经度
|
|
|
|
|
|
// iconPath: '../../static/img/contract/company.png', //显示的图标
|
|
|
|
|
|
// rotate: 0, // 旋转度数
|
|
|
|
|
|
// width: 20, //宽
|
|
|
|
|
|
// height: 30, //高
|
|
|
|
|
|
// alpha: 0.5, //透明度
|
|
|
|
|
|
// callout: { //自定义标记点上方的气泡窗口 点击有效
|
|
|
|
|
|
// content: '商家', //文本
|
|
|
|
|
|
// color: 'white', //文字颜色
|
|
|
|
|
|
// fontSize: 14, //文本大小
|
|
|
|
|
|
// borderRadius: 15, //边框圆角
|
|
|
|
|
|
// borderWidth: '10',
|
|
|
|
|
|
// bgColor: '#3274F9', //背景颜色
|
|
|
|
|
|
// display: 'ALWAYS', //常显
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// ],
|
|
|
|
|
|
|
|
|
|
|
|
// polyline: [{
|
|
|
|
|
|
// points: [{
|
|
|
|
|
|
// latitude: 28.908854,
|
|
|
|
|
|
// longitude: 105.43639400000002,
|
|
|
|
|
|
// }, {
|
|
|
|
|
|
// latitude: 28.908447, //纬度
|
|
|
|
|
|
// longitude: 105.439304,
|
|
|
|
|
|
// }],
|
|
|
|
|
|
// color: "#0091ff",
|
|
|
|
|
|
// // dottedLine: true,
|
|
|
|
|
|
// // colorList: true,
|
|
|
|
|
|
// // dottedLine: true,
|
|
|
|
|
|
// width: 15,
|
|
|
|
|
|
// // arrowLine: true,
|
|
|
|
|
|
// // colorList: true,
|
|
|
|
|
|
// // colorList: true
|
|
|
|
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
// ]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
confirm() {
|
|
|
|
|
|
let id = JSON.parse(uni.getStorageSync('USER_INFO')).id
|
|
|
|
|
|
takeGoods({
|
|
|
|
|
|
user_id: id,
|
|
|
|
|
|
logistics_id: this.goodsDetil.logistics.id
|
2023-08-09 17:26:01 +08:00
|
|
|
|
}).then(res => {
|
|
|
|
|
|
this.showToast()
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
uni.navigateBack()
|
|
|
|
|
|
}, 2000)
|
2023-08-09 09:11:05 +08:00
|
|
|
|
})
|
|
|
|
|
|
this.showPop = false
|
2023-08-09 17:26:01 +08:00
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
showToast() {
|
|
|
|
|
|
this.$refs.uToast.show({
|
|
|
|
|
|
type: 'success',
|
|
|
|
|
|
title: '成功主题(带图标)',
|
|
|
|
|
|
message: "操作成功",
|
|
|
|
|
|
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
|
|
|
|
|
|
})
|
2023-08-09 09:11:05 +08:00
|
|
|
|
},
|
|
|
|
|
|
/*
|
|
|
|
|
|
地图相关
|
|
|
|
|
|
*/
|
|
|
|
|
|
// 路线规划
|
|
|
|
|
|
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);
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 地图结束
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
onLoad(options) {
|
|
|
|
|
|
getDetil({
|
|
|
|
|
|
logistics_id: options.id
|
|
|
|
|
|
}).then(res => {
|
|
|
|
|
|
this.goodsDetil = res.data
|
|
|
|
|
|
console.log(this.goodsDetil)
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
// 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%;
|
2023-08-09 17:26:01 +08:00
|
|
|
|
background-color: #3C9CFF;
|
2023-08-09 09:11:05 +08:00
|
|
|
|
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>
|
