hptwxMiniProgram/pages/index/index.vue

<template>
	<view class="container">
		<view class="doctor-info">
			<view class="user">
				<view class="info">
					<view class="name.userName">{{user.userRealName}}</view>
					<view class="group">{{user.groupName}}</view>	
					<view class="ocName">{{user.ocName}}</view>
				</view>
				<image :src="user.userAvatar" class="avatar" @error="avatarError"></image>
			</view>
			<view class="introduce" v-if="user.userIntro">{{user.userIntro}}</view>
		</view>
		<view class="app-container">
			<view class="app-title">常规操作</view>
			<view class="app-list">
				<view class="app-item" v-for="(item,index) in actionList" :key="index" @click="handle(item)">
					<image class="logo" :src="item.miniLogo" ></image>
					<view class="app-cont">
					<view class="name">{{item.miniTitle}}</view>						
						<view class="desc" v-if="item.miniDesc">{{item.miniDesc}}</view>
					</view>
				</view>				
			</view>
		</view>
	</view>
</template>

<script>
	import defAvatar from '@/static/avatar.png'
	import {getByQr} from '@/api/openApi.js'
	import {getQueryParams} from '@/utils/index.js'
	export default {
		data() {
			return {
				actionList:[],
				user:{
					userAvatar:""
				}
			}
		},
		onLoad(options){
			this.init(options)
		},
		methods: {
			init(options){
				this.initUser()
				if(options.query && options.query.hasOwnProperty('q') ){				
				  let URL = decodeURIComponent(options.query.q);						
				  options=getQueryParams(URL)			
				}
				this.getData(options)
			},
			initUser(){
				let userInfo=uni.getStorageSync('accountInfo')
				if(userInfo){this.user=userInfo}else{
					uni.redirectTo({
						url:'/pages/login/index'
					})
				}
			},
			getData({ocId, code}){
				if(!ocId){
					let qrcode=uni.getStorageSync('qrcode')
					if(!qrcode){return}
					ocId=qrcode.ocId
					code=qrcode.code
				}
				getByQr(ocId, code).then((res)=>{
					this.actionList=res.data.miniList
					uni.setStorageSync('qrcode',{
						...res.data.target,
						targetId:res.data.targetId,
						targetType:res.data.targetType,
						ocId,
						code
					})
				})	
			},
			avatarError(){
				this.user.userAvatar=defAvatar
			},
			handle(item){
				if(item.miniCode==='app-snapshot'){	//隐患登记				
					uni.navigateTo({url:'/pages/app_views/danger/submit/submit'})
				}				
				if(item.miniCode==='checklist_point'){// 清单
					uni.navigateTo({url:'/pages/app_views/checkList/index/index?type=app&id='+item.checklistId})
				}
				if(item.miniCode==='checklist_score'){// 满意度
					uni.navigateTo({url:'/pages/app_views/satisfaction_evaluation/satisfaction_evaluation?type=app&id='+item.checklistId})
				}	
				if(item.miniCode==='checklist_hazard'){// 危险源
					uni.navigateTo({url:'/pages/app_views/hazard/index/index?type=app&id='+item.checklistId})
				}						
			},
			isLogin(){
				let isLogin=uni.getStorageSync('isLogin')
				if(!isLogin){
					 // #ifdef H5
						uni.navigateTo({
							url:'/pages/login/index'
						})
					 // #endif
					 // #ifndef H5
					uni.navigateTo({
						url:'/pages/authorizedLogin/index'
					})
					// #endif
				}				
			},
			submit(form) {
			},
			isNull(val){
				if(val===undefined||val==="undefined"||val===""||val===null){
					return true
				}
				return false
			}
		},
		onShareAppMessage() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		padding: 48rpx 36rpx;
		font-size: 14px;
		line-height: 24px;
		background-color:rgba(245,246,248,1);
		box-sizing: border-box;
		.doctor-info{
			background-image: url('/static/index/bg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 30rpx 48rpx 48rpx 48rpx;
			box-sizing: border-box;
			color: #fff;
			.user{
				 display: flex;
				 justify-content: space-between;
				 align-items: center;
				.info{
					position: relative;
					padding-left: 20rpx;
					.name{
						font-size: 32rpx;
						font-weight: 700;
						line-height: 1;					
					}
					.group{
						font-size: 24rpx;
						font-weight: 400;
						line-height: 1;		
						margin-top: 16rpx;
					}
					.ocName{
						font-size: 24rpx;
						font-weight: 400;
						line-height: 1;
						margin-top: 16rpx;						
					}
					&::after{
						width: 1px;
						height: 100%;
						display: block;
						content: "";
						position: absolute;
						border-radius: 10px;
						top: 0;
						left: 0;
						background-color: #83D047;
					}
				}
				.avatar{
					display: block;
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
				}
			}
			.introduce{
				padding-top: 30rpx;				
				height: 318rpx;
				font-family: SF Pro Text;
				font-size: 30rpx;
				font-weight: 400;
				line-height: 44rpx;
				color: #fff;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 7;
				-webkit-box-orient: vertical;
				text-align: justify;
			}
		}
		.app-container{
			.app-title{
				font-size: 34rpx;
				color: #000;
				line-height: 1;
				padding: 40rpx 0;
				font-weight: 600;
			}
			.app-list{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.app-item{
					display: flex;
					align-items: center;
					width: 330rpx;
					height: 160rpx;
					padding: 20rpx;
					box-sizing: border-box;
					border-left: 0;
					background-color: #fff;
					margin-bottom: 18rpx;
					border-radius: 20rpx;
					.logo{
						display: block;
						width: 66rpx;
						height: 66rpx;
						border: 1px solid #efe3e3;
						border-radius: 50%;
						overflow: hidden;
					}
					.app-cont{
						flex: 1;
						margin-left: 14rpx;
						.name{
							width: 100%;
							color: #222222;
							font-size: 32rpx;
							line-height: 1;
							margin-bottom: 20rpx;
							text-overflow: ellipsis;
							word-break: break-all;
							overflow: hidden;
							white-space: nowrap;
						}
						.desc{
							width: 203rpx;
							height: 48rpx;
							background: linear-gradient(128.57deg, rgba(253, 198, 48, 0.1), rgba(244, 125, 52, 0.1));
							color: #FFAB08;
							font-size: 24rpx;
							line-height: 48rpx;
							padding-left: 16rpx;
							box-sizing: border-box;
						}						
					}
				}				
			}
		}
	}
</style>