jp-xpgj-GA-file/src/components/GreenCode.vue

<template>
	<div>
		<!--补全身份证-->
		<div class="fyy-popup-1" v-show="editIdcardVisible">
			<div class="fyy-popup-bg"></div>
			<div class="fyy-popup-ceter">
				<div class="fyy-popup-inner">
					<h4>请补全身份信息</h4>
					<form class="mui-input-group">
						<div class="mui-input-row">
							<label>姓名</label>
							<input type="text" v-model="name" placeholder="请输入姓名">
						</div>
						<div class="mui-input-row">
							<label>身份证号</label>
							<input type="text" v-model="idCard" placeholder="请输入身份证号" style="text-transform: uppercase;">
						</div>
						
					</form>
					<a herf=""><span class="mui-icon mui-icon-help"></span>用于获取健康码及实名认证服务</a>					
				</div>
				<div class="fyy-popup-button">
					<div class="mui-col-xs-6">
						<button type="button" class="mui-btn" @click="editIdcardVisible=false">取消</button>
					</div>
					<div class="mui-col-xs-6">
						<button type="button" class="mui-btn mui-btn-primary" @click="updateIdCard">确认</button>
					</div>
				</div>
			</div>
		</div>
		<!--二维码展示-->

		<div class="fyy-popup-1" style="z-index: 999" v-show="qrcodeVisible">
			<div class="fyy-popup-bg" @click="qrcodeVisible=false"></div>
			<div class="fyy-popup-ceter fyy-popup-f">
				<div class="fyy-popup-inner">
					<div class="fyy-popup-title">
						<div class="mui-col-xs-4">
							<label>姓名</label>
							<h5 v-text="showMsg(name,'name')"></h5>
						</div>
						<div class="mui-col-xs-8">
							<label>身份证<span :class="(hideMsg?'icon-yanjing_bi ':'icon-hj ')+'mui-icon iconfont mui-pull-right'" @click="hideMsg=!hideMsg"></span></label>
							<h5 v-text="showMsg(idCard,'idCard')"></h5>
						</div>
					</div>
					<div class="fyy-popup-ma">
						<img :src="qrCodeImg" id="qrcode">
						<h6>更新于 {{qrcodeDetail.date}}</h6>
					</div>
					<form class="mui-input-group fyy-popup-data">
						<div class="mui-input-row">
							<label>数据来源</label>
							<span v-text="qrcodeDetail.sjly"></span>
						</div>
						<div class="mui-input-row" v-show="qrcodeDetail.healthyCode!='00'">
							<label>原因</label>
							<span v-text="qrcodeDetail.reason"></span>
						</div>
					</form>
				</div>
			</div>
		</div>

		<!-- <loading :visible="isLoading"></loading> -->
	</div>

</template>

<script>
	import * as API_Master from '@/apis/Master/index'
	import * as API_Health from '@/apis/Common/health'
	import Loading from '@/components/Loading.vue'
	import QRCode from 'qrcodejs2'
	import {
		convertCanvasToImage,
		checkIdCard,
		substrMb
	} from '@/utils'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		name: 'GreenCode',
		components: {
			Loading,
		},
		props: {
			personId: {
				require: true,
				default: '',
			},
		},
		data() {
			return {
				isLoading: false,
				name: "",
				idCard: undefined,
				statusName: '正常',
				statusTitleColor: '#33BB00',
				editIdcardVisible: false,
				qrcodeVisible: false,
				qrcodeDetail: {
					healthyCode: '11',
					date: '',
					reason: '',
					sjly: '',
				},
				qrcodeColor: {
					'00': {
						background: '#FFFFFF',
						foreground: '#33BB00',
						title: '正常',
						name: '绿码',
					},
					'01': {
						background: '#FFFFFF',
						foreground: '#FFBB00',
						title: '异常',
						name: '黄码',
					},
					'10': {
						background: '#FFFFFF',
						foreground: '#FF6666',
						title: '异常',
						name: '红码',
					},
					'11': {
						background: '#FFFFFF',
						foreground: '#CCCCCC',
						title: '异常',
						name: '灰码',
					},
				},
				qrCodeImg: '',
				hideMsg: true,
			}
		},
		created() {

		},
		methods: {
			//获取当前健康码的其作定义对象
			getCode() {
				return this.qrcodeColor[this.qrcodeDetail.healthyCode];
			},
			getGreenCodeByName(name,idCard) {
				this.idCard = undefined;
				//传过来的身份证号码才会处理
				this.isLoading = true;
				API_Health.getGreenCodeByName(name,idCard).then(response => {
					this.isLoading = false;

					this.idCard = idCard;
					this.name = name;

					if (response.hasIdCard) {
						this.qrcodeDetail = response;
						//生成二维码
						this.$nextTick(() => {
							this.qrcode();
						});
						//修改系统色
						this.$emit('callBack', this.qrcodeColor[this.qrcodeDetail.healthyCode]);
					}
				}).catch(error => {
					this.isLoading = false;
					//mui.toast(error);
				})
			},
			//获取绿码信息
			getGreenCode() {
				if (this.qrcodeDetail.date) {
					return;
				}
				//传过来的身份证号码才会处理
				this.isLoading = true;
				API_Health.getGreenCode(this.personId).then(response => {
					this.isLoading = false;

					this.idCard = response.idCard;
					this.name = response.name;

					if (response.hasIdCard) {
						this.qrcodeDetail = response;
						//生成二维码
						this.$nextTick(() => {
							this.qrcode();
						});
						//修改系统色
						this.$emit('callBack', this.qrcodeColor[this.qrcodeDetail.healthyCode]);
					}
				}).catch(error => {
					this.isLoading = false;
					//mui.toast(error);
				})
			},

			//显示绿码
			showGreenCode() {
				if (this.qrcodeDetail.date) {
					this.qrcodeVisible = true;
				} else {
					if (this.idCard === undefined) {
						mui.alert(
							'<div style="text-align:left;">可能由以下原因导致：<br/>1.该用户的身份证号尚未申请湖北健康码；<br/>2.该用户的姓名和身份证号与申请湖北健康码时填写的信息不一致；<br/>3.新申请的湖北健康码，系统数据同步有延时，请等待两天后再次尝试。</div>',
							'健康码获取失败',
							function() {

							}
						);
					} else {
						if (this.person_data.id == this.personId) {
							this.editIdcardVisible = true;
						}
					}
				}
			},
			//生成二维码
			qrcode() {
				console.log(this.qrcodeColor[this.qrcodeDetail.healthyCode]['foreground']);
				let qrcode = new QRCode('qrcode', {
					width: 200,
					height: 200,
					text: window.location.href.split("#")[0] + '/business/#/common/health/cert?personId=' + this.personId,
					correctLevel: QRCode.CorrectLevel.M,
					// render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
					colorLight: this.qrcodeColor[this.qrcodeDetail.healthyCode]['background'],
					colorDark: this.qrcodeColor[this.qrcodeDetail.healthyCode]['foreground']
				})
				var canvas = document.getElementsByTagName('canvas')[0];
				this.qrCodeImg = convertCanvasToImage(canvas);
			},
			//更新身份证号
			updateIdCard() {
				var _this = this
				var checkIdCardResult = checkIdCard(this.idCard);
				if (checkIdCardResult !== true) {
					mui.toast(checkIdCardResult);
				} else if (!this.name) {
					mui.toast('请输入姓名');
				} else {
					this.isLoading = true;
					API_Master.updateIdCard(this.idCard, this.name).then(response => {
						_this.isLoading = false;

						_this.editIdcardVisible = false;
						//获取绿码，并不会显示
						_this.getGreenCode();

						this.$emit('updateIdCardAsynCallBack', {
							idCard: this.idCard,
							name: this.name
						});

					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}
			},
			//显示与隐藏信息
			showMsg(str, type) {
				if (str) {

				} else {
					return
				}
				if (this.hideMsg) {
					if (type == 'name') {
						return substrMb(str, 0, 2) + '**';
					} else if (type == 'idCard') {
						return substrMb(str, 0, 1) + '****************' + substrMb(str, str.length - 1, 1);
					} else {
						return str;
					}
				} else {
					return str;
				}
			},

		},
		computed: {
			...mapGetters({
				person_data: 'person_data',
                person_popedom: 'person_popedom',
			})
		},
		watch: {}
	}
</script>

<style scoped src="@/assets/css/xpwyfyy.css"></style>
<style scoped src="@/assets/css/sczpfyy.css"></style>
<style src="@/assets/css/iconfont.css"></style>
<style scoped>
	.fyy-popup-bg{
		position: fixed;
		z-index: 998;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .3);
	}
	.fyy-popup-ceter{
		position: fixed;
		z-index: 999;
		top: 20%;
		left:0;
		right:0;
		margin: 30px;
		background: #ffffff;
		border-radius: 4px;
	}
	.fyy-popup-inner .mui-input-row{
		border-bottom:1px #eee solid
	}
	
	.fyy-popup-inner h4{
		font-size:18px;
		text-align: center;
		padding: 20px 15px;
		border-bottom: 1px #ddd solid;
		margin: 0;
		font-weight: bold;
	}
	.fyy-popup-inner a{
		padding:10px 15px;
		font-size:12px;
		color:#999;
		display: flex;
	}
	.fyy-popup-inner a .mui-icon{
		font-size:14px
	}
	.fyy-popup-button{
		display: flex;
		padding:10px
	}
	.fyy-popup-button .mui-col-xs-6{
		padding:0 5px
	}
	.fyy-popup-button button{
		width:100%
	}
	.fyy-popup-title{
		display: flex;
		padding:10px 15px
	}
	.fyy-popup-ma{
		margin:0 auto;
		padding:0 15px;
		text-align: center;
	}
	.fyy-popup-ma img{
		width:100%
	}
	.fyy-popup-data span{
		line-height: 50px;
	}
	.fyy-popup-f label{
		color:#666
	}
	.fyy-popup-f{
		top:15%
	}
</style>