aircraft-pilot/aircraft/server/order/detail.vue

<!-- 订单详情 -->
<template>
	<view class="order-detail">
		<Topnav :topLevel="topLevel" title="订单详情" defaultBackColor="#333333"
		 defaultNavTextColor="#333333" showBack />
		<view class="order-top">
			<u-image width="100%" :src="myFileUrl+topBg" mode="widthFix" />
			<view class="top-abs" :style="{top: CustomBar+'px'}">
				<view class="order-status">待接单</view>
				<view class="order-tips">请尽快执行任务</view>
			</view>
		</view>
		<view class="order-content">
			<view class="fly-message">
				<view class="message-title">
					<view class="text-content">飞行信息</view>
					<u-image class="text-bg" width="148" height="28" 
					:src="fileUrl+textBg" />
				</view>
				<view class="message-content">
					<view class="mc-lam">
						<text class="lam-title">订单类型</text>
						<text class="lam-value">载人</text>
					</view>
					<view class="mc-lam">
						<text class="lam-title">景区</text>
						<text class="lam-value">白云山</text>
					</view>
					<view class="mc-lam">
						<text class="lam-title">路线</text>
						<text class="lam-value">南门→山顶广场</text>
					</view>
					<view class="mc-lam">
						<text class="lam-title">货物重量</text>
						<text class="lam-value">56 KG</text>
					</view>
					<view class="mc-lam">
						<text class="lam-title">附加费</text>
						<text class="lam-value"><text>100</text>元</text>
					</view>
				</view>
			</view>
			<view class="fly-message">
				<view class="message-title">
					<view class="text-content">订单信息</view>
					<u-image class="text-bg" width="148" height="28" 
					:src="fileUrl+textBg" />
				</view>
				<view class="message-content">
					<view class="mc-lam">
						<text class="lam-title">发起人</text>
						<text class="lam-value">李晓霞</text>
					</view>
					<view class="mc-lam">
						<text class="lam-title">客户名称</text>
						<text class="lam-value">李晓霞</text>
					</view>
					<view class="mc-lam">
						<text class="lam-title">手机号</text>
						<text class="lam-value">13624566325</text>
					</view>
					<view class="mc-lam">
						<text class="lam-title">操作员</text>
						<text class="lam-value">陈新生</text>
					</view>
					<view class="mc-lam">
						<text class="lam-title">下单时间</text>
						<text class="lam-value">2025-07-06 14:02:08</text>
					</view>
				</view>
			</view>
			<view class="fly-message">
				<view class="message-title">
					<view class="text-content">飞行任务</view>
					<u-image class="text-bg" width="148" height="28" 
					:src="fileUrl+textBg" />
				</view>
				<view class="message-empty">
					<u-image width="200rpx" height="130rpx" :src="fileUrl+empty" />
					<view class="empty-text">
						~暂无任务~
					</view>
				</view>
			</view>
		</view>
		<view class="order-bottom">
			<view class="add-action" @click="showAddAction=true">
				新增任务
			</view>
		</view>
		<u-popup v-model="showAddAction" mode="bottom" border-radius="40">
			<view class="action-popup">
				<view class="action-top">
					<view class="action-close" />
					<view class="action-title">新增任务</view>
					<u-icon class="action-close" :name="fileUrl+closeIcon" size="32" @click="showAddAction=false" />
				</view>
				<view class="action-lam" style="margin-top: 72rpx;">
					<view class="lam-title">执行设备</view>
					<u-input class="lam-input" placeholder-style="font-size:32rpx;color:#B3B3B3;"
					custom-style="font-size:32rpx;"
					v-model="form.equipmentName" @click="handleClickPick"
					placeholder="请选择设备" type="select" :clearable="false" />
				</view>
				<view class="action-lam">
					<view class="lam-title">载货重量</view>
					<u-input class="lam-input" placeholder-style="font-size:32rpx;color:#B3B3B3;"
					custom-style="font-size:32rpx;" v-model.number="form.weight"
					placeholder="请填写重量" type="number" :clearable="false" />
					<view class="lam-input-right">KG</view>
				</view>
				<view class="action-lamx">
					<view class="lam-title">货物图片</view>
					<view class="lam-upload">
						<u-upload :action="uploadApi" max-count="1" :file-list="fileList"
						width="200" height="200" custom-btn :multiple="false" :header="uploadFileHeader"
						@on-success="uploadFile" @on-remove="removeFile" name="file">
							<view slot="addBtn" class="lam-upload-btn">
								<u-icon :name="fileUrl+uploadIcon" size="60"></u-icon>
								<view class="lam-upload-btn-text">上传图片</view>
							</view>
						</u-upload>
					</view>
				</view>
				<view class="action-save">
					保存
				</view>
			</view>
		</u-popup>
		<u-picker mode="selector" v-model="showEquipment" :default-selector="getDefaultSelector" :range="equipments"
		range-key="name" confirm-color="#f7c04d" title="执行设备选择" @confirm="handleChangePick"></u-picker>
		<u-back-top :scrollTop="scrollTop" zIndex="100" :duration="500"
		:iconStyle="{ color: '#fff' }" :customStyle="{background: 'linear-gradient(180deg, #f8b500 0%, #fceabb 100%)',
		boxShadow: '0rpx 0rpx 12rpx rgba(202,202,182,0.5)',
		filter: 'opacity(0.96)'}"></u-back-top>
	</view>
</template>

<script>
import Topnav from '@/components/topnav/index.vue';
import configService from '@/common/config.service.js';
export default {
	// #ifdef MP
	options: {
		styleIsolation: 'shared'
	},
	// #endif
	components: { Topnav },
	computed:{
		// 获取选择器默认值
		getDefaultSelector(){
			const index = this.form.equipmentId;
			return index?[this.equipments.findIndex(item=>item.id === index)]:[0];
		}
	},
	data(){
		return{
			// #ifdef MP
			// 微信小程序自定义导航栏参数
			CustomBar: this.CustomBar || 0,
			// #endif
			// 上传api
			uploadApi: configService.apiUrl+'/api/s3Storage',
			// 上传请求头
			uploadFileHeader: {
				'Authorization':this.$store.state.vuex_token,
			},
			// 上传文件
			fileList: [],
			//我的页图标基础路径
			myFileUrl: configService.fileUrl + 'aerocraft/my/',
			// 订单页图标基础路径
			fileUrl: configService.fileUrl + 'aerocraft/order/',
			// 轮播图
			topBg: 'top-bg.png',
			// 文字背景图
			textBg: 'text-bg.png',
			// 飞行任务空图标
			empty: 'action-empty.png',
			// 下拉三角
			triangle: 'triangle.png',
			// 弹窗关闭图标
			closeIcon: 'close.png',
			// 上传图片图标
			uploadIcon: 'upload.png',
			// 页面是否滚动到顶
			topLevel: 0,
			// 滚动顶部
			scrollTop: 0,
			// 展示任务新增弹窗
			showAddAction: false,
			// 执行设备列表
			equipments:[],
			// 显示设备选择器
			showEquipment: false,
			// 任务form
			form:{
				equipmentName: '',
				equipmentId: '',
				weight: '',
				photo: ''
			}
		}
	},
	onPageScroll(e) {
		const level = e.scrollTop/60;
		if(level<=1) this.topLevel = level;
		else this.topLevel = 1;
		this.scrollTop = e.scrollTop;
	},
	methods:{
		// 设备选择
		handleClickPick(){
			this.showEquipment = true;
		},
		// 上传图片
		uploadFile({fileFullPath}){
			this.form.photo = fileFullPath;
		},
		// 删除图片
		removeFile(index){
			this.form.photo = "";
		},
		// 选择器值改变
		handleChangePick(index){
			const val = this.equipments[index[0]];
			this.form.equipmentId = val?.id || '';
			this.form.equipmentName = val?.name || '';
		}
	}
}
</script>

<style scoped lang="scss">
.order-detail{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	.order-top{
		width: 100%;
		position: relative;
		.top-abs{
			position: absolute;
			.order-status{
				margin-top: 54rpx;
				margin-left: 32rpx;
				font-family: Source Han Sans SC;
				font-weight: bold;
				font-size: 42rpx;
				color: #333333;
			}
			.order-tips{
				margin-top: 28rpx;
				margin-left: 32rpx;
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
			}
		}
	}
	.order-content{
		flex: 1;
		z-index: 1;
		margin-top: -230rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 30rpx calc(150rpx + env(safe-area-inset-bottom));
		.fly-message{
			display: flex;
			flex-direction: column;
			margin-bottom: 40rpx;
			.message-title{
				position: relative;
				height: 52rpx;
				.text-content{
					z-index: 1;
					font-family: Source Han Sans SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
					position: absolute;
				}
				.text-bg{
					z-index: 0;
					top: 0;position: absolute;
					left: 0;
					margin-top: 24rpx;
				}
			}
			.message-empty{
				margin-top: 16rpx;
				padding: 90rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				.empty-text{
					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #999999;
					margin-top: 30rpx;
				}
			}
			.message-content{
				margin-top: 16rpx;
				background: #F7F7F7;
				border-radius: 30rpx;
				display: flex;
				flex-direction: column;
				padding: 0 30rpx;
				overflow: hidden;
				.mc-lam{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 36rpx 0;
					border-bottom: 2rpx solid #E6E6E6;
					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 32rpx;
					&:nth-last-child(1){
						border-bottom: none;
					}
					.lam-title{
						color: #5E5E5E;
					}
					.lam-value{
						color: #333333;
						text{
							margin-right: 12rpx;
							color: #FA6400;
							font-family: Arial;
							font-weight: bold;
							font-size: 34rpx;
						}
					}
				}
			}
		}
	}
	.order-bottom{
		z-index: 2;
		position: fixed;
		bottom: -2rpx;
		width: 100%;
		background-color: #FFFFFF;
		padding: 16rpx 24rpx calc(24rpx + env(safe-area-inset-bottom));
		.add-action{
			background: #FEE547;
			border-radius: 12rpx;
			font-family: Source Han Sans SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30rpx 0;
			&:active{
				margin: 4rpx 0;
				font-size: 26rpx;
				opacity: 0.8;
			}
		}
	}
	.action-popup{
		padding: 30rpx 34rpx;
		.action-top{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.action-title{
				font-family: Source Han Sans SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
			}
			.action-close{
				margin-top: -10rpx;
			}
		}
		.action-lamx{
			margin-top: 16rpx;
			display: flex;
			padding-bottom: 30rpx;
			margin-bottom: 124rpx;
			.lam-title{
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #1A1A1A;
				margin-right: 52rpx;
			}
		}
		.action-lam{
			border-bottom: 2rpx solid #D9D9D9;
			margin-bottom: 34rpx;
			display: flex;
			align-items: center;
			padding-bottom: 30rpx;
			.lam-title{
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #1A1A1A;
				margin-right: 50rpx;
			}
			.lam-input{
				flex: 1;
				&::v-deep .u-icon__icon{
					color: #333333 !important;
				}
			}
			.lam-input-right{
				font-family: Source Han Sans SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}
		}
		.action-save{
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FEE547;
			border-radius: 12rpx;
			font-family: Source Han Sans SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			padding: 30rpx 0;
			margin-bottom: 44rpx;
			&:active{
				opacity: 0.8;
			}
		}
	}
}
.lam-upload{
	&-btn{
		width: 200rpx;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		border: 2rpx solid #CCCCCC;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		&-text{
			margin-top: 14rpx;
			font-family: Source Han Sans SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #1A1A1A;
		}
	}
}
</style>