|
|
@@ -1,5 +1,28 @@
|
|
|
<template>
|
|
|
<window-size :showBackNav="false" :offset="0">
|
|
|
+ <div class="qrcode-card" @click="routeToCard">
|
|
|
+ <div class="qr-text-area">
|
|
|
+ <div>
|
|
|
+ <span>
|
|
|
+ {{ defaultCard.name }}
|
|
|
+ </span>
|
|
|
+ <button @click.stop="showCardPicker = true">切换</button>
|
|
|
+ </div>
|
|
|
+ <div>ID:{{ defaultCard.patientId }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="qr-code-area">
|
|
|
+ <div id="qrcode"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-popup v-model:show="showCardPicker" round position="bottom">
|
|
|
+ <van-picker
|
|
|
+ title="选择就诊人"
|
|
|
+ :columns="cards"
|
|
|
+ :columns-field-names="customFieldName"
|
|
|
+ @cancel="showCardPicker = false"
|
|
|
+ @confirm="onConfirm"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
<van-cell-group title="我的">
|
|
|
<van-cell icon="friends" title="我的就诊人" is-link to="/myPatientIdCards"></van-cell>
|
|
|
<van-cell icon="star" title="我的收藏" is-link to="/myCollection"></van-cell>
|
|
|
@@ -28,8 +51,10 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { computed } from 'vue'
|
|
|
+import { computed, onMounted, ref, watchEffect } from 'vue'
|
|
|
import store from '../../store'
|
|
|
+import { qrcanvas } from 'qrcanvas'
|
|
|
+import router from '../../router'
|
|
|
export default {
|
|
|
setup() {
|
|
|
const cards = computed(() => {
|
|
|
@@ -38,9 +63,93 @@ export default {
|
|
|
const filterPath = (singleCardPath, multipleCardsPath) => {
|
|
|
return cards.value.length === 1 ? singleCardPath + cards.value[0].patientId : multipleCardsPath
|
|
|
}
|
|
|
+ const defaultCard = ref({})
|
|
|
+
|
|
|
+ watchEffect(() => {
|
|
|
+ if (defaultCard.value.patientId) {
|
|
|
+ document.getElementById('qrcode').innerHTML = ''
|
|
|
+ const canvas = qrcanvas({
|
|
|
+ data: defaultCard.value.patientId,
|
|
|
+ size: 64,
|
|
|
+ })
|
|
|
+ document.getElementById('qrcode').appendChild(canvas)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ const routeToCard = () => {
|
|
|
+ router.push('/patientCardInfo/' + defaultCard.value.patientId)
|
|
|
+ }
|
|
|
+ const showCardPicker = ref(false)
|
|
|
+ const customFieldName = {
|
|
|
+ text: 'name',
|
|
|
+ }
|
|
|
+ const onConfirm = (val) => {
|
|
|
+ defaultCard.value = val
|
|
|
+ showCardPicker.value = false
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ for (let i = 0; i < cards.value.length; i++) {
|
|
|
+ const card = cards.value[i]
|
|
|
+ if (card.isDefault === 1) {
|
|
|
+ defaultCard.value = card
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
return {
|
|
|
+ cards,
|
|
|
filterPath,
|
|
|
+ defaultCard,
|
|
|
+ routeToCard,
|
|
|
+ showCardPicker,
|
|
|
+ onConfirm,
|
|
|
+ customFieldName,
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
-</script>
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.qrcode-card {
|
|
|
+ margin-top: 15px;
|
|
|
+ width: 80%;
|
|
|
+ margin-left: 10%;
|
|
|
+ height: 100px;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ background: url('../../assets/id-qrcode-bg.png');
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.qr-text-area {
|
|
|
+ width: 60%;
|
|
|
+ margin-top: 20px;
|
|
|
+ padding-left: 24px;
|
|
|
+}
|
|
|
+.qr-text-area > div > span {
|
|
|
+ font-size: 26px !important;
|
|
|
+}
|
|
|
+.qr-text-area > div > button {
|
|
|
+ width: 80px;
|
|
|
+ height: 26px;
|
|
|
+ outline: none;
|
|
|
+ margin-left: 16px;
|
|
|
+ border-radius: 16px;
|
|
|
+ border: 1px solid green;
|
|
|
+ color: green;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.qr-code-area {
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ margin-top: 10px;
|
|
|
+ border: 1px solid green;
|
|
|
+ border-top-left-radius: 12px;
|
|
|
+ border-bottom-right-radius: 12px;
|
|
|
+ box-shadow: 0 1px 12px 0 rgba(163, 247, 163);
|
|
|
+}
|
|
|
+.qr-code-area > div {
|
|
|
+ margin: 8px 0 0 8px;
|
|
|
+}
|
|
|
+</style>
|
