物流板块页面完善
This commit is contained in:
THK3121
parent
547dae8552
commit
9b3a0bf7fe
@ -46,7 +46,6 @@
|
||||
alt="">
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<view v-else class='finishOrder' @click="goDetil">
|
||||
<view>
|
||||
<text style="color:#999">订单编号</text> <text> {{goodsInfo.order_sn}}</text>
|
||||
@ -58,12 +57,11 @@
|
||||
<text style="color:#999">收货时间</text> {{goodsInfo.xd_time||"暂未收货"}}
|
||||
</view>
|
||||
<view style="margin: 20rpx 0;">
|
||||
<text style="color:#999">送达时间</text> {{goodsInfo.pc_time||"暂未送达"}}
|
||||
<text style="color:#999">送达时间</text> {{pst_time||"暂未送达"}}
|
||||
</view>
|
||||
<view style="margin: 20rpx 0;">
|
||||
<text style="color:#999">取货时间</text> {{goodsInfo.qh_time||"暂未取货"}}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="total">
|
||||
共计{{goodsInfo.product_count}}件商品
|
||||
@ -72,9 +70,16 @@
|
||||
</view>
|
||||
<view class="cil_right">
|
||||
</view>
|
||||
<u-modal :show="showPop" @confirm="confirm" :content="popContent[goodsInfo.status]" @close="showPop=false"
|
||||
:closeOnClickOverlay="true"></u-modal>
|
||||
<u-button type="primary" @click="showPop = true" v-if='goodsInfo.status==0'>已取货</u-button>
|
||||
<!-- <u-modal :show="showPop" @confirm="confirm" :content="popContent[goodsInfo.status]" @close="showPop=false"
|
||||
:closeOnClickOverlay="true"></u-modal> -->
|
||||
<u-modal :show="showPop" @close="showPop=false" @confirm="confirm" title="请输入收件码" :closeOnClickOverlay="true">
|
||||
<view class="slot-content">
|
||||
<u--input placeholder="请输入收件码" border="surround" v-model="take_code"></u--input>
|
||||
</view>
|
||||
</u-modal>
|
||||
|
||||
<!-- <u-button type="primary" @click="showPop = true" v-if='goodsInfo.status==0'>扫码取货</u-button> -->
|
||||
<u-button type="primary" @click="qrqodeFn" v-if='goodsInfo.status==0'>扫码取货</u-button>
|
||||
<u-button type="primary" @click="showPop = true" style="background-color: #34A853;border: none;"
|
||||
v-if='goodsInfo.status==1'>已送达</u-button>
|
||||
<u-button type="primary" @click="goDetil" style="background-color: red;border:none"
|
||||
@ -97,7 +102,23 @@
|
||||
list: [],
|
||||
flag: undefined,
|
||||
showPop: false,
|
||||
popContent: ["请确认已经收到货", "请确认已送达"]
|
||||
take_code: "",
|
||||
// popContent: ["请确认已经收到货", "请确认已送达"]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pst_time() {
|
||||
let timestamp = this.goodsInfo.ps_time
|
||||
// 此处时间戳以毫秒为单位
|
||||
let date = new Date(parseInt(timestamp) * 1000);
|
||||
let Year = date.getFullYear();
|
||||
let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
|
||||
let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
|
||||
let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
|
||||
let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
|
||||
let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
|
||||
let GMT = Year + '-' + Moth + '-' + Day + ' ' + Hour + ':' + Minute + ':' + Sechond;
|
||||
return GMT
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -108,24 +129,31 @@
|
||||
})
|
||||
},
|
||||
|
||||
test() {
|
||||
this.showMore()
|
||||
this.getMore()
|
||||
// 扫码
|
||||
qrqodeFn() {
|
||||
let that = this
|
||||
uni.scanCode({
|
||||
onlyFromCamera: true,
|
||||
success: function(res) {
|
||||
that.takeGood(res.result)
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
// 取货{}
|
||||
takeGood() {
|
||||
|
||||
takeGood(sn) {
|
||||
takeGoods({
|
||||
user_id: this.goodsInfo.courier_id,
|
||||
logistics_id: this.goodsInfo.id
|
||||
logistics_id: this.goodsInfo.id,
|
||||
order_id: this.goodsInfo.order_id,
|
||||
order_sn: sn
|
||||
}).then(res => {
|
||||
this.$emit('showTost')
|
||||
this.$emit('getlist')
|
||||
})
|
||||
|
||||
},
|
||||
async confirm() {
|
||||
await this.goodsInfo.status == 0 ? this.takeGood() : this.doneGood()
|
||||
confirm() {
|
||||
this.doneGood()
|
||||
this.showPop = false
|
||||
this.showMore()
|
||||
|
||||
@ -133,8 +161,7 @@
|
||||
// 送达
|
||||
doneGood() {
|
||||
doneDelivery({
|
||||
user_id: this.goodsInfo.courier_id,
|
||||
// user_id: 167,
|
||||
take_code: this.take_code,
|
||||
logistics_id: this.goodsInfo.id
|
||||
}).then(res => {
|
||||
this.$emit('showTost')
|
||||
@ -162,8 +189,8 @@
|
||||
},
|
||||
|
||||
mounted() {
|
||||
// this.showMore()
|
||||
console.log(this.goodsInfo)
|
||||
this.showMore()
|
||||
// console.log(this.goodsInfo)
|
||||
// console.log(this.goodsInfo)
|
||||
// conso
|
||||
|
||||
|
||||
@ -98,15 +98,6 @@
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/logistics/t",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单详情",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationBarBackgroundColor": "#3175f9",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "pages/logistics/deliveryDetil",
|
||||
"style": {
|
||||
|
||||
@ -1,53 +1,60 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<view class="map">
|
||||
<map id="map" :markers='markers' :scale="scale" :enable-zoom="true" :polyline="polyline"
|
||||
style="width:100%;height: 100%;" :latitude="latitude" :enable-scroll="false" :longitude="longitude">
|
||||
</map>
|
||||
<view v-if='showLoading'>
|
||||
<u-loading-page :loading="showLoading"></u-loading-page>
|
||||
</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 v-else>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
<view class="map">
|
||||
<map id="map" @click="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">
|
||||
</map>
|
||||
</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 class="order_info">
|
||||
|
||||
<p class='tit'>订单号: {{goodsDetil.logistics.order_sn}}</p>
|
||||
<view class="store_name">
|
||||
商户名称 {{goodsDetil.logistics.shop_name}}
|
||||
</view>
|
||||
<view style="margin: 20rpx 0;">
|
||||
{{item.create_time }}
|
||||
<view class="store_time">
|
||||
{{goodsDetil.logistics.shop_address}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="pro_info">
|
||||
<view style="color: #999; flex:1">
|
||||
商品信息
|
||||
<view class="tit_a">
|
||||
<text>物流信息</text>
|
||||
</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 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 class="total">
|
||||
共计{{goodsDetil.product_count}}件商品
|
||||
</view>
|
||||
<u-button type="primary" v-if='goodsDetil.logistics.status==0' @click="confirm"
|
||||
class="custom-style">已取货</u-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -61,100 +68,27 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showLoading: true,
|
||||
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', //显示的图标
|
||||
latitude: undefined,
|
||||
longitude: undefined,
|
||||
markers: [{
|
||||
latitude: undefined,
|
||||
longitude: undefined,
|
||||
iconPath: '@/static/images/daoru.png', //显示的图标
|
||||
width: 40, //宽
|
||||
height: 40, //高
|
||||
title: '商家位置', //标注点名
|
||||
alpha: 0.5, //透明度
|
||||
|
||||
// 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
|
||||
}).then(res => {
|
||||
this.showToast()
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 2000)
|
||||
})
|
||||
this.showPop = false
|
||||
|
||||
},
|
||||
showToast() {
|
||||
this.$refs.uToast.show({
|
||||
type: 'success',
|
||||
@ -163,118 +97,78 @@
|
||||
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);
|
||||
},
|
||||
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,
|
||||
});
|
||||
},
|
||||
// 规划路线的时候给起点一个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);
|
||||
showToast() {
|
||||
// 6
|
||||
this.$refs.uToast.show({
|
||||
type: 'success',
|
||||
title: '成功主题(带图标)',
|
||||
message: "操作成功",
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
|
||||
})
|
||||
},
|
||||
// 规划路线的时候给终点一个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);
|
||||
qrqodeFn() {
|
||||
let that = this
|
||||
uni.scanCode({
|
||||
onlyFromCamera: true,
|
||||
success: function(res) {
|
||||
console.log("扫码类容" + res.result)
|
||||
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)
|
||||
})
|
||||
|
||||
},
|
||||
// 取货{}
|
||||
// takeGood() {
|
||||
// takeGoods({
|
||||
// logistics_id: this.goodsDetil.logistics.id,
|
||||
// order_id: this.goodsDetil.logistics.order_id,
|
||||
// order_sn: 'wxo1691655309361543421'
|
||||
// }).then(res => {
|
||||
// this.$emit('showTost')
|
||||
// this.$emit('getlist')
|
||||
// })
|
||||
|
||||
// },
|
||||
// 地图结束
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
onLoad(options) {
|
||||
getDetil({
|
||||
logistics_id: options.id
|
||||
}).then(res => {
|
||||
this.goodsDetil = res.data
|
||||
console.log(this.goodsDetil)
|
||||
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>
|
||||
|
||||
@ -285,6 +179,7 @@
|
||||
|
||||
}
|
||||
|
||||
|
||||
.custom-style {
|
||||
width: 100%;
|
||||
background-color: #3C9CFF;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
|
||||
<u-search placeholder="搜索你的订单" @search="getOrderList" :show-action='false' bg-color='white'
|
||||
v-model="keywords"></u-search>
|
||||
<view style="margin: 10rpx 0 0 0;">
|
||||
@ -12,7 +13,7 @@
|
||||
</u-empty>
|
||||
</view>
|
||||
<view v-else>
|
||||
<logistiCard :ref="'logistiCard'+index" v-for='(item,index) in orderlist' @getlist="getOrderList"
|
||||
<logistiCard ref="logistiCards" v-for='(item,index) in orderlist' @getlist="getOrderList"
|
||||
@showTost='showToast' :goodsInfo="item" :key="index">
|
||||
</logistiCard>
|
||||
</view>
|
||||
@ -45,6 +46,9 @@
|
||||
this.curNow = index;
|
||||
this.getOrderList()
|
||||
},
|
||||
test() {
|
||||
console.log(this.$refs.logistiCards[1])
|
||||
},
|
||||
showToast() {
|
||||
// 6
|
||||
this.$refs.uToast.show({
|
||||
@ -59,22 +63,21 @@
|
||||
let id = JSON.parse(uni.getStorageSync('USER_INFO')).id
|
||||
getList({
|
||||
status: this.curNow,
|
||||
// courier_id: 167,
|
||||
courier_id: id,
|
||||
keywords: this.keywords
|
||||
}).then(res => {
|
||||
this.orderlist = []
|
||||
this.orderlist = res.data.data
|
||||
for (let i = 0; i < this.orderlist.length; i++) {
|
||||
// this.logistiCard
|
||||
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
// if (this.$refs.logistiCard) {
|
||||
// for (let i = 0; i < this.orderlist.length; i++) {
|
||||
// this.$refs.logistiCard[i].showMore()
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {
|
||||
this.getOrderList()
|
||||
|
||||
|
||||
@ -5,18 +5,17 @@
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="order">
|
||||
<u-loading-page :loading="showLoading"></u-loading-page>
|
||||
<p>订单号:{{goodsDetil.logistics.order_sn}}</p>
|
||||
<view class='phone'>收货时间 : {{goodsDetil.record[0].create_time}} </view>
|
||||
<view class='phone'> </view>
|
||||
|
||||
<!-- 已送达 -->
|
||||
<view class="left" v-if="goodsDetil.logistics.status>=2">
|
||||
<view class="left" v-if="goodsDetil.logistics.status==2">
|
||||
<view class="list">
|
||||
<text>
|
||||
收货时间
|
||||
</text>
|
||||
<view>
|
||||
{{goodsDetil.record[0].create_time}}
|
||||
{{goodsDetil.record[2].create_time}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
@ -28,10 +27,10 @@
|
||||
{{goodsDetil.logistics.user_address}}
|
||||
</view>
|
||||
<view>
|
||||
{{goodsDetil.logistics.user_name||"顾客电话"}}
|
||||
{{goodsDetil.logistics.user_name||"顾客电话"}} :{{goodsDetil.logistics.user_phone||"顾客电话"}}
|
||||
</view>
|
||||
<view>
|
||||
{{goodsDetil.record[0].create_time}}
|
||||
{{goodsDetil.record[2].create_time}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -45,7 +44,7 @@
|
||||
{{goodsDetil.logistics.shop_address||"商家地址"}}
|
||||
</view>
|
||||
<view>
|
||||
{{goodsDetil.logistics.shop_phone||"商家电话"}}
|
||||
{{goodsDetil.logistics.shop_name||"商家电话"}} :{{goodsDetil.logistics.shop_phone||"商家电话"}}
|
||||
</view>
|
||||
<view>
|
||||
{{goodsDetil.record[1].create_time}}
|
||||
@ -57,14 +56,15 @@
|
||||
订单详情
|
||||
</text>
|
||||
<view>
|
||||
<view v-for="(item,index) in goodsDetil.record" :key="item.create_time">
|
||||
<view>
|
||||
{{item.content}}
|
||||
</view>
|
||||
<view>
|
||||
{{item.create_time}}
|
||||
</view>
|
||||
</view>
|
||||
<u-steps :current="record.length" direction="column">
|
||||
<u-steps-item :title="item.content" :desc="item.create_time"
|
||||
v-for="(item,index) in goodsDetil.record">
|
||||
</u-steps-item>
|
||||
<!-- <u-steps-item title="已出库" desc="10:35">
|
||||
</u-steps-item>
|
||||
<u-steps-item title="运输中" desc="11:40">
|
||||
</u-steps-item> -->
|
||||
</u-steps>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pro_list">
|
||||
@ -104,14 +104,19 @@
|
||||
<text>
|
||||
物流信息
|
||||
</text>
|
||||
<view>
|
||||
<!-- <view>
|
||||
<view v-for="(item,index) in goodsDetil.record">
|
||||
{{item.content}}
|
||||
<view>
|
||||
{{item.create_time}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<u-steps :current="record.length-1" direction="column">
|
||||
<u-steps-item :title="item.content" :desc="item.create_time"
|
||||
v-for="(item,index) in (record)">
|
||||
</u-steps-item>
|
||||
</u-steps>
|
||||
</view>
|
||||
<view class="pro_list">
|
||||
<text style="color: #999;width: 15vw;">
|
||||
@ -138,8 +143,19 @@
|
||||
</view>
|
||||
<view class="cil_right">
|
||||
</view>
|
||||
<u-modal :show="showPop" @confirm="confirm" content="请确认货物已送达" @close="showPop=false"
|
||||
:closeOnClickOverlay="true"></u-modal>
|
||||
<!-- <u-modal :show="showPop" @confirm="confirm" content="请确认货物已送达" @close="showPop=false"
|
||||
:closeOnClickOverlay="true"></u-modal> -->
|
||||
|
||||
<u-modal :show="showPop" @close="showPop=false" title="请输入收件码" @confirm="confirm"
|
||||
:closeOnClickOverlay="true">
|
||||
<view class="slot-content">
|
||||
<u--input placeholder="请输入收件码" border="surround" v-model="take_code"></u--input>
|
||||
</view>
|
||||
</u-modal>
|
||||
|
||||
|
||||
|
||||
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
</view>
|
||||
|
||||
@ -164,14 +180,19 @@
|
||||
showLoading: true,
|
||||
goodsDetil: undefined,
|
||||
flag: 0,
|
||||
take_code: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// rereverse()
|
||||
record() {
|
||||
return this.goodsDetil.record.reverse()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirm() {
|
||||
let id = JSON.parse(uni.getStorageSync('USER_INFO')).id
|
||||
doneDelivery({
|
||||
user_id: id,
|
||||
// user_id: id,
|
||||
take_code: this.take_code,
|
||||
logistics_id: this.goodsDetil.logistics.id
|
||||
}).then(res => {
|
||||
this.showToast()
|
||||
@ -192,7 +213,7 @@
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
// console.log(options.id)
|
||||
|
||||
getDetil({
|
||||
logistics_id: options.id
|
||||
}).then(res => {
|
||||
@ -251,17 +272,6 @@
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
/* view {
|
||||
view {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
text {
|
||||
margin-right: 20rpx;
|
||||
width: 30vw;
|
||||
color: #999;
|
||||
} */
|
||||
}
|
||||
}
|
||||
|
||||
@ -309,5 +319,9 @@
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tost_tit {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -1,11 +1,60 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="map">
|
||||
<map id="map" :markers='markers' :scale="scale" :enable-zoom="true" :polyline="polyline"
|
||||
style="width:100%;height: 100%;" :latitude="latitude" :enable-scroll="false"
|
||||
:longitude="longitude"></map>
|
||||
<view v-if='showLoading'>
|
||||
<u-loading-page :loading="showLoading"></u-loading-page>
|
||||
</view>
|
||||
<button @click="getDriverLine">叫我按钮</button>
|
||||
<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>
|
||||
|
||||
@ -19,93 +68,48 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showLoading: true,
|
||||
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
|
||||
|
||||
// }
|
||||
|
||||
// ]
|
||||
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() {
|
||||
let id = JSON.parse(uni.getStorageSync('USER_INFO')).id
|
||||
takeGoods({
|
||||
user_id: id,
|
||||
order_id: "",
|
||||
order_sn: "",
|
||||
logistics_id: this.goodsDetil.logistics.id
|
||||
}).then(res => {
|
||||
this.showToast()
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 2000)
|
||||
})
|
||||
this.showPop = false
|
||||
|
||||
},
|
||||
showToast() {
|
||||
this.$refs.uToast.show({
|
||||
type: 'success',
|
||||
title: '成功主题(带图标)',
|
||||
message: "操作成功",
|
||||
iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
|
||||
})
|
||||
},
|
||||
/*
|
||||
地图相关
|
||||
@ -115,16 +119,16 @@
|
||||
const that = this;
|
||||
const key = "997c9a3d88154fa78f4d28bebc1dd84f";
|
||||
//起点坐标
|
||||
const origin = "105.43639400000002,28.908854";
|
||||
const origin = "28.908854,105.43639400000002,";
|
||||
//给起点坐标一个图标
|
||||
this.startingPoint()
|
||||
//给终点坐标一个图标
|
||||
this.endPoint()
|
||||
//终点坐标
|
||||
const destination = "105.439304,28.908447";
|
||||
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=${origin}&destination=${destination}`,
|
||||
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 = [];
|
||||
@ -144,7 +148,6 @@
|
||||
that.runningRoute = data.paths[0].steps[0].instruction;
|
||||
console.log('行驶路线-----------', that.runningRoute)
|
||||
}
|
||||
|
||||
that.polyline = [{
|
||||
points: points,
|
||||
color: "#0091ff",
|
||||
@ -193,19 +196,42 @@
|
||||
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
|
||||
// console.log(this.goodsDetil)
|
||||
// })
|
||||
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
|
||||
@ -230,9 +256,10 @@
|
||||
|
||||
}
|
||||
|
||||
|
||||
.custom-style {
|
||||
width: 100%;
|
||||
background-color: red;
|
||||
background-color: #3C9CFF;
|
||||
border: none;
|
||||
color: white;
|
||||
height: 90rpx;
|
||||
@ -232,7 +232,7 @@
|
||||
// })
|
||||
// },
|
||||
async getOrderList() {
|
||||
let id = JSON.parse(uni.getStorageSync('USER_INFO')).id
|
||||
let id = JSON.parse(uni.getStorageSync('USER_INFO')).id || ""
|
||||
let res = await getList({
|
||||
courier_id: id
|
||||
// courier_id: 167
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user