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" 
						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 v-if="formData.coverImage" :src="formData.coverImage" mode="aspectFill"></image>
					<view v-else class="upload-placeholder">
						<text class="camera-icon">📷</text>
					</view>
				</view>
			</view>
			
			<!-- 上传附件 -->
			<view class="form-section">
				<view class="form-label">
					<text class="required">*</text>
					<text>上传附件</text>
				</view>
				<view 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">
							<text class="attachment-name">{{ 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-btn" @click="handleSubmit">提交</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.name">
						{{ item.name }}
					</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.id }"
						v-for="(item, index) in tagOptions" 
						:key="index"
						@click="tempTagId = item.id; tempTagName = item.name">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { submitTask, getGroupOptions, getTagOptions, uploadFile } from '@/api-js/airClassroom'
export default {
	data() {
		return {
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
			taskId: '',
			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
		}
		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: async (res) => {
					try {
						uni.showLoading({ title: '上传中...' })
						const uploadRes = await uploadFile({
							file: res.tempFilePaths[0],
							type: 'cover'
						})
						uni.hideLoading()
						if (uploadRes.code === 200 && uploadRes.data) {
							this.formData.coverImage = uploadRes.data.url
						}
					} catch (e) {
						uni.hideLoading()
						uni.showToast({ icon: 'none', title: '上传失败' })
					}
				}
			})
		},
		chooseAttachment() {
			uni.chooseFile({
				count: 1,
				type: 'file',
				success: async (res) => {
					const file = res.tempFiles[0]
					if (file.size > 500 * 1024 * 1024) {
						uni.showToast({ icon: 'none', title: '文件大小不能超过500M' })
						return
					}
					try {
						uni.showLoading({ title: '上传中...' })
						const uploadRes = await uploadFile({
							file: file.path,
							type: 'attachment'
						})
						uni.hideLoading()
						if (uploadRes.code === 200 && uploadRes.data) {
							this.formData.attachments.push({
								name: file.name,
								size: this.formatFileSize(file.size),
								url: uploadRes.data.url
							})
						}
					} catch (e) {
						uni.hideLoading()
						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'
		},
		async loadOptions() {
			try {
				const [groupRes, tagRes] = await Promise.all([
					getGroupOptions(),
					getTagOptions()
				])
				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 res = await submitTask({
					taskId: this.taskId,
					...this.formData
				})
				uni.hideLoading()
				if (res.code === 200) {
					uni.navigateTo({
						url: '/pages_task/taskCompleteSuccess'
					})
				} else {
					uni.showToast({ icon: 'none', title: res.msg || '提交失败' })
				}
			} catch (e) {
				uni.hideLoading()
				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;
}

.form-section {
	background: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	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;
		
		.form-input {
			width: 100%;
			min-height: 120rpx;
			padding: 16rpx;
			background: #f5f5f5;
			border-radius: 8rpx;
			font-size: 28rpx;
			color: #333;
		}
		
		.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;
		background: #f5f5f5;
		border-radius: 8rpx;
		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;
		
		image {
			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: #E3F2FD;
			border-radius: 8rpx;
			font-size: 28rpx;
			color: #388BFF;
			
			.add-icon {
				font-size: 32rpx;
				margin-right: 8rpx;
			}
		}
	}
}

.submit-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 88rpx;
	background: #388BFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	color: #fff;
	font-weight: 500;
	z-index: 100;
}

.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;
			}
		}
	}
}
</style>