client_LemonBeans/subPackages/orderforGoods/details.vue

<template>
	<view class="mould-page">
		<navigation title="生产订单"></navigation>
		
		<view class="list-box">
			<view class="list-item">
				<view class="flex-box">
					<view class="top-title"></view>
					<text>基础信息</text>
				</view>
				
				<view class="title-center">{{requestData.orderName}}</view>
				
				<view class="item-text flex-box">
					<view class="item-text-left">订单编号:</view>
					<view>{{requestData.orderNum}}</view>
				</view>
				
				<view class="item-text flex-box">
					<view class="item-text-left">订单数量:</view>
					<view>{{requestData.number}}</view>
				</view>
				
				<view class="item-text flex-box">
					<view class="item-text-left">订单生产时间:</view>
					<view>{{requestData.startTime}}</view>
				</view>
				
				<view class="item-text flex-box">
					<view class="item-text-left">订单交付周期:</view>
					<view>{{requestData.deliveryCycle}}天</view>
				</view>
				
				<view class="positioning-type">
					<text v-if="requestData.orderStatus == 1">生产中</text>
					<text v-else-if="requestData.transportOrder && requestData.transportOrder.shippingStatus == 1">已发货</text>
					<text v-else-if="requestData.transportOrder && requestData.transportOrder.shippingStatus == 2">已签收</text>
					<text v-else-if="requestData.overdue == 1">已逾期</text>
					<text v-else></text>
				</view>
				
			</view>
			
			<view class="list-item">
				<view class="flex-box">
					<view class="top-title"></view>
					<text>生产工艺路线图</text>
				</view>
				
				<view style="margin-top: 20rpx;">
					<uni-table border stripe emptyText="暂无更多数据" >
						<!-- 表头行 -->
						<uni-tr style="background: #9cccf0;">
							<uni-th style="color: #000;" align="center">工艺流程</uni-th>
							<uni-th style="color: #000;" align="center">完成状态</uni-th>
							<uni-th style="color: #000;" align="left">完成时间</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="item of requestData.productOrderDetailList || []" :key="item.id">
							<uni-td>{{item.processName}}</uni-td>
							<uni-td>
								<text v-if="item.status == 0">执行中</text>
								<text v-if="item.status == 1">待质检</text>
								<text v-if="item.status == 2">完成</text>
							</uni-td>
							<uni-td>{{item.endTime}}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
			
			
			<view class="list-item">
				<view class="flex-box">
					<view class="top-title"></view>
					<text>发货信息</text>
				</view>
				
				<view class="item-text" v-if="requestData.transportOrder">
					<view class="item-text flex-box">
						<view class="item-text-left">发货数量:</view>
						<view>{{requestData.transportOrder.number}}</view>
					</view>
					
					<view class="item-text flex-box">
						<view class="item-text-left">剩余数量:</view>
						<view>{{requestData.transportOrder.number}}</view>
					</view>
					<view class="item-text flex-box">
						<view class="item-text-left">发货订单:</view>
						<view>{{requestData.transportOrder.invoiceNumber}}</view>
					</view>
					
					<view class="item-text flex-box">
						<view class="item-text-left">发货时间:</view>
						<view>{{requestData.transportOrder.createTime}}</view>
					</view>
				</view>
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 请求的数据
				requestData:{},
				form:{},
			}
		},
		onLoad(e) {
			this.form.id = e.id
			this.form.url = decodeURIComponent(e.url)
			this.orderDetailsfun()
		},
		onShow() {
		},
		methods: {
			// 获取详情数据
			orderDetailsfun(){
				this.$api.orderDetails(this.form).then(res=>{
					this.requestData = res.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mould-page {
		.white-card {
			background-color: $uni-bg-color;
			padding: 20rpx;
		}
		.list-box {
			padding: 0 20rpx;
			color: $uni-text-color-list; 	// #666
			.list-item {
				background-color: $uni-bg-color; // #ffffff
				border-radius: 20rpx;
				margin-top: 28rpx;
				font-size: 28rpx;
				padding: 20rpx;
				position: relative;
				.top-title {
					width: 20rpx;
					height: 50rpx;
					border-radius: 5rpx;
					background: #3a77fc;
					margin-right: 10rpx;
				}
				.title-center {
					text-align: center;
				}
				.item-text {
					margin: 10rpx 0;
					padding: 0 15rpx;
					.item-text-left {
						margin-right: 10rpx;
					}
				}
				.positioning-type {
					position: absolute;
					top: 80rpx;
					right: 30rpx;
				}
			}
	
		}
		.flex-box {
			display: flex;
			align-items: center;
		}
	}
	/deep/ .uni-table {
			 min-width: 100%!important;
	}
</style>