workApp/pages/studentStudy/index.vue

<template>
	<view class="page_body">
		<!-- 课程中心 -->
		<course-center v-if="state.tabBarValue=='courseCenter'"></course-center>
		<!-- 我的学习 -->
		<my-learning v-if="state.tabBarValue=='myLearning'"></my-learning>
		<!-- 学习监控 -->
		<learning-monitor v-if="state.tabBarValue=='learningMonitor'"></learning-monitor>
		<!-- 底部tabbar -->
		<pageTabbar :tabBarValue="state.tabBarValue" :tabBarList="state.tabBarList" @ChangeTabBarValue="ChangeTabBarValue"></pageTabbar>
	</view>
</template>

<script setup>
	import pageTabbar from '@/components/pageTabbar.vue';//头部
	import courseCenter from './courseCenter/index.vue';//课程中心
	import myLearning from './myLearning/index.vue';//我的学习
	import learningMonitor from './learningMonitor/index.vue';//学习监控
	import { reactive, ref,onMounted } from 'vue';
	import { useStore } from 'vuex';
	const store = useStore();
	const state = reactive({
		tabBarValue:'courseCenter',
		tabBarList:[{
			"pathName":"courseCenter",
			"iconPath": "/static/image/tabbar/courseCenter.png",
			"selectedIconPath": "/static/image/tabbar/courseCenter_cur.png",
			"text": "课程中心"
		},{
			"pathName":"myLearning",
			"iconPath": "/static/image/tabbar/myLearning.png",
			"selectedIconPath": "/static/image/tabbar/myLearning_cur.png",
			"text": "我的学习"
		}]
	})
	//切换tabBar
	const ChangeTabBarValue = (name) => {
		state.tabBarValue = name;
	}
	onMounted(()=>{
		const roleCodes  = store.state?.userStore?.userInfo?.roleCodes || [];
		if(roleCodes.includes('SCHOOL_MANAGER')){//管理员
			state.tabBarList.push({
				"pathName":"learningMonitor",
				"iconPath": "/static/image/tabbar/learningMonitor.png",
				"selectedIconPath": "/static/image/tabbar/learningMonitor_cur.png",
				"text": "学习监控"
			})
		}
	})
</script>

<style lang="scss" scoped>
	.page_body{
		height: 100%;
		min-height: auto;
	}
</style>