From 99a1c89643ea8037e5decedde3ee3664f1d97f7e Mon Sep 17 00:00:00 2001
From: dragon <3013557874@qq.com>
Date: Wed, 6 Nov 2024 15:06:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dappui=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E5=BC=82=E5=B8=B8=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                           |  6 +++
 package.json                                |  1 +
 src/views/firstpage/towPageBannerView.vue   |  2 +-
 src/views/roomBackground/appUiSet.vue       |  8 ++++
 src/views/roomBackground/roomBackground.vue | 42 +++++++++++++++++----
 5 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1f8a20f..6f49f33 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "popper.js": "^1.16.1",
         "sass": "^1.67.0",
         "sass-loader": "^13.3.2",
+        "svgaplayerweb": "^2.3.2",
         "unplugin-element-plus": "^0.8.0",
         "vue-clipboard2": "^0.3.3",
         "vue-router": "^4.0.3",
@@ -11990,6 +11991,11 @@
       "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
       "dev": true
     },
+    "node_modules/svgaplayerweb": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmmirror.com/svgaplayerweb/-/svgaplayerweb-2.3.2.tgz",
+      "integrity": "sha512-QuTvNIgy3W6Mi4h74SczEHUtAwb8m3ax7Ai7xRLUuN6hjJh49RGtWOWq1IuF2I7ECcl0HAYn8FcTn99UDz9UiQ=="
+    },
     "node_modules/svgo": {
       "version": "2.8.0",
       "resolved": "https://registry.npmmirror.com/svgo/-/svgo-2.8.0.tgz",
diff --git a/package.json b/package.json
index 43ee8c3..5e45c69 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "popper.js": "^1.16.1",
     "sass": "^1.67.0",
     "sass-loader": "^13.3.2",
+    "svgaplayerweb": "^2.3.2",
     "unplugin-element-plus": "^0.8.0",
     "vue-clipboard2": "^0.3.3",
     "vue-router": "^4.0.3",
diff --git a/src/views/firstpage/towPageBannerView.vue b/src/views/firstpage/towPageBannerView.vue
index d6fbb66..753880a 100644
--- a/src/views/firstpage/towPageBannerView.vue
+++ b/src/views/firstpage/towPageBannerView.vue
@@ -861,7 +861,7 @@ export default {
               var endTime = ($('#endTime').val()) ? ($('#endTime').val() + ' 23:59:59') : null;
               var param = {
                 pageSize: params.pageSize,
-                pageNumber: params.pageNumber,
+                pageNo: params.pageNumber,
                 // beginTime: beginTime,
                 // endTime: endTime,
                 bannerStatus: parseInt($('#status').val()),
diff --git a/src/views/roomBackground/appUiSet.vue b/src/views/roomBackground/appUiSet.vue
index fe76def..46aabfa 100644
--- a/src/views/roomBackground/appUiSet.vue
+++ b/src/views/roomBackground/appUiSet.vue
@@ -412,6 +412,14 @@ export default {
         type: "success",
       });
     },
+    handleAvatarSuccess6(res, file) {
+      this.inquire.imageUrl6 = file.response.data;
+      ElMessage({
+        showClose: true,
+        message: "上传成功！",
+        type: "success",
+      });
+    },
     handleAvatarSuccess7(res, file) {
       this.inquire.imageUrl7 = file.response.data;
       ElMessage({
diff --git a/src/views/roomBackground/roomBackground.vue b/src/views/roomBackground/roomBackground.vue
index 0a6812f..24d124e 100644
--- a/src/views/roomBackground/roomBackground.vue
+++ b/src/views/roomBackground/roomBackground.vue
@@ -48,9 +48,9 @@
       class="primary"
       type="primary"
       @click="
-        partitionId = '';
-        id = '';
-        status = '';
+        inquire.partitionId = '';
+        inquire.id = '';
+        inquire.status = '';
         getData();
       "
       >重置按钮</el-button
@@ -106,7 +106,7 @@
       <el-table-column prop="url" align="center" label="图片">
         <template v-slot="scope">
           <el-image
-            v-if="scope.row.url"
+            v-if="!scope.row.url.toLowerCase().endsWith('.svga')"
             style="width: 100px; height: 100px"
             :src="scope.row.url"
             :zoom-rate="1.1"
@@ -115,7 +115,9 @@
             preview-teleported="true"
             hide-on-click-modal="true"
           />
-          <div v-else>/</div>
+          <div v-else :id="'guide' + scope.row.id" class="game-guide">
+            {{ guideFn(scope.row.id, scope.row.url) }}
+          </div>
         </template>
       </el-table-column>
       <el-table-column prop="createTime" align="center" label="创建时间" />
@@ -341,8 +343,7 @@ import {
 import { dateFormat } from "@/utils/system-helper";
 // @ts-ignore
 import { ElMessage, ElTable } from "element-plus";
-import { ref } from "vue";
-import { ElMessageBox } from "element-plus"; // 正确引入 ElM
+import SVGA from "svgaplayerweb";
 export default {
   name: "roomBackground",
   data() {
@@ -391,7 +392,7 @@ export default {
         day: "",
         sort: "",
         radio2: "1",
-        id:null,
+        id: null,
       },
     };
   },
@@ -403,6 +404,18 @@ 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(); // 开始动画
+        });
+      }
+    },
     // 查询接口
     getData() {
       this.isLoading = true;
@@ -620,4 +633,17 @@ export default {
     height: 150px;
   }
 }
+.game-guide {
+  width: 100px;
+  height: 100px;
+  overflow: hidden;
+  // left: 50%;
+  // top: 50%;
+  // transform: translate(-50%,-50%);
+  canvas {
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}
 </style>