【国之重器】详情页对接借口煞笔煞笔

src/App.vue

@@ -288,7 +288,7 @@ html, body {
 <style scoped lang="less">
 #app {
   >.fade-in-mask {
-    z-index: 5;
+    z-index: 2005;
   }
   >nav {
     position: absolute;

src/api.js

@@ -87,6 +87,30 @@ export default {
       return res.data.data
     })
   },
+  getTreasureList() {
+    return axios({
+      method: 'post',
+      url: `${process.env.VUE_APP_API_ORIGIN}/api/show/goods/pageList`,
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: {}
+    }).then((res) => {
+      return res.data.data.records
+    })
+  },
+  getTreasureDetail(id) {
+    return axios({
+      method: 'get',
+      url: `${process.env.VUE_APP_API_ORIGIN}/api/show/goods/detail/${id}`,
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: {}
+    }).then((res) => {
+      return res.data.data
+    })
+  },
   getMetaverseList() {
     return axios({
       method: 'post',

src/views/General.vue

@@ -82,7 +82,7 @@
       <img
         v-show="activeCorpInfo.thumb"
         class="banner"
-        :src="activeCorpInfo.thumb"
+        :src="`${prefix}/${activeCorpInfo.thumb}`"
         alt=""
         draggable="false"
       >
@@ -116,6 +116,8 @@ export default {
   },
 
   setup () {
+    const prefix = ref(process.env.VUE_APP_API_ORIGIN)
+
     const filterKeyword = ref('')
 
     // 初始化数据列表
@@ -202,6 +204,8 @@ export default {
     })
 
     return {
+      prefix,
+
       filterKeyword,
 
       corpListMap,

src/views/Treasure.vue

@@ -12,6 +12,21 @@
       @mouseup="onMouseUp"
     >
       <div
+        v-for="item in treasureList.value"
+        :key="item.id"
+        class="cover grid-item"
+        @click="!isDragged && $router.push({name: 'TreasureDetail', query: {id: item.id}})"
+      >
+        <img
+          class="photo"
+          :src="`${prefix}${item.thumb}`"
+          alt=""
+          draggable="false"
+          load="lazy"
+        >
+        <h3>{{ item.name }}</h3>
+      </div>
+      <div
         class="cover grid-item"
         @click="!isDragged && $router.push({name: 'TreasureDetail'})"
       >
@@ -797,6 +812,9 @@ import {
 } from 'vue'
 import { ElLoading } from 'element-plus'
 
+const prefix = process.env.VUE_APP_API_ORIGIN
+
+// 滑动功能
 let isMouseDown = false
 let isDragged = false
 const gridWrapperElem = ref('null')
@@ -818,12 +836,14 @@ function onMouseLeave(e) {
   isMouseDown = false
 }
 
-const isShowLoadingMask = ref(true)
-onMounted(() => {
-  const loadingInstance = ElLoading.service({
-    background: 'transparent',
-  })
+// 获取数据
+let treasureList = reactive({ value: null })
+api.getTreasureList().then((res) => {
+  treasureList.value = res
+})
 
+// 布局相关
+onMounted(() => {
   setTimeout(() => {
     const isotopeInst = $('.grid').isotope({
       layoutMode: 'packery',
@@ -833,6 +853,26 @@ onMounted(() => {
         // gutter: 10,
       }
     })
+  }, 500)
+})
+
+// mask相关
+const isShowLoadingMask = ref(true)
+
+onMounted(() => {
+  const loadingInstance = ElLoading.service({
+    background: 'transparent',
+  })
+
+  setTimeout(() => {
+    // const isotopeInst = $('.grid').isotope({
+    //   layoutMode: 'packery',
+    //   itemSelector: '.grid-item',
+    //   packery: {
+    //     horizontal: true,
+    //     // gutter: 10,
+    //   }
+    // })
     isShowLoadingMask.value = false
     loadingInstance.close()
   }, 666)

src/views/TreasureDetail.vue

@@ -19,7 +19,7 @@
       >
     </button>
 
-    <h1>万吨水压机</h1>
+    <h1>{{ rawData.value?.entity?.name }}</h1>
 
     <div class="tab-bar">
       <button
@@ -65,9 +65,9 @@
           class="swiper-wrapper"
         >
           <iframe
-            v-for="(item, index) in modelUlrList"
-            :key="index"
-            :src="item"
+            v-for="(item) in modelUrlList"
+            :key="item.id"
+            :src="item.filePath"
             frameborder="0"
             class="swiper-slide"
           />
@@ -77,9 +77,9 @@
           class="swiper-wrapper"
         >
           <video
-            v-for="(item, index) in videoUrlList"
-            :key="index"
-            :src="item"
+            v-for="(item) in videoUrlList"
+            :key="item.id"
+            :src="item.filePath"
             class="swiper-slide"
           />
         </div>
@@ -88,11 +88,10 @@
           class="swiper-wrapper"
         >
           <img
-            v-for="(item, index) in imageUlrList"
-            :key="index"
+            v-for="(item) in imageUrlList"
+            :key="item.id"
             draggable="false"
-            :src="item"
-            frameborder="0"
+            :src="`${prefix}/${item.filePath}`"
             class="swiper-slide"
           >
         </div>
@@ -100,11 +99,11 @@
           <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ list.length }}</span>
         </div> -->
       </div>
-      <p class="main">
+      <!-- <p class="main">
         厂家：江南造船     尺寸：模型：长1230mm，宽700mm，高2300mm
-      </p>
+      </p> -->
       <p class="desc">
-        简介：中国第一台万吨水压机，机身高23.65米，地面部分高16.7米。1959年，江南造船厂万吨水压机工作大队成立；1961年12月13日，万吨水压机开始总体安装；1962年6月22日，万吨水压机宣告正式投产；直到现在，万吨水压机仍在上海重型机器厂使用。
+        {{ rawData.value?.entity?.description }}
       </p>
     </div>
 
@@ -134,7 +133,7 @@
       <button
         v-if="canRecord"
         @click="$router.push({name: 'RecordView', query: {
-          url: encodeURI(modelUlrList[activeSwiperItemIndex])
+          url: encodeURI(modelUrlList[activeSwiperItemIndex])
         }})"
       >
         <img
@@ -165,13 +164,15 @@
 
 <script>
 import {
+  computed,
+  nextTick,
+  onMounted,
   reactive,
   ref,
   toRefs,
-  onMounted,
   watch,
-  nextTick,
 } from 'vue'
+import { useRoute } from "vue-router"
 import TreasureShare from "@/components/TreasureShare.vue"
 import Swiper from 'swiper/bundle'
 import 'swiper/css/bundle'
@@ -181,8 +182,56 @@ export default {
     TreasureShare
   },
   setup () {
+    const prefix = process.env.VUE_APP_API_ORIGIN
+
+    /**
+     * 路由
+     */
+    const route = useRoute()
+
+    /**
+     * tab bar
+     */
     const activeTabIndx = ref(0)
 
+    /**
+     * swiper 相关
+     */
+    let swiper = null
+    const activeSwiperItemIndex = ref(0)
+    function initSwiper() {
+      swiper = new Swiper('.swiper-root', {
+        // pagination: {
+        //   el: '.swiper-pagination',
+        // },
+
+        // Navigation arrows
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+
+        on: {
+          afterInit: function (e) {
+            activeSwiperItemIndex.value = e.activeIndex
+          },
+          slideChange: function(e) {
+            activeSwiperItemIndex.value = e.activeIndex
+          }
+        }
+      })
+    }
+    onMounted(initSwiper)
+    watch(activeTabIndx, (newV) => {
+      swiper.destroy()
+      nextTick(() => {
+        initSwiper()
+      })
+    })
+
+    /**
+     * 分享
+     */
     const isShowShare = ref(false)
 
     /**
@@ -226,68 +275,46 @@ export default {
     /**
      * 展示数据
      */
-    const modelUlrList = reactive([
-      'https://4dscene.4dage.com/culturalrelics/demo/Model.html?m=4061'
-    ])
-    const videoUrlList = reactive([
-    ])
-    const imageUlrList = reactive([
-    ])
-
-    /**
-     * swiper 相关
-     */
-    let swiper = null
-    const activeSwiperItemIndex = ref(0)
-    function initSwiper() {
-      swiper = new Swiper('.swiper-root', {
-        // pagination: {
-        //   el: '.swiper-pagination',
-        // },
-
-        // Navigation arrows
-        navigation: {
-          nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev',
-        },
-
-        on: {
-          afterInit: function (e) {
-            activeSwiperItemIndex.value = e.activeIndex
-          },
-          slideChange: function(e) {
-            activeSwiperItemIndex.value = e.activeIndex
-          }
+    const rawData = reactive({
+      value: null,
+    })
+    const modelUrlList = reactive([])
+    const videoUrlList = reactive([])
+    const imageUrlList = reactive([])
+    api.getTreasureDetail(route.query.id).then((res) => {
+      rawData.value = res
+      for (const iterator of rawData.value.file) {
+        switch (iterator.type) {
+        case 'model':
+          modelUrlList.push(iterator)
+          break
+        case 'video':
+          videoUrlList.push(iterator)
+          break
+        case 'img':
+          imageUrlList.push(iterator)
+          break
+        default:
+          break
         }
-      })
-    }
-    onMounted(initSwiper)
-    watch(activeTabIndx, (newV) => {
-      swiper.destroy()
-      nextTick(() => {
-        initSwiper()
-      })
+      }
     })
 
     return {
+      prefix,
+      activeSwiperItemIndex,
       activeTabIndx,
-
-      isShowShare,
-
       bgAudio,
-      hasMusic,
-      musicUrl,
-      isMusicOn,
-
       canRecord,
-
       fullScreenStatus,
-
-      modelUlrList,
+      hasMusic,
+      imageUrlList,
+      isMusicOn,
+      isShowShare,
+      modelUrlList,
+      musicUrl,
+      rawData,
       videoUrlList,
-      imageUlrList,
-
-      activeSwiperItemIndex,
     }
   },
 }
@@ -368,6 +395,7 @@ export default {
         margin-right: auto;
         .swiper-slide {
           user-select: none;
+          object-fit: contain;
         }
       }
       // .swiper-pagination {
@@ -410,6 +438,9 @@ export default {
       margin-left: auto;
       margin-right: auto;
       padding-left: 10px;
+
+      margin-top: 20px;
+      height: 150px;
       &::-webkit-scrollbar { background: transparent; width: 4px; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
       &::-webkit-scrollbar-thumb {
         background: rgba(220, 231, 240, 0.2);