在门诊缴费明细页面添加门诊id号和条形码

package-lock.json

@@ -1,14 +1,16 @@
 {
   "name": "wxservice-web",
-  "version": "0.0.0",
+  "version": "1.0.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "0.0.0",
+      "name": "wxservice-web",
+      "version": "1.0.3",
       "dependencies": {
         "axios": "^0.21.1",
         "js-cookie": "^2.2.1",
+        "jsbarcode": "^3.11.4",
         "qrcanvas": "^3.1.2",
         "vant": "^3.0.5",
         "vue": "^3.0.5",
@@ -362,6 +364,66 @@
       "resolved": "https://registry.npm.taobao.org/js-cookie/download/js-cookie-2.2.1.tgz?cache=0&sync_timestamp=1599571425022&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-cookie%2Fdownload%2Fjs-cookie-2.2.1.tgz",
       "integrity": "sha1-aeEG3F1YBolFYpAqpbrsN0Tpsrg="
     },
+    "node_modules/jsbarcode": {
+      "version": "3.11.5",
+      "resolved": "https://registry.npmmirror.com/jsbarcode/-/jsbarcode-3.11.5.tgz",
+      "integrity": "sha512-zv3KsH51zD00I/LrFzFSM6dst7rDn0vIMzaiZFL7qusTjPZiPtxg3zxetp0RR7obmjTw4f6NyGgbdkBCgZUIrA==",
+      "bin": {
+        "auto.js": "bin/barcodes/CODE128/auto.js",
+        "Barcode.js": "bin/barcodes/Barcode.js",
+        "barcodes": "bin/barcodes",
+        "canvas.js": "bin/renderers/canvas.js",
+        "checksums.js": "bin/barcodes/MSI/checksums.js",
+        "codabar": "bin/barcodes/codabar",
+        "CODE128": "bin/barcodes/CODE128",
+        "CODE128_AUTO.js": "bin/barcodes/CODE128/CODE128_AUTO.js",
+        "CODE128.js": "bin/barcodes/CODE128/CODE128.js",
+        "CODE128A.js": "bin/barcodes/CODE128/CODE128A.js",
+        "CODE128B.js": "bin/barcodes/CODE128/CODE128B.js",
+        "CODE128C.js": "bin/barcodes/CODE128/CODE128C.js",
+        "CODE39": "bin/barcodes/CODE39",
+        "constants.js": "bin/barcodes/ITF/constants.js",
+        "defaults.js": "bin/options/defaults.js",
+        "EAN_UPC": "bin/barcodes/EAN_UPC",
+        "EAN.js": "bin/barcodes/EAN_UPC/EAN.js",
+        "EAN13.js": "bin/barcodes/EAN_UPC/EAN13.js",
+        "EAN2.js": "bin/barcodes/EAN_UPC/EAN2.js",
+        "EAN5.js": "bin/barcodes/EAN_UPC/EAN5.js",
+        "EAN8.js": "bin/barcodes/EAN_UPC/EAN8.js",
+        "encoder.js": "bin/barcodes/EAN_UPC/encoder.js",
+        "ErrorHandler.js": "bin/exceptions/ErrorHandler.js",
+        "exceptions": "bin/exceptions",
+        "exceptions.js": "bin/exceptions/exceptions.js",
+        "fixOptions.js": "bin/help/fixOptions.js",
+        "GenericBarcode": "bin/barcodes/GenericBarcode",
+        "getOptionsFromElement.js": "bin/help/getOptionsFromElement.js",
+        "getRenderProperties.js": "bin/help/getRenderProperties.js",
+        "help": "bin/help",
+        "index.js": "bin/renderers/index.js",
+        "index.tmp.js": "bin/barcodes/index.tmp.js",
+        "ITF": "bin/barcodes/ITF",
+        "ITF.js": "bin/barcodes/ITF/ITF.js",
+        "ITF14.js": "bin/barcodes/ITF/ITF14.js",
+        "JsBarcode.js": "bin/JsBarcode.js",
+        "linearizeEncodings.js": "bin/help/linearizeEncodings.js",
+        "merge.js": "bin/help/merge.js",
+        "MSI": "bin/barcodes/MSI",
+        "MSI.js": "bin/barcodes/MSI/MSI.js",
+        "MSI10.js": "bin/barcodes/MSI/MSI10.js",
+        "MSI1010.js": "bin/barcodes/MSI/MSI1010.js",
+        "MSI11.js": "bin/barcodes/MSI/MSI11.js",
+        "MSI1110.js": "bin/barcodes/MSI/MSI1110.js",
+        "object.js": "bin/renderers/object.js",
+        "options": "bin/options",
+        "optionsFromStrings.js": "bin/help/optionsFromStrings.js",
+        "pharmacode": "bin/barcodes/pharmacode",
+        "renderers": "bin/renderers",
+        "shared.js": "bin/renderers/shared.js",
+        "svg.js": "bin/renderers/svg.js",
+        "UPC.js": "bin/barcodes/EAN_UPC/UPC.js",
+        "UPCE.js": "bin/barcodes/EAN_UPC/UPCE.js"
+      }
+    },
     "node_modules/json5": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/json5/download/json5-1.0.1.tgz",
@@ -999,6 +1061,11 @@
       "resolved": "https://registry.npm.taobao.org/js-cookie/download/js-cookie-2.2.1.tgz?cache=0&sync_timestamp=1599571425022&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-cookie%2Fdownload%2Fjs-cookie-2.2.1.tgz",
       "integrity": "sha1-aeEG3F1YBolFYpAqpbrsN0Tpsrg="
     },
+    "jsbarcode": {
+      "version": "3.11.5",
+      "resolved": "https://registry.npmmirror.com/jsbarcode/-/jsbarcode-3.11.5.tgz",
+      "integrity": "sha512-zv3KsH51zD00I/LrFzFSM6dst7rDn0vIMzaiZFL7qusTjPZiPtxg3zxetp0RR7obmjTw4f6NyGgbdkBCgZUIrA=="
+    },
     "json5": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/json5/download/json5-1.0.1.tgz",

package.json

@@ -10,6 +10,7 @@
     "axios": "^0.21.1",
     "js-cookie": "^2.2.1",
     "qrcanvas": "^3.1.2",
+    "jsbarcode": "^3.11.4",
     "vant": "^3.0.5",
     "vue": "^3.0.5",
     "vue-router": "^4.0.2",

src/views/mine/mz-pay-record/MzFeePaymentDetail.vue

@@ -1,5 +1,8 @@
 <template>
   <window-size>
+    <div class="barcode-wrapper">
+      <svg id="barcode"></svg>
+    </div>
     <van-cell title="开方科室" :value="params.deptName"></van-cell>
     <van-cell title="开方医生" :value="params.doctorName"></van-cell>
     <van-cell title="开方时间" :value="params.datetime"></van-cell>
@@ -9,7 +12,6 @@
       </template>
     </van-cell>
     <div style="height: 5px"></div>
-
     <div style="background: white; text-align: center; font-size: 12px; padding: 0 10px">
       <div style="height: 5px"></div>
       <van-row>
@@ -36,13 +38,28 @@
 import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { getMzPaidDetail } from '../../../api/pay-mz-fee'
+import JsBarcode from 'jsbarcode'
 export default {
   setup() {
     const router = useRouter()
     const params = router.currentRoute.value.params
     const list = ref([])
+
+    const drawBarcode = (patNo) => {
+      JsBarcode('#barcode', patNo, {
+        lineColor: 'rgb(0, 80, 100)',
+        width: 2, //线宽
+        height: 50, //条码高度
+        displayValue: true,
+        fontSize: 16,
+        background: 'rgb(251, 251, 255)',
+      })
+    }
+
     onMounted(() => {
-      getMzPaidDetail(params.hisOrdNum).then((res) => {
+      const hisOrdNum = params.hisOrdNum
+      drawBarcode(hisOrdNum.split('_')[0])
+      getMzPaidDetail(hisOrdNum).then((res) => {
         list.value = res
       })
     })
@@ -52,4 +69,12 @@ export default {
     }
   },
 }
-</script>
+</script>
+
+<style scoped>
+.barcode-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>