appWareHouse/pages/order/orderDetail.vue

<template>
	<view class="box-container">
		<u-navbar leftIconSize="25px" height="70px" :titleStyle="{fontWeight:700}" title="订单详情" :autoBack="true">
		</u-navbar>
		<view class="entry-info">
			<u-tabs :list="tabList" @click="tabClick" :lineWidth="60"></u-tabs>
			<view v-show="tabIndex == 0" style="padding: 20rpx;">

				<view>
					<view style="color:#1A1E31 ;">订单号</view>
					<view style="font-size: 12px;color:#898989 ">{{ruleForm.orderNo}}</view>
				</view>
				<view class="basInfo">
					<view class="label">客户名称</view>
					<view class="value">{{ruleForm.custName}}</view>
				</view>
				<view class="basInfo">
					<view class="label">FBA单号</view>
					<view class="value">{{ruleForm.shipmentId}}</view>
				</view>
				<view class="basInfo">
					<view class="label">货物所在仓库</view>
					<view class="value">{{ruleForm.warehouseName}}</view>
				</view>
				<view class="basInfo">
					<view class="label">库位</view>
					<view class="value">{{ruleForm.location}}</view>
				</view>
				<view class="basInfo">
					<view class="label">是否问题件</view>
					<view class="value">{{ruleForm.isIssueStr}}</view>
				</view>
				<view class="basInfo">
					<view class="label">渠道名称</view>
					<view class="value">{{ruleForm.channelName}}</view>
				</view>
				<view class="basInfo">
					<view class="label">国家</view>
					<view class="value">{{ruleForm.countryName}}</view>
				</view>
				<view class="basInfo">
					<view class="label">邮编</view>
					<view class="value">{{ruleForm.shipmentPostCode}}</view>
				</view>
				<view class="basInfo">
					<view class="label">仓库代码</view>
					<view class="value">{{ruleForm.shipmentCode}}</view>
				</view>
				<view class="basInfo">
					<view class="label">客服</view>
					<view class="value">{{ruleForm.doc}}</view>
				</view>
				<view class="basInfo">
					<view class="label">销售</view>
					<view class="value">{{ruleForm.salesman}}</view>
				</view>
				<view class="basInfo">
					<view class="label">下单时间</view>
					<view class="value">{{ruleForm.orderTime}}</view>
				</view>
				<view class="basInfo">
					<view class="label">到仓时间</view>
					<view class="value">{{ruleForm.arriveTime}}</view>
				</view>
				<view class="basInfo">
					<view class="label">入仓时间</view>
					<view class="value">{{ruleForm.inboundTime}}</view>
				</view>
				<view class="basInfo">
					<view class="label">入库时间</view>
					<view class="value">{{ruleForm.inlocationTime}}</view>
				</view>
				<view class="basInfo">
					<view class="label">出库时间</view>
					<view class="value">{{ruleForm.outboundTime}}</view>
				</view>
				<view class="basInfo">
					<view class="label">库龄(D)</view>
					<view class="value">{{ruleForm.storageAge}}</view>
				</view>
			</view>
			<view v-show="tabIndex == 1" style="padding: 20rpx;">

				<view>
					<view style="color:#1A1E31 ;">预报件数</view>
					<view  style="font-size: 12px;color:#898989">{{sizeForm.forecastNumber || 0}}</view>
				</view>
				<view class="basInfo">
					<view class="label">预报重量（KG）</view>
					<view class="value">{{sizeForm.forecastWeight || 0}}</view>
				</view>
				<view class="basInfo">
					<view class="label">预报体积（M³)</view>
					<view class="value">{{sizeForm.forecastVolume || 0}}</view>
				</view>
				<view class="basInfo">
					<view class="label">实际件数</view>
					<view class="value">{{sizeForm.realNumber || 0}}</view>
				</view>
				<view class="basInfo">
					<view class="label">实际重量（KG）</view>
					<view class="value">{{sizeForm.realWeight || 0}}</view>
				</view>
				<view class="basInfo">
					<view class="label">实际体积（M³)）</view>
					<view class="value">{{sizeForm.realVolume || 0}}</view>
				</view>
				<view v-for="(item,index) in sizeForm.volumeList" :key="index">
					<view class="backgro"></view>
					<view style="color: #1A1E31;">{{"箱规" + (index +1)}}</view>
					<view><u-divider></u-divider></view>
					<view class="volume">
						<text class="volumeLabel">长*宽*高</text>
						<text class="volumeValue">{{item.length + "*" + item.width + "*" + item.height}}</text>
					</view>
					<view class="volume">
						<text class="volumeLabel">实际重量</text>
						<text class="volumeValue">{{item.weight}}</text>
					</view>
					<view class="volume">
						<text class="volumeLabel">总件数</text>
						<text class="volumeValue">{{item.number}}</text>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>
<script>
	import Api from '@/api/api.js';
	export default {
		onLoad(op) {
			if (op.orderNo) {
				Api.storge.queryVolumeSpecByOrderNo({
					orderNo: op.orderNo
				}).then(res => {
					this.sizeForm = res.data
				})
				Api.storge.queryStockInfoByOrderNo({
					orderNo: op.orderNo
				}).then(res => {
					this.ruleForm = res.data
				})
			}

		},
		data() {
			return {
				ruleForm: {

				},
				sizeForm: {
					infoList: [{}, {}]
				},
				tabList: [{
						name: '基本信息',
					}, {
						name: '材积信息',
					},
					// {
					//     name: '库内轨迹'
					// }, 
				],
				tabIndex: ""

			}

		},
		methods: {

			tabClick(e) {

				this.tabIndex = e.index
			}
		}
	}
</script>
<style lang="scss" scoped>
	.box-container {
		.entry-info {
			width: 90%;
			margin: auto;
			margin-top: 200rpx;
			font-size: 14px;
			.basInfo {
				margin-top: 20rpx;
				.label{
					color: #1A1E31;
				}
				.value{
					font-size: 12px;
					color:#898989 ;
				}
			}
				
			.volumeLabel{
				font-size: 12px;
				color: #9B9B9B;
 ;
			}
			.volumeValue{
				font-size: 12px;
				color: #353535;
			}
			.backgro {
				margin-top: 20rpx;
				width: 100%;
				height: 44rpx;
				background-color: #FBFCFE;
			}

			.volume {
				display: flex;
				justify-content: space-between;
			}

		}

	}
</style>