From 01e96c8855927df67ac8a6831e345b6cb33140d1 Mon Sep 17 00:00:00 2001
From: qingyiay <2386314947@qq.com>
Date: 星期二, 09 五月 2023 18:49:40 +0800
Subject: [PATCH] 样式修改
---
pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails.vue | 444 +++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 366 insertions(+), 78 deletions(-)
diff --git a/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails.vue b/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails.vue
index 0fe0230..0e81689 100644
--- a/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails.vue
+++ b/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails.vue
@@ -1,78 +1,94 @@
<template>
- <view class="fayunPlan">
- <view class="fayunPlanBody">
- <combined-title title="棰嗗彇鎯呭喌"></combined-title>
- <view class="compDetails">
- <!-- <view class="comp">{{ orderPlanDetail.compName }}</view> -->
- <uni-table border stripe emptyText="鏆傛棤鏇村鏁版嵁">
- <uni-tr>
- <uni-th align="left" width="200">杞彂鎬婚噺</uni-th>
- <uni-td align="left">{{ orderPlanDetail.fowardSum || 0 }}寮�</uni-td>
- </uni-tr>
- <uni-tr>
- <uni-th align="left" width="200">棰嗗彇鎬婚噺</uni-th>
- <uni-td align="left">{{ orderPlanDetail.fleetOrHuodaiNub || 0 }}寮�</uni-td>
- </uni-tr>
- <uni-tr v-for="(item, index) in orderPlanDetail.huodaiList" :key="index">
- <uni-th align="left" width="200">{{ item.huoDaiName }}</uni-th>
- <uni-td align="left">{{ item.fleetOrHuodaiNub }}寮�</uni-td>
- </uni-tr>
- <uni-tr v-for="(item, index) in orderPlanDetail.cheduiList" :key="index">
- <uni-th align="left" width="200">{{ item.cheduiName }}</uni-th>
- <uni-td align="left">{{ item.fleetOrHuodaiNub }}寮�</uni-td>
- </uni-tr>
- <uni-tr>
- <uni-th align="left" width="200">鍙告満鎬婚鍙�</uni-th>
- <uni-td align="left">{{ orderPlanDetail.sijiSum || 0 }}寮�</uni-td>
- </uni-tr>
- </uni-table>
+ <view class="">
+ <view class="fayunPlan">
+ <view class="plan-banner">
+ <view class="top-container">
+ <view class="back-icon" @click="backPage"><u-icon name="arrow-left" size="50" color="#fff"></u-icon></view>
+ <view class="top-title">鍙戣繍璁″垝璇︽儏</view>
+ </view>
+ <view class="middle-container">
+ <view class="dept-name" v-show="deptName">{{ deptName }}({{ coalName }})</view>
+ <view class="dept-num">
+ <text
+ style="font-size: 46rpx;
+ font-family: CTCuHeiSJ;
+ font-weight: 400;
+ color: #FFFFFF;
+ text-shadow: 0rpx 4rpx 0rpx #1A66FE;"
+ >
+ {{ orderPlanDetail.fowardSum || 0 }}
+ </text>
+ <text
+ style="font-size: 24rpx;
+ font-family: Microsoft YaHei;
+ font-weight: 400;
+ color: #F81414;
+ text-shadow: 0rpx 4rpx 0rpx #1A66FE;"
+ >
+ /{{ cars2 || 0 }}
+ </text>
+ </view>
+ </view>
+ <view class="bottom-container">
+ <view class="bottom-block">
+ <view class="bottom-content" v-for="(item, index) in orderPlanDetail.huodaiList" :key="index">
+ <view class="forward-name">{{ item.huoDaiName }}</view>
+ <view class="forward-num">
+ {{ item.fleetOrHuodaiNub }}
+ <text>寮�</text>
+ </view>
+ </view>
+ <view class="bottom-content" v-for="(item, index) in orderPlanDetail.cheduiList" :key="index">
+ <view class="fleet-name">{{ item.cheduiName }}</view>
+ <view class="fleet-num">
+ {{ item.fleetOrHuodaiNub }}
+ <text>寮�</text>
+ </view>
+ </view>
+ <view class="bottom-content">
+ <view class="fleet-name">鍙告満</view>
+ <view class="fleet-num">
+ {{ orderPlanDetail.sijiSum || 0 }}
+ <text>寮�</text>
+ </view>
+ </view>
+ </view>
+ </view>
</view>
- <combined-title title="鎻愮叅鍗曡鎯�"></combined-title>
- <view class="compDetails" v-for="(item, index) in orderPlanDetail.yyDailyList" :key="index">
- <uni-table border stripe emptyText="鏆傛棤鏇村鏁版嵁">
- <uni-tr>
- <uni-th align="left">鎻愮叅鍗曠紪鍙�</uni-th>
- <uni-td align="left">{{ item.code || '' }}</uni-td>
- </uni-tr>
- <uni-tr>
- <uni-th align="left">鎻愮叅鍗曠姸鎬�</uni-th>
- <uni-td align="left">{{ coalStatus[item.status] }}</uni-td>
- </uni-tr>
- <uni-tr>
- <uni-th align="left">杞︾墝鍙�</uni-th>
- <uni-td align="left">{{ item.carNo || '' }}</uni-td>
- </uni-tr>
- <uni-tr>
- <uni-th align="left">鍏ュ満鏃堕棿</uni-th>
- <uni-td align="left">{{ item.inTime || '' }}</uni-td>
- </uni-tr>
- <uni-tr>
- <uni-th align="left">鍑哄満鏃堕棿</uni-th>
- <uni-td align="left">{{ item.outTime || '' }}</uni-td>
- </uni-tr>
- <uni-tr>
- <uni-th align="left">鐨噸</uni-th>
- <uni-td align="left">{{ item.skin || 0 }}</uni-td>
- </uni-tr>
- <uni-tr>
- <uni-th align="left">姣涢噸</uni-th>
- <uni-td align="left">{{ item.hair || 0 }}</uni-td>
- </uni-tr>
- <uni-tr>
- <uni-th align="left">鍑�閲�</uni-th>
- <uni-td align="left">{{ item.clean || 0 }}</uni-td>
- </uni-tr>
- <uni-tr>
- <uni-th align="left">璁㈠崟缂栧彿</uni-th>
- <uni-td align="left">{{ orderCode || '' }}</uni-td>
- </uni-tr>
- <uni-tr>
- <uni-th align="left">璁㈠崟鍓╀綑閲�</uni-th>
- <uni-td align="left">{{ item.allowance || 0 }}</uni-td>
- </uni-tr>
- </uni-table>
+ <view class="block-top">
+ <combined-title title="鎻愮叅鍗曡鎯�"></combined-title>
+ <view class="total">
+ 鎬诲噣閲�
+ <text>{{ total || 0 }}</text>
+ </view>
+ </view>
+ <view class="main-banner">
+ <view class="empty-pointer" v-if="!yyDailyList">鏆傛棤鏇村鏁版嵁</view>
+ <view class="main-block">
+ <view class="main-container">
+ <view class="main-container_content" v-for="(item, index) in yyDailyList" :key="index" @click="showMore(index)">
+ <view class="arrow-icon"><u-icon name="arrow-right" size="30" color="#999999"></u-icon></view>
+ <view class="divider"><u-divider></u-divider></view>
+ <view class="first-line">
+ <view class="car-num">{{ item.carNo || '' }}</view>
+ <view class="order-type">{{ coalStatus[item.status] }}</view>
+ </view>
+ <view class="second-line">
+ <view class="line-content">
+ <view class="line-content_text">鍑�閲�</view>
+ <view class="line-content_num">{{ item.clean || 0 }}</view>
+ </view>
+ <view class="line-content">
+ <view class="line-content_text">浣欓噺</view>
+ <view class="line-content_num">{{ item.allowance || 0 }}</view>
+ </view>
+ </view>
+ </view>
+ </view>
+ </view>
</view>
</view>
+ <view class="white-block"></view>
</view>
</template>
@@ -83,24 +99,41 @@
combinedTitle
},
onLoad(value) {
- console.log('椤甸潰鍔犺浇', value);
- if (value.orderPlanId && value.code) {
- this.orderPlanId = value.orderPlanId;
- this.orderCode = value.code;
- }
+ this.orderPlanId = value.orderPlanId;
+ this.orderCode = value.code;
+ this.cars2 = value.cars2;
+ this.deptName = value.deptName;
+ this.coalName = value.coalName;
+ console.log(value, '鍙戣繍璁″垝鍙傛暟');
},
data() {
return {
orderPlanId: null,
orderCode: null,
orderPlanDetail: {},
- coalStatus: ['棰嗗彇', '棰勭害', '绛惧埌', '鍏ュ満', '绉扮毊', '绉版瘺', '绂诲満', '鍏ョ鎴�', '鍑虹鎴�', '鍏ョ叅鍦�', '鍑虹叅浠�']
+ coalStatus: ['棰嗗彇', '棰勭害', '绛惧埌', '鍏ュ満', '绉扮毊', '绉版瘺', '绂诲満', '鍏ョ鎴�', '鍑虹鎴�', '鍏ョ叅鍦�', '鍑虹叅浠�'],
+ yyDailyList: [],
+ // 棰嗗彇鏁伴噺
+ cars2: '',
+ coalName: '',
+ deptName: '',
+ total: 0
};
},
onShow() {
this.init();
},
methods: {
+ backPage() {
+ uni.navigateBack({
+ delta: 1
+ });
+ },
+ showMore(index) {
+ uni.navigateTo({
+ url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanMore/fayunPlanMore?orderPlanId=${this.orderPlanId}&index=${index}`
+ });
+ },
init() {
this.GetOrderPlanDetail();
},
@@ -112,6 +145,17 @@
this.$reqGet('xiangqingList', { orderPlanId: this.orderPlanId }).then(res => {
if (res.code == 0) {
this.orderPlanDetail = res.data;
+ this.yyDailyList = res.data.yyDailyList;
+ if (res.data.yyDailyList) {
+ this.total = this.yyDailyList.reduce((prev, cur) => {
+ return prev + cur.clean;
+ }, 0);
+ } else {
+ this.total = 0;
+ }
+ uni.hideLoading();
+ } else {
+ this.$u.toast('鍔犺浇澶辫触锛岃绋嶅悗閲嶈瘯');
uni.hideLoading();
}
});
@@ -121,11 +165,219 @@
</script>
<style lang="scss" scoped>
+@mixin flex {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.empty-pointer {
+ position: absolute;
+ top: 50%;
+ left: 38%;
+ color: #909399;
+}
+.white-block {
+ width: 100%;
+ height: vww(50);
+ margin-top: vww(10);
+}
::v-deep.fayunPlan {
width: 100%;
margin: 0 auto;
+ background-color: #f4f4f4;
display: flex;
flex-direction: column;
+ .plan-banner {
+ width: 100%;
+ background: linear-gradient(0deg, #ffffff 0%, #0055fe 100%);
+ background-size: contain;
+ position: relative;
+ top: 0;
+ .top-container {
+ width: 468rpx;
+ height: 38rpx;
+ position: relative;
+ top: vww(48);
+ @include flex margin-left: vww(10);
+ .top-title {
+ width: 226rpx;
+ height: 36rpx;
+ font-size: 38rpx;
+ font-family: Adobe Heiti Std;
+ font-weight: normal;
+ color: #fff;
+ line-height: 69rpx;
+ }
+ }
+ .middle-container {
+ width: 626rpx;
+ height: 34rpx;
+ margin: vww(27) vww(31) 0 vww(31);
+ @include flex;
+ position: relative;
+ top: vww(54);
+ .dept-name {
+ font-size: 32rpx;
+ font-family: Adobe Heiti Std;
+ font-weight: normal;
+ color: #ffffff;
+ line-height: 69rpx;
+ text-shadow: 0rpx 4rpx 0rpx #1a66fe;
+ }
+ }
+ .bottom-container {
+ width: 100%;
+ @include flex;
+ justify-content: center;
+ margin-top: vww(80);
+ .bottom-block {
+ width: 690rpx;
+ min-height: 185rpx;
+ background: #ffffff;
+ box-shadow: 4rpx 6rpx 51rpx 0rpx rgba(73, 120, 240, 0.11);
+ border-radius: 20rpx;
+ @include flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ padding: 0 vww(8);
+ .bottom-content {
+ @include flex;
+ flex-direction: column;
+ height: vww(56);
+ margin-right: vww(5);
+ .forward-name,
+ .fleet-name {
+ font-size: 28rpx;
+ font-family: Adobe Heiti Std;
+ font-weight: normal;
+ color: #757575;
+ line-height: 69rpx;
+ }
+ .forward-num,
+ .fleet-num {
+ font-size: 40rpx;
+ font-family: Microsoft YaHei;
+ font-weight: 400;
+ color: #303030;
+ line-height: 69rpx;
+ text {
+ font-size: 30rpx;
+ }
+ }
+ }
+ }
+ }
+ }
+ .block-top {
+ width: 94%;
+ margin: vww(15);
+ @include flex;
+ .total {
+ height: 30rpx;
+ line-height: vww(15);
+ font-size: 28rpx;
+ font-family: Adobe Heiti Std;
+ font-weight: normal;
+ color: #757575;
+ text {
+ width: 118rpx;
+ height: 30rpx;
+ line-height: vww(15);
+ font-size: 40rpx;
+ font-family: CTCuHeiSJ;
+ font-weight: 400;
+ color: #f81414;
+ }
+ }
+ }
+ .main-banner {
+ width: 100%;
+ @include flex;
+ justify-content: center;
+ .main-block {
+ width: 690rpx;
+ background: #ffffff;
+ box-shadow: 4rpx 6rpx 51rpx 0rpx rgba(73, 120, 240, 0.11);
+ border-radius: 20rpx;
+ .main-container {
+ width: 100%;
+ @include flex;
+ justify-content: center;
+ flex-direction: column;
+ background-color: #fff;
+ &_content {
+ width: 96%;
+ height: 194rpx;
+ @include flex;
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: flex-start;
+ margin-top: vww(8);
+ position: relative;
+ .arrow-icon {
+ position: absolute;
+ right: vww(10);
+ top: vww(17);
+ }
+ .divider {
+ position: absolute;
+ width: 94%;
+ height: vww(1);
+ margin: 0 auto;
+ border-bottom: 1px soild #d6d6d6;
+ left: vww(15);
+ bottom: vww(18);
+ }
+ .first-line {
+ width: 50%;
+ @include flex;
+ margin: 0 vww(15);
+ .car-num {
+ height: 31rpx;
+ font-size: 30rpx;
+ font-family: Microsoft YaHei;
+ font-weight: 300;
+ color: #303030;
+ }
+ .order-type {
+ border: 2px solid #035cfb;
+ border-radius: 4rpx;
+ color: #035cfb;
+ padding: vww(2) vww(4);
+ text-align: center;
+ }
+ }
+ .second-line {
+ width: 94%;
+ height: vww(14);
+ margin: 0 vww(15);
+ @include flex;
+ justify-content: space-between;
+ .line-content {
+ width: 40%;
+ @include flex &_text {
+ width: 69rpx;
+ height: 29rpx;
+ line-height: 29rpx;
+ font-size: 28rpx;
+ font-family: PingFang SC;
+ font-weight: 400;
+ color: #919090;
+ }
+ &_num {
+ height: 29rpx;
+ line-height: 29rpx;
+ font-size: 38rpx;
+ font-family: PingFang SC;
+ font-weight: 400;
+ color: #035cfb;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
.fayunPlanBody {
width: 94%;
margin: 0 auto;
@@ -144,11 +396,47 @@
background-color: #f5f5f5;
}
}
+ .card {
+ width: 94%;
+ height: vww(150);
+ margin: vww(24) auto 0 auto;
+ background-color: #fff;
+ border-radius: 4px;
+ box-shadow: 0 2px 12px 0 #ebeef5;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ .coal-status,
+ .coal-clean,
+ .coal-allowance,
+ .coal-carNo {
+ width: 50%;
+ margin-top: vww(30);
+ height: vww(50);
+ text-align: center;
+ .label-title {
+ color: #909399;
+ }
+ .label-value {
+ min-width: vww(85);
+ margin-top: vww(10);
+ color: #606266;
+ }
+ }
+ .more-button {
+ width: vww(60);
+ position: absolute;
+ top: vww(100);
+ display: flex;
+ justify-content: center;
+ }
+ }
// 琛ㄦ牸鏍峰紡
.uni-table {
.uni-table-tr {
padding: 0;
- border:vww(1) solid #c6c6c6;
+ border: vww(1) solid #c6c6c6;
.uni-table-th {
font-size: vww(14);
height: vww(30);
--
Gitblit v1.9.1