From c5fd42ea51e34ac0a7f36c07c4ad1ce23b667b61 Mon Sep 17 00:00:00 2001
From: Linzm <1015157648@qq.com>
Date: Sat, 7 Jun 2025 16:26:05 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=96=E5=BA=97=E4=B8=8B=E8=BD=BD=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/badge/preview.vue | 61 ++++++++++++++++++++++++++++---------
 1 file changed, 47 insertions(+), 14 deletions(-)

diff --git a/src/views/badge/preview.vue b/src/views/badge/preview.vue
index a05ef9b..18d3214 100644
--- a/src/views/badge/preview.vue
+++ b/src/views/badge/preview.vue
@@ -36,7 +36,7 @@
     </div>
     <div class="info-section">
       <div class="info-item">
-        <div class="info-title">{{ compareList.kind_name }}</div>
+        <div class="info-title">{{ style_name }}</div>
         <div class="info-content">风格</div>
       </div>
       <div class="info-item">
@@ -159,6 +159,13 @@
       </div>
     </div>
   </van-action-sheet>
+
+  <div v-if="showPreview">
+    <div class="preview-mask" @click="showPreview = false">
+      <img :src="imageUrl" alt="徽章预览" />
+      <p>长按图片 → 保存到相册</p>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
@@ -254,28 +261,29 @@ const createLog = () => {
   })
 }
 
+const showPreview = ref(false)
 function save() {
   // 下载图片到本地
   const downloadImage = (url: string) => {
-    try {
-      const link = document.createElement('a')
-      link.href = url
-      link.download = '徽章效果图.png'
-      document.body.appendChild(link)
-      link.click()
-      document.body.removeChild(link)
-    } catch (err) {
-      window.open(url, '_blank');
-    }
-    
+    const link = document.createElement('a')
+    link.href = url
+    link.download = '徽章效果图.png'
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
   }
 
   if (imageUrl.value) {
-    downloadImage(imageUrl.value)
+    try {
+      downloadImage(imageUrl.value);
+    } catch {
+      showPreview.value = true; // 自动下载失败时显示预览
+    }
   }
 }
 const compareList = ref({})
 const extend_value = ref(0)
+const style_name = ref('')
 function getCompareImage() {
   badgeApi.getCompareImage({
     pid: pid.value,
@@ -284,6 +292,7 @@ function getCompareImage() {
     console.log('getCompareImage', res)
     extend_value.value = res.extend_value
     compareList.value = res
+    style_name.value = res.list[0].kind_name
   }).catch((err) => {
     console.log('getCompareImage', err)
     showToast({
@@ -800,5 +809,29 @@ onUnmounted(() => {
 .style-item.active .style-label {
   color: #50cf54;
 }
-
+.preview-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+.preview-mask img {
+  max-width: 80%;
+  max-height: 80%;
+  border-radius: 10px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+}
+.preview-mask p {
+  margin-top: 16px;
+  color: #fff;
+  font-size: 16px;
+  text-align: center;
+} 
 </style>
\ No newline at end of file