103 lines
3.2 KiB
Vue
103 lines
3.2 KiB
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().t;
|
|||
|
|
|
|||
|
|
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) {
|
|||
|
|
return null
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const QRUrl=ref('')
|
|||
|
|
const show=ref(false)
|
|||
|
|
const openQrCode=async ()=>{
|
|||
|
|
|
|||
|
|
const base64=await getQRBase64()
|
|||
|
|
QRUrl.value=base64
|
|||
|
|
show.value=true
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
* 将数字格式化为"250XX"格式，其中XX是两位数
|
|||
|
|
* @param {number} num - 要格式化的数字
|
|||
|
|
* @return {string} - 格式化后的字符串
|
|||
|
|
*/
|
|||
|
|
function formatNumber(num) {
|
|||
|
|
// 确保输入是有效数字
|
|||
|
|
if (typeof num !== 'number' && isNaN(Number(num))) {
|
|||
|
|
throw new Error('输入必须是有效数字');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 转换为数字类型(以防输入是字符串数字)
|
|||
|
|
const number = Number(num);
|
|||
|
|
|
|||
|
|
// 数字部分格式化为两位数，不足补0
|
|||
|
|
const formattedNum = number.toString().padStart(2, '0');
|
|||
|
|
|
|||
|
|
// 添加前缀"250"并返回结果
|
|||
|
|
return `250${formattedNum}`;
|
|||
|
|
}
|
|||
|
|
</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') }}{{ formatNumber(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>
|