黄码免费核酸下单后显示就诊ID二维码

src/views/isolations/YellowHealthCardFreeCovidExam.vue

@@ -35,6 +35,16 @@
         <van-button type="primary" plain block to="/createPatientCard">我没有诊疗卡</van-button>
       </div>
     </van-dialog>
+
+    <div v-show="showQrcode" style="position: absolute; top: 60px; left: 0; right: 0; bottom: 0; background: white">
+      <div style="width: 100%; text-align: center; margin: 30px 0 20px 0; font-size: 16px; color: #4b4b4b">采样时出示此二维码</div>
+      <div id="qrcode" :style="qrMargin"></div>
+      <div style="width: 100%; text-align: center; margin-top: 8px; font-size: 20px; color: #4b4b4b">{{currentPtnt.patientId}}</div>
+      <div style="margin-top: 30px">
+        <van-button block type="primary" plain hairline @click="closeWindow">关闭页面</van-button>
+      </div>
+    </div>
+
   </window-size>
 </template>
 
@@ -45,10 +55,16 @@ import { computed, ref } from 'vue'
 import WindowSize from "../../components/window-size";
 import {Dialog} from "vant";
 import {yellowHealthCardFreeCovidExam} from '../../api/order-covid-exam'
+import {qrcanvas} from 'qrcanvas'
 
 export default {
   components: {WindowSize},
   setup() {
+    const showQrcode = ref(false)
+    const windowSize = store.state.windowSize
+    const qrMargin = {
+      marginLeft: (windowSize.w - 164) / 2 + 'px',
+    }
     const cards = computed(() => {
       return store.state.patientCards
     })
@@ -58,6 +74,7 @@ export default {
     const addCardText = computed(() => {
       return '还可添加' + (5 - cards.value.length) + '人'
     })
+    const currentPtnt = ref({})
     const showCreatedCardMethod = ref(false)
     const confirmFreeExam = (ptnt) => {
       Dialog.confirm({
@@ -66,24 +83,45 @@ export default {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
       }).then(() => {
+        currentPtnt.value = ptnt
         yellowHealthCardFreeCovidExam(ptnt.patientId).then((res) => {
           Dialog.alert({
             title: '提示',
             message: res,
           }).then(() => {
-            WeixinJSBridge.call('closeWindow');
-          });
+            drawPatientIdQrcode(ptnt.patientId)
+          })
+        }).catch(() => {
+          drawPatientIdQrcode(ptnt.patientId)
         })
       });
     }
 
+    const drawPatientIdQrcode = (patientId) => {
+      const canvas = qrcanvas({
+        data: patientId,
+        size: 164,
+      })
+      document.getElementById('qrcode').appendChild(canvas)
+      showQrcode.value = true
+    }
+
+    const closeWindow = () => {
+      WeixinJSBridge.call('closeWindow');
+    }
+
     return {
       logo,
       cards,
+      qrMargin,
       showAddCard,
       addCardText,
+      showQrcode,
+      currentPtnt,
       showCreatedCardMethod,
+      closeWindow,
       confirmFreeExam,
+      drawPatientIdQrcode,
     }
   },
 }

src/views/mine/patient-id-cards/PatientCardInfo.vue

@@ -29,18 +29,19 @@
 
 <script>
 import store from '../../../store'
-import { computed, onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { Dialog, Toast } from 'vant'
+import {computed, onMounted, ref} from 'vue'
+import {useRouter} from 'vue-router'
+import {Dialog, Toast} from 'vant'
 import {
-  setDefaultCard,
   relieveBindCard,
   relieveBindCardButCanceled,
+  setDefaultCard,
   updateBindInfo,
 } from '../../../api/patient-id-cards'
-import { getLocalOpenId, checkPatientId } from '../../../utils/check-patient-id'
-import { isValidIdcard, isValidPhone } from '../../../utils/validate'
-import { qrcanvas } from 'qrcanvas'
+import {checkPatientId, getLocalOpenId} from '../../../utils/check-patient-id'
+import {isValidIdcard, isValidPhone} from '../../../utils/validate'
+import {qrcanvas} from 'qrcanvas'
+
 export default {
   name: 'PatientCardInfo',
   setup() {
@@ -117,8 +118,7 @@ export default {
         message: '是否确定解除绑定？',
       })
         .then(() => {
-          const openId = getLocalOpenId()
-          card.value.openId = openId
+          card.value.openId = getLocalOpenId()
           relieveBindCard(card.value).then((res) => {
             Toast.success('解除绑定成功！')
             store.commit('SET_PATIENTCARDS', res)