507 lines
11 KiB
Vue
507 lines
11 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="part2 u-skeleton-fillet">
|
|
<view class="box_add">
|
|
<!-- <view class="distance">
|
|
<view>{{orderDelites.distancessd}}</view>
|
|
</view> -->
|
|
<view class="add_name" @click="goStart">
|
|
<view class="sh_name">
|
|
{{orderDelites.userAddressDetail}}({{orderDelites.userProvince}}{{orderDelites.userCity}}{{orderDelites.userDistrict}})
|
|
<u-icon name="map"></u-icon>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<u-line color="#F2F2F2" />
|
|
<view class="part3">
|
|
<view class="three_left">
|
|
<image src="../../../static/rider/icon_data.png"></image>
|
|
<text>{{orderDelites.sendOutTime}}</text>
|
|
</view>
|
|
<!-- <view class="three_right">¥{{orderDelites.errandMoney}}</view> -->
|
|
</view>
|
|
</view>
|
|
|
|
<!-- tip -->
|
|
<view class="tip_box u-skeleton-fillet">
|
|
<view class="tip_part1">
|
|
<view class="box_two" v-if="orderDelites.indentType==4">同城服务</view>
|
|
<view class="box_two" v-if="orderDelites.indentType==3">同城帮买</view>
|
|
<view class="box_one" v-if='orderDelites.serviceType'>{{orderDelites.serviceType}}</view>
|
|
<view class="box_one" v-if='orderDelites.tool'>{{orderDelites.tool}}</view>
|
|
</view>
|
|
<u-line color="#F2F2F2" />
|
|
<view class="tip_content" v-if="orderDelites.indentType==3">
|
|
{{orderDelites.remarks}}
|
|
</view>
|
|
<view class="tip_content" v-if="orderDelites.indentType==4">
|
|
{{orderDelites.serviceDetails}}
|
|
</view>
|
|
</view>
|
|
<!-- 订单信息 -->
|
|
<view class="order_box u-skeleton-fillet">
|
|
<view class="order_title">订单信息</view>
|
|
<view class="order_list">
|
|
<view class="order_name">订单号码</view>
|
|
<view class="order_numbers" @click="copyOrder(orderDelites.indentNumber)">{{orderDelites.indentNumber}}
|
|
<u-icon name="order"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="order_list">
|
|
<view class="order_name">预约时间</view>
|
|
<view class="order_numbers">{{orderDelites.sendOutTime}}</view>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- 费用明细 -->
|
|
<view class="order_box u-skeleton-fillet">
|
|
<view class="order_title">费用明细</view>
|
|
<view class="order_list">
|
|
<view class="income_name">跑腿费</view>
|
|
<view class="income_numbers">¥<text>{{orderDelites.errandMoney}}</text></view>
|
|
</view>
|
|
<view class="order_list" v-if="orderDelites.tip">
|
|
<view class="income_name">小费奖励</view>
|
|
<view class="income_numbers">¥<text>{{orderDelites.tip}}</text></view>
|
|
</view>
|
|
<view class="order_list" v-if="orderDelites.prepayMoney">
|
|
<view class="income_name">商品预付</view>
|
|
<view class="income_numbers">¥<text>{{orderDelites.prepayMoney}}</text></view>
|
|
</view>
|
|
<view class="order_list">
|
|
<view class="income_name">合计</view>
|
|
<view class="income_numbers1">¥<text>{{orderDelites.riderMoney}}</text></view>
|
|
</view>
|
|
</view>
|
|
<!-- 接单按钮 -->
|
|
<view class="tabbar_btn">
|
|
<view class="btn" @click="bindorder">接单</view>
|
|
</view>
|
|
<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
orderDelites: {},
|
|
indentNumber: '',
|
|
checkCertification: '',
|
|
userId: '',
|
|
loading: true, // 是否显示骨架屏组件
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
console.log(options)
|
|
this.indentNumber = options.id
|
|
var that = this
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: function(res) {
|
|
console.log('当前位置的经度：' + res.longitude);
|
|
console.log('当前位置的纬度：' + res.latitude);
|
|
that.longitude = res.longitude
|
|
that.latitude = res.latitude
|
|
that.taskData()
|
|
}
|
|
});
|
|
this.userId = that.$queue.getData("userId");
|
|
this.checkCertification = that.$queue.getData("checkCertification");
|
|
},
|
|
methods: {
|
|
copyOrder(value) {
|
|
uni.setClipboardData({
|
|
data: value, //要被复制的内容
|
|
success: () => { //复制成功的回调函数
|
|
uni.showToast({ //提示
|
|
title: '复制成功'
|
|
})
|
|
}
|
|
});
|
|
},
|
|
goStart() {
|
|
// let obj = {
|
|
// name: this.orderDelites.deilveryAddressDetail,
|
|
// lat: this.orderDelites.userLat,
|
|
// long: this.orderDelites.userLng,
|
|
// }
|
|
// this.navgate(obj)
|
|
let latitude = this.orderDelites.userLat
|
|
let longitude = this.orderDelites.userLng
|
|
let name = this.orderDelites.userAddressDetail
|
|
uni.openLocation({
|
|
latitude: Number(latitude), //要去的纬度-地址
|
|
longitude: Number(longitude), //要去的经度-地址
|
|
name: name, //地址名称
|
|
address: name, //详细地址名称
|
|
success: function() {
|
|
console.log('导航成功');
|
|
},
|
|
fail: function(error) {
|
|
console.log(error)
|
|
}
|
|
})
|
|
|
|
},
|
|
navgate(e) {
|
|
let plugin = requirePlugin('routePlan');
|
|
let key = this.$queue.getData('mapKey'); //使用在腾讯位置服务申请的key
|
|
let referer = this.$queue.getData('mapName'); //调用插件的app的名称
|
|
|
|
let endPoint = JSON.stringify({ //终点
|
|
'name': e.name,
|
|
'latitude': e.lat,
|
|
'longitude': e.long
|
|
});
|
|
wx.navigateTo({
|
|
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
|
|
});
|
|
},
|
|
// 获取任务数据
|
|
taskData() {
|
|
this.$Request.postT('/app/tbindent/indentMessage', {
|
|
indentNumber: this.indentNumber,
|
|
ol: this.longitude,
|
|
od: this.latitude
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
if (res.data.distancessd > 1000) {
|
|
res.data.distancessd = Number((res.data.distancessd / 1000)).toFixed(2) + "km"
|
|
} else {
|
|
if (res.data.distancessd == 0) {
|
|
res.data.distancessd = "0m";
|
|
} else {
|
|
res.data.distancessd = Number(res.data.distancessd).toFixed(1) + "m";
|
|
}
|
|
}
|
|
this.orderDelites = res.data
|
|
|
|
} else {
|
|
console.log('res', res.data)
|
|
}
|
|
this.loading = false;
|
|
});
|
|
},
|
|
bindorder() {
|
|
let that = this
|
|
if (!that.userId) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '请先登录后再接单',
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定');
|
|
uni.navigateTo({
|
|
url: '/pages/login/login'
|
|
})
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
if (that.checkCertification != 1) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '请先实名认证后再接单',
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定');
|
|
uni.navigateTo({
|
|
url: '/pages/riderMy/approve/approve'
|
|
})
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确认接单吗',
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定');
|
|
that.$Request.postT('/app/tbindent/indentReceiving', {
|
|
indentNumber: that.indentNumber
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
uni.navigateTo({
|
|
url: '/pages/index/orderdetail/orderdetail?id=' + that
|
|
.indentNumber
|
|
})
|
|
} else {
|
|
console.log('失败：', res.data)
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 1500
|
|
});
|
|
}
|
|
});
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
body {
|
|
background: #F5F5F5;
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
padding-bottom: 180rpx;
|
|
}
|
|
|
|
.part2 {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
/* padding-top: 25rpx; */
|
|
/* height: 230rpx; */
|
|
background: #ffffff;
|
|
border-radius: 23rpx;
|
|
/* box-shadow: 0rpx 5rpx 5rpx 0rpx rgba(198, 186, 181, 0.20); */
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.box_add {
|
|
display: flex;
|
|
/* height: 100rpx; */
|
|
/* line-height: 31rpx; */
|
|
padding: 15px 17px;
|
|
}
|
|
|
|
.distance {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
.a {
|
|
font-size: 16rpx;
|
|
}
|
|
|
|
.add_name {
|
|
flex: 4;
|
|
}
|
|
|
|
|
|
.sh_name {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
|
|
.xs_add {
|
|
color: #999999;
|
|
font-size: 24rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.u-line {
|
|
border-bottom-width: 3px !important;
|
|
}
|
|
|
|
.part3 {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
}
|
|
|
|
.three_left {
|
|
flex: 1;
|
|
height: 100rpx;
|
|
display: flex;
|
|
justify-content: left;
|
|
align-items: center;
|
|
}
|
|
|
|
.three_left image {
|
|
width: 36rpx;
|
|
height: 37rpx;
|
|
}
|
|
|
|
.three_left text {
|
|
color: #333333;
|
|
font-size: 25rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.three_right {
|
|
flex: 1;
|
|
height: 100rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
color: #FF412D;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* tip */
|
|
.tip_box {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
height: 180rpx;
|
|
background: #FFFFFF;
|
|
margin-top: 20rpx;
|
|
border-radius: 22rpx;
|
|
}
|
|
|
|
.tip_part1 {
|
|
display: flex;
|
|
height: 70rpx;
|
|
justify-content: left;
|
|
align-items: center;
|
|
margin-left: 30rpx;
|
|
|
|
}
|
|
|
|
.box_one {
|
|
background: #c4e2ff;
|
|
color: #359CFF;
|
|
height: 45rpx;
|
|
font-size: 22rpx;
|
|
text-align: center;
|
|
line-height: 45rpx;
|
|
border-radius: 5rpx;
|
|
margin-left: 20rpx;
|
|
padding: 0 10rpx
|
|
}
|
|
|
|
.box_two {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
letter-spacing: 3rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tip_content {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
font-size: 29rpx;
|
|
/* font-weight: bold; */
|
|
letter-spacing: 2rpx;
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
.u-line {
|
|
border-bottom-width: 3px !important;
|
|
}
|
|
|
|
/* 订单信息 */
|
|
.order_box {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
/* height: 300rpx; */
|
|
padding-bottom: 10upx;
|
|
background: #ffffff;
|
|
margin-top: 20rpx;
|
|
border-radius: 22rpx;
|
|
}
|
|
|
|
.order_title {
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
line-height: 67rpx;
|
|
letter-spacing: 3rpx;
|
|
}
|
|
|
|
.order_list {
|
|
display: flex;
|
|
}
|
|
|
|
.order_name {
|
|
flex: 1;
|
|
margin-left: 35rpx;
|
|
color: #999999;
|
|
font-size: 25rpx;
|
|
height: 75rpx;
|
|
display: flex;
|
|
justify-content: left;
|
|
align-items: center;
|
|
}
|
|
|
|
.order_numbers {
|
|
flex: 1;
|
|
color: #333333;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
font-size: 26rpx;
|
|
margin-right: 35rpx;
|
|
}
|
|
|
|
/* 费用明细 */
|
|
.income_name {
|
|
flex: 1;
|
|
margin-left: 35rpx;
|
|
color: #999999;
|
|
font-size: 26rpx;
|
|
height: 75rpx;
|
|
display: flex;
|
|
justify-content: left;
|
|
align-items: center;
|
|
}
|
|
|
|
.income_numbers {
|
|
flex: 1;
|
|
color: #333333;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
font-size: 26rpx;
|
|
margin-right: 35rpx;
|
|
}
|
|
|
|
.income_numbers1 {
|
|
flex: 1;
|
|
color: #FF2400;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
font-size: 26rpx;
|
|
margin-right: 35rpx;
|
|
}
|
|
|
|
/* 接单按钮 */
|
|
.tabbar_btn {
|
|
position: fixed;
|
|
bottom: 0rpx;
|
|
left: 0rpx;
|
|
right: 0rpx;
|
|
width: 100%;
|
|
height: 120rpx;
|
|
background: #FFFFFF;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.btn {
|
|
width: 90%;
|
|
height: 80rpx;
|
|
background: #FF7F00;
|
|
border-radius: 21rpx;
|
|
color: white;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
</style>
|