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

hookehuyr
Commit e750d80826c0b9ffb7759d0dece0e2a820deaff7 e750d808 1 parent 7c2593f9
Showing 2 changed files with 89 additions and 26 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,13 +17,11 @@
       </van-config-provider>
       <div class="header-z"></div>
     </div>
-    <!-- <div style="position: absolute; top: 12.5rem;"> -->
-    <div>
     <div class="info-content-wrapper">
       <div class="info-header">
         <div>
-            <p class="info-title">选佛场</p>
+          <p class="info-title">{{ page_details.name }}</p>
-            <p class="info-sub-title">南楼2层</p>
+          <p class="info-sub-title">{{ page_details.note }}</p>
         </div>
         <div @click="goTo()" class="info-btn">前往</div>
       </div>
@@ -31,16 +29,17 @@
         <van-tabs ref="tabsRef" v-model:active="active" @click-tab="clickTab" color="#DD7850" title-active-color="#DD7850" sticky animated>
           <van-tab title="介 绍">
             <div class="info-content">
-                <p style="line-height: 1.75; padding: 0 0.85rem; color: #47525F;">选佛场是一个宗教活动场所，集禅堂与讲堂功能于一体。其设计仿制古代石窟样式，把古代人修行的场所“石窟”搬进室内。禅堂内的释迦牟尼佛像，仿麦积山石窟第44号特窟“东方的微笑”的造型。禅堂设计自然古朴，匠心独运，星光、烛光、月光三光辉映，营造出“一个人不孤单，一千人不喧闹”的宁静祥和的氛围。禅堂可容纳千人，开展讲经、禅修、法会等多种活动，提供礼佛、供灯、静坐等体验。</p>
+              <!-- <p style="line-height: 1.75; padding: 0 0.85rem; color: #47525F;">选佛场是一个宗教活动场所，集禅堂与讲堂功能于一体。其设计仿制古代石窟样式，把古代人修行的场所“石窟”搬进室内。禅堂内的释迦牟尼佛像，仿麦积山石窟第44号特窟“东方的微笑”的造型。禅堂设计自然古朴，匠心独运，星光、烛光、月光三光辉映，营造出“一个人不孤单，一千人不喧闹”的宁静祥和的氛围。禅堂可容纳千人，开展讲经、禅修、法会等多种活动，提供礼佛、供灯、静坐等体验。</p>
               <div class="van-hairline--bottom" style="margin: 1rem 0;"></div>
               <div style="padding: 1rem;">
                 <div style="color: #DD7850;">•&nbsp;五方塔</div>
                 <div style="color: #47525F; margin-top: 1rem; line-height: 1.75;">禅堂外的草坪，安立着大小不一五座佛塔。信众可绕塔或悬挂风铃祝愿祈福，在肃静庄严的氛围中得到佛力加持，自净其意，心想事成。</div>
-                </div>
+              </div> -->
+              <div v-html="page_details.introduction"></div>
             </div>
           </van-tab>
           <van-tab title="故 事">
-              <div style="padding: 0 1rem;">
+            <!-- <div style="padding: 0 1rem;">
               <div style="padding: 1rem;">
                 <div style="color: #DD7850;">•&nbsp;选官何如选佛</div>
               </div>
@@ -63,10 +62,13 @@
                 <p style="color: #47525F; line-height: 1.75;">洞窟，是传统的佛教建筑形式，最早在印度盛行，古代僧人喜欢在崇山峻岭的幽僻处开凿洞窟，遁世修行。选佛场集禅堂与讲堂的功能于一体，把洞窟搬进讲堂，既有回归佛教本怀的宁静温暖，又体现出融入泰宁岩穴文化的祥和之气。</p>
               </div>
               <div class="van-hairline--bottom" style="margin:  0 1rem;"></div>
+            </div> -->
+            <div class="info-content">
+              <div v-html="page_details.story"></div>
             </div>
           </van-tab>
           <van-tab title="体 验" id="tab-3">
-              <div style="padding: 0 1rem;">
+            <!-- <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>
@@ -75,6 +77,9 @@
                 <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="info-content">
+              <div v-html="page_details.experience"></div>
             </div>
             <div class="audio-wrapper">
               <div :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in audioList" :key="index">
@@ -84,21 +89,15 @@
                 <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;">
+            <!-- <div style="padding: 0 1rem;">
               <img src="https://cdn.ipadbiz.cn/bieyuan/map/xcx.png" style="width: 100%;">
-              </div>
+            </div> -->
           </van-tab>
         </van-tabs>
       </div>
     </div>
-      <div style="display: flex; justify-content: center; margin: 3rem;">
+    <div class="info-logo">
-        <van-image
+      <van-image width="3rem" height="3rem" fit="contain" src="https://cdn.ipadbiz.cn/bieyuan/map/icon/scan_logo.png" />
-          width="3rem"
-          height="3rem"
-          fit="contain"
-          src="https://cdn.ipadbiz.cn/bieyuan/map/icon/scan_logo.png"
-        />
-      </div>
     </div>
     </div>
 </template>
@@ -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,6 +272,8 @@ defineExpose({
   height: 100vh;
   overflow: scroll;
   position: relative;
+  .info-header-wrapper {
+    position: relative;
     .header-z {
       position: absolute;
       bottom: 0;
@@ -256,6 +286,7 @@ defineExpose({
       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);
     margin: 1rem;
@@ -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) {