wangluohuoyun-app/pages/goodSource/shippingDetails.vue

<!-- 发运详情 -->
<template>
	<view class="content">
		<u-navbar title="发运详情" :bgColor="bgColor" @leftClick='back' :placeholder='true' leftIconColor="#fff" titleStyle='color:#fff'
			rightText='已关注'>
		</u-navbar>
		<view class="top-bgc"></view>
		<view class="content-move">
			<view class="content1">
				<view class="row1 flex flex-space-between">
					<view class="left flex">
						<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" width='122rpx' height='122rpx'
							shape="circle"></u--image>
						<view class="fontsize-46 ml20">张三</view>
					</view>
					<view class="right">
						<view class="flex">
							<view class="call fontsize-28" @click="call">
								<u-icon name="phone-fill" color="#2772FB"></u-icon>联系货主
							</view>
						</view>
					</view>
				</view>
				<view class="row">
					<view class="flex">
						黑龙江中天贸易有限公司
					</view>
				</view>
				<view class="row3 flex fontsize-24">
					<view class="item flex">
						<view class="gray">好评率</view>
						<view class="number-color">99%</view>
					</view>
					<view class="item flex">
						<view class="gray">发运次数</view>
						<view class="number-color">106</view>
					</view>
					<view class="item flex">
						<view class="gray">评价</view>
						<view class="number-color">10</view>
					</view>
				</view>
				<view class="row4">
					<view class="flex fontsize-26">
						<view class="left">装</view>
						<view class="right flex align-center">辽宁省营口市鲅鱼圈区蝴蝶泉路116号</view>
					</view>
					<u-line class="line" margin="20rpx 0"></u-line>
					<view class="flex fontsize-26">
						<view class="left-x">卸</view>
						<view class=" right align-center">黑龙江省齐齐哈尔市梅里斯达斡尔族区杜尔门沁达斡尔乡53农场</view>
					</view>
				</view>
			</view>
			<view class="content2">
				<view class="flex align-center">
					<view class="left">货物</view>
					<view>玉米|20吨</view>
				</view>
				<view class="flex align-center msx20">
					<view class="left">距离</view>
					<view class="right flex">
						<view>运输距离月500公里</view>
						<u-icon name="map-fill" color="#2772FB" @click="toMap()"></u-icon>
					</view>
				</view>
				<view class="flex align-center">
					<view class="left">运费</view>
					<view class="right">100元/车</view>
				</view>
				<view class="flex msx20">
					<view class="left">日期</view>
					<view class="right">
						<view class="in-row flex">
							<view class="text">发车</view>
							<view class="time">2022-01-27 15:15:15</view>
						</view>
						<view class="in-row flex">
							<view class="text">装车</view>
							<view class="time">2022-01-27~2022-01-30</view>
						</view>
					</view>
				</view>
				<view class="flex align-center">
					<view class="left">车型</view>
					<view class="right">10-15米 | 平板/高栏 | 约30吨</view>
				</view>
				<view class="flex mt20">
					<view class="left">描述</view>
					<view class="right">
						我是发运任务描述我是发运任务描述我是发运任务描述我是发运任务描述我是发运任务描述我是发运任务描述我是发运任务描述我是发运任务描述我是发运任务描述我是发运任务描述我是发运任务描述
					</view>
				</view>
			</view>
			<view class="content3">
				<view class="left">运费<view class="text">100元/车</view></view>
				<view class="right">
					<view class="btn">立即抢单</view>
				</view>
				<!-- <view class="right">
					<u-button type="error" text="已抢单" disabled></u-button>
				</view> -->
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: '#317AFE',
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
			};
		},
		onLoad(options) {
			console.log(options)
		},
		methods: {
			toMap(){
				uni.$u.route('/pages/goodSource/map', {
					id: 1,
				});
			},
			back(){
				uni.navigateBack({
					
				})
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: '114' //仅为示例
				});
			},
		}
	}
</script>

<style lang="scss">
	/deep/.u-navbar__content__right__text {
		background: rgba(255, 255, 255, 0.2);
		padding: 3px 10px;
		border-radius: 16px;
		font-size: 26rpx;
		color: #FFFFFF;
	}

	.top-bgc {
		position: relative;
		width: 100%;
		height: 519rpx;
		background: linear-gradient(180deg, #317AFE 0%, #F8F9FC 100%);

	}

	.content-move {
		position: relative;
		top: -460rpx;
	}

	.content1 {
		background: white;
		margin: 0 20rpx;
		border-radius: 20rpx;
		padding: 0 30rpx;

		.row1 {
			.left {
				position: relative;
				top: -50rpx;
				align-items: flex-end;
			}
		}

		.row3 {
			margin: 20rpx 0;

			.item {
				margin-right: 40rpx;
			}
		}

		.row4 {
			align-items: center;
			padding-bottom: 20rpx;

			.left {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30rpx;
				height: 30rpx;
				background: #2772FB;
				padding: 20rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				border-radius: 8rpx;
				color: #FFFFFF;
			}

			.left-x {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30rpx;
				height: 30rpx;
				background: #FE6300;
				padding: 20rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				border-radius: 8rpx;
				color: #FFFFFF;
			}

			.right {
				color: #666666;
				margin-left: 20rpx;
			}

		}
	}

	.call {
		display: flex;
		align-items: center;
		background: #E5F0FE;
		padding: 6rpx 30rpx;
		border-radius: 30rpx;
		color: #2772FB;
	}

	.number-color {
		margin-left: 20rpx;
	}

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

		.left {
			font-size: 26rpx;
			color: #666666;
			margin-right: 20rpx;
			box-sizing: border-box;
			width: 10%;
		}

		.right {
			width: 90%;
			font-size: 26rpx;
		}
		.in-row{
			.text{
				margin-right: 60rpx;
			}
		}
	}
	.content3{
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		background: white;
		justify-content: space-between;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		align-items: center;
		.left{
			display: flex;
			.text{
				color:#FE6300 ;
				margin-left: 20rpx;
			}
		}
	}
	.btn{
		background: #2772FB;
		color: white;
		font-size: 28rpx;
		border-radius: 40rpx;
		padding: 10rpx 30rpx;
	}
</style>