feat: 加上两个按钮，进行文件预览和下载

src/pages/explain/index.vue

@@ -1,7 +1,8 @@
 <template>
-  <view class="detail">
-    <!-- <uv-parse :content="downUrl" :preview-img="false" /> -->
-  </view>
+  <div class="button_container">
+    <button class="styled_button" @click="loadData(1)">预览文件</button>
+    <button class="styled_button" @click="loadData(2)">下载文件</button>
+  </div>
 </template>
 
 <script>
@@ -9,6 +10,7 @@ import { detail } from "@/api/explain.js";
 export default {
   data() {
     return {
+      id: "",
       name: "",
       downUrl: "",
     };
@@ -16,7 +18,8 @@ export default {
 
   onLoad(e) {
     var that = this;
-    that.getDetail(e.id);
+    that.id = e.id;
+    that.loadData(0);
   },
 
   methods: {
@@ -27,18 +30,57 @@ export default {
     // "createTimeStr":"2024-12-12 14:28:56","updateTimeStr":"2024-12-12 14:32:55",
     // "categoryName":"音箱","copyUrl":"http://testweb.radio1964.com/"},"code":0,"message":"",
     // "requestId":null,"success":true}
-    getDetail(id) {
+    /// status: 0-单请求数据 1-预览文件 2-下载文件
+    ///状态判断
+    loadData(status) {
       var that = this;
+      var id = that.id;
+      if (status == 0) {
+        that.getDetail(status);
+      } else if (status == 1) {
+        var downUrl = that.downUrl;
+        if (downUrl != "") {
+          that.previewFile(downUrl);
+        } else {
+          that.getDetail(status);
+        }
+      } else if (status == 2) {
+        var downUrl = that.downUrl;
+        if (downUrl != "") {
+          var name = that.name;
+          that.downloadFile(name, downUrl);
+        } else {
+          that.getDetail(status);
+        }
+      }
+    },
+
+    ///接口获取数据
+    getDetail(status) {
+      var that = this;
+      var id = that.id;
       detail(id).then((res) => {
         if (res.code === 0) {
           that.name = res.data.name;
           that.downUrl = res.data.fileUrl;
-          that.downloadFile(that.name, that.downUrl);
+          if (status == 1) {
+            that.previewFile(that.downUrl);
+          } else if (status == 2) {
+            that.downloadFile(that.name, that.downUrl);
+          }
         }
       });
     },
 
+    previewFile(downUrl) {
+      window.open(
+        "https://view.officeapps.live.com/op/view.aspx?src=" +
+          encodeURIComponent(downUrl)
+      );
+    },
+
     async downloadFile(name, downUrl) {
+      console.log("asdfgasdgadfg==0==" + name);
       var that = this;
       var fileName = that.getFileExtension(downUrl);
       var finalName = "";
@@ -48,9 +90,10 @@ export default {
         finalName = new Date().getTime() + "." + fileName;
       }
 
+      console.log("asdfgasdgadfg==1==" + finalName);
       try {
         // https://music-play.oss-cn-shenzhen.aliyuncs.com/backOss/file/f5f5ed93fae74fb683e8d116c40a884c.xlsx
-        const response = await fetch(fileUrl);
+        const response = await fetch(downUrl);
         if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
         }
@@ -64,7 +107,9 @@ export default {
         document.body.appendChild(a);
         a.click();
         window.URL.revokeObjectURL(url);
-      } catch (error) {}
+      } catch (error) {
+        console.log("asdfgasdgadfg==2==" + error);
+      }
     },
 
     ///截取文件
@@ -82,11 +127,36 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.detail {
-  white-space: pre-wrap;
+.button_container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  margin: 0 auto;
+}
+
+.styled_button {
+  justify-content: center;
+  background-color: #4caf50; /* Green */
+  border: none;
+  color: white;
+  padding-left: 80;
+  padding-right: 40;
+  padding-top: 40;
+  padding-bottom: 40;
+  text-align: center;
+  align-items: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 10px 0;
+  cursor: pointer;
+  border-radius: 8px;
+  transition: background-color 0.3s;
 }
 
-::v-deep img {
-  display: block;
+.styled_button:hover {
+  background-color: #45a049;
 }
 </style>