init
This commit is contained in:
shuhongfan
332
project-wl-yonghuduan-uniapp-vue3/subPages/order-info/index.scss
Normal file
332
project-wl-yonghuduan-uniapp-vue3/subPages/order-info/index.scss
Normal file
@@ -0,0 +1,332 @@
|
||||
.order-box{
|
||||
height: 100vh;
|
||||
background-color:white ;
|
||||
}
|
||||
.map-contain{
|
||||
width: 500rpx;
|
||||
height: 500rpx;
|
||||
}
|
||||
.order-info{
|
||||
min-height: 80vh;
|
||||
background-color:#F3F5F9 ;
|
||||
overflow: hidden;
|
||||
.order-header{
|
||||
margin: 40rpx;
|
||||
border-radius: 24rpx;
|
||||
background: #FEFFFE;
|
||||
height: 198rpx;
|
||||
.header-bg{
|
||||
padding: 12rpx 20rpx 11rpx;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
height: 32rpx;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-image: linear-gradient(269deg, #8D95AC 0%, #232031 92%);
|
||||
color: white;
|
||||
font-size: 22rpx;
|
||||
.toElectronicStub{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.order-num{
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.copy{
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-status{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 60rpx 32rpx 27rpx;
|
||||
position: relative;
|
||||
.line{
|
||||
width: 2rpx;
|
||||
height:96rpx ;
|
||||
background-color: #F5F5F5;
|
||||
position: absolute;
|
||||
left: 312rpx;
|
||||
top: 24rpx;
|
||||
}
|
||||
.status{
|
||||
text-align: center;
|
||||
.status-label{
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.status-tips{
|
||||
font-size: 22rpx;
|
||||
color:#878787 ;
|
||||
|
||||
}
|
||||
}
|
||||
.area{
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.arrow{
|
||||
width: 80rpx;
|
||||
height: 12rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.green-arrow{
|
||||
background-image: url(data:image/png;base64,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);
|
||||
}
|
||||
.red-arrow{
|
||||
background-image: url(data:image/png;base64,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);
|
||||
}
|
||||
.gray-arrow{
|
||||
background-image: url('data:image/png;base64,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');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.logistics-info{
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
background: #FFFFFF;
|
||||
height: calc(100% - 198rpx);
|
||||
padding:40rpx 48rpx 120rpx;
|
||||
padding-bottom: 40rpx;
|
||||
.order-detail{
|
||||
display: flex;
|
||||
.left{
|
||||
margin-right: 20rpx;
|
||||
.send,.get{
|
||||
width: 40rpx;
|
||||
height: 40prx;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.send{
|
||||
background: #000000;
|
||||
color: white;
|
||||
}
|
||||
.get{
|
||||
background: #E63E32;
|
||||
color: white;
|
||||
}
|
||||
.line{
|
||||
width: 2rpx;
|
||||
height: 136rpx;
|
||||
border-left: 2rpx dashed #D5D1D1;
|
||||
margin-left: 18rpx;
|
||||
}
|
||||
.active{
|
||||
height: 159rpx;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.send-people,.get-people{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.send-title{
|
||||
height: 100%;
|
||||
}
|
||||
.send-sub-title{
|
||||
color: #151515;
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 12rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.send-desc{
|
||||
color: #888888;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.address-enter{
|
||||
font-weight: bold;
|
||||
border-left: 2rpx solid #F4F4F4;
|
||||
padding-left: 28rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
.get-people{
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
.send-people{
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
.line{
|
||||
width: 100%;
|
||||
height: 2rpx;
|
||||
background-color: #F4F4F4;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.price-detail{
|
||||
border-top: 2rpx solid #F3F4F7;
|
||||
padding: 40rpx 0;
|
||||
.goods,.weight,.payType,.base-price{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 28rpx;
|
||||
.label,.value{
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.label{
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
.goods{
|
||||
margin-top: 0rpx;
|
||||
}
|
||||
}
|
||||
.logistics-orderInfo{
|
||||
.logistics-orderInfo-item.active{
|
||||
.logistics-orderInfo-left{
|
||||
.circle{
|
||||
background-color:#E63E32!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.logistics-orderInfo-item{
|
||||
display: flex;
|
||||
.logistics-orderInfo-left{
|
||||
.gray.circle{
|
||||
background-color:#818181 ;
|
||||
}
|
||||
.circle{
|
||||
position: relative;
|
||||
right: 0rpx;
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
text-align: center;
|
||||
line-height: 52rpx;
|
||||
border-radius: 50%;
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
image{
|
||||
width:40rpx ;
|
||||
height:40rpx ;
|
||||
}
|
||||
}
|
||||
.point{
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 50%;
|
||||
background-color:#818181 ;
|
||||
margin-right: 40rpx;
|
||||
position: relative;
|
||||
left: 20rpx;
|
||||
}
|
||||
.line{
|
||||
height: 154rpx;
|
||||
width: 2rpx;
|
||||
border-left: 2rpx dashed #DFDFDF;
|
||||
position: relative;
|
||||
left: 24rpx;
|
||||
}
|
||||
.line.short{
|
||||
height:120rpx ;
|
||||
}
|
||||
|
||||
}
|
||||
.logistics-orderInfo-right{
|
||||
margin-left: 20rpx;
|
||||
.status{
|
||||
font-size: 32rpx;
|
||||
color:#2A2929 ;
|
||||
font-weight: bold;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
.time{
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
.time,.desc{
|
||||
font-size: 24rpx;
|
||||
color:#818181 ;
|
||||
}
|
||||
.desc.active{
|
||||
font-weight: bold;
|
||||
color: #2A2929;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.BtnFooter{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
height: 172rpx;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
|
||||
.waiting-box,.pay-box{
|
||||
display: flex;
|
||||
.btn{
|
||||
width: 276rpx;
|
||||
height: 88rpx;
|
||||
background: #CCCCCC;
|
||||
border-radius: 44rpx;
|
||||
color: white;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
margin: 24rpx auto 0;
|
||||
}
|
||||
.share-btn{
|
||||
background-color:#E84134;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.cancel-order-btn{
|
||||
background-color: white;
|
||||
color: #191919;
|
||||
border: 2rpx solid #191919;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.pay-btn{
|
||||
width: 400rpx;
|
||||
background-color:#E84134;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//地图标记
|
||||
::v-deep .customCallout{
|
||||
display: flex;
|
||||
.content,.areaContent{
|
||||
width: 108rpx;
|
||||
height: 60rpx;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.content{
|
||||
background-color:#fff ;
|
||||
border-radius: 16rpx 0rpx 0rpx 16rpx;
|
||||
}
|
||||
.areaContent{
|
||||
background-color:#F6EEEC ;
|
||||
border-radius: 0 16rpx 16rpx 0;
|
||||
}
|
||||
.courier{
|
||||
width: 206rpx;
|
||||
height: 60rpx;
|
||||
border-radius:20rpx ;
|
||||
background-color: #fff;
|
||||
font-size: 28rpx;
|
||||
color:#20232A ;
|
||||
text-align: center;
|
||||
line-height:60rpx ;
|
||||
}
|
||||
}
|
||||
652
project-wl-yonghuduan-uniapp-vue3/subPages/order-info/index.vue
Normal file
652
project-wl-yonghuduan-uniapp-vue3/subPages/order-info/index.vue
Normal file
@@ -0,0 +1,652 @@
|
||||
<template>
|
||||
<view class="order-box">
|
||||
<!-- 头部导航栏 -->
|
||||
<nav-bar title='订单详情'></nav-bar>
|
||||
<view class="map-box" v-if="[23001,23005,23008,23009,23010].includes(orderStatus)">
|
||||
<!-- include-points在微信开发者工具无法正常显示，在真机可以 -->
|
||||
<map :include-points="covers.data.filter(item=>item.latitude)" scale="6"
|
||||
style="width: 100%; height: 780rpx;" :polyline="polyline.data" :markers="covers.data">
|
||||
<cover-view slot="callout">
|
||||
<block v-for="(item,index) in covers.data" :key="index">
|
||||
<cover-view v-if="[1,2].includes(item.id)" class="customCallout" :marker-id="item.id">
|
||||
<cover-view class="content">
|
||||
{{item.title}}
|
||||
</cover-view>
|
||||
<cover-view class="areaContent">
|
||||
{{item.areaName}}
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
<cover-view v-else-if="[3].includes(item.id)" class="customCallout" :marker-id="item.id">
|
||||
<cover-view class="courier">
|
||||
快递员上门中
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</block>
|
||||
|
||||
</cover-view>
|
||||
</map>
|
||||
</view>
|
||||
|
||||
<view class="order-info" v-if="netStatus">
|
||||
<view class="order-header">
|
||||
<view class="header-bg">
|
||||
<view class="order-num">
|
||||
{{[23000,22000,230011].includes(orderStatus)?'订':'运'}}单号：{{[23000,22000,230011].includes(orderStatus)?orderInfo.id:orderInfo.transportOrderId}}
|
||||
<image src="../../../static/orderInfo-copy.png" class="copy"
|
||||
@click.stop="handleCopy([23000,22000,230011].includes(orderStatus)?orderInfo.id:orderInfo.transportOrderId)">
|
||||
</image>
|
||||
</view>
|
||||
<view class="toElectronicStub" @click="handleToElectronicStub"
|
||||
v-if="[23001,23005,23008,23009,23010].includes(orderStatus)">
|
||||
电子存根
|
||||
<uni-icons type="right" size="15" color="white"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-status">
|
||||
<view class="status">
|
||||
<view class="status-label">
|
||||
{{showOrderStatus(orderStatus)}}
|
||||
</view>
|
||||
<view class="status-tips">
|
||||
<view class="time" v-if="[230011,22000,23009,23010].includes(orderStatus)">
|
||||
{{
|
||||
(orderStatus===230011?'取消':orderStatus===22000?'关闭':orderStatus===23009?'签收':'拒签')
|
||||
}}时间:
|
||||
{{handleTimeToStrTime(orderInfo.updated) }}
|
||||
</view>
|
||||
<view class="timeing" v-else>
|
||||
{{orderInfo.estimatedStartTime?
|
||||
orderStatus === 23000?
|
||||
'预计'+handleTimeToStrTime(orderInfo.estimatedStartTime)+'前上门'
|
||||
:'预计'+handleTimeToStrTime(orderInfo.estimatedArrivalTime)+'前送达'
|
||||
:''}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="area">
|
||||
<view class="start-area">
|
||||
{{orderInfo.senderProvince}}
|
||||
</view>
|
||||
<view class="arrow" :class="
|
||||
[[21000,23000,23001,23005,23008].includes(orderStatus)?'green-arrow':'',
|
||||
[23009,23010].includes(orderStatus)?'red-arrow':'',
|
||||
[230011,22000].includes(orderStatus)?'gray-arrow':'']
|
||||
"></view>
|
||||
<view class="end-area">
|
||||
{{orderInfo.receiverProvince}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 物流信息 -->
|
||||
<view class="logistics-info">
|
||||
<!-- 待取件，已取消，已关闭物流信息展示 -->
|
||||
<view class="only-orderInfo" v-if='[23000,230011,22000].includes(orderStatus)' :style="scrollHeight">
|
||||
<view class="order-detail">
|
||||
<view class="left">
|
||||
<view class="send">寄</view>
|
||||
<view class="line" :class="{active:twoLine>=2}"></view>
|
||||
<view class="get">收</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="send-people">
|
||||
<view class="send-title">
|
||||
<view class="send-sub-title">
|
||||
{{orderInfo.senderName}}
|
||||
<text>{{orderInfo.senderPhone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")}}</text>
|
||||
</view>
|
||||
<view class="send-desc">{{orderInfo.senderAddress}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="get-people">
|
||||
<view class="send-title">
|
||||
<view class="send-sub-title">
|
||||
{{orderInfo.receiverName}}
|
||||
<text>{{orderInfo.receiverPhone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")}}</text>
|
||||
</view>
|
||||
<view class="send-desc">{{orderInfo.receiverAddress}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="price-detail">
|
||||
<view class="goods">
|
||||
<view class="label">物品</view>
|
||||
<view class="value">{{orderInfo.goods}}</view>
|
||||
</view>
|
||||
<view class="weight">
|
||||
<view class="label">计费重量</view>
|
||||
<view class="value">{{orderInfo.goodsWeight}}kg</view>
|
||||
</view>
|
||||
<view class="payType">
|
||||
<view class="label">付费方式</view>
|
||||
<view class="value">{{orderInfo.paymentMethod}}</view>
|
||||
</view>
|
||||
<view class="base-price">
|
||||
<view class="label">基础运费</view>
|
||||
<view class="value">{{orderInfo.amount}}元</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 已取件，运送中，派送中，已签收，已拒收物流信息展示 -->
|
||||
<scroll-view scroll-y :style="scrollHeight" v-else>
|
||||
<view class="logistics-orderInfo">
|
||||
<view class="logistics-orderInfo-item" :class="[index===0?'active':'']" :key="index"
|
||||
v-for='(item,index) in logisticsInfo.data'>
|
||||
<view class="logistics-orderInfo-left">
|
||||
<view class="circle gray" v-if="['已拒收','已签收','已取件'].includes(item.status)">
|
||||
{{item.status==='已拒收'?'拒':item.status==='已签收'?'签':'取'}}
|
||||
</view>
|
||||
|
||||
<view class="circle gray"
|
||||
v-else-if="index ===0 &&['运送中','派送中'].includes(item.status) || index>0 && logisticsInfo.data[index-1].status !=='运送中'">
|
||||
<image
|
||||
:src="item.status==='派送中'?'../../static/paisong.png':'../../static/yunshuzhong.png'">
|
||||
</image>
|
||||
</view>
|
||||
|
||||
<view class="point" v-else-if="index>0 && logisticsInfo.data[index-1].status==='运送中'">
|
||||
</view>
|
||||
|
||||
<view class="line" v-if='!(index === logisticsInfo.data.length - 1)'
|
||||
:class="item.status==='运送中'?'short':''"></view>
|
||||
</view>
|
||||
<view class="logistics-orderInfo-right">
|
||||
<view class="status"
|
||||
v-if='!(index>0 && logisticsInfo.data[index-1].status==="运送中" &&item.status==="运送中")'>
|
||||
{{item.status}}
|
||||
</view>
|
||||
<view class="time">{{item.created}}</view>
|
||||
<view class="desc" :class="index === 0 || item.status === 23010?'active':''"
|
||||
v-html="strInit(item.info)">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
<view class="BtnFooter" v-if="[23000].includes(orderStatus)">
|
||||
<view class="waiting-box" v-if='orderStatus === 23000'>
|
||||
<view class="cancel-order-btn btn" @click="handleOrderCancel">取消订单</view>
|
||||
<view class="share-btn btn" @click="handleSecondQi">分享</view>
|
||||
</view>
|
||||
<!-- <view class="pay-box" v-if='[23001,23008].includes(orderStatus)'>
|
||||
<view class="pay-btn btn" @click="handlePay">
|
||||
支付运费：{{orderInfo.amount}}
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- 断网显示的页面 -->
|
||||
<net-fail v-else :handleToRefresh="handleToRefresh"></net-fail>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
nextTick
|
||||
} from 'vue';
|
||||
import {
|
||||
getOrderDetail,
|
||||
payOrder,
|
||||
getOrderLine
|
||||
} from '@/pages/api/order.js'
|
||||
import {
|
||||
onLoad,
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
handleSecondQi,
|
||||
handleTimeToStrTime
|
||||
} from '@/utils/index.js'
|
||||
import {
|
||||
useStore
|
||||
} from 'vuex';
|
||||
const twoLine = ref()
|
||||
let scrollHeight = ref('')
|
||||
const store = useStore(); //vuex获取、储存数据
|
||||
const orderStatus = ref()
|
||||
const orderId = ref()
|
||||
const orderInfo = reactive({
|
||||
estimatedStartTime: '',
|
||||
estimatedArrivalTime: '',
|
||||
receiverName: '',
|
||||
receiverAddress: '',
|
||||
receiverProvince: '',
|
||||
receiverPhone: '',
|
||||
senderName: '',
|
||||
senderAddress: '',
|
||||
senderProvince: '',
|
||||
senderPhone: '',
|
||||
goods: '',
|
||||
goodsWeight: '',
|
||||
paymentMethod: '',
|
||||
amount: '',
|
||||
transportOrderId: '',
|
||||
id: ''
|
||||
})
|
||||
const netStatus = ref(true)
|
||||
let transportOrderId = ref('') //运单号
|
||||
let haveDriveredLine = reactive([]) //已经走过的路线
|
||||
let notHaveDriveredLine = reactive([]) //未走过的路线
|
||||
let points = reactive([])
|
||||
let carLocation = reactive({
|
||||
data: {
|
||||
lng: '',
|
||||
lat: ''
|
||||
}
|
||||
})
|
||||
let polyline = reactive({
|
||||
data: []
|
||||
})
|
||||
//地图上的标记点
|
||||
let covers = reactive({
|
||||
data: []
|
||||
})
|
||||
|
||||
onLoad((options) => {
|
||||
orderId.value = options.orderId
|
||||
transportOrderId.value = options.transportOrderId
|
||||
getOrderDetailFunc(options.transportOrderId)
|
||||
uni.getSystemInfo({
|
||||
success: (res) => {
|
||||
scrollHeight.value = 'height:' + (res.screenHeight - 290) + 'px'
|
||||
}
|
||||
})
|
||||
})
|
||||
//获取订单轨迹
|
||||
const getOrderLineFunc = () => {
|
||||
getOrderLine(transportOrderId.value).then((res) => {
|
||||
if (res.data.lastPoint) {
|
||||
carLocation.data = {
|
||||
longitude: res.data.lastPoint.lng,
|
||||
latitude: res.data.lastPoint.lat
|
||||
}
|
||||
}
|
||||
|
||||
points = res.data.pointList.map((item) => {
|
||||
return {
|
||||
longitude: item.lng,
|
||||
latitude: item.lat
|
||||
}
|
||||
})
|
||||
if (res.data.status === 1) {
|
||||
// 没有上报的坐标点，规划路线均为虚线
|
||||
notHaveDriveredLine = points
|
||||
polyline.data = [{
|
||||
points: points,
|
||||
color: "#000000",
|
||||
width: 5,
|
||||
dottedLine: true
|
||||
}]
|
||||
covers.data = [
|
||||
//起始
|
||||
{
|
||||
id: 2,
|
||||
latitude: points[0].latitude,
|
||||
longitude: points[0].longitude,
|
||||
iconPath: '../../static/startPoint.png',
|
||||
height: 18,
|
||||
width: 18,
|
||||
customCallout: {
|
||||
anchorY: 0,
|
||||
anchorX: 0,
|
||||
display: "ALWAYS"
|
||||
},
|
||||
title: '始发地',
|
||||
areaName: orderInfo.senderProvince
|
||||
},
|
||||
//终点
|
||||
{
|
||||
id: 1,
|
||||
latitude: points[points.length - 1].latitude,
|
||||
longitude: points[points.length - 1].longitude,
|
||||
iconPath: '../../static/endPoint.png',
|
||||
height: 18,
|
||||
width: 18,
|
||||
customCallout: {
|
||||
anchorY: 0,
|
||||
anchorX: 0,
|
||||
display: "ALWAYS"
|
||||
},
|
||||
title: '目的地',
|
||||
areaName: orderInfo.receiverProvince
|
||||
},
|
||||
]
|
||||
} else if (res.data.status === 2) {
|
||||
// 有上报的坐标点，并且是在运输状态,显示小车
|
||||
findPoint()
|
||||
covers.data = [
|
||||
//起始
|
||||
{
|
||||
id: 2,
|
||||
latitude: points[0].latitude,
|
||||
longitude: points[0].longitude,
|
||||
iconPath: '../../static/startPoint.png',
|
||||
height: 18,
|
||||
width: 18,
|
||||
customCallout: {
|
||||
anchorY: 0,
|
||||
anchorX: 0,
|
||||
display: "ALWAYS"
|
||||
},
|
||||
title: '始发地',
|
||||
areaName: orderInfo.senderProvince
|
||||
},
|
||||
//终点
|
||||
{
|
||||
id: 1,
|
||||
latitude: points[points.length - 1].latitude,
|
||||
longitude: points[points.length - 1].longitude,
|
||||
iconPath: '../../static/endPoint.png',
|
||||
height: 18,
|
||||
width: 18,
|
||||
customCallout: {
|
||||
anchorY: 0,
|
||||
anchorX: 0,
|
||||
display: "ALWAYS"
|
||||
},
|
||||
title: '目的地',
|
||||
areaName: orderInfo.receiverProvince
|
||||
},
|
||||
//小车
|
||||
{
|
||||
id: 4,
|
||||
latitude: res.data.lastPoint ? res.data.lastPoint.lat : '',
|
||||
longitude: res.data.lastPoint ? res.data.lastPoint.lng : '',
|
||||
iconPath: '../../static/carPoint.png',
|
||||
height: 40,
|
||||
width: 40,
|
||||
}
|
||||
]
|
||||
} else if (res.data.status === 3) {
|
||||
// 有上报的坐标点，并且是在派件状态,显示快递员
|
||||
findPoint()
|
||||
covers.data = [
|
||||
//终点
|
||||
{
|
||||
id: 1,
|
||||
latitude: points[points.length - 1].latitude,
|
||||
longitude: points[points.length - 1].longitude,
|
||||
iconPath: '../../static/endPoint.png',
|
||||
height: 18,
|
||||
width: 18,
|
||||
customCallout: {
|
||||
anchorY: 0,
|
||||
anchorX: 0,
|
||||
display: "ALWAYS"
|
||||
},
|
||||
title: '目的地',
|
||||
areaName: orderInfo.receiverProvince
|
||||
},
|
||||
//快递员
|
||||
{
|
||||
id: 3,
|
||||
latitude: res.data.lastPoint ? res.data.lastPoint.lat : '',
|
||||
longitude: res.data.lastPoint ? res.data.lastPoint.lng : '',
|
||||
iconPath: '../../static/courierPoint.png',
|
||||
height: 40,
|
||||
width: 40,
|
||||
customCallout: {
|
||||
anchorY: 0,
|
||||
anchorX: 0,
|
||||
display: "ALWAYS"
|
||||
},
|
||||
}
|
||||
]
|
||||
} else {
|
||||
// 整个流程结束，规划路线均为实线
|
||||
haveDriveredLine = points
|
||||
polyline.data = [{
|
||||
points: points,
|
||||
color: "#E25433",
|
||||
width: 5,
|
||||
}]
|
||||
covers.data = [
|
||||
//起始
|
||||
{
|
||||
id: 2,
|
||||
latitude: points[0].latitude,
|
||||
longitude: points[0].longitude,
|
||||
iconPath: '../../static/startPoint.png',
|
||||
height: 18,
|
||||
width: 18,
|
||||
customCallout: {
|
||||
anchorY: 0,
|
||||
anchorX: 0,
|
||||
display: "ALWAYS"
|
||||
},
|
||||
title: '始发地',
|
||||
areaName: orderInfo.senderProvince
|
||||
},
|
||||
//终点
|
||||
{
|
||||
id: 1,
|
||||
latitude: points[points.length - 1].latitude,
|
||||
longitude: points[points.length - 1].longitude,
|
||||
iconPath: '../../static/endPoint.png',
|
||||
height: 18,
|
||||
width: 18,
|
||||
customCallout: {
|
||||
anchorY: 0,
|
||||
anchorX: 0,
|
||||
display: "ALWAYS"
|
||||
},
|
||||
title: '目的地',
|
||||
areaName: orderInfo.receiverProvince
|
||||
},
|
||||
]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 根据一个坐标点找出数组中离该坐标点最近的点
|
||||
const findPoint = () => {
|
||||
const distanceList = []
|
||||
let pointIndex = null
|
||||
points.map((item) => {
|
||||
distanceList.push(GetDistance(item.latitude, item.longitude, carLocation.data.latitude, carLocation
|
||||
.data
|
||||
.longitude))
|
||||
})
|
||||
const minNum = Math.min(...distanceList)
|
||||
pointIndex = distanceList.indexOf(minNum)
|
||||
haveDriveredLine = [{
|
||||
points: points.slice(0, pointIndex),
|
||||
color: "#E25433",
|
||||
width: 5,
|
||||
}]
|
||||
notHaveDriveredLine = [{
|
||||
points: points.slice(pointIndex, points.length - 1),
|
||||
color: "#000",
|
||||
width: 5,
|
||||
dottedLine: true
|
||||
}]
|
||||
polyline.data = [haveDriveredLine[0], notHaveDriveredLine[0]]
|
||||
}
|
||||
|
||||
// 计算两个坐标点之间的距离
|
||||
const GetDistance = (lat1, lng1, lat2, lng2) => {
|
||||
var radLat1 = lat1 * Math.PI / 180.0
|
||||
var radLat2 = lat2 * Math.PI / 180.0
|
||||
var a = radLat1 - radLat2
|
||||
var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0
|
||||
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
|
||||
Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)))
|
||||
s = s * 6378.137 // EARTH_RADIUS;
|
||||
s = Math.round(s * 10000) / 10000
|
||||
return s
|
||||
}
|
||||
|
||||
//复制
|
||||
const handleCopy = (value) => {
|
||||
uni.setClipboardData({
|
||||
data: value,
|
||||
showToast: false,
|
||||
success: () => {
|
||||
uni.hideToast(); // 隐藏弹出提示
|
||||
uni.hideKeyboard(); // 隐藏软键盘
|
||||
uni.showToast({
|
||||
title: '复制成功',
|
||||
icon: 'success',
|
||||
duration: 1000
|
||||
})
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
const handleToRefresh = () => {
|
||||
getOrderDetailFunc()
|
||||
}
|
||||
//跳转到取消订单页面
|
||||
const handleOrderCancel = () => {
|
||||
uni.navigateTo({
|
||||
url: '/subPages/order-cancel/index?orderId=' + orderId.value
|
||||
})
|
||||
}
|
||||
//将后端传来的字符串中的数字变为红色
|
||||
const strInit = (value) => {
|
||||
let strText = value
|
||||
let replaceText = []
|
||||
for (let i = 0; i <= 10; i++) {
|
||||
replaceText.push('' + i)
|
||||
}
|
||||
// 转换成html形式解析
|
||||
for (let i = 0; i < replaceText.length; i++) {
|
||||
var replaceString = '<span style="color: red;">' + replaceText[i] + "</span>"
|
||||
strText = strText.replace(RegExp(replaceText[i], 'g'), replaceString)
|
||||
}
|
||||
// 这里再把这个红色替换成你想要的颜色
|
||||
// 由于在循环体里面数字会被替换，所以用了一个单词（red）来当成初始色
|
||||
strText = strText.replace(RegExp('red', 'g'), '#E63E32')
|
||||
return strText
|
||||
}
|
||||
//根据状态去显示对应的运单状态文案
|
||||
const showOrderStatus = (status) => {
|
||||
switch (status) {
|
||||
case 21000:
|
||||
return '待支付';
|
||||
case 23000:
|
||||
return '待取件';
|
||||
case 230011:
|
||||
return '已取消';
|
||||
case 23001:
|
||||
return '已取件';
|
||||
case 23005:
|
||||
return '运送中';
|
||||
case 22000:
|
||||
return '已关闭';
|
||||
case 23008:
|
||||
return '派送中';
|
||||
case 23009:
|
||||
return '已签收';
|
||||
case 23010:
|
||||
return '已拒收';
|
||||
}
|
||||
}
|
||||
const logisticsInfo = reactive({
|
||||
data: []
|
||||
})
|
||||
//进入电子存根页面
|
||||
const handleToElectronicStub = () => {
|
||||
uni.navigateTo({
|
||||
url: '/subPages/electronic-stub/index?orderId=' + orderId.value
|
||||
});
|
||||
}
|
||||
//获取订单详情
|
||||
const getOrderDetailFunc = (params) => {
|
||||
getOrderDetail(orderId.value).then((res) => {
|
||||
orderStatus.value = res.data.status
|
||||
const {
|
||||
estimatedArrivalTime,
|
||||
estimatedStartTime,
|
||||
receiverName,
|
||||
senderName,
|
||||
receiverProvince,
|
||||
receiverCity,
|
||||
receiverCounty,
|
||||
receiverAddress,
|
||||
senderProvince,
|
||||
senderCity,
|
||||
senderCounty,
|
||||
senderAddress,
|
||||
orderCargoVOS,
|
||||
paymentMethod,
|
||||
amount,
|
||||
senderPhone,
|
||||
receiverPhone,
|
||||
transportOrderId,
|
||||
updated,
|
||||
transportOrderPointVOS,
|
||||
id
|
||||
} = res.data
|
||||
orderInfo.estimatedStartTime = estimatedStartTime
|
||||
orderInfo.estimatedArrivalTime = estimatedArrivalTime
|
||||
orderInfo.receiverName = receiverName
|
||||
orderInfo.senderName = senderName
|
||||
orderInfo.receiverAddress = receiverProvince.name + receiverCity.name + receiverCounty.name +
|
||||
receiverAddress
|
||||
orderInfo.senderAddress = senderProvince.name + senderCity.name + senderCounty.name + senderAddress
|
||||
orderInfo.goods = orderCargoVOS[0].name + (orderCargoVOS[0].goodsType ? ('(' + orderCargoVOS[0]
|
||||
.goodsType.name + ')') : '')
|
||||
orderInfo.goodsWeight = orderCargoVOS[0].totalWeight
|
||||
orderInfo.paymentMethod = paymentMethod === 1 ? '寄付' : '到付'
|
||||
orderInfo.amount = amount
|
||||
orderInfo.receiverPhone = receiverPhone
|
||||
orderInfo.senderPhone = senderPhone
|
||||
orderInfo.receiverProvince = receiverCity.name
|
||||
orderInfo.senderProvince = senderCity.name
|
||||
orderInfo.transportOrderId = transportOrderId
|
||||
orderInfo.updated = updated
|
||||
orderInfo.id = id
|
||||
logisticsInfo.data = transportOrderPointVOS.reverse()
|
||||
if ([23000, 230011, 22000].includes(orderStatus.value)) {
|
||||
nextTick(() => {
|
||||
//用来获取详细地址有几行，从而适配寄和收之间竖线的高度
|
||||
uni.createSelectorQuery().select('.send-desc').boundingClientRect(res => {
|
||||
let height = res.height;
|
||||
let line = height / 15
|
||||
twoLine.value = line
|
||||
}).exec();
|
||||
})
|
||||
}
|
||||
|
||||
if (params && params !== 'null') getOrderLineFunc()
|
||||
|
||||
})
|
||||
.catch((err) => {
|
||||
uni.showToast({
|
||||
title: '网络异常',
|
||||
duration: 2000,
|
||||
icon: 'none'
|
||||
});
|
||||
netStatus.value = false
|
||||
})
|
||||
}
|
||||
//支付
|
||||
const handlePay = () => {
|
||||
payOrder({
|
||||
enterpriseId: 1561414331,
|
||||
tradingAmount: orderInfo.amount,
|
||||
payMethod: 2,
|
||||
productOrderNo: orderId.value
|
||||
}).then((res) => {
|
||||
const params = JSON.parse(res.data.placeOrderJson)
|
||||
uni.requestPayment({
|
||||
timeStamp: String(params.timeStamp),
|
||||
nonceStr: params.nonceStr,
|
||||
package: params.package,
|
||||
paySign: params.paySign,
|
||||
signType: "RSA",
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style src="./index.scss" lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user