rtliveCompany/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>