Merge branch 'master' of http://192.168.0.115:3000/renyicun/NanjingMuseumWuJinZang-PC

src/components/PaintingInfoBox.vue

@@ -71,9 +71,13 @@ const FormatAuthorDesc = computed(() => {
 })
 
 onMounted(() => {
-  if (route.query.state) {
-    curState.value = route.query.state
+  // if (route.query.state) {
+  //   curState.value = route.query.state
+  // }
+  if (props.state) {
+    curState.value = props.state
   }
+  // console.log('组件里面', e)
 })
 
 const exChangeFu = () => {

src/router/index.js

@@ -6,6 +6,7 @@ import BambooList from '../views/BambooList.vue'
 import PoemList from '../views/PoemList.vue'
 import PaintingList from '../views/PaintingList.vue'
 import PaintingDetail from '../views/PaintingDetail'
+import BambooBookView from '../views/BambooBookView.vue'
 
 // import store from '@/store/index.js'
 
@@ -51,6 +52,12 @@ const routes = [
     component: PaintingDetail,
     // component: TEXT,
   },
+  // 竹谱
+  {
+    path: '/bambooBook',
+    name: 'BambooBook',
+    component: BambooBookView,
+  },
 ]
 
 const router = createRouter({

src/views/BambooBookView.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { useRouter } from 'vue-router'
+const router = useRouter()
+</script>
+
+<template>
+  <div class="home">
+    <BtnBack @click="router.back()" />
+  </div>
+</template>
+
+<style lang='less' scoped>
+.home{
+  width: 100%;
+  height: 100%;
+  background: url(@/assets/images/zhupu-bg.png);
+  background-size: 100% 100%;
+  // background-position: top left;
+}
+</style>

src/views/HomeView.vue

@@ -7,6 +7,7 @@ import useRollFu from "../rollFu.js"
 
 import HotspotDetail3 from "@/views/HotspotDetail3.vue"
 import HotspotDetail1 from "@/views/HotspotDetail1.vue"
+import PaintingDetail from '@/views/PaintingDetail.vue'
 
 const store = useStore()
 const router = useRouter()
@@ -37,6 +38,10 @@ const isShowVideoFadeToNextPage = ref(false)
 const isShowSkip = ref(false)
 const videoFadeToNextPageEl = ref(null)
 
+const paintingState = ref('1')
+const isShowPaintingDetial = ref(false)
+
+
 const longTitleText = computed(() => {
   return curPageIndex.value == 1
     ? "三竿修竹"
@@ -155,9 +160,11 @@ onMounted(() => {
       <div
         class="page2-box"
         @click="
-          () => {
-            router.push('/painting-detail?idx=home');
-          }
+          // () => {
+          //   router.push('/painting-detail?idx=home');
+          // }
+          isShowPaintingDetial =true,
+          paintingState = '1'
         "
       >
         <img
@@ -170,9 +177,11 @@ onMounted(() => {
         class="page2-box"
         style="margin-top: 10px"
         @click="
-          () => {
-            router.push('/painting-detail?idx=home&state=2');
-          }
+          // () => {
+          //   router.push('/painting-detail?idx=home&state=2');
+          // }
+          isShowPaintingDetial =true,
+          paintingState = '2'
         "
       >
         <img
@@ -284,6 +293,15 @@ onMounted(() => {
       :is-show="isShowOperationTip"
     />
 
+    <!-- 画作详情 -->
+    <PaintingDetail
+      v-if="isShowPaintingDetial"
+      class="painting-detail"
+      :idx="'home'"
+      :state="paintingState"
+      @close="isShowPaintingDetial = false"
+    />
+
     <!-- 文字介绍 -->
     <div
       class="text-box"
@@ -520,6 +538,15 @@ onMounted(() => {
     top: 50%;
     transform: translateY(-50%);
   }
+  >.painting-detail{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 30;
+
+  }
 
   > .text-box {
     max-width: 450px;

src/views/PaintingDetail.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, inject } from 'vue'
+import { onMounted, inject, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import PaintingDetailBox from '@/components/PaintingDetailBox.vue'
 import paintingInfoBox from '@/components/PaintingInfoBox.vue'
@@ -7,6 +7,30 @@ import paintingInfoBox from '@/components/PaintingInfoBox.vue'
 const route = useRoute()
 const router = useRouter()
 
+// 可当普通组件传入或者当作路由界面使用
+const usageState = computed(() =>{
+  if (route.query.idx) {
+    return 'newPage'
+  }
+  return 'component'
+})
+
+// 当组件使用时需要传入的参数
+const props = defineProps({
+  // 画作id(和路由参数一样)
+  idx: {
+    type: String,
+    default: '0',
+  },
+  // 状态
+  state: {
+    type: String,
+    default: '1',
+  },
+})
+
+// 返回按钮触发的行为
+const emit = defineEmits(['close'])
 
 const $env = inject("$env")
 
@@ -23,10 +47,23 @@ const getPaintingSize = (raw) => {
   }
 }
 
+const realState = computed(() => {
+  if (props.state === '2' || route.query.state === '2') {
+    return 2
+  }
+  return 1
+})
+
 //  idx 传入下标index
-const paintingInfo = route.query.idx == 'home' ? configExcel['首页画作'][0] : configExcel['画作'][route.query.idx]
+const paintingInfo = route.query.idx == 'home' || props.idx == 'home' ? configExcel['首页画作'][0] : configExcel['画作'][usageState.value == 'newPage' ? route.query.idx : props.idx]
+// const paintingInfo = route.query.idx == 'home' ? configExcel['首页画作'][0] : configExcel['画作'][route.query.idx]
 onMounted(() => {
-  console.log(paintingInfo)
+  // if (usageState.value == 'newPage') {
+  //   paintingInfo = route.query.idx == 'home' ? configExcel['首页画作'][0] : configExcel['画作'][route.query.idx]
+  // } else if (usageState.value == 'component') {
+  //   paintingInfo = props.idx == 'home' ? configExcel['首页画作'][0] : configExcel['画作'][props.idx]
+  // }
+  console.log('看看检索', props.state == '2', realState.value)
 })
 </script>
 
@@ -47,9 +84,9 @@ onMounted(() => {
       :painting-desc="paintingInfo['简介']"
       :author-desc="paintingInfo['作者简介']"
       :size="paintingInfo['尺寸'] ? getPaintingSize(paintingInfo['尺寸']) : ''"
-      :state="route.query.state ? Number(route.query.state) : 1"
+      :state="realState"
     />
-    <BtnBack @click="() => route.query.idx == 'home' ? router.replace('/?page=4'):router.back()" />
+    <BtnBack @click="() => usageState ==='component' ? emit('close'):router.back()" />
   </div>
 </template>