421 lines
9.7 KiB
Vue
421 lines
9.7 KiB
Vue
<template>
|
||
<view class="navigation">
|
||
<view class="map">
|
||
<map :latitude="latitude" :longitude="longitude" :markers="covers" :polyline="polyline"></map>
|
||
</view>
|
||
<view class="mingxi qy-bg-white margin-bottom-sm">
|
||
<view class="mx hide">
|
||
<view class="mx_l qy-text-grey">{{__('距离取货点')}}</view>
|
||
<view class="mx_r">{{info.po_distance}}KM</view>
|
||
</view>
|
||
<view class="mx hide">
|
||
<view class="mx_l qy-text-grey">{{__('期望时间')}}</view>
|
||
<view class="mx_r">{{info.po_expectedtime}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="Process padding-xs">
|
||
<view class="process_01">
|
||
<view class="process_01_l">
|
||
<view class="process_01_l_01 qy-bg-yellow text-white"><view class="tex">{{__('取')}}</view></view>
|
||
</view>
|
||
<view class="process_01_r">
|
||
<view class="">{{__('地址')}}</view>
|
||
<span>{{info.store_address}}</span>
|
||
</view>
|
||
</view>
|
||
<view class="process_01">
|
||
<view class="process_01_l">
|
||
<view class="process_01_l_01 qy-bg-red text-white"><view class="tex">{{__('送')}}</view></view>
|
||
</view>
|
||
<view class="process_01_r">
|
||
<view class="process_01_r_01">{{__('地址')}}</view>
|
||
<span>{{info.po_receive_address}}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mingxi qy-bg-white margin-top-sm">
|
||
<view class="mx">
|
||
<view class="mx_l qy-text-grey">{{__('商家名称')}}</view>
|
||
<view class="mx_r">{{info.store_name}}</view>
|
||
</view>
|
||
<view class="mxs">
|
||
<view class="mxs_l qy-text-grey">{{__('商家电话')}}</view>
|
||
<view class="mxs_r">
|
||
<view class="mxs_r_01">{{info.store_tel}}</view>
|
||
<view class="mxs_r_02 qy-text-grey"><image class="grey-mobile" src="../images/user/Mobile@2x.png" :data-tel="info.store_tel" @click="callTel"></image></view>
|
||
</view>
|
||
</view>
|
||
<view class="mx">
|
||
<view class="mx_l qy-text-grey">{{__('收货人')}}</view>
|
||
<view class="mx_r">{{info.po_receive_name}}</view>
|
||
</view>
|
||
<view class="mxs">
|
||
<view class="mxs_l qy-text-grey">{{__('收货人电话')}}</view>
|
||
<view class="mxs_r">
|
||
<view class="mxs_r_01">{{receive_tel}}</view>
|
||
<view class="mxs_r_02 qy-text-grey"><image class="grey-mobile" src="../images/user/Mobile@2x.png" :data-tel="info.po_receive_tel" @click="callTel"></image></view>
|
||
</view>
|
||
</view>
|
||
<view class="mx">
|
||
<view class="mx_l qy-text-grey">{{__('备注')}}</view>
|
||
<view class="mx_r">{{info.po_remark}}</view>
|
||
</view>
|
||
<view class="mxs">
|
||
<view class="mxs_l qy-text-grey">{{__('收入详情')}}</view>
|
||
<view class="mxs_r">
|
||
<view class="mxs_r_01">{{__('平台配送费')}}</view>
|
||
<view class="mxs_r_02 ">{{__('￥')}}{{info.po_freight}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="mxs">
|
||
<view class="mxs_l qy-text-grey"></view>
|
||
<view class="mxs_r">
|
||
<view class="mxs_r_01">平台配送费</view>
|
||
<view class="mxs_r_02 ">￥2.5</view>
|
||
</view>
|
||
</view>
|
||
<view class="mxs">
|
||
<view class="mxs_l qy-text-grey"></view>
|
||
<view class="mxs_r">
|
||
<view class="mxs_r_01">小费</view>
|
||
<view class="mxs_r_02 ">￥2.5</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
<view class="H50"></view>
|
||
<view class="foot">
|
||
<view class="foot_l">
|
||
<view class="foot_l_01 qy-text-red">
|
||
{{__('￥')}}
|
||
<span>{{info.po_freight}}</span>
|
||
</view>
|
||
<!-- <view class="foot_l_02">小费 ￥ 2.0</view> -->
|
||
</view>
|
||
<block v-if="(info.po_state_id == 1)">
|
||
<view class="foot_r"><button class="cu-btn round bg-yellow" @click="jump_grabbing">{{__('立即抢单')}}</button></view>
|
||
</block>
|
||
<block v-if="(info.po_state_id == 2)">
|
||
<view class="foot_r"><button class="cu-btn round bg-yellow" @click="jump_pickup">{{__('待取货')}}</button></view>
|
||
</block>
|
||
<block v-if="(info.po_state_id == 3)">
|
||
<view class="foot_r"><button class="cu-btn round bg-yellow" @click="jump_service">{{__('已送达')}}</button></view>
|
||
</block>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState, mapMutations } from 'vuex';
|
||
export default {
|
||
data() {
|
||
return {
|
||
po_id: '',
|
||
info: {},
|
||
latitude: 36.909,
|
||
longitude: 116.39742,
|
||
covers: [{
|
||
latitude: 36.9085,
|
||
longitude: 116.39747,
|
||
|
||
}, {
|
||
latitude: 39.90,
|
||
longitude: 116.39,
|
||
}],
|
||
polyline:[],
|
||
receive_tel: ''
|
||
|
||
|
||
};
|
||
},
|
||
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
||
onLoad: function(options) {
|
||
uni.setNavigationBarTitle({
|
||
title: this.__('订单导航')
|
||
});
|
||
|
||
this.forceUserInfo(function(user) {});
|
||
|
||
if (options.po_id) {
|
||
this.setData({
|
||
po_id: options.po_id
|
||
});
|
||
}
|
||
|
||
this.init();
|
||
},
|
||
|
||
methods: {
|
||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||
|
||
init: function() {
|
||
var that = this;
|
||
|
||
var params = {
|
||
po_id: that.po_id
|
||
};
|
||
that.$.request({
|
||
url: that.Config.URL.city.order_get,
|
||
data: params,
|
||
success: function(data, status, msg, code) {
|
||
var tel = (data.po_receive_tel).toString();;
|
||
var reg = /^(\d{3})\d{4}(\d{4})$/;
|
||
tel = tel.replace(reg, "$1****$2");
|
||
that.setData({
|
||
info: data,
|
||
receive_tel: tel,
|
||
longitude: data.store_longitude,
|
||
latitude: data.store_latitude,
|
||
});
|
||
|
||
|
||
that.covers = [{
|
||
latitude: data.store_latitude,
|
||
longitude: data.store_longitude,
|
||
iconPath: '../../static/images/person.png',
|
||
callout: {
|
||
content: '骑手'
|
||
}
|
||
},{
|
||
latitude: data.po_receive_latitude,
|
||
longitude: data.po_receive_longitude,
|
||
iconPath: '../../static/images/person.png',
|
||
callout: {
|
||
content: '买家'
|
||
}
|
||
}]
|
||
|
||
|
||
that.polyline = [{//指定一系列坐标点，从数组第一项连线至最后一项
|
||
points:[
|
||
{latitude: data.store_latitude,longitude: data.store_longitude},
|
||
{latitude: data.po_receive_latitude,longitude: data.po_receive_longitude},
|
||
],
|
||
color:"#0000AA",//线的颜色
|
||
width:2,//线的宽度
|
||
dottedLine:true,//是否虚线
|
||
arrowLine:true, //带箭头的线 开发者工具暂不支持该属性
|
||
}];
|
||
|
||
}
|
||
});
|
||
},
|
||
|
||
//送达
|
||
jump_service(e){
|
||
var that = this;
|
||
|
||
that.$.gopage("/paotui/order/signinpic?po_id=" + that.po_id);
|
||
|
||
},
|
||
//抢单
|
||
jump_grabbing(e){
|
||
var that = this;
|
||
|
||
var params = {
|
||
po_id: that.po_id
|
||
};
|
||
|
||
that.$.showModal({
|
||
title: that.__("提示"),
|
||
content: "确认抢单？",
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
that.$.request({
|
||
url: that.Config.URL.city.order_apply,
|
||
data: params,
|
||
success: function(data, status, msg, code) {
|
||
if(status == 200){
|
||
that.$.alert(that.__('抢单成功'))
|
||
that.setData({
|
||
list:[],
|
||
page: 1,
|
||
ispage: false,
|
||
flag: true,
|
||
})
|
||
|
||
that.getOrder()
|
||
}
|
||
|
||
}
|
||
});
|
||
|
||
}
|
||
},
|
||
})
|
||
|
||
},
|
||
//取货
|
||
jump_pickup(e){
|
||
var that = this;
|
||
|
||
var params = {
|
||
po_id: that.po_id
|
||
};
|
||
|
||
that.$.request({
|
||
url: that.Config.URL.city.order_pickup,
|
||
data: params,
|
||
success: function(data, status, msg, code) {
|
||
|
||
if(status == 200){
|
||
that.$.alert('取货成功',function() {
|
||
that.setData({
|
||
list:[],
|
||
page: 1,
|
||
ispage: false,
|
||
flag: true,
|
||
})
|
||
|
||
that.getOrder()
|
||
})
|
||
|
||
}
|
||
else
|
||
{
|
||
that.$.alert(msg)
|
||
}
|
||
|
||
|
||
}
|
||
});
|
||
},
|
||
|
||
callTel: function(e) {
|
||
let that = this;
|
||
console.log(e.currentTarget.dataset.tel)
|
||
that.$.makePhoneCall({
|
||
phoneNumber: e.currentTarget.dataset.tel
|
||
});
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import '../../styles/colorui/main';
|
||
@import '../../paotui/css/paotui';
|
||
.navigation {
|
||
.map {
|
||
height: 300px;
|
||
image {
|
||
width: 100%;
|
||
height: 300px;
|
||
}
|
||
}
|
||
.mingxi {
|
||
padding: 10px;
|
||
.mx {
|
||
display: flex;
|
||
padding-bottom: 10px;
|
||
.mx_l {
|
||
width: 90px;
|
||
flex-shrink: 0;
|
||
text-align: right;
|
||
padding-right: 20px;
|
||
}
|
||
.mx_r {
|
||
color: #767676;
|
||
}
|
||
}
|
||
.mxs {
|
||
display: flex;
|
||
padding-bottom: 10px;
|
||
.mxs_l {
|
||
width: 90px;
|
||
flex-shrink: 0;
|
||
text-align: right;
|
||
padding-right: 20px;
|
||
}
|
||
.mxs_r {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #767676;
|
||
flex-grow: 1;
|
||
}
|
||
}
|
||
}
|
||
.H50 {
|
||
height: 100px;
|
||
}
|
||
.foot {
|
||
position: fixed;
|
||
bottom: 0;
|
||
background-color: #fff;
|
||
width: 100%;
|
||
padding: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.foot_l {
|
||
display: flex;
|
||
.foot_l_01 span {
|
||
font-size: 24px;
|
||
padding-right: 5px;
|
||
}
|
||
.foot_l_02 {
|
||
padding-top: 8px;
|
||
color: #767676;
|
||
}
|
||
}
|
||
}
|
||
|
||
.Process {
|
||
background-color: #fff;
|
||
padding: 10px;
|
||
.process_01 {
|
||
display: flex;
|
||
padding: 10px 0;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #fafafa;
|
||
.process_01_l {
|
||
width: 10%;
|
||
display: flex;
|
||
align-items: center;
|
||
.process_01_l_01 {
|
||
width: 20px;
|
||
height: 20px;
|
||
text-align: center;
|
||
line-height: 20px;
|
||
font-size: 12px;
|
||
border-radius: 16px 16px 16px 0;
|
||
-webkit-transform: rotate(-45deg);
|
||
-moz-transform: ratate(-45deg);
|
||
transform: rotate(-45deg);
|
||
.tex {
|
||
transform: rotate(45deg);
|
||
}
|
||
}
|
||
}
|
||
.process_01_r {
|
||
width: 88%;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
.process_01_r_01 {
|
||
padding-bottom: 5px;
|
||
}
|
||
span {
|
||
font-size: 12px;
|
||
font-weight: 100;
|
||
}
|
||
}
|
||
}
|
||
.icon-map {
|
||
}
|
||
}
|
||
|
||
.foot_r {
|
||
line-height: 80rpx;
|
||
}
|
||
|
||
map {
|
||
width: 100%;
|
||
height: 600rpx;
|
||
}
|
||
|
||
.grey-mobile {
|
||
width:30rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
</style>
|