Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
e750d808 1 parent 7c2593f9

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

Inline Side-by-side
Showing 2 changed files with 89 additions and 26 deletions
<!--
* @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-sub-title">南楼2层</p>
<p class="info-title">{{ page_details.name }}</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;">
<van-image
width="3rem"
height="3rem"
fit="contain"
src="https://cdn.ipadbiz.cn/bieyuan/map/icon/scan_logo.png"
/>
</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>
......@@ -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>
......
<!--
* @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) {
......