统一封装3D文件打开逻辑

src/utils/bizCommon.js

 // 此文件放置共用的一些方法，方便统一管理
 import router from "@/router";
+import { Message } from 'element-ui'
 const bizCommon = {
     openNewPage(path, query = {}) {
         const newPage = router.resolve({
@@ -7,6 +8,45 @@ const bizCommon = {
             query
         });
         window.open(newPage.href, "_blank");
-    }
+    },
+    open3d(item) {
+        if (!item) {
+            Message.error('文物数据为空！')
+        }
+        const {
+            file3dUrl,
+            url3d,
+        } = item;
+        if (file3dUrl) {
+            const { name,
+                deptName,
+                yearslabel,
+                detailSize,
+                intro } = item
+            const path = "/3dDetail";
+            const info = {
+                url3d,
+                name,
+                deptName,
+                yearslabel,
+                detailSize,
+                intro,
+            };
+            const query = {
+                file3dUrl: encodeURI(file3dUrl),
+                info: JSON.stringify(info),
+            };
+            bizCommon.openNewPage(path, query);
+            return;
+        }
+        if (url3d) {
+            const msg = message.info("即将打开3D模型...");
+            setTimeout(() => {
+                msg.close();
+                window.open(this.detail.url3d, "_blank");
+            }, 1000);
+            return;
+        }
+    },
 }
 export default bizCommon
\ No newline at end of file

src/views/culturalRelic/components/baseInfo.vue

@@ -75,40 +75,7 @@ export default {
       this.$emit("loadDetail", id);
     },
     handleTo3D() {
-      const {
-        file3dUrl,
-        url3d,
-        name,
-        deptName,
-        yearslabel,
-        detailSize,
-        intro,
-      } = this.detail;
-      if (file3dUrl) {
-        const path = "/3dDetail";
-        const info = {
-          url3d,
-          name,
-          deptName,
-          yearslabel,
-          detailSize,
-          intro,
-        };
-        const query = {
-          file3dUrl: encodeURI(file3dUrl),
-          info: JSON.stringify(info),
-        };
-        this.$bizCommon.openNewPage(path, query);
-        return;
-      }
-      if (url3d) {
-        const msg = this.$message.info("即将打开3D模型...");
-        setTimeout(() => {
-          msg.close();
-          window.open(this.detail.url3d, "_blank");
-        }, 1000);
-        return;
-      }
+      this.$bizCommon.open3d(this.detail);
     },
   },
 };

src/views/culturalRelic/index.vue

@@ -41,14 +41,8 @@
             </div>
           </el-col>
           <el-col :span="6">
-            <!-- <div :span="4" class="search-item" @click="handleClickThreeD">
-              <div class="text">是否有3D链接</div>
-              <svg-icon
-                :icon-class="onlyShow3d ? 'filter-s' : 'filter'"
-              ></svg-icon>
-            </div> -->
             <div class="search-item none-border">
-              <el-checkbox v-model="onlyShow3d">有3D链接</el-checkbox>
+              <el-checkbox v-model="onlyShow3d">有3D文物</el-checkbox>
             </div>
           </el-col>
         </el-row>
@@ -103,17 +97,18 @@
                   lazy
                 />
               </div>
-              <div class="showIcon" v-if="item && item.url3d">
+              <div
+                class="showIcon"
+                @click.prevent="handleTo3D(item)"
+                title="查看3D模型"
+                v-if="has3d(item)"
+              >
                 <svg-icon icon-class="3d" class="icon"></svg-icon>
               </div>
               <div class="desc">
                 <div class="name">{{ item.name }}</div>
                 <div class="desc-container">
                   <div class="left">
-                    <!-- <div class="deptName">
-                        <span>关键词：</span>
-                        <span>{{ item.keyword }}</span>
-                      </div> -->
                     <div class="deptName">
                       <span>馆藏单位：</span>
                       <span>{{ item.deptName }}</span>
@@ -185,6 +180,11 @@ export default {
   },
   computed: {
     ...mapGetters(["dicts"]),
+    has3d(item) {
+      return (item) => {
+        return item.url3d || item.file3dUrl;
+      };
+    },
   },
   async created() {
     let yearList = [
@@ -279,8 +279,8 @@ export default {
       this.keyword = value;
       this.loadData();
     },
-    handleTo3D(url3d) {
-      window.open(url3d, "_blank");
+    handleTo3D(item) {
+      this.$bizCommon.open3d(item);
     },
 
     handleEnterImg(item) {

src/views/display/index.vue

 <template>
   <div class="display">
-    <!-- <ListBanner
-      title="共计已上线展览"
-      :num="list.total"
-      :info="['展览', '展示']"
-    /> -->
-    <!-- <div class="search-bar wow animate__animated animate__fadeIn">
-      <div class="search-wrapper">
-        <div class="search-item" @click="handleClickSearchBar('type')">
-                    <span>{{ currentType }}</span>
-                    <i class="el-icon-caret-bottom"></i>
-                </div>
-                <div class="search-item" @click="handleClickSearchBar('years')">
-                    <span>{{ currentYears }}</span>
-                    <i class="el-icon-caret-bottom"></i>
-                </div>
-
-                <div :span="4" class="search-item" @click="handleClickThreeD">
-                    <div class="text">3D文物</div>
-                    <svg-icon :icon-class="onlyShow3d ? 'filter-s' : 'filter'"></svg-icon>
-                </div>
-        <div class="search-item">
-          <input
-            type="text"
-            v-model="keyword"
-            placeholder="展览名称"
-            @keyup.enter="search"
-          />
-          <i class="el-icon-search" @click="search"></i>
-        </div>
-      </div>
-    </div> -->
     <div class="type-group">
       <el-row>
         <el-col