|
|
@@ -0,0 +1,305 @@
|
|
|
+<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="请输入身份证号">
|
|
|
+ </div>
|
|
|
+ <div class="mui-input-row">
|
|
|
+ <div style="text-align: center;"><a class="jp-faq mui-icon mui-icon-help" style="color:#999;font-size: 14px;">用于获取健康码及实名认证服务</a></div>
|
|
|
+ </div>
|
|
|
+ <div class="mui-button-row">
|
|
|
+ <button type="button" class="mui-btn" @click="editIdcardVisible=false">取消</button>
|
|
|
+ <button type="button" class="mui-btn red" @click="updateIdCard">确认</button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </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-center">
|
|
|
+ <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">
|
|
|
+ <div class="mui-input-row">
|
|
|
+ <label>数据来源</label>
|
|
|
+ <span v-text="qrcodeDetail.sjly" style="line-height: 28px;padding-top:10px;"></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 '$project/components/Loading.vue'
|
|
|
+ import QRCode from 'qrcodejs2'
|
|
|
+ import {
|
|
|
+ convertCanvasToImage,
|
|
|
+ checkIdCard,
|
|
|
+ substrMb
|
|
|
+ } from '$project/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];
|
|
|
+ },
|
|
|
+ //获取绿码信息
|
|
|
+ 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',
|
|
|
+ company_data: 'company_data',
|
|
|
+ })
|
|
|
+ },
|
|
|
+ watch: {}
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
|
|
|
+<style scoped src="$project/assets/css/sczpfyy.css"></style>
|
|
|
+<style scoped src="$project/assets/css/iconfont.css"></style>
|
|
|
+<style scoped>
|
|
|
+ .fyy-scon-center .mui-checkbox input[type=checkbox],
|
|
|
+ .fyy-scon-center .mui-radio input[type=radio] {
|
|
|
+ left: 0
|
|
|
+ }
|
|
|
+
|
|
|
+ .fyy-scon-center.mui-card .mui-checkbox input[type=checkbox]:checked:before,
|
|
|
+ .fyy-scon-center.mui-card .mui-radio input[type=radio]:checked:before {
|
|
|
+ color: #096DD9
|
|
|
+ }
|
|
|
+
|
|
|
+ .fyy-scon-center .mui-input-row label {
|
|
|
+ padding-left: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fyy-scon-center.mui-card {
|
|
|
+ background: #ffffff;
|
|
|
+ padding: 15px 15px 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fyy-popup-1 {
|
|
|
+ margin-left: auto;
|
|
|
+ margin-top: auto;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fyy-popup-1 .iconfont {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #999
|
|
|
+ }
|
|
|
+
|
|
|
+ .mui-popup {
|
|
|
+ width: 300px;
|
|
|
+ }
|
|
|
+</style>
|
