抖店下载图片

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>