com.kasite.client.uniapp.patient/pagesPersonal/st1/business/patientManagement/healthCardQrcode/healthCardQrcode.vue

<template>
	<view class="container">
	  <view class="content" v-if="showCon">
	    <view class="bar_list" v-if="queryBean.healthCard">
	      <view :class="['bar_item', type=='healthCard'?'bar_item_active':'']" @click="tabbarClick" data-type="healthCard">电子健康卡</view>
	      <view :class="['bar_item', type=='card'?'bar_item_active':'']" @click="tabbarClick" data-type="card">就诊卡</view>
	    </view>
	    <view class="content_inner">
	      <view class="qr_code" v-show="type=='healthCard'">
	        <canvas class='coode' canvas-id='canvasHealth'></canvas>
	      </view>
	      <view class="qr_code" v-show="type=='card'">
	        <!-- <image class="card-qrcode-logo" src="@/static/images/healthCard/logo_.png" alt="" /> -->
	        <cover-image class="card-qrcode-logo" src="@/static/images/healthCard/logo_.png"></cover-image>
	        <canvas class='baseCode' canvas-id='canvasCard' ></canvas>
	        <!-- <image style="width:300upx;height:300upx" src="data:image/png;base64,{{queryBean.base64Code}}" wx:if="{{queryBean.healthCard&&queryBean.base64Code}}" mode="widthFix"></image> -->
	      </view>
	      <!-- <view class="card_type">{{queryBean.healthCard?'电子健康卡':'院内就诊卡'}}</view> -->
	
	      <view class="list">
	        <view class="item">
	          <view class="item_tit">姓名</view>
	          <view class="item_con">{{queryBean.MemberName}}</view>
	        </view>
	
	        <!-- <view class="item">
	          <view class="item_tit">性别</view>
	          <view class="item_con">{{queryBean.OtherInfo.patientsex}}</view>
	        </view> -->
	
	        <!-- <view class="item">
	          <view class="item_tit">病人ID</view>
	          <view class="item_con">{{queryBean.OtherInfo.patientid}}</view>
	        </view> -->
	
	        <view class="item">
	          <view class="item_tit">手机号</view>
	          <view class="item_con">{{queryBean.Mobile}}</view>
	        </view>
	        <view class="item">
	          <view class="item_tit">就诊卡号</view>
	          <view class="item_con">{{queryBean.CardNo}}</view>
	        </view>
	        <!-- <view class="item">
	          <view class="item_tit">患者身份</view>
	          <view class="item_con">{{queryBean.OtherInfo.chargetype}}</view>
	        </view> -->
	
	        <!-- <view class="item">
	          <view class="item_tit">证件类型</view>
	          <view class="item_con">{{queryBean.OtherInfo.ext5==1?'本人身份证':'监护人身份证'}}</view>
	        </view> -->
	
	        <view class="item">
	          <view class="item_tit">证件号</view>
	          <view class="item_con">{{queryBean.IdCardNo}}</view>
	        </view>
	
	        <view class="item">
	          <view class="item_tit">家庭住址</view>
	          <view class="item_con">{{queryBean.Address}}</view>
	        </view>
	
	        <view class="item" v-if="queryBean.healthCard" v-show="type=='healthCard'">
	          <view class="item_tit">{{'电子健康卡'}}</view>
	          <view class="item_con">{{queryBean.healthCard}}</view>
	        </view>
	
	      </view>
	    </view>
	
	    <view class="btn" @click="toH5" v-if="queryBean.healthCard">进入卡包</view>
  </view>
	</view>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { common, QRCode } from '@/utils';

const app = getApp();

const queryBean = ref<any>({});
const type = ref('healthCard');
const showCon = ref(false);

const main = async (bean: any) => {
    common.showLoading('加载中');
    if (!common.isEmpty(bean)) {
      var otherInfo = bean.OtherInfo;
      if(otherInfo){
        var qrCodeText = otherInfo.qrCodeText;
        if(qrCodeText){
          bean.healthCard = qrCodeText;
        }
      }else{
        type.value = 'card';
      }
      
      setTimeout(() => {
        // 如果是就诊卡 或者健康卡code未加载成功
        if(bean.healthCard){
            new QRCode('canvasHealth', {
                text: bean.healthCard,
                width: uni.upx2px(300),
                height: uni.upx2px(300),
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H,
            });
        }
        
        new QRCode('canvasCard', {
            text: bean.CardNo,
            width: uni.upx2px(300),
            height: uni.upx2px(300),
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H,
        });
      }, 200);
    }
    
    queryBean.value = bean;
    showCon.value = true;
    common.hideLoading();
}

onLoad((options) => {
    let cardInfo = app.globalData.cardInfo_x;
    main(cardInfo);
});

const tabbarClick = (e: any) => {
    let t = e.currentTarget.dataset.type;
    type.value = t;
}

const toH5 = () => {
    common.showToast("跳转卡包 暂不支持");
}
</script>

<style lang="scss" scoped>
	.content_inner {
	  background-color: #fff;
	  padding: 1px 50upx;
	  border-bottom: 1px solid #ebeaea;
	}
	
	.qr_code{ 
	  margin: 30upx auto;
	  font-size: 0;
	  min-height:200upx;
	  overflow: hidden;
	  text-align: center;
	  position: relative; 
	}
	
	.card_type {
	  text-align: center;
	}
	
	.item {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 30upx 0;
	  border-top: 1px solid rgb(245, 245, 245);
	}
	
	.item_con {
	  color: rgb(127, 127, 127);
	  margin-right: 20upx;
	  width: 460upx;
	  text-align: right;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  overflow: hidden;
	}
	
	.btn {
	  margin: 40upx;
	  border-radius: 5px;
	  color: #fff;
	  padding: 20upx 0;
	  /* background-color: rgb(89, 164, 248); */
	  background-color: var(--auxiliaryColor);
	  text-align: center;
	}
	
	canvas {
	  width: 300upx;
	  height: 300upx;
	  margin: 0 auto;
	}
	.bar_list{
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  background-color: #fff;
	  margin-bottom: 1px;
	}
	.bar_item{
	  line-height: 100upx;
	  width: 50%;
	  text-align: center;
	}
	.bar_item_active{
	  color: var(--auxiliaryColor) !important;
	}
	.del{
	  background-color: #fff; 
	  color: var(--auxiliaryColor) !important;
	}
	
	.card-qrcode-logo {
	  border: 2px solid #fff;
	    height: 55upx;
	    width: 55upx;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	  z-index: 10;
	}
	
	.baseCode{
	  z-index: 1;
	}
</style>