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

<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>
    <van-cell title="总金额">
      <template #default>
        <span style="color: orangered">￥ {{ params.totalAmt }}</span>
      </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>
        <van-col :span="10">名称</van-col>
        <van-col :span="5">用法</van-col>
        <van-col :span="4">数量</van-col>
        <van-col :span="5">金额（￥）</van-col>
      </van-row>
      <div style="height: 10px"></div>
      <div v-for="(fee, index) in list" :key="index">
        <van-row>
          <van-col :span="10">{{ fee.xmmc }}</van-col>
          <van-col :span="5">{{ fee.ypyf }}</van-col>
          <van-col :span="4">{{ fee.zsl }}</van-col>
          <van-col :span="5">{{ fee.zfy }}</van-col>
        </van-row>
        <div style="height: 10px"></div>
      </div>
    </div>
  </window-size>
</template>

<script>
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(() => {
      const hisOrdNum = params.hisOrdNum
      drawBarcode(hisOrdNum.split('_')[0])
      getMzPaidDetail(hisOrdNum).then((res) => {
        list.value = res
      })
    })
    return {
      params,
      list,
    }
  },
}
</script>

<style scoped>
.barcode-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>