wangluohuoyun-app/pages/order/orderDetails.vue

<!-- 订单详情-->
<template>
	<view class="content">
		<view class="fixed1"></view>
		<view class="fixed">
			<view class='title flex flex-center'>
				<u-icon class="back" name="arrow-left" color="" size="20" @click="back"></u-icon>
				<view class="nav-title">订单</view>
				<u-icon class="search" name="search" color="" size="28" @click="search"></u-icon>
			</view>
		</view>
		<view class="content1">
			<view class="item1">
				<!-- <view class="status">待货主确认</view>
				<view class="status">未装车</view>
				<view class="status">待货主确认装车</view>
				<view class="status">货主驳回装车信息</view>
				<view class="status">待平台确认装车</view>
				<view class="status">平台驳回装车信息</view>
				<view class="status">运输中</view>
				<view class="status">待货主确认卸车</view>
				<view class="status">货主驳回卸车信息</view>
				<view class="status">待平台确认卸车</view>
				<view class="status">平台驳回卸车信息</view>
				<view class="status">待结算</view>
				<view class="status">已结算</view>
				<view class="status">已终止</view> -->
				<view class="status">结算中</view>
				<view class="status">已完结</view>
			</view>
			<!-- flex flex-space-between -->
			<view class="item2">
				<u-button class="btn" text="终止"></u-button>
				<!-- <u-button class="btn" text="联系客服" @click="$helper.contactCustomerService"></u-button> -->
				<u-button class="btn" text="确认装车" @click="goConfirmLoading()"></u-button>
				<u-button class="btn" text="修改装车信息" @click=""></u-button>
				<u-button class="btn" text="确认卸车" @click=""></u-button>
				<u-button class="btn" text="修改卸车信息" @click=""></u-button>
				<u-button class="btn" text="完结" @click=""></u-button>
			</view>
			<view class="item3 flex flex-space-between align-center">
				<view class="left flex align-center">
					<u--image :showLoading="true" :src="src" width="44px" height="44px" @click="" shape='circle'>
					</u--image>
					<view class="name">李正华</view>
					<view class="flex align-center">
						<view class="number">4.98</view>
						<u-icon class="star" name="star-fill" color="#FEC823" size="20" @click="back"></u-icon>
					</view>
				</view>
				<view class="right flex s-row align-center phone">
					<view class="bgc">
						<u-icon class="phone" name="phone-fill" color="#2772FB" size="20" @click="back"></u-icon>
					</view>

					<view class="hz-name">联系货主</view>
				</view>
			</view>
			<!-- <view class='row-between'>
				<view class="">货主</view>
				<view>张三</view>
			</view>
			<view class='row-between'>
				<view class="">货主单位</view>
				<view>黑龙江中天昊元贸易有限公司</view>
			</view>
			<view class='row-between'>
				<view class="">卸货地</view>
				<view>黑龙江省齐齐哈尔市梅里斯达斡尔族区杜尔门沁达斡尔乡53农场</view>
			</view>
			<view class='row-between'>
				<view class="">货名</view>
				<view>玉米</view>
			</view>
			<view class='row-between'>
				<view class="">距离</view>
				<view>约15公里</view>
			</view>
			<view class='row-between'>
				<view class="">货运费</view>
				<view>100元/吨</view>
			</view> -->
		</view>

		<view class="content2">
			<view class="flex flex-space-between border">
				<view class="flex s-row item1">
					<view class="fontsize-46 fontweight-500 text">营口市</view>

					<view class="fontsize-28 gray">发货地</view>
				</view>
				<image class="change-btn" src="@/static/images/common/jt.png" mode='widthFix'></image>
				<view class="flex s-row item2">

					<view class="fontsize-46 fontweight-500 text" @click="">齐齐哈尔市</view>
					<view class="fontsize-28 gray text-align-right">卸货地</view>
				</view>
			</view>
			<view class="level2-title">基本信息</view>
			<view class='row-between'>
				<view class="row-left-text gray">订单编号</view>
				<view class="row-right-text">CY20220210666666</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">货主</view>
				<view class="row-right-text">张山</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">货主单位</view>
				<view class="row-right-text">辽宁省营口市鲅鱼圈区蝴蝶泉路116号</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">发货地</view>
				<view class="row-right-text place">黑龙江中天昊元贸易有限公司</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">卸货地</view>
				<view class="row-right-text place">黑龙江省齐齐哈尔市梅里斯达斡尔族区
					杜尔门沁达斡尔乡53农场</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">货名</view>
				<view class="row-right-text">玉米</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">距离</view>
				<view class="row-right-text">约15公里</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">运费</view>
				<view class="row-right-text">100元/车</view>
			</view>

		</view>
		<view class="content3">
			<view class="level2-title">承运信息</view>
			<view class='row-between'>
				<view class="row-left-text gray">合同编号</view>
				<view class="row-right-text">132</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">车牌号</view>
				<view class="row-right-text">京H12345</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">预计运费</view>
				<view class="row-right-text">1000元</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">装车时间</view>
				<view class="row-right-text gray">2022-02-10 16:13:15</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">装车照片</view>
				<view class="flex">
					<u--image :showLoading="true" :src="src" width="40px" height="40px"></u--image>
					<u--image :showLoading="true" :src="src" width="40px" height="40px"></u--image>
				</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">计应付运费</view>
				<view class="row-right-text">1100元</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">卸车时间</view>
				<view class="row-right-text gray">2022-02-10 16:13:15</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">卸车照片</view>
				<view class="flex">
					<u--image :showLoading="true" :src="src" width="40px" height="40px"></u--image>
					<u--image :showLoading="true" :src="src" width="40px" height="40px"></u--image>
				</view>
			</view>
		</view>
		<view class="content4">
			<view class="level2-title gray">运费信息（单位：元）</view>
			<view class='row-between'>
				<view class="row-left-text gray">预付运费</view>
				<view class="row-right-text">2000</view>
			</view>
			<view class='flex flex-end'>
				<view class="gray row-right-text">2022-02-11 15:15:15</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">运费尾款</view>
				<view class="row-right-text">未支付</view>
			</view>
			<view class='row-between mx row-left-text gray'>
				明细：预付2000元，扣款200元，服务费150元，尾款2000元，合计收款4000元。
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">运费</view>
				<view class="row-right-text">2000</view>
			</view>
			<view class='flex flex-end'>
				<view class="gray row-right-text">2022-02-11 15:15:15</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">运费</view>
				<view class="row-right-text">2000</view>
			</view>
			<view class='flex flex-end'>
				<view class="gray row-right-text">2022-02-11 15:15:15</view>
			</view>
			<view class='row-between'>
				<view class="row-left-text gray">合计</view>
				<view class="row-right-text">4000</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cyinfoStatus: '未装车',
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				id: 1
			}

		},
		methods: {
			back() {
				uni.navigateBack()
			},
			goConfirmLoading(id) {
				console.log('点击详情id：', id)
				uni.$u.route('/pages/order/confirmLoading', {
					id: this.id,
				});
			},
		}
	}
</script>

<style lang="scss">
	.fixed,
	.fixed1 {
		background: white;
		position: fixed;
		top: var(--status-bar-height);
		z-index: 999;
		width: 100%;
	}

	.fixed {
		padding-bottom: 10rpx;

		.title {
			background: white;
			position: relative;
			font-size: 36rpx;
			color: rgba(0, 0, 0, 0.85);

			.search {
				position: absolute;
				right: 20rpx;
			}

			.back {
				position: absolute;
				left: 20rpx;

			}
		}
	}

	.fixed1 {
		top: 0;
		height: var(--status-bar-height);
		background: white;
	}
.row-between{
	margin-bottom: 10rpx;
}
	.content1 {
		background: white;
		margin: calc(var(--status-bar-height) + 80rpx) 20rpx 0 20rpx;
		border-radius: 20rpx;
		padding: 40rpx 0rpx 0 0;
		box-sizing: border-box;

		.status {
			display: flex;
			justify-content: center;
			margin-bottom: 40rpx;
			font-size: 36rpx;
			color: #333333;
			font-weight: 700;
		}

		.btn {
			width: 40%;
		}

		.item2 {
			padding-bottom: 40rpx;
		}

		.item3 {
			padding: 20rpx;
			background: linear-gradient(180deg, #F7F7F9 0%, #FFFFFF 100%);
			border-radius: 0 0 20rpx 20rpx;

			.name {
				margin-left: 10rpx;
				margin-right: 20rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}

			.number {
				font-size: 26rpx;
				color: #878787;
			}

			.star {
				margin-left: 10rpx;
			}

			.phone {
				.bgc {
					background: #E5F0FE;
					width: 58rpx;
					height: 58rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
				}

				.hz-name {
					font-size: 26rpx;
					color: #2772FB;
				}

			}
		}
	}

	.level2-title {
		margin: 20rpx 0 20rpx 0;
	}

	.content2 {
		background: white;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;

		.change-btn {
			width: 86rpx;
			height: 86rpx;
			position: relative;
			top: -20rpx;
		}

		.item1,
		.item2 {
			width: 40%;

			.text {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

			.gray {
				text-align: center;
			}

		}

		.item1 .text {
			text-align: center;
		}

		.item2 .text {
			text-align: center;
		}

		.border {
			border-bottom: 1px solid #EEEEEE;
			padding-bottom: 33rpx;
		}



		.place {
			width: 80%;
			text-align: right;
		}
	}

	.content3,
	.content4 {
		background: white;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.content4 {
		.time{
			text-align: right;
		}
		.mx {
		
			background: #F7F8FA;
			padding: 10rpx;
			margin: 10rpx 0;
		}
	}
</style>