|
|
@@ -1,5 +1,35 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
+ <view class="content">
|
|
|
+ <div class="top_btn">
|
|
|
+ <div class="returnPage">
|
|
|
+ <image class="return-icon" src="@/static/images/order/returnPage.png" mode='widthFix'
|
|
|
+ @click="returnPage">
|
|
|
+ </image>
|
|
|
+ </div>
|
|
|
+ <div class="qiehuan" @click="mapChange">
|
|
|
+ <image class="qiehuan-icon" src="@/static/images/order/qiehuan.png" mode='widthFix'>
|
|
|
+ </image>
|
|
|
+ <text class="tips">{{tips}}</text>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="infoBox">
|
|
|
+ <div class="infoBox_left">
|
|
|
+ <text class="title">{{infoData.cargoOwnerStatus}}</text>
|
|
|
+ <text class="address estimate">预计{{infoData.tranEndDate}}送达</text>
|
|
|
+ </div>
|
|
|
+ <div class="infoBox_right">
|
|
|
+ <div class="send">
|
|
|
+ <text class="title">{{infoData.sendCity}}</text>
|
|
|
+ <text class="address">{{infoData.sendArea}}</text>
|
|
|
+ </div>
|
|
|
+ <image class="jt-icon" src="@/static/images/order/jt.png" mode='widthFix'>
|
|
|
+ </image>
|
|
|
+ <div class="end">
|
|
|
+ <text class="title">{{infoData.unloadCity}}</text>
|
|
|
+ <text class="address">{{infoData.unloadArea}}</text>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<map v-if="polyline[0].points.length > 0" ref="myMap" id="myMap" :markers="markers" :polyline="polyline"
|
|
|
:latitude="polyline[0].points[0].latitude" :longitude="polyline[0].points[0].longitude"
|
|
|
style="width: 100%; height: 2000rpx" @updated="test" />
|
|
|
@@ -7,6 +37,12 @@
|
|
|
<button v-if="startMove" @click="handleStopMove()">暂停移动</button>
|
|
|
<button v-else @click="handleStartMove()">开始移动</button>
|
|
|
</view> -->
|
|
|
+ <u-modal :show="show" :title="title" :showCancelButton="true" confirmText="确定支付" @close="show=false"
|
|
|
+ @cancel="show = false" @confirm="payment" :closeOnClickOverlay="true">
|
|
|
+ <div class="slot-content" style="align-items: flex-start;">
|
|
|
+ <text style="width: 270px;">{{content}}</text>
|
|
|
+ </div>
|
|
|
+ </u-modal>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -41,98 +77,248 @@
|
|
|
x: 0.5,
|
|
|
y: 1
|
|
|
}
|
|
|
- }]
|
|
|
+ }],
|
|
|
+ infoData: {},
|
|
|
+ tips: "切换北斗轨迹",
|
|
|
+ title: "支付",
|
|
|
+ content: "",
|
|
|
+ show: false,
|
|
|
+ obj: {}
|
|
|
}
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
this.id = option.id
|
|
|
- console.log(this.id)
|
|
|
- this.getTrack() //获取轨迹信息(只做演示，未进行远程请求)
|
|
|
-
|
|
|
+ this.infoData = option
|
|
|
+ let date = new Date(this.infoData.tranEndDate)
|
|
|
+ if (!this.infoData.lookBeiDouDate) {
|
|
|
+ this.infoData.lookBeiDouDate = ""
|
|
|
+ }
|
|
|
+ let getMonth = date.getMonth() + 1
|
|
|
+ let day = date.getDate()
|
|
|
+ this.infoData.tranEndDate = getMonth + "月" + day + "日"
|
|
|
+ this.getTrack(0) //获取轨迹信息(只做演示，未进行远程请求)
|
|
|
},
|
|
|
methods: {
|
|
|
- //模拟获取远程数据
|
|
|
- getTrack() {
|
|
|
+ returnPage() {
|
|
|
+ // uni.$u.route('/pages/order/index');
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/order/index'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // isSameDay(date, dateB){
|
|
|
+ // const {
|
|
|
+ // getFullYear,
|
|
|
+ // getMonth,
|
|
|
+ // getDate] = Date.prototypereturn[getFullYear, getMonth, getDate].every(fn =>
|
|
|
+ // return fn.call(dateA) === fn.cal1(dateB)
|
|
|
+ // },
|
|
|
+ countDay(d1, d2) {
|
|
|
+ var days = d1 - d2
|
|
|
+ var time = parseInt(days / (1000 * 60 * 60 * 24))
|
|
|
+ time = time ==0?time+1:time//为零代表当天
|
|
|
+ return time
|
|
|
+ },
|
|
|
+ mapChange() {
|
|
|
+ if (this.tips == "切换北斗轨迹") {
|
|
|
+ if (this.infoData.lookBeiDouDate) { //查看北斗最新时间
|
|
|
+ let date1 = this.infoData.lookBeiDouDate.split(" ")[0]
|
|
|
+ let date2 = new Date()
|
|
|
+ let year = date2.getFullYear();
|
|
|
+ let month = (date2.getMonth() + 1) < 10 ? "0" + (date2.getMonth() + 1) : date2.getMonth() + 1;
|
|
|
+ let day = date2.getDate() < 10 ? "0" + date2.getDate() : date2.getDate();
|
|
|
+ let date3 = year + "-" + month + "-" + day
|
|
|
+ if(this.infoData.cargoOwnerStatus == "已完结"){//如果订单完成 用卸车时间计算天数
|
|
|
+ date3 = this.infoData.unloadingDate.split(" ")[0]//卸车时间
|
|
|
+ }
|
|
|
+ if (date1 != date3) { //查看北斗更新时间 != 今天
|
|
|
+ // unloadingDate 卸车时间
|
|
|
+ var k1 = new Date(new Date().toLocaleDateString()).getTime() //当前零点时间蹉
|
|
|
+ if(this.infoData.cargoOwnerStatus == "已完结"){
|
|
|
+ k1 = new Date(new Date(this.infoData.unloadingDate).toLocaleDateString()).getTime() //卸车时间
|
|
|
+ }
|
|
|
+ var k2 = new Date(new Date(this.infoData.lookBeiDouDate).toLocaleDateString()).getTime()
|
|
|
+ this.obj.amountMoney = this.countDay(k1, k2)
|
|
|
+ this.content = "本次查看北斗轨迹将从您的账户余额扣除 " + this.obj.amountMoney + " 元，确认支付查看轨迹?"
|
|
|
+ this.show = true
|
|
|
+ } else { ////查看北斗更新时间 == 今天（不需要支付）
|
|
|
+ this.show = false
|
|
|
+ this.getTrack(1) //北斗轨迹
|
|
|
+ }
|
|
|
+ } else { //没有更新时间证明该订单没有查看过北斗轨迹（需支付）
|
|
|
+ let date1 = this.infoData.loadingDate.split(" ")[0]
|
|
|
+ let date2 = new Date()
|
|
|
+ let year = date2.getFullYear();
|
|
|
+ let month = (date2.getMonth() + 1) < 10 ? "0" + (date2.getMonth() + 1) : date2.getMonth() + 1;
|
|
|
+ let day = date2.getDate() < 10 ? "0" + date2.getDate() : date2.getDate();
|
|
|
+ let date3 = year + "-" + month + "-" + day
|
|
|
+ // if(this.infoData.cargoOwnerStatus == "已完结"){//如果订单完成 用卸车时间计算天数
|
|
|
+ // date3 = this.infoData.unloadingDate.split(" ")[0]//卸车时间
|
|
|
+ // }
|
|
|
+ if (date1 == date3) { //装车时间==当前时间
|
|
|
+ this.obj.amountMoney = 1
|
|
|
+ this.content = "本次查看北斗轨迹将从您的账户余额扣除 " + this.obj.amountMoney + " 元，确认支付查看轨迹?"
|
|
|
+ this.show = true
|
|
|
+ } else { //装车时间 ！= 当前时间 且没有查看过北斗轨迹
|
|
|
+ var k1 = new Date(new Date().toLocaleDateString()).getTime() //当前零点时间蹉
|
|
|
+ var k2 = new Date(new Date(this.infoData.loadingDate).toLocaleDateString()).getTime()
|
|
|
+ if(this.infoData.cargoOwnerStatus == "已完结"){//如果订单完成 用卸车时间计算天数
|
|
|
+ // let date3 = this.infoData.unloadingDate.split(" ")[0]//卸车时间
|
|
|
+ k1 = new Date(new Date(this.infoData.unloadingDate).toLocaleDateString()).getTime()
|
|
|
+ }
|
|
|
+ this.obj.amountMoney = this.countDay(k1, k2)+1//加1算装车当天
|
|
|
+ this.show = true
|
|
|
+ this.content = "本次查看北斗轨迹将从您的账户余额扣除" + this.obj.amountMoney + "元，确认支付查看轨迹?"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.tips == "切换北斗轨迹"
|
|
|
+ this.getTrack(0)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ payment() {
|
|
|
+ if (this.infoData.compName != "个人货主") { //查看北斗轨迹 标识（1个人2企业）
|
|
|
+ this.obj.companyId = this.infoData.compId
|
|
|
+ this.obj.flag = 2
|
|
|
+ } else {
|
|
|
+ this.obj.commonId = this.infoData.cargoCommonId
|
|
|
+ this.obj.flag = 1
|
|
|
+ }
|
|
|
+ this.obj.orderId = this.infoData.id
|
|
|
+ this.obj.orderNo = this.infoData.orderNo
|
|
|
uni.request({
|
|
|
- url: baseUrl + '/hyOrderTravelPath/getInfo',
|
|
|
- data: {
|
|
|
- orderId: this.id,
|
|
|
- currentPage: 1,
|
|
|
- pageSize: 9999
|
|
|
- },
|
|
|
- method: 'get',
|
|
|
+ url: baseUrl + '/hyCargoOwnerCapitalInfo/api/lookBeiDou',
|
|
|
+ data: this.obj,
|
|
|
+ method: 'post',
|
|
|
header: {
|
|
|
'content-type': 'application/json' //'application/x-www-form-urlencoded; charset=UTF-8',
|
|
|
},
|
|
|
success: (res) => {
|
|
|
+ this.show = false
|
|
|
if (res.data.code == 200) {
|
|
|
- if (res.data.data) {
|
|
|
- var patharr = []
|
|
|
- for (let num = 0; num < res.data.data.records.length; num++) {
|
|
|
- if(res.data.data.records[num].longitudeLatitude){
|
|
|
- patharr.push(JSON.parse(res.data.data.records[num].longitudeLatitude));
|
|
|
+ this.getTrack(1) //调北斗
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '支付失败',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // /hyOrderTravelPath/orderPath
|
|
|
+ //模拟获取远程数据
|
|
|
+ getTrack(num) {
|
|
|
+ if (num == 0) { //平台轨迹
|
|
|
+ uni.request({
|
|
|
+ url: baseUrl + '/hyOrderTravelPath/getInfo',
|
|
|
+ data: {
|
|
|
+ orderId: this.id,
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 9999
|
|
|
+ },
|
|
|
+ method: 'get',
|
|
|
+ header: {
|
|
|
+ 'content-type': 'application/json' //'application/x-www-form-urlencoded; charset=UTF-8',
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ if (res.data.data.records.length >0) {
|
|
|
+ var trajectory = []
|
|
|
+ for (let i = 0; i < res.data.data.records.length; i++) {
|
|
|
+ let maplist = []
|
|
|
+ if (res.data.data.records[i].longitudeLatitude) {
|
|
|
+ maplist = JSON.parse(res.data.data.records[i]
|
|
|
+ .longitudeLatitude)
|
|
|
+ for (let j = 0; j < maplist.length; j++) {
|
|
|
+ trajectory.push({
|
|
|
+ latitude: maplist[j].latitude,
|
|
|
+ longitude: maplist[j].longitude
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- // for (let i = 0; i < patharr.length; i++) {
|
|
|
- // that.path2.push([patharr[i].longitude, patharr[i].latitude]);
|
|
|
- // }
|
|
|
+ this.polyline[0].points = trajectory
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '暂无运输轨迹',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ })
|
|
|
+ return
|
|
|
}
|
|
|
- this.polyline[0].points = patharr
|
|
|
- // if (res.data.data.longitudeLatitude) {
|
|
|
- // // console.log(JSON.parse(res.data.data.longitudeLatitude));
|
|
|
- // this.polyline[0].points = JSON.parse(res.data.data.longitudeLatitude)
|
|
|
- // }
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: '暂无运输轨迹',
|
|
|
- icon: 'none',
|
|
|
- duration: 2000
|
|
|
- })
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- })
|
|
|
+ })
|
|
|
+ } else if (num == 1) {
|
|
|
+ uni.request({
|
|
|
+ url: baseUrl + '/hyOrderTravelPath/orderPath ',
|
|
|
+ data: {
|
|
|
+ orderId: this.id,
|
|
|
+ },
|
|
|
+ method: 'post',
|
|
|
+ header: {
|
|
|
+ 'content-type': 'application/json' //'application/x-www-form-urlencoded; charset=UTF-8',
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ this.tips = "切换平台轨迹"
|
|
|
+ if (res.data.data.longitudeLatitude) {
|
|
|
+ var trajectory = []
|
|
|
+ var patharr = JSON.parse(res.data.data.longitudeLatitude)
|
|
|
+ for (let i = 0; i < patharr.length; i++) {
|
|
|
+ trajectory.push({
|
|
|
+ latitude: patharr[i].lat,
|
|
|
+ longitude: patharr[i].lon
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.polyline[0].points = trajectory
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '暂无运输轨迹',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
// this.$request.baseRequest('post', '/hyOrderTravelPath/getInfo', {
|
|
|
// orderId: this.id,
|
|
|
// }).then(res => {
|
|
|
// console.log("res",res)
|
|
|
- // // this.polyline[0].points = [
|
|
|
- // // {latitude: 39.997761, longitude: 116.478935},
|
|
|
- // // {latitude: 39.997825, longitude: 116.478939},
|
|
|
- // // {latitude: 39.998549, longitude: 116.478912},
|
|
|
- // // {latitude: 39.998555, longitude: 116.478998},
|
|
|
- // // {latitude: 39.998566, longitude: 116.479282},
|
|
|
- // // {latitude: 39.998528, longitude: 116.479658},
|
|
|
- // // {latitude: 39.998453, longitude: 116.480151},
|
|
|
- // // {latitude: 39.998302, longitude: 116.480784},
|
|
|
- // // {latitude: 39.998184, longitude: 116.481149},
|
|
|
- // // {latitude: 39.997997, longitude: 116.481573},
|
|
|
- // // {latitude: 39.997846, longitude: 116.481863},
|
|
|
- // // {latitude: 39.997718, longitude: 116.482072},
|
|
|
- // // {latitude: 39.997718, longitude: 116.482362},
|
|
|
- // // {latitude: 39.998935, longitude: 116.483633},
|
|
|
- // // {latitude: 39.998968, longitude: 116.48367},
|
|
|
- // // {latitude: 39.999861, longitude: 116.484648}
|
|
|
- // // ]
|
|
|
- // // for(var i =0 ;i<7200;i++){
|
|
|
- // // var latitude = this.polyline[0].points[this.polyline[0].points.length -1].latitude + 0.0001
|
|
|
- // // var longitude = this.polyline[0].points[this.polyline[0].points.length -1].longitude + 0.0001
|
|
|
- // // this.polyline[0].points.push({latitude,longitude})
|
|
|
- // // }
|
|
|
+ // this.polyline[0].points = [
|
|
|
+ // {latitude: 39.997761, longitude: 116.478935},
|
|
|
+ // {latitude: 39.997825, longitude: 116.478939},
|
|
|
+ // {latitude: 39.998549, longitude: 116.478912},
|
|
|
+ // {latitude: 39.998555, longitude: 116.478998},
|
|
|
+ // {latitude: 39.998566, longitude: 116.479282},
|
|
|
+ // {latitude: 39.998528, longitude: 116.479658},
|
|
|
+ // {latitude: 39.998453, longitude: 116.480151},
|
|
|
+ // {latitude: 39.998302, longitude: 116.480784},
|
|
|
+ // {latitude: 39.998184, longitude: 116.481149},
|
|
|
+ // {latitude: 39.997997, longitude: 116.481573},
|
|
|
+ // {latitude: 39.997846, longitude: 116.481863},
|
|
|
+ // {latitude: 39.997718, longitude: 116.482072},
|
|
|
+ // {latitude: 39.997718, longitude: 116.482362},
|
|
|
+ // {latitude: 39.998935, longitude: 116.483633},
|
|
|
+ // {latitude: 39.998968, longitude: 116.48367},
|
|
|
+ // {latitude: 39.999861, longitude: 116.484648}
|
|
|
+ // ]
|
|
|
+ // for(var i =0 ;i<7200;i++){
|
|
|
+ // var latitude = this.polyline[0].points[this.polyline[0].points.length -1].latitude + 0.0001
|
|
|
+ // var longitude = this.polyline[0].points[this.polyline[0].points.length -1].longitude + 0.0001
|
|
|
+ // this.polyline[0].points.push({latitude,longitude})
|
|
|
+ // }
|
|
|
var that = this
|
|
|
setTimeout(() => {
|
|
|
- that.durationTime = Math.ceil(30000 / that.polyline[0].points.length) //默认播放全程使用30秒，计算相连两点动画时长
|
|
|
+ that.durationTime = Math.ceil(30000 / that.polyline[0].points
|
|
|
+ .length) //默认播放全程使用30秒，计算相连两点动画时长
|
|
|
that.initMapData()
|
|
|
}, 1000)
|
|
|
-
|
|
|
- // })
|
|
|
- // .catch(res => {
|
|
|
- // uni.hideLoading()
|
|
|
- // uni.showToast({
|
|
|
- // title: res.message,
|
|
|
- // icon: 'none',
|
|
|
- // duration: 2000
|
|
|
- // })
|
|
|
- // });
|
|
|
},
|
|
|
//设置地图
|
|
|
initMapData() {
|
|
|
@@ -147,7 +333,6 @@
|
|
|
},
|
|
|
//设置位置（从起点开始）
|
|
|
initMarkers() {
|
|
|
- console.log(this.polyline[0])
|
|
|
this.markers[0].latitude = this.polyline[0].points[0].latitude
|
|
|
this.markers[0].longitude = this.polyline[0].points[0].longitude
|
|
|
},
|
|
|
@@ -211,6 +396,118 @@
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
width: 750rpx;
|
|
|
- position: fixed;
|
|
|
+ // position: fixed;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ .top_btn {
|
|
|
+ // background-color: red;
|
|
|
+ position: fixed;
|
|
|
+ top: 30rpx;
|
|
|
+ left: 10px;
|
|
|
+ right: 30rpx;
|
|
|
+ flex-direction: row;
|
|
|
+ display: flex;
|
|
|
+ margin-top: 30px;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .returnPage {
|
|
|
+ flex-direction: row;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .return-icon {
|
|
|
+ width: 90rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .qiehuan {
|
|
|
+ flex-direction: row;
|
|
|
+ display: flex;
|
|
|
+ // width: 240rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+
|
|
|
+ .tips {
|
|
|
+ line-height: 90rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .qiehuan-icon {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .infoBox {
|
|
|
+ // width: 90%;
|
|
|
+ height: 260rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ position: fixed;
|
|
|
+ top: 30rpx;
|
|
|
+ left: 10px;
|
|
|
+ right: 30rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ // padding:50rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ margin-top: 100px;
|
|
|
+
|
|
|
+ .infoBox_left {
|
|
|
+ padding-top: 50rpx;
|
|
|
+ width: 250rpx;
|
|
|
+ padding-top: 80rpx;
|
|
|
+ // background-color: #18BC37;
|
|
|
+ }
|
|
|
+
|
|
|
+ .infoBox_right {
|
|
|
+ background-image: linear-gradient(to right, #f9f7f7, #ffffff);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ border-bottom-right-radius: 40rpx;
|
|
|
+ border-top-right-radius: 40rpx;
|
|
|
+
|
|
|
+ .jt-icon {
|
|
|
+ position: relative;
|
|
|
+ top: 75rpx;
|
|
|
+ width: 60rpx;
|
|
|
+ margin: auto 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .send {
|
|
|
+ padding-top: 80rpx;
|
|
|
+ width: 180rpx;
|
|
|
+ // background-color: #0077AA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .end {
|
|
|
+ padding-top: 80rpx;
|
|
|
+ width: 180rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 44rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .address {
|
|
|
+ text-align: center;
|
|
|
+ color: #8F8F8F;
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin-top: 15rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .estimate {
|
|
|
+ width: 120px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
