feat: --

.env.dev

@@ -2,3 +2,4 @@ VUE_APP_CLI_MODE=dev
 NODE_ENV=development
 PUBLIC_PATH=/
 VUE_APP_DEPLOY_ORIGIN=https://sit-wuxicishan.4dage.com
+VUE_APP_ARTICLE_ORIGIN=http://dev.api.museum.b.wxiy.com

.env.mytest

@@ -2,3 +2,4 @@ VUE_APP_CLI_MODE=test
 NODE_ENV=production
 PUBLIC_PATH=./
 VUE_APP_DEPLOY_ORIGIN=https://sit-wuxicishan.4dage.com
+VUE_APP_ARTICLE_ORIGIN=https://api.museum.b.wxiy.com

.env.prod

@@ -1,4 +1,5 @@
 VUE_APP_CLI_MODE=prod
 NODE_ENV=production
 PUBLIC_PATH=./
-VUE_APP_DEPLOY_ORIGIN=/
+VUE_APP_DEPLOY_ORIGIN=https://wuxicharitymuseum.cn
+VUE_APP_ARTICLE_ORIGIN=https://api.museum.b.wxiy.com

package.json

@@ -1,42 +1,44 @@
-{
-  "name": "my-app",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve --mode dev",
-    "build-test": "vue-cli-service build --mode mytest",
-    "build-prod": "vue-cli-service build --mode prod",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "@dage/utils": "^1.0.2",
-    "@vueuse/core": "^10.4.1",
-    "axios": "^1.1.3",
-    "core-js": "^3.8.3",
-    "dayjs": "^1.11.7",
-    "element-plus": "^2.7.0",
-    "html2canvas": "^1.4.1",
-    "lodash": "^4.17.21",
-    "mitt": "^3.0.0",
-    "v-viewer": "^3.0.11",
-    "viewerjs": "^1.11.6",
-    "vue": "^3.2.13",
-    "vue-router": "^4.0.3",
-    "vuex": "^4.0.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.12.16",
-    "@babel/eslint-parser": "^7.12.16",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
-    "@vue/cli-plugin-router": "~5.0.0",
-    "@vue/cli-plugin-vuex": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3",
-    "less": "^4.0.0",
-    "less-loader": "^8.0.0",
-    "postcss-px-to-viewport": "^1.1.1"
-  }
-}
+{
+  "name": "my-app",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve --mode dev",
+    "serve-prod": "vue-cli-service serve --mode prod",
+    "build-test": "vue-cli-service build --mode mytest",
+    "build-prod": "vue-cli-service build --mode prod",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@dage/utils": "^1.1.0",
+    "@vueuse/core": "^10.4.1",
+    "axios": "^1.1.3",
+    "core-js": "^3.8.3",
+    "dayjs": "^1.11.7",
+    "element-plus": "^2.7.0",
+    "html2canvas": "^1.4.1",
+    "lodash": "^4.17.21",
+    "mitt": "^3.0.0",
+    "swiper": "^11.2.2",
+    "v-viewer": "^3.0.11",
+    "viewerjs": "^1.11.6",
+    "vue": "^3.2.13",
+    "vue-router": "^4.0.3",
+    "vuex": "^4.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "less": "^4.0.0",
+    "less-loader": "^8.0.0",
+    "postcss-px-to-viewport": "^1.1.1"
+  }
+}

public/staticConfig.js

@@ -108,7 +108,7 @@ var staticConfig = {
     {
       id: 1,
       name: "永锡不匮--无锡慈善的传承与创新（善德名邦）",
-      url: `https://sit-locbigsecen.4dage.com/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:93,qua:0.0003672651343559632,0.8562585754236621,-0.0006088002902584934,0.5165468991064768`,
+      url: `/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:93,qua:0.0003672651343559632,0.8562585754236621,-0.0006088002902584934,0.5165468991064768`,
       date: '2024年5月27日至今',
       address: '1号厅',
       type: '基本陈列',
@@ -116,7 +116,7 @@ var staticConfig = {
     {
       id: 2,
       name: "永锡不匮--无锡慈善的传承与创新（善道为公）",
-      url: `https://sit-locbigsecen.4dage.com/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:433,qua:0.005444343576967057,0.777935509128107,-0.006741132562691553,0.6282843660430556`,
+      url: `/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:433,qua:0.005444343576967057,0.777935509128107,-0.006741132562691553,0.6282843660430556`,
       date: '2024年5月27日至今',
       address: '1号厅',
       type: '基本陈列',
@@ -125,7 +125,7 @@ var staticConfig = {
     {
       id: 3,
       name: "永锡不匮--无锡慈善的传承与创新（善者无疆）",
-      url: `https://sit-locbigsecen.4dage.com/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:232,qua:-0.00018523724081728223,0.9268546983343686,0.0004573225593805949,0.3754199311652464`,
+      url: `/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:232,qua:-0.00018523724081728223,0.9268546983343686,0.0004573225593805949,0.3754199311652464`,
       date: '2024年5月27日至今',
       address: '1号厅',
       type: '基本陈列',
@@ -134,7 +134,7 @@ var staticConfig = {
     {
       id: 4,
       name: "文教春秋--荡口慈善文化与教育",
-      url: `https://sit-locbigsecen.4dage.com/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:670,qua:0.0010361982917485185,0.9793875839043288,-0.0050258303567850705,0.2019247886434278`,
+      url: `/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:670,qua:0.0010361982917485185,0.9793875839043288,-0.0050258303567850705,0.2019247886434278`,
       date: '2024年5月27日至今',
       address: '1号厅',
       type: '专题展览',
@@ -143,7 +143,7 @@ var staticConfig = {
     {
       id: 5,
       name: "薪火鸿模--鸿模小学历史文化",
-      url: `https://sit-locbigsecen.4dage.com/wxScene/index.html?m=wxcs_SG-2e4SwPKzjZz&firstView=pano:16,qua:-0.004615061680190784,-0.05639108346896922,-0.000260665886610734,0.9983980565048178`,
+      url: `/wxScene/index.html?m=wxcs_SG-2e4SwPKzjZz&firstView=pano:16,qua:-0.004615061680190784,-0.05639108346896922,-0.000260665886610734,0.9983980565048178`,
       date: '2024年5月27日至今',
       address: '1号厅',
       type: '专题展览',
@@ -151,7 +151,7 @@ var staticConfig = {
     {
       id: 6,
       name: "慈·善--从手到心的给予",
-      url: `https://sit-locbigsecen.4dage.com/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:465,qua:-0.04471889285056369,0.6934088933805184,0.04319590870552653,0.7178568337448256`,
+      url: `/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:465,qua:-0.04471889285056369,0.6934088933805184,0.04319590870552653,0.7178568337448256`,
       date: '2024年5月27日至今',
       address: '1号厅',
       type: '主题临展'

src/api.js

@@ -261,4 +261,65 @@ export function fetchRelicList(type = 'all', keyword = '', pageNum = 0, pageSize
     list: filtered.slice(pageNum * pageSize, pageNum * pageSize + pageSize),
     total: filtered.length
   }
-}
+}
+
+export function getNewsCarouselListApi () {
+  return axios({
+    method: 'get',
+    url: `${process.env.VUE_APP_ARTICLE_ORIGIN}/api/web/news/carousel`,
+    params: {
+      limit: 3
+    }
+  }).then((res) => {
+    return res.data.data
+  })
+}
+
+export function getNewsListApi () {
+  return axios({
+    method: 'get',
+    url: `${process.env.VUE_APP_ARTICLE_ORIGIN}/api/web/news`,
+    params: {
+      limit: 999
+    }
+  }).then((res) => {
+    return res.data.rows
+  })
+}
+
+export function getNewsDetailApi (id) {
+  return axios({
+    method: 'get',
+    url: `${process.env.VUE_APP_ARTICLE_ORIGIN}/api/web/news/${id}`,
+  }).then((res) => {
+    return res.data.data
+  })
+}
+
+export function getCulturalRelicsTypeListApi () {
+  return axios({
+    method: 'get',
+    url: `${process.env.VUE_APP_ARTICLE_ORIGIN}/api/web/culturalRelics/type/list`,
+  }).then((res) => {
+    return res.data.data
+  })
+}
+
+export function getCulturalRelicsListApi (params) {
+  return axios({
+    method: 'get',
+    url: `${process.env.VUE_APP_ARTICLE_ORIGIN}/api/web/culturalRelics`,
+    params
+  }).then((res) => {
+    return res.data
+  })
+}
+
+export function getCulturalRelicsDetailApi (id) {
+  return axios({
+    method: 'get',
+    url: `${process.env.VUE_APP_ARTICLE_ORIGIN}/api/web/culturalRelics/${id}`,
+  }).then((res) => {
+    return res.data.data
+  })
+}

src/router/index.js

@@ -17,7 +17,7 @@ import ServiceView from '@/views/about/ServiceView.vue'
 import InfoView from '@/views/about/InfoView.vue'
 import InfoDetail from '@/views/about/InfoDetail.vue'
 import CollectionView from '@/views/about/CollectionView.vue'
-import CollectionDetail from '@/views/about/CollectionDetail.vue'
+import CollectionDetail from '@/views/about/CollectionDetail2.vue'
 
 // import store from '@/store/index.js'
 
@@ -85,7 +85,7 @@ const routes = [
         },
         children: [
           {
-            path: 'info-detail',
+            path: 'info-detail/:id',
             name: 'InfoDetail',
             component: InfoDetail,
             meta: {
@@ -103,7 +103,7 @@ const routes = [
         },
         children: [
           {
-            path: 'collection-detail',
+            path: 'collection-detail/:id',
             name: 'CollectionDetail',
             component: CollectionDetail,
             meta: {

src/views/BannerView.vue

@@ -1,158 +1,159 @@
-<template>
-  <iframe
-    ref="bannerIframe"
-    frameborder="0"
-    class="banner-iframe"
-    src="https://sit-wuxicishan.4dage.com/unityPcBanner"
-  />
-
-  <div
-    v-show="showVideo && videoUrl"
-    class="banner-video"
-  >
-    <video
-      ref="startupVideoRef"
-      :src="`/videos/${videoUrl}`"
-      autoplay
-      controls="false"
-      x5-playsinline="true"
-      playsinline="true"
-      webkit-playsinline="true"
-      x-webkit-airplay="true"
-      x5-video-player-type="h5-page"
-      @ended="onEnded"
-    />
-
-    <div
-      v-if="isShowPlayBtn"
-      class="banner-video__play"
-      @click="onClickPlayVideo"
-    >
-      播放
-    </div>
-
-    <div
-      class="banner-video__skip"
-      @click="onEnded"
-    >
-      跳过
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, inject, nextTick } from "vue"
-import { useRouter } from "vue-router"
-
-const router = useRouter()
-const $isSafari = inject('$isSafari')
-
-let checkedIdx = 0
-const videoUrl = ref('')
-const showVideo = ref(false)
-const startupVideoRef = ref(null)
-const bannerIframe = ref(null)
-
-const VIDEO_MAP = [
-  'ysdt.mp4',
-  'xszc.mp4',
-  'csbwg.mp4'
-]
-
-const isShowPlayBtn = ref($isSafari)
-function onClickPlayVideo() {
-  startupVideoRef.value.play()
-  isShowPlayBtn.value = false
-}
-const onEnded = () => {
-  switch (checkedIdx) {
-  case 0:
-    router.push({
-      name: 'HomeView'
-    })
-    break
-  case 1:
-    router.push({
-      name: 'CityOfXishan'
-    })
-    break
-  case 2:
-    router.push({
-      name: 'MuseumView'
-    })
-    break
-  }
-
-  showVideo.value = false
-}
-
-onMounted(() => {
-  if (!bannerIframe.value) return
-
-  bannerIframe.value.contentWindow.OnClickScene = function(v) {
-    videoUrl.value = VIDEO_MAP[v]
-    showVideo.value = true
-    checkedIdx = v
-  }
-})
-</script>
-
-<style lang="less" scoped>
-.banner-iframe {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 998;
-}
-.banner-video {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-
-  video {
-    width: inherit;
-    height: inherit;
-    object-fit: cover;
-    pointer-events: none;
-
-    &::-webkit-media-controls-enclosure {
-      display: none !important;
-    }
-  }
-  &__play{
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    display: flex;
-    justify-content: center;
-    font-size: 20px;
-    color: white;
-    width: 117px;
-    height: 51px;
-    letter-spacing: 4px;
-    line-height: 42px;
-    background: url('@/assets/images/btn0@2x-min.png') no-repeat center / contain;
-  }
-  &__skip {
-    position: absolute;
-    right: 30px;
-    bottom: 30px;
-    display: flex;
-    justify-content: center;
-    font-size: 20px;
-    color: white;
-    width: 117px;
-    height: 51px;
-    letter-spacing: 4px;
-    line-height: 42px;
-    cursor: pointer;
-    background: url('@/assets/images/btn0@2x-min.png') no-repeat center / contain;
-  }
-}
+<template>
+  <iframe
+    ref="bannerIframe"
+    frameborder="0"
+    class="banner-iframe"
+    :src="iframeUrl"
+  />
+
+  <div
+    v-show="showVideo && videoUrl"
+    class="banner-video"
+  >
+    <video
+      ref="startupVideoRef"
+      :src="`/videos/${videoUrl}`"
+      autoplay
+      controls="false"
+      x5-playsinline="true"
+      playsinline="true"
+      webkit-playsinline="true"
+      x-webkit-airplay="true"
+      x5-video-player-type="h5-page"
+      @ended="onEnded"
+    />
+
+    <div
+      v-if="isShowPlayBtn"
+      class="banner-video__play"
+      @click="onClickPlayVideo"
+    >
+      播放
+    </div>
+
+    <div
+      class="banner-video__skip"
+      @click="onEnded"
+    >
+      跳过
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, inject } from "vue"
+import { useRouter } from "vue-router"
+
+const router = useRouter()
+const $isSafari = inject('$isSafari')
+
+let checkedIdx = 0
+const videoUrl = ref('')
+const showVideo = ref(false)
+const startupVideoRef = ref(null)
+const bannerIframe = ref(null)
+const iframeUrl = `${process.env.VUE_APP_DEPLOY_ORIGIN}/unityPcBanner/index.html`
+
+const VIDEO_MAP = [
+  'ysdt.mp4',
+  'xszc.mp4',
+  'csbwg.mp4'
+]
+
+const isShowPlayBtn = ref($isSafari)
+function onClickPlayVideo() {
+  startupVideoRef.value.play()
+  isShowPlayBtn.value = false
+}
+const onEnded = () => {
+  switch (checkedIdx) {
+  case 0:
+    router.push({
+      name: 'HomeView'
+    })
+    break
+  case 1:
+    router.push({
+      name: 'CityOfXishan'
+    })
+    break
+  case 2:
+    router.push({
+      name: 'MuseumView'
+    })
+    break
+  }
+
+  showVideo.value = false
+}
+
+onMounted(() => {
+  if (!bannerIframe.value) return
+
+  bannerIframe.value.contentWindow.OnClickScene = function(v) {
+    videoUrl.value = VIDEO_MAP[v]
+    showVideo.value = true
+    checkedIdx = v
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.banner-iframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 998;
+}
+.banner-video {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+
+  video {
+    width: inherit;
+    height: inherit;
+    object-fit: cover;
+    pointer-events: none;
+
+    &::-webkit-media-controls-enclosure {
+      display: none !important;
+    }
+  }
+  &__play{
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+    color: white;
+    width: 117px;
+    height: 51px;
+    letter-spacing: 4px;
+    line-height: 42px;
+    background: url('@/assets/images/btn0@2x-min.png') no-repeat center / contain;
+  }
+  &__skip {
+    position: absolute;
+    right: 30px;
+    bottom: 30px;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+    color: white;
+    width: 117px;
+    height: 51px;
+    letter-spacing: 4px;
+    line-height: 42px;
+    cursor: pointer;
+    background: url('@/assets/images/btn0@2x-min.png') no-repeat center / contain;
+  }
+}
 </style>

src/views/MuseumView/MuseumView.vue

@@ -65,7 +65,7 @@ const LIST = [
     subLabel: '无锡慈善的传承与创新',
     tag: '查看详情',
     tagType: 'blue',
-    url: 'https://sit-locbigsecen.4dage.com/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:93,qua:0.0003672651343559632,0.8562585754236621,-0.0006088002902584934,0.5165468991064768'
+    url: process.env.VUE_APP_DEPLOY_ORIGIN + '/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:93,qua:0.0003672651343559632,0.8562585754236621,-0.0006088002902584934,0.5165468991064768'
   },
   {
     img: Img2,
@@ -73,7 +73,7 @@ const LIST = [
     subLabel: '鸿模小学历史文化',
     tag: '专题展览',
     tagType: 'yellow',
-    url: 'https://sit-locbigsecen.4dage.com/wxScene/index.html?m=wxcs_SG-2e4SwPKzjZz&firstView=pano:16,qua:-0.004615061680190784,-0.05639108346896922,-0.000260665886610734,0.9983980565048178'
+    url: process.env.VUE_APP_DEPLOY_ORIGIN + '/wxScene/index.html?m=wxcs_SG-2e4SwPKzjZz&firstView=pano:16,qua:-0.004615061680190784,-0.05639108346896922,-0.000260665886610734,0.9983980565048178'
   },
   {
     img: Img1,
@@ -81,7 +81,7 @@ const LIST = [
     subLabel: '荡口慈善文化与教育',
     tag: '专题展览',
     tagType: 'yellow',
-    url: 'https://sit-locbigsecen.4dage.com/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:670,qua:0.0010361982917485185,0.9793875839043288,-0.0050258303567850705,0.2019247886434278'
+    url: process.env.VUE_APP_DEPLOY_ORIGIN + '/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:670,qua:0.0010361982917485185,0.9793875839043288,-0.0050258303567850705,0.2019247886434278'
   },
   {
     img: Img2,
@@ -89,7 +89,7 @@ const LIST = [
     subLabel: '从手到心的给予',
     tag: '主题临展',
     tagType: 'blue',
-    url: 'https://sit-locbigsecen.4dage.com/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:465,qua:-0.04471889285056369,0.6934088933805184,0.04319590870552653,0.7178568337448256'
+    url: process.env.VUE_APP_DEPLOY_ORIGIN + '/wxScene/index.html?m=wxcs_SG-fwjuL9mtG2A&firstView=pano:465,qua:-0.04471889285056369,0.6934088933805184,0.04319590870552653,0.7178568337448256'
   },
 ]
 

src/views/about/CollectionDetail.vue

@@ -11,24 +11,24 @@
     <div class="text">
       <h1
         class="title"
-        :title="info.name"
+        :title="detail?.title"
       >
-        {{ info.name }}
+        {{ detail?.title }}
       </h1>
       <div
         class="age"
-        :title="info.age"
+        :title="detail?.culturalRelicEraName"
       >
-        {{ info.age }}
+        {{ detail?.culturalRelicEraName }}
       </div>
       <div
         class="size"
-        :title="info.size"
+        :title="detail?.size"
       >
-        {{ info.size }}
+        {{ detail?.size }}
       </div>
       <div class="desc">
-        {{ info.desc }}
+        {{ detail?.texture }}
       </div>
     </div>
     <Transition name="fade-out">
@@ -51,6 +51,7 @@
 import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
+import { getCulturalRelicsDetailApi } from '@/api'
 
 const route = useRoute()
 const router = useRouter()
@@ -58,11 +59,8 @@ const store = useStore()
 
 const $env = inject('$env')
 
-const info = computed(() => {
-  return staticConfig.collectionList.find((item) => {
-    return item.bs === route.query.id
-  })
-})
+const detail = ref(null)
+const loading = ref(false)
 
 const isShowTip = computed(() => {
   return store.state.needCollectionDetailTip
@@ -74,6 +72,19 @@ if (store.state.needCollectionDetailTip) {
   }, 3000)
 }
 
+const getDetail = async() => {
+  try {
+    loading.value = true
+    const data = await getCulturalRelicsDetailApi(route.params.id)
+    detail.value = data
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  getDetail()
+})
 </script>
 
 <style lang="less" scoped>

src/views/about/CollectionDetail2.vue

@@ -0,0 +1,143 @@
+<template>
+  <div
+    v-loading="loading"
+    class="info-detail"
+  >
+    <BtnBack />
+    <BtnTop
+      :target-el="contentEl"
+    />
+    <div
+      ref="contentEl"
+      class="content"
+    >
+      <h1 class="title">
+        {{detail?.title}}
+      </h1>
+      <div class="subtitle">
+        <div class="subtitle-item date">
+          <span>{{detail?.culturalRelicEraName}}</span>
+        </div>
+        <div class="subtitle-item count">
+          <span>{{detail?.culturalRelicTypeName}}</span>
+        </div>
+      </div>
+      <div class="splitter" />
+      <div class="content__content" v-html="detail?.content" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, inject } from "vue"
+import { useRoute } from "vue-router"
+import { getCulturalRelicsDetailApi } from '@/api'
+
+const route = useRoute()
+const loading = ref(false)
+const detail = ref(null)
+
+const $env = inject('$env')
+
+const contentEl = ref(null)
+
+const getDetail = async() => {
+  try {
+    loading.value = true
+    const data = await getCulturalRelicsDetailApi(route.params.id)
+    detail.value = data
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  getDetail()
+})
+</script>
+
+<style scoped lang="less">
+.info-detail{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  scroll-behavior: smooth;
+  z-index: 999;
+  .content{
+    height: 100%;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    >h1.title{
+      flex: 0 0 auto;
+      margin-top: 77px;
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: bold;
+      font-size: 40px;
+      color: #474747;
+      max-width: 1434px;
+      overflow: hidden;
+      white-space: pre;
+      text-overflow: ellipsis;
+      margin-bottom: 20px;
+    }
+    >.subtitle{
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      gap: 102px;
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 400;
+      font-size: 16px;
+      color: #589498;
+      margin-bottom: 38px;
+      >.subtitle-item{
+        display: flex;
+        align-items: center;
+        >img.icon{
+          width: 23px;
+          margin-right: 10px;
+        }
+      }
+    }
+    >.splitter{
+      flex: 0 0 auto;
+      width: 1434px;
+      height: 1Px;
+      background: #589498;
+      margin-bottom: 44px;
+    }
+    &__content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 28px;
+      margin-bottom: 30px;
+
+      ::v-deep p{
+        flex: 0 0 auto;
+        width: 1121px;
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: 400;
+        font-size: 18px;
+        color: #474747;
+        line-height: 29px;
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: 400;
+        font-size: 18px;
+        color: #474747;
+        line-height: 29px;
+        text-indent: 2em;
+      }
+      ::v-deep img{
+        flex: 0 0 auto;
+        max-width: 1121px;
+      }
+    }
+  }
+}
+</style>

src/views/about/CollectionView.vue

@@ -7,8 +7,12 @@
             v-model.trim="keyword"
             type="text"
             placeholder="请输入要搜索的内容..."
+            @keyup.enter="handleSearch"
+          >
+          <button
+            class="search"
+            @click="handleSearch"
           >
-          <button class="search">
             <img
               class=""
               src="@/assets/images/icon_search-big.png"
@@ -19,41 +23,58 @@
         </div>
       </div>
 
-      <div class="tab-bar">
-        <button
+      <Swiper
+        class="tab-bar"
+        :slides-per-view="7"
+        :pagination="{
+          clickable: true,
+        }"
+        :modules="[Pagination]"
+      >
+        <SwiperSlide
           v-for="item in collectionTypeList"
-          :key="item.id"
-          class="tab-item"
-          :class="{
-            active: item.id === activeTabId
-          }"
-          @click="activeTabId = item.id"
+          :key="item.value"
         >
-          {{ item.cn }}
-        </button>
-      </div>
+          <button
+            class="tab-item"
+            :class="{
+              active: item.value === activeTabId
+            }"
+            @click="handleTab(item.value)"
+          >
+            {{ item.label }}
+          </button>
+        </SwiperSlide>
+      </Swiper>
 
       <div
+        v-loading="loading"
         class="card-list"
       >
+        <el-empty
+          v-if="!total"
+          style="margin-top: 50px;"
+          description="暂无数据"
+          :image-size="200"
+        />
         <div
-          v-for="item in collectionList"
-          :key="item.name"
+          v-for="item in list"
+          :key="item.culturalRelicId"
           class="card"
-          @click="onClickCollection(item.bs)"
+          @click="onClickCollection(item.culturalRelicId)"
         >
           <img
             class="thumb"
-            :src="`https://yuhuatai.4dage.com/YHT/goodsData/3D/${item.bs}.png`"
+            :src="item.cover"
             alt=""
             draggable="false"
           >
           <div class="bottom">
             <span
               class="name"
-              :title="item.name"
+              :title="item.title"
             >
-              {{ item.name }}
+              {{ item.title }}
             </span>
             <img
               class="icon"
@@ -71,7 +92,7 @@
           :size="'large'"
           :page-size="pageSize"
           layout="prev, pager, next"
-          :total="collectionListlengh"
+          :total="total"
           prev-text="上一页"
           next-text="下一页"
           :hide-on-single-page="true"
@@ -85,10 +106,13 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"
+import { ref, watch, onMounted, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
-import { fetchRelicList } from "@/api.js"
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Pagination } from 'swiper/modules'
+import 'swiper/css/pagination'
+import { getCulturalRelicsTypeListApi, getCulturalRelicsListApi } from "@/api.js"
 
 const route = useRoute()
 const router = useRouter()
@@ -98,29 +122,69 @@ const $env = inject('$env')
 
 const keyword = ref('')
 
-const collectionTypeList = ref([{
-  id: 'all',
-  cn: '全部',
-}, ...staticConfig.collectionTypeList])
-const activeTabId = ref('all')
+const collectionTypeList = ref([])
+const activeTabId = ref('')
 
 const currentPage = ref(1)
 const pageSize = 8
-const collectionListlengh = computed(() => {
-  return fetchRelicList(activeTabId.value, keyword.value, currentPage.value - 1, pageSize).total
-})
-const collectionList = computed(() => {
-  return fetchRelicList(activeTabId.value, keyword.value, currentPage.value - 1, pageSize).list
-})
+const total = ref(0)
+const list = ref([])
+const loading = ref(false)
+
+const getTypeList = async() => {
+  const data = await getCulturalRelicsTypeListApi()
+  collectionTypeList.value = [
+    {
+      label: '全部',
+      value: ''
+    },
+    ...data
+  ]
+}
+
+const getCulturalRelicsList = async() => {
+  try {
+    loading.value = true
+    const data = await getCulturalRelicsListApi({
+      title: keyword.value,
+      culturalRelicType: activeTabId.value,
+      pageSize,
+      pageNum: currentPage.value
+    })
+    total.value = data.total
+    list.value = data.rows
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleTab = (val) => {
+  activeTabId.value = val
+  getCulturalRelicsList()
+}
+
+const handleSearch = () => {
+  currentPage.value = 1
+  getCulturalRelicsList()
+}
 
 function onClickCollection(id) {
   router.push({
     name: 'CollectionDetail',
-    query: {
+    params: {
       id,
     }
   })
 }
+
+onMounted(() => {
+  getTypeList()
+  getCulturalRelicsList()
+})
+
+watch(currentPage, () => {
+  getCulturalRelicsList()
+})
 </script>
 
 <style lang="less" scoped>
@@ -172,10 +236,10 @@ function onClickCollection(id) {
           color: #FFFFFF;
         }
         >button.search{
-          pointer-events: none;
           width: 40px;
           height: 40px;
           padding: 5px;
+          cursor: pointer;
           >img{
             width: 100%;
             height: 100%;
@@ -184,21 +248,31 @@ function onClickCollection(id) {
       }
     }
 
-    >.tab-bar{
+    .tab-bar{
+      --swiper-theme-color: #FFE794;
+      --swiper-pagination-bottom: 20px;
+      position: relative;
+      margin: 0 auto;
+      width: 80vw;
       height: 138px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      overflow: hidden;
       text-align: center;
-      gap: calc(184 / 1920 * 100vw);
-      >.tab-item {
+      ::v-deep .swiper-wrapper {
+        display: flex;
+        align-items: center;
+        height: 100%;
+      }
+      ::v-deep .swiper-slide {
+        flex-shrink: 0;
+      }
+      .tab-item {
         font-family: Source Han Sans CN, Source Han Sans CN;
         font-weight: 400;
         font-size: 24px;
         color: #474747;
         height: 38px;
       }
-      >.tab-item.active{
+      .tab-item.active{
         font-weight: bold;
         position: relative;
         z-index: 0;

src/views/about/ExhibitionView.vue

@@ -157,7 +157,7 @@ const iframeUrl = ref('')
 const showIframe = ref(false)
 
 function onClickSceneItem(item) {
-  iframeUrl.value = item.url
+  iframeUrl.value = process.env.VUE_APP_DEPLOY_ORIGIN + item.url
   showIframe.value = true
 }
 </script>

src/views/about/InfoView.vue

@@ -7,54 +7,55 @@
           text-cn="新闻资讯"
           text-en="NEWS AND INFORMATION"
         />
-        <div class="content">
+        <div v-loading="carouseLoading" class="content">
           <img
+            v-if="carouseList[activeNewsIdx]"
             class="photo"
-            :src="`${$env.BASE_URL}images/demo-photo-${newsPageIdx * 3 + activeNewsIdx}.jpg`"
+            :src="carouseList[activeNewsIdx].coverUrl"
             alt=""
             draggable="false"
-            @click="onClickNews(newsList[newsPageIdx * 3 + activeNewsIdx].id)"
+            @click="onClickNews(carouseList[activeNewsIdx].id)"
           >
           <ul class="list">
             <div
-              v-for="n in 3"
-              :key="n"
+              v-for="(n, index) in carouseList"
+              :key="n.id"
               class="list-item-wrap"
             >
               <li
                 class="list-item"
                 :class="{
-                  active: activeNewsIdx === n - 1,
+                  active: activeNewsIdx === index,
                 }"
-                @mouseenter="activeNewsIdx = n - 1"
-                @click="onClickNews(newsList[newsPageIdx * 3 + n - 1].id)"
+                @mouseenter="activeNewsIdx = index"
+                @click="onClickNews(n.id)"
               >
                 <div class="left">
                   <div class="month-day">
-                    {{ newsList[newsPageIdx * 3 + n - 1].date.substring(5, 10) }}
+                    {{ n.date.substring(5, 10) }}
                   </div>
                   <div class="year">
-                    {{ newsList[newsPageIdx * 3 + n - 1].date.substring(0, 4) }}
+                    {{ n.date.substring(0, 4) }}
                   </div>
                 </div>
                 <div class="splitter" />
                 <div class="right">
                   <div
                     class="title"
-                    :title="newsList[newsPageIdx * 3 + n - 1].title"
+                    :title="n.title"
                   >
-                    {{ newsList[newsPageIdx * 3 + n - 1].title }}
+                    {{ n.title }}
                   </div>
                   <div
                     class="desc"
-                    :title="newsList[newsPageIdx * 3 + n - 1].desc"
+                    :title="n.content"
                   >
-                    {{ newsList[newsPageIdx * 3 + n - 1].desc }}
+                    {{ n.content }}
                   </div>
                 </div>
               </li>
               <div
-                v-show="n !== 3"
+                v-show="index !== 3"
                 class="splitter"
               />
             </div>
@@ -70,7 +71,7 @@
           />
           <button
             :class="{
-              show: newsPageIdx < newsList.length / 3 - 1,
+              show: newsPageIdx < carouseList.length / 3 - 1,
             }"
             class="next"
             @click="newsPageIdx++"
@@ -78,22 +79,23 @@
         </div>
       </div>
       <div class="notification-area">
-        <TableTitle
+        <!-- <TableTitle
           class="title"
           text-cn="通知公告"
           text-en="NOTICE ANNOUNCEMENT"
         />
-        <div class="splitter" />
+        <div class="splitter" /> -->
+        <div style="height: 60px" />
         <ul
           class="table"
         >
           <li
-            v-for="(item, idx) in notificationList"
+            v-for="(item, idx) in list"
             :key="idx"
           >
             <div
               class="line"
-              @click="onClickNotification(item.id)"
+              @click="onClickNews(item.id)"
             >
               <div
                 class="key"
@@ -107,7 +109,6 @@
               </div>
               <span
                 class="value"
-                :title="item.desc"
               >{{ item.date }}</span>
             </div>
             <div class="line-splitter" />
@@ -122,9 +123,11 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"
+import { ref, onMounted, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
+import { formatDate, stripHtmlTags } from '@dage/utils'
+import { getNewsCarouselListApi, getNewsListApi } from '@/api'
 
 const route = useRoute()
 const router = useRouter()
@@ -132,23 +135,47 @@ const store = useStore()
 
 const $env = inject('$env')
 
-const newsList = staticConfig.newsList
 const newsPageIdx = ref(0)
 const activeNewsIdx = ref(0)
+const carouseLoading = ref(false)
+const carouseList = ref([])
+const list = ref([])
 
-const notificationList = staticConfig.notificationList
+const getCarouseList = async() => {
+  try {
+    carouseLoading.value = true
+    const data = await getNewsCarouselListApi()
+    carouseList.value = data.map(i => ({
+      ...i,
+      date: formatDate(new Date(Number(i.releaseTime)), 'YYYY-MM-DD'),
+      content: stripHtmlTags(i.content, 50)
+    }))
+  } finally {
+    carouseLoading.value = false
+  }
+}
 
-function onClickNews(id) {
-  router.push({
-    name: 'InfoDetail'
-  })
+const getList = async() => {
+  const data = await getNewsListApi()
+  list.value = data.map(i => ({
+    ...i,
+    date: formatDate(new Date(Number(i.releaseTime)), 'YYYY-MM-DD')
+  }))
 }
 
-function onClickNotification(id) {
+function onClickNews(id) {
   router.push({
-    name: 'InfoDetail'
+    name: 'InfoDetail',
+    params: {
+      id
+    }
   })
 }
+
+onMounted(() => {
+  getCarouseList()
+  getList()
+})
 </script>
 
 <style lang="less" scoped>