From 13f63b301fbae86ad08c6517461507101f913d12 Mon Sep 17 00:00:00 2001 From: yangan <yangan0921@163.com> Date: 星期一, 03 六月 2024 14:35:12 +0800 Subject: [PATCH] feat:库管首页样式更新 --- pages/loadUnload-page/selectTarget/selectTarget.vue | 276 +++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 227 insertions(+), 49 deletions(-) diff --git a/pages/loadUnload-page/selectTarget/selectTarget.vue b/pages/loadUnload-page/selectTarget/selectTarget.vue index 2e35e55..010c2a0 100644 --- a/pages/loadUnload-page/selectTarget/selectTarget.vue +++ b/pages/loadUnload-page/selectTarget/selectTarget.vue @@ -1,6 +1,14 @@ <template> <view class="main"> - <u--form labelPosition="top" + <!-- 褰撳墠閫夋嫨浠撳簱 --> + <view class="top-tag"> + <u-tag + size='large' + :text="dataForm.firstClass ? dataForm.firstClass : '璇烽�夋嫨浠撳簱'" + @click="firstClassSelect" + ></u-tag> + </view> + <!-- <u--form labelPosition="top" labelWidth="20%" :borderBottom="false" :model="dataForm" @@ -17,56 +25,82 @@ size="30"></u-icon></u-cell> </u-cell-group> </u-form-item> - <!-- <u-form-item label="鐓や粨" - prop="secondClass" - :borderBottom="false"> - <u-cell-group> - <u-cell :title="dataForm.secondClass" - value="璇烽�夋嫨" - @click="secondClassSelect" - :disabled="!dataForm.firstClass"> - <u-icon name="arrow-right" - slot="right-icon" - size="30"></u-icon></u-cell> - </u-cell-group> - </u-form-item> - <u-form-item label="纾呭崟" - prop="orderType" - :borderBottom="false"> - <u-cell-group> - <u-cell :title="dataForm.orderType" - :value="isOrderType" - @click="orderTypeSelect"> - <view slot="right-icon" - @click.stop="cleanOrderType"> - <u-icon :name="!dataForm.orderType?'arrow-right':'close-circle'" - size="30"></u-icon> - </view> - </u-cell> - </u-cell-group> - </u-form-item> --> - </u--form> - <view class="coal-name" - v-show="coalList.length!==0"> - <u-checkbox-group v-model="checkedCoal" - placement="column" - @change="checkboxChange" - size="30"> - <u-checkbox :customStyle="{marginBottom: '8px',fontSize:'20px'}" - v-for="(item, index) in coalList" - :key="item.id" - :label="item.name" - :name="item.name" - labelSize='40' - iconSize='40'></u-checkbox></u-checkbox-group> - </view> - <view style="margin-top: 20rpx;"> + + </u--form> --> + + <!-- <view style="margin-top: 20rpx;"> <u-button type="primary" shape="circle" text="鏌ョ湅璇ヤ粨搴撴敹鍙戝崟" @click.stop="formHandle"></u-button> - </view> + </view> --> <!-- 鐓ゅ満 --> + <view class='div-box'> + <u-empty mode="data" + icon="http://cdn.uviewui.com/uview/empty/data.png" + text="鏆傛棤鏁版嵁" + textSize="30" + iconSize="1000" + v-if="detailData.length===0"></u-empty> + <!-- 娓叉煋鍖哄煙 --> + <zh-collapse @change='change' accordion v-for="item,i in detailData" + :key="i"> + <zh-collapse-item + class="collItem" + @clickContent='clickContent'> + <view class="" slot='title'> + <view class="history-information"> + <view class="first"> + <view class="">{{ item.deptName || '' }}</view> + <view class=""><u-icon name="arrow-right" + color="#999999" + size="40"></u-icon></view> + </view> + <view class="second"> + <view class="coal-name">{{ item.coalName || '' }}</view> + <view class="order-type">{{ item.orderType || '' }}</view> + </view> + <view class="third"> + <view class="third-line"> + <view class="third-line_text">棰嗗彇鏁�:</view> + <view class="third-line_num">{{ item.cars2 }}</view> + </view> + <view class="third-line"> + <view class="third-line_text">鍓╀綑鏁�:</view> + <view class="third-line_num" + v-if="roleType == 1">{{ item.carNumSurplus1 }}</view> + <view class="third-line_num" + v-else-if="roleType == 2">{{ item.carNumSurplus }}</view> + </view> + <view class="third-line"> + <view class="third-line_text">鎻愮叅鍗曚釜鏁�:</view> + <view class="third-line_num">{{ item.tmCount }}</view> + </view> + </view> + <view class="fourth"> + <view class="fourth-icon"> + <view + style="width: 24rpx;height: 24rpx;line-height: 24rpx;background: url('https://mx.jzeg.cn:9096/appimg/image/banner/clock.png') no-repeat;background-size: cover"> + </view> + </view> + <view class="senddate">{{ item.sendDate }}</view> + </view> + <view class="fourth"> + <view class="fourth-icon"> + <view + style="width: 26rpx;height: 26rpx;line-height: 26rpx;background: url('https://mx.jzeg.cn:9096/appimg/image/banner/carnNUm.png') no-repeat;background-size: cover;"> + </view> + </view> + <view class="senddate">{{ item.orderCode }}</view> + </view> + </view> + + </view> + <view class="" slot='cont'>鏀寔瀹氫箟鍐呭</view> + </zh-collapse-item> + </zh-collapse> + + </view> <u-action-sheet :actions="firstClassActionsList" :show="firstClassShow" cancelText='鍙栨秷' @@ -110,6 +144,7 @@ coalList: [], checkedCoal: [], userInfo: {}, + detailData:[], filedId: "", selectedCoal: [], orderTypeShow: false, @@ -145,6 +180,7 @@ this.firstClassActionsList = res.data; if(res.data.length === 1){ this.dataForm.bunkerId = res.data[0].id; + uni.setStorageSync('bunkerId',res.data[0].id) this.dataForm.firstClass = res.data[0].name; setTimeout(()=>{ uni.navigateTo({ @@ -169,6 +205,16 @@ firstClassSelectClick(val) { this.dataForm.firstClass = val.name; this.dataForm.bunkerId= val.id; + uni.setStorageSync('bunkerId', val.id); + this.$reqGet('getTaskCoalListByBunkerId', { bunkerId:this.dataForm.bunkerId }).then(res => { + uni.hideLoading() + if (res.code === 0) { + this.detailData = res.data; + console.log(this.detailData,'detailData') + } else { + this.$u.toast('鍔犺浇澶辫触') + } + }) this.filedId = val.id }, // 鑾峰彇鐓や粨 @@ -221,7 +267,15 @@ }) }) - } + }, + change(){ + + }, + close(){ + + }, + open(){} + }, onShow(){ uni.showLoading({ @@ -233,6 +287,7 @@ this.firstClassActionsList = res.data; if(res.data.length === 1){ this.dataForm.bunkerId = res.data[0].id; + uni.setStorageSync('bunkerId', res.data[0].id) this.dataForm.firstClass = res.data[0].name; } @@ -253,7 +308,24 @@ margin: 10px; // margin-top: vww(100); position: relative; - top: vww(-120); + top: vww(-160); + .top-tag{ + width: 25%; + height: 100rpx; + margin-left: 70%; + display: flex; + /* margin-top: 40rpx; */ + color: #fff; + justify-content: space-between; + } + + .div-box{ + width: 100%; + /deep/ .u-collapse{ + background: #fff; + } + + } } .slide-fade-enter-active { @@ -261,11 +333,117 @@ } .coal-name { - width: 95%; + width: 75%; min-height: vww(100); .u-checkbox-group { .u-checkbox {} } } + .box{ + display: flex; + flex-direction: column; + width: 100%; + .box-top{ + width: 100%; + height: 100rpx; + display: inline-block; + display: flex; + justify-content: space-between; + align-items: center; + + } + } + .collItem{ + margin-top: 30rpx; + } + .history-information { + + background: #ffffff; + border-radius: 20rpx; + @include flex flex-direction: column; + padding: 10px; + align-items: flex-start; + justify-content: space-evenly; + box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12); + + + .first { + width: 96%; + height: 34rpx; + font-size: 32rpx; + font-weight: 300; + color: #303030; + @include flex; + margin: vww(10) vww(10) 0; + } + + .second { + width: 100%; + height: 31rpx; + font-size: 30rpx; + font-weight: 300; + color: #515151; + margin: vww(10) vww(10) 0; + @include flex; + justify-content: flex-start; + + .coal-name { + min-width: vww(20); + height: vww(20); + margin-right: vww(21); + } + + .order-type { + height: 45rpx; + color: #035cfb; + border: 2px solid #035cfb; + border-radius: 4rpx; + padding: vww(2) vww(4); + text-align: center; + } + } + + .third { + width: 96%; + height: 31rpx; + font-size: 30rpx; + font-weight: 300; + color: #515151; + margin: vww(10) vww(10) 0; + @include flex; + + .third-line { + @include flex; + + &_text { + color: #919090; + } + + &_num { + color: #035cfb; + } + } + } + + .fourth { + width: 100%; + height: 31rpx; + font-size: 30rpx; + font-weight: 300; + color: #515151; + margin: vww(10) vww(10) 0; + @include flex; + + .fourth-icon { + width: vww(13); + height: vww(13); + margin-right: vww(14); + } + + .senddate { + flex: 1; + } + } + } </style> \ No newline at end of file -- Gitblit v1.9.1