smartSchoolClockApp/pages/my/my.vue

<template>
	<view class="container">
		<view class="placeholder"></view>
		<!-- 每一个选项 -->
		<view class="box" v-for="item in list" :key="item.id" @click="handleClick(item)">
			<view class="icon"><img :src="item.icon" /></view>
			<view class="title">{{ item.title }}</view>
			<view class="right"><img src="../../static/imgs/right.png" /></view>
		</view>

		<!-- 底部导航栏区域 -->
		<view class="tab_bar">
			<navigator open-type="redirect" url="/pages/home/home" class="tab_box">
				<img v-if="pageUrl == 'pages/home/home'" src="../../static/imgs/home_active.png" />
				<img v-else src="../../static/imgs/home.png" />
				<view v-if="pageUrl == 'pages/home/home'" class="tab_title_active">首页</view>
				<view v-else class="tab_title">首页</view>
			</navigator>
			<navigator open-type="redirect" url="/pages/stat/stat" class="tab_box">
				<img v-if="pageUrl == 'pages/stat/stat'" src="../../static/imgs/stat_active.png" />
				<img v-else src="../../static/imgs/stat.png" />
				<view v-if="pageUrl == 'pages/stat/stat'" class="tab_title_active">统计</view>
				<view v-else class="tab_title">统计</view>
			</navigator>
			<navigator open-type="redirect" v-if="flag" url="/pages/my/my" class="tab_box">
				<img v-if="pageUrl == 'pages/my/my'" src="../../static/imgs/my_active.png" />
				<img v-else src="../../static/imgs/my.png" />
				<view v-if="pageUrl == 'pages/my/my'" class="tab_title_active">我的</view>
				<view v-else class="tab_title">我的</view>
			</navigator>
		</view>
	</view>
</template>

<script>
import my1 from '../../static/imgs/my1.png'
import my2 from '../../static/imgs/my2.png'
import my3 from '../../static/imgs/my3.png'
import my4 from '../../static/imgs/my4.png'
export default {
	data() {
		return {
			// 是否为管理员标识
			flag: false,
			// 页面选项数组
			list: [
				{
					id: 1,
					icon: my1,
					title: '规则设置',
					url: '/pages/ruleSet/ruleSet'
				},
				{
					id: 2,
					icon: my2,
					title: '权限设置',
					url: '/pages/powerSet/powerSet'
				},
				{
					id: 3,
					icon: my3,
					title: '打卡记录',
					url: '/pages/cardRecord/cardRecord'
				},
				{
					id: 4,
					icon: my4,
					title: '考勤组',
					url: '/pages/group/group?flag=1'
				}
			],
			// 当前页面的路由地址
			pageUrl: ''
		}
	},
	onLoad() {},
	onShow() {
		this.getPageUrl()
		let flag = uni.getStorageSync('manager')
		let flag2 = uni.getStorageSync('sub-administrator')
		if (flag || flag2) {
			this.flag = true
		} else {
			this.flag = false
			uni.redirectTo({
				url: '/pages/404/404'
			})
		}
	},
	methods: {
		handleClick(item) {
			// console.log(item.url);
			uni.navigateTo({
				url: item.url
			})
		},
		getPageUrl() {
			// 获取当前打开过的页面路由数组
			let routes = getCurrentPages()
			// 获取当前页面路由，也就是最后一个打开的页面路由
			let curRoute = routes[routes.length - 1].route
			this.pageUrl = curRoute
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-width: 100vw;
	min-height: 100vh;
	background-color: #f2f2f2;

	.placeholder {
		height: 30rpx;
	}

	.box {
		display: flex;
		width: 750rpx;
		height: 110rpx;
		line-height: 110rpx;
		border-bottom: 1rpx solid #dddddd;
		background-color: #fff;

		.icon {
			flex: 1;
			text-align: center;

			img {
				margin-top: 36rpx;
				width: 42rpx;
				height: 38rpx;
			}
		}

		.title {
			flex: 5;
			font-size: 30rpx;
			font-weight: 400;
		}

		.right {
			flex: 1;
			text-align: center;

			img {
				width: 24rpx;
				height: 32rpx;
			}
		}
	}

	.tab_bar {
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		width: 750rpx;
		height: 128rpx;
		border-top: 1rpx solid #ccc;
		background-color: #fff;

		.tab_box {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			img {
				margin-bottom: 10rpx;
				width: 54rpx;
				height: 48rpx;
			}

			.tab_title {
				font-size: 20rpx;
			}

			.tab_title_active {
				font-size: 20rpx;
				color: #0082fc;
			}
		}
	}
}
</style>