hptwxMiniProgram/pages/index/index.vue

<template>
	<view class="container">
		<view class="doctor-info">	
			<image :src="bg" class="bg"></image>
			<view class="user">
				<view class="info">
					<view class="name">{{user.userName}}</view>
					<view class="group">{{user.groupName}}</view>	
					<view class="ocName">{{user.ocName||user.positionName}}</view>
				</view>
				<template v-if="user.type<4">
					<image  class="avatar radius" src="/static/index/piont.png"></image>
				</template>
				<template  v-else>
					<image :src="user.userAvatar" class="avatar" @error="avatarError" v-if="user.userAvatar"></image>
					<image :src="defAvatar" class="avatar" v-else></image>
				</template>
			</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 {wxLogin} from '@/api/openApi.js'
	import {getByQr,getApps} from '@/api/system/scan.js'
	import {getQueryParams} from '@/utils/index.js'
	
	export default {
		data() {
			return {
				actionList:[],
				defAvatar:defAvatar,
				bg:'',
				user:{
					userAvatar:""
				}
			}
		},
		onLoad(options){
			this.init(options)
		},
		methods: {
			async init(options){
				if(options && options.hasOwnProperty('q') ){				
				  let URL = decodeURIComponent(options.q);						
				  options=getQueryParams(URL)			
				}
				this.getData(options)
			},
			setUnionid(){
				return new Promise((resolve,reject)=>{
					uni.login({
						provider: 'weixin',
						success: function (loginRes) {
							let code=loginRes.code;
							wxLogin(code).then((resp)=>{
								const { code, data, msg } = resp
								resolve(resp)
							}).catch((resp)=>{
								reject(resp)
							})
						},
						fail(resp) {
							reject(resp)
						}
					})		
				})
			},
			getData({ocId, code}){
				if(!ocId){
					let qrcode=uni.getStorageSync('qrcode')
					if(!qrcode){return}
					ocId=qrcode.ocId
					code=qrcode.code
				}
				uni.setStorageSync('qrcode',{ocId,code})
				let isLogin=uni.getStorageSync('isLogin')
				if(!isLogin){
					uni.showToast({
						title:"请授权登录登录失效！",
						mask: true,
						icon: "none",
						complete() {
							uni.redirectTo({
								url: '/pages/authorizedLogin/index'
							})
						}
					})	
					return
				}
				getByQr(ocId, code).then((res)=>{
					let type=res.data.targetType					
					uni.setStorageSync('qrcode',{
						...res.data.target,
						targetId:res.data.targetId,
						targetType:res.data.targetType,
						targetTitle:res.data.targetTitle,
						ocId,
						code
					})				
					let desc="";
					if(type===1){desc=res.data.target.riskPointDesc}
					if(type===2){
						desc=res.data.target.gridDesc
						res.data.target.positionName=res.data.target.gridCatTitle
					}	
					if(type===3){
						desc=res.data.target.equipDesc;
						res.data.target.positionName=res.data.target.equipCatTitle
					}
					if(type===4){desc=res.data.target.doctorDesc}
					if(type===5){desc=res.data.target.doctorResume}
					this.user={
						type:res.data.targetType,
						userName:res.data.targetTitle,
						groupName:res.data.targetGroupName,
						userAvatar:res.data.target.doctorAvatar,
						positionName:res.data.target.positionName,
						userIntro:desc,
					}
					if(type>3){
						this.bg='/static/index/bg.png'
					}else{
						this.bg=type===1?'/static/index/riskBg.png':(type===2?'/static/index/areaBg.png':'/static/index/eqBg.png')
					}											
					getApps(res.data.targetId).then((res)=>{
						this.actionList=res.data.miniList	
						uni.setStorageSync('isAccount',res.data.isAccount)					
					})
				})	
			},
			avatarError(){
				this.user.userAvatar=defAvatar
			},
			handle(item){
				if(item.miniCode==='danger-submit'){	//隐患登记				
					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})
				}
				if(item.miniCode==='app-snapshot'){	//问题反馈				
					uni.navigateTo({url:'/pages/app_views/problem_feedback/problem_feedback'})
				}										
			},
			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;
			position: relative;
			.bg{
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
			}
			.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%;
					&.radius{
						border-radius:34rpx;
					}
				}
			}
			.introduce{
				padding-top: 30rpx;				
				max-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;
				word-break: break-all;
			}
		}
		.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>