wxservice-web/src/components/electronic-health-card/index.vue

<template>
  <div style="position: relative;width: 86%; margin-left: 7%; margin-top: 12px" @click="handleCardClick">
    <img src="http://staticweb.hnthyy.cn/images/electronic-health-card.png"
         style="width: 100%">
    <div style="position: absolute; bottom: 38px; left: 20px">
      <div style="font-size: 24px;">
        {{ cardInfo.blurName }}
      </div>
      <div>
        {{ cardInfo.blurIdNumber }}
      </div>
    </div>
    <div :id="cardInfo.healthCardId"
         style="position: absolute;
         background-color: white;
         height: 90px;
         bottom: 42px;
         right: 10px">
    </div>
    <div v-if="!cardInfo.healthCardId"
        style="
          position: absolute;
          top: 0; right: 0; bottom: 0; left: 0;
          background-color: rgba(255,255,255,.55);
          display: flex;
          align-items: center;
          justify-content: center;
         ">
      <div style="text-align: center; width: 300px">
        <span style="
               border-radius: 30px;
               background-color: #409eff;
               color: white;
               padding: 0 10px;
               font-size: 40px;">
          +
        </span>
        <div style="margin-top: 8px">点“+”申领电子健康卡</div>
      </div>
    </div>
  </div>
</template>

<script>
import {qrcanvas} from "qrcanvas";
import {onMounted} from "vue";
import router from '../../router/index'

export default {
  props: {
    cardInfo: {
      type: Object,
      default: {}
    }
  },
  setup (props) {
    
    const handleCardClick = () => {
      if (props.cardInfo.healthCardId) {
        router.push({
          name: 'showCardQrCode',
          query: {
            card: encodeURIComponent(JSON.stringify(props.cardInfo))
          }
        })
      } else {
        router.push('/addElectronicHealthCard')
      }
    }
    
    onMounted(() => {
      if (props.cardInfo.healthCardId) {
        const canvas = qrcanvas({
          data: props.cardInfo.qrCodeText,
          size: 90,
          padding: 5,
          foreground: 'green',
        })
        document.getElementById(props.cardInfo.healthCardId).appendChild(canvas)
      }
    })
    
    return {
      handleCardClick
    }
  }
}
</script>