wuliu/pages/user/transport/transport.vue

<template>
	<view>
		<view class="top">
			<image src="@/static/用户协议.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
			<view class="topwz">订单信息</view>
		</view>
		<view class="boxdd">
			<view class="boxddrow"><text>发货地</text> <text class="rightwz1">江苏省南京市建邺区</text> </view>
			<view class="boxddrow"><text>收货地</text> <text class="rightwz1">江苏省南京市建邺区</text> </view>
			<view class="boxddrow"><text>载货量</text> <text class="rightwz1">50立方</text> </view>
			<view class="boxddrow"><text>所需车型</text> <text class="rightwz">13.5米</text> </view>
			<view class="boxddrow"><text>运输价格</text> <text class="rightwz">￥200</text> </view>
			<view class="boxddrow"><text>装货时间</text> <text class="rightwz">2024-06-22 18:00</text> </view>
			<view class="boxddrow"><text>运输时间</text> <text class="rightwzys">今日达</text> </view>
		</view>
		<view class="top">
			<image src="@/static/车辆信息.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
			<view class="topwz">车辆信息</view>
		</view>
		<view class="boxcl">
			<view class="boxddrow"><text>司机姓名</text> <text class="rightwz1cl">张三</text> </view>
			<view class="boxddrow"><text>司机电话</text> <text class="rightwz1cl">13087900668</text> </view>
			<view class="boxddrow"><text>车型</text> <text class="rightwz1">13.5米</text> </view>
		</view>
		<view class="top">
			<image src="@/static/回执单.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
			<view class="topwz">提交回执单</view>
		</view>
		<view class="hzd">

		</view>
		<view class="subbox">
			<image src="@/static/shangchuan.png" mode=""
				style="width: 44rpx;height: 44rpx;margin-left: 50rpx;margin-top: 43rpx;" @click="uploadFile"></image>
			<button class="subbtn">提交回执单</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			uploadFile() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log('tempFilePaths',chooseImageRes);
						uni.uploadFile({
							url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
							}
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
	.subbox {
		display: flex;
		width: 750rpx;
		height: 130rpx;
		background: #FFFFFF;
	}

	.subbtn {
		width: 580rpx;
		height: 90rpx;
		background: #0D5DC9;
		border-radius: 45rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-left: 50rpx;
		margin-top: 20rpx;
	}

	.boxcl {
		background: #fff;
		margin: 0 auto;
		width: 702rpx;
	}

	.rightwz1cl {
		margin-left: 43rpx;
	}

	.rightwzys {
		display: inline-block;
		text-align: center;
		width: 110rpx;
		height: 56rpx;
		background: #F9F3EB;
		border-radius: 10rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 24rpx;
		color: #FA9512;
		margin-left: 69rpx;
		line-height: 56rpx
	}

	.boxddrow {
		padding: 29rpx;
		border-bottom: 1px solid #EAEAEA;
	}

	.rightwz1 {
		margin-left: 105rpx;
	}

	.rightwz {
		margin-left: 69rpx;
	}

	.boxdd {
		margin: 0 auto;
		width: 702rpx;
		/* height: 619rpx; */
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 23rpx;
	}

	.topwz {
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 34rpx;
		color: #222222;
	}

	.top {
		display: flex;
		padding: 17rpx;
	}
</style>