workApp/pages/materialCollection/submitMaterial/index.vue

<template>
	<view class="page_submit" :style="{paddingTop: statusBarHeight + 200 + 'rpx', paddingBottom: safeAreaBottom + 100 + 'rpx' }">
		<notice-header 
			:title="isEdit ? '编辑任务' : '新建任务'" 
			mode="submit"
			:showSave="true"
			@save="handleSave">
		</notice-header>

		<view class="form_container">
			<scroll-view scroll-y class="form_scroll">
				<view class="form_section">
					<view class="section_title">基本信息</view>
					
					<view class="form_item">
						<text class="form_label">任务标题</text>
						<input class="form_input" v-model="formData.title" placeholder="请输入任务标题" />
					</view>

					<view class="form_item">
						<text class="form_label">学年</text>
						<picker mode="selector" :range="academicYearOptions" :value="academicYearIndex" @change="handleAcademicYearChange">
							<view class="picker_item">
								<text>{{ academicYearOptions[academicYearIndex] }}</text>
								<uni-icons type="down" size="16" color="#999999"></uni-icons>
							</view>
						</picker>
					</view>

					<view class="form_item">
						<text class="form_label">归属分类</text>
						<picker mode="selector" :range="categoryOptions" :value="categoryIndex" @change="handleCategoryChange">
							<view class="picker_item">
								<text>{{ categoryOptions[categoryIndex] }}</text>
								<uni-icons type="down" size="16" color="#999999"></uni-icons>
							</view>
						</picker>
					</view>

					<view class="form_item">
						<text class="form_label">材料类目</text>
						<picker mode="selector" :range="materialTypeOptions" :value="materialTypeIndex" @change="handleMaterialTypeChange">
							<view class="picker_item">
								<text>{{ materialTypeOptions[materialTypeIndex] }}</text>
								<uni-icons type="down" size="16" color="#999999"></uni-icons>
							</view>
						</picker>
					</view>
				</view>

				<view class="form_section">
					<view class="section_title">时间设置</view>
					
					<view class="form_item">
						<text class="form_label">开始日期</text>
						<picker mode="date" :value="formData.startDate" @change="handleStartDateChange">
							<view class="picker_item">
								<text>{{ formData.startDate || '请选择开始日期' }}</text>
								<uni-icons type="down" size="16" color="#999999"></uni-icons>
							</view>
						</picker>
					</view>

					<view class="form_item">
						<text class="form_label">截止日期</text>
						<picker mode="date" :value="formData.deadline" @change="handleDeadlineChange">
							<view class="picker_item">
								<text>{{ formData.deadline || '请选择截止日期' }}</text>
								<uni-icons type="down" size="16" color="#999999"></uni-icons>
							</view>
						</picker>
					</view>
				</view>

				<view class="form_section">
					<view class="section_title">任务描述</view>
					<textarea 
						class="form_textarea" 
						v-model="formData.description" 
						placeholder="请输入任务描述" 
						placeholder-class="textarea_placeholder"
						maxlength="500"
					></textarea>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import NoticeHeader from '@/components/notice-header.vue';
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
import { useSafeArea } from '@/common/safeArea';

const { statusBarHeight, safeAreaBottom, initSafeArea } = useSafeArea();

const taskId = ref(null);
const isEdit = computed(() => !!taskId.value);

const academicYearOptions = ['2025-2026学年', '2024-2025学年', '2023-2024学年'];
const categoryOptions = ['全部分类', '日常教学', '考试测评', '教研活动'];
const materialTypeOptions = ['全部类目', '教案', '课件', '试卷', '作业'];

const academicYearIndex = ref(0);
const categoryIndex = ref(0);
const materialTypeIndex = ref(0);

const formData = ref({
	title: '',
	startDate: '',
	deadline: '',
	description: ''
});

onLoad((options) => {
	if (options && options.id) {
		taskId.value = options.id;
		loadTaskDetail(options.id);
	}
});

onMounted(() => {
	initSafeArea();
});

const loadTaskDetail = (id) => {
	// 模拟加载任务详情
	formData.value = {
		title: '2025年秋季学期教案材料收集',
		startDate: '2025-07-28',
		deadline: '2025-08-15',
		description: '请各位教师按时提交本学期的教案材料'
	};
};

const handleAcademicYearChange = (e) => {
	academicYearIndex.value = e.detail.value;
};

const handleCategoryChange = (e) => {
	categoryIndex.value = e.detail.value;
};

const handleMaterialTypeChange = (e) => {
	materialTypeIndex.value = e.detail.value;
};

const handleStartDateChange = (e) => {
	formData.value.startDate = e.detail.value;
};

const handleDeadlineChange = (e) => {
	formData.value.deadline = e.detail.value;
};

const handleSave = () => {
	if (!formData.value.title) {
		uni.showToast({ title: '请输入任务标题', icon: 'none' });
		return;
	}
	
	uni.showModal({
		title: '提示',
		content: isEdit.value ? '确定要保存修改吗？' : '确定要创建任务吗？',
		success: (res) => {
			if (res.confirm) {
				uni.showToast({ 
					title: isEdit.value ? '保存成功' : '创建成功', 
					icon: 'success' 
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		}
	});
};
</script>

<style lang="scss" scoped>
.page_submit {
	min-height: 100vh;
	background-color: #F5F7FA;
}

.form_container {
	flex: 1;
	padding: 24rpx;
}

.form_scroll {
	height: 100%;
}

.form_section {
	background-color: #FFFFFF;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 24rpx;

	.section_title {
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
		margin-bottom: 24rpx;
	}
}

.form_item {
	display: flex;
	align-items: center;
	padding: 24rpx 0;
	border-bottom: 1rpx solid #EBEEF5;

	&:last-child {
		border-bottom: none;
	}

	.form_label {
		width: 180rpx;
		font-size: 28rpx;
		color: #666666;
	}

	.form_input {
		flex: 1;
		font-size: 28rpx;
		color: #333333;
		text-align: right;
	}

	.picker_item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 28rpx;
		color: #333333;
		gap: 8rpx;
	}
}

.form_textarea {
	width: 100%;
	min-height: 200rpx;
	font-size: 28rpx;
	color: #333333;
	padding: 16rpx;
	background-color: #F9FAFF;
	border-radius: 12rpx;
	box-sizing: border-box;
}

.textarea_placeholder {
	color: #999999;
	font-size: 28rpx;
}
</style>