完善订单任务新增弹窗

aircraft/server/order/detail.vue

@@ -97,16 +97,38 @@
 				</view>
 				<view class="action-lam" style="margin-top: 72rpx;">
 					<view class="lam-title">执行设备</view>
-					<u-input v-model="form.equipment" @click="handleClickPick"
+					<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 v-model.number="form.equipment" @click="handleClickPick"
+					<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)',
@@ -124,12 +146,27 @@ export default {
 	},
 	// #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/',
 			// 订单页图标基础路径
@@ -152,9 +189,14 @@ export default {
 			scrollTop: 0,
 			// 展示任务新增弹窗
 			showAddAction: false,
+			// 执行设备列表
+			equipments:[],
+			// 显示设备选择器
+			showEquipment: false,
 			// 任务form
 			form:{
-				equipment: '',
+				equipmentName: '',
+				equipmentId: '',
 				weight: '',
 				photo: ''
 			}
@@ -169,7 +211,21 @@ export default {
 	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 || '';
 		}
 	}
 }
@@ -325,11 +381,25 @@ export default {
 				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;
@@ -337,6 +407,54 @@ export default {
 				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;
 		}
 	}
 }