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-my/faYunstatistics/faYunstatistics.vue | 341 +++++++++++++++++++++++++++++++++++--------------------- 1 files changed, 214 insertions(+), 127 deletions(-) diff --git a/pages/customer-page/customer-my/faYunstatistics/faYunstatistics.vue b/pages/customer-page/customer-my/faYunstatistics/faYunstatistics.vue index 66b528c..6af93fb 100644 --- a/pages/customer-page/customer-my/faYunstatistics/faYunstatistics.vue +++ b/pages/customer-page/customer-my/faYunstatistics/faYunstatistics.vue @@ -54,16 +54,20 @@ <view class="point-number">{{ value.clean.toFixed(2) || 0 }}</view> </view> <view class="second-line"> - <view class="coal-name">{{ value.coalName }}</view> - <view class="black-block"></view> - <view class="coal-type">{{ value.orderType }}</view> + <view class="coal-name"> + <view class="">{{ value.coalName }}</view> + <view class="black-bar"></view> + <view class="coal-type" v-if="value.orderType">{{ value.orderType }}</view> + </view> + <!-- <view class="black-block"><view class="black-bar"></view></view> + <view class="coal-type">{{ value.orderType }}</view> --> </view> <view class="third-line"> <view class="carnum-icon"><image src="https://mx.jzeg.cn:9095/appimg/image/banner/carNO.png" mode="widthFix"></image></view> <view class="carnum-text">{{ value.carNo || '' }}</view> </view> <view class="fourth-line"> - <view class="time-icon"><u-icon name="clock" color="#515151" size="40"></u-icon></view> + <view class="time-icon"><u-icon name="clock" color="#515151" size="28"></u-icon></view> <view class="send-date">{{ value.sendDate }}</view> </view> </view> @@ -71,110 +75,116 @@ </view> </view> <u-popup :show="conditinonShow" mode="bottom" :closeable="true" :closeOnClickOverlay="true" @close="conditinonclose"> - <view class="filter-main"> - <view class="filter-body date-button"> - <view class="condition-name">鏃ユ湡</view> - <view class="filter-name"> - <u-button :text="dateselect" @click="opencalendar"></u-button> - <view class="filter-button "> - <uni-calendar - ref="calendar" - class="uni-calendar--hook" - :clear-date="true" - :date="info.date" - :insert="info.insert" - :lunar="info.lunar" - :startDate="info.startDate" - :endDate="info.endDate" - :range="info.range" - @confirm="confirm" - /> + <scroll-view scroll-y="true" class="scroll-Y"> + <view class="filter-main"> + <view class="filter-body date-button"> + <view class="condition-name">鏃ユ湡</view> + <view class="filter-name"> + <u-button :text="dateselect" @click="opencalendar"></u-button> + <view class="filter-button "> + <uni-calendar + ref="calendar" + class="uni-calendar--hook" + :clear-date="true" + :date="info.date" + :insert="info.insert" + :lunar="info.lunar" + :startDate="info.startDate" + :endDate="info.endDate" + :range="info.range" + @confirm="confirm" + /> + </view> + </view> + </view> + <view class="filter-body"> + <view class="condition-name">鐓ょ</view> + <view class="filter-name"> + <view class="filter-button" v-for="(item, index) in coalList" :key="index" @click="filterCondition(0, index, item.condition)"> + <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small" :class="{ shadowactive: item.active }"></u-button> + </view> + <!-- <view class="toggle-button"> + <u-button :text="coalShow < coalTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(0)" v-if="coalTotal > 3"></u-button> + </view> --> + </view> + </view> + <view class="filter-body" v-if="typeList.length !== 0"> + <view class="condition-name">绫诲瀷</view> + <view class="filter-name"> + <view class="filter-button" v-for="(item, index) in typeList" :key="index" @click="filterCondition(1, index, item.condition)"> + <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small"></u-button> + </view> + <!-- <view class="toggle-button"> + <u-button :text="typeShow < typeTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(1)" v-if="typeTotal > 3"></u-button> + </view> --> + </view> + </view> + <view class="filter-body" v-if="roleType !== 1"> + <view class="condition-name">瀹㈡埛</view> + <view class="filter-name"> + <view class="filter-button" v-for="(item, index) in customerList" :key="index" @click="filterCondition(2, index, item.condition)"> + <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small"></u-button> + </view> + <!-- <view class="toggle-button"> + <u-button :text="customerShow < customerTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(2)" v-if="customerTotal > 3"></u-button> + </view> --> + </view> + </view> + <view class="filter-body" v-if="roleType == 1"> + <view class="condition-name">璐т唬</view> + <view class="filter-name"> + <view class="filter-button" v-for="(item, index) in forwarderList" :key="index" @click="filterCondition(3, index, item.condition)"> + <u-button :text="item.condition" :type="item.active ? 'primary' : ''"></u-button> + </view> + <!-- <view class="toggle-button"> + <u-button + :text="forwarderShow < forwarderTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" + type="primary" + size="small" + @click="toggle(3)" + v-if="forwarderTotal > 3" + ></u-button> + </view> --> + </view> + </view> + <view class="filter-body" v-if="roleType != 3"> + <view class="condition-name">杞﹂槦</view> + <view class="filter-name"> + <view class="filter-button" v-for="(item, index) in fleetList" :key="index" @click="filterCondition(4, index, item.condition)"> + <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small"></u-button> + </view> + <!-- <view class="toggle-button"> + <u-button :text="fleetShow < fleetTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(4)" v-if="fleetTotal > 3"></u-button> + </view> --> + </view> + </view> + <view class="filter-body"> + <view class="condition-name">鐭垮満</view> + <view class="filter-name"> + <view class="filter-button" v-for="(item, index) in filedList" :key="index" @click="filterCondition(5, index, item.condition)"> + <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small"></u-button> + </view> + <!-- <view class="toggle-button"> + <u-button :text="filedShow < filedTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(5)" v-if="filedTotal > 3"></u-button> + </view> --> + </view> + </view> + <view class="filter-body" v-if="roleType == 2"> + <view class="condition-name">杞︾墝鍙�</view> + <view class="filter-name"> + <view class="filter-button" v-for="(item, index) in carNoList" :key="index" @click="filterCondition(6, index, item.condition)"> + <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small" v-if="index < carNoShow"></u-button> + </view> + <!-- <view class="toggle-button"> + <u-button :text="carNoShow < carNoTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(6)" v-if="carNoTotal > 3"></u-button> + </view> --> </view> </view> </view> - <view class="filter-body"> - <view class="condition-name">鐓ょ</view> - <view class="filter-name"> - <view class="filter-button" v-for="(item, index) in coalList" :key="index" @click="filterCondition(0, index, item.condition)"> - <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small" :class="{ shadowactive: item.active }"></u-button> - </view> - <!-- <view class="toggle-button"> - <u-button :text="coalShow < coalTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(0)" v-if="coalTotal > 3"></u-button> - </view> --> - </view> - </view> - <view class="filter-body" v-if="typeList.length !== 0"> - <view class="condition-name">绫诲瀷</view> - <view class="filter-name"> - <view class="filter-button" v-for="(item, index) in typeList" :key="index" @click="filterCondition(1, index, item.condition)"> - <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small"></u-button> - </view> - <!-- <view class="toggle-button"> - <u-button :text="typeShow < typeTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(1)" v-if="typeTotal > 3"></u-button> - </view> --> - </view> - </view> - <view class="filter-body" v-if="roleType !== 1"> - <view class="condition-name">瀹㈡埛</view> - <view class="filter-name"> - <view class="filter-button" v-for="(item, index) in customerList" :key="index" @click="filterCondition(2, index, item.condition)"> - <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small"></u-button> - </view> - <!-- <view class="toggle-button"> - <u-button :text="customerShow < customerTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(2)" v-if="customerTotal > 3"></u-button> - </view> --> - </view> - </view> - <view class="filter-body" v-if="roleType == 1"> - <view class="condition-name">璐т唬</view> - <view class="filter-name"> - <view class="filter-button" v-for="(item, index) in forwarderList" :key="index" @click="filterCondition(3, index, item.condition)"> - <u-button :text="item.condition" :type="item.active ? 'primary' : ''"></u-button> - </view> - <!-- <view class="toggle-button"> - <u-button - :text="forwarderShow < forwarderTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" - type="primary" - size="small" - @click="toggle(3)" - v-if="forwarderTotal > 3" - ></u-button> - </view> --> - </view> - </view> - <view class="filter-body" v-if="roleType != 3"> - <view class="condition-name">杞﹂槦</view> - <view class="filter-name"> - <view class="filter-button" v-for="(item, index) in fleetList" :key="index" @click="filterCondition(4, index, item.condition)"> - <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small"></u-button> - </view> - <!-- <view class="toggle-button"> - <u-button :text="fleetShow < fleetTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(4)" v-if="fleetTotal > 3"></u-button> - </view> --> - </view> - </view> - <view class="filter-body"> - <view class="condition-name">鐭垮満</view> - <view class="filter-name"> - <view class="filter-button" v-for="(item, index) in filedList" :key="index" @click="filterCondition(5, index, item.condition)"> - <u-button :text="item.condition" :type="item.active ? 'success' : ''" size="small"></u-button> - </view> - <!-- <view class="toggle-button"> - <u-button :text="filedShow < filedTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(5)" v-if="filedTotal > 3"></u-button> - </view> --> - </view> - </view> - <view class="filter-body" v-if="roleType == 2"> - <view class="condition-name">杞︾墝鍙�</view> - <view class="filter-name"> - <view class="filter-button" v-for="(item, index) in carNoList" :key="index" @click="filterCondition(6, index, item.condition)"> - <u-button :text="item.condition" :type="item.active ? 'primary' : ''" size="small" v-if="index < carNoShow"></u-button> - </view> - <!-- <view class="toggle-button"> - <u-button :text="carNoShow < carNoTotal ? '鏌ョ湅鏇村' : '鏀惰捣'" type="primary" size="small" @click="toggle(6)" v-if="carNoTotal > 3"></u-button> - </view> --> - </view> - </view> + </scroll-view> + <view class="utils-button"> + <view class="reset-button"><u-button type="default" text="閲嶇疆" :plain="true" shape="circle" @click="resetCondition"></u-button></view> + <view class="confirm-button"><u-button type="primary" text="纭畾" :plain="true" shape="circle" @click="confirmCondition"></u-button></view> </view> </u-popup> <tab-bar :current="1"></tab-bar> @@ -414,6 +424,45 @@ this.totalTon = 0; } }, + // 纭畾绛涢�� + confirmCondition() { + this.conditinonShow = false; + }, + // 閲嶇疆绛涢�� + resetCondition() { + this.conditinonShow = false; + this.filterList = this.taskList; + if (this.filterList.length != 0) { + this.totalLength = this.filterList.map(v => v.taskCoalList.length).reduce((x, y) => x + y); + this.totalTon = this.filterList.map(v => + v.taskCoalList.reduce((prev, cur) => { + return cur.clean + prev; + }, 0) + ); + this.totalTon = this.totalTon.reduce((x, y) => x + y); + } else { + this.totalLength = 0; + this.totalTon = 0; + } + this.coalList.forEach(v => { + v.active = false; + }); + this.typeList.forEach(v => { + v.active = false; + }); + this.customerList.forEach(v => { + v.active = false; + }); + this.forwarderList.forEach(v => { + v.active = false; + }); + this.fleetList.forEach(v => { + v.active = false; + }); + this.filedList.forEach(v => { + v.active = false; + }); + }, confirm(e) { console.log(e, '鏃ユ湡閫夋嫨'); this.first = e.range.before; @@ -560,6 +609,33 @@ ::v-deep .toggle-button .u-button { width: vww(40); } +.scroll-Y { + height: 900rpx; +} +.utils-button { + width: 94%; + height: vww(30); + margin: vww(50) auto; + @include flex; + .reset-button { + /deep/ .u-button { + border: 1px solid #c5c5c5; + outline: none; + } + } + .confirm-button { + /deep/ .u-button { + border: 1px solid #3b56eb; + outline: none; + color: #3b56eb; + } + } + /deep/ .u-button { + width: 279rpx; + height: 60rpx; + font-size: 28rpx; + } +} .white-block { width: 100%; height: vww(50); @@ -614,7 +690,7 @@ } } .content-title { - width: 158rpx; + width: 160rpx; height: 38rpx; font-size: 40rpx; font-family: Adobe Heiti Std; @@ -631,8 +707,11 @@ background: #ffffff; box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12); border-radius: 20rpx; - @include flex flex-direction: column; + @include flex; + flex-direction: column; overflow: hidden; + position: relative; + top: -170rpx; .data-filter { width: 635rpx; height: 68rpx; @@ -736,13 +815,13 @@ } } .second-line { - width: 60%; + width: 100%; height: vww(15); display: flex; justify-content: space-between; align-items: center; .coal-name { - width: 60%; + flex-grow: 1; height: 30rpx; font-size: 30rpx; font-family: Microsoft YaHei; @@ -750,34 +829,38 @@ color: #515151; position: relative; display: flex; - justify-content: space-between; - } - .black-block { - width: 2rpx; - height: 30rpx; - background: #515151; - } - .coal-type { - width: 24%; - height: 30rpx; - font-size: 30rpx; - font-family: Microsoft YaHei; - font-weight: 300; - color: #515151; + align-items: center; + .black-bar { + width: 2rpx; + height: 30rpx; + background: #515151; + margin-left: vww(12); + } + .coal-type { + margin-left: vww(12); + min-width: vww(50); + height: 30rpx; + line-height: 30rpx; + font-size: 30rpx; + font-family: Microsoft YaHei; + font-weight: 300; + color: #515151; + } } } .third-line { width: 40%; height: vww(14); display: flex; - justify-content: space-between; + justify-content: flex-start; align-items: center; .carnum-icon { width: 28rpx; - height: 24rpx; + height: 28rpx; + margin-right: vww(10); image { width: 28rpx; - height: 24rpx; + height: 28rpx; } } .carnum-text { @@ -791,14 +874,18 @@ width: 40%; height: vww(14); display: flex; - justify-content: space-between; + justify-content: flex-start; align-items: center; + .time-icon { + margin-right: vww(10); + } } } } } } .filter-main { + height: 950rpx; width: 100%; display: flex; flex-direction: column; -- Gitblit v1.9.1