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 class="suggestions-feedback-btn" @click="feedbackFunc">
					<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>
		<view class="copyright" @click="showVersionInfo">
			<text>浙江新医智联信息科技有限公司</text>
			<text>{{version}}</text>
		</view>
		<tm-tabbar :permission="nowPermission" />
		<tm-modal v-if="showJournal">
			<view class="journal">
				<view class="journal-title">
					<text>{{journalData.logTitle}}</text>
					<text>{{journalData.logDate}}</text>
				</view>
				<scroll-view scroll-y="true" class="journal-content">
					{{journalData.logContent}}
				</scroll-view>
				<button class="journal-ok" @click="journalOk">确定</button>
			</view>
		</tm-modal>
		<tm-modal v-if="ifshowVersionInfo">
			<view class="journal">
				<view class="journal-title">
					<text>{{versionData.versionNo}}</text>
					<text>{{versionData.versionDate}}</text>
				</view>
				<scroll-view scroll-y="true" class="journal-content">
					{{versionData.versionContent}}
				</scroll-view>
				<button class="journal-ok" @click="ifshowVersionInfo = false">确定</button>
			</view>
		</tm-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ifshowVersionInfo:false,
				showJournal: false,
				version: '0.5.3',
				versionData: {
					versionNo: '',
					versionId: '',
					versionDate: '',
					versionContent: ''
				},
				journalData: {
					logId: '',
					logTitle: '',
					logDate: '',
					logContent: ''
				},
				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);
				}
			});
			this.$store.dispatch({
				type: 'home/commActions',
				payload: {
					key: 'getVersionLog',
					data: {
						versionNo: this.version
					}
				}
			}).then((data) => {
				if (data) {
					if (!data.logId) {
						this.showJournal = false;
					} else {
						this.showJournal = true;
						this.journalData = data;
					}
				}
			});
		},
		methods: {
			logOut() {
				this.$store.dispatch({
					type: 'home/commActions',
					payload: {
						key: 'logout',
					}
				}).then((data) => {
					if (data) {
						uni.redirectTo({
							url: `/pages/login/login?hospSign=${uni.getStorageSync('hospSign')}`
						});
					}
				});
			},
			switchRole() {
				uni.navigateTo({
					url: '/pages/role-switching/role-switching'
				});
			}
		},
		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);
				}
			});
			this.$store.dispatch({
				type: 'home/commActions',
				payload: {
					key: 'getVersionLog',
					data: {versionNo: this.version}
				}
			}).then((data) => {
				if (data) {
					if(!data.logId) {
						this.showJournal = false;
					} else {
						this.showJournal = true;
						this.journalData = data;
					}
				}
			});
		},
		methods: {
			logOut() {
				this.$store.dispatch({
					type: 'home/commActions',
					payload: {
						key: 'logout',
					}
				}).then((data)=>{
					if(data){
						uni.redirectTo({
							url: `/pages/login/login?hospSign=${uni.getStorageSync('hospSign')}`
						});
					}
				});
			},
			feedbackFunc(){
				uni.navigateTo({
					url: '/pages/suggestionsFeedback/suggestionsFeedback'
				});
			},
			journalOk() {
				this.showJournal = false;
				this.$store.dispatch({
					type: 'home/commActions',
					payload: {
						key: 'hadRead',
						data: {
							versionNO: this.version,
							versionId: this.journalData.logId
						}
					}
				});
			},
			showVersionInfo(){
				this.$store.dispatch({
					type: 'home/commActions',
					payload: {
						key: 'getThisVersionInfo',
						data: {
							versionNo: this.version,
						}
					}
				}).then(data=>{
					// console.log({'getThisVersionInfo':data});
					this.versionData = data;
					this.ifshowVersionInfo = true;
				});
			}
		},
		computed: {
			isMsgShow() {
				return this.totalTodo <= 0 ? false : true;
			}
		}
	}
</script>

<style lang="less">
	.journal {
		overflow: hidden;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		border-radius: 15rpx;
		padding: 50rpx;
		padding-bottom: 75rpx;
		width: 562.5rpx;
		// height: 625rpx;
		font-size: 22.5rpx;
		line-height: 35rpx;
		background: #FFFFFF;

		.journal-title {
			display: flex;
			flex-direction: column;

			text {
				font-size: 35rpx;
				line-height: 52.5rpx;

				&:last-child {
					font-size: 22.5rpx;
					line-height: 33.75rpx;
					color: #666E80;
				}
			}
		}

		.journal-content {
			margin: 25rpx 0;
			max-height: 332.5rpx;
		}

		.journal-ok {
			position: fixed;
			left: 0;
			bottom: 0;
			border-radius: 0;
			border: 0;
			width: 100%;
			height: 75rpx;
			line-height: 75rpx;
			font-size: 22.5rpx;
			color: #fff;
			background-color: #3377FF;
		}
	}

	.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;
                background-color: #FFFFFF;
				.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;
				// }
				.suggestions-feedback-btn {
					height: 100rpx;
					width: 725rpx;
					margin-left: 25rpx;
					background: #FFFFFF;
					// border-bottom: 0.62rpx solid #DADEE6;
					.func-text {
						
					}
				}
				.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:112.5rpx;

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

		.copyright {
			position: absolute;
			bottom: 90rpx;
			left: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			color: #666E80;
		}
	}
</style>