workApp/components/notice-header.vue

<template>
	<view class="notice_header" :style="{ paddingTop: statusBarHeight + 'rpx' }">
		<!-- 顶部栏 -->
		<view class="header_top">
			<view class="header_left">
				<uni-icons type="back" size="24" color="#333333" @click="goBack"></uni-icons>
				<text class="header_title">{{ title }}</text>
			</view>
			<view v-if="showSearch" class="search_box">
				<image src="/static/image/overview/search.png" class="search_icon" ></image>	
				<input type="text" class="search_input" placeholder="请输入关键字搜索" placeholder-class="search_placeholder" v-model="searchWord" @input="handleSearchInput" />
			</view>
			<text v-else-if="showSave" class="save_btn" @click="handleSave">保存</text>
		</view>
		<!-- 通知模式过滤栏 -->
		<view v-if="showFilter && mode === 'notice'" class="filter_bar">
			<picker mode="selector" :range="typeOptions" :value="typeIndex" @change="handleTypeChange">
				<view class="filter_item">
					<text class="filter_text">{{ typeOptions[typeIndex] }}</text>
					<uni-icons type="down" size="16" color="#999999"></uni-icons>
				</view>
			</picker>
			<picker mode="selector" :range="timeOptions" :value="timeIndex" @change="handleTimeChange">
				<view class="filter_item">
					<text class="filter_text">{{ timeOptions[timeIndex] }}</text>
					<uni-icons type="down" size="16" color="#999999"></uni-icons>
				</view>
			</picker>
		</view>
		<!-- 通知模式标签栏 -->
		<view v-if="showTabs && mode === 'notice'" class="tabs_bar">
			<text v-for="(tab, idx) in tabs" :key="idx" class="tab_item" :class="{ active: activeTabIndex === idx }" @click="handleTabChange(idx)">{{ tab }}</text>
		</view>
		
		<!-- 任务总览模式过滤栏 -->
		<view v-if="showFilter && mode === 'taskOverview'" class="filter_bar task_overview_filter">
			<picker mode="selector" class="picker_wide" :range="academicYearOptions" :value="academicYearIndex" @change="handleAcademicYearChange">
				<view class="filter_item">
					<text class="filter_text">{{ academicYearOptions[academicYearIndex] }}</text>
					<uni-icons type="down" size="16" color="#999999"></uni-icons>
				</view>
			</picker>
			<picker mode="selector" class="picker_narrow" :range="categoryOptions" :value="categoryIndex" @change="handleCategoryChange">
				<view class="filter_item">
					<text class="filter_text">{{ categoryOptions[categoryIndex] }}</text>
					<uni-icons type="down" size="16" color="#999999"></uni-icons>
				</view>
			</picker>
			<picker mode="selector" class="picker_narrow" :range="materialTypeOptions" :value="materialTypeIndex" @change="handleMaterialTypeChange">
				<view class="filter_item">
					<text class="filter_text">{{ materialTypeOptions[materialTypeIndex] }}</text>
					<uni-icons type="down" size="16" color="#999999"></uni-icons>
				</view>
			</picker>
		</view>
		<!-- 任务总览模式标签栏 -->
		<view v-if="(showTabs || showCreateBtn) && mode === 'taskOverview'" class="tabs_bar task_overview_tabs">
			<text v-for="(tab, idx) in tabs" :key="idx" class="tab_item" :class="{ active: activeTabIndex === idx }" @click="handleTabChange(idx)">{{ tab }}</text>
			<view v-if="showCreateBtn" class="create_btn" @click="handleCreate">
				<image src="/static/image/workspace/add.png" class="add_icon" mode="aspectFit"></image>
				<text class="create_text">新建</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
import overviewApi from '@/reqApi/overview.js';
import { useSafeArea } from '@/common/safeArea';

const { statusBarHeight, initSafeArea } = useSafeArea();

const typeIndex = ref(0);
const timeIndex = ref(0);
const typeData = ref([{ id: '0', name: '全部类型' }]);
const typeOptions = ref(['全部类型']);
const searchWord = ref('');

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

const props = defineProps({
	title: {
		type: String,
		default: ''
	},
	mode: {
		type: String,
		default: 'notice',
		validator: (value) => ['notice', 'taskOverview'].includes(value)
	},
	showSearch: {
		type: Boolean,
		default: false
	},
	showSave: {
		type: Boolean,
		default: false
	},
	showFilter: {
		type: Boolean,
		default: false
	},
	timeOptions: {
		type: Array,
		default: () => ['全部时间', '最近3天', '最近7天', '最近1月', '最近3月']
	},
	academicYearOptions: {
		type: Array,
		default: () => ['2025-2026学年', '2024-2025学年', '2023-2024学年']
	},
	categoryOptions: {
		type: Array,
		default: () => ['全部分类', '日常教学', '考试测评', '教研活动']
	},
	materialTypeOptions: {
		type: Array,
		default: () => ['全部类目', '教案', '课件', '试卷', '作业']
	},
	showTabs: {
		type: Boolean,
		default: false
	},
	showCreateBtn: {
		type: Boolean,
		default: false
	},
	tabs: {
		type: Array,
		default: () => ['全部', '待发布', '已发布', '已关闭']
	},
	activeTab: {
		type: Number,
		default: -1
	},
	tabMode: {
		type: String,
		default: 'status',
		validator: (value) => ['status', 'index'].includes(value)
	}
});

const activeTabIndex = computed(() => {
	if (props.tabMode === 'index') {
		return props.activeTab;
	}
	const statusMap = [-1, 0, 1, 2];
	return statusMap.indexOf(props.activeTab);
});

const emit = defineEmits([
	'save', 'tabChange', 'typeChange', 'timeChange', 'searchChange',
	'academicYearChange', 'categoryChange', 'materialTypeChange', 'create'
]);

const fetchNoticeTypeList = async () => {
	try {
		const res = await overviewApi.noticeTypeList();
		if (res.data && Array.isArray(res.data)) {
			const types = res.data.map(item => ({
				id: item.id,
				name: item.name
			}));
			typeData.value = [{ id: '0', name: '全部类型' }, ...types];
			typeOptions.value = ['全部类型', ...types.map(item => item.name)];
		}
	} catch (error) {
		console.error('获取通知类型失败:', error);
	}
};

onMounted(() => {
	initSafeArea();
	if (props.mode === 'notice') {
		fetchNoticeTypeList();
	}
});

const handleTabChange = (idx) => {
	if (props.tabMode === 'index') {
		emit('tabChange', idx);
	} else {
		const statusMap = [-1, 0, 1, 2];
		emit('tabChange', statusMap[idx]);
	}
};

const handleTypeChange = (e) => {
	typeIndex.value = e.detail.value;
	const selectedItem = typeData.value[typeIndex.value];
	emit('typeChange', selectedItem.id);
};

const handleTimeChange = (e) => {
	timeIndex.value = e.detail.value;
	emit('timeChange', timeIndex.value);
};

const handleAcademicYearChange = (e) => {
	academicYearIndex.value = e.detail.value;
	emit('academicYearChange', academicYearIndex.value);
};

const handleCategoryChange = (e) => {
	categoryIndex.value = e.detail.value;
	emit('categoryChange', categoryIndex.value);
};

const handleMaterialTypeChange = (e) => {
	materialTypeIndex.value = e.detail.value;
	emit('materialTypeChange', materialTypeIndex.value);
};

const goBack = () => {
	uni.redirectTo({
		url: '/pages/workspace/index'
	});
};

const handleSave = () => {
	emit('save');
};

const handleSearchInput = () => {
	emit('searchChange', searchWord.value);
};

const handleCreate = () => {
	emit('create');
};
</script>

<style lang="scss" scoped>
.notice_header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	z-index: 999;

	.header_top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx;

		.header_left {
			display: flex;
			align-items: center;

			.header_title {
				font-weight: 600;
				font-size: 44rpx;
				color: #333333;
				margin-left: 24rpx;
			}
		}

		.search_box {
			display: flex;
			align-items: center;
			background-color: #fff;
			border-radius: 8rpx;
			padding: 14rpx 24rpx;
			width: 265rpx;
			border: 2rpx solid #DCDFE6;

			.search_icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}

			.search_input {
				flex: 1;
				font-size: 24rpx;
				color: #333333;
				margin-left: 8rpx;
			}

			.search_placeholder {
				color: #999999;
			}
		}

		.save_btn {
			font-size: 28rpx;
			color: #2E64FA;
			font-weight: 500;
		}
	}

	.filter_bar {
		display: flex;
		gap: 32rpx;
		padding: 20rpx 24rpx;
		background-color: #FFFFFF;
		border-top: 1rpx solid #F0F0F0;

		.filter_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 16rpx;
			background-color: #FFFFFF;
			border-radius: 8rpx;
			min-width: 240rpx;
			border: 2rpx solid #DCDFE6;

			.filter_text {
				font-size: 28rpx;
				color: #333333;
				margin-right: 8rpx;
			}
		}
	}

	.task_overview_filter {
		gap: 16rpx;

		.picker_wide {
			flex: 1.2;
		}

		.picker_narrow {
			flex: 1;
		}

		.filter_item {
			width: 100%;
			min-width: 0;
			padding: 16rpx 12rpx;
			box-sizing: border-box;
			.filter_text {
				font-size: 24rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}

	.tabs_bar {
		display: flex;
		height: 56rpx;
		padding: 4rpx 24rpx 12rpx 24rpx;

		.tab_item {
			font-size: 32rpx;
			color: #999999;
			font-weight: 400;
			position: relative;
			margin-right: 48rpx;

			&.active {
				color: #2E64FA;
				font-weight: 500;

				&::after {
					content: '';
					position: absolute;
					bottom: 0rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 100%;
					height: 4rpx;
					background-color: #2E64FA;
				}
			}
		}
	}

	.task_overview_tabs {
		justify-content: flex-start;
		align-items: center;
		height: 72rpx;
		.tab_item {
			margin-right: 48rpx;
			&.active {

				&::after {
					bottom: -8rpx;
				}
			}
		}

		.create_btn {
			margin-left: auto;
			background-color: #2E64FA;
			border-radius: 8rpx;
			width: 148rpx;
			height: 72rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8rpx;
			.add_icon {
				width: 32rpx;
				height: 32rpx;
			}
			.create_text {
				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: 500;
			}
		}
	}
}
</style>