From ae1aad66a165ee7253bed2127a3b53baa40c2361 Mon Sep 17 00:00:00 2001 From: qingyiay <2386314947@qq.com> Date: 星期三, 17 五月 2023 08:35:33 +0800 Subject: [PATCH] 修复错误,增加验证 --- pages/driver-page/driver-index/driver-index.vue | 731 +++++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 511 insertions(+), 220 deletions(-) diff --git a/pages/driver-page/driver-index/driver-index.vue b/pages/driver-page/driver-index/driver-index.vue index f45b708..65ca4f9 100644 --- a/pages/driver-page/driver-index/driver-index.vue +++ b/pages/driver-page/driver-index/driver-index.vue @@ -1,125 +1,154 @@ <template> - <view class="driver-index"> - <view class="driver-index-body"> - <!-- 寰呴鍙栨彁鐓ゅ崟 --> - <combined-title title="寰呴鍙�"></combined-title> - <u-empty - mode="data" - icon="http://cdn.uviewui.com/uview/empty/data.png" - textSize="30" - iconSize="1000" - v-if="driverBillOfLoadingData.list1 ? (driverBillOfLoadingData.list1.length == 0 ? true : false) : true" - ></u-empty> - <card v-for="(item, index) in driverBillOfLoadingData.list1" :key="index" :name="item.id" backgroundType="2"> - <template v-slot:left> - <view class="card-left__top"> - <text>{{ item.carNum }}</text> - 寮� - </view> - <view class="card-left__utils"><u-button @tap.stop="qiangDanBtn(item)" text="鎶㈠崟" type="primary" shape="circle"></u-button></view> - </template> - <template v-slot:right-top> - <view class="right-top"> - <view class="card-right-top-row"> - <view> - <text>{{ item.deptName || '' }}</text> + <view class=""> + <view class="driver-index"> + <view class="driver-index-body"> + <!-- 寰呴鍙栨彁鐓ゅ崟 --> + <view class="wait-collection" style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/diverbanner.png') no-repeat;background-size:contain"></view> + <view class="collection-form"> + <view class="collection-form-item" v-for="(item, index) in driverBillOfLoadingData.list1" :key="index"> + <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.customerNameCopy }}</text> + </view> </view> - <view> - <text>{{ item.coalName || '' }}</text> + <view class="main-divider"></view> + <view class="point-number"> + <text class="residue">{{ item.carNum - item.taskNum }}</text> + <text>/{{ item.carNum }}</text> </view> </view> - <view class="card-right-top-row"> - <view> - <text>鍓╀綑{{ item.carNum - item.taskNum }}寮�</text> + <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.customerNameCopy ? item.customerNameCopy : item.customerName }} + </text> + <text v-else-if="item.orderType == '澶栬喘' || item.orderType == '鍐呰喘' || item.orderType == '杞叆'">{{ item.deptName }}</text> + </view> </view> </view> - <view class="card-right-top-row"> - <view> - <text>{{ item.filedName || '' }}</text> - </view> + <view class="second-line"> + <view class="coal-name">{{ item.coalName }}</view> </view> - <view class="card-right-top-row"> - <view> - <text>{{ item.orderCode || '' }}</text> - </view> + <view class="third-line"> + <view class="time-icon"><u-icon name="clock" color="#515151" size="40"></u-icon></view> + <view class="send-date">{{ item.sendDate }}</view> </view> + <view class="fourth-line" @click="qiangDanBtn(item)" v-if="item.carNum - item.taskNum !== 0"><view class="button-img">绔嬪嵆鎶㈠崟</view></view> </view> - </template> - </card> - - <!-- 鎶㈠崟鎻愮ず妯℃�佹 --> - <view class="qianDanModel"> - <u-modal :show="qiangDanShow" :title="qiangDanTitle" showCancelButton :content="qiangDanContent" @confirm="qiangDanConfirm" @cancel="qiangDanCancel"></u-modal> - </view> - - <!-- 寰呴绾︽彁鐓ゅ崟 --> - <combined-title title="寰呴绾︽彁鐓ゅ崟"></combined-title> - <u-empty - mode="data" - icon="http://cdn.uviewui.com/uview/empty/data.png" - textSize="30" - iconSize="1000" - v-if="driverBillOfLoadingData.list3 ? (driverBillOfLoadingData.list3.length == 0 ? true : false) : true" - ></u-empty> - <view> - <!-- 寰呴绾︽彁鐓ゅ崟 --> - <view class="daiYuYue" v-for="(item, index) in driverBillOfLoadingData.list3" :key="index"> - <view class="daiYuYueTop"> - <text class="tmcode">鎻愮叅鍗曠紪鍙凤細{{ item.code }}</text> - </view> - <view class="daiYuYueTable"> - <!-- <view>{{ item.deptName }}</view> - <view>{{ item.coalName }}</view> - <view>宸查绾︼細{{ item.cars }} 杞�</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-tr> - <uni-tr> - <uni-td align="left">{{ item.deptName || '' }}</uni-td> - <uni-td align="left">{{ item.coalName || '' }}</uni-td> - <uni-td align="left">{{ item.cars || 0 }} 杞︽</uni-td> - </uni-tr> - <uni-tr> - <uni-th align="center">鍙戣繍鏃ユ湡</uni-th> - <uni-th align="center">鐓ゅ満</uni-th> - <uni-th align="center">瀹㈡埛</uni-th> - </uni-tr> - <uni-tr> - <uni-td align="left">{{ item.sendDate || '' }}</uni-td> - <uni-td align="left">{{ item.filedName || '' }}</uni-td> - <uni-td align="left">{{ item.customerName || '' }}</uni-td> - </uni-tr> - </uni-table> - </view> - <view><u-button text="棰勭害" type="primary" @click="toAppointmentClick(item)"></u-button></view> </view> - </view> + <!-- 鎶㈠崟鎻愮ず妯℃�佹 --> + <view class="qianDanModel"> + <u-modal :show="qiangDanShow" :title="qiangDanTitle" showCancelButton :content="qiangDanContent" @confirm="qiangDanConfirm" @cancel="qiangDanCancel"></u-modal> + </view> - <!-- 宸查绾︽彁鐓ゅ崟 --> - <combined-title title="宸查绾︽彁鐓ゅ崟"></combined-title> - <u-empty - mode="data" - icon="http://cdn.uviewui.com/uview/empty/data.png" - textSize="30" - iconSize="1000" - v-if="driverBillOfLoadingData.list2 ? (driverBillOfLoadingData.list2.length == 0 ? true : false) : true" - ></u-empty> - <view class=""> - <view @click="list3CardIconClick(item)" class="haveYuYue" v-for="(item, index) in driverBillOfLoadingData.list2" :key="index"> - <view class="haveYuYueTop"> - <text class="tmcode">鎻愮叅鍗曠紪鍙凤細{{ item.code || '' }}</text> + <!-- 寰呴绾︽彁鐓ゅ崟 --> + <view class="wait-appointment"> + <combined-title title="寰呴绾︽彁鐓ゅ崟"></combined-title> + <u-empty + mode="data" + icon="http://cdn.uviewui.com/uview/empty/data.png" + textSize="30" + iconSize="1000" + v-if="driverBillOfLoadingData.list3 ? (driverBillOfLoadingData.list3.length == 0 ? true : false) : true" + ></u-empty> + + <view class="appointment-form"> + <view class="appointment-form-item" v-for="(item, index) in driverBillOfLoadingData.list3" :key="index"> + <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> + <view class="main-divider"></view> + <view class="map-icon" @click.stop="skipMap(item)"> + <view><u-icon name="map" color="#4978F0" size="40"></u-icon></view> + </view> + </view> + <view class="second-line"> + <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 class="map-icon" @click.stop="skipMap(item)"> + <view><u-icon name="map" color="#4978F0" size="40"></u-icon></view> + </view> + </view> + <view class="third-line"> + <view class="clock"> + <view class="time-icon"><u-icon name="clock" color="#515151" size="40"></u-icon></view> + <view class="send-date">{{ item.sendDate }}</view> + </view> + <view class="type"> + <view class="coal-name">{{ item.coalName }}</view> + <!-- <view class="order-type">{{ item.orderType }}</view> --> + </view> + </view> + <view class="fourth-line" @click="toAppointmentClick(item)"><view class="button-img">绔嬪嵆棰勭害</view></view> + </view> </view> - <view class="haveYuYueCenter"> - <view>{{ item.deptName || '' }}</view> - <view>{{ item.coalName || '' }}</view> - <view>鎺掗槦鏁帮細鏆傛棤{{}}</view> + </view> + + <!-- 宸查绾︽彁鐓ゅ崟 --> + <view class="Reserved"> + <combined-title title="宸查绾︽彁鐓ゅ崟"></combined-title> + <u-empty + mode="data" + icon="http://cdn.uviewui.com/uview/empty/data.png" + textSize="30" + iconSize="1000" + v-if="driverBillOfLoadingData.list2 ? (driverBillOfLoadingData.list2.length == 0 ? true : false) : true" + ></u-empty> + <view class="appointment-form"> + <view class="appointment-form-item" v-for="(item, index) in driverBillOfLoadingData.list2" :key="index" @click="list3CardIconClick(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> + <view class="main-divider"></view> + <view class="map-icon" @click.stop="skipMap(item)"> + <view><u-icon name="map" color="#4978F0" size="40"></u-icon></view> + </view> + </view> + <view class="second-line"> + <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 class="map-icon" @click.stop="skipMap(item)"> + <view><u-icon name="map" color="#4978F0" size="40"></u-icon></view> + </view> + </view> + <view class="third-line"> + <view class="clock havedclock"> + <view class="time-icon"><u-icon name="clock" color="#515151" size="40"></u-icon></view> + <view class="send-date">{{ item.yuYueSection }}</view> + </view> + <view class="type"> + <view class="coal-name">{{ item.coalName }}</view> + <!-- <view class="order-type">{{ item.orderType }}</view> --> + </view> + </view> + </view> </view> - <view class="haveYuYueBottom"> - <text>{{ item.yuYueTime || '鏃舵' }}</text> - </view> + <view class="white-block"></view> </view> </view> </view> @@ -128,8 +157,12 @@ <script> import { customerId } from '@/utils/status'; +import combinedTitle from '@/components/combined-title/combined-title.vue'; export default { + components: { + combinedTitle + }, props: { indexdriverBillOfLoadingData: { type: Object, @@ -139,7 +172,6 @@ watch: { indexdriverBillOfLoadingData: { handler(v) { - console.log(v, '鍒锋柊涔嬪悗鐨勫徃鏈洪椤�'); this.driverBillOfLoadingData = v; }, deep: true, @@ -148,7 +180,11 @@ }, data() { return { - driverBillOfLoadingData: {}, + driverBillOfLoadingData: { + list1: [], + list2: [], + list3: [] + }, // 鎶㈠崟妯℃�佹 qiangDanShow: false, qiangDanTitle: '鎶㈠崟鎻愮ず', @@ -163,6 +199,14 @@ this.init(); }, methods: { + // 璺宠浆鍦板浘 + skipMap(val) { + uni.navigateTo({ + url: `/pages/public-page/mapRoute/mapRoute?customerId=${val.customerId}&filedId=${val.filedId}&orderType=${val.orderType}${ + val.toFiledId ? `&toFiledId=${val.toFiledId}&filedId=${val.filedId}` : '' + }` + }); + }, init() { this.qiangDanList(); }, @@ -172,7 +216,6 @@ title: '鍔犺浇涓�...' }); this.$reqGet('qiangDanList').then(res => { - console.log(res, '鍙告満棣栭〉'); uni.hideLoading(); this.driverBillOfLoadingData = res.data; }); @@ -206,7 +249,7 @@ if (res.code == 0) { this.$u.toast('鎶㈠崟鎴愬姛'); } else { - this.$u.toast(res.data ? res.data : '鎶㈠崟澶辫触'); + this.$u.toast(res.msg ? res.msg : '鎶㈠崟澶辫触'); } }) .then(() => { @@ -237,133 +280,381 @@ </script> <style lang="scss" scoped> -::v-deep.driver-index { +@mixin formItem { + width: vww(345); + height: vww(150); + margin-top: vww(5); + background: #ffffff; + box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15); + border-radius: 20rpx; + position: relative; + display: flex; + flex-direction: column; + justify-content: space-around; +} +@mixin firstLine { width: 94%; + height: vww(68); + margin: vww(18) vww(16) 0 vww(16); + display: flex; + justify-content: space-between; +} +@mixin thirdLine { + width: 30%; + height: vww(68); + margin-left: vww(15); + display: flex; + justify-content: space-between; + align-items: center; + .send-date { + width: 148rpx; + height: 24rpx; + line-height: 24rpx; + font-size: 28rpx; + font-weight: 300; + color: #515151; + } + .havedclock { + width: 58% !important; + margin-right: 0 !important; + .send-date { + width: 100%; + margin-left: vww(12); + } + } +} +@mixin flex { + display: flex; + justify-content: space-between; + align-items: center; +} +@mixin fourthLine { + width: 34%; + height: vww(68); + display: flex; + align-items: center; + position: relative; + left: vww(203); + bottom: vww(3); + .button-img { + width: 100%; + height: 100%; + background: url('https://mx.jzeg.cn:9095/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); + } +} +.exceedHide { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +::v-deep.driver-index { + width: 100%; margin: 0 auto; // 涓讳綋 .driver-index-body { - margin-bottom: vww(56); - // 鍗$墖鏍峰紡 - .card-left__top { - margin-top: vww(26); - text-align: center; - color: #ffffff; - text { - font-size: vww(48); - font-weight: 800; - } + // margin-bottom: vww(56); + // 寰呴鍙栨彁鐓ゅ崟 + .wait-collection { + width: 100%; + height: 600rpx; } - .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; - } - } - .right-top { - display: flex; - flex-flow: column nowrap; - align-content: space-around; - .card-right-top-row { - margin-top: vww(8); - text-align: center; - &:nth-child(1) { + .collection-form { + width: vww(345); + margin: 0 vww(15); + position: relative; + top: vww(-120); + .collection-form-item { + width: vww(345); + height: vww(185); + margin-top: vww(5); + background: #ffffff; + box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15); + border-radius: 20rpx; + position: relative; + display: flex; + flex-direction: column; + justify-content: space-around; + .first-line { + width: 94%; + height: vww(68); + margin: vww(18) vww(16) 0 vww(16); display: flex; justify-content: space-between; - view { + .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: 548rpx; + height: 1rpx; + background: #e3e3e3; + position: absolute; + top: 115rpx; + left: vww(50); + } + .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(68); + margin-left: vww(21); + display: flex; + justify-content: flex-start; + align-items: center; + .coal-name { + min-width: vww(50); + height: 35rpx; + font-size: 30rpx; + font-weight: 300; + color: #515151; + position: relative; + display: flex; + justify-content: flex-start; + } + .black-block { + min-width: vww(50); + height: 30rpx; + font-size: 30rpx; + font-weight: 300; + color: #515151; + position: relative; + top: vww(2); + display: flex; + justify-content: center; + align-items: center; + .black-bar { + width: 2rpx; + height: 30rpx; + background: #515151; + } + } + .coal-type { + min-width: vww(50); + height: 30rpx; + font-size: 30rpx; + font-weight: 300; + color: #515151; text-align: center; - width: 50%; + } + } + .third-line { + width: 100%; + height: vww(68); + margin-left: vww(21); + 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: 30%; + height: vww(68); + margin-left: vww(15); + display: flex; + justify-content: flex-end; + position: relative; + left: vww(190); + bottom: vww(10); + .button-img { + width: 100%; + height: 100%; + background: url('https://mx.jzeg.cn:9095/appimg/image/banner/button.png') no-repeat; + background-size: cover; + font-size: 28rpx; + font-weight: 300; + color: #ffffff; + text-align: center; + line-height: vww(33); } } } } + .wait-appointment, + .Reserved { + position: relative; + top: vww(-120); + } + .appointment-form { + width: vww(345); + margin: 0 vww(15); + .appointment-form-item { + @include formItem; + height: vww(191); + justify-content: space-between; + .first-line { + position: relative; + @include firstLine; + .main-information { + width: 100%; + height: vww(28); + display: flex; + justify-content: flex-start; + align-items: center; - // 寰呴绾� - .daiYuYue { - margin-top: vww(24); - font-size: 16px; - font-weight: 300; - &Top { - background-color: #f5f5f5; - height: vww(60); - padding-left: vww(12); - line-height: vww(40); - border: vww(1) solid #eeeeee; - font-weight: 400; - // .tmcode { - // overflow: hidden; - // text-overflow: ellipsis; - // white-space: nowrap; - // width: 100%; - // } - } - &Table { - .uni-table { - min-width: 94% !important; - .uni-table-tr { - padding: 0; - .uni-table-th { - width: 33.3%; - line-height: 58rpx; - padding: vww(5) vww(10); - color: #111111; + .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; - background: #f5f5f5; - } - .uni-table-td { - font-weight: 400; - line-height: 58rpx; - padding: vww(5) vww(10); - color: #111111; + color: #ffffff; + margin-right: vww(20); } } + .main-divider { + width: 548rpx; + height: 1rpx; + background: #e3e3e3; + position: absolute; + top: vww(40); + left: vww(50); + } + } + .second-line { + @include firstLine; + margin: 0; + margin-left: vww(16); + .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); + } + } + } + .third-line { + @include thirdLine; + width: 94%; + justify-content: flex-start; + margin-left: vww(18); + .clock { + width: 33%; + height: vww(21); + margin-right: vww(70); + line-height: vww(21); + @include flex; + justify-content: flex-start; + .send-date { + margin-left: vww(14); + } + } + .type { + flex: 1; + margin-right: vww(10); + display: flex; + justify-content: center; + align-items: center; + .order-type, + .coal-name { + width: 120rpx; + height: 42rpx; + line-height: 42rpx; + border: 2px solid #035cfb; + border-radius: 4rpx; + font-size: 28rpx; + font-weight: 300; + color: #035cfb; + text-align: center; + padding: vww(3) vww(11); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + .fourth-line { + @include fourthLine; } } } - // 宸查绾� - .haveYuYue { - font-size: 16px; - font-weight: 300; - margin-top: vww(24); - &Top { - background-color: #f5f5f5; - height: vww(60); - padding-left: vww(12); - line-height: vww(40); - border: vww(1) solid #eeeeee; - font-weight: 400; - // .tmcode { - // overflow: hidden; - // text-overflow: ellipsis; - // white-space: nowrap; - // width: 100%; - // } - } - &Center { - border: vww(1) solid #eeeeee; - border-top: none; - display: flex; - flex: 1; - height: vww(40); - line-height: vww(40); - view { - border-right: vww(1) solid #eeeeee; - width: 33.3%; - text-align: center; - &:nth-child(3) { - border-right: none; - } - } - } - &Bottom { - border: vww(1) solid #eeeeee; - border-top: none; - height: vww(40); - line-height: vww(40); + .Reserved { + .white-block { + width: 100%; + height: vww(50); + line-height: vww(50); text-align: center; + color: #333; + margin-top: vww(10); } } } -- Gitblit v1.9.1