<template>
|
<view class="">
|
<view class="fayunPlan">
|
<view class="plan-banner">
|
<view class="top-container">
|
<view class="back-icon" @click="backPage"><u-icon name="arrow-left" size="50" color="#fff"></u-icon></view>
|
<view class="top-title">发运计划详情</view>
|
</view>
|
<view class="middle-container">
|
<view class="dept-name">{{ deptName }}({{ coalName }})</view>
|
<view class="dept-num">
|
<text
|
style="font-size: 46rpx;
|
font-family: CTCuHeiSJ;
|
font-weight: 400;
|
color: #FFFFFF;
|
text-shadow: 0rpx 4rpx 0rpx #1A66FE;"
|
>
|
{{ orderPlanDetail.fowardSum || 0 }}
|
</text>
|
<text
|
style="font-size: 24rpx;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #F81414;
|
text-shadow: 0rpx 4rpx 0rpx #1A66FE;"
|
>
|
/{{ cars2 || 0 }}
|
</text>
|
</view>
|
</view>
|
<view class="bottom-container">
|
<view class="bottom-block">
|
<view class="bottom-content" v-for="(item, index) in orderPlanDetail.huodaiList" :key="index">
|
<view class="forward-name">{{ item.huoDaiName }}</view>
|
<view class="forward-num">
|
{{ item.fleetOrHuodaiNub }}
|
<text>张</text>
|
</view>
|
</view>
|
<view class="bottom-content" v-for="(item, index) in orderPlanDetail.cheduiList" :key="index">
|
<view class="fleet-name">{{ item.cheduiName }}</view>
|
<view class="fleet-num">
|
{{ item.fleetOrHuodaiNub }}
|
<text>张</text>
|
</view>
|
</view>
|
<view class="bottom-content">
|
<view class="fleet-name">司机</view>
|
<view class="fleet-num">
|
{{ orderPlanDetail.sijiSum || 0 }}
|
<text>张</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="block-top">
|
<combined-title title="提煤单详情"></combined-title>
|
<view class="total">
|
总净重
|
<text>{{ total || 0 }}</text>
|
</view>
|
</view>
|
<view class="main-banner">
|
<view class="empty-pointer" v-if="!yyDailyList">暂无更多数据</view>
|
<view class="main-block">
|
<view class="main-container">
|
<view class="main-container_content" v-for="(item, index) in yyDailyList" :key="index" @click="showMore(index)">
|
<view class="arrow-icon"><u-icon name="arrow-right" size="30" color="#999999"></u-icon></view>
|
<view class="divider"><u-divider></u-divider></view>
|
<view class="first-line">
|
<view class="car-num">{{ item.carNo || '' }}</view>
|
<view class="order-type">{{ coalStatus[item.status] }}</view>
|
</view>
|
<view class="second-line">
|
<view class="line-content">
|
<view class="line-content_text">净重</view>
|
<view class="line-content_num">{{ item.clean || 0 }}</view>
|
</view>
|
<view class="line-content">
|
<view class="line-content_text">余量</view>
|
<view class="line-content_num">{{ item.allowance || 0 }}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="white-block"></view>
|
</view>
|
</template>
|
|
<script>
|
import combinedTitle from '@/components/combined-title/combined-title.vue';
|
export default {
|
components: {
|
combinedTitle
|
},
|
onLoad(value) {
|
this.orderPlanId = value.orderPlanId;
|
this.orderCode = value.code;
|
this.cars2 = value.cars2;
|
this.deptName = value.deptName;
|
this.coalName = value.coalName;
|
console.log(value, '发运计划参数');
|
},
|
data() {
|
return {
|
orderPlanId: null,
|
orderCode: null,
|
orderPlanDetail: {},
|
coalStatus: ['领取', '预约', '签到', '入场', '称皮', '称毛', '离场', '入磅房', '出磅房', '入煤场', '出煤仓'],
|
yyDailyList: [],
|
// 领取数量
|
cars2: '',
|
coalName: '',
|
deptName: '',
|
total: 0
|
};
|
},
|
onShow() {
|
this.init();
|
},
|
methods: {
|
backPage() {
|
uni.navigateBack({
|
delta: 1
|
});
|
},
|
showMore(index) {
|
uni.navigateTo({
|
url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanMore/fayunPlanMore?orderPlanId=${this.orderPlanId}&index=${index}`
|
});
|
},
|
init() {
|
this.GetOrderPlanDetail();
|
},
|
// 获取发运计划详情
|
GetOrderPlanDetail() {
|
uni.showLoading({
|
title: '加载中...'
|
});
|
this.$reqGet('xiangqingList', { orderPlanId: this.orderPlanId }).then(res => {
|
if (res.code == 0) {
|
this.orderPlanDetail = res.data;
|
this.yyDailyList = res.data.yyDailyList;
|
if (res.data.yyDailyList) {
|
this.total = this.yyDailyList.reduce((prev, cur) => {
|
return prev + cur.clean;
|
}, 0);
|
} else {
|
this.total = 0;
|
}
|
uni.hideLoading();
|
} else {
|
this.$u.toast('加载失败，请稍后重试');
|
uni.hideLoading();
|
}
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@mixin flex {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.empty-pointer {
|
position: absolute;
|
top: 50%;
|
left: 38%;
|
color: #909399;
|
}
|
.white-block {
|
width: 100%;
|
height: vww(50);
|
margin-top: vww(10);
|
}
|
::v-deep.fayunPlan {
|
width: 100%;
|
margin: 0 auto;
|
background-color: #f4f4f4;
|
display: flex;
|
flex-direction: column;
|
.plan-banner {
|
width: 100%;
|
background: linear-gradient(0deg, #ffffff 0%, #0055fe 100%);
|
background-size: contain;
|
position: relative;
|
top: 0;
|
.top-container {
|
width: 468rpx;
|
height: 38rpx;
|
position: relative;
|
top: vww(48);
|
@include flex margin-left: vww(10);
|
.top-title {
|
width: 226rpx;
|
height: 36rpx;
|
font-size: 38rpx;
|
font-family: Adobe Heiti Std;
|
font-weight: normal;
|
color: #fff;
|
line-height: 69rpx;
|
}
|
}
|
.middle-container {
|
width: 626rpx;
|
height: 34rpx;
|
margin: vww(27) vww(31) 0 vww(31);
|
@include flex;
|
position: relative;
|
top: vww(54);
|
.dept-name {
|
font-size: 32rpx;
|
font-family: Adobe Heiti Std;
|
font-weight: normal;
|
color: #ffffff;
|
line-height: 69rpx;
|
text-shadow: 0rpx 4rpx 0rpx #1a66fe;
|
}
|
}
|
.bottom-container {
|
width: 100%;
|
@include flex;
|
justify-content: center;
|
margin-top: vww(80);
|
.bottom-block {
|
width: 690rpx;
|
min-height: 185rpx;
|
background: #ffffff;
|
box-shadow: 4rpx 6rpx 51rpx 0rpx rgba(73, 120, 240, 0.11);
|
border-radius: 20rpx;
|
@include flex;
|
justify-content: space-around;
|
flex-wrap: wrap;
|
padding: 0 vww(8);
|
.bottom-content {
|
@include flex;
|
flex-direction: column;
|
height: vww(56);
|
margin-right: vww(5);
|
.forward-name,
|
.fleet-name {
|
font-size: 28rpx;
|
font-family: Adobe Heiti Std;
|
font-weight: normal;
|
color: #757575;
|
line-height: 69rpx;
|
}
|
.forward-num,
|
.fleet-num {
|
font-size: 40rpx;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #303030;
|
line-height: 69rpx;
|
text {
|
font-size: 30rpx;
|
}
|
}
|
}
|
}
|
}
|
}
|
.block-top {
|
width: 94%;
|
margin: vww(15);
|
@include flex;
|
.total {
|
height: 30rpx;
|
line-height: vww(15);
|
font-size: 28rpx;
|
font-family: Adobe Heiti Std;
|
font-weight: normal;
|
color: #757575;
|
text {
|
width: 118rpx;
|
height: 30rpx;
|
line-height: vww(15);
|
font-size: 40rpx;
|
font-family: CTCuHeiSJ;
|
font-weight: 400;
|
color: #f81414;
|
}
|
}
|
}
|
.main-banner {
|
width: 100%;
|
@include flex;
|
justify-content: center;
|
.main-block {
|
width: 690rpx;
|
background: #ffffff;
|
box-shadow: 4rpx 6rpx 51rpx 0rpx rgba(73, 120, 240, 0.11);
|
border-radius: 20rpx;
|
.main-container {
|
width: 100%;
|
@include flex;
|
justify-content: center;
|
flex-direction: column;
|
background-color: #fff;
|
&_content {
|
width: 96%;
|
height: 194rpx;
|
@include flex;
|
flex-direction: column;
|
justify-content: space-around;
|
align-items: flex-start;
|
margin-top: vww(8);
|
position: relative;
|
.arrow-icon {
|
position: absolute;
|
right: vww(10);
|
top: vww(17);
|
}
|
.divider {
|
position: absolute;
|
width: 94%;
|
height: vww(1);
|
margin: 0 auto;
|
border-bottom: 1px soild #d6d6d6;
|
left: vww(15);
|
bottom: vww(18);
|
}
|
.first-line {
|
width: 50%;
|
@include flex;
|
margin: 0 vww(15);
|
.car-num {
|
height: 31rpx;
|
font-size: 30rpx;
|
font-family: Microsoft YaHei;
|
font-weight: 300;
|
color: #303030;
|
}
|
.order-type {
|
border: 2px solid #035cfb;
|
border-radius: 4rpx;
|
color: #035cfb;
|
padding: vww(2) vww(4);
|
text-align: center;
|
}
|
}
|
.second-line {
|
width: 94%;
|
height: vww(14);
|
margin: 0 vww(15);
|
@include flex;
|
justify-content: space-between;
|
.line-content {
|
width: 40%;
|
@include flex &_text {
|
width: 69rpx;
|
height: 29rpx;
|
line-height: 29rpx;
|
font-size: 28rpx;
|
font-family: PingFang SC;
|
font-weight: 400;
|
color: #919090;
|
}
|
&_num {
|
height: 29rpx;
|
line-height: 29rpx;
|
font-size: 38rpx;
|
font-family: PingFang SC;
|
font-weight: 400;
|
color: #035cfb;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
.fayunPlanBody {
|
width: 94%;
|
margin: 0 auto;
|
|
.compDetails {
|
width: 94%;
|
margin: vww(24) auto 0 auto;
|
.comp {
|
font-size: vww(16);
|
font-weight: 400;
|
padding: 0 vww(10);
|
height: vww(40);
|
line-height: vww(40);
|
border: 1px solid #ebeef5;
|
border-bottom: none;
|
background-color: #f5f5f5;
|
}
|
}
|
.card {
|
width: 94%;
|
height: vww(150);
|
margin: vww(24) auto 0 auto;
|
background-color: #fff;
|
border-radius: 4px;
|
box-shadow: 0 2px 12px 0 #ebeef5;
|
position: relative;
|
display: flex;
|
justify-content: center;
|
align-items: flex-start;
|
.coal-status,
|
.coal-clean,
|
.coal-allowance,
|
.coal-carNo {
|
width: 50%;
|
margin-top: vww(30);
|
height: vww(50);
|
text-align: center;
|
.label-title {
|
color: #909399;
|
}
|
.label-value {
|
min-width: vww(85);
|
margin-top: vww(10);
|
color: #606266;
|
}
|
}
|
.more-button {
|
width: vww(60);
|
position: absolute;
|
top: vww(100);
|
display: flex;
|
justify-content: center;
|
}
|
}
|
// 表格样式
|
.uni-table {
|
.uni-table-tr {
|
padding: 0;
|
border: vww(1) solid #c6c6c6;
|
.uni-table-th {
|
font-size: vww(14);
|
height: vww(30);
|
line-height: vww(30);
|
padding: vww(5) vww(10);
|
color: #111111;
|
font-weight: 500;
|
background: #e2e2e2;
|
}
|
.uni-table-td {
|
font-size: vww(14);
|
font-weight: 400;
|
height: vww(30);
|
line-height: vww(30);
|
padding: vww(5) vww(10);
|
color: #111111;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
