<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="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>
|
|
<!-- 已预约提煤单 -->
|
<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>
|
<view class="haveYuYueCenter">
|
<view>{{ item.deptName || '' }}</view>
|
<view>{{ item.coalName || '' }}</view>
|
<view>排队数：暂无{{}}</view>
|
</view>
|
<view class="haveYuYueBottom">
|
<text>{{ item.yuYueTime || '时段' }}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { customerId } from '@/utils/status';
|
|
export default {
|
props: {
|
indexdriverBillOfLoadingData: {
|
type: Object,
|
default: {}
|
}
|
},
|
watch: {
|
indexdriverBillOfLoadingData: {
|
handler(v) {
|
console.log(v, '刷新之后的司机首页');
|
this.driverBillOfLoadingData = v;
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
data() {
|
return {
|
driverBillOfLoadingData: {},
|
// 抢单模态框
|
qiangDanShow: false,
|
qiangDanTitle: '抢单提示',
|
qiangDanContent: '',
|
qiangDanOrderPlanId: null,
|
fleetId: '',
|
xsUserId: '',
|
customerId: ''
|
};
|
},
|
onShow() {
|
this.init();
|
},
|
methods: {
|
init() {
|
this.qiangDanList();
|
},
|
// 司机首页列表
|
qiangDanList() {
|
uni.showLoading({
|
title: '加载中...'
|
});
|
this.$reqGet('qiangDanList').then(res => {
|
console.log(res, '司机首页');
|
uni.hideLoading();
|
this.driverBillOfLoadingData = res.data;
|
});
|
},
|
// 抢单按钮
|
qiangDanBtn(value) {
|
if (value.tmcCount == '0') {
|
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}单，确定抢单？`;
|
}
|
},
|
// 抢单模态框
|
qiangDanConfirm() {
|
this.qiangDanContent = '';
|
this.qiangDanShow = false;
|
this.qiangDan(this.qiangDanOrderPlanId, this.fleetId, this.customerId, this.xsUserId);
|
},
|
qiangDanCancel() {
|
this.qiangDanShow = false;
|
},
|
// 抢单请求
|
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 : '抢单失败');
|
}
|
})
|
.then(() => {
|
setTimeout(() => {
|
this.qiangDanList();
|
}, 1000);
|
});
|
},
|
list3CardIconClick(value) {
|
uni.navigateTo({
|
url: `/pages/driver-page/driver-index/bill-of-lading-details/bill-of-lading-details?orderPlanId=${value.id}&yyId=${value.yyId}`
|
});
|
},
|
// 提煤单详情
|
cardBodyClick(name) {
|
uni.navigateTo({
|
url: `/pages/driver-page/driver-index/bill-of-lading-details/bill-of-lading-details?orderPlanId=${name}`
|
});
|
},
|
// 去预约
|
toAppointmentClick(value) {
|
uni.navigateTo({
|
url: `/pages/driver-page/appointment/appointment?takeCoalId=${value.id}&filedId=${value.filedId}&deptId=${value.deptId}&sendDate=${value.sendDate}`
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep.driver-index {
|
width: 94%;
|
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;
|
}
|
}
|
.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) {
|
display: flex;
|
justify-content: space-between;
|
view {
|
text-align: center;
|
width: 50%;
|
}
|
}
|
}
|
}
|
|
// 待预约
|
.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;
|
font-weight: 400;
|
background: #f5f5f5;
|
}
|
.uni-table-td {
|
font-weight: 400;
|
line-height: 58rpx;
|
padding: vww(5) vww(10);
|
color: #111111;
|
}
|
}
|
}
|
}
|
}
|
// 已预约
|
.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);
|
text-align: center;
|
}
|
}
|
}
|
}
|
</style>
|
