Explorar el Código

优化二维码信息显示逻辑,当二维码不可见时,针对特定类型(person、pet、goods)保留照片信息并更新相关提示文本,提升用户体验。

wuyi hace 2 semanas
padre
commit
65754e525a
Se han modificado 1 ficheros con 25 adiciones y 2 borrados
  1. 25 2
      src/views/ScanView.vue

+ 25 - 2
src/views/ScanView.vue

@@ -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>