ParkApp/pages/mine/healthcode/healthcode.vue

<template>
	<view>
		<view v-if="loading" class="bg-white" style="padding: 0 50rpx;">
			<image src="https://gdyjht.com.cn/loading.gif" mode="aspectFit" class="gif-white response" style="height:600upx;padding-top: 200rpx;"></image>
		</view>
		<view class="flex flex-direction justify-between" style="height: 100vh;" v-else>
			<view class="codeBox" :class="{ 'bg-red': healthCode.color=='red', 'bg-blue': healthCode.color=='green'}" >
				<view class="timeBar">{{hideName}}</view>
				<view class="timeBar">{{nowStr}}</view>
				<image class="code" :src="healthCode.code"></image>
				<view v-if="healthCode.color=='green'" class="timeBar" style="height: 250rpx;letter-spacing: 20rpx;">
					<icon type="success" size="30"/>
					未见异常
				</view>
				<view v-if="healthCode.color=='red'" class="timeBar" style="height: 250rpx;letter-spacing: 20rpx;">
					<icon type="warn" size="30"/>
					体温异常
				</view>
			</view>
			<view class="tips">{{tips}}</view>
			<view class="link" @click="navigate('/pages/index/staff-temperature/list')"> 测温记录</view>
		</view>	
	</view>
</template>

<script>
	import util from "@/utils/util.js"
	export default {
		data() {
			return {
				loading:false,
				
				hideName:'',
				personInfo: {
					name: "*",
					idNumber: "*"
				},
				timer: '',
				nowStr: "",
				healthCode: {},
				tips: "按照目前掌握的防疫相关数据，暂未发现您存在与防疫相关异常健康状况。防疫相关数据会随着疫情发展及时更新。此次查询并不会排除您的防疫相关健康风险。"
			}
		},
	   async onLoad() {
		   this.loading=true
		   
			//获取员工是信息
			let phone = uni.getStorageSync("phone");
			let staffRes=await this.$api.enterprisestaff.page({phone});
			this.personInfo.name = staffRes.data.records[0].realName;
			this.personInfo.idNumber = staffRes.data.records[0].idcard;
			//隐藏的姓名
			this.hideName=this.handelName(this.personInfo.name)
			//获取实时时间
			this.getDateStr();
			
			//获取健康码
			let codeRes=await this.$api.healthCode.getCode({idCardNumber: this.personInfo.idNumber,userName: this.personInfo.name});
			this.healthCode.code = codeRes.data.code;
			this.healthCode.color = codeRes.data.color;
			
			this.loading=false
			
		},
		beforeDestroy() {
			clearInterval(this.timer);
		},
		methods: {
		    handelName(str,frontLen=0,endLen=1) {
				var newStr;
				var len = str.length-frontLen-endLen;
				if (str.length === 2) {
					newStr = str.substring(0, 1) + '*';
				} else if (str.length > 2) {
					var char = '';
					for (let i = 0; i < len; i++) {
						char += '*';
					}
					newStr = str.substring(0, frontLen) + char + str.substring(str.length-endLen);
				} else {
					newStr = str;
				}
				return newStr;
			},
			getDateStr(){this.timer = setInterval(()=>{
					this.nowStr = util.dateFormat(new Date(),"yyyy-MM-dd hh:mm:ss");
				},1000);
			},
			navigate(path){
				uni.navigateTo({
					url:path
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
	
	.bg-blue{
		background-color: #4594f1;
		color: #FFFFFF;
	}
	
	.timeBar{
		width: 400rpx;
		height: 100rpx;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		/* background-color: rgba(255,255,255,0.5); */
	}
	.code{
		background: white;
		padding: 5rpx;
		width: 350rpx;
		height: 350rpx;
	}
	.codeBox{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 5rpx;
		flex-basis: 95%;
	}
	.tips{
		padding: 40rpx 0;
		width: 90%;
		line-height: 55rpx;
		text-indent: 2em;
		margin: auto;
		color: gray;
		/* background: #18B566; */
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.link{
		margin-bottom: 40rpx;
		width: 100%;
		color: #007AFF;
		display: flex;
		text-decoration: underline;
		font-style: italic;
		align-items: center;
		justify-content: center;
	}
</style>