From c4aef9b623635d49cf87308bfb874f4141c9d448 Mon Sep 17 00:00:00 2001 From: wk Date: 星期四, 25 七月 2024 10:00:32 +0800 Subject: [PATCH] feat:门卫样式 --- pages/doorkeeper-page/doorkeeper-index/doorkeeper-index.vue | 305 ++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 240 insertions(+), 65 deletions(-) diff --git a/pages/doorkeeper-page/doorkeeper-index/doorkeeper-index.vue b/pages/doorkeeper-page/doorkeeper-index/doorkeeper-index.vue index b61db08..7a6ab68 100644 --- a/pages/doorkeeper-page/doorkeeper-index/doorkeeper-index.vue +++ b/pages/doorkeeper-page/doorkeeper-index/doorkeeper-index.vue @@ -1,42 +1,61 @@ <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> + <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 || '' }}</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;li ne-height: 24rpx;background: url('https://mx.jzeg.cn:9096/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-popup :show="imgshow" @close="closeimg" @open="openimg" @@ -66,8 +85,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,8 +136,10 @@ <script> import { BaseUrl } from '@/api/publicInterface.js'; + import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'; export default { components: { + previewImage, }, data() { return { @@ -297,11 +318,13 @@ this.$reqGet('getCheckTaskCoal',{flag:0}).then(res => { uni.hideLoading(); this.driverBillOfLoadingData = res.data; + uni.stopPullDownRefresh(); }); }else{ this.$reqGet('getCheckTaskCoal',{flag:0,carNo:this.carNo}).then(res => { uni.hideLoading(); this.driverBillOfLoadingData = res.data; + uni.stopPullDownRefresh(); }); } @@ -324,7 +347,7 @@ <style lang="scss" scoped> .searchview{ margin: 20rpx 0; - height: 200rpx; + height: 100rpx; u-search{ width: 100rpx; } @@ -369,32 +392,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%; @@ -434,11 +432,188 @@ 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: 690rpx; + 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: 15%; + .order-type { + color: #035cfb; + border: 2px solid #035cfb; + border-radius: 4rpx; + padding: vww(2) vww(4); + 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: 25%; + + .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