smartSchoolClockApp/pages/my/my.vue

<template>
	<view class="container" v-if="flag">
		<!-- 每一个选项 -->
		<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/right.png">
			</view>
		</view>

	</view>

	<view class="container2" v-else>
		<view class="img">
			<img src="../../static/noPower.png">
		</view>
		<view class="info">
			暂无权限
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: false,
				list: [{
						id: 1,
						icon: "../../static/my1.png",
						title: "规则设置",
						url: "/pages/ruleSet/ruleSet"
					},
					{
						id: 2,
						icon: "../../static/my2.png",
						title: "权限设置",
						url: "/pages/powerSet/powerSet"
					},
					{
						id: 3,
						icon: "../../static/my3.png",
						title: "打卡记录",
						url: "/pages/cardRecord/cardRecord"
					},
					{
						id: 4,
						icon: "../../static/my4.png",
						title: "考勤组",
						url: "/pages/group/group?flag=1"
					},
				]
			};
		},
		onLoad() {
			
		},
		onShow() {
			let flag = uni.getStorageSync("manager")
			let flag2 = uni.getStorageSync("sub-administrator")
			if(flag||flag2){
				this.flag = true
			}
		},
		methods: {
			handleClick(item) {
				// console.log(item.url);
				uni.navigateTo({
					url: item.url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-top: 30rpx;

		.box {
			display: flex;
			width: 750rpx;
			height: 110rpx;
			line-height: 110rpx;

			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;
				}
			}
		}
	}

	.container2 {
		width: 100vw;
		height: 100vh;
		text-align: center;
		background-color: #fff;

		.img {
			margin: 0 auto;
			padding-top: 288rpx;
			width: 480rpx;
			height: 508rpx;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.info {
			color: #5792F0;
		}
	}
</style>