waterElectricityMinApp/pagesClockIn/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="/pagesClockIn/home/home" class="tab_box">
				<img v-if="pageUrl=='pagesClockIn/home/home'" src="../static/imgs/home_active.png">
				<img v-else src="../static/imgs/home.png">
				<view v-if="pageUrl=='pagesClockIn/home/home'" class="tab_title_active">
					首页
				</view>
				<view v-else class="tab_title">
					首页
				</view>
			</navigator>
			<navigator open-type="redirect" url="/pagesClockIn/stat/stat" class="tab_box">
				<img v-if="pageUrl=='pagesClockIn/stat/stat'" src="../static/imgs/stat_active.png">
				<img v-else src="../static/imgs/stat.png">
				<view v-if="pageUrl=='pagesClockIn/stat/stat'" class="tab_title_active">
					统计
				</view>
				<view v-else class="tab_title">
					统计
				</view>
			</navigator>
			<navigator open-type="redirect" v-if="flag" url="/pagesClockIn/my/my" class="tab_box">
				<img v-if="pageUrl=='pagesClockIn/my/my'" src="../static/imgs/my_active.png">
				<img v-else src="../static/imgs/my.png">
				<view v-if="pageUrl=='pagesClockIn/my/my'" class="tab_title_active">
					我的
				</view>
				<view v-else class="tab_title">
					我的
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 是否为管理员标识
				flag: false,
				// 页面选项数组
				list: [{
						id: 1,
						icon: "../static/imgs/my1.png",
						title: "规则设置",
						url: "/pagesClockIn/ruleSet/ruleSet"
					},
					{
						id: 2,
						icon: "../static/imgs/my2.png",
						title: "权限设置",
						url: "/pagesClockIn/powerSet/powerSet"
					},
					{
						id: 3,
						icon: "../static/imgs/my3.png",
						title: "打卡记录",
						url: "/pagesClockIn/cardRecord/cardRecord"
					},
					{
						id: 4,
						icon: "../static/imgs/my4.png",
						title: "考勤组",
						url: "/pagesClockIn/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:"/pagesClockIn/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>