个人中心添加卡号条形码

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

@@ -1,9 +1,10 @@
 <template>
   <window-size>
-    <div style="height: 200px; width: 100%">
-      <div style="height: 12px"></div>
+    <div style="margin-top: 12px">
       <div id="qrcode" :style="qrMargin"></div>
-      <div style="width: 100%; text-align: center; font-size: 14px; color: gray">就诊时出示此二维码</div>
+    </div>
+    <div class="barcode-wrapper">
+      <svg id="barcode"></svg>
     </div>
     <div style="height: 10px"></div>
     <van-cell title="姓名" icon="user-o" :value="card.name" />
@@ -41,6 +42,7 @@ import {
 import {checkPatientId, getLocalOpenId} from '../../../utils/check-patient-id'
 import {isValidIdcard, isValidPhone} from '../../../utils/validate'
 import {qrcanvas} from 'qrcanvas'
+import JsBarcode from "jsbarcode";
 
 export default {
   name: 'PatientCardInfo',
@@ -129,12 +131,29 @@ export default {
           relieveBindCardButCanceled(card.value)
         })
     }
-    onMounted(() => {
+
+    const drawQrcode = (patNo) => {
       const canvas = qrcanvas({
-        data: paramId,
+        data: patNo,
         size: 164,
       })
       document.getElementById('qrcode').appendChild(canvas)
+    }
+
+    const drawBarcode = (patNo) => {
+      JsBarcode('#barcode', '317452-0', {
+        lineColor: 'rgb(0, 80, 100)',
+        width: 2, //线宽
+        height: 50, //条码高度
+        displayValue: true,
+        fontSize: 16,
+        background: 'rgb(251, 251, 255)',
+      })
+    }
+
+    onMounted(() => {
+      drawQrcode(paramId)
+      drawBarcode(paramId)
     })
     return {
       qrMargin,
@@ -146,4 +165,12 @@ export default {
     }
   },
 }
-</script>
+</script>
+
+<style scoped>
+.barcode-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>