liveh5-nuxt/app/pages/collectCode/mine/components/codeCard/index.vue

<script setup>

import XImage from "@/components/x-image/index.vue";
import {useRuntimeConfig} from "#app";
import QRCode from 'qrcode'
import { showImagePreview } from 'vant';
import { useI18n } from 'vue-i18n';

const t = useI18n();

const statusLabel=[
  {label: t('collectCode.qrcode.status.paid'), value:2, color:'#18A058'},  
  {label: t('collectCode.qrcode.status.unpaid'), value:1, color:'#CF3050'},  
  {label: t('collectCode.qrcode.status.partialPaid'), value:4, color:'#F09F1F'}
]
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const itemLabel=(data)=>{
  return statusLabel.find(x=>x.value===data.payStatus)
}
const getQRBase64 = async () => {
  const url=`${window.location.origin}/collectCode/signature/personal-Info?number=2&qrUid=${props.data.qrUid}`
  try {
    return await QRCode.toDataURL(url, {
      width: 200,
      margin: 4,
      errorCorrectionLevel: 'H'
    })
  } catch (err) {
    console.error('生成二维码失败:', err)
    return null
  }
}
const QRUrl=ref('')
const show=ref(false)
const openQrCode=async ()=>{

  const base64=await getQRBase64()
  QRUrl.value=base64
  show.value=true
}

</script>

<template>
  <div class="flex flex-col h-120px bg-#F7F7F7 rounded-4px px-13px">
    <div class="flex h-40px border-b border-b-#F0F0F0 items-center justify-between px-8px">
      <div class="text-14px text-#000">¥ {{data.paidPrice}}/{{data.price}}</div>
      <div :class="`text-12px text-${itemLabel(data).color}`">{{itemLabel(data).label}}</div>
    </div>
    <div class="flex flex-grow-1 px-8px py-11px">
      <div class="mr-8px">
        <XImage class="w-57px h-56px rounded-4px" :src="data.hdPic"></XImage>
      </div>
      <div class="text-12px text-#1E1E1E">
        <div>{{ $t('collectCode.qrcode.card.lotNo') }}{{ data.lotNo }}</div>
        <div>{{ $t('collectCode.qrcode.card.creator') }}{{ data.userName }}</div>
        <div>{{ $t('collectCode.qrcode.card.createTime') }}{{data.createdAt}}</div>
      </div>
      <div class="flex flex-col justify-end ml-auto ">
        <div class="flex w-55px h-26px bg-#2B53AC rounded-4px justify-center items-center">
          <div @click="openQrCode(data)" class="text-12px text-#fff line-height-none mt-0.5px mr-5px">{{ $t('collectCode.qrcode.card.view') }}</div>
          <div>
            <img class="w-12px h-12px" src="@/static/images/icon-design-42@3x.png" alt="">
          </div>
        </div>
      </div>
      <van-dialog teleport="body" v-model:show="show">
       <div class="flex justify-center py-20px">
         <img :src="QRUrl" />
       </div>
      </van-dialog>
    </div>
  </div>
</template>

<style scoped>

</style>