From 4b8fda000f9f600ba5187e738278b340b55ebd7c Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期三, 18 十二月 2024 18:41:53 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
h5/pages/waybill/waybillDetail.vue | 300 +++++++++++++++++++++++++++++++++++------------------------
1 files changed, 177 insertions(+), 123 deletions(-)
diff --git a/h5/pages/waybill/waybillDetail.vue b/h5/pages/waybill/waybillDetail.vue
index 0b78b75..202517d 100644
--- a/h5/pages/waybill/waybillDetail.vue
+++ b/h5/pages/waybill/waybillDetail.vue
@@ -1,77 +1,78 @@
<template>
<view class="main_app">
<!-- <image class="bg" src="@/static/wuliuche_bg@2x.png" mode="widthFix"></image> -->
- <map id="map" :latitude="latitude" :longitude="longitude" :polyline="polyline" :markers="markers" :scale="4">
+ <map id="map" :latitude="latitude" :longitude="longitude" :polyline="polyline" :markers="markers" :scale="scale">
</map>
- <view class="main_content">
- <view class="info">
- <view class="head">
- <view class="code">{{info.contractNumber}}</view>
- <view class="status">{{info.orderStatusDesc}}</view>
- </view>
- <view class="content">
- <view class="line">
- <view class="la">鍙戣揣鍦�</view>
- <view class="val">{{info.deliveryEnterprise || '-'}}</view>
- </view>
- <view class="line">
- <view class="la">鍒拌揣鍦�</view>
- <view class="val">{{info.receiveEnterprise || '-'}}</view>
- </view>
- <view class="line">
- <view class="la">杞︾墝鍙�</view>
- <view class="val">{{info.plateName || '-'}}</view>
- </view>
- <view class="line">
- <view class="la">鍙告満淇℃伅</view>
- <view class="val" @click="callPhone(info.driverTel)">{{ info.driverName }} <text class="primaryColor ml12">{{info.driverTel}}</text> </view>
- </view>
- <view class="line">
- <view class="la">杞﹁締浣嶇疆</view>
- <view class="val">{{'-'}}</view>
- </view>
- <view class="line">
- <view class="la">棰勮鍒拌揪</view>
- <view class="val">{{info.plannedArrivedDate}}</view>
- </view>
- </view>
- </view>
- <view class="drive_info">
- <view class="title">鐗╂祦淇℃伅</view>
- <view class="drive_list" v-for="dri,k in info.cicleStatusList">
- <view class="separate"></view>
- <view class="item_title">
- <view class="icon_wrap">
- <image v-if="dri.key == 0 && k != 0" src="@/static/waybill/ic_dingdan@2x.png" class="icon"></image>
- <image v-if="dri.key == 0 && k == 0" src="@/static/waybill/ic_dingdan_sel@2x.png" class="icon"></image>
- <image v-if="dri.key == 1 && k != 0" src="@/static/waybill/ic_peizai@2x.png" class="icon"></image>
- <image v-if="dri.key == 1 && k == 0" src="@/static/waybill/ic_peizai_sel@2x.png" class="icon"></image>
- <image v-if="dri.key == 2 && k != 0" src="@/static/waybill/ic_cangku@2x.png" class="icon"></image>
- <image v-if="dri.key == 2 && k == 0" src="@/static/waybill/ic_cangku_sel@2x.png" class="icon"></image>
- <image v-if="dri.key == 3 && k != 0" src="@/static/waybill/ic_yunshu@2x.png" class="icon"></image>
- <image v-if="dri.key == 3 && k == 0" src="@/static/waybill/ic_yunshu_sel@2x.png" class="icon"></image>
- <image v-if="dri.key == 4" src="@/static/waybill/ic_daohuo_sel@2x.png" class="icon"></image>
- <image v-if="dri.key == 5" src="@/static/waybill/ic_ruku.png" class="icon"></image>
- </view>
- <view class="" :class="{primaryColor: k == 0}">{{dri.name}}</view>
- </view>
- <view class="item" v-for="item,i in dri.secondList">
- <view class="h2" v-if="item.orderStatusDes">
- <view class="icon_wrap" v-if="i != 0">
- <image src="@/static/driver/ic_mostarted.png" class="icon"></image>
- </view>
- <view v-else class="icon_wrap"></view>
- <view class="text" :class="{placeholder3: k==0 && i== 0}" >
- {{item.orderStatusDes}}
- <text v-if="item.tel">锛屽彂璐т粨搴撶數璇濓細</text>
- <text v-if="item.tel" @click="callPhone(item.tel)" class="primaryColor">{{item.tel}}</text>
- </view>
- </view>
- <view class="time">{{item.recordDate}}</view>
- </view>
- </view>
- </view>
+ <view class="main_content">
+ <view class="info">
+ <view class="head">
+ <view class="code">{{info.contractNumber}}</view>
+ <view class="status">{{info.orderStatusDesc}}</view>
+ </view>
+ <view class="content">
+ <view class="line">
+ <view class="la">鍙戣揣鍦�</view>
+ <view class="val">{{info.deliveryEnterprise || '-'}}</view>
+ </view>
+ <view class="line">
+ <view class="la">鍒拌揣鍦�</view>
+ <view class="val">{{info.receiveEnterprise || '-'}}</view>
+ </view>
+ <view class="line">
+ <view class="la">杞︾墝鍙�</view>
+ <view class="val">{{info.plateName || '-'}}</view>
+ </view>
+ <view class="line">
+ <view class="la">鍙告満淇℃伅</view>
+ <view class="val" @click="callPhone(info.driverTel)">{{ info.driverName }} <text
+ class="primaryColor ml12">{{info.driverTel}}</text> </view>
+ </view>
+ <view class="line">
+ <view class="la">杞﹁締浣嶇疆</view>
+ <view class="val">{{'-'}}</view>
+ </view>
+ <view class="line">
+ <view class="la">棰勮鍒拌揪</view>
+ <view class="val primaryColor" v-if="info.plannedArrivedDate">{{info.plannedArrivedDate.slice(0,11)}}</view>
+ </view>
+ </view>
+ </view>
+ <view class="drive_info">
+ <view class="title">鐗╂祦淇℃伅</view>
+ <view class="drive_list" v-for="dri,k in info.cicleStatusList">
+ <view class="separate"></view>
+ <view class="item_title">
+ <view class="icon_wrap">
+ <image v-if="dri.key == 0 && k != 0" src="@/static/waybill/ic_dingdan@2x.png" class="icon"></image>
+ <image v-if="dri.key == 0 && k == 0" src="@/static/waybill/ic_dingdan_sel@2x.png" class="icon"></image>
+ <image v-if="dri.key == 1 && k != 0" src="@/static/waybill/ic_peizai@2x.png" class="icon"></image>
+ <image v-if="dri.key == 1 && k == 0" src="@/static/waybill/ic_peizai_sel@2x.png" class="icon"></image>
+ <image v-if="dri.key == 2 && k != 0" src="@/static/waybill/ic_cangku@2x.png" class="icon"></image>
+ <image v-if="dri.key == 2 && k == 0" src="@/static/waybill/ic_cangku_sel@2x.png" class="icon"></image>
+ <image v-if="dri.key == 3 && k != 0" src="@/static/waybill/ic_yunshu@2x.png" class="icon"></image>
+ <image v-if="dri.key == 3 && k == 0" src="@/static/waybill/ic_yunshu_sel@2x.png" class="icon"></image>
+ <image v-if="dri.key == 4" src="@/static/waybill/ic_daohuo_sel@2x.png" class="icon"></image>
+ <image v-if="dri.key == 5" src="@/static/waybill/ic_ruku.png" class="icon"></image>
+ </view>
+ <view class="" :class="{primaryColor: k == 0}">{{dri.name}}</view>
+ </view>
+ <view class="item" v-for="item,i in dri.secondList">
+ <view class="h2" v-if="item.orderStatusDes">
+ <view class="icon_wrap" v-if="i != 0">
+ <image src="@/static/driver/ic_mostarted.png" class="icon"></image>
+ </view>
+ <view v-else class="icon_wrap"></view>
+ <view class="text" :class="{placeholder3: k==0 && i== 0}">
+ {{item.orderStatusDes}}
+ <text v-if="item.tel">锛屽彂璐т粨搴撶數璇濓細</text>
+ <text v-if="item.tel" @click="callPhone(item.tel)" class="primaryColor">{{item.tel}}</text>
+ </view>
+ </view>
+ <view class="time">{{item.recordDate}}</view>
+ </view>
+ </view>
+ </view>
</view>
</view>
</template>
@@ -88,7 +89,8 @@
param: {},
latitude: 31.783205,
- longitude: 117.262635,
+ longitude: 117.262635,
+ scale: 5,
markers: [],
includePoints: [
// {latitude: 31.783205, longitude: 117.262635}, {latitude: 36.783205, longitude: 118.10},
@@ -153,18 +155,62 @@
bgColor: '#FF0000'
}
})
- this.latitude = (Number(this.markers[0].latitude) + Number(this.markers[1].latitude)) / 2 - 8
- this.longitude = (Number(this.markers[0].longitude) + Number(this.markers[1].longitude)) / 2
+ this.latitude = (Number(this.markers[0].latitude) + Number(this.markers[1].latitude)) / 2 - 4
+ this.longitude = (Number(this.markers[0].longitude) + Number(this.markers[1].longitude)) / 2
+ const distance = this.distance()
+ console.log('distance', distance);
+ if(distance > 1500000){
+ this.scale = 4
+ }else if(distance < 600000){
+ this.scale = 6
+ }else{
+ this.scale = 5
+ }
}
if (res.data && res.data.gisList && res.data.gisList.length > 0) {
this.gisInfo = res.data.gisList[0]
+ if (this.gisInfo && this.gisInfo.gisList && this.gisInfo.gisList.length > 0) {
+ this.polyline = []
+ let temp = {
+ color: '#ff0000',
+ width: 3,
+ points: this.gisInfo.gisList.map(item => {
+ return {
+ latitude: item.lat,
+ longitude: item.lon,
+ }
+ })
+ }
+ this.polyline.push(temp)
+ }
}
})
- },
- callPhone(phone){
- uni.makePhoneCall({
- phoneNumber: phone
- });
+ },
+ distance() {
+ const {
+ latitude: lat1,
+ longitude: lng1
+ } = this.markers[0];
+ const {
+ latitude: lat2,
+ longitude: lng2
+ } = this.markers[1];
+ const radLat1 = this.rad(lat1);
+ const radLat2 = this.rad(lat2);
+ const a = radLat1 - radLat2;
+ const b = this.rad(lng1) - this.rad(lng2);
+ const Haversin = Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2),
+ 2);
+ const radius = 6378137; // 鍦扮悆鍗婂緞
+ return 2 * radius * Math.asin(Math.sqrt(Haversin));
+ },
+ rad(d) {
+ return d * Math.PI / 180.0;
+ },
+ callPhone(phone) {
+ uni.makePhoneCall({
+ phoneNumber: phone
+ });
}
}
}
@@ -175,19 +221,19 @@
background-color: #f7f7f7;
}
- .main_app {
- padding: 0;
+ .main_app {
padding-top: 45vh;
- .main_content{
- height: 55vh ;
- overflow: auto;
- padding: 20rpx 30rpx 0;
- position: relative;
- z-index: 999;
- }
+
+ // .main_content{
+ // height: 55vh ;
+ // overflow: auto;
+ // padding: 20rpx 30rpx 0;
+ // position: relative;
+ // z-index: 999;
+ // }
#map {
width: 750rpx;
- position: absolute;
+ position: fixed;
left: 0;
top: 0;
height: 105vh;
@@ -208,15 +254,17 @@
margin-bottom: 20rpx;
position: relative;
z-index: 999;
- .separate {
- height: calc( 100% - 250rpx );
- width: 1rpx;
- border: 1rpx dashed #CCCCCC;
- position: absolute;
- left: 53rpx;
- top: 102rpx;
- z-index: -1;
+
+ .separate {
+ height: calc(100% - 250rpx);
+ width: 1rpx;
+ border: 1rpx dashed #CCCCCC;
+ position: absolute;
+ left: 53rpx;
+ top: 102rpx;
+ z-index: -1;
}
+
.title {
font-weight: 500;
font-size: 32rpx;
@@ -235,46 +283,52 @@
.val {}
}
- .item_title{
- font-weight: 600;
- font-size: 32rpx;
- display: flex;
- align-items: center;
- }
- .icon_wrap {
- width: 48rpx;
- margin-right: 30rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- .icon {
- width: 48rpx;
- height: 48rpx;
- position: relative;
- z-index: 2;
- }
+
+ .item_title {
+ font-weight: 600;
+ font-size: 32rpx;
+ display: flex;
+ align-items: center;
}
+
+ .icon_wrap {
+ width: 48rpx;
+ margin-right: 30rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .icon {
+ width: 48rpx;
+ height: 48rpx;
+ position: relative;
+ z-index: 2;
+ }
+ }
+
.item {
position: relative;
color: #999999;
- margin-bottom: 30rpx;
- .text{
- color: #666666;
+ margin-bottom: 30rpx;
+
+ .text {
+ color: #666666;
}
- .icon {
- width: 20rpx;
- height: 20rpx;
- position: relative;
- z-index: 2;
+
+ .icon {
+ width: 20rpx;
+ height: 20rpx;
+ position: relative;
+ z-index: 2;
}
+
.h2 {
display: flex;
align-items: center;
height: 48rpx;
}
- .h1 {
- }
+ .h1 {}
.time {
padding-left: 78rpx;
--
Gitblit v1.9.3