From 9579955eecf9584697c546eae6ba90fb33795e40 Mon Sep 17 00:00:00 2001 From: qingyiay <2386314947@qq.com> Date: 星期四, 29 六月 2023 18:18:23 +0800 Subject: [PATCH] 称重修改 --- pages/freight-forwarder-page/freightForwarder-index/freightForwarder-index.vue | 771 +++++++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 564 insertions(+), 207 deletions(-) diff --git a/pages/freight-forwarder-page/freightForwarder-index/freightForwarder-index.vue b/pages/freight-forwarder-page/freightForwarder-index/freightForwarder-index.vue index 9e48a5c..92084f9 100644 --- a/pages/freight-forwarder-page/freightForwarder-index/freightForwarder-index.vue +++ b/pages/freight-forwarder-page/freightForwarder-index/freightForwarder-index.vue @@ -1,238 +1,595 @@ <template> <view class="freightForwarder-index"> <view class="freightForwarder-index-body"> - <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" textSize="30" iconSize="1000" v-if="orderPlanData.length == 0"></u-empty> - <card v-for="(item, index) in orderPlanData" :key="index" :name="item.id" @click="cardBodyClick(item)" backgroundType="1"> - <template v-slot:left> - <view class="card-left__top"> - <text>{{ item.carNum }}</text> - 寮� - </view> - <view class="card-left__utils"><u-button text="杞彂" type="primary" @tap.stop="forwardClick(item)" shape="circle"></u-button></view> - </template> - <template v-slot:right-top> - <view class="right-top"> - <view class="card-right-top-row"> - <view> - <text>杞彂鍓╀綑锛歿{ item.carNumSurplusHuodai || 0 }}</text> + <view class="wait-collection" + style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/customerbanner.png') no-repeat;background-size:contain"> + </view> + <view style="position: relative;top: -120px;"> + <u-empty mode="data" + icon="http://cdn.uviewui.com/uview/empty/data.png" + textSize="30" + iconSize="1000" + v-if="orderPlanData.length == 0"></u-empty> + </view> + <view class="collection-form"> + <view class="collection-form-item" + v-for="(item, index) in orderPlanData" + :key="index" + @click="cardBodyClick(item)"> + <view class="first-line"> + <view class="main-information"> + <view class="sign">瑁�</view> + <view class="filedname exceedHide"> + <text + v-if="item.orderType == '澶栭攢' || item.orderType == '鍐呴攢' || item.orderType == '杞嚭'">{{ item.deptName }}</text> + <text + v-else-if="item.orderType == '澶栬喘' || item.orderType == '鍐呰喘' || item.orderType == '杞叆'">{{ item.customerName }}</text> </view> - <view> - <text>{{ item.coalName || '' }}</text> + </view> + <view class="main-divider"></view> + <view class="point-number"> + <text class="residue">{{ item.carNumSurplusHuodai || 0 }}</text> + <text>/{{ item.carNum }}</text> + </view> + </view> + <view class="first-extra"> + <view class="main-information"> + <view class="sign">鍗�</view> + <view class="filedname exceedHide"> + <text + v-if="item.orderType == '澶栭攢' || item.orderType == '鍐呴攢' || item.orderType == '杞嚭'">{{ item.customerName }}</text> + <text + v-else-if="item.orderType == '澶栬喘' || item.orderType == '鍐呰喘' || item.orderType == '杞叆'">{{ item.deptName }}</text> </view> </view> </view> - </template> - <template v-slot:right-bottom> - <view class="code"> - <text>缂栧彿锛歿{ item.orderCode || '' }}</text> + <view class="second-line"> + <view class="coal-name"> + <view class="">{{ item.coalName }}</view> + <view class="black-bar"></view> + <view class="coal-type" + v-if="item.orderType">{{ item.orderType }}</view> + </view> </view> - </template> - </card> - </view> - <view class="history-numbers"> - <combined-title title="鍘嗗彶鎻愮叅鍗�"></combined-title> - <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="historyScrolltolower"> - <uni-table border stripe emptyText="鏆傛棤鏇村鏁版嵁" :loading="loading"> - <uni-tr> - <uni-th width="100" align="center">鍙戣繍鏃ユ湡</uni-th> - <uni-th width="100" align="center">鎵�灞炲崟浣�</uni-th> - <uni-th align="center" width="150">鐓ゅ満鍚嶇О</uni-th> - <uni-th align="center" width="100">鐓ょ鍚嶇О</uni-th> - <uni-th align="center" width="150">璁㈠崟缂栧彿</uni-th> - <uni-th align="center" width="100">璁㈠崟鍓╀綑閲�</uni-th> - <uni-th align="center" width="80">鎻愮叅鍗曚釜鏁�</uni-th> - </uni-tr> - <uni-tr v-for="(item, index) in historyCoalData" :key="index"> - <uni-td align="center" @row-click="faYundetail(item)">{{ item.sendDate }}</uni-td> - <uni-td align="left" @row-click="faYundetail(item)">{{ item.deptName }}</uni-td> - <uni-td align="center" @row-click="faYundetail(item)">{{ item.filedName }}</uni-td> - <uni-td align="center" @row-click="faYundetail(item)">{{ item.coalName }}</uni-td> - <uni-td align="center" @row-click="faYundetail(item)">{{ item.orderCode }}</uni-td> - <uni-td align="center" @row-click="faYundetail(item)">{{ item.carNumSurplus }}</uni-td> - <uni-td align="center" @row-click="faYundetail(item)">{{ item.tmCount }}</uni-td> - </uni-tr> - </uni-table> - <view class="more_text" v-if="showMoreData && historyCoalData.length !== 0">娌℃湁鏁版嵁浜�...</view> - </scroll-view> + <view class="third-line"> + <view class="time-icon"> + <view + style="width: 24rpx;height: 24rpx;line-height: 24rpx;background: url('https://mx.jzeg.cn:9095/appimg/image/banner/clock.png') no-repeat;background-size: cover"> + </view> + </view> + <view class="send-date">{{ item.sendDate }}</view> + </view> + <view class="fourth-line"> + <view class="forward" + @click.stop="forwardClick(item)"> + <view class="button-image">杞彂</view> + </view> + </view> + </view> + </view> + <!-- <view class="transparent"> + <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" textSize="30" iconSize="1000" v-if="orderPlanData.length == 0"></u-empty> + </view> --> + <view class="history-numbers"> + <combined-title title="鍘嗗彶鎻愮叅鍗�"></combined-title> + <scroll-view :scroll-top="scrollTop" + scroll-y="true" + class="scroll-Y" + @scrolltolower="historyScrolltolower"> + <u-empty mode="data" + icon="http://cdn.uviewui.com/uview/empty/data.png" + textSize="30" + iconSize="1000" + v-if="historyCoalData.length === 0"></u-empty> + <view class="history-information" + v-for="(item, index) in historyCoalData" + :key="index" + @click="faYundetail(item)"> + <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" + v-if="item.orderType">{{ 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">{{ 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:9095/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:9095/appimg/image/banner/carnNUm.png') no-repeat;background-size: cover"> + </view> + </view> + <view class="senddate">{{ item.orderCode }}</view> + </view> + </view> + <view class="more_text" + v-if="showMoreData && historyCoalData.length !== 0">娌℃湁鏁版嵁浜�...</view> + <!-- <view class="white-block"></view> --> + </scroll-view> + </view> </view> </view> </template> <script> -import combinedTitle from '@/components/combined-title/combined-title.vue'; -export default { - props: { - indexHistoryCoalData: { - type: Array, - default: [] - }, - indexHuoDaiOrderPlanData: { - type: Array, - default: [] - } - }, - watch: { - indexHistoryCoalData: { - handler(v) { - this.historyCoalData = v; + import combinedTitle from '@/components/combined-title/combined-title.vue'; + export default { + props: { + indexHistoryCoalData: { + type: Array, + default: [] }, - deep: true, - immediate: true + indexHuoDaiOrderPlanData: { + type: Array, + default: [] + } }, - indexHuoDaiOrderPlanData: { - handler(v) { - this.orderPlanData = v; + watch: { + indexHistoryCoalData: { + handler(v) { + this.historyCoalData = v; + }, + deep: true, + immediate: true }, - deep: true, - immediate: true - } - }, - components: { - combinedTitle - }, - data() { - return { - orderPlanData: [], - historyCoalData: [], - // 琛ㄦ牸鍔犺浇鐘舵�� - loading: false, - scrollTop: 0, - // 姣忛〉鏁版嵁閲� - pageSize: 10, - // 褰撳墠椤� - pageCurrent: 1, - // 鏁版嵁鎬婚噺 - total: 0, - // 鏄惁鏄剧ず鏇村鏁版嵁 - showMoreData: false - }; - }, - onShow() { - this.init(); - }, - computed: { - huoDaiId() { - return uni.getStorageSync('userInfo').id; - } - }, - methods: { - // 鑾峰彇鍘嗗彶鎻愮叅鍗� - getJhOrderPlanDataPage() { - this.loading = true; - this.$reqGet('getJhOrderPlanDataPage', { current: this.pageCurrent, size: this.pageSize }).then(res => { - if (res.data.records) { - if (this.pageCurrent > 1) { - this.historyCoalData = this.historyCoalData.concat(res.data.records); - this.loading = false; - } else { - this.historyCoalData = res.data.records; - this.loading = false; + indexHuoDaiOrderPlanData: { + handler(v) { + this.orderPlanData = v; + }, + deep: true, + immediate: true + } + }, + components: { + combinedTitle + }, + data() { + return { + orderPlanData: [], + historyCoalData: [], + // 琛ㄦ牸鍔犺浇鐘舵�� + loading: false, + scrollTop: 0, + // 姣忛〉鏁版嵁閲� + pageSize: 10, + // 褰撳墠椤� + pageCurrent: 1, + // 鏁版嵁鎬婚噺 + total: 0, + // 鏄惁鏄剧ず鏇村鏁版嵁 + showMoreData: false + }; + }, + onShow() { + this.init(); + }, + computed: { + huoDaiId() { + return uni.getStorageSync('userInfo').id; + } + }, + methods: { + // 鑾峰彇鍘嗗彶鎻愮叅鍗� + getJhOrderPlanDataPage() { + uni.showLoading({ + title: '鍔犺浇涓�' + }); + this.$reqGet('getJhOrderPlanDataPage', { current: this.pageCurrent, size: this.pageSize }).then(res => { + if (res.data.records) { + if (this.pageCurrent > 1) { + this.historyCoalData = this.historyCoalData.concat(res.data.records); + this.historyCoalData = this.ArrSet(this.historyCoalData, 'id'); + uni.hideLoading(); + } else { + this.historyCoalData = res.data.records; + uni.hideLoading(); + } } - } - }); - }, - // 涓婃媺鍔犺浇 - historyScrolltolower() { - if (this.pageCurrent * this.pageSize >= this.total) return (this.showMoreData = true); - this.pageCurrent++; - this.getJhOrderPlanDataPage(); - }, - init() { - this.huoDaiList(); - this.getJhOrderPlanDataPage(); - }, - huoDaiList() { - this.$reqGet('huoDaiList').then(res => { - this.orderPlanData = res.data; - }); - }, - cardBodyClick(item) { - // let code = null; - // this.orderPlanData.forEach(item => { - // if (item.orderPlanId == id) { - // code = item.code; - // id = item.orderPlanId; - // } - // }); - uni.navigateTo({ - url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${item.orderPlanId}&code=${item.code}` - }); - }, - // 杞彂 - forwardClick(value) { - uni.navigateTo({ - url: `/pages/public-page/forward/forward?orderPlanId=${value.orderPlanId}&carNumSurplusHuodai=${value.carNumSurplusHuodai}&carNum=${value.carNum}` - }); - }, - // 鐐瑰嚮鍘嗗彶鎻愮叅鍗曚竴琛岃幏鍙栬鎯� - faYundetail(v) { - uni.navigateTo({ - url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${v.id}&cars2=${v.cars2}` - }); + }); + }, + // 涓婃媺鍔犺浇 + historyScrolltolower() { + if (this.pageCurrent * this.pageSize >= this.total) return (this.showMoreData = true); + this.pageCurrent++; + this.getJhOrderPlanDataPage(); + }, + //fix 鐐瑰嚮鎻愮叅鍗曡繑鍥炰細澧炲姞閲嶅鏁版嵁 + ArrSet(Arr, id) { + var obj = {}; + const arrays = Arr.reduce((setArr, item) => { + obj[item[id]] ? '' : (obj[item[id]] = true && setArr.push(item)); + return setArr; + }, []); + return arrays; + }, + init() { + this.huoDaiList(); + this.getJhOrderPlanDataPage(); + }, + huoDaiList() { + this.$reqGet('huoDaiList').then(res => { + this.orderPlanData = res.data; + }); + }, + cardBodyClick(item) { + // let code = null; + // this.orderPlanData.forEach(item => { + // if (item.orderPlanId == id) { + // code = item.code; + // id = item.orderPlanId; + // } + // }); + uni.navigateTo({ + url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${item.orderPlanId}&carNum=${item.carNum}` + }); + }, + // 杞彂 + forwardClick(value) { + uni.navigateTo({ + url: `/pages/public-page/forward/forward?orderPlanId=${value.orderPlanId}&carNumSurplusHuodai=${value.carNumSurplusHuodai}&carNum=${value.carNum}` + }); + }, + // 鐐瑰嚮鍘嗗彶鎻愮叅鍗曚竴琛岃幏鍙栬鎯� + faYundetail(v) { + uni.navigateTo({ + url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${v.id}&cars2=${v.cars2}` + }); + } } - } -}; + }; </script> -<style lang="scss" scoped> -.scroll-Y { - height: 600rpx; - margin-bottom: vww(50); - .more_text { - color: #999; - font-size: 24rpx; - text-align: center; +<style lang="scss" + scoped> + @mixin flex { + display: flex; + justify-content: space-between; + align-items: center; } -} -::v-deep.freightForwarder-index { - width: 94%; - margin: 0 auto; - // 涓讳綋 - .freightForwarder-index-body { - margin-bottom: vww(10); - // 鍗$墖鏍峰紡 - .card-left__top { - margin-top: vww(26); + @mixin firstLine { + width: 94%; + height: vww(68); + margin: vww(18) vww(16) 0 vww(16); + display: flex; + justify-content: space-between; + } + + .scroll-Y { + height: 900rpx; + + .more_text { + color: #333; + font-size: 24rpx; text-align: center; - color: #ffffff; - text { - font-size: vww(48); - font-weight: 800; + } + } + + .history-numbers { + width: 100%; + position: relative; + top: vww(-110); + + .history-information { + width: 690rpx; + height: 398rpx; + margin: vww(10) vww(15); + 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; + align-items: flex-start; + justify-content: space-evenly; + overflow: hidden; + + .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(30); + height: vww(20); + margin-right: vww(21); + } + + .order-type { + 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: 50%; + 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; + } } } - .card-left__utils { - display: flex; - padding: 0 vww(15) 0 vww(15); - .u-button { - width: vww(55); - height: vww(24); - background-color: #fff; - color: #1987ff; + } + + .exceedHide { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + ::v-deep.freightForwarder-index { + width: 100%; + margin: 0 auto; + + // 涓讳綋 + .freightForwarder-index-body { + .wait-collection { + width: 100%; + height: 600rpx; + position: relative; + top: vww(-10); + z-index: 0; } - } - .right-top { - display: flex; - flex-flow: column nowrap; - align-content: space-around; - .card-right-top-row { - margin-top: vww(26); - text-align: center; - &:nth-child(1) { - display: flex; - justify-content: space-between; - view { - text-align: center; - width: 50%; + + .collection-form { + width: vww(345); + margin: 0 vww(15); + position: relative; + top: vww(-144); + + .collection-form-item { + width: 690rpx; + height: 340rpx; + 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; + + .main-information { + width: 88%; + height: vww(28); + display: flex; + justify-content: flex-start; + align-items: center; + + .sign { + width: vww(28); + height: vww(28); + line-height: vww(28); + text-align: center; + background: url('https://mx.jzeg.cn:9095/appimg/image/banner/blueblock.png') no-repeat; + background-size: contain; + font-size: 30rpx; + font-weight: 400; + color: #ffffff; + margin-right: vww(20); + } + } + + .main-divider { + width: 560rpx; + height: 1rpx; + background: #e3e3e3; + position: absolute; + top: 98rpx; + left: 122rpx; + } + + .point-number { + position: absolute; + right: 0; + width: 15%; + + text { + font-size: 24rpx; + font-weight: 400; + color: #c78a64; + } + + .residue { + font-size: 40rpx; + font-weight: 400; + color: #f81414; + } + } + } + + .first-extra { + @include firstLine; + + .main-information { + width: 100%; + height: vww(28); + display: flex; + justify-content: flex-start; + align-items: center; + + .sign { + width: vww(28); + height: vww(28); + line-height: vww(28); + text-align: center; + background: url('https://mx.jzeg.cn:9095/appimg/image/banner/redblock.png') no-repeat; + background-size: contain; + font-size: 30rpx; + font-weight: 400; + color: #ffffff; + margin-right: vww(20); + } + } + } + + .second-line { + width: 100%; + height: vww(40); + margin-left: vww(18); + display: flex; + justify-content: flex-start; + align-items: center; + + .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-left: 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 { + width: 40%; + height: vww(50); + margin-left: vww(18); + display: flex; + justify-content: flex-start; + align-items: center; + + .send-date { + width: 148rpx; + height: 24rpx; + margin-left: vww(14); + line-height: 24rpx; + font-size: 28rpx; + font-weight: 300; + color: #515151; + } + } + + .fourth-line { + width: 40%; + height: vww(30); + @include flex; + position: relative; + left: 60%; + bottom: vww(10); + + .forward { + width: vww(123); + height: vww(48); + left: vww(140); + + .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: #fff; + text-align: center; + line-height: vww(45); + } + } } } } } - - .code { - margin-top: vww(2); - text-align: center; - } } -} -</style> +</style> \ No newline at end of file -- Gitblit v1.9.1