订单新增弹窗

aircraft/server/order/detail.vue

@@ -84,10 +84,29 @@
 			</view>
 		</view>
 		<view class="order-bottom">
-			<view class="add-action">
+			<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 v-model="form.equipment" @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"
+					placeholder="请填写重量" type="number" :clearable="false" />
+				</view>
+			</view>
+		</u-popup>
 		<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)',
@@ -121,10 +140,24 @@ export default {
 			textBg: 'text-bg.png',
 			// 飞行任务空图标
 			empty: 'action-empty.png',
+			// 下拉三角
+			triangle: 'triangle.png',
+			// 弹窗关闭图标
+			closeIcon: 'close.png',
+			// 上传图片图标
+			uploadIcon: 'upload.png',
 			// 页面是否滚动到顶
 			topLevel: 0,
 			// 滚动顶部
 			scrollTop: 0,
+			// 展示任务新增弹窗
+			showAddAction: false,
+			// 任务form
+			form:{
+				equipment: '',
+				weight: '',
+				photo: ''
+			}
 		}
 	},
 	onPageScroll(e) {
@@ -133,6 +166,12 @@ export default {
 		else this.topLevel = 1;
 		this.scrollTop = e.scrollTop;
 	},
+	methods:{
+		// 设备选择
+		handleClickPick(){
+			
+		}
+	}
 }
 </script>
 
@@ -270,5 +309,35 @@ export default {
 			}
 		}
 	}
+	.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-lam{
+			border-bottom: 2rpx solid #D9D9D9;
+			margin-bottom: 34rpx;
+			display: flex;
+			align-items: center;
+			.lam-title{
+				font-family: Source Han Sans SC;
+				font-weight: 400;
+				font-size: 32rpx;
+				color: #1A1A1A;
+				margin-right: 50rpx;
+			}
+		}
+	}
 }
 </style>