653 lines
19 KiB
Vue
653 lines
19 KiB
Vue
|
<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>
|