详情页数据查询后显示调整

hookehuyr
Commit e750d80826c0b9ffb7759d0dece0e2a820deaff7 e750d808 1 parent 7c2593f9
Showing 2 changed files with 154 additions and 91 deletions
src/views/bieyuan/info.vue
src/views/bieyuan/map.vue
--- a/src/views/bieyuan/info.vue
View file @e750d80
+++ b/src/views/bieyuan/info.vue
View file @e750d80
 <!--
  * @Date: 2024-09-15 22:08:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-21 13:20:20
+ * @LastEditTime: 2024-09-22 13:30:28
  * @FilePath: /map-demo/src/views/bieyuan/info.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="info-page">
-    <div style="position: relative;">
+    <div class="info-header-wrapper">
       <van-config-provider :theme-vars="themeVars">
         <van-swipe class="my-swipe" indicator-color="#DD7850" lazy-render :autoplay="5000">
           <van-swipe-item v-for="image in images" :key="image">
@@ -17,90 +17,89 @@
       </van-config-provider>
       <div class="header-z"></div>
     </div>
-    <!-- <div style="position: absolute; top: 12.5rem;"> -->
+    <div class="info-content-wrapper">
-    <div>
+      <div class="info-header">
-      <div class="info-content-wrapper">
+        <div>
-        <div class="info-header">
+          <p class="info-title">{{ page_details.name }}</p>
-          <div>
+          <p class="info-sub-title">{{ page_details.note }}</p>
-            <p class="info-title">选佛场</p>
-            <p class="info-sub-title">南楼2层</p>
-          </div>
-          <div @click="goTo()" class="info-btn">前往</div>
         </div>
-        <div class="van-hairline--bottom">
+        <div @click="goTo()" class="info-btn">前往</div>
-          <van-tabs ref="tabsRef" v-model:active="active" @click-tab="clickTab" color="#DD7850" title-active-color="#DD7850" sticky animated>
+      </div>
-            <van-tab title="介 绍">
+      <div class="van-hairline--bottom">
-              <div class="info-content">
+        <van-tabs ref="tabsRef" v-model:active="active" @click-tab="clickTab" color="#DD7850" title-active-color="#DD7850" sticky animated>
-                <p style="line-height: 1.75; padding: 0 0.85rem; color: #47525F;">选佛场是一个宗教活动场所，集禅堂与讲堂功能于一体。其设计仿制古代石窟样式，把古代人修行的场所“石窟”搬进室内。禅堂内的释迦牟尼佛像，仿麦积山石窟第44号特窟“东方的微笑”的造型。禅堂设计自然古朴，匠心独运，星光、烛光、月光三光辉映，营造出“一个人不孤单，一千人不喧闹”的宁静祥和的氛围。禅堂可容纳千人，开展讲经、禅修、法会等多种活动，提供礼佛、供灯、静坐等体验。</p>
+          <van-tab title="介 绍">
-                <div class="van-hairline--bottom" style="margin: 1rem 0;"></div>
+            <div class="info-content">
-                <div style="padding: 1rem;">
+              <!-- <p style="line-height: 1.75; padding: 0 0.85rem; color: #47525F;">选佛场是一个宗教活动场所，集禅堂与讲堂功能于一体。其设计仿制古代石窟样式，把古代人修行的场所“石窟”搬进室内。禅堂内的释迦牟尼佛像，仿麦积山石窟第44号特窟“东方的微笑”的造型。禅堂设计自然古朴，匠心独运，星光、烛光、月光三光辉映，营造出“一个人不孤单，一千人不喧闹”的宁静祥和的氛围。禅堂可容纳千人，开展讲经、禅修、法会等多种活动，提供礼佛、供灯、静坐等体验。</p>
-                  <div style="color: #DD7850;">•&nbsp;五方塔</div>
+              <div class="van-hairline--bottom" style="margin: 1rem 0;"></div>
-                  <div style="color: #47525F; margin-top: 1rem; line-height: 1.75;">禅堂外的草坪，安立着大小不一五座佛塔。信众可绕塔或悬挂风铃祝愿祈福，在肃静庄严的氛围中得到佛力加持，自净其意，心想事成。</div>
+              <div style="padding: 1rem;">
-                </div>
+                <div style="color: #DD7850;">•&nbsp;五方塔</div>
+                <div style="color: #47525F; margin-top: 1rem; line-height: 1.75;">禅堂外的草坪，安立着大小不一五座佛塔。信众可绕塔或悬挂风铃祝愿祈福，在肃静庄严的氛围中得到佛力加持，自净其意，心想事成。</div>
+              </div> -->
+              <div v-html="page_details.introduction"></div>
+            </div>
+          </van-tab>
+          <van-tab title="故 事">
+            <!-- <div style="padding: 0 1rem;">
+              <div style="padding: 1rem;">
+                <div style="color: #DD7850;">•&nbsp;选官何如选佛</div>
               </div>
-            </van-tab>
-            <van-tab title="故 事">
               <div style="padding: 0 1rem;">
-                <div style="padding: 1rem;">
+                <van-image width="100%" height="11rem" fit="cover" src="https://cdn.ipadbiz.cn/bieyuan/map/Mix_20230612_201951.png" />
-                  <div style="color: #DD7850;">•&nbsp;选官何如选佛</div>
-                </div>
-                <div style="padding: 0 1rem;">
-                  <van-image width="100%" height="11rem" fit="cover" src="https://cdn.ipadbiz.cn/bieyuan/map/Mix_20230612_201951.png" />
-                </div>
-                <div style="padding: 1rem;">
-                  <p style="color: #47525F; line-height: 1.75;">过去把禅堂叫作选佛场，意思是选择作佛的场所。这个典故与丹霞禅师有关。 <br />他原本是一个秀才，赴京赶考的途中遇到一位禅师，这位禅师跟他讲，选官何如选佛？考官还不如成佛利益更大。世间功名如过眼云烟，即便追求得到也是暂时利益，执著于此就会烦恼重重，甚至不断造业。而学佛修行，考佛就是要成佛，成就生命永恒的福祉。这是永久的利益，尽未来际的利益。每个生命原本具备觉悟的潜质，具有无尽的功德宝藏，取之不尽用之不竭。成佛，可以断除一切迷惑烦恼，可以彻底地开发我们生命的潜质，全然觉醒，这个利益无量无边。丹霞禅师深具慧根，一经点拨，马上出家。</p>
-                </div>
-                <div class="van-hairline--bottom" style="margin: 0 1rem;"></div>
               </div>
-              <div style="padding: 0 1rem;">
+              <div style="padding: 1rem;">
-                <div style="padding: 1rem;">
+                <p style="color: #47525F; line-height: 1.75;">过去把禅堂叫作选佛场，意思是选择作佛的场所。这个典故与丹霞禅师有关。 <br />他原本是一个秀才，赴京赶考的途中遇到一位禅师，这位禅师跟他讲，选官何如选佛？考官还不如成佛利益更大。世间功名如过眼云烟，即便追求得到也是暂时利益，执著于此就会烦恼重重，甚至不断造业。而学佛修行，考佛就是要成佛，成就生命永恒的福祉。这是永久的利益，尽未来际的利益。每个生命原本具备觉悟的潜质，具有无尽的功德宝藏，取之不尽用之不竭。成佛，可以断除一切迷惑烦恼，可以彻底地开发我们生命的潜质，全然觉醒，这个利益无量无边。丹霞禅师深具慧根，一经点拨，马上出家。</p>
-                  <div style="color: #DD7850;">•&nbsp;把洞窟搬进讲堂</div>
+              </div>
-                </div>
+              <div class="van-hairline--bottom" style="margin: 0 1rem;"></div>
-                <div style="padding: 0 1rem;">
+            </div>
-                  <van-image width="100%" height="11rem" fit="cover" src="https://cdn.ipadbiz.cn/bieyuan/map/Mix_20240815_211927.png" />
+            <div style="padding: 0 1rem;">
-                </div>
+              <div style="padding: 1rem;">
-                <div style="padding: 1rem;">
+                <div style="color: #DD7850;">•&nbsp;把洞窟搬进讲堂</div>
-                  <p style="color: #47525F; line-height: 1.75;">洞窟，是传统的佛教建筑形式，最早在印度盛行，古代僧人喜欢在崇山峻岭的幽僻处开凿洞窟，遁世修行。选佛场集禅堂与讲堂的功能于一体，把洞窟搬进讲堂，既有回归佛教本怀的宁静温暖，又体现出融入泰宁岩穴文化的祥和之气。</p>
-                </div>
-                <div class="van-hairline--bottom" style="margin:  0 1rem;"></div>
               </div>
-            </van-tab>
-            <van-tab title="体 验" id="tab-3">
               <div style="padding: 0 1rem;">
-                <div style="padding: 1rem;">
+                <van-image width="100%" height="11rem" fit="cover" src="https://cdn.ipadbiz.cn/bieyuan/map/Mix_20240815_211927.png" />
-                  <div style="color: #DD7850;">•&nbsp;供灯</div>
+              </div>
-                  <div style="color: #47525F; margin-top: 1rem; line-height: 1.75;">禅堂内自助供灯。</div>
+              <div style="padding: 1rem;">
-                </div>
+                <p style="color: #47525F; line-height: 1.75;">洞窟，是传统的佛教建筑形式，最早在印度盛行，古代僧人喜欢在崇山峻岭的幽僻处开凿洞窟，遁世修行。选佛场集禅堂与讲堂的功能于一体，把洞窟搬进讲堂，既有回归佛教本怀的宁静温暖，又体现出融入泰宁岩穴文化的祥和之气。</p>
-                <div style="padding: 0 1rem;">
-                  <van-image width="100%" height="11rem" fit="cover" src="https://cdn.ipadbiz.cn/bieyuan/map/Mix_20240815_211927.png" />
-                </div>
-                <div class="van-hairline--bottom" style="margin: 0 1rem;"></div>
               </div>
-              <div class="audio-wrapper">
+              <div class="van-hairline--bottom" style="margin:  0 1rem;"></div>
-                <div :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in audioList" :key="index">
+            </div> -->
-                  <div>{{ item.text }}</div>
+            <div class="info-content">
-                  <!-- <div :class="['audio-icon', play_audio_index === index ? 'click' : '']"></div> -->
+              <div v-html="page_details.story"></div>
-                  <van-icon @click="stopAudio(item, index)" v-if="item.play" size="2rem" name="stop-circle-o" color="#DD7850" />
+            </div>
-                  <van-icon v-else @click="playAudio(item, index)" size="2rem" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/audio_icon.png" />
+          </van-tab>
-                </div>
+          <van-tab title="体 验" id="tab-3">
+            <!-- <div style="padding: 0 1rem;">
+              <div style="padding: 1rem;">
+                <div style="color: #DD7850;">•&nbsp;供灯</div>
+                <div style="color: #47525F; margin-top: 1rem; line-height: 1.75;">禅堂内自助供灯。</div>
               </div>
               <div style="padding: 0 1rem;">
-                <img src="https://cdn.ipadbiz.cn/bieyuan/map/xcx.png" style="width: 100%;">
+                <van-image width="100%" height="11rem" fit="cover" src="https://cdn.ipadbiz.cn/bieyuan/map/Mix_20240815_211927.png" />
               </div>
-            </van-tab>
+              <div class="van-hairline--bottom" style="margin: 0 1rem;"></div>
-          </van-tabs>
+            </div> -->
-        </div>
+            <div class="info-content">
-      </div>
+              <div v-html="page_details.experience"></div>
-      <div style="display: flex; justify-content: center; margin: 3rem;">
+            </div>
-        <van-image
+            <div class="audio-wrapper">
-          width="3rem"
+              <div :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in audioList" :key="index">
-          height="3rem"
+                <div>{{ item.text }}</div>
-          fit="contain"
+                <!-- <div :class="['audio-icon', play_audio_index === index ? 'click' : '']"></div> -->
-          src="https://cdn.ipadbiz.cn/bieyuan/map/icon/scan_logo.png"
+                <van-icon @click="stopAudio(item, index)" v-if="item.play" size="2rem" name="stop-circle-o" color="#DD7850" />
-        />
+                <van-icon v-else @click="playAudio(item, index)" size="2rem" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/audio_icon.png" />
+              </div>
+            </div>
+            <!-- <div style="padding: 0 1rem;">
+              <img src="https://cdn.ipadbiz.cn/bieyuan/map/xcx.png" style="width: 100%;">
+            </div> -->
+          </van-tab>
+        </van-tabs>
       </div>
     </div>
-  </div>
+    <div class="info-logo">
+      <van-image width="3rem" height="3rem" fit="contain" src="https://cdn.ipadbiz.cn/bieyuan/map/icon/scan_logo.png" />
+    </div>
+    </div>
 </template>
 <script setup>
@@ -112,6 +111,8 @@ import { mainStore } from '@/store';
 import $ from 'jquery';
+import { mapAPI } from '@/api/map.js'
+
 const store = mainStore();
 const { audio_status, audio_entity } = storeToRefs(store);
@@ -123,6 +124,22 @@ const themeVars = ref({
   swipeIndicatorMargin: '1.5rem'
 });
+const props = defineProps({
+  info: Object,
+});
+
+const page_details = ref({});
+
+watch(
+  () => props.info,
+  (v) => {
+    // TODO：获取标记点详情进行后续处理
+    if (v.details.length) {
+      page_details.value = { ...v.details[0], position: v.position };
+    }
+  }
+)
+
 const images = ref([
   'https://cdn.ipadbiz.cn/bieyuan/map/swiper_img.png',
   'https://cdn.ipadbiz.cn/bieyuan/map/Mix_20230612_201951.png',
@@ -178,8 +195,19 @@ const stopAudio = (item, index) => {
 const audio = ref(new Audio());
-onMounted(() => {
+onMounted(async () => {
-})
+  // 通过ID查询到标记点详情
+  if (!props.info) {
+    let id = $route.query.id;
+    const { data } = await mapAPI({ i: id });
+    const raw_list = data.list[0].list; // 获取标记点列表
+    const marker_id = $route.query.marker_id;
+    const current_marker = raw_list.filter(item => item.id == marker_id)[0];
+    //
+    page_details.value = { ...current_marker.details[0], position: current_marker.position };
+    console.log("🚀 ~ file: info.vue:201 ~ onMounted ~ page_details.value:", page_details.value);
+  }
+});
 onUnmounted(() => { // 离开页面时关闭音频播放
   audio.value.pause();
@@ -244,17 +272,20 @@ defineExpose({
   height: 100vh;
   overflow: scroll;
   position: relative;
-  .header-z {
+  .info-header-wrapper {
-    position: absolute;
+    position: relative;
-    bottom: 0;
+    .header-z {
-    left: 0;
+      position: absolute;
-    right: 0;
+      bottom: 0;
-    height: 1rem;
+      left: 0;
-    box-shadow: rgba(241, 242, 248, 0.8) 0px -3px 20px 12px;
+      right: 0;
-    background-color: #f7f7f7;
+      height: 1rem;
-    margin: 0 1rem;
+      box-shadow: rgba(241, 242, 248, 0.8) 0px -3px 20px 12px;
-    border-top-left-radius: 0.5rem;
+      background-color: #f7f7f7;
-    border-top-right-radius: 0.5rem;
+      margin: 0 1rem;
+      border-top-left-radius: 0.5rem;
+      border-top-right-radius: 0.5rem;
+    }
   }
   .info-content-wrapper {
     box-shadow: 0px -3px 6px 0 rgba(241, 242, 248, 0.8);
@@ -290,6 +321,14 @@ defineExpose({
     }
     .info-content {
       padding: 1rem;
+      p {
+        line-height: 1.75;
+        padding: 0 0.85rem;
+        text-align: justify;
+        img {
+          width: 100%;
+        }
+      }
     }
     .audio-wrapper {
       padding: 1rem;
@@ -330,5 +369,10 @@ defineExpose({
       }
     }
   }
+  .info-logo {
+    display: flex;
+    justify-content: center;
+    margin: 3rem;
+  }
 }
 </style>
--- a/src/views/bieyuan/map.vue
View file @e750d80
+++ b/src/views/bieyuan/map.vue
View file @e750d80
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-21 12:03:00
+ * @LastEditTime: 2024-09-22 13:43:45
  * @FilePath: /map-demo/src/views/bieyuan/map.vue
  * @Description: 公众地图主体页面
 -->
@@ -42,7 +42,7 @@
             <button @click="show = false">关闭</button>
           </div>
         </template> -->
-        <page-info ref="pageInfo" @close-float="onCloseFloat" @route="onRoute"></page-info>
+        <page-info ref="pageInfo" :info="itemInfo" @close-float="onCloseFloat" @route="onRoute"></page-info>
         <!-- <div v-if="showClose" @click="closeFloatPanel" class="close-float-panel">
           <van-icon name="arrow-left" color="#FFF" size="1.5rem" />
         </div> -->
@@ -72,6 +72,12 @@
         </div>
       </div>
     </div>
+
+    <van-toast v-model:show="show_toast" style="padding: 0">
+      <template #message>
+        <p style="padding: 0.5rem 1rem;">{{ toast_text }}</p>
+      </template>
+    </van-toast>
   </div>
 </template>
@@ -217,6 +223,8 @@ export default {
       route_safe_marker: [],
       show_walk_route: true,
       open_current_location: true,
+      show_toast: false,
+      toast_text: '',
     }
   },
   async mounted() {
@@ -358,6 +366,14 @@ export default {
             // console.warn(e);
             this.itemInfo = entity_info[i];
+            // 详情为空提示
+            if (!this.itemInfo.details.length) {
+              this.show_toast = true;
+              this.toast_text = '该景点暂无详情'
+              return;
+            }
+
+
             // 打开浮动面板
             this.info_height = (0.45 * window.innerHeight);
             // 浮动面板样式
@@ -368,8 +384,8 @@ export default {
             this.map.setZoomAndCenter(this.zoom, this.itemInfo.position);
           })
         }
+        // TODO： ID问题看看实际名称叫什么
         // 导航路径
-        console.warn(entity_info[i]);
         let marker_id = this.$route.query.marker_id;
         if (marker_id) {
           this.$nextTick(() => {
@@ -615,7 +631,7 @@ export default {
       // 还原样式
       this.resetMarkStyle();*/
     },
-    scanQrcode() {
+    scanQrcode() { // 扫码跳转详情页
       wx.scanQRCode({
         needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
         scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
@@ -648,6 +664,7 @@ export default {
           path: '/bieyuan/info',
           query: {
             id: this.$route.query.id,
+            marker_id: this.itemInfo.id
           }
         })
       } else {
@@ -777,6 +794,8 @@ export default {
       console.warn(marker_id);
       // 模拟新增路线
       this.addSafeRoute(this.data_path_list[0]);
+      // 定位到当前位置中心
+      this.map.setZoomAndCenter(this.zoom, this.data_center);
     },
     handleLocation(status) { // 打开/关闭 当前定位
       if (status) {