JiangxiMiniProgram/components/UserTab/UserTab - 副本.vue

<template>
	<view class="">
		<!-- 学生端 -->
		<u-tabbar v-if="showWho=='student'" :value="student" @change="studentChange" :fixed="true" :placeholder="true"
			:safeAreaInsetBottom="true" activeColor="#31aef1">
			<u-tabbar-item v-for="i in studentList" :key='i.id' :text="i.name" :name="i.name">
				<image class="u-page__item__slot-icon" slot="active-icon" :src="i.active" mode="widthFix"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="i.inactive" mode="widthFix"></image>
			</u-tabbar-item>

		</u-tabbar>
		<!-- 教师端 -->
		<u-tabbar :value="teacher" @change="teacherChange" :fixed="true" :placeholder="true"
			:safeAreaInsetBottom="true" activeColor="#31aef1">
			<u-tabbar-item v-for="i in teacherList" :key='i.id' :text="i.name" :name="i.name">
				<image class="u-page__item__slot-icon" slot="active-icon" :src="i.active" mode="widthFix"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="i.inactive" mode="widthFix"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		props: ['tabNumber'],
		data() {
			return {
				teacher: '课堂',
				student: '',
				showWho: 'teacher',
				teacherList: [{
						id: 1,
						name: '课堂',
						active: '../../static/images/tabbar/syActive.png',
						inactive: '../../static/images/tabbar/sy.png'
					},
					{
						id: 2,
						name: '兴趣小组',
						active: '../../static/images/tabbar/tkActive.png',
						inactive: '../../static/images/tabbar/tk.png'
					},
					{
						id: 3,
						name: '我的',
						active: '../../static/images/tabbar/zxActive.png',
						inactive: '../../static/images/tabbar/zx.png'
					}
				],
				studentList: [{
						id: 1,
						name: '学员课堂',
						active: '../../static/images/tabbar/syActive.png',
						inactive: '../../static/images/tabbar/sy.png'
					},
					{
						id: 2,
						name: '学员兴趣小组',
						active: '../../static/images/tabbar/tkActive.png',
						inactive: '../../static/images/tabbar/tk.png'
					},
					{
						id: 3,
						name: '学员我的',
						active: '../../static/images/tabbar/zxActive.png',
						inactive: '../../static/images/tabbar/zx.png'
					}
				],
			}
		},
		mounted() {
			// if (uni.getStorageSync('status') == 'teacher') {
			// 	this.showWho = 'student'
			// } else {
			// 	this.showWho = 'teacher'
			// }
			this.student = this.tabNumber
			this.teacher = this.tabNumber
		},
		methods: {
			teacherChange(e) {
				this.teacher = e
				if (e == '课堂') {
					uni.reLaunch({
						url: "/pages/tabbar/index/index"
					})
					// uni.hideHomeButton() //为了防止跳转页面后，小程序右上角会出现一个回到主页的小房子
				} else if (e == "兴趣小组") {
					uni.reLaunch({
						url: "/pages/tabbar/question/index"
					})
					// uni.hideHomeButton()
				} else if (e == "我的") {
					uni.reLaunch({
						url: "/pages/tabbar/mine/index"
					})
					// uni.hideHomeButton()
				}
			},
			studentChange(e) {
				this.student = e
				uni.hideHomeButton()
				// if (e == '课堂') {
				// 	uni.reLaunch({
				// 		url: "/pages/index/CourseTeacherIndex"
				// 	})
				// 	uni.hideHomeButton() //为了防止跳转页面后，小程序右上角会出现一个回到主页的小房子
				// } else if (e == "兴趣小组") {
				// 	uni.reLaunch({
				// 		url: "/pages/interestGroup/interestGroup"
				// 	})
				// 	uni.hideHomeButton()
				// } else if (e == "我的") {
				// 	uni.reLaunch({
				// 		url: "/pages/mine/mine"
				// 	})
				// 	uni.hideHomeButton()
				// }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-page__item__slot-icon {
		display: block;
		width: 56rpx;
		height: 56rpx;
	}
</style>