Web_TracerMethodology/pages/home/home.vue

<template>
	<view class="home-page">
		<view class="content-info">
			<view class="top-box">
				<image class="bgpic" src="/static/images/pcbg.png"></image>
				<text class="hosname">{{hospName}}</text>
			</view>
			<view class="avatar-box">
				<image class="avatar" src="/static/images/boy-avatar.png"></image>
			</view>
			<view class="info-box">
				<view class="head">
					<text class="name">
						{{name}}
					</text>
					<!-- <image class="gender" src="/static/images/boy.png"></image> -->
					<text class="username">{{code}}</text>
				</view>
				<!-- <view class="row">
					<text class="text">心血管内科</text>
				</view> -->
				<view class="row">
					<view class="col">
						<text class="text">主管：{{depManager}}</text>
					</view>
					<view class="col">
						<text class="text">|</text>
					</view>
					<view class="col">
						<text class="text">所属查核组：{{dep}}</text>
					</view>
				</view>

			</view>
			<view class="function-box">
				<view class="role-switch" @click="switchRole">
					<text class="func-text">角色切换</text>
					<view class="msg-box" v-show="isMsgShow">
						<text class="msg-text">{{this.totalTodo}}</text>
					</view>
					<image class="icon-more" src="/static/images/icon-more.png"></image>
					<text class="role">{{nowPermissionName}}</text>
				</view>
				<!-- 				<view class="sys-setting">
					<text class="func-text">系统设置</text>
					<image class="icon-more" src="/static/images/icon-more.png"></image>
				</view> -->
			</view>
		</view>
		<view class="logout-box" @click="logOut">
			<text class="logout-text">退出登录</text>
		</view>
		<tm-tabbar :permission="nowPermission" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nowPermission: '', //用户当前第一权限
				nowPermissionName:'',//当前权限名
				code:'',//用户名
				name:'',//名字
				dep:'',//所属查核组
				depManager:'',//查核组组长
				hospName:'',//医院名
				totalTodo:0,//总待办数
				pemissionList:[
					{permission: 1, name: '管理员'}, 
					{permission: 2, name: '查核组长'},
					{permission: 3, name: '查核组员'},
					{permission: 4, name: '单位负责人'},
					{permission: 5, name: '改善者'}
				]
			}
		},
		created: function() {
			this.$store.dispatch({
				type: 'home/commActions',
				payload: {
					key: 'getuser',
				}
			}).then((data) => {
				if (data) {
					uni.setStorageSync('permissions', data.permissions);
					uni.setStorageSync('nowPermission', data.nowPermission);
					this.code=data.code;
					this.name=data.name;
					this.nowPermission=data.nowPermission;
					this.dep=data.dep;
					this.depManager=data.depManager;
					this.hospName=data.hospName;
					let current=this.pemissionList.find(item => item.permission == data.nowPermission);
					this.nowPermissionName=current.name;
					this.totalTodo=data.permissions.reduce(function(total,currentValue){
						return total+currentValue.todoNum;
					},0);
				}
			});
		},
		methods: {
			logOut() {
				this.$store.dispatch({
					type: 'home/commActions',
					payload: {
						key: 'logout',
					}
				}).then((data)=>{
					if(data!==null){
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}
				});
			},
			switchRole() {
				uni.navigateTo({
					url: '/pages/role-switching/role-switching'
				});
			}
		},
		computed:{
			isMsgShow(){
				return this.totalTodo<=0?false:true;
			}
		}
	}
</script>

<style lang="less">
	.home-page {
		height: 100%;

		.content-info {
			height: 596.25rpx;
			background-color: #FFFFFF;

			.top-box {
				position: relative;
				height: 350rpx;

				.bgpic {
					width: 750rpx;
					height: 350rpx;
				}

				.hosname {
					font-size: 45rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #FFFFFF;
					position: absolute;
					left: 50rpx;
					top: 92.5rpx;
				}
			}

			.info-box {
				width: 700rpx;
				height: 250rpx;
				border-radius: 15rpx;
				background-color: #FFFFFF;
				position: absolute;
				left: 25rpx;
				right: 25rpx;
				top: 226.25rpx;
				box-shadow: 0px 10px 30px 0px rgba(0, 13, 51, 0.1);

				.head {
					margin-left: 37.5rpx;
					margin-top: 68.75rpx;

					.name {
						font-size: 35rpx;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #17181A;
					}

					.gender {
						width: 25rpx;
						height: 25rpx;
						background: linear-gradient(135deg, #4DA6FF 0%, #4D88FF 100%);
						border-radius: 6.25rpx;
						margin-left: 15rpx;
					}

					.username {
						font-size: 25rpx;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #17181A;
						margin-left: 55rpx;
					}
				}

				.row {
					margin-left: 37.5rpx;
					margin-top: 62.5rpx;

					.col {
						display: inline-block;
						margin-right: 25rpx;
					}
				}

				.text {
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #666E80;
				}

			}

			.avatar-box {
				width: 125rpx;
				height: 125rpx;
				position: absolute;
				right: 75rpx;
				top: 187.5rpx;
				background: #FFFFFF;
				z-index: 2;
				border-radius: 50%
			}

			.avatar {
				width: 112.5rpx;
				height: 112.5rpx;
				margin-left: 6.25rpx;
				margin-top: 6.25rpx;
				border-radius: 50%
			}

			.function-box {
				position: absolute;
				top: 496.25rpx;
				width: 750rpx;

				.role-switch {
					height: 100rpx;
					width: 725rpx;
					margin-left: 25rpx;
					background: #FFFFFF;
					border-bottom: 0.62rpx solid #DADEE6;

					.msg-box {
						width: 50rpx;
						height: 30rpx;
						float: left;
						margin-top: 35rpx;
						margin-left: 15rpx;
						position: relative;
						background: #FF4060;
						border-radius: 24px;
						text-align: center;

						.msg-text {
							font-size: 17.5rpx;
							font-family: SourceHanSansCN-Normal, SourceHanSansCN;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 30rpx;
						}
					}

					.role {
						font-size: 22.5rpx;
						font-family: SourceHanSansCN-Normal, SourceHanSansCN;
						font-weight: 400;
						color: #7A8599;
						line-height: 100rpx;
						float: right;
						margin-right: 25rpx;
					}
				}

				// .sys-setting{
				// 	height: 100rpx;
				// 	width: 725rpx;
				// 	margin-left: 25rpx;
				// 	background: #FFFFFF;
				// }
				.func-text {
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #292C33;
					line-height: 100rpx;
					float: left;
				}

				.icon-more {
					width: 12.37rpx;
					height: 21.21rpx;
					line-height: 100rpx;
					float: right;
					margin-top: 39.37rpx;
					margin-right: 25rpx;
				}
			}


		}

		.logout-box {
			width: 750rpx;
			height: 100rpx;
			background-color: #FFFFFF;
			margin-top: 15rpx;

			.logout-text {
				font-size: 22.5rpx;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #292C33;
				line-height: 100rpx;
				margin-left: 330rpx;
			}
		}
	}
</style>