CommunityApp/pages/healthCode/healthCode.vue

<template>
	<view class="">
		<u-modal   @confirm="infoConfirm" title="身份信息" :mask-close-able="false" v-model="infoShow" >
			<view class="slot-content" style="margin: 20rpx;">
				<u-form label-width="150"  ref="uForm">
					<u-form-item label="姓名" ><u-input v-model="personInfo.name" disabled /></u-form-item>
					<u-form-item label="身份证号"><u-input v-model="personInfo.idNumber" /></u-form-item>
				</u-form>
			</view>
		</u-modal>
		<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" v-else style="height: 100vh;">
			<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>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:true,
				
				infoShow:false,
				
				hideName:'',
				personInfo: {
					name: "*",
					idNumber: "*"
				},
				timer: '',
				nowStr: "",
				healthCode: {},
				tips: "按照目前掌握的防疫相关数据，暂未发现您存在与防疫相关异常健康状况。防疫相关数据会随着疫情发展及时更新。此次查询并不会排除您的防疫相关健康风险。"
			}
		},
	   onLoad() {
		   console.log(this.$u.sys());
		    this.getDateStr()
			this.init()
		},
		beforeDestroy() {
			clearInterval(this.timer);
		},
		methods: {
			init(){
				let member= getApp().globalData.member
				this.personInfo.name=member.name
				this.personInfo.idNumber=member.idcard
				
				if (this.$isEmpty(this.personInfo.name)) {
					uni.showModal({
						content:'系统异常',
						showCancel:false,
						success: (res) => {
							uni.navigateBack({
								delta:1
							})
						}
					})
					return
				}
				this.hideName=this.handelName(this.personInfo.name)
				if (this.$isEmpty(this.personInfo.idNumber)) {
					this.infoShow=true
				}else{
					this.fetchCode()
				}
			},
			infoConfirm(){
				if (this.$isEmpty(this.personInfo.idNumber)) {
					this.$u.toast('请输入身份证号')
					this.infoShow=true
					return
				}
				if (!this.$u.test.idCard(this.personInfo.idNumber)) {
					this.$u.toast('请输入正确的身份证号')
					this.infoShow=true
					return
				}
				this.fetchCode()
			},
			fetchCode(){
				this.loading=true
				let that=this
				let operation='health/getCode'
				let params={
					userName:this.personInfo.name,
					idCardNumber:this.personInfo.idNumber
				}
				getApp().globalData.postRequest(params,operation,function(res){
					if (res.data.result_code!=1) {
						uni.showModal({
							content:res.data.result_msg,
							showCancel:false,
							success: (res) => {
								if (res.confirm) {
									uni.navigateBack({
										delta:1
									})
								}
							}
						})
					}
					that.healthCode=res.data.result_msg
					that.loading=false
				})
			},
		    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 = this.$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{
		height: 100rpx;
		width: 100%;
		color: #007AFF;
		display: flex;
		text-decoration: underline;
		font-style: italic;
		align-items: center;
		justify-content: center;
	}
</style>