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">{{ orderDetail.mainOrderStatus }}</view>
				<view class="order-tips">{{ orderDetail.mainOrderStatus === '已完成' ? '已完成飞行任务' : 
				orderDetail.mainOrderStatus === '待确认'?'请尽快确认完成订单':'请尽快执行任务'}}</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">{{ orderDetail.orderType.slice(0, 2) }}</text>
					</view>
					<view class="mc-lam">
						<text class="lam-title">景区</text>
						<text class="lam-value">{{ orderDetail.scenicName }}</text>
					</view>
					<view class="mc-lam">
						<text class="lam-title">路线</text>
						<text class="lam-value">{{ orderDetail.routeName }}</text>
					</view>
					<view class="mc-lam">
						<text class="lam-title">货物重量</text>
						<text class="lam-value">{{ orderDetail.cargoWeight }} KG</text>
					</view>
					<view class="mc-lam">
						<text class="lam-title">附加费</text>
						<text class="lam-value"><text>{{ orderDetail.surchargeAmount }}</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" v-if="!isPilot">
						<text class="lam-title">订单号</text>
						<text class="lam-value">{{ orderDetail.orderNo }}</text>
					</view>
					<view class="mc-lam">
						<text class="lam-title">发起人</text>
						<text class="lam-value">{{ orderDetail.orderInitiator }}</text>
					</view>
					<view class="mc-lam" v-if="isPilot">
						<text class="lam-title">客户名称</text>
						<text class="lam-value">{{ orderDetail.customerName }}</text>
					</view>
					<view class="mc-lam">
						<text class="lam-title">手机号</text>
						<text class="lam-value">{{ isPilot?orderDetail.phone:orderDetail.initiatorPhone }}</text>
					</view>
					<view class="mc-lam">
						<text class="lam-title">操作员</text>
						<text class="lam-value">{{ orderDetail.operatorName }}</text>
					</view>
					<view class="mc-lam">
						<text class="lam-title">下单时间</text>
						<text class="lam-value">{{ orderDetail.orderCreateTime }}</text>
					</view>
					<view class="mc-lam" v-if="!isPilot">
						<text class="lam-title">订单确认人</text>
						<text class="lam-value">{{ orderDetail.customerName }}</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="fly-message-content" :style="{backgroundImage: `url(${fileUrl+mask})`}" 
				v-for="(item, index) in orderDetail.orderTaskDetailList" :key="index">
					<view class="action-detail">
						<u-image @click="preview(orderDetail.attachmentMaterialList[0].fileFullPath||(fileUrl+defaultIcon))" 
						border-radius="20" width="140" height="140" class="action-detail-photo" 
						:src="orderDetail.attachmentMaterialList[0].fileFullPath||(fileUrl+defaultIcon)" />
						<view class="action-detail-content">
							<view class="action-device">{{ item.deviceName }}</view>
							<view>重量: {{ item.cargoWeight }}KG</view>
							<view class="action-operator">操作员: {{ item.operatorName }}</view>
						</view>
						<view class="action-detail-status" :style="{color: item.orderItemStatus==='未进行'?'#F8B500':'#666666'}">
							{{ item.orderItemStatus }}
						</view>
					</view>
					<view class="action-btns" v-if="isPilot&&!['已完成','待确认','已取消'].includes(orderDetail.mainOrderStatus)">
						<u-button :custom-style="deleteCustomStyle" style="margin-left: auto;"
						:hair-line="false" @click="handleDeleteAction(item)">删除</u-button>
						<u-button type="warning" :custom-style="customStyle" style="margin-left: 20rpx;margin-right: 30rpx;"
						:hair-line="false" @click="handleChangeAction(item)">更改状态</u-button>
					</view>
					<view class="action-btns" v-else />
				</view>
				<view class="message-empty" v-if="!orderDetail.orderTaskDetailList||orderDetail.orderTaskDetailList.length===0">
					<u-image width="200rpx" height="130rpx" :src="fileUrl+empty" />
					<view class="empty-text">
						~暂无任务~
					</view>
				</view>
			</view>
		</view>
		<view class="order-bottom" v-if="!['已完成','已取消'].includes(orderDetail.mainOrderStatus)">
			<view class="add-action" @click="addAction" v-if="isPilot&&orderDetail.mainOrderStatus!=='待确认'">
				新增任务
			</view>
			<view class="add-action" v-else-if="!isPilot&&orderDetail.mainOrderStatus==='待确认'"
			@click="finishOrder">
				完成订单
			</view>
		</view>
		<u-popup v-model="showAddAction" mode="bottom" border-radius="40" @close="closeAddAction">
			<view class="action-popup">
				<view class="action-top">
					<view class="action-close" />
					<view class="action-title">{{current===0?'新增任务':'注意事项'}}</view>
					<u-icon class="action-close" :name="fileUrl+closeIcon" size="32" @click="showAddAction=false" />
				</view>
				<view v-if="current === 0">
					<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;" placeholder="请选择设备" type="select" 
						v-model="form.deviceName" @click="handleClickPick('设备')" :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="form.routeName" type="select" :clearable="false"
						@click="handleClickPick('路线')" placeholder="请选择路线" />
					</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.cargoWeight"
						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" ref="uploadRef"
							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>
				<view v-else-if="current === 1">
					<view class="action-attention">
						<view class="attention-title">
							1. 乘客管理<br/>准入条件<br/>
						</view>
						<view class="attention-content">
							✅ 身高/体重限制（如：40kg-100kg，需明确公示）；<br/>
							✅ 禁止孕妇、心血管疾病患者、醉酒者乘机；<br/>
							✅ 签署《风险告知书》并购买保险。<br/>
						</view>
						<view class="attention-title">
							行为规范<br/>
						</view>
						<view class="attention-content">
							❗ 全程系紧安全带，禁止触碰舱门/舷窗；<br/>
							❗ 禁止携带易燃易爆物品（含充电宝＞100Wh）；<br/>
							❗ 飞行中禁用电子设备（防信号干扰）。<br/>
						</view>
						<view class="attention-title">
							2. 飞行安全<br/>气象红线<br/>
						</view>
						<view class="attention-content">
							🔸 风速＞8m/s、能见度＜1km、雷雨天气立即停飞；<br/>
							🔸 高原景区需额外监测空气密度（影响升力）。<br/>
						</view>
					</view>
				</view>
				<view v-else-if="current === 2">
					<view class="action-attention">
						<view class="attention-title">
							应急程序<br/>
						</view>
						<view class="attention-content">
							✅ 每架次配应急降落伞（需定期检修）；<br/>
							✅ 预设迫降点（避开人群/水域，景区地图标注）；<br/>
							✅ 乘客紧急通话按钮直连指挥中心。
						</view>
					</view>
				</view>
				<view class="action-save" @click="handleSave">
					{{current === 0 ? '保存' : current === 1 ? '下一页' : '我已知晓'}}
				</view>
			</view>
		</u-popup>
		<u-picker mode="selector" v-model="showPick" :default-selector="getDefaultSelector" :range="pickType==='设备'?equipments:routes"
		range-key="value" confirm-color="#f7c04d" :title="`执行${pickType}`" @confirm="handleChangePick"></u-picker>
		<u-modal v-model="showChangeState" title="更新状态" show-cancel-button confirm-color="#f7c04d" @confirm="handleChangeState">
			<view class="slot-content">
				<u-input placeholder="请选择任务状态" v-model="stateForm.taskStatusName"
				@click="showChangeStatePick = true" type="select"/>
				<u-picker mode="selector" v-model="showChangeStatePick" :default-selector="getDefaultStateSelector" :range="stateList"
				range-key="value" confirm-color="#f7c04d" title="飞行任务状态" @confirm="handleClickState"></u-picker>
			</view>
		</u-modal>
		<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>
		<u-toast ref="uToast"></u-toast>
		<DotLoading :show="dotLoading" />
	</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 isDevice = this.pickType === '设备';
			const index = isDevice ? this.form.deviceId : this.form.routeId;
			const arr = isDevice ? this.equipments : this.routes;
			return index?[arr.findIndex(item=>item.key === index)]:[0];
		},
		// 获取状态选择器默认值
		getDefaultStateSelector(){
			return [this.stateList.findIndex(item=>item.key === this.stateForm.taskStatus)]||[0];
		}
	},
	data(){
		return{
			// #ifdef MP
			// 微信小程序自定义导航栏参数
			CustomBar: this.CustomBar || 0,
			// #endif
			// 上传api
			uploadApi: configService.apiUrl+'/api/s3Storage',
			// 上传请求头
			uploadFileHeader: {
				'Authorization':this.$store.state.vuex_token,
			},
			// 执行任务按钮样式
			customStyle: {
				backgroundColor: '#FEE547',
				color: '#333333',
				fontSize: '30rpx',
				fontWeight: 'bold',
				fontFamily: 'Source Han Sans SC',
				width: '160rpx',
				height: '72rpx',
				borderRadius: '12rpx',
				border: 'none'
			},
			deleteCustomStyle:{
				backgroundColor: '#FFFFFF',
				color: '#333333',
				fontSize: '30rpx',
				fontWeight: 'bold',
				fontFamily: 'Source Han Sans SC',
				width: '160rpx',
				height: '70rpx',
				borderRadius: '10rpx',
				border: '2rpx solid #999999'
			},
			// 状态表单
			stateForm: {
				orderTaskId: '',
				taskStatus: 0,
				taskStatusName: '未进行'
			},
			// 上传文件
			fileList: [],
			//我的页图标基础路径
			myFileUrl: configService.fileUrl + 'aerocraft/my/',
			// 订单页图标基础路径
			fileUrl: configService.fileUrl + 'aerocraft/order/',
			// 轮播图
			topBg: 'top-bg-a.png',
			// 文字背景图
			textBg: 'text-bg.png',
			// 飞行任务空图标
			empty: 'action-empty.png',
			// 下拉三角
			triangle: 'triangle.png',
			// 弹窗关闭图标
			closeIcon: 'close.png',
			// 上传图片图标
			uploadIcon: 'upload.png',
			// 蒙层
			mask: 'mask.png',
			// 飞行任务默认图片
			defaultIcon: 'default.png',
			// 页面是否滚动到顶
			topLevel: 0,
			// 滚动顶部
			scrollTop: 0,
			// 展示任务新增弹窗
			showAddAction: false,
			// 执行设备列表
			equipments:[],
			// 显示选择器
			showPick: false,
			// 选择器类型
			pickType: '',
			// 显示状态更改弹窗
			showChangeState: false,
			showChangeStatePick: false,
			// 任务form
			form:{
				orderId: '',
				deviceName: '',
				deviceId: '',
				cargoWeight: '',
				attachmentMaterialList: [],
				routeId: '',
				routeName: ''
			},
			// 新增任务加载
			dotLoading: false,
			// 路线列表
			routes: [],
			// 订单详情
			orderDetail: {},
			// 当前页
			current: 0,
			// 状态列表
			stateList: [
				{ key: 0, value: '未进行' },
				{ key: 1, value: '进行中' },
				{ key: 2, value: '已完成' },
				{ key: 3, value: '已取消' },
			],
			isPilot: this.$store.state.user_type == 1,
		}
	},
	onPageScroll(e) {
		const level = e.scrollTop/60;
		if(level<=1) this.topLevel = level;
		else this.topLevel = 1;
		this.scrollTop = e.scrollTop;
	},
	onLoad(e) {
		this.form.orderId = e.id;
		this.init(e.id);
	},
	methods:{
		// 初始化
		async init(id){
			if(!id) return;
			let res = await this.$api.orderDetail(id);
			if(res) this.orderDetail = res;
			else this.$refs.uToast.show({type: 'error',title: "订单详情获取失败!"});
			let resp = await this.$api.allRoutesByScenicId(res.attractionId);
			if(resp){
				this.routes = resp || [];
			} else {
				this.$refs.uToast.show({type: 'error',title: "景区路线获取失败!"});
			}
			let respx = await this.$api.obtainDeviceList({attractionId: res.attractionId});
			if(respx){
				this.equipments = respx || [];
			} else {
				this.$refs.uToast.show({type: 'error',title: "景区设备获取失败!"});
			}
		},
		// 预览
		preview(url){
			this.$util.tools.methods.lookImage(0,[url]);
		},
		// 关闭弹窗
		closeAddAction(){
			this.clearForm();
			this.showAddAction = false;
		},
		// 打开新增任务弹窗
		addAction(){
			this.showAddAction = true;
		},
		// 获取订单详情
		async getOrderDetail(id){
			let res = await this.$api.orderDetail(id);
			if(res) this.orderDetail = res;
			else this.$refs.uToast.show({type: 'error',title: "订单详情获取失败!"});
		},
		// 设备选择
		handleClickPick(type){
			this.pickType = type;
			this.showPick = true;
		},
		// 上传图片
		uploadFile(file){
			this.form.attachmentMaterialList = [file];
		},
		// 删除图片
		removeFile(index){
			this.form.attachmentMaterialList = [];
		},
		// 选择器值改变
		handleChangePick(index){
			const valueForm = this.pickType==='设备' ? 
			{ list: this.equipments, id: 'deviceId', name: 'deviceName' } : 
			{ list: this.routes, id: 'routeId', name: 'routeName' }
			const val = valueForm.list[index[0]];
			this.form[valueForm.id] = val?.key || '';
			this.form[valueForm.name] = val?.value || '';
		},
		// 选择飞行任务状态
		handleClickState(index){
			const val = this.stateList[index[0]];
			this.stateForm.taskStatus = val.key;
			this.stateForm.taskStatusName = val.value;
		},
		// 保存任务
		async handleSave(){
			if(this.current!==0){
				this.showAddAction = this.current !== 2;
				this.current = (this.current+1)%3;
				return;
			}
			const data = this.form;
			console.log(data);
			let warningMessage = '';
			if(!data.deviceId){
				warningMessage = '请选择执行设备！';
			}else if(!data.routeId){
				warningMessage = '请选择执行路线！';
			}else if(!data.cargoWeight||!/^-?\d*\.?\d+$/.test(data.cargoWeight)){
				warningMessage = '载货重量格式错误！';
			}else if(data.attachmentMaterialList.length===0){
				warningMessage = '请上传货物图片！';
			}else{
				try {
					this.dotLoading = true;
					let res = await this.$api.addOrderTask(data);
					if(res === undefined){
						this.dotLoading = false;
						this.$refs.uToast.show({type: 'error',title: '当前无法新增飞行任务！'});
						return;
					}
					await this.clearForm();
					await this.getOrderDetail(this.form.orderId);
					this.dotLoading = false;
					this.current += 1;
					this.$refs.uToast.show({type: 'success',title: `飞行任务新增成功!`});
				} catch (error) {
					this.dotLoading = false;
					this.$refs.uToast.show({type: 'error',title: '当前无法新增飞行任务！'});
				}
				return;
			}
			this.$refs.uToast.show({type: 'warning',title: warningMessage});
		},
		// 修改任务状态 
		async handleChangeState(){
			try {
				const { orderTaskId, taskStatus } = this.stateForm;
				let res = await this.$api.editOrderStatus(orderTaskId, taskStatus);
				this.showChangeState = false;
				if(res === undefined){
					this.$refs.uToast.show({type: 'error',title: '无法更改该飞行任务状态！'});
					return;
				}
				this.$refs.uToast.show({type: 'success',title: `飞行任务状态更改成功!`});
				await this.getOrderDetail(this.form.orderId);
				this.stateForm = {
					orderTaskId: '',
					taskStatus: 0,
					taskStatusName: '未进行'
				};
			} catch (error) {
				this.showChangeState = false;
				this.$refs.uToast.show({type: 'error',title: '无法更改该飞行任务状态！'});
			}
		},
		// 清空表单
		clearForm(){
			this.current = 0;
			this.fileList = [];
			this.$refs['uploadRef'].lists = [];
			this.form = {
				orderId: this.form.orderId,
				deviceName: '',
				deviceId: '',
				cargoWeight: '',
				attachmentMaterialList: [],
				routeId: '',
				routeName: ''
			};
		},
		// 删除任务
		handleDeleteAction(item){
			let that = this;
			uni.showModal({
				title: '提示',
				content: '是否确认删除该飞行任务？',
				confirmColor: '#FE020E',
				success: async(res) => {
					if (res.confirm) {
						try {
							let res = await that.$api.deleteOrderTask(item.id);
							console.log(res);
							if(res === undefined){
								that.$refs.uToast.show({type: 'error',title: "飞行任务无法删除!"});
								return;
							}
							that.getOrderDetail(this.form.orderId);
							that.clearForm();
							that.$refs.uToast.show({type: 'success',title: "飞行任务删除成功!"});
						} catch (error) {
							that.$refs.uToast.show({type: 'error',title: "飞行任务无法删除!"});
						}
					}
				}
			})
		},
		// 更改任务状态
		handleChangeAction({id, orderItemStatus}){
			this.stateForm = {
				orderTaskId: id,
				taskStatusName: orderItemStatus,
				taskStatus: this.stateList.find(item=>item.value===orderItemStatus).key
			};
			this.showChangeState = true;
		},
		// 完成订单
		async finishOrder(){
			let that = this;
			uni.showModal({
				title: '订单完成',
				content: '是否确认完成该订单？',
				confirmColor: '#f7c04d',
				success: async(res) => {
					if (res.confirm) {
						try {
							let res = await that.$api.completeOrder(that.orderDetail.id);
							if(res === undefined){
								that.$refs.uToast.show({type: 'error',title: "订单完成操作失败!"});
								return;
							}
							that.getOrderDetail(that.form.orderId);
							that.$refs.uToast.show({type: 'success', title: `订单完成操作成功!`});
						} catch (error) {
							that.$refs.uToast.show({type: 'error', title: `订单完成操作失败!`});
						}
					}
				}
			})
		},
	}
}
</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;
				}
			}
			&-content{
				background-size: contain;
				margin-top: 16rpx;
				background-repeat: no-repeat;
				// background: linear-gradient(0deg, #FFF6BD, #FFFDF1);
				background-color: #FFFFFF;
				box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(200,199,193,0.3);
				border-radius: 16rpx;
				margin-bottom: 26rpx;
				.action-detail{
					margin: 40rpx 20rpx 0;
					display: flex;
					&-photo{
						margin-right: 20rpx;
					}
					&-content{
						flex: 1;
						display: flex;
						flex-direction: column;
						font-family: Source Han Sans SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						.action-device{
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
							margin-bottom: 16rpx;
						}
						.action-operator{
							margin-top: 12rpx;
						}
					}
					&-status{
						font-family: Source Han Sans SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #F8B500;
						margin-right: 10rpx;
					}
				}
				.action-btns{
					margin-top: 18rpx;
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;
				}
			}
			.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{
						white-space: nowrap;
						margin-right: 40rpx;
						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-attention{
			margin: 44rpx 0 72rpx;
			font-family: Source Han Sans SC;
			font-size: 30rpx;
			color: #333333;
			line-height: 60rpx;
			.attention-title{
				font-weight: bold;
			}
		}
		.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;
		}
	}
}
::v-deep .u-default-hover{
	border-color: #F8B500 !important;
	background-color: #fdf6ec !important;
	color: #f29100 !important;
	&:active{
		border-color: #F8B500 !important;
		background-color: #fdf6ec !important;
		color: #f29100 !important;
	}
	&:focus{
		border-color: #F8B500 !important;
		background-color: #fdf6ec !important;
		color: #f29100 !important;
	}
}
.slot-content{
	padding: 10rpx 50rpx;
	border-radius: 6rpx;
}
</style>