From 004bf0e03a33146ada4ebbe0372671d9b2fedf03 Mon Sep 17 00:00:00 2001
From: dragon <3013557874@qq.com>
Date: Wed, 6 Nov 2024 16:54:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=88=BF=E9=97=B4=E8=83=8C?=
 =?UTF-8?q?=E6=99=AFsvga=E4=BB=A3=E7=A0=81=E5=85=88=E5=90=8E=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/roomBackground/roomBackground.vue | 55 +++++++++++++++------
 1 file changed, 41 insertions(+), 14 deletions(-)

diff --git a/src/views/roomBackground/roomBackground.vue b/src/views/roomBackground/roomBackground.vue
index 24d124e..5536f94 100644
--- a/src/views/roomBackground/roomBackground.vue
+++ b/src/views/roomBackground/roomBackground.vue
@@ -295,12 +295,19 @@
           :before-upload="beforeAvatarUpload"
           :on-error="handleAvatarError"
         >
-          <img
-            v-if="dialogObj.imageUrl2"
+          <!-- 这里是原来的图片预览 -->
+          <el-image
+            v-if="!dialogObj.imageUrl2.toLowerCase().endsWith('.svga')"
+            style="width: 100px; height: 100px"
             :src="dialogObj.imageUrl2"
-            class="avatar"
+            :zoom-rate="1.1"
+            fit="cover"
+            preview-teleported="true"
+            hide-on-click-modal="true"
           />
-          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+          <div v-else id="guide2" class="game-guide">
+            {{ guideFn2(dialogObj.imageUrl2) }}
+          </div>
         </el-upload>
       </div>
       <!-- <div class="dialogBox">
@@ -343,6 +350,7 @@ import {
 import { dateFormat } from "@/utils/system-helper";
 // @ts-ignore
 import { ElMessage, ElTable } from "element-plus";
+import { ref, onMounted, nextTick } from "vue";
 import SVGA from "svgaplayerweb";
 export default {
   name: "roomBackground",
@@ -405,16 +413,34 @@ export default {
   },
   methods: {
     guideFn(id, url) {
-      if (url.toLowerCase().endsWith(".svga")) {
-        // 获取id的dom元素
-        let player = new SVGA.Player(`#guide${id}`);
-        let parser = new SVGA.Parser();
-        parser.load(url, (videoItem) => {
-          // 你的svga文件路径
-          player.setVideoItem(videoItem);
-          player.startAnimation(); // 开始动画
-        });
-      }
+      // 等待 DOM 渲染完成
+      this.$nextTick(() => {
+        const guideElement = document.getElementById("guide" + id);
+        if (guideElement && url.toLowerCase().endsWith(".svga")) {
+          let player = new SVGA.Player(guideElement);
+          let parser = new SVGA.Parser();
+          parser.load(url, (videoItem) => {
+            // 你的svga文件路径
+            player.setVideoItem(videoItem);
+            player.startAnimation(); // 开始动画
+          });
+        }
+      });
+    },
+    guideFn2(url) {
+      // 等待 DOM 渲染完成
+      this.$nextTick(() => {
+        const guideElement = document.getElementById("guide2");
+        if (guideElement && url.toLowerCase().endsWith(".svga")) {
+          let player = new SVGA.Player(guideElement);
+          let parser = new SVGA.Parser();
+          parser.load(url, (videoItem) => {
+            // 你的 svga 文件路径
+            player.setVideoItem(videoItem);
+            player.startAnimation(); // 开始动画
+          });
+        }
+      });
     },
     // 查询接口
     getData() {
@@ -570,6 +596,7 @@ export default {
       this.getData();
     },
   },
+  mounted() {},
 };
 </script>
 <style lang="less" scoped>