From ebf7a029c270a728c7578870d6d60a5762f0d1f2 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期一, 16 十二月 2024 19:35:07 +0800
Subject: [PATCH] ll
---
h5/pages/waybill/waybillDetail.vue | 525 +++++++++++++++++++++++++++++++++++----------------------
1 files changed, 320 insertions(+), 205 deletions(-)
diff --git a/h5/pages/waybill/waybillDetail.vue b/h5/pages/waybill/waybillDetail.vue
index e507bac..0b78b75 100644
--- a/h5/pages/waybill/waybillDetail.vue
+++ b/h5/pages/waybill/waybillDetail.vue
@@ -1,235 +1,350 @@
<template>
<view class="main_app">
- <image class="bg" src="@/static/wuliuche_bg@2x.png" mode="widthFix"></image>
- <view class="info">
- <view class="head">
- <view class="code">{{info.contractNumber}}</view>
- <view class="status">{{info.orderStatus}}</view>
- </view>
- <view class="content">
- <view class="line">
- <view class="la">鍙戣揣鍦�</view>
- <view class="val">{{info.fromRepertoty || '-'}}</view>
+ <!-- <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>
+ <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="line">
- <view class="la">鍒拌揣鍦�</view>
- <view class="val">{{info.toRepertoty || '-'}}</view>
- </view>
- <view class="line">
- <view class="la">杞︾墝鍙�</view>
- <view class="val">{{info.plateNumber || '-'}}</view>
- </view>
- <view class="line">
- <view class="la">鍙告満淇℃伅</view>
- <view class="val">{{ '-'}}</view>
- </view>
- <view class="line">
- <view class="la">杞﹁締浣嶇疆</view>
- <view class="val">{{ '-'}}</view>
- </view>
- <view class="line">
- <view class="la">棰勮鍒拌揪</view>
- <view class="val">{{'-'}}</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>
- <view class="drive_info">
- <view class="title">鐗╂祦淇℃伅</view>
-<!-- <view class="item">
- <view class="h2">
- <view class="icon_wrap"><image src="@/static/driver/ic_mostarted.png" class="icon"></image></view>
- <view class="text">鍒拌揪鍗歌揣鍦�</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 class="time">202422222222</view>
- <view class="separate"></view>
</view>
- <view class="item">
- <view class="h2 h1">
- <view class="icon_wrap"><image src="@/static/driver/ic_dangqian.png" class="icon"></image></view>
- <view class="text">鍒拌揪鍗歌揣鍦�</view>
- </view>
- <view class="time">202422222222</view>
- <view class="separate separate_ac"></view>
- </view>
- <view class="item">
- <view class="h2">
- <view class="icon_wrap"><image src="@/static/driver/ic_mostarted.png" class="icon"></image></view>
- <view class="text">鍒拌揪鍗歌揣鍦�</view>
- </view>
- <view class="time">202422222222</view>
- <view class="separate"></view>
- </view> -->
- </view>
+ </view>
</view>
</template>
-<script>
- import { orderInfoTms } from '@/api'
+<script>
+ import {
+ orderInfoTms
+ } from '@/api'
export default {
data() {
return {
- id: '',
- info: {},
- param: {}
+ id: '',
+ info: {},
+ param: {},
+
+ latitude: 31.783205,
+ longitude: 117.262635,
+ markers: [],
+ includePoints: [
+ // {latitude: 31.783205, longitude: 117.262635}, {latitude: 36.783205, longitude: 118.10},
+ ],
+
+ polyline: [
+ // {
+ // points: [{
+ // latitude: 31.783205,
+ // longitude: 117.262635
+ // }, {
+ // latitude: 36.783205,
+ // longitude: 118.10
+ // }],
+ // color: '#FF0000',
+ // width: 3
+ // },
+ ]
};
- },
- onLoad(options) {
- this.id = options.id
- this.getDetail()
- },
- methods: {
- getDetail() {
- orderInfoTms({ contractNumber: this.id }).then(res => {
- this.info = res.data
- })
+ },
+ onLoad(options) {
+ this.id = options.id
+ this.getDetail()
+ },
+ methods: {
+ getDetail() {
+ orderInfoTms({
+ contractNumber: this.id
+ }).then(res => {
+ this.info = res.data
+ if (res.data.deliveryLat && res.data.receiveLat) {
+ this.markers = []
+ this.markers.push({
+ id: 1,
+ latitude: res.data.deliveryLat,
+ longitude: res.data.deliveryLon,
+ width: 36,
+ iconPath: '/static/driver/ic_fahuodi@2x.png',
+ label: {
+ content: ' ',
+ padding: 3,
+ borderWidth: 2,
+ borderRadius: '50%',
+ borderColor: '#fff',
+ borderRadius: 32,
+ bgColor: '#FF0000'
+ }
+ })
+ this.markers.push({
+ id: 2,
+ latitude: res.data.receiveLat,
+ longitude: res.data.receiveLon,
+ width: 36,
+ iconPath: '/static/driver/ic_huowu@2x.png',
+ label: {
+ content: ' ',
+ padding: 3,
+ borderWidth: 2,
+ borderRadius: '50%',
+ borderColor: '#fff',
+ borderRadius: 32,
+ 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
+ }
+ if (res.data && res.data.gisList && res.data.gisList.length > 0) {
+ this.gisInfo = res.data.gisList[0]
+ }
+ })
},
+ callPhone(phone){
+ uni.makePhoneCall({
+ phoneNumber: phone
+ });
+ }
}
}
</script>
-<style lang="scss" scoped>
- page{
- background-color: #f7f7f7;
+<style lang="scss" scoped>
+ page {
+ background-color: #f7f7f7;
}
- .main_app{
- padding-top: 120rpx;
- .bg{
- width: 750rpx;
- position: absolute;
- left: 0;
- top: 0;
- }
- .drive_info{
- background: #fff;
- border-radius: 16rpx;
- padding: 30rpx;
- margin-bottom: 20rpx;
- .title{
- font-weight: 500;
- font-size: 32rpx;
- color: #222222;
- margin-bottom: 20rpx;
- }
- .line{
- display: flex;
- margin-bottom: 24rpx;
- .label{
- color: #666666;
- margin-right: 40rpx;
- }
- .val{
-
- }
- }
- .item{
- position: relative;
- color: #999999;
- margin-bottom: 30rpx;
- .h2{
- display: flex;
- align-items: center;
- height: 48rpx;
- .icon_wrap{
- width: 48rpx;
- margin-right: 30rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- .icon{
- width: 24rpx;
- height: 24rpx;
- position: relative;
- z-index: 2;
- }
- }
- }
- .h1{
- .icon_wrap{
- .icon{
- width: 48rpx;
- height: 48rpx;
- }
- }
- }
- .time{
- padding-left: 78rpx;
- font-size: 24rpx;
- margin-top: 6rpx;
- }
- .separate{
- height: calc( 100% );
- width: 1rpx;
- border: 1rpx dashed #666666;
- position: absolute;
- left: 22rpx;
- top: 24rpx;
- z-index: 1;
- }
- .separate_ac{
- top: 48rpx;
- }
- }
- }
-
- .info {
- border-radius: 12rpx;
- margin-bottom: 20rpx;
- padding: 0 30rpx;
- background-color: #fff;
- overflow: hidden;
+
+ .main_app {
+ padding: 0;
+ padding-top: 45vh;
+ .main_content{
+ height: 55vh ;
+ overflow: auto;
+ padding: 20rpx 30rpx 0;
position: relative;
- z-index: 1;
- .head {
+ z-index: 999;
+ }
+ #map {
+ width: 750rpx;
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 105vh;
+
+ ::v-deep .amap-marker-label {
+ top: 36px !important;
+ left: 12px !important;
+ border: 3px solid #fff !important;
+ border-radius: 50%;
+ box-shadow: #222222 0px 0px 1px;
+ }
+ }
+
+ .drive_info {
+ background: #fff;
+ border-radius: 16rpx;
+ padding: 30rpx;
+ 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;
+ }
+ .title {
+ font-weight: 500;
+ font-size: 32rpx;
+ color: #222222;
+ margin-bottom: 20rpx;
+ }
+
+ .line {
+ display: flex;
+ margin-bottom: 24rpx;
+
+ .label {
+ color: #666666;
+ margin-right: 40rpx;
+ }
+
+ .val {}
+ }
+ .item_title{
+ font-weight: 600;
+ font-size: 32rpx;
display: flex;
- justify-content: space-between;
align-items: center;
- padding: 0 30rpx;
- width: 690rpx;
- height: 84rpx;
- margin: 0 -30rpx;
- background: linear-gradient( 270deg, #FEFEFF 0%, #E1F7FE 100%);
-
- .code {
- font-weight: 500;
- font-size: 32rpx;
- color: #222222;
- }
-
- .status {
- color: $uni-color-primary;
- }
}
-
- .content {
- padding: 20rpx 0rpx;
- margin-bottom: 20rpx;
-
- .line {
- display: flex;
- margin-bottom: 16rpx;
- font-size: 26rpx;
-
- .la {
- color: #666666;
- width: 140rpx;
- }
-
- .val {}
-
- &:nth-last-child(1) {
- margin-bottom: 0;
- }
+ .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;
+ }
+ .icon {
+ width: 20rpx;
+ height: 20rpx;
+ position: relative;
+ z-index: 2;
+ }
+ .h2 {
+ display: flex;
+ align-items: center;
+ height: 48rpx;
+ }
+
+ .h1 {
+ }
+
+ .time {
+ padding-left: 78rpx;
+ font-size: 24rpx;
+ margin-top: 6rpx;
+ }
+ }
+ }
+
+ .info {
+ border-radius: 12rpx;
+ margin-bottom: 20rpx;
+ padding: 0 30rpx;
+ background-color: #fff;
+ overflow: hidden;
+ position: relative;
+ z-index: 1;
+
+ .head {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 30rpx;
+ width: 690rpx;
+ height: 84rpx;
+ margin: 0 -30rpx;
+ background: linear-gradient(270deg, #FEFEFF 0%, #E1F7FE 100%);
+
+ .code {
+ font-weight: 500;
+ font-size: 32rpx;
+ color: #222222;
+ }
+
+ .status {
+ color: $uni-color-primary;
+ }
+ }
+
+ .content {
+ padding: 20rpx 0rpx;
+ margin-bottom: 20rpx;
+
+ .line {
+ display: flex;
+ margin-bottom: 16rpx;
+ font-size: 28rpx;
+
+ .la {
+ color: #666666;
+ width: 140rpx;
+ }
+
+ .val {}
+
+ &:nth-last-child(1) {
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ }
}
- .main_bg {
- position: absolute;
- left: 0;
+
+ .main_bg {
+ position: absolute;
+ left: 0;
top: 0;
- width: 100%;
- z-index: -1;
+ width: 100%;
+ z-index: -1;
color: #222222;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3