From 0e555ff7887e46c5bdd9d8ca237f7ed1e1634c0f Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期三, 24 九月 2025 13:53:55 +0800
Subject: [PATCH] 优化
---
h5/pages/waybill/waybillDetail.vue | 188 +++++++++++++++++++++++++++++++---------------
1 files changed, 127 insertions(+), 61 deletions(-)
diff --git a/h5/pages/waybill/waybillDetail.vue b/h5/pages/waybill/waybillDetail.vue
index c29ebfe..805453f 100644
--- a/h5/pages/waybill/waybillDetail.vue
+++ b/h5/pages/waybill/waybillDetail.vue
@@ -4,12 +4,12 @@
<map id="map" :latitude="latitude" :longitude="longitude" :polyline="polyline" :markers="markers" :scale="scale">
</map>
- <view class="main_content">
- <view class="stock_status" v-if="info.overStock && info.overStock == 1">
- <image src="@/static/ic_tip@2x.png" mode=""></image>
- <view class="">鍥犲簱瀛樹笉瓒筹紝璁㈠崟鏆傛椂鏃犳硶閰嶈浇</view>
- </view>
+ <view class="main_content">
<view class="info">
+ <view class="stock_status" v-if="info.overStock && info.overStock == 1">
+ <image src="@/static/ic_tip@2x.png" mode=""></image>
+ <view class="">鍥犲簱瀛樹笉瓒筹紝璁㈠崟鏆傛椂鏃犳硶閰嶈浇</view>
+ </view>
<view class="head">
<view class="code">{{info.contractNumber}}</view>
<view class="status">{{info.orderStatusDesc}}</view>
@@ -34,12 +34,28 @@
</view>
<view class="line">
<view class="la">杞﹁締浣嶇疆</view>
- <view class="val">{{'-'}}</view>
+ <view class="val">{{ info.address || '-'}}</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 v-if="showRecord" class="table">
+ <view class="ite header">
+ <view class="name">鍝佽鍚嶇О</view>
+ <view class="num">鏁伴噺<text>(涓囨敮)</text></view>
+ </view>
+ <view class="ite" v-for="ite in info.orderDetailVOList">
+ <view class="name">{{ite.productName}}</view>
+ <view class="num">{{ite.pnumber}}</view>
+ </view>
+ </view>
+ <view class="line switch" @click="showRecord = !showRecord">
+ <view class="">{{ showRecord ? '鏀惰捣鍝佽鏄庣粏' : '鏌ョ湅鍝佽鏄庣粏'}}</view>
+ <u-icon v-if="!showRecord" name="arrow-down" size="12" class="ml6" color='#666666'></u-icon>
+ <u-icon v-if="showRecord" name="arrow-up" size="12" class="ml6" color='#666666'></u-icon>
+ </view>
+
</view>
</view>
<view class="drive_info">
@@ -56,7 +72,7 @@
<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 && k != 0" src="@/static/waybill/ic_dingdan@2x.png" class="icon"></image>
+ <image v-if="dri.key == 4 && k != 0" src="@/static/waybill/ic_dingdan@2x.png" class="icon"></image>
<image v-if="dri.key == 4 && k == 0" 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>
@@ -69,10 +85,10 @@
</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>
- <template v-if="item.tel">
- <text v-for="phone,p in item.tel.split(',')" @click="callPhone(phone)" class="primaryColor">{{phone}}<text v-if="p < item.tel.split(',').length - 1">,</text></text>
+ <text :style="{ color: item.orderStatus === 9 ? 'red' : '#666666'}">{{item.orderStatusDes}}</text>
+ <text v-if="item.tel">锛屽彂璐т粨搴撶數璇濓細</text>
+ <template v-if="item.tel">
+ <text v-for="phone,p in item.tel.split(',')" @click="callPhone(phone)" class="primaryColor">{{phone}}<text v-if="p < item.tel.split(',').length - 1">,</text></text>
</template>
</view>
@@ -97,7 +113,7 @@
param: {},
latitude: 31.783205,
- longitude: 117.262635,
+ longitude: 117.262635,
scale: 5,
markers: [],
includePoints: [
@@ -116,7 +132,8 @@
// color: '#FF0000',
// width: 3
// },
- ]
+ ],
+ showRecord: false
};
},
onLoad(options) {
@@ -164,20 +181,31 @@
}
})
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
+ 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) {
+ // const apiKey = 'd9a554b1808ce10a12a932ed9b0db1d0';
+ const apiKey = '3916a7b434e7f13ae1a0af64e88ec0a3';
+ let adsInfo = this.gisInfo.gisList[this.gisInfo.gisList.length - 1]
+ const location = adsInfo.lon1 + ',' + adsInfo.lat1;
+ uni.request({
+ url: `https://restapi.amap.com/v3/geocode/regeo?key=${apiKey}&location=${location}`,
+ method: 'GET',
+ success: (res) => {
+ this.$set(this.info, 'address', res.data.regeocode.formatted_address)
+ },
+ })
this.polyline = []
let temp = {
color: '#ff0000',
@@ -192,6 +220,7 @@
this.polyline.push(temp)
}
}
+
})
},
distance() {
@@ -259,21 +288,21 @@
background: #fff;
border-radius: 16rpx;
padding: 30rpx;
- margin-bottom: 20rpx;
- position: relative;
+ margin-bottom: 20rpx;
+ position: relative;
z-index: 999;
- .drive_list{
- position: relative;
- z-index: 999;
- .separate {
- height: calc(100% - 48rpx);
- width: 1rpx;
- border: 1rpx dashed #CCCCCC;
- position: absolute;
- left: 24rpx;
- top: 48rpx;
- z-index: -1;
- }
+ .drive_list{
+ position: relative;
+ z-index: 999;
+ .separate {
+ height: calc(100% - 48rpx);
+ width: 1rpx;
+ border: 1rpx dashed #CCCCCC;
+ position: absolute;
+ left: 24rpx;
+ top: 48rpx;
+ z-index: -1;
+ }
}
@@ -322,12 +351,12 @@
position: relative;
color: #999999;
margin-bottom: 30rpx;
- &:nth-last-child(1){
- margin-bottom: 0;
- padding-bottom: 30rpx;
+ &:nth-last-child(1){
+ margin-bottom: 0;
+ padding-bottom: 30rpx;
}
.text {
- color: #666666;
+ color: #666666;
flex: 1;
}
@@ -335,7 +364,7 @@
width: 20rpx;
height: 20rpx;
position: relative;
- z-index: 2;
+ z-index: 2;
margin-top: 12rpx;
}
@@ -354,24 +383,6 @@
}
}
}
- .stock_status{
- background: #FFEEEE;
- font-size: 26rpx;
- color: #ED4545;
- display: flex;
- align-items: center;
- border-radius: 8rpx 8rpx 0rpx 0rpx;
- height: 80rpx;
- position: relative;
- z-index: 1;
- padding: 0 30rpx 4rpx;
- top: 8rpx;
- image{
- width: 28rpx;
- height: 28rpx;
- margin-right: 10rpx;
- }
- }
.info {
border-radius: 12rpx;
margin-bottom: 20rpx;
@@ -380,16 +391,36 @@
overflow: hidden;
position: relative;
z-index: 1;
+ .stock_status{
+ background: #FFEEEE;
+ font-size: 26rpx;
+ color: #ED4545;
+ display: flex;
+ align-items: center;
+ border-radius: 8rpx 8rpx 0rpx 0rpx;
+ height: 80rpx;
+ margin: 0rpx -30rpx 0;
+ position: relative;
+ z-index: 1;
+ padding: 0 30rpx;
+ image{
+ width: 28rpx;
+ height: 28rpx;
+ margin-right: 10rpx;
+ }
+ }
.head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30rpx;
width: 690rpx;
+ border-radius: 8rpx 8rpx 0rpx 0rpx;
height: 84rpx;
margin: 0 -30rpx;
background: linear-gradient(270deg, #FEFEFF 0%, #E1F7FE 100%);
-
+ position: relative;
+ z-index: 11;
.code {
font-weight: 500;
font-size: 32rpx;
@@ -415,12 +446,47 @@
width: 140rpx;
}
- .val {}
+ .val {
+ flex: 1;
+ }
&:nth-last-child(1) {
margin-bottom: 0;
}
}
+ .table{
+ margin: 0 auto 20rpx;
+ .ite{
+ width: 100%;
+ height: 68rpx;
+ background: #FFFFFF;
+ border-bottom: 1rpx solid #E5E5E5;
+ display: flex;
+ align-items: center;
+ font-size: 28rpx;
+ padding-left: 30rpx;
+ .name{
+ flex: 8;
+ // padding-left: 20rpx;
+ }
+ .num{
+ flex: 3;
+ }
+ }
+ .header{
+ background: #F4F7FC;
+ font-weight: 500;
+ text{
+ font-size: 22rpx;
+ }
+ }
+ }
+ .switch{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #666666;
+ }
}
}
--
Gitblit v1.9.3