From 79993be468244e6cc16ce9c1d7e8736bd359c600 Mon Sep 17 00:00:00 2001
From: qingyiay <2386314947@qq.com>
Date: 星期五, 05 五月 2023 14:48:51 +0800
Subject: [PATCH] 样式全面修改，所有页面焕然一新
---
pages/driver-page/driver-index/bill-of-lading-details/bill-of-lading-details.vue | 390 +++++++++++++++++++++++++++++++++++++------------------
1 files changed, 260 insertions(+), 130 deletions(-)
diff --git a/pages/driver-page/driver-index/bill-of-lading-details/bill-of-lading-details.vue b/pages/driver-page/driver-index/bill-of-lading-details/bill-of-lading-details.vue
index 53c8404..633f96d 100644
--- a/pages/driver-page/driver-index/bill-of-lading-details/bill-of-lading-details.vue
+++ b/pages/driver-page/driver-index/bill-of-lading-details/bill-of-lading-details.vue
@@ -1,38 +1,71 @@
<template>
<view class="bill-of-lading-details">
- <view class="bangDanMessage">
- <view class="">
- <text>瀹㈡埛锛歿{ coalDetailsData.customerName || '' }}</text>
- <text>鐭垮満锛歿{ coalDetailsData.deptName || '' }}</text>
+ <view class="top-banner" style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/loadingbanner.png') no-repeat;background-size: cover;">
+ <view class="top-information">
+ <view class="cutomer-name">瀹㈡埛:{{ coalDetailsData.customerName || '' }}</view>
+ <view class="fild-name">
+ <view class="">鐭垮満:{{ coalDetailsData.deptName || '' }}</view>
+ <view class="">鐓ゅ満:{{ coalDetailsData.filedName || '' }}</view>
+ </view>
</view>
- <view class="">
- <text>鐨噸锛歿{ coalDetailsData.skin || '' }}</text>
- <text>姣涢噸锛歿{ coalDetailsData.hair || '' }}</text>
- <text>鍑�閲嶏細{{ coalDetailsData.clean || '' }}</text>
- </view>
- <view class="">
- <text>纾呭崟绫诲瀷锛歿{ coalDetailsData.orderType || '' }}</text>
- <text>鐘舵�侊細{{ coalStatus[coalDetailsData.status] }}</text>
- </view>
- <view class="">
- <text>鐓ゅ満锛歿{ coalDetailsData.filedName || '' }}</text>
- <text>鍙戣繍鏃堕棿锛歿{ coalDetailsData.sendDate || '' }}</text>
- <text>鎻愮叅鍗曠紪鍙凤細{{ coalDetailsData.code || '' }}</text>
- <text>璁㈠崟缂栧彿锛歿{ coalDetailsData.orderCode || '' }}</text>
+ <view class="block-information">
+ <view class="block-main">
+ <view class="basic">
+ <view class="coalName">{{ coalDetailsData.coalName }}</view>
+ <view class="black-block"></view>
+ <view class="order-type">{{ coalDetailsData.orderType }}</view>
+ <view
+ class="status-button"
+ style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/statusbutton.png') no-repeat;
+ background-size: cover;"
+ >
+ {{ coalStatus[coalDetailsData.status] }}
+ </view>
+ </view>
+ <view class="time">
+ <view class="time-icon"><u-icon name="clock" color="#515151" size="40"></u-icon></view>
+ <view class="send-date">{{ coalDetailsData.sendDate }}</view>
+ </view>
+ <view class="coal-code">鎻愮叅鍗曠紪鐮亄{ coalDetailsData.code || '' }}</view>
+ <view class="order-code">璁㈠崟缂栧彿:{{ coalDetailsData.orderCode || '' }}</view>
+ <view class="weigh-item">
+ <view class="item">
+ <view class="concrete" style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/skin.png') no-repeat;background-size: cover;">鐨�</view>
+ <view class="num">{{ coalDetailsData.skin }}</view>
+ </view>
+ <view class="item">
+ <view class="concrete" style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/hair.png') no-repeat;background-size: cover;">姣�</view>
+ <view class="num">{{ coalDetailsData.hair }}</view>
+ </view>
+ <view class="item">
+ <view class="concrete" style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/clean.png') no-repeat;background-size: cover;">鍑�</view>
+ <view class="num">{{ coalDetailsData.clean }}</view>
+ </view>
+ </view>
+ </view>
</view>
</view>
- <view class="timeLine" style="font-size: 16rpx;">
- <u--text type="primary" size="30" plain v-for="(item, index) in dayRZ" :key="index" :text="item.taskStatusDes"></u--text>
+
+ <view class="timeLine">
+ <u-steps :current="dayRZ.length - 1" direction="column" dot>
+ <u-steps-item :title="item.taskStatusDes" v-for="(item, index) in dayRZ" :key="index"></u-steps-item>
+ </u-steps>
</view>
<view class="utilsBox">
<view class="utils_chil utils_chilTop">
- <u-button text="绛惧埌" type="primary" plain @click="arriveClick"></u-button>
- <u-button text="鍏ュ満鐢宠" type="primary" plain @click="rcsqClick"></u-button>
- <u-button text="鏀剧┖" type="primary" plain @click="evacuation" throttleTime="500"></u-button>
- <u-button text="鍛煎彨瀹㈡湇" type="primary" plain @click="callCustomerService"></u-button>
+ <view class="top-button">
+ <u-button text="绛惧埌" type="primary" plain @click="arriveClick" shape="circle"></u-button>
+ <u-button text="鍏ュ満鐢宠" type="primary" plain @click="rcsqClick" shape="circle"></u-button>
+ </view>
+ <view class="bottom-button">
+ <u-button text="鏀剧┖" type="primary" plain @click="evacuation" throttleTime="500" shape="circle"></u-button>
+ <u-button text="鍛煎彨瀹㈡湇" type="primary" plain @click="callCustomerService" shape="circle"></u-button>
+ </view>
</view>
- <view class="utils_chil"><u-button text="灞曠ず鎻愮叅鍗�" @click="showCaolPickUpBill" type="primary"></u-button></view>
- <view class="utils_chil"><u-button text="涓婄璁￠噺" @click="cengZhongClick" type="primary"></u-button></view>
+ </view>
+ <view class="weigh-ability">
+ <view class="weigh-button"><u-button text="灞曠ず鎻愮叅鍗�" @click="showCaolPickUpBill" type="primary" shape="circle"></u-button></view>
+ <view class="weigh-button"><u-button text="涓婄璁￠噺" @click="cengZhongClick" type="primary" shape="circle"></u-button></view>
</view>
<view class="evacuationModal">
<u-modal
@@ -48,8 +81,8 @@
</template>
<script>
-let socket = null;
import { webSocketUrl } from '@/api/request.js';
+import { mapState, mapMutations } from 'vuex';
export default {
onLoad(value) {
if (value.orderPlanId && value.yyId) {
@@ -100,14 +133,21 @@
sceneId: '',
gateCameraId: '',
equipmentCode: '',
- weigh: 30
- }
+ weigh: 0,
+ sceneInOut: ''
+ },
+ // 鍘熷彂淇℃伅
+ primarySkin: null,
+ primaryHair: null,
+ primaryClean: null,
+ scrollTop: 0
};
},
onShow() {
this.init();
},
computed: {
+ ...mapState(['globalweigh', 'globalinfraredStatus']),
name() {
return uni.getStorageSync('name');
},
@@ -141,7 +181,8 @@
getTakeCoal() {
this.$reqGet('getTakeCoal', { takeCoalId: this.orderPlanId }).then(res => {
if (res.code == 0) {
- this.coalDetailsData = res.data[0];
+ console.log(res, '鎻愮叅鍗曡鎯�');
+ this.coalDetailsData = res.data;
// 鑾峰彇鎵�鍦ㄧ鎴垮弬鏁拌祴鍊�
this.getWeightHouseObj.deptId = this.coalDetailsData.deptId;
this.getWeightHouseObj.filedId = this.coalDetailsData.filedId;
@@ -157,6 +198,10 @@
this.getServiceOpenid.filedId = this.coalDetailsData.filedId;
// 鑾峰彇鎻愮叅鍗曠姸鎬�
this.currentPageCoalStatus = this.coalDetailsData.status;
+ // 鑾峰彇鍘熷彂淇℃伅
+ this.primarySkin = this.coalDetailsData.skinTwo;
+ this.primaryHair = this.coalDetailsData.hairTwo;
+ this.primaryClean = this.coalDetailsData.cleanTwo;
}
});
},
@@ -244,53 +289,18 @@
this.weighData.sceneId = res.data.id;
this.weighData.gateCameraId = res.data.lastEquipmentId;
this.weighData.equipmentCode = res.data.lastEquipmentCode;
+ this.weighData.sceneInOut = res.data.sceneInOut;
this.weighHouseCode = res.data.code;
uni.navigateTo({
url: `/pages/driver-page/driver-index/bill-of-lading-details/weighingDevice/weighingDevice?takeCoalId=${this.orderPlanId}&sceneId=${
res.data.id
- }&gateCameraId=${res.data.lastEquipmentId}&gateCameraCode=${res.data.lastEquipmentCode}&weighHouseCode=${res.data.code}`
+ }&gateCameraId=${res.data.lastEquipmentId}&gateCameraCode=${res.data.lastEquipmentCode}&weighHouseCode=${res.data.code}&primarySkin=${
+ this.primarySkin
+ }&primaryHair=${this.primaryHair}&psrimaryClean=${this.primaryClean}&sceneInOut=${res.data.sceneInOut}`
});
} else {
this.$u.toast('鏈湪纾呮埧锛岃鍓嶅線纾呮埧鍚庡啀璇曪紒锛�');
}
- });
- },
- /**
- * 鍒濆鍖� weoSocket
- */
- initWebSocket() {
- let wsUrl = `${webSocketUrl}?access_token=${uni.getStorageSync('token')}`;
- socket = uni.connectSocket({
- url: wsUrl,
- header: {
- CLIENT_TOC: 'Y'
- },
- complete: res => {
- console.log(res, 'socket缁撴灉');
- }
- });
- socket.onOpen(() => {
- console.log('onOpen');
- });
- // 鑾峰彇鏈嶅姟鍣ㄤ紶鏉ョ殑鏁版嵁锛屽仛鐩稿簲澶勭悊
- socket.onMessage(res => {
- console.log('socketWeigh', res);
- let nowWeighObj = JSON.parse(res.data.slice(7));
- if (nowWeighObj.eqCode == this.weighHouseCode) {
- if (nowWeighObj.eqInfraredStatus) {
- this.weighData.weigh = nowWeighObj.weigh;
- } else {
- this.weighData.weigh = nowWeighObj.weigh;
- }
- }
- });
- socket.onClose(() => {
- console.log('webSocketClose');
- this.$u.toast('纾呮埧涓柇');
- });
- socket.onError(err => {
- console.log('socket鎶ラ敊', err);
- this.$u.toast('鍑虹幇閿欒锛岃閲嶆柊杩涘叆璇ラ〉闈紝閲嶈瘯锛侊紒');
});
},
// 鏀剧┖
@@ -299,6 +309,10 @@
},
// 鏀剧┖寮圭獥纭
evacuationConfirm() {
+ this.weighData = {
+ ...this.weighData,
+ weigh: this.globalweigh
+ };
let mix = Object.assign(this.weighData, this.getWeightHouseObj);
this.$reqPost('getOneEvacuation', mix, 'json').then(res => {
console.log(res, '绗竴娆℃斁绌�');
@@ -320,86 +334,202 @@
</script>
<style lang="scss" scoped>
+/deep/.u-steps {
+ .u-steps-item {
+ .u-steps-item__content {
+ .u-text {
+ .u-text__value {
+ font-size: 31rpx !important;
+ font-family: Microsoft YaHei;
+ font-weight: 300;
+ color: #303030;
+ }
+ }
+ }
+ }
+}
+@mixin flex {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
::v-deep.bill-of-lading-details {
width: 100%;
height: 100vh;
margin: 0 auto;
display: flex;
flex-direction: column;
- .bangDanMessage {
- padding: vww(10);
- border: vww(2) solid #dddddd;
- border-radius: vww(20);
- margin: vww(20);
- margin-bottom: vww(10);
- height: 40%;
- font-size: vww(18);
- font-weight: 600;
- view {
- margin-bottom: vww(10);
- }
- view:nth-of-type(1) {
- display: flex;
- text {
- width: 50%;
- text-align: center;
- }
- }
- view:nth-of-type(2) {
- display: flex;
- text {
- width: 33%;
- text-align: center;
- }
- }
- view:nth-of-type(3) {
- display: flex;
- text {
- width: 50%;
- text-align: center;
- }
- }
- view:nth-of-type(4) {
- display: flex;
+ .top-banner {
+ width: 100%;
+ height: 346rpx;
+ .top-information {
+ width: 94%;
+ margin: 0 auto;
+ height: vww(52);
+ @include flex position: relative;
flex-direction: column;
- text {
- margin-bottom: vww(10);
+ justify-content: space-between;
+ align-items: flex-start;
+ top: vww(25);
+ color: #ffffff;
+ font-size: 31rpx;
+ font-family: Microsoft YaHei;
+ font-weight: 300;
+ .fild-name {
+ @include flex justify-content: space-between;
+ width: 100%;
+ }
+ }
+ .block-information {
+ width: 690rpx;
+ height: 396rpx;
+ margin: vww(40) auto;
+ background: #ffffff;
+ box-shadow: 4rpx 6rpx 51rpx 0rpx rgba(73, 120, 240, 0.11);
+ border-radius: 20rpx;
+ position: relative;
+ font-size: 30rpx;
+ font-family: Microsoft YaHei;
+ font-weight: 300;
+ color: #303030;
+ overflow: hidden;
+ .block-main {
+ @include flex width: 94%;
+ height: 336rpx;
+ margin: vww(18) vww(7) vww(11) vww(17);
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: flex-start;
+ }
+ .status-button {
+ width: vww(71);
+ height: vww(36);
text-align: center;
+ line-height: vww(33);
+ font-size: 28rpx;
+ font-family: Microsoft YaHei;
+ font-weight: 300;
+ position: absolute;
+ right: vww(10);
+ color: #fff;
+ }
+ .basic {
+ width: 40%;
+ height: vww(15);
+ @include flex justify-content: space-between;
+ .coalName {
+ width: 50%;
+ height: 30rpx;
+ font-size: 30rpx;
+ font-family: Microsoft YaHei;
+ font-weight: 300;
+ color: #515151;
+ position: relative;
+ }
+ .black-block {
+ width: 2rpx;
+ height: 30rpx;
+ background: #515151;
+ }
+ }
+ .time {
+ width: 30%;
+ height: vww(12);
+ display: flex;
+ justify-content: space-between;
+ .send-date {
+ width: 148rpx;
+ height: 24rpx;
+ font-size: 28rpx;
+ font-family: Microsoft YaHei;
+ font-weight: 300;
+ color: #515151;
+ }
+ }
+ .coal-code,
+ .order-code {
+ width: 100%;
+ height: 24rpx;
+ font-size: 28rpx;
+ font-family: Microsoft YaHei;
+ font-weight: 300;
+ color: #7d7d7d;
+ }
+ .weigh-item {
+ width: 100%;
+ height: vww(36);
+ @include flex justify-content: space-around;
+ .item {
+ width: vww(50);
+ height: vww(45);
+ font-size: 21rpx;
+ font-family: Microsoft YaHei;
+ font-weight: 400;
+ color: #ffffff;
+ text-align: center;
+ line-height: vww(30);
+ @include flex;
+ .concrete {
+ width: vww(36);
+ height: vww(36);
+ }
+ .num {
+ font-size: 40rpx;
+ font-family: Microsoft YaHei;
+ font-weight: 300;
+ color: #303030;
+ }
+ }
}
}
}
.timeLine {
- height: 25%;
+ height: 40%;
margin: vww(20);
- margin-top: vww(10);
- margin-bottom: vww(10);
- border: vww(2) solid #dddddd;
- border-radius: vww(20);
- padding: vww(20);
- box-sizing: border-box;
- overflow-y: overlay; //琛屼负涓� auto 鐩稿悓锛屼絾鏄粴鍔ㄦ潯缁樺埗鍦ㄥ唴瀹逛箣涓婏紝鑰屼笉鏄崰鎹┖闂淬��
- .u-text {
- margin-bottom: vww(5) !important;
- }
+ position: relative;
+ top: vww(120);
+ overflow-y: overlay;
}
.utilsBox {
- padding: vww(10) vww(20);
- flex: 1;
- display: flex;
- flex-direction: column;
+ width: 94%;
+ margin: 0 auto;
+ position: relative;
+ top: vww(80);
.utils_chil {
- flex: 1;
- display: flex;
- align-items: center;
- }
- .utils_chilTop {
- .u-button {
- margin-right: vww(4);
- &:nth-child(4) {
- margin-right: 0;
+ width: 100%;
+ margin: 0 auto;
+ .top-button,
+ .bottom-button {
+ width: 100%;
+ height: vww(80);
+ @include flex;
+ .u-button {
+ width: 40%;
+ font-size: 28rpx;
+ font-family: Microsoft YaHei;
+ font-weight: 300;
+ color: #497bfb;
}
}
}
}
+ .weigh-ability {
+ width: 631rpx;
+ height: vww(100);
+ margin: vww(80) auto;
+ margin-bottom: vww(10);
+ @include flex;
+ flex-direction: column;
+ .weigh-button {
+ width: 631rpx;
+ height: vww(89);
+ .u-button {
+ font-size: 28rpx;
+ font-family: Microsoft YaHei;
+ font-weight: 300;
+ color: #ffffff;
+ }
+ }
+ }
}
</style>
--
Gitblit v1.9.1