rtliveDoctor/pages_task/completeTask.vue

<template>
	<view class="container">

		
		<scroll-view class="content" scroll-y>
			<!-- 标题 -->
			<view class="form-section">
				<view class="form-label">
					<text class="required">*</text>
					<text>标题</text>
				</view>
				<view class="form-input-wrapper">
					<textarea 
						class="form-input" 
						style="height: 100rpx;"
						v-model="formData.title" 
						placeholder="请输入标题"
						maxlength="50"
						@input="onTitleInput"
					></textarea>
					<view class="char-count">{{ titleLength }}/50</view>
				</view>
			</view>
			
			<!-- 摘要 -->
			<view class="form-section">
				<view class="form-label">
					<text>摘要 (选填)</text>
				</view>
				<view class="form-input-wrapper">
					<textarea 
						class="form-input" 
						v-model="formData.summary" 
						placeholder="请输入摘要"
						maxlength="100"
						@input="onSummaryInput"
					></textarea>
					<view class="char-count">{{ summaryLength }}/100</view>
				</view>
			</view>
			
			<!-- 项目分组 -->
		<!-- 	<view class="form-section">
				<view class="form-label">
					<text class="required">*</text>
					<text>项目分组</text>
				</view>
				<view class="form-select" @click="showGroupPicker = true">
					<text :class="formData.groupId ? '' : 'placeholder'">
						{{ formData.groupName || '请选择分组' }}
					</text>
					<text class="arrow-right">></text>
				</view>
			</view> -->
			
			<!-- 项目标签 -->
			<!-- <view class="form-section">
				<view class="form-label">
					<text class="required">*</text>
					<text>项目标签</text>
				</view>
				<view class="form-select" @click="showTagPicker = true">
					<text :class="formData.tagId ? '' : 'placeholder'">
						{{ formData.tagName || '请选择标签' }}
					</text>
					<text class="arrow-right">></text>
				</view>
			</view> -->
			
			<!-- 上传封面 -->
			<view class="form-section">
				<view class="form-label">
					<text class="required">*</text>
					<text>上传封面</text>
				</view>
				<view class="form-tips">仅支持jpg/png文件,单个图片不超过2M</view>
				<view class="upload-cover" @click="chooseCoverImage">
					<image class="img" v-if="formData.coverImage" :src="formData.coverImage" mode=""></image>
					<view v-else class="upload-placeholder">
						<image class="w48 h48" src="@/static/image/icon_camera1.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 上传进度弹窗 -->
			<view class="upload-modal" v-if="showUploadModal">
				<view class="upload-modal-content">
					<view class="upload-modal-title">文件上传中</view>
					<view class="upload-progress-wrapper">
						<progress :percent="percent" stroke-width="8" show-info activeColor="#4CAF50" border-radius="10"></progress>
					</view>
					<view class="upload-modal-tips">请勿关闭页面</view>
				</view>
			</view>
			<!-- 上传附件 -->
			<view class="form-section">
				<view class="form-label">
					<text class="required">*</text>
					<text>上传附件</text>
				</view>
				<view v-if="taskType==4" class="form-tips">支持PDF等文件,单个文件不超过2M</view>
				<view v-else class="form-tips">支持MP4等文件,单个文件不超过500M</view>
				<view class="attachment-list">
					<view class="attachment-item" v-for="(item, index) in formData.attachments" :key="index">
						<text class="attachment-icon"></text>
						<view class="attachment-info" style="width: 90%;">
							<text class="attachment-name one-t" style="width: 90%;">{{ item.name }}</text>
							<text class="attachment-size">{{ item.size }}</text>
						</view>
						<text class="attachment-delete" @click="removeAttachment(index)">×</text>
					</view>
					<view class="add-attachment" @click="chooseAttachment">
						<text class="add-icon">+</text>
						<text>添加附件</text>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 提交按钮 -->
		<view class="submit-box">
			<view class="submit-btn" @click="handleSubmit">提交</view>
		</view>
		
		
		<!-- 分组选择弹窗 -->
		<view class="picker-popup" v-if="showGroupPicker" @click="showGroupPicker = false">
			<view class="picker-content" @click.stop>
				<view class="picker-header">
					<view class="picker-cancel" @click="showGroupPicker = false">取消</view>
					<view class="picker-title">选择分组</view>
					<view class="picker-confirm" @click="confirmGroup">确定</view>
				</view>
				<view class="picker-body">
					<view class="picker-item" 
						:class="{ active: tempGroupId === item.id }"
						v-for="(item, index) in groupOptions" 
						:key="index"
						@click="tempGroupId = item.id; tempGroupName = item.projectName">
						{{ item.projectName }}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 标签选择弹窗 -->
		<view class="picker-popup" v-if="showTagPicker" @click="showTagPicker = false">
			<view class="picker-content" @click.stop>
				<view class="picker-header">
					<view class="picker-cancel" @click="showTagPicker = false">取消</view>
					<view class="picker-title">选择标签</view>
					<view class="picker-confirm" @click="confirmTag">确定</view>
				</view>
				<view class="picker-body">
					<view class="picker-item" 
						:class="{ active: tempTagId === item.dictValue }"
						v-for="(item, index) in tagOptions" 
						:key="index"
						@click="tempTagId = item.dictValue; tempTagName = item.dictLabel">
						{{ item.dictLabel }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { submitTask, getGroupOptions, getTagOptions } from '@/api/airClassroom'
import { deleteFile, deleteBatch, checkFast, complete,postPolicy} from '@/api/common.js'
export default {
	data() {
		return {
			percent: 0,
			showUploadModal: false, // 控制上传进度弹窗显示
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
			taskId: '',
			taskType:null,
			isEdit: false,
			showGroupPicker: false,
			showTagPicker: false,
			tempGroupId: '',
			tempGroupName: '',
			tempTagId: '',
			tempTagName: '',
			formData: {
				title: '',
				summary: '',
				groupId: '',
				groupName: '',
				tagId: '',
				tagName: '',
				coverImage: '',
				attachments: []
			},
			groupOptions: [
				// { id: '1', name: '学术' },
				// { id: '2', name: '临床' },
				// { id: '3', name: '科研' }
			],
			tagOptions: [
				// { id: '1', name: '长视频' },
				// { id: '2', name: '短视频' },
				// { id: '3', name: '文章' }
			]
		}
	},
	computed: {
		titleLength() {
			return this.formData.title.length
		},
		summaryLength() {
			return this.formData.summary.length
		}
	},
	onLoad(options) {
		if (options.id) {
			this.taskId = options.id
			this.taskType = options.taskType
		}
		if (options.edit === 'true') {
			this.isEdit = true
			this.loadTaskData()
		}
		this.loadOptions()
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		onTitleInput(e) {
			this.formData.title = e.detail.value
		},
		onSummaryInput(e) {
			this.formData.summary = e.detail.value
		},
		confirmGroup() {
			this.formData.groupId = this.tempGroupId
			this.formData.groupName = this.tempGroupName
			this.showGroupPicker = false
		},
		confirmTag() {
			this.formData.tagId = this.tempTagId
			this.formData.tagName = this.tempTagName
			this.showTagPicker = false
		},
		chooseCoverImage() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					uni.showLoading({ title: '上传中...' })
					console.log('图片路径',res)
					const filePath = res.tempFilePaths[0]
					const requestPath = uni.getStorageSync('requestPath')
					const uploadTask = uni.uploadFile({
						url: `${requestPath}/app/common/uploadOSS`,
						filePath: filePath,
						name: 'file',
						formData: {},
						success: (uploadRes) => {
							uni.hideLoading()
							try {
								const result = typeof uploadRes.data === 'string' ? JSON.parse(uploadRes.data) : uploadRes.data
								if (result.code == 200) {
									this.formData.coverImage = result.url
									uni.showToast({ icon: 'success', title: '上传成功' })
								} else {
									uni.showToast({ icon: 'none', title: result.msg || '上传失败' })
								}
							} catch (e) {
								uni.hideLoading()
								console.error('解析上传结果失败', e)
								uni.showToast({ icon: 'none', title: '上传失败' })
							}
						},
						fail: (err) => {
							// this.percent = 0;
							console.error('上传失败', err)
							uni.showToast({ icon: 'none', title: '上传失败' })
						}
					})
				}
			})
		},
		chooseAttachment(){
			var vm = this;
			         // 对更多字符编码的 url encode 格式
			         var camSafeUrlEncode = function (str) {
			            return encodeURIComponent(str)
			                    .replace(/!/g, '%21')
			                    .replace(/'/g, '%27')
			                    .replace(/\(/g, '%28')
			                    .replace(/\)/g, '%29')
			                    .replace(/\*/g, '%2A');
			         };
			         const requestPath = uni.getStorageSync('requestPath')
			         // 获取上传路径、上传凭证
			         var getUploadInfo = function (extName, callback) {
			            // 传入文件后缀，让后端生成随机的 COS 对象路径，并返回上传域名、PostObject 接口要用的 policy 签名
			            // 参考服务端示例：https://github.com/tencentyun/cos-demo/tree/main/server/post-policy
			            uni.request({
			               url: `${requestPath}/app/upload/post-policy?ext=` + extName,
			               success: (res) => {
			                 // 确认返回格式是否正确
			                 //console.log(res);
			                  callback && callback(null, res.data);
			               },
			               error(err) {
			                  callback && callback(err);
			               },
			            });
			         };
			
			         // 发起上传请求，上传使用 PostObject 接口，使用 policy 签名保护
			         // 接口文档：https://cloud.tencent.com/document/product/436/14690#.E7.AD.BE.E5.90.8D.E4.BF.9D.E6.8A.A4
			         var uploadFile = function (opt, callback) {
						  console.log("上传参数", opt);
			            // 构建表单数据（字段名必须使用带连字符的格式，符合腾讯云 PostObject 接口要求）
			            var formData = {
			               key: opt.data.key, // 文件路径（必须是 key，不是 cosKey）
			               policy: opt.data.policy, // policy 的 base64 字符串
			               success_action_status: '200',  // 成功状态码
			               'q-sign-algorithm': opt.data.qsignAlgorithm,// 签名算法（必须是 q-sign-algorithm）
			               'q-ak': opt.data.qak,
			               'q-key-time': opt.data.qkeyTime, // 密钥有效时间（必须是 q-key-time）
			               'q-signature': opt.data.qsignature // 签名（必须是 q-signature）
			            };
			            
			            // 如果服务端用了临时密钥计算，需要传 x-cos-security-token
			            if (opt.data.securityToken) {
			               formData['x-cos-security-token'] = opt.data.securityToken;
			            }
			            
			           
			            console.log("上传URL", opt.data.url);
			            console.log("文件路径", opt.filePath);
			            
			            // 显示上传进度弹窗
			            vm.showUploadModal = true;
			            vm.percent = 0;
			            
			            const uploadTask=uni.uploadFile({
			               url: opt.data.url, // COS 上传域名
			               filePath: opt.filePath, // 文件路径（不在 formData 中）
			               name: 'file', // 文件字段名
			               formData: formData, // 表单数据
			               success: (res) => {
			                  console.log("上传响应", res);
			                  // 关闭上传进度弹窗
			                  vm.showUploadModal = false;
			                  vm.percent = 0;
			                  
			                  if (![200, 204].includes(res.statusCode)) {
			                     console.error("上传失败，状态码：", res.statusCode, res);
			                     return callback && callback(res);
			                  }
			                  // 构建文件访问 URL
			                  var fileUrl = opt.data.url + '/' + camSafeUrlEncode(opt.data.key).replace(/%2F/g, '/');
			                  console.log("上传成功，文件URL：", fileUrl);
			                  callback && callback(null, fileUrl);
			               },
			               fail: (err) => {
			                  console.error("上传失败", err);
			                  // 关闭上传进度弹窗
			                  vm.showUploadModal = false;
			                  vm.percent = 0;
			                  callback && callback(err);
			               }
			            });
						uploadTask.onProgressUpdate(function(res) {
							vm.percent = res.progress;
						});
			         };
			
			         // 根据 taskType 选择不同的文件类型
			         // taskType = 4（科普文章）：上传普通文档文件
			         // taskType = 5 或 6：上传视频文件
			         
			         var taskType = vm.taskType;
			         console.log('当前 taskType:', taskType);
			         
			         // taskType = 5 或 6，选择视频文件
			         if (taskType == 3 ||taskType == 5 || taskType == 6) {
			            // 选择视频文件
			           wx.chooseMessageFile({
			               count: 1,
						   type: 'video',
			               success: (chooseRes) => {
			                  console.log('选择视频', chooseRes);
			                  var filePath = chooseRes.tempFiles[0].path;
							  var size = chooseRes.tempFiles[0].size;
							  var name = chooseRes.tempFiles[0].name;
			                  var lastIndex = filePath.lastIndexOf('.');
			                  var extName = lastIndex > -1 ? filePath.slice(lastIndex + 1) : '';
			                  // 获取预上传用的域名、路径、凭证
			                  getUploadInfo(extName, function (err, info) {
			                     if (err) {
			                        console.error('获取上传信息失败', err);
			                        uni.showToast({ icon: 'none', title: '获取上传信息失败' });
			                        return;
			                     }
			                     console.log("上传信息", info);
			                     info.filePath = filePath;
			                     // 上传文件
			                     uploadFile(info, function (err, fileUrl) {
			                        if (err) {
			                           console.error('上传失败', err);
			                           uni.showToast({ icon: 'none', title: '上传失败' });
			                           return;
			                        }
			                        console.log('上传成功，文件URL：', fileUrl);
			                        // 添加到附件列表
			                        vm.formData.attachments.push({
			                           name:name,
			                           size: vm.formatFileSize(size || 0),
			                           url: fileUrl
			                        });
			                        uni.showToast({ icon: 'success', title: '上传成功' });
			                     });
			                  });
			               },
			               fail: (err) => {
			                  if (err.errMsg && !err.errMsg.includes('cancel')) {
			                     console.error('选择视频失败', err);
			                     uni.showToast({ icon: 'none', title: '选择视频失败' });
			                  }
			               }
			            });
			            return;
			         }else{
						 wx.chooseMessageFile({
						    count: 1,
							type:'file',
						    success: (res) => {
						       console.log('文档路径',res)
						       const filePath = res.tempFiles[0].path
							   const fileName = res.tempFiles[0].name
							   const size = res.tempFiles[0].size;
						       const requestPath = uni.getStorageSync('requestPath')
						       
						       // 显示上传进度弹窗
						       vm.showUploadModal = true;
						       vm.percent = 0;
						       
						       const uploadTask = uni.uploadFile({
						       	url: `${requestPath}/app/common/uploadOSS`,
						       	filePath: filePath,
						       	name: 'file',
						       	formData: {},
						       	success: (uploadRes) => {
						       		// 关闭上传进度弹窗
						       		vm.showUploadModal = false;
						       		vm.percent = 0;
						       		
						       		try {
						       			const result = typeof uploadRes.data === 'string' ? JSON.parse(uploadRes.data) : uploadRes.data
						       			if (result.code == 200) {
						       				//this.formData.attachmentUrl = result.url
											vm.formData.attachments.push({
											   name:fileName,
											   size: vm.formatFileSize(size || 0),
											   url: result.url
											});
						       				uni.showToast({ icon: 'success', title: '上传成功' })
						       			} else {
						       				uni.showToast({ icon: 'none', title: result.msg || '上传失败' })
						       			}
						       		} catch (e) {
						       			console.error('解析上传结果失败', e)
						       			uni.showToast({ icon: 'none', title: '上传失败' })
						       		}
						       	},
						       	fail: (err) => {
						       		// 关闭上传进度弹窗
						       		vm.showUploadModal = false;
						       		vm.percent = 0;
						       		console.error('上传失败', err)
						       		uni.showToast({ icon: 'none', title: '上传失败' })
						       	}
						       })
						       
						       // 监听上传进度
						       uploadTask.onProgressUpdate(function(res) {
						       	vm.percent = res.progress;
						       })
						    },
						    fail: (err) => {
						       if (err.errMsg && !err.errMsg.includes('cancel')) {
						          console.error('选择文档失败', err);
						          uni.showToast({ icon: 'none', title: '选择文档失败' });
						       }
						    }
						 });
					 }
		},
		removeAttachment(index) {
			this.formData.attachments.splice(index, 1)
		},
		formatFileSize(bytes) {
			if (bytes < 1024) return bytes + 'B'
			if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + 'KB'
			return (bytes / (1024 * 1024)).toFixed(2) + 'MB'
		},
		// 根据文件扩展名获取文件类型
		getFileType(fileExt) {
			const typeMap = {
				// 视频
				'mp4': 'video',
				'avi': 'video',
				'mov': 'video',
				'wmv': 'video',
				'flv': 'video',
				'mkv': 'video',
				// 音频
				'mp3': 'audio',
				'wav': 'audio',
				'wma': 'audio',
				// 图片
				'jpg': 'image',
				'jpeg': 'image',
				'png': 'image',
				'gif': 'image',
				'bmp': 'image',
				// 文档
				'pdf': 'document',
				'doc': 'document',
				'docx': 'document',
				'xls': 'document',
				'xlsx': 'document',
				'ppt': 'document',
				'pptx': 'document',
				'txt': 'document'
			}
			return typeMap[fileExt] || 'other'
		},
		async loadOptions() {
			try {
				const [groupRes, tagRes] = await Promise.all([
					getGroupOptions(),
					getTagOptions({dictType:'project_label'})
				])
				if (groupRes.code === 200 && groupRes.data) {
					this.groupOptions = groupRes.data
				}
				if (tagRes.code === 200 && tagRes.data) {
					this.tagOptions = tagRes.data
				}
			} catch (e) {
				console.error('加载选项失败', e)
			}
		},
		async loadTaskData() {
			// 加载已有任务数据
		},
		async handleSubmit() {
			if (!this.formData.title) {
				uni.showToast({ icon: 'none', title: '请输入标题' })
				return
			}
			// if (!this.formData.groupId) {
			// 	uni.showToast({ icon: 'none', title: '请选择项目分组' })
			// 	return
			// }
			// if (!this.formData.tagId) {
			// 	uni.showToast({ icon: 'none', title: '请选择项目标签' })
			// 	return
			// }
			if (!this.formData.coverImage) {
				uni.showToast({ icon: 'none', title: '请上传封面' })
				return
			}
			// 附件可选，不再强制要求
			// if (this.formData.attachments.length === 0) {
			// 	uni.showToast({ icon: 'none', title: '请上传附件' })
			// 	return
			// }
			
			try {
				uni.showLoading({ title: '提交中...' })
				
				// 获取用户信息
				const userInfo = JSON.parse(uni.getStorageSync('userInfo') || '{}')
				const userId = userInfo.id || ''
				
				// 构建附件 URL（多个附件用逗号分隔，确保是字符串类型）
				const attachmentUrl = this.formData.attachments && this.formData.attachments.length > 0
					? this.formData.attachments.map(item => item.url).filter(url => url).join(',')
					: '' // 如果没有附件，返回空字符串
				
				// 按照 API 要求的 JSON 结构构建提交数据
				const submitData = {
					attachmentUrl: attachmentUrl, // 附件 URL（多个用逗号分隔）
					content: this.formData.summary || '', // 摘要/内容
					coverImage: this.formData.coverImage, // 封面图片
					//projectId: parseInt(this.formData.groupId) || 0, // 项目分组 ID
					//tagIds: this.formData.tagId || '', // 标签 ID（字符串）
					taskId: parseInt(this.taskId) || 0, // 任务 ID
					title: this.formData.title, // 标题
					userId: userId, // 用户 ID
					taskType:this.taskType,
					// 以下字段为可选，设置默认值
					// deliveryName: '',
					// deliveryNo: '',
					// projectLink: '',
					// remark: '',
					// taskName: '',
					// taskType:this.taskType,
					// validViews: 0,
					// viewCount: 0
				}
				
				const res = await submitTask(submitData)
				uni.hideLoading()
				if (res.code === 200) {
					uni.navigateTo({
						url: '/pages_task/taskCompleteSuccess'
					})
				} else {
					uni.showToast({ icon: 'none', title: res.msg || '提交失败' })
				}
			} catch (e) {
				uni.hideLoading()
				console.error('提交失败', e)
				uni.showToast({ icon: 'none', title: '提交失败' })
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #f5f5f5;
	display: flex;
	flex-direction: column;
}

.status-bar {
	width: 100%;
	background: #fff;
}
.header {
	position: relative;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	
	.back-btn {
		position: absolute;
		left: 24rpx;
		width: 40rpx;
		height: 40rpx;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.header-right {
		position: absolute;
		right: 24rpx;
		display: flex;
		align-items: center;
		gap: 16rpx;
		
		.more-icon {
			font-size: 32rpx;
			color: #333;
		}
	}
}

.content {
	flex: 1;
	padding: 24rpx;
	padding-bottom: 120rpx;
	box-sizing: border-box;
}

.form-section {
	background: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	&:last-child{
		border-bottom: 0;
	}
	// margin-bottom: 24rpx;
	
	.form-label {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
		font-size: 28rpx;
		color: #333;
		
		.required {
			color: #FF5030;
			margin-right: 4rpx;
		}
	}
	
	.form-tips {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 16rpx;
	}
	
	.form-input-wrapper {
		position: relative;
		border-bottom: 1rpx solid #EBEDF0;
		.form-input {
			width: 100%;
			min-height: 120rpx;
			padding: 16rpx;
			font-size: 28rpx;
			color: #333;
			box-sizing: border-box;
		}
		
		.char-count {
			position: absolute;
			right: 16rpx;
			bottom: 16rpx;
			font-size: 24rpx;
			color: #999;
		}
	}
	
	.form-select {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
		padding: 0 24rpx;
		border-bottom: 1rpx solid #EBEDF0;
		font-size: 28rpx;
		color: #333;
		
		.placeholder {
			color: #999;
		}
		
		.arrow-right {
			font-size: 24rpx;
			color: #999;
		}
	}
	
	.upload-cover {
		width: 200rpx;
		height: 200rpx;
		background: #f5f5f5;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.img {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
		}
		
		.upload-placeholder {
			.camera-icon {
				font-size: 60rpx;
			}
		}
	}
	
	.attachment-list {
		.attachment-item {
			display: flex;
			align-items: center;
			padding: 16rpx;
			background: #f5f5f5;
			border-radius: 8rpx;
			margin-bottom: 16rpx;
			
			.attachment-icon {
				font-size: 32rpx;
				margin-right: 16rpx;
			}
			
			.attachment-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				
				.attachment-name {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 4rpx;
				}
				
				.attachment-size {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.attachment-delete {
				font-size: 40rpx;
				color: #999;
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		
		.add-attachment {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 24rpx;
			background: rgba(56,139,255,0.08);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 2rpx solid #388BFF;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #388BFF;
			
			.add-icon {
				font-size: 32rpx;
				margin-right: 8rpx;
			}
		}
	}
}
.submit-box{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	z-index: 100;
	padding: 24rpx 32rpx;
	.submit-btn {
		height: 88rpx;
		background: #388BFF;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #fff;
		font-weight: 500;
		
	}
}


.picker-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	align-items: flex-end;
}

.picker-content {
	width: 100%;
	background: #fff;
	border-radius: 24rpx 24rpx 0 0;
	
	.picker-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx;
		border-bottom: 1rpx solid #f0f0f0;
		
		.picker-cancel {
			font-size: 30rpx;
			color: #666;
		}
		
		.picker-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		
		.picker-confirm {
			font-size: 30rpx;
			color: #388BFF;
		}
	}
	
	.picker-body {
		padding: 24rpx;
		max-height: 600rpx;
		overflow-y: auto;
		
		.picker-item {
			padding: 24rpx 0;
			font-size: 30rpx;
			color: #333;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			&.active {
				color: #388BFF;
				font-weight: bold;
			}
		}
	}
}

// 上传进度弹窗样式
.upload-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.upload-modal-content {
		width: 560rpx;
		background: #fff;
		border-radius: 24rpx;
		padding: 48rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.upload-modal-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 40rpx;
		}
		
		.upload-progress-wrapper {
			width: 100%;
			margin-bottom: 32rpx;
		}
		
		.upload-modal-tips {
			font-size: 24rpx;
			color: #999;
		}
	}
}
</style>