添加电子健康卡模块

src/api/electronic-health-card.js

@@ -0,0 +1,49 @@
+import request from '../utils/request'
+
+export function getRegisteredCards(openId) {
+    return request({
+        url: '/electronicHealthCard/getRegisteredCards',
+        method: 'get',
+        params: { openId },
+    })
+}
+
+export function linkHealthCard(healthCode, openId) {
+    return request({
+        url: '/electronicHealthCard/linkHealthCard',
+        method: 'get',
+        params: { healthCode, openId },
+    })
+}
+
+export function register(data) {
+    return request({
+        url: '/electronicHealthCard/register',
+        method: 'post',
+        data,
+    })
+}
+
+export function analyseIdCard(data) {
+    return request({
+        url: '/electronicHealthCard/analyseIdCard',
+        method: 'post',
+        data,
+    })
+}
+
+export function getOrderIdByOutAppId(qrCodeText) {
+    return request({
+        url: '/electronicHealthCard/getOrderIdByOutAppId',
+        method: 'get',
+        params: { qrCodeText },
+    })
+}
+
+export function getEncryptOpenId(openId) {
+    return request({
+        url: '/electronicHealthCard/getEncryptOpenId',
+        method: 'get',
+        params: { openId },
+    })
+}

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

@@ -0,0 +1,88 @@
+<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>

src/router/index.js

@@ -300,6 +300,49 @@ export const constantRoutes = [
       title: '黄码免费核酸检测',
     },
   },
+  {
+    path: '/electronicHealthCardHome',
+    component: () => import('../views/hospital-service/electronic_health_card/ElectronicHealthCardHome.vue'),
+    meta: {
+      title: '电子健康卡',
+    },
+  },
+  {
+    path: '/addElectronicHealthCard',
+    component: () => import('../views/hospital-service/electronic_health_card/AddElectronicHealthCard.vue'),
+    meta: {
+      title: '添加健康卡',
+    },
+  },
+  {
+    path: '/linkHealthCardResult',
+    component: () => import('../views/hospital-service/electronic_health_card/LinkHealthCardResult.vue'),
+    meta: {
+      title: '结果页',
+    },
+  },
+  {
+    path: '/activeHealthCard',
+    component: () => import('../views/hospital-service/electronic_health_card/ActiveHealthCard.vue'),
+    meta: {
+      title: '激活健康卡',
+    },
+  },
+  {
+    path: '/showCardQrCode',
+    name: 'showCardQrCode',
+    component: () => import('../views/hospital-service/electronic_health_card/ShowCardQrCode.vue'),
+    meta: {
+      title: '我的健康卡',
+    },
+  },
+  {
+    path: '/newUserRegForElectronicHealthCard',
+    component: () => import('../views/hospital-service/electronic_health_card/NewUserReg.vue'),
+    meta: {
+      title: '新用户注册',
+    },
+  },
   {
     path: '/500',
     component: () => import('../views/500.vue'),

src/utils/date.js

@@ -117,3 +117,15 @@ export function formatDatetime(date) {
   }
   return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':00'
 }
+
+export function getDateTime() {
+  const date = new Date()
+  const year = date.getFullYear()
+  let month = date.getMonth() + 1
+  let day = date.getDate()
+  let hour = date.getHours()
+  let minute = date.getMinutes()
+  let second = date.getSeconds()
+  return year + '-' + ('0' + month).slice(-2) + '-' + ('0' + day).slice(-2) +
+      ' ' + ('0' + hour).slice(-2) + ':' + ('0' + minute).slice(-2) + ':' + ('0' + second).slice(-2)
+}

src/views/hospital-service/HospitalServiceHome.vue

@@ -46,7 +46,7 @@
           <img src="../../assets/hospital-service/wenjuandiaocha.png" />
           <div class="icon-label">问卷调查</div>
         </van-col>
-        <van-col span="6" @click="routeTo(filterPath('/physicalExamIndex', '/selectPhysicalExamPatient'))">
+        <van-col span="6" @click="routeTo(filterPath('/physicalExamIndex/', '/selectPhysicalExamPatient'))">
           <img src="../../assets/hospital-service/tijianbaogao.png" />
           <div class="icon-label">体检报告</div>
         </van-col>
@@ -62,24 +62,34 @@
       </van-row>
     </div>
 
-    <div style="position: relative; width: 95%; margin-top: 10px; height: 70px" @click="toybdzpz">
+    <div style="position: relative; width: 95%; margin-top: 10px; height: 70px; display: flex">
       <div
         style="
+          width: 45%;
           margin-left: 5%;
           height: 70px;
           background-size: 100%;
           border-radius: 8px;
           display: flex;
           align-items: center;
-          background-image: url('http://staticweb.hnthyy.cn/images/yuyueguahaobackground.png');
+          background-image: url('http://staticweb.hnthyy.cn/images/ybdzpzrk.png');
         "
+        @click="toybdzpz"
+      >
+      </div>
+      <div
+        style="
+          width: 45%;
+          margin-left: 5%;
+          height: 70px;
+          background-size: 100%;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+          background-image: url('http://staticweb.hnthyy.cn/images/dzjkkrk.png');
+        "
+          @click="todzjkk"
       >
-        <div>
-          <img style="margin-left: 10px; margin-top: 11px" src="http://staticweb.hnthyy.cn/images/hospitalcross.png" />
-        </div>
-        <div style="min-width: max-content; color: white; font-size: 26px; font-weight: bold; padding-left: 12px">
-          医保电子凭证
-        </div>
       </div>
     </div>
 
@@ -118,6 +128,7 @@ import store from '../../store'
 import { getDate } from '../../utils/date'
 import router from '../../router'
 import axios from 'axios'
+import {Toast} from "vant";
 export default {
   setup() {
     const windowSize = store.state.windowSize
@@ -217,6 +228,10 @@ export default {
         'https://mp.weixin.qq.com/insurance/card/creditjump?cityid=430100&from=u1ZYLGrYTJspxoHAQoU96w.%3D#wechat_redirect'
     }
 
+    const todzjkk = () => {
+      router.push('/electronicHealthCardHome')
+    }
+
     const loading = ref(false)
     onMounted(() => {
       if (doctors.value.length === 0) {
@@ -248,6 +263,7 @@ export default {
       loadingStyle,
       loading,
       toybdzpz,
+      todzjkk,
     }
   },
 }

src/views/hospital-service/electronic_health_card/ActiveHealthCard.vue

@@ -0,0 +1,27 @@
+<template>
+  <window-size>
+    <div style="width: 100%; text-align: center; font-size: 18px; font-weight: bold; margin-top: 50px">激活健康卡</div>
+  </window-size>
+</template>
+
+<script>
+import {getEncryptOpenId} from '../../../api/electronic-health-card'
+import {onMounted} from "vue";
+export default {
+  setup() {
+
+    onMounted(() => {
+      const openId = localStorage.getItem('openId') || 'oao6f0y4oF7jd60QhzPzMD9C3bBU'
+      getEncryptOpenId(openId).then(res => {
+        const encryptData = encodeURI(res);
+        const redirectUri = encodeURI('http://staticweb.hnthyy.cn/electronicHealthCardHome')
+        window.location.href = `https://health.tengmed.com/open/batchActiveCard?open_id=${encryptData}&redirect_uri=${redirectUri}`
+      })
+    })
+
+    return {
+
+    }
+  },
+}
+</script>

src/views/hospital-service/electronic_health_card/AddElectronicHealthCard.vue

@@ -0,0 +1,104 @@
+<template>
+  <window-size>
+    <div class="option-box green-box" @click="newUserRegister">
+      <div class="big-text">
+        首次申领 填写领卡信息
+      </div>
+      <div class="small-text1">
+        证件拍照上传，自动填信息
+      </div>
+    </div>
+    <div class="option-box blue-box" @click="linkHealthCard">
+      <div class="big-text">
+        有健康卡 快速选卡关联
+      </div>
+      <div class="small-text2">
+        已领卡用户，授权关联信息
+      </div>
+    </div>
+    <div>
+      <div style="margin-top: 20px; padding-left: 12px;font-size: 14px">
+        关于用户隐私说明：
+      </div>
+      <div class="tips-box">
+        <div>
+          · 领卡需进行身份信息核验，请确保提供的信息合法、有效
+        </div>
+        <div>
+          · 电子健康卡管理系统平台已采取技术措施保证用户信息安全，不泄露、损毁或丢失
+        </div>
+        <div>
+          · 未经本人授权，平台不会以任何形式向第三方透露申领人信息
+        </div>
+        <div>
+          · 请您妥善保管电子健康卡二维码展示页等信息，以防他人窃取
+        </div>
+      </div>
+    </div>
+  </window-size>
+</template>
+
+<script>
+export default {
+  setup() {
+
+    const newUserRegister = () => {
+      const isvAppId = '4c84fdd3b55e43c780f407a49d4d0cd4';
+      const redirectUri = encodeURI('http://staticweb.hnthyy.cn/newUserRegForElectronicHealthCard')
+      window.location.href = `https://health.tengmed.com/open/getUserCode?apiVersion=3&type=register&isvAppId=${isvAppId}&redirect_uri=${redirectUri}`
+    }
+
+    const linkHealthCard = () => {
+      const hospitalId = '37156';
+      const redirectUri = encodeURI('http://staticweb.hnthyy.cn/linkHealthCardResult')
+      window.location.href = `https://health.tengmed.com/open/getHealthCardList?redirect_uri=${redirectUri}&hospitalId=${hospitalId}`;
+    }
+
+    return {
+      newUserRegister,
+      linkHealthCard
+    }
+  }
+}
+</script>
+
+<style scoped>
+.option-box {
+  margin-top: 12px;
+  width: 88%;
+  margin-left: 6%;
+  height: 100px;
+  border-radius: 8px;
+}
+.green-box {
+  background-color: rgb(170, 255, 172);
+  border-bottom: 2px solid green;
+}
+.blue-box {
+  color: white;
+  background-color: #54C6FFFF;
+  border-bottom: 2px solid #0073af;
+}
+.big-text {
+  padding: 20px 0 0 12px;
+  font-size: 22px;
+  font-weight: bold;
+}
+.small-text1 {
+  color: gray;
+  padding: 8px 0 0 12px;
+}
+.small-text2 {
+  color: #f6f6f6;
+  padding: 8px 0 0 12px;
+}
+.tips-box {
+  color: gray;
+  font-size: 12px;
+  padding-left: 12px;
+  margin-top: 12px;
+}
+.tips-box > div {
+  margin-bottom: 8px;
+}
+</style>

src/views/hospital-service/electronic_health_card/ElectronicHealthCardHome.vue

@@ -0,0 +1,102 @@
+<template>
+  <window-size>
+    <van-swipe :loop="false" @change="indexChange">
+      <van-swipe-item v-for="card in healthCards">
+        <electronic-health-card :card-info="card"></electronic-health-card>
+      </van-swipe-item>
+      <template #indicator="{ active, total }">
+        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
+      </template>
+    </van-swipe>
+
+    <div style="width: 86%; margin-left: 7%; margin-top: 20px">
+      <van-button block type="primary" @click="handleButtonClick">
+        {{ cptBtnText }}
+      </van-button>
+    </div>
+
+  </window-size>
+</template>
+
+<script>
+import {computed, onMounted, ref} from "vue";
+import {getRegisteredCards} from '../../../api/electronic-health-card'
+import {Dialog} from "vant";
+import ElectronicHealthCard from '../../../components/electronic-health-card/index.vue'
+import router from '../../../router/index'
+export default {
+  components: {
+    ElectronicHealthCard,
+  },
+  setup() {
+    const healthCards = ref([])
+    const currentIndex = ref(0)
+    const indexChange = (index) => {
+      currentIndex.value = index
+    }
+
+    const cptBtnText = computed(() => {
+      if (healthCards.value.length === 0) {
+        return '申领健康卡'
+      }
+      if (currentIndex.value === healthCards.value.length - 1) {
+        if (!healthCards.value[currentIndex.value].healthCardId) {
+          return '申领健康卡'
+        }
+      }
+      return '出示二维码';
+    })
+
+    const handleButtonClick = () => {
+      if (cptBtnText.value === '出示二维码') {
+        router.push({
+          name: 'showCardQrCode',
+          query: {
+            card: encodeURIComponent(JSON.stringify(healthCards.value[currentIndex.value]))
+          }
+        })
+      } else {
+        router.push('/addElectronicHealthCard')
+      }
+    }
+
+    onMounted(() => {
+      const openId = localStorage.getItem('openId') || 'test'
+      if (openId) {
+        getRegisteredCards(openId).then(res => {
+          healthCards.value = res
+          if (healthCards.value.length < 10) {
+            healthCards.value.push({})
+          }
+        })
+      } else {
+        Dialog.alert({
+          title: '提示',
+          message: '缺少关键要素值，请从微信公众号重新打开。',
+        }).then(() => {
+          // 关闭微信浏览器
+          WeixinJSBridge.call('closeWindow')
+        });
+      }
+    })
+
+    return {
+      healthCards,
+      cptBtnText,
+      indexChange,
+      handleButtonClick,
+    }
+  }
+}
+</script>
+
+<style scoped>
+.custom-indicator {
+  position: absolute;
+  right: 7%;
+  bottom: 5px;
+  padding: 2px 5px;
+  font-size: 12px;
+  background: rgba(0, 0, 0, 0.1);
+}
+</style>

src/views/hospital-service/electronic_health_card/LinkHealthCardResult.vue

@@ -0,0 +1,112 @@
+<template>
+  <window-size>
+    <div style="width: 100%; text-align: center; margin-top: 50px">
+      <div v-if="resultCode === 0">
+        <span style="
+          border-radius: 25px;
+          background-color: rgb(10,199,111);
+          color: white;
+          font-size: 34px;
+          text-align: center;
+          padding: 7px 9px;
+        ">
+          <van-icon name="success"/>
+        </span>
+        <div style="font-size: 20px; font-weight: bold; margin-top: 30px">
+          健康卡添加成功
+        </div>
+        <div style="margin-top: 100px">
+          <van-button type="primary" plain style="width: 120px" @click="linkDone">完成</van-button>
+        </div>
+      </div>
+
+      <div v-if="resultCode === -1">
+        <span style="
+          border-radius: 25px;
+          background-color: rgb(250,66,66);
+          color: white;
+          font-size: 34px;
+          text-align: center;
+          padding: 7px 9px;
+        ">
+          <van-icon name="cross" />
+        </span>
+        <div style="font-size: 20px; font-weight: bold; margin-top: 30px">
+          {{ resultMessage }}
+        </div>
+        <div style="margin-top: 100px">
+          <van-button type="primary" plain style="width: 120px" @click="goLastPage">返回上一页</van-button>
+        </div>
+      </div>
+    </div>
+  </window-size>
+</template>
+
+<script>
+import {onMounted, ref} from "vue";
+import {useRouter} from "vue-router";
+import {linkHealthCard} from '../../../api/electronic-health-card'
+
+export default {
+  setup() {
+
+    const router = useRouter()
+
+    const resultCode = ref(null)
+    const resultMessage = ref(null)
+
+    const healthCodeAction = (val) => {
+      switch (val) {
+        case 0:
+        case '0':
+          const isvAppId = '4c84fdd3b55e43c780f407a49d4d0cd4';
+          const redirectUri = encodeURI('http://staticweb.hnthyy.cn/newUserRegForElectronicHealthCard')
+          window.location.href = `https://health.tengmed.com/open/getUserCode?apiVersion=3&type=register&isvAppId=${isvAppId}&redirect_uri=${redirectUri}`
+          break;
+        case -1:
+        case '-1':
+          router.go(-1)
+          break;
+        default:
+          linkHealthCard(val, localStorage.getItem('openId')).then(res => {
+            if (res.healthCardId) {
+              resultCode.value = 0
+            }
+          }).catch(e => {
+            resultCode.value = -1
+            resultMessage.value = e
+          })
+          break;
+      }
+    }
+
+    const linkDone = () => {
+      router.push('/electronicHealthCardHome')
+    }
+
+    const goLastPage = () => {
+      router.go(-1)
+    }
+
+    onMounted(() => {
+      const pathSplit = router.currentRoute.value.fullPath.split('?')
+      if (pathSplit.length > 1) {
+        const rawParams = pathSplit[1].split('&')
+        rawParams.forEach(param => {
+          const paramKeyVal = param.split('=')
+          if (paramKeyVal[0] === 'healthCode') {
+            healthCodeAction(paramKeyVal[1])
+          }
+        })
+      }
+    })
+
+    return {
+      resultCode,
+      resultMessage,
+      linkDone,
+      goLastPage,
+    }
+  }
+}
+</script>

src/views/hospital-service/electronic_health_card/NewUserReg.vue

@@ -0,0 +1,119 @@
+<template>
+  <window-size>
+    <div>
+      <van-field v-model="userinfo.name" type="text" label="姓名" placeholder="请填写真实姓名"></van-field>
+
+      <van-field v-model="userinfo.idNumber" type="text" label="身份证" placeholder="请输入身份证号">
+        <template #button>
+          <van-uploader :after-read="resizeIdCard" >
+            <div style="font-size: 23px; color: #409eff">
+              <van-icon name="photograph" />
+            </div>
+          </van-uploader>
+        </template>
+      </van-field>
+
+      <van-field v-model="userinfo.relationLabel" type="text" label="关系"
+                 placeholder="选择为谁申领" is-link readonly @click="showRelationPicker = true"></van-field>
+      <van-popup v-model:show="showRelationPicker" round position="bottom">
+        <van-picker
+            :columns="relationColumns"
+            @cancel="showRelationPicker = false"
+            @confirm="onConfirmSelectRelation"
+        />
+      </van-popup>
+
+      <van-field v-model="userinfo.phone1" type="text" label="手机号码" placeholder="请输入手机号码"></van-field>
+    </div>
+    <div style="margin-top: 20px">
+      <van-button block type="primary" @click="applyHealthCard">申领电子健康卡</van-button>
+    </div>
+  </window-size>
+</template>
+
+<script>
+import {useRouter} from "vue-router";
+import {onMounted, reactive, ref} from "vue";
+import {register} from '../../../api/electronic-health-card'
+import {analyseIdCard} from "../../../api/electronic-health-card";
+import {resize} from "../../../utils/image";
+
+export default {
+  setup() {
+    const router = useRouter()
+
+    const userinfo = reactive({
+      wechatCode: '',
+      name: '',
+      nation: '',
+      idNumber: '',
+      relation: '',
+      address: '',
+      relationLabel: '',
+      phone1: '',
+      openId: localStorage.getItem('openId')
+    })
+
+    const showRelationPicker = ref(false)
+    const relationColumns = [
+      { text: '本人', value: '0' },
+      { text: '父母', value: '1' },
+      { text: '子女', value: '2' },
+      { text: '夫妻', value: '3' },
+      { text: '亲属', value: '4' },
+      { text: '朋友', value: '5' },
+      { text: '其他', value: '6' },
+    ]
+    const onConfirmSelectRelation = (selectedOptions) => {
+      showRelationPicker.value = false
+      userinfo.relation = selectedOptions.value
+      userinfo.relationLabel = selectedOptions.text
+    }
+
+    const applyHealthCard = () => {
+      register(userinfo).then(res => {
+        console.log(res)
+      })
+    }
+
+    const resizeIdCard = (image) => {
+      if (image.file.size / 1024 < 500) {
+        uploadIdCard(image.content)
+      } else {
+        resize(image.content, uploadIdCard)
+      }
+    }
+    const uploadIdCard = (base64) => {
+      analyseIdCard({ content: base64 }).then((res) => {
+        userinfo.name = res.name
+        userinfo.nation = res.nation
+        userinfo.gender = res.gender
+        userinfo.idNumber = res.id
+        userinfo.address = res.address
+      })
+    }
+
+    onMounted(() => {
+      const pathSplit = router.currentRoute.value.fullPath.split('?')
+      if (pathSplit.length > 1) {
+        const rawParams = pathSplit[1].split('&')
+        rawParams.forEach(param => {
+          const paramKeyVal = param.split('=')
+          if (paramKeyVal[0] === 'wechatCode') {
+            userinfo.wechatCode = paramKeyVal[1]
+          }
+        })
+      }
+    })
+
+    return {
+      userinfo,
+      showRelationPicker,
+      relationColumns,
+      onConfirmSelectRelation,
+      applyHealthCard,
+      resizeIdCard,
+    }
+  }
+}
+</script>

src/views/hospital-service/electronic_health_card/ShowCardQrCode.vue

@@ -0,0 +1,84 @@
+<template>
+  <window-size>
+    <div style="width: 100%; text-align: center; margin-top: 30px">
+      {{ currentTime }}
+    </div>
+    <div id="qrCode" style="width: 100%; text-align: center; margin-top: 30px"></div>
+    <div style="margin-top: 50px; padding: 0 30px">
+      <van-button type="primary" block @click="toHealthCardHome">返回健康卡首页</van-button>
+    </div>
+    <div style="margin-top: 20px; width:100%; text-align: center">
+      <span style="text-decoration: underline; color: #409eff" @click="myCardPacket">进入我的卡包</span>
+    </div>
+  </window-size>
+</template>
+
+<script>
+import {onDeactivated, onMounted, ref} from "vue";
+import {useRouter} from "vue-router";
+import {qrcanvas} from "qrcanvas";
+import {getDateTime} from "../../../utils/date";
+import {getOrderIdByOutAppId} from '../../../api/electronic-health-card'
+
+export default {
+  setup() {
+    const router = useRouter()
+    const card = ref({})
+
+    const currentTime = ref('')
+
+    let timeInterval = null
+    const refreshCurrentTime = () => {
+      currentTime.value = getDateTime()
+      timeInterval = setInterval(() => {
+        currentTime.value = getDateTime()
+      }, 1000)
+    }
+
+    const makeQrCode = () => {
+      const canvas = qrcanvas({
+        data: card.value.qrCodeText,
+        size: 200,
+        foreground: 'green',
+      })
+      document.getElementById('qrCode').appendChild(canvas)
+    }
+
+    const toHealthCardHome = () => {
+      router.push('/electronicHealthCardHome')
+    }
+
+    const myCardPacket = () => {
+      getOrderIdByOutAppId(card.value.qrCodeText).then(res => {
+        const redirectUri = 'http://staticweb.hnthyy.cn/electronicHealthCardHome'
+        window.location.href = `https://03-h5-health.tengmed.com/api/open/takeMsCard?order_id=${res}&redirect_uri=${redirectUri}`
+      })
+    }
+
+    onDeactivated(() => {
+      clearInterval(timeInterval)
+    })
+
+    onMounted(() => {
+      const pathSplit = router.currentRoute.value.fullPath.split('?')
+      if (pathSplit.length > 1) {
+        const rawParams = pathSplit[1].split('&')
+        rawParams.forEach(param => {
+          const paramKeyVal = param.split('=')
+          if (paramKeyVal[0] === 'card') {
+            card.value = JSON.parse(decodeURIComponent(decodeURIComponent(paramKeyVal[1])))
+            makeQrCode()
+            refreshCurrentTime()
+          }
+        })
+      }
+    })
+    return {
+      card,
+      currentTime,
+      myCardPacket,
+      toHealthCardHome,
+    }
+  },
+}
+</script>