From 75811022288e2c4832974a1586f442608706c30a Mon Sep 17 00:00:00 2001 From: yangan <yangan0921@163.com> Date: 星期四, 12 九月 2024 17:40:10 +0800 Subject: [PATCH] feat:司机接单pvc吨数提示 --- pages/doorkeeper-page/doorkeeper-index/doorkeeper-index.vue | 445 ++++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 370 insertions(+), 75 deletions(-) diff --git a/pages/doorkeeper-page/doorkeeper-index/doorkeeper-index.vue b/pages/doorkeeper-page/doorkeeper-index/doorkeeper-index.vue index b61db08..74a9f1e 100644 --- a/pages/doorkeeper-page/doorkeeper-index/doorkeeper-index.vue +++ b/pages/doorkeeper-page/doorkeeper-index/doorkeeper-index.vue @@ -1,42 +1,129 @@ <template> <view class="appointment"> <view class="searchview"> - <u-search @change="change" :searchIconSize="40" placeholder="璇疯緭鍏ヨ溅鐗屽彿" height="80" clearabled v-model="carNo" @search="search" @custom="custom" @clear="clear" > + <u-search @change="change" :searchIconSize="40" placeholder="璇疯緭鍏ヨ溅鐗屽彿" height="60" clearabled v-model="carNo" @search="search" @custom="custom" @clear="clear" > </u-search > </view> - <uni-table border - stripe - emptyText="鏆傛棤鏇村鏁版嵁"> - <uni-tr> - <uni-th align="center">杞︾墝鍙�</uni-th> - <uni-th align="center">浜у搧</uni-th> - <uni-th align="center">鍙告満</uni-th> - <uni-th align="center">鎵嬫満鍙�</uni-th> - <uni-th align="center">棰勭害鏃堕棿</uni-th> - <uni-th align="center">鎿嶄綔</uni-th> - </uni-tr> - <uni-tr v-for="(item, index) in driverBillOfLoadingData" - :key="item.id"> - <uni-td align="center">{{ item.carNo || '' }}</uni-td> - <uni-td align="center">{{ item.productNames || '' }}</uni-td> - <uni-td align="center">{{ item.driver }}</uni-td> - <uni-td align="center">{{ item.phone || '' }}</uni-td> - <uni-td align="center">{{ item.startTime || '' }}-{{item.endTime || ""}}</uni-td> - <uni-td> - <view class="buttons"> - <u-button text="鏌ョ湅杩愯緭璇�" - type="primary" - class="buttonitem" - v-if="item.roadTransportId" - @click="lookRoad(item)"></u-button> - <u-button text="妫�鏌�" - type="primary" - class="buttonitem" - @click="yuYueBtnClick(item)"></u-button> + <u-collapse + ref="myCollapse" + :value='["1"]' + > + <u-collapse-item + ref="collapseHeight" + name='1' + class="collItem" + :title="'寰呮鏌ュ徃鏈�'"> + <view style="position: relative;top: -40px;"> + <u-empty mode="data" + icon="http://cdn.uviewui.com/uview/empty/data.png" + textSize="30" + iconSize="1000" + text="鏆傛棤杞﹁締" + v-if="driverBillOfLoadingData.length == 0"></u-empty> + </view> + <view class="collection-form"> + <view class="collection-form-item" + v-for="(item, index) in driverBillOfLoadingData" + :key="index"> + <view class="first-line"> + <view class="dispatch-receive"> + <view class="dispatch-dept">{{ item.code || '' }}</view> + <view class="black-bar"></view> + <view class="dispatch">{{ item.customerName ||'' }}</view> </view> - </uni-td> - </uni-tr> - </uni-table> + <view class="point-number"> + <text class="order-type">{{ item.productNames?limitString(item.productNames,20,'...'):'' || '' }}</text> + </view> + </view> + <view class="second-line"> + <view class="coal-name"> + <view class="dispatch-dept">{{ item.carNo || '' }}</view> + <view class="black-bar"></view> + <view class="dispatch">{{ item.driver ||'' }}</view> + <view class="black-bar"></view> + <text>{{ item.phone || '' }}</text> + </view> + </view> + <view class="third-line"> + <view class="time-icon"> + <view + style="width: 24rpx;height: 24rpx;line-height: 24rpx;background: url('https://wrzs.czjlchem.com:9090/appimg/image/banner/clock.png') no-repeat;background-size: cover"> + </view> + </view> + <view class="send-date">{{ item.sendDate }} {{ item.startTime || '' }}-{{item.endTime || ""}}</view> + </view> + <view class="fourth-line"> + <view class="receive" + v-if="item.roadTransportId" + @click.stop="lookRoad(item)"> + <view class="button-image">鍓ф瘨杩愯緭璇�</view> + </view> + <view class="forward" + @click.stop="yuYueBtnClick(item)"> + <view class="button-image">妫�鏌�</view> + </view> + </view> + </view> + </view> + </u-collapse-item> + </u-collapse> + <u-collapse + ref="myCollapse" + > + <u-collapse-item + name='2' + class="collItem" + :title="'宸叉鏌ュ徃鏈�'"> + <view style="position: relative;top: -40px;"> + <u-empty mode="data" + icon="http://cdn.uviewui.com/uview/empty/data.png" + textSize="30" + iconSize="1000" + text="鏆傛棤杞﹁締" + v-if="driverBillOfLoadingDatas.length == 0"></u-empty> + </view> + <view class="collection-form" style="margin-bottom: 60px;"> + <view class="collection-form-item" + v-for="(item, index) in driverBillOfLoadingDatas" + :key="index"> + <view class="first-line"> + <view class="dispatch-receive"> + <view class="dispatch-dept">{{ item.code || '' }}</view> + <view class="black-bar"></view> + <view class="dispatch">{{ item.customerName ||'' }}</view> + </view> + <view class="point-number"> + <text class="order-type">{{ item.productNames?limitString(item.productNames,20,'...'):'' || '' }}</text> + </view> + </view> + <view class="second-line"> + <view class="coal-name"> + <view class="dispatch-dept">{{ item.carNo || '' }}</view> + <view class="black-bar"></view> + <view class="dispatch">{{ item.driver ||'' }}</view> + <view class="black-bar"></view> + <text>{{ item.phone || '' }}</text> + </view> + </view> + <view class="third-line"> + <view class="time-icon"> + <view + style="width: 24rpx;height: 24rpx;line-height: 24rpx;background: url('https://wrzs.czjlchem.com:9090/appimg/image/banner/clock.png') no-repeat;background-size: cover"> + </view> + </view> + <view class="send-date">{{ item.inTime?item.inTime.slice(10,19):null }} </view> + </view> + <view class="fourth-line"> + <view class="receive" + v-if="item.roadTransportId" + @click.stop="lookRoad(item)"> + <view class="button-image">鍓ф瘨杩愯緭璇�</view> + </view> + </view> + </view> + </view> + </u-collapse-item> + </u-collapse> <u-popup :show="imgshow" @close="closeimg" @open="openimg" @@ -45,7 +132,7 @@ <view class="imgrPopup"> <u--image :showLoading="true" :src="certificateImg != null ? BaseUrl + certificateImg : ''" - width="700rpx" + width="100%" height="400rpx" @click="imageClick(certificateImg)"> <view slot="error" @@ -66,8 +153,8 @@ @close="previewImageClose" @open="previewImageOpen"> <u--image :src="previewImageSrc != null ? BaseUrl + previewImageSrc : ''" - width="400px" - height="400px"></u--image> + width="750rpx" + height="800rpx"></u--image> </u-popup> </view> <u-popup :show="show" @@ -117,13 +204,17 @@ <script> import { BaseUrl } from '@/api/publicInterface.js'; + import combinedTitle from '@/components/combined-title/combined-title.vue'; + import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; export default { components: { + previewImage, }, data() { return { show: false, // 寮瑰嚭鍏ㄩ儴棰嗗彇鎻愮ず driverBillOfLoadingData:[], + driverBillOfLoadingDatas:[], inspectData:[], isAllSelected:false, form:{}, @@ -145,6 +236,26 @@ this.init(); }, methods: { + handleOpenChange() { + // 鏂规硶涓� + console.log(this.$refs.collapseHeight); + // let long = this.$refs.collapseHeight.length; + // setTimeout(() => { + // for (let i = 0; i < long; i++) { + // this.$refs.collapseHeight[i].queryRect();// 璁$畻楂樺害 + // } + // }, 20); + + // 鏂规硶浜� + this.$nextTick(() => { + this.$refs.collapseHeight.init() + }); + + }, + limitString(str, limit, suffix = '...') { + if (str.length <= limit) return str; + return str.slice(0, limit) + suffix; + }, falseConfirm(){ this.inspectData=[] uni.showLoading({ title: '鍔犺浇涓�...' }); @@ -292,20 +403,36 @@ uni.showLoading({ title: '鍔犺浇涓�...' }); - if(!this.carNo){ this.$reqGet('getCheckTaskCoal',{flag:0}).then(res => { uni.hideLoading(); this.driverBillOfLoadingData = res.data; + uni.stopPullDownRefresh(); + this.handleOpenChange(); }); }else{ this.$reqGet('getCheckTaskCoal',{flag:0,carNo:this.carNo}).then(res => { uni.hideLoading(); this.driverBillOfLoadingData = res.data; + uni.stopPullDownRefresh(); + this.handleOpenChange(); }); } - - + if(!this.carNo){ + this.$reqGet('getAlreadyCheckTaskCoal',{flag:0}).then(res => { + uni.hideLoading(); + this.driverBillOfLoadingDatas = res.data; + uni.stopPullDownRefresh(); + this.handleOpenChange(); + }); + }else{ + this.$reqGet('getAlreadyCheckTaskCoal',{flag:0,carNo:this.carNo}).then(res => { + uni.hideLoading(); + this.driverBillOfLoadingDatas = res.data; + uni.stopPullDownRefresh(); + this.handleOpenChange(); + }); + } }, change(res) { }, @@ -324,13 +451,13 @@ <style lang="scss" scoped> .searchview{ margin: 20rpx 0; - height: 200rpx; + height: 100rpx; u-search{ width: 100rpx; } } .imgrPopup{ - width: 700rpx; + width: 80vw; background-color: #ffffff; .driveruser{ display: flex; @@ -338,10 +465,11 @@ } } .receiverPopup { - height: vww(110); - width: 300rpx; + height: vww(153); + width: 60vw; .receiverPopup__title { + font-size: 1.4vw; margin: vww(10) auto 0; width: 80%; text-align: center; @@ -357,6 +485,19 @@ } } } + /deep/.u-button { + width: 100%; + height: 28px !important; + line-height: 40px; + padding: 0 12px; + font-size: 28rpx; + font-weight: 300; + color: #ffffff; + background: #497bfb !important; + letter-spacing: 4rpx; + border-radius: 37rpx 37rpx 37rpx 37rpx !important; + box-shadow: 2rpx 3rpx 13rpx 0rpx rgba(43, 98, 239, 0.5), 0rpx 0rpx 9rpx 0rpx rgba(247, 250, 253, 0.29); + } ::v-deep.appointment { .appointment-description { margin: vww(8) 0; @@ -369,32 +510,7 @@ color: #252525; } } - @mixin fourthLine { - width: 64%; - height: vww(68); - display: flex; - align-items: center; - position: relative; - left: vww(102); - bottom: vww(3); - .button-img { - width: vww(122); - height: vww(41); - background: url('https://mx.jzeg.cn:9096/appimg/image/banner/button.png') no-repeat; - background-size: cover; - font-size: 28rpx; - font-weight: 300; - color: #ffffff; - text-align: center; - line-height: vww(40); - - } - } - .fourth-line { - @include fourthLine; - } - // 琛ㄦ牸 .uni-table-scroll { width: 100%; @@ -402,25 +518,29 @@ .uni-table { min-width: 0 !important; - + .checkbox { + background: #ffffff; + } .uni-table-tr { padding: 0; - font-size: vww(10); .uni-table-th { height: vww(32); line-height: vww(20); padding: vww(5) vww(10); color: #111111; + font-size: 2vw; font-weight: 550; - background: #f5f5f5; + background: #ffffff; } .uni-table-td { height: vww(32); line-height: vww(20); padding: vww(5) vww(5); + font-size: 1.5vw; color: #111111; + background: #ffffff; .u-button { height: vww(23); } @@ -434,11 +554,186 @@ position: relative; top: vww(-120); } - .buttons{ + @mixin flex { display: flex; justify-content: space-between; - .buttonitem{ - width: 30%; - } + align-items: center; } + .collection-form-item { + margin: 0 vww(15); + width: 95%; + height: 370rpx; + background: #ffffff; + box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15); + border-radius: 20rpx; + overflow: hidden; + @include flex; + flex-direction: column; + position: relative; + align-items: flex-start; + margin-top: vww(10); + + .first-line { + width: 94%; + height: vww(30); + margin: vww(10) vww(16) 0 vww(16); + display: flex; + justify-content: space-between; + + + .dispatch-receive { + width: 70%; + display: flex; + justify-content: flex-start; + align-items: center; + + .dispatch-dept { + + display: flex; + align-items: center; + } + + .black-bar { + width: 2rpx; + height: 30rpx; + background: #515151; + margin-left: vww(12); + } + + .dispatch { + margin-left: vww(12); + min-width: vww(50); + } + + } + + .point-number { + width: 33%; + .order-type { + color: #035cfb; + border-radius: 4rpx; + text-align: center; + } + // text { + // font-size: 24rpx; + // font-weight: 400; + // color: #c78a64; + // } + + // .residue { + // font-size: 40rpx; + // font-weight: 400; + // color: #f81414; + // } + } + } + + .second-line { + width: 100%; + height: vww(30); + margin-left: vww(16); + display: flex; + align-items: center; + justify-content: flex-start; + + .coal-name { + flex-grow: 1; + height: 30rpx; + font-size: 30rpx; + font-weight: 300; + color: #515151; + position: relative; + display: flex; + align-items: center; + + .black-bar { + width: 2rpx; + height: 30rpx; + background: #515151; + margin: 0 vww(12) ; + } + + .coal-type { + margin-left: vww(12); + min-width: vww(50); + height: 30rpx; + line-height: 30rpx; + font-size: 30rpx; + font-weight: 300; + color: #515151; + } + } + } + + .third-line { + height: vww(30); + margin-left: vww(15); + display: flex; + justify-content: flex-start; + align-items: center; + + .send-date { + margin-left: vww(14); + height: 24rpx; + line-height: 24rpx; + font-size: 28rpx; + font-weight: 300; + color: #515151; + } + } + .fourth-line { + width: 100%; + height: vww(30); + @include flex; + justify-content: flex-start; + position: relative; + bottom: vww(10); + left: 30%; + + .receive, + .forward { + width: vww(123); + height: vww(48); + @include flex; + justify-content: center; + color: #ffffff; + font-size: 28rpx; + position: absolute; + + .button-image { + width: 100%; + height: 100%; + background: url('../../../static/image/banner/button.png') no-repeat; + background-size: cover; + font-size: 28rpx; + font-weight: 300; + color: #ffffff; + text-align: center; + line-height: vww(45); + } + } + + .receive { + left: vww(20); + } + + .forward { + width: vww(106); + left: vww(140); + + .button-image { + width: 100%; + height: 100%; + background: url('../../../static/image/banner/transpartent.png') no-repeat; + background-size: cover; + font-size: 28rpx; + font-weight: 300; + color: #3b56eb; + text-align: center; + line-height: vww(45); + } + } + } + + } </style> \ No newline at end of file -- Gitblit v1.9.1