From 79993be468244e6cc16ce9c1d7e8736bd359c600 Mon Sep 17 00:00:00 2001 From: qingyiay <2386314947@qq.com> Date: 星期五, 05 五月 2023 14:48:51 +0800 Subject: [PATCH] 样式全面修改,所有页面焕然一新 --- pages/driver-page/driver-index/driver-index.vue | 688 +++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 470 insertions(+), 218 deletions(-) diff --git a/pages/driver-page/driver-index/driver-index.vue b/pages/driver-page/driver-index/driver-index.vue index 6b386d3..e513409 100644 --- a/pages/driver-page/driver-index/driver-index.vue +++ b/pages/driver-page/driver-index/driver-index.vue @@ -1,125 +1,158 @@ <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> - <view> - <text>{{ item.coalName || '' }}</text> - </view> - </view> - <view class="card-right-top-row"> - <view> - <text>鍓╀綑{{ item.carNum - item.taskNum }}寮�</text> - </view> - </view> - <view class="card-right-top-row"> - <view> - <text>{{ item.filedName || '' }}</text> - </view> - </view> - <view class="card-right-top-row"> - <view> - <text>{{ item.orderCode || '' }}</text> - </view> - </view> - </view> - </template> - </card> + <view class=""> + <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> --> - <!-- 鎶㈠崟鎻愮ず妯℃�佹 --> - <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>鎻愮叅鍗曠紪鍙凤細{{ item.code }}</text> + <!-- 寰呴鍙栨彁鐓ゅ崟 --> + <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="dispatch-receive"> + <view v-if="item.orderType == '澶栭攢' || item.orderType == '鍐呴攢' || item.orderType == '杞嚭'" class="container"> + <view class="dispatch">{{ item.deptName }}</view> + <view class="receive-icon"></view> + <view class="receive">{{ item.customerNameCopy }}</view> + </view> + <view v-else-if="item.orderType == '澶栬喘' || item.orderType == '鍐呰喘' || item.orderType == '杞叆'" class="container"> + <view class="dispatch">{{ item.customerNameCopy }}</view> + <view class="receive-icon"></view> + <view class="receive">{{ item.deptName }}</view> + </view> + </view> + <view class="point-number"> + <text class="residue">{{ item.carNum - item.taskNum }}</text> + <text>/{{ item.carNum }}</text> + </view> + </view> + <view class="second-line"> + <view class="coal-name">{{ item.coalName }}</view> + <view class="black-block"></view> + <view class="coal-type">{{ item.orderType }}</view> + </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> - <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 || '' }} 杞�</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>鎻愮叅鍗曠紪鍙凤細{{ 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"> + <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 class="main-divider"></view> + <view class="map-icon"> + <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"> + <text v-if="item.orderType == '澶栭攢' || item.orderType == '鍐呴攢' || item.orderType == '杞嚭'">{{ item.customerNameCopy }}</text> + <text v-else-if="item.orderType == '澶栬喘' || item.orderType == '鍐呰喘' || item.orderType == '杞叆'">{{ item.deptName }}</text> + </view> + </view> + <view class="map-icon"> + <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"> + <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 class="main-divider"></view> + <view class="map-icon"> + <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"> + <text v-if="item.orderType == '澶栭攢' || item.orderType == '鍐呴攢' || item.orderType == '杞嚭'">{{ item.customerNameCopy }}</text> + <text v-else-if="item.orderType == '澶栬喘' || item.orderType == '鍐呰喘' || item.orderType == '杞叆'">{{ item.deptName }}</text> + </view> + </view> + <view class="map-icon"> + <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" v-if="driverBillOfLoadingData.list2.length !== 0">娌℃湁鏁版嵁浜�...</view> </view> </view> </view> @@ -128,8 +161,11 @@ <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 +175,6 @@ watch: { indexdriverBillOfLoadingData: { handler(v) { - console.log(v, '鍒锋柊涔嬪悗鐨勫徃鏈洪椤�'); this.driverBillOfLoadingData = v; }, deep: true, @@ -154,7 +189,9 @@ qiangDanTitle: '鎶㈠崟鎻愮ず', qiangDanContent: '', qiangDanOrderPlanId: null, - fleetId: '' + fleetId: '', + xsUserId: '', + customerId: '' }; }, onShow() { @@ -170,7 +207,6 @@ title: '鍔犺浇涓�...' }); this.$reqGet('qiangDanList').then(res => { - console.log(res, '鍙告満棣栭〉'); uni.hideLoading(); this.driverBillOfLoadingData = res.data; }); @@ -178,10 +214,12 @@ // 鎶㈠崟鎸夐挳 qiangDanBtn(value) { if (value.tmcCount == '0') { - this.qiangDan(value.orderPlanId, value.fleetId); + this.qiangDan(value.orderPlanId, value.fleetId, value.customerId === null ? '0' : value.customerId, value.xsUserId === null ? '0' : value.xsUserId); } else { this.qiangDanOrderPlanId = value.orderPlanId; this.fleetId = value.fleetId; + this.customerId = value.customerId === null ? '0' : value.customerId; + this.xsUserId = value.xsUserId === null ? '0' : value.xsUserId; this.qiangDanShow = true; this.qiangDanContent = `宸叉姠${value.tmcCount}鍗曪紝纭畾鎶㈠崟锛焋; } @@ -190,19 +228,19 @@ qiangDanConfirm() { this.qiangDanContent = ''; this.qiangDanShow = false; - this.qiangDan(this.qiangDanOrderPlanId, this.fleetId); + this.qiangDan(this.qiangDanOrderPlanId, this.fleetId, this.customerId, this.xsUserId); }, qiangDanCancel() { this.qiangDanShow = false; }, // 鎶㈠崟璇锋眰 - qiangDan(id, fleetId) { - this.$reqPost('qiangDan', { orderPlanId: id, fleetId: fleetId }, 'params') + qiangDan(id, fleetId, customerId, xsUserId) { + this.$reqPost('qiangDan', { orderPlanId: id, fleetId: fleetId, customerId: customerId, xsUserId: xsUserId }, 'params') .then(res => { if (res.code == 0) { this.$u.toast('鎶㈠崟鎴愬姛'); } else { - this.$u.toast(res.data ? res.data : '鎶㈠崟澶辫触'); + this.$u.toast(res.msg ? res.msg : '鎶㈠崟澶辫触'); } }) .then(() => { @@ -233,121 +271,335 @@ </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-family: Microsoft YaHei; + font-weight: 300; + color: #515151; + } + .havedclock { + width: 58% !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('../../../static/image/banner/button.png') no-repeat; + background-size: cover; + font-size: 28rpx; + font-family: Microsoft YaHei; + font-weight: 300; + color: #ffffff; + text-align: center; + line-height: vww(40); + } +} +::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; - } + // 寰呴鍙栨彁鐓ゅ崟 + .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(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; + .first-line { + width: 94%; + height: vww(68); + margin: vww(18) vww(16) 0 vww(16); display: flex; justify-content: space-between; - view { + .dispatch-receive { + width: 70%; + display: flex; + justify-content: space-between; + align-items: center; + .container { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + } + .receive-icon { + width: 62rpx; + height: 14rpx; + border-bottom: 3px solid #275fa5; + position: relative; + &:after { + content: ''; + position: absolute; + width: 3px; + height: 10px; + background-color: #275fa5; + right: 0; + transform: rotate(-45deg); + } + } + } + .point-number { + width: 15%; + text { + font-size: 24rpx; + font-family: Microsoft YaHei; + font-weight: 400; + color: #c78a64; + } + .residue { + font-size: 40rpx; + font-family: CTCuHeiSJ; + font-weight: 400; + color: #f81414; + } + } + } + .second-line { + width: 60%; + height: vww(68); + display: flex; + justify-content: space-evenly; + align-items: center; + .coal-name { + width: 30%; + height: 30rpx; + font-size: 30rpx; + font-family: Microsoft YaHei; + font-weight: 300; + color: #515151; + position: relative; + display: flex; + justify-content: space-between; + padding: vww(2) vww(4); text-align: center; - width: 50%; + } + .black-block { + width: 2rpx; + height: 30rpx; + background: #515151; + } + .coal-type { + width: 24%; + height: 30rpx; + font-size: 30rpx; + font-family: Microsoft YaHei; + font-weight: 300; + color: #515151; + padding: vww(2) vww(4); + text-align: center; + } + } + .third-line { + 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-family: Microsoft YaHei; + 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('../../../static/image/banner/button.png') no-repeat; + background-size: cover; + font-size: 28rpx; + font-family: Microsoft YaHei; + 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: 40%; + height: vww(28); + display: flex; + justify-content: space-between; + align-items: center; - // 寰呴绾� - .daiYuYue { - margin-top: vww(24); - font-size: 16px; - font-weight: 300; - &Top { - background-color: #f5f5f5; - height: vww(40); - padding-left: vww(12); - line-height: vww(40); - border: vww(1) solid #eeeeee; - font-weight: 400; - } - &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('../../../static/image/banner/blueblock.png') no-repeat; + background-size: contain; + font-size: 30rpx; + font-family: Microsoft YaHei; font-weight: 400; - background: #f5f5f5; - } - .uni-table-td { - font-weight: 400; - line-height: 58rpx; - padding: vww(5) vww(10); - color: #111111; + color: #ffffff; } } + .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: 40%; + height: vww(28); + display: flex; + justify-content: space-between; + align-items: center; + .sign { + width: vww(28); + height: vww(28); + line-height: vww(28); + text-align: center; + background: url('../../../static/image/banner/redblock.png') no-repeat; + background-size: contain; + font-size: 30rpx; + font-family: Microsoft YaHei; + font-weight: 400; + color: #ffffff; + } + } + } + .third-line { + @include thirdLine width: 94%; + .clock { + width: 33%; + height: vww(21); + line-height: vww(21); + @include flex; + } + .type { + width: 40%; + margin-right: vww(6); + display: flex; + justify-content: space-between; + 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-family: Microsoft YaHei; + font-weight: 300; + color: #035cfb; + text-align: center; + } + } + } + .fourth-line { + @include fourthLine; } } } - // 宸查绾� - .haveYuYue { - font-size: 16px; - font-weight: 300; - margin-top: vww(24); - &Top { - background-color: #f5f5f5; - height: vww(40); - padding-left: vww(12); - line-height: vww(40); - border: vww(1) solid #eeeeee; - font-weight: 400; - } - &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