把别院的详情做搬出来作为通用的详情页-Bob需求

 /*
 /*
  * @Date: 2023-05-29 11:10:19
  * @Date: 2023-05-29 11:10:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-01-23 16:22:10
+ * @LastEditTime: 2025-01-26 09:55:58
  * @FilePath: /map-demo/src/route.js
  * @FilePath: /map-demo/src/route.js
  * @Description: 文件描述
  * @Description: 文件描述
  */
  */
@@ -70,6 +70,13 @@ export default [
     },
     },
   },
   },
   {
   {
+    path: '/info',
+    component: () => import('@/views/info.vue'),
+    meta: {
+      title: '详情页',
+    },
+  },
+  {
     path: '/map_cutter',
     path: '/map_cutter',
     name: '瓦片切图工具',
     name: '瓦片切图工具',
     component: () => import('@/views/mapCutter.vue'),
     component: () => import('@/views/mapCutter.vue'),

+<!--
+ * @Date: 2024-09-15 22:08:49
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-11-06 11:49:42
+ * @FilePath: /map-demo/src/views/bieyuan/info.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="info-page">
+    <div class="info-header-wrapper">
+      <div v-if="showBack && page_details.banner?.length" style="position: absolute; top: 1rem; left: 0.5rem; z-index: 9;">
+        <van-icon name="arrow-left" color="white" size="1.75rem" @click="goBack()" />
+      </div>
+      <van-config-provider :theme-vars="themeVars">
+        <van-swipe class="my-swipe" indicator-color="#DD7850" lazy-render :autoplay="5000">
+          <van-swipe-item v-for="(image, index) in page_details.banner" :key="index" style="position: relative;">
+            <van-image fit="cover" width="100%" :height="img_height" :src="image" @click="onClickImg(index)" />
+            <img src="https://cdn.ipadbiz.cn/bieyuan/map/icon/pageShade@3x.png" style="width: 100%; height: 5rem; position: absolute; right: 0; left: 0; bottom: 0;" alt="">
+          </van-swipe-item>
+        </van-swipe>
+      </van-config-provider>
+      <div class="header-z"></div>
+    </div>
+    <div class="info-content-wrapper">
+      <div class="info-header">
+        <div style="display: flex; justify-content: space-between;">
+          <p class="info-title">{{ page_details.name }}</p>
+          <div style="display: flex;">
+            <div @click="onClickAudioList" style="margin-right: 0.75rem;">
+              <van-icon v-if="!audio_list_height" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/%E8%AF%AD%E9%9F%B31@3x.png" size="1.65rem" />
+              <van-icon v-else name="https://cdn.ipadbiz.cn/bieyuan/map/icon/%E8%AF%AD%E9%9F%B32@3x.png" size="1.65rem" />
+            </div>
+            <div v-if="page_details.path?.length > 1" @click="goTo()" class="info-btn">前往</div>
+          </div>
+        </div>
+        <div class="info-sub-title">{{ page_details.note }}</div>
+      </div>
+      <div id="tab-wrapper" style="margin-top: 0.5rem;">
+        <van-config-provider :theme-vars="themeVars">
+          <van-tabs ref="tabsRef" v-model:active="active" @click-tab="clickTab" color="#DD7850" title-active-color="#DD7850" title-inactive-color="#DD7850" :shrink="show_shrink" sticky animated>
+            <van-tab title="介 绍" v-if="page_details.introduction">
+              <div class="info-content">
+                <div id="introduction" v-html="page_details.introduction" style="padding: 0 1rem;"></div>
+              </div>
+            </van-tab>
+            <van-tab title="故 事" v-if="page_details.story">
+              <div class="info-content">
+                <div id="story" v-html="page_details.story" style="padding: 0 1rem;"></div>
+              </div>
+            </van-tab>
+            <van-tab title="体 验" v-if="page_details.experience">
+              <div class="info-content">
+                <div id="experience" v-html="page_details.experience" style="padding: 0 1rem;"></div>
+              </div>
+              <div v-if="page_details.experience_audio.length" class="audio-wrapper">
+                <div @click="toggleHandleAudio(item, index)" :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in page_details.experience_audio" :key="index">
+                  <div>{{ item.description }}</div>
+                  <van-icon @click.stop="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>
+            </van-tab>
+          </van-tabs>
+        </van-config-provider>
+      </div>
+    </div>
+    <!-- <div class="info-logo" :style="{ marginBottom: audio_list_height ? `${audio_list_height * 1.5}px` : '3rem' }">
+      <van-image width="3rem" height="3rem" fit="contain" src="https://cdn.ipadbiz.cn/bieyuan/map/icon/scan_logo.png" />
+    </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>
+
+    <van-image-preview v-model:show="show_preview" :images="preview_images" @change="onChange" doubleScale>
+      <template v-slot:index>第{{ index + 1 }}张</template>
+    </van-image-preview>
+
+    <van-back-top />
+
+    <audio-play-list :height="audio_list_height" :status="audio_status" @close="onCloseAudioList" @status="onStatusAudioList"></audio-play-list>
+    </div>
+</template>
+
+<script setup>
+import { ref, watch, watchEffect } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { showImagePreview } from 'vant';
+import { storeToRefs } from 'pinia'
+import audioPlayList from '@/components/audioList.vue'
+import { mainStore, useTitle } from '@/utils/generatePackage'
+import wx from 'weixin-js-sdk';
+import $ from 'jquery';
+
+import { mapAPI } from '@/api/map.js'
+
+const store = mainStore();
+const { audio_status, audio_entity, audio_list_status, audio_list_entity } = storeToRefs(store);
+
+const $route = useRoute();
+const $router = useRouter();
+
+const themeVars = ref({
+  swipeIndicatorInactiveBackground: '#fff',
+  swipeIndicatorMargin: '1.5rem',
+  tabFontSize: '0.95rem',
+});
+
+const props = defineProps({
+  info: Object,
+  height: Number
+});
+
+const page_details = ref({});
+
+watch(
+  () => props.info,
+  (v) => {
+    if (v.details.length) {
+      page_details.value = { ...v.details[0], position: v.position, path: v.path };
+      // 获取浏览器可视范围的高度
+      $('.info-page').height(props.height + 'px');
+    }
+  }
+)
+
+const images = ref([
+  'https://cdn.ipadbiz.cn/bieyuan/map/swiper_img.png',
+  'https://cdn.ipadbiz.cn/bieyuan/map/Mix_20230612_201951.png',
+  'https://cdn.ipadbiz.cn/bieyuan/map/Mix_20240815_211927.png',
+]);
+
+const active = ref(0);
+const play_audio_index = ref(null);
+
+// const audioList = ref([{
+//   text: '5分钟观呼吸',
+//   src: 'https://cdn.ipadbiz.cn/bieyuan/map/audio/%E6%AD%A3%E5%BF%B5%E5%91%BC%E5%90%B8%EF%BC%8810%E5%88%86%E9%92%9F%EF%BC%89.mp3',
+//   play: false,
+// }, {
+//   text: '10分钟正念静坐',
+//   src: 'https://cdn.ipadbiz.cn/bieyuan/map/audio/%E5%8D%81%E5%88%86%E9%92%9F%E6%AD%A3%E5%BF%B5%E9%9D%99%E5%9D%9020210510.mp3',
+//   play: false,
+// }, {
+//   text: '15分钟正念静坐',
+//   src: 'https://cdn.ipadbiz.cn/bieyuan/map/audio/%E5%8D%81%E5%88%86%E9%92%9F%E6%AD%A3%E5%BF%B5%E9%9D%99%E5%9D%9020210510.mp3',
+//   play: false,
+// }])
+const toggleHandleAudio = (item, index) => { // 切换播放或者暂停操作
+  if (item.play) {
+    stopAudio(item, index);
+  } else {
+    playAudio(item, index);
+  }
+}
+
+const playAudio = (item, index) => {
+  page_details.value.experience_audio.forEach(item => item.play = false);
+  audio.value.src = item.src;
+  // 后台有播放器运行时，先暂停
+  if (audio_list_status.value === 'play'){
+    audio_list_entity.value.pause();
+  }
+  play_audio_index.value = index;
+  let play_status = audio.value.play() // 播放
+  if (play_status) {
+    play_status.then(() => {
+      item.play = true;
+      // 存放到pinia里面控制
+      store.changeAudio(audio.value);
+      store.changeAudioSrc(audio.value.src);
+      store.changeAudioStatus('play');
+    }).catch((e) => {
+      // 失败
+      console.log('Operation is too fast, audio play fails')
+    })
+  }
+}
+
+const stopAudio = (item, index) => {
+  item.play = false;
+  audio.value.pause();
+}
+
+const audio = ref(new Audio());
+const img_height = ref('15rem');
+const scrollTop = ref(0);
+
+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, path: current_marker.path };
+    // 富文本转义, 分割线样式转换
+    page_details.value.introduction = page_details.value.introduction?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
+    page_details.value.story = page_details.value.story?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
+    page_details.value.experience = page_details.value.experience?.replace(/\<hr\>/g, '<div class="van-hairline--bottom" style="margin: 1rem 0;"></div>')
+  }
+  // 介绍栏目，图片点击事件
+  var imgs = $('#introduction').find('img');
+  // 图片点击事件
+  imgs.each(function(index, img) {
+    $(img).on('click', function (e) {
+        showImagePreview({
+          images: [$(img).attr('src')],
+          startPosition: 0,
+          showIndex: false,
+          onClose: () => {
+            // console.log('close');
+          }
+        })
+    });
+    // 图片有2个像素的圆角
+    $(img).css('border-radius', '5px');
+  });
+  // 获取屏幕宽度，设置高度4:3
+  // 获取屏幕的宽度
+  var screenWidth = $(window).width();
+  // 计算4:3比例的高度
+  var screenHeight = screenWidth * 3 / 4;
+  // 设置容器的高度
+  img_height.value = screenHeight + 'px';
+  //
+  nextTick(() => {
+    $('.info-page').on('scroll', (evt) => {
+      scrollTop.value = $(evt.currentTarget).scrollTop(); // 获取滚动的垂直距离
+    })
+  })
+  // 如果是从浮动窗口点击进来音频播放，自动打开
+  if ($route.query.source === 'click_audio') {
+    setTimeout(() => {
+      audio_list_height.value = (0.2 * window.innerHeight);
+      // 修改当前路由参数，避免刷新再次播放
+      $router.push({
+        query: {
+          ...$route.query,
+          source: ''
+        }
+      });
+    }, 500);
+  }
+  // 地图标题
+  document.title = page_details.value.name;
+  // 微信分享
+  const shareData = {
+    title: page_details.value.name, // 分享标题
+    desc: '别院详情', // 分享描述
+    link: location.origin + location.pathname + location.hash, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
+    imgUrl: '', // 分享图标
+    success: function () {
+      console.warn('设置成功');
+    }
+  }
+  // 分享好友（微信好友或qq好友）
+  wx.updateAppMessageShareData(shareData);
+  // 分享到朋友圈或qq空间
+  wx.updateTimelineShareData(shareData);
+  // 分享到腾讯微博
+  wx.onMenuShareWeibo(shareData);
+});
+
+// watchEffect(
+//   () => useTitle(page_details.value.name) // 地图标题
+// )
+
+onUnmounted(() => { // 离开页面时关闭音频播放
+  audio.value.pause();
+  store.changeAudioStatus('pause');
+})
+
+const audio_play = (src, index) => {
+  audio.value.src = src;
+}
+
+const outerStopAudio = () => {
+  audio.value.pause();
+}
+
+const emit = defineEmits(["closeFloat", 'route']);
+
+const show_toast = ref(false);
+const toast_text = ref('');
+
+const goTo = () => { // 打开标记地图显示
+  // 没有关联导航提示
+  if (page_details.value.path.length <= 1) {
+    show_toast.value = true;
+    toast_text.value = '该标记点没有关联导航';
+    return;
+  }
+  //
+  if ($router.currentRoute.value.path === '/bieyuan/info') { // 详情页
+    $router.push({
+      path: '/bieyuan/map',
+      query: {
+        id: $route.query.id,
+        marker_id: $route.query.marker_id
+      }
+    })
+  } else { // 地图页
+    //
+    emit("closeFloat", false);
+    //
+    emit("route", {name: '参观路径', path: page_details.value.path});
+  }
+}
+
+const goBack = () => { // 返回首页
+  $router.push({
+    path: '/bieyuan/map',
+    query: {
+      id: $route.query.id,
+    }
+  })
+}
+
+const showBack = computed(() => $router.currentRoute.value.path === '/bieyuan/info');
+
+const voicePause = () => {
+  audio.value.pause();
+  store.changeAudioStatus('pause');
+}
+
+const tabsRef = ref(null);
+const clickTab = (evt) => { // 标签切换
+  tabsRef.value.resize();
+  nextTick(() => {
+    if (evt.title === '介 绍') { // 介绍
+      var imgs = $('#introduction').find('img');
+    }
+    if (evt.title === '故 事') { // 故事
+      var imgs = $('#story').find('img');
+    }
+    if (evt.title === '体 验') { // 体验
+      var imgs = $('#experience').find('img');
+    }
+    // 图片点击事件
+    imgs.each(function(index, img) {
+      $(img).on('click', function (e) {
+          showImagePreview({
+            images: [$(img).attr('src')],
+            startPosition: 0,
+            showIndex: false,
+            onClose: () => {
+              // console.log('close');
+            }
+          })
+      })
+      // 图片有5个像素的圆角
+      $(img).css('border-radius', '5px');
+    });
+    // 滚动高度大于tabs高度后才滚动到指定高度
+    let offsetTop = $('#tab-wrapper')[0].offsetTop;
+    if (scrollTop.value >= offsetTop) {
+      $('.info-page').scrollTop(offsetTop);
+    }
+  });
+}
+
+watch(
+  () => audio_status.value,
+  (v) => {
+    if (v === 'pause') {
+      voicePause();
+      page_details.value.experience_audio?.forEach(item => item.play = false);
+    }
+  },
+  { immediate: true }
+);
+
+defineExpose({
+  outerStopAudio
+})
+
+
+const show_preview = ref(false);
+const index = ref(0);
+const preview_images = [];
+const onChange = (newIndex) => {
+  index.value = newIndex;
+};
+
+const onClickImg = (idx) => {
+  showImagePreview({
+    images: page_details.value.banner,
+    startPosition: idx,
+    showIndex: true,
+    onClose: () => {
+      // console.log('close');
+    }
+  })
+};
+
+const show_shrink = computed(() => {
+  // 统计非空字段的个数
+  let filledFields = 0;
+
+  if (page_details.value.introduction) filledFields++;
+  if (page_details.value.story) filledFields++;
+  if (page_details.value.experience) filledFields++;
+
+  // 判断是否只有一个字段有值
+  if (filledFields === 1) {
+    return true;
+  }
+  return false;
+});
+
+const audio_list_height = ref(0);
+
+const onClickAudioList = () => {
+  if ($('.info-page').height() < $(window).height()) { // 在浮动模式下点击音频列表
+    // 打开页面
+    $router.push({
+      path: '/bieyuan/info',
+      query: {
+        id: $route.query.id,
+        marker_id: props.info.id,
+        source: 'click_audio'
+      }
+    });
+  } else { // 详情页内点击
+    audio_list_height.value = (0.2 * window.innerHeight);
+  }
+}
+
+const onCloseAudioList = () => {
+  audio_list_height.value = 0;
+}
+
+// const show_audio = ref(true);
+
+const onStatusAudioList = (status) => { // 音频列表组件，状态改变
+  page_details.value.experience_audio?.forEach(item => item.play = false);
+  audio.value.pause();
+  play_audio_index.value = null;
+  store.changeAudioStatus('pause');
+  // // 反馈播放列表数量为空时，隐藏图标
+  // if (status === 'none') {
+  //   show_audio.value = false;
+  // }
+}
+</script>
+
+<style lang="less">
+.info-page {
+  background-color: #EBEBEB;
+  height: 100vh;
+  overflow: scroll;
+  position: relative;
+  .info-header-wrapper {
+    position: relative;
+    min-height: 2rem;
+    .header-z {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 1rem;
+      // box-shadow: rgba(241, 242, 248, 0.6) 0px -3px 25px 15px;
+      // background-color: #f7f7f7;
+      background-color: #fff;
+      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);
+    margin: 1rem;
+    margin-top: 0;
+    // padding: 1rem;
+    border-bottom-left-radius: 0.5rem;
+    border-bottom-right-radius: 0.5rem;
+    background-color: white;
+    .info-header {
+      padding: 1rem 2rem 0;
+      // display: flex;
+      // justify-content: space-between;
+      // align-items: center;
+      .info-title {
+        font-size: 1.25rem;
+        margin-bottom: 0.5rem;
+      }
+      .info-sub-title {
+        font-size: 0.85rem;
+        color: #A0A8B1;
+        line-height: 1.75;
+      }
+      .info-btn {
+        width: 3rem;
+        height: 1.5rem;
+        border: 1px solid #DD7850;
+        color: #DD7850;
+        border-radius: 0.8rem;
+        font-size: 0.85rem;
+        text-align: center;
+        line-height: 1.5rem;
+      }
+    }
+    .info-content {
+      color: #47525F;
+      padding: 1rem;
+      line-height: 1.75;
+      p {
+        line-height: 1.75;
+        // padding: 0 0.85rem;
+        text-align: justify;
+        img {
+          width: 100%;
+        }
+      }
+    }
+    .audio-wrapper {
+      padding: 1rem;
+      .audio-item {
+        color: #47525F;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 1rem;
+        background-color: #FFF;
+        border-radius: 0.25rem;
+        margin: 1rem;
+        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
+        &.click {
+          border: 1px solid #DD7850;
+        }
+        .audio-icon {
+          width: 2rem;
+          height: 2rem;
+          background-image: url('https://cdn.ipadbiz.cn/bieyuan/map/icon/audio_icon.png'); /* 使用上传的图标 */
+          background-size: cover;
+          &.click {
+            animation: pulse 1.5s infinite;
+          }
+        }
+
+        @keyframes pulse {
+          0% {
+            transform: scale(1);
+          }
+          50% {
+            transform: scale(1.2);
+          }
+          100% {
+            transform: scale(1);
+          }
+        }
+      }
+    }
+  }
+  .info-logo {
+    display: flex;
+    justify-content: center;
+    margin: 3rem;
+  }
+
+  .van-tabs__wrap {
+    border-bottom: 1px solid #F3F3F3;
+  }
+
+  .van-tabs__nav--line.van-tabs__nav--shrink {
+    padding-left: 2rem;
+  }
+}
+
+.van-back-top {
+  background-color: #DD7850;
+}
+</style>