|
|
@@ -262,7 +262,12 @@ const fetchQrDetails = async () => {
|
|
|
if (data.isVisible === false) {
|
|
|
infoStatus.state = 'notVisible'
|
|
|
infoStatus.message = 'QR code information is not visible'
|
|
|
- profile.value = null
|
|
|
+ // 如果是 person、pet 或 goods 类型,保留 info 对象(只包含 photoUrl)
|
|
|
+ if ((data.qrType === 'person' || data.qrType === 'pet' || data.qrType === 'goods') && data.info) {
|
|
|
+ profile.value = { photoUrl: data.info.photoUrl || '' }
|
|
|
+ } else {
|
|
|
+ profile.value = null
|
|
|
+ }
|
|
|
resetForm()
|
|
|
setDocumentTitle()
|
|
|
return
|
|
|
@@ -946,6 +951,24 @@ onMounted(() => {
|
|
|
<p class="mt-2 text-xs text-red-200">Please double-check the QR code or reach out for assistance.</p>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- 当二维码不可见时,如果是 person、pet 或 goods 类型且有照片,显示照片 -->
|
|
|
+ <div v-if="infoStatus.state === 'notVisible' && (isPerson || isPet || isGoods) && profile?.photoUrl"
|
|
|
+ class="rounded-3xl border border-white/10 bg-white/5 backdrop-blur shadow-xl shadow-cyan-500/10">
|
|
|
+ <div class="space-y-6 p-6">
|
|
|
+ <div class="flex flex-col items-center gap-4">
|
|
|
+ <div class="relative w-full max-w-md overflow-hidden rounded-2xl bg-white/10 ring-2 ring-white/20"
|
|
|
+ style="aspect-ratio: 1/1;">
|
|
|
+ <img :src="profile.photoUrl" alt="profile"
|
|
|
+ class="h-full w-full object-cover transition-transform duration-300 hover:scale-105"
|
|
|
+ @error="(e) => e.target.style.display = 'none'" />
|
|
|
+ </div>
|
|
|
+ <p class="text-xs uppercase tracking-[0.4em] text-slate-300">
|
|
|
+ {{ qrCode }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div v-if="infoStatus.state === 'notVisible'" class="rounded-3xl border border-amber-500/40 bg-amber-500/10 p-6">
|
|
|
<div class="flex items-start gap-4">
|
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-amber-500/20 flex-shrink-0">
|
|
|
@@ -953,7 +976,7 @@ onMounted(() => {
|
|
|
</div>
|
|
|
<div class="flex-1">
|
|
|
<p class="text-lg font-semibold text-amber-100">{{ infoStatus.message }}</p>
|
|
|
- <p class="mt-2 text-sm text-amber-200">This QR code information has been set to invisible and cannot be viewed.</p>
|
|
|
+ <p class="mt-2 text-sm text-amber-200">Some information in this QR code is hidden and cannot be viewed.</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|