Преглед изворни кода

添加个人中心二维码显示。

lighter пре 4 година
родитељ
комит
3e01a809b8

+ 29 - 0
package-lock.json

@@ -9,6 +9,7 @@
       "dependencies": {
         "axios": "^0.21.1",
         "js-cookie": "^2.2.1",
+        "qrcanvas": "^3.1.2",
         "vant": "^3.0.5",
         "vue": "^3.0.5",
         "vue-router": "^4.0.2",
@@ -562,6 +563,20 @@
       "integrity": "sha1-RD9qIM7WSBor2k+oUypuVdeJoss=",
       "dev": true
     },
+    "node_modules/qrcanvas": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npm.taobao.org/qrcanvas/download/qrcanvas-3.1.2.tgz",
+      "integrity": "sha1-gaJekbLCfprOkdqVWRy/sQDWhwI=",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "qrcode-generator": "^1.4.4"
+      }
+    },
+    "node_modules/qrcode-generator": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npm.taobao.org/qrcode-generator/download/qrcode-generator-1.4.4.tgz",
+      "integrity": "sha1-Y/dxIkhUdZMpqZBIgGpT7SeHQOc="
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.13.7",
       "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.13.7.tgz?cache=0&sync_timestamp=1595457225731&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.13.7.tgz",
@@ -1141,6 +1156,20 @@
       "integrity": "sha1-RD9qIM7WSBor2k+oUypuVdeJoss=",
       "dev": true
     },
+    "qrcanvas": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npm.taobao.org/qrcanvas/download/qrcanvas-3.1.2.tgz",
+      "integrity": "sha1-gaJekbLCfprOkdqVWRy/sQDWhwI=",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "qrcode-generator": "^1.4.4"
+      }
+    },
+    "qrcode-generator": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npm.taobao.org/qrcode-generator/download/qrcode-generator-1.4.4.tgz",
+      "integrity": "sha1-Y/dxIkhUdZMpqZBIgGpT7SeHQOc="
+    },
     "regenerator-runtime": {
       "version": "0.13.7",
       "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.13.7.tgz?cache=0&sync_timestamp=1595457225731&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.13.7.tgz",

+ 1 - 0
package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "axios": "^0.21.1",
     "js-cookie": "^2.2.1",
+    "qrcanvas": "^3.1.2",
     "vant": "^3.0.5",
     "vue": "^3.0.5",
     "vue-router": "^4.0.2",

BIN
src/assets/id-qrcode-bg.png


+ 29 - 0
src/index.css

@@ -1,3 +1,32 @@
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all 0.5s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+
+
 * {
 	margin: 0;
 	padding: 0;

+ 111 - 2
src/views/mine/MineHome.vue

@@ -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>

+ 15 - 1
src/views/mine/patient-id-cards/PatientCardInfo.vue

@@ -1,5 +1,11 @@
 <template>
   <window-size>
+    <div style="height: 200px; text-align: center">
+      <div style="height: 12px"></div>
+      <div id="qrcode"></div>
+      <div style="font-size: 14px; color: gray">就诊时出示此二维码</div>
+    </div>
+    <div style="height: 10px"></div>
     <van-cell title="姓名" icon="user-o" :value="card.name" />
     <van-cell title="就诊卡号" icon="credit-pay" :value="card.patientId" />
     <van-cell title="手机号" icon="phone-o" :value="card.phone" />
@@ -23,7 +29,7 @@
 
 <script>
 import store from '../../../store'
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { Dialog, Toast } from 'vant'
 import {
@@ -34,6 +40,7 @@ import {
 } from '../../../api/patient-id-cards'
 import { getLocalOpenId, checkPatientId } from '../../../utils/check-patient-id'
 import { isValidIdcard, isValidPhone } from '../../../utils/validate'
+import { qrcanvas } from 'qrcanvas'
 export default {
   name: 'PatientCardInfo',
   setup() {
@@ -117,6 +124,13 @@ export default {
           relieveBindCardButCanceled(card.value)
         })
     }
+    onMounted(() => {
+      const canvas = qrcanvas({
+        data: paramId,
+        size: 164,
+      })
+      document.getElementById('qrcode').appendChild(canvas)
+    })
     return {
       card,
       setThisDefaultCard,