个人主页资源管理用vue3写法

src/views/privilege/personalHomepageResourceManagement.vue

@@ -112,6 +112,36 @@
           }}
         </template>
       </el-table-column>
+
+      <el-table-column
+        prop=""
+        width="300"
+        max-height="100"
+        align="center"
+        label="装扮动效图片"
+      >
+        <template v-slot="scope">
+          <div v-if="scope.row.effectType == 0">无</div>
+          <!-- 视频预览 -->
+          <video
+            v-if="scope.row.effectType == 1"
+            :src="scope.row.effect"
+            controls
+            style="width: 300px; max-height: 300px; display: block"
+          ></video>
+          <!-- SVGA 预览 -->
+          <div
+            v-if="scope.row.effectType == 2"
+            :id="`svga-player${scope.row.id}`"
+            style="width: 300px; max-height: 300px; display: block"
+          >
+            {{ initSVGAList(scope.row.effect, scope.row.id) }}
+            <!-- <img style="width: 100px; height: 100px; display: block" src="/Uploads/article/original_img/1487053722.jpg" alt="">
+      <el-image src=""></el-image> -->
+          </div>
+        </template>
+      </el-table-column>
+
       <el-table-column prop="" align="center" label="状态">
         <template v-slot="scope">
           {{ scope.row.status == 1 ? "有效" : "无效" }}
@@ -299,25 +329,19 @@
             />
 
             <!-- 视频预览 -->
-            <!-- <video
+            <video
               v-else-if="isVideo"
               :src="filePreview"
               controls
               style="max-width: 300px"
-            ></video> -->
-            <div
-              v-else-if="isVideo"
-            ></div>
+            ></video>
 
             <!-- SVGA 预览 -->
-            <!-- <div
+            <div
               v-else-if="isSVGA"
               :id="`svga-player`"
               style="width: 200px; height: 200px"
-            ></div> -->
-            <div
-              v-else-if="isSVGA"
-            >SVGA</div>
+            ></div>
           </div>
         </el-upload>
       </div>
@@ -414,95 +438,101 @@ import {
 // @ts-ignore
 import { dateFormat } from "@/utils/system-helper";
 import { partitionDesc, partitionIdArr } from "@/utils/partitionDesc.js";
+import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
 // @ts-ignore
 import { ElMessage } from "element-plus";
 import SVGA from "svgaplayerweb";
 export default {
   name: "personalHomepageResourceManagement",
-  created() {
-    listPartitionInfo().then((res) => {
-      this.inquire.partitionArr = this.operationValue.partitionArr = res.data;
-      this.inquire.partitionId = this.inquire.partitionArr[0].id;
-      this.getData();
+  setup() {
+    // 响应式数据
+    const file = ref(null);
+    const filePreview = ref(null);
+    const isImage = ref(false);
+    const isVideo = ref(false);
+    const isSVGA = ref(false);
+    const loading = ref(false);
+
+    const inquire = reactive({
+      partitionId: "",
+      partitionArr: [],
+      name: "",
+      status: "",
+      options: [
+        { label: "有效", value: 1 },
+        { label: "无效", value: 2 },
+        { label: "全部", value: 3 },
+      ],
     });
-  },
-  data() {
-    return {
-      file: null, // 当前上传的文件对象
-      filePreview: null, // 文件预览 URL
-      isImage: false,
-      isVideo: false,
-      isSVGA: false,
-      loading: false,
-      //查询所需条件对象
-      inquire: {
-        partitionId: "",
-        partitionArr: [],
-        name: "",
-        status: "",
-        options: [
-          { label: "有效", value: 1 },
-          { label: "无效", value: 2 },
-          { label: "全部", value: 3 },
-        ],
-      },
-      operationDialog: false,
-      operationType: null,
-      operationDialogTitle: "新增%编辑",
-      operationValueId: null,
-      operationValue: {
-        partitionVal: [],
-        nameZh: "",
-        nameEn: "",
-        nameAr: "",
-        nameTr: "",
-        price: "",
-        day: "",
-        imageUrl: "",
-        status: "",
-        options: [
-          { label: "有效", value: 1 },
-          { label: "无效", value: 2 },
-        ],
-        effectType: "",
-        effectTypeArr: [
-          { label: "无", value: 0 },
-          { label: "MP4", value: 1 },
-          { label: "SVGA", value: 2 },
-        ],
-      },
-      sendDialog: false,
-      sendObj: {
-        erbanNos: null,
-        days: null,
-        personalBackgroundId: null,
-        remark: null,
-      },
-      // 表格
-      tableData: [],
-      // 分页
-      total: 10, //总页数
-      currentPage: 1, //页码
-      pageSize: 10, //条数
-    };
-  },
-  methods: {
-    partitionDesc,
-    partitionIdArr,
+
+    const operationDialog = ref(false);
+    const operationType = ref(null);
+    const operationDialogTitle = ref("新增%编辑");
+    const operationValueId = ref(null);
+
+    const operationValue = reactive({
+      partitionVal: [],
+      nameZh: "",
+      nameEn: "",
+      nameAr: "",
+      nameTr: "",
+      price: "",
+      day: "",
+      imageUrl: "",
+      status: "",
+      options: [
+        { label: "有效", value: 1 },
+        { label: "无效", value: 2 },
+      ],
+      effectType: "",
+      effectTypeArr: [
+        { label: "无", value: 0 },
+        { label: "MP4", value: 1 },
+        { label: "SVGA", value: 2 },
+      ],
+    });
+
+    const sendDialog = ref(false);
+    const sendObj = reactive({
+      erbanNos: null,
+      days: null,
+      personalBackgroundId: null,
+      remark: null,
+    });
+
+    const tableData = ref([]);
+    const total = ref(10); // 总页数
+    const currentPage = ref(1); // 页码
+    const pageSize = ref(10); // 条数
+
+    // 生命周期钩子
+    onMounted(() => {
+      console.log("组件已挂载");
+      listPartitionInfo().then((res) => {
+        inquire.partitionArr = operationValue.partitionArr = res.data;
+        inquire.partitionId = inquire.partitionArr[0].id;
+        getData();
+      });
+    });
+
+    onUnmounted(() => {
+      console.log("组件已卸载");
+    });
+
     // 查询接口
-    getData() {
-      this.loading = true;
+    const getData = () => {
+      loading.value = true;
       pesonalBackgroundListByPage({
-        partitionId: this.inquire.partitionId,
-        name: this.inquire.name,
-        status: this.inquire.status,
-        page: this.currentPage,
-        pageSize: this.pageSize,
+        partitionId: inquire.partitionId,
+        name: inquire.name,
+        status: inquire.status,
+        page: currentPage.value,
+        pageSize: pageSize.value,
       }).then((res) => {
         if (res.code == 200) {
-          this.loading = false;
-          this.total = res.data.total;
-          this.tableData = res.data.list;
+          loading.value = false;
+          total.value = res.data.total;
+          tableData.value = res.data.list;
         } else {
           ElMessage({
             showClose: true,
@@ -511,33 +541,35 @@ export default {
           });
         }
       });
-    },
-    operation(id) {
-      var obj = {};
-      obj.partitionFlag = this.operationValue.partitionVal.reduce(
-        (accumulator, currentValue) => accumulator + currentValue,
-        0
-      );
-      obj.name = JSON.stringify({
-        ar: this.operationValue.nameAr,
-        zh: this.operationValue.nameZh,
-        en: this.operationValue.nameEn,
-        tr: this.operationValue.nameTr,
-      });
-      obj.pic = this.operationValue.imageUrl;
-      obj.effectType = this.operationValue.effectType;
-      obj.effect = this.filePreview;
-      obj.status = this.operationValue.status;
-      obj.type = 1; //资料卡类型 1：普通 2：贵族
-      obj.id = id;
+    };
+
+    const operation = (id) => {
+      const obj = {
+        partitionFlag: operationValue.partitionVal.reduce(
+          (accumulator, currentValue) => accumulator + currentValue,
+          0
+        ),
+        name: JSON.stringify({
+          ar: operationValue.nameAr,
+          zh: operationValue.nameZh,
+          en: operationValue.nameEn,
+          tr: operationValue.nameTr,
+        }),
+        pic: operationValue.imageUrl,
+        effectType: operationValue.effectType,
+        effect: filePreview.value,
+        status: operationValue.status,
+        type: 1, // 资料卡类型 1：普通 2：贵族
+        id,
+      };
       console.log(obj);
       pesonalBackgroundSaveOrUpdate(obj).then((res) => {
         if (res.code == 200) {
-          this.operationDialog = false;
-          this.getData();
-          this.isImage = false;
-          this.isVideo = false;
-          this.isSVGA = false;
+          operationDialog.value = false;
+          getData();
+          isImage.value = false;
+          isVideo.value = false;
+          isSVGA.value = false;
         } else {
           ElMessage({
             showClose: true,
@@ -546,11 +578,12 @@ export default {
           });
         }
       });
-    },
-    send() {
-      pesonalBackgroundListSend(this.sendObj).then((res) => {
+    };
+
+    const send = () => {
+      pesonalBackgroundListSend(sendObj).then((res) => {
         if (res.code == 200) {
-          this.sendDialog = false;
+          sendDialog.value = false;
           ElMessage({
             showClose: true,
             message: "赠送成功",
@@ -564,71 +597,77 @@ export default {
           });
         }
       });
-    },
-    beforeAvatarUpload() {
+    };
+
+    const beforeAvatarUpload = () => {
       ElMessage({
         showClose: true,
         message: "上传中可能较慢，请等待上传成功后在进行下一步~",
         type: "warning",
       });
-    },
-    handleAvatarError() {
+    };
+
+    const handleAvatarError = () => {
       ElMessage({
         showClose: true,
         message: "上传失败！",
         type: "error",
       });
-    },
-    handleAvatarSuccess(res, file) {
+    };
+
+    const handleAvatarSuccess = (res, file) => {
       console.log(file);
-      this.operationValue.imageUrl = file.response.data;
+      operationValue.imageUrl = file.response.data;
       ElMessage({
         showClose: true,
         message: "上传成功！",
         type: "success",
       });
-    },
-    handleAvatarSuccess1(res, files) {
+    };
+
+    const handleAvatarSuccess1 = (res, files) => {
       console.log(files.raw);
       const selectedFile = files.raw;
       if (!selectedFile) return;
       // 清除旧的预览数据
-      this.resetFile();
+      resetFile();
       const fileType = selectedFile.type;
       const fileName = selectedFile.name;
       // 创建预览 URL
       console.log(res, 22222222222222222);
-      this.filePreview = res.data;
-      this.file = selectedFile;
+      filePreview.value = res.data;
+      file.value = selectedFile;
       // 根据文件类型判断
       if (fileType.startsWith("image/")) {
-        this.isImage = true;
+        isImage.value = true;
       } else if (fileType === "video/mp4") {
-        this.isVideo = true;
+        isVideo.value = true;
       } else if (fileName.endsWith(".svga")) {
-        this.isSVGA = true;
-        this.initSVGA(res.data);
+        isSVGA.value = true;
+        initSVGA(res.data);
       }
       ElMessage({
         showClose: true,
         message: "上传成功！",
         type: "success",
       });
-    },
-    resetFile() {
-      this.file = null;
-      this.filePreview = null;
-      this.isImage = false;
-      this.isVideo = false;
-      this.isSVGA = false;
+    };
+
+    const resetFile = () => {
+      file.value = null;
+      filePreview.value = null;
+      isImage.value = false;
+      isVideo.value = false;
+      isSVGA.value = false;
       // 清除 SVGA 容器内容
       const svgaPlayer = document.getElementById("svga-player");
       if (svgaPlayer) {
         svgaPlayer.innerHTML = "";
       }
-    },
-    initSVGA(url) {
-      this.$nextTick(() => {
+    };
+
+    const initSVGA = (url) => {
+      nextTick(() => {
         const container = document.getElementById("svga-player");
         if (container) {
           const player = new SVGA.Player(container);
@@ -639,22 +678,15 @@ export default {
           });
         }
       });
-    },
-    initSVGAList(url, id) {
-      this.$nextTick(() => {
+    };
+
+    const initSVGAList = (url, id) => {
+      nextTick(() => {
         const container = document.getElementById("svga-player" + id);
         if (!container) {
           console.error(`SVGA container for ID ${id} not found`);
           return; // 终止后续操作
         }
-        // if (container) {
-        //   const player = new SVGA.Player(container);
-        //   const parser = new SVGA.Parser();
-        //   parser.load(url, (videoItem) => {
-        //     player.setVideoItem(videoItem);
-        //     player.startAnimation();
-        //   });
-        // }
         try {
           const player = new SVGA.Player(container);
           const parser = new SVGA.Parser();
@@ -666,17 +698,54 @@ export default {
           console.error("SVGA initialization failed:", error);
         }
       });
-    },
-    jsonFun(val) {
-      return JSON.parse(val);
-    },
+    };
+
+    const jsonFun = (val) => JSON.parse(val);
+
     // 分页导航
-    handleSizeChange() {
-      this.getData();
-    },
-    handleCurrentChange() {
-      this.getData();
-    },
+    const handleSizeChange = () => {
+      getData();
+    };
+
+    const handleCurrentChange = () => {
+      getData();
+    };
+
+    return {
+      partitionDesc,
+      partitionIdArr,
+      file,
+      filePreview,
+      isImage,
+      isVideo,
+      isSVGA,
+      loading,
+      inquire,
+      operationDialog,
+      operationType,
+      operationDialogTitle,
+      operationValueId,
+      operationValue,
+      sendDialog,
+      sendObj,
+      tableData,
+      total,
+      currentPage,
+      pageSize,
+      getData,
+      operation,
+      send,
+      beforeAvatarUpload,
+      handleAvatarError,
+      handleAvatarSuccess,
+      handleAvatarSuccess1,
+      resetFile,
+      initSVGA,
+      initSVGAList,
+      jsonFun,
+      handleSizeChange,
+      handleCurrentChange,
+    };
   },
 };
 </script>