wangluohuoyun-app/pages/cargoTerminal/cargoTerminalDetail.vue

<template>
	<view class="content">
		<view class="content1">
			<view class="title">
				发运信息
			</view>
			<view class="row1 row">
				<view class="left">
					发货地
				</view>
				<view class="right">
					{{dataObj.sendPrivate}} {{dataObj.sendCity}} {{dataObj.sendArea}}
				</view>
			</view>
			<view class="row2 row right">
				<view class="left">
					地址
				</view>
				<view class="right">
					{{dataObj.sendDetailedAddress}}
				</view>
			</view>
			<view class="row3 row">
				<view class="left">
					卸货地
				</view>
				<view class="right">
					{{dataObj.unloadPrivate}} {{dataObj.unloadCity}} {{dataObj.unloadArea}}
				</view>
			</view>
			<view class="row4 row right">
				{{dataObj.unloadDetailedAddress}}
			</view>
			<view class="row5 row">
				<view class="left">
					装车时间
				</view>
				<view class="right">
					{{date}}  {{time}}
				</view>
			</view>
			<view class="row6 row">
				<view class="left">
					运输距离
				</view>
				<view class="right">
					{{dataObj.cargoDistance}}
				</view>
			</view>
			<view class="row7 row">
				<view class="left">
					运价
				</view>
				<view class="right">
					<text>￥{{dataObj.freightPrice}}</text>
					<text v-if="dataObj.billingMethod==0">元/吨</text>
					<text v-if="dataObj.billingMethod==1">元/车</text>
					<text v-if="dataObj.billingMethod==2">元/方</text>
				</view>
			</view>
			<view class="row8 row">
				<view class="top">
					备注
				</view>
				<view class="bottom">
					{{dataObj.remark}}
				</view>
			</view>
		</view>
		<view class="content2">
			<view class="title">
				车辆货物信息
			</view>
			<view class="row">
				<view class="left">
					货名
				</view>
				<view class="right">
					{{dataObj.goodsName}}
				</view>
			</view>
			<view class="row">
				<view class="left">
					货物重量
				</view>
				<view class="right">
					{{dataObj.weight}} 吨
				</view>
			</view>
			<view class="row">
				<view class="left">
					货物体积
				</view>
				<view class="right">
					{{dataObj.volume}} 方
				</view>
			</view>
			<view class="row">
				<view class="left">
					包装方式
				</view>
				<view class="right">
					{{dataObj.packageType}}
				</view>
			</view>
			<view class="row">
				<view class="left">
					用车数量
				</view>
				<view class="right">
					{{dataObj.expectedNum}}辆
				</view>
			</view>
			<view class="row">
				<view class="left">
					车型
				</view>
				<view class="right">
					{{dataObj.carModel}}
				</view>
			</view>
			<view class="row">
				<view class="left">
					车长
				</view>
				<view class="right">
					{{dataObj.carLength}}
				</view>
			</view>
		</view>
		<view class="content3">
			<view class="title">
				货站信息
			</view>
			<view class="row">
				<view class="left">
					联系人
				</view>
				<view class="right">
					{{dataObj.contacts}}
				</view>
			</view>
			<view class="row">
				<view class="left">
					联系电话
				</view>
				<view class="right">
					{{dataObj.contactsPhone}}
				</view>
			</view>
			<view class="row">
				<view class="left">
					货站名称
				</view>
				<view class="right">
					{{dataObj.freightStationName}}
				</view>
			</view>
			<view class="row">
				<view class="left">
					信息费
				</view>
				<view class="right">
					{{dataObj.stationFee}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataObj: {},
				date:"",
				time:''
			};
		},
		onLoad(options) {
			this.id = options.id
			this.init()
		},
		methods: {
			init() {
				this.$request.baseRequest('get', '/hyReleaseGoodsInfo/seeTask', {
						id: this.id
					}).then(res => {
						uni.hideLoading()
						this.dataObj = res.data
						this.date = this.dataObj.loadingDate.split(",")[0]+'~'+this.dataObj.loadingDate.split(",")[this.dataObj.loadingDate.split(",").length-1]
						this.time = this.dataObj.periodOfTime.split(",")[0]+'~'+this.dataObj.periodOfTime.split(",")[1]
					})
					.catch(res => {});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx;
	}

	.content1,
	.content2,
	.content3 {
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;

		.left {
			width: 200rpx;
			text-align: left;
			// background: red;
			color: rgba(153, 153, 153, 1);
		}
	}

	.right {
		display: flex;
		justify-content: flex-end;
		text-align: right;
	}

	.row8 {
		display: flex;
		flex-direction: column;
	}

	.title {
		font-weight: 700;
		font-size: 32rpx;
		color: rgb(51, 51, 51);
		margin: 20rpx 0;
	}

	.row2,
	.row4,
	.row8 .top {
		// color: rgb(153, 153, 153)
	}

	.row7 .right {
		color: rgb(255, 134, 0);
	}
</style>