Yizhan-app/pages/stage/index.vue

<template>
	<view class="doctor_main" :style="{height: (screenHeight - 20) + 'px'}">
		<nav-bar title='驿站服务' :close="true"></nav-bar>
		
		<view class="content">
			<view class="card_nav">
				<view
				v-if="true"
				class="card_nav_item" 
				:style="{width: index < 3?'calc((100% / 3) - 18rpx)':'calc((100% / 2) - 13rpx)', flexDirection: index < 3?'column':'row',padding: index < 3?'':'28rpx 40rpx'}" 
				v-for="(item,index) in list" 
				:key="index" 
				@click="jumpPage(item)">
					<image :src="item.icon" v-if="index < 3"></image>
					<view class="card_nav_tle" :style="{marginTop: index < 3?'24rpx':''}">{{item.name}}</view>
					<image :src="item.icon" v-if="index >= 3"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		callbackRequest
	} from '@/common/util.js';
	import {
		getAppUserPermissionInfo,
		getUserInfoByMobile
	} from '@/common/api.js';
	import navBar from "@/components/navBar/index.vue";
	export default {
		components: {
			navBar
		},
		data() {
			return {
				list: [],
				screenHeight: '',
				mobile: ''
			}
		},
		onLoad(options) {
			this.screenHeight = uni.getSystemInfoSync().safeArea.height
			if(options.mobile) {
				this.mobile = options.mobile
				this.getUserInfo()
			}else{
				uni.showModal({
					title: '提示',
					content: '未获取到用户mobile',
					showCancel: false
				});
			}
		},
		onShow() {
			
		},
		methods: {
			getUserInfo() {
				return new Promise((resove, reject) => {
					let params = {
						method: getUserInfoByMobile,
						mobile: this.mobile,
						userIdShow: true
					}
					callbackRequest(params).then(res => {
						let userinfo = res.returnData
						uni.setStorageSync('userId', res.returnData.userId)
						uni.setStorageSync('userInfos', userinfo)
						this.getAppUserPermissionInfo()
						resove()
					}).catch(err => {
						console.log(err)
					})
				})
			},
			// 菜单权限
			getAppUserPermissionInfo() {
				callbackRequest({
					method: getAppUserPermissionInfo
				}).then(res => {
					if (res.returnCode == 1) {
						let returnData = res.returnData;
						let permissions = returnData.appMenus.length > 0 ? returnData.appMenus : [];
						uni.setStorageSync('permissions', permissions);
						uni.setStorageSync('roles', returnData.roles);
						if(permissions.length > 0) {
							this.list = permissions.filter(item => item.path != 'app_index')
						}else{
							uni.showModal({
								title: '提示',
								content: '当前无应用菜单权限，请联系管理员',
								showCancel: false
							});
						}
					} else {
						uni.showToast({title: '权限获取失败',icon: 'none',duration: 2000})
					}
				});
			},
			
			jumpPage(item) {
				console.log(item)
				if(item.path == '/pages/doctor/health') {
					uni.removeStorageSync('health')
				}
				if(item.children && item.children.length > 0) {
					uni.navigateTo({
						url: item.path,
						success: (res) => {
							res.eventChannel.emit('routerChange', { data: item.children })
						}
					})
				}else{
					uni.navigateTo({
						url: item.path
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.doctor_main {
		width: 100%;
		background: #F2F6FA;
		padding-top: 100rpx;
	}
	.content {
		height: 100%;
		width: 100%;
		background-image: url('@/static/firstaid/stageBK.png');
		background-size: 100% 80%;
		background-repeat: no-repeat;
		position: relative;
	}
	.card_nav {
		width: calc(100% - 96rpx);
		min-height: 224rpx;
		border-radius: 20rpx;
		position: absolute;
		top: 23%;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		.card_nav_item {
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 28rpx 0;
			box-sizing: border-box;
			image {
				width: 92rpx;
				height: 92rpx;
				display: block;
			}
			.card_nav_tle {
				flex: 1;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #0E1A24;
			}
		}
	}
</style>