Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
a9b2bbfb 1 parent dd7bb0d9

新增内容页

Inline Side-by-side
Showing 8 changed files with 253 additions and 10 deletions
......@@ -12,7 +12,7 @@ VITE_PROXY_PREFIX = /srv/
VITE_OUTDIR = map
# 是否开启调试
VITE_CONSOLE = 1
VITE_CONSOLE = 0
# appID相关
VITE_APPID=微信appID
......
......@@ -23,13 +23,19 @@ declare module '@vue/runtime-core' {
SvgIcon: typeof import('./src/components/Floor/svgIcon.vue')['default']
VanButton: typeof import('vant/es')['Button']
VanCol: typeof import('vant/es')['Col']
VanConfigProvider: typeof import('vant/es')['ConfigProvider']
VanDialog: typeof import('vant/es')['Dialog']
VanField: typeof import('vant/es')['Field']
VanFloatingPanel: typeof import('vant/es')['FloatingPanel']
VanIcon: typeof import('vant/es')['Icon']
VanImage: typeof import('vant/es')['Image']
VanOverlay: typeof import('vant/es')['Overlay']
VanPopup: typeof import('vant/es')['Popup']
VanRow: typeof import('vant/es')['Row']
VanSwipe: typeof import('vant/es')['Swipe']
VanSwipeItem: typeof import('vant/es')['SwipeItem']
VanTab: typeof import('vant/es')['Tab']
VanTabs: typeof import('vant/es')['Tabs']
VRViewer: typeof import('./src/components/VRViewer/index.vue')['default']
}
}
......
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-26 23:52:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-07 13:32:25
* @LastEditTime: 2024-09-18 10:48:23
* @FilePath: /map-demo/src/App.vue
* @Description:
-->
......
/*
* @Date: 2023-05-29 11:10:19
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-15 11:46:59
* @LastEditTime: 2024-09-18 09:38:42
* @FilePath: /map-demo/src/route.js
* @Description: 文件描述
*/
......@@ -62,4 +62,11 @@ export default [
title: '扫描',
},
},
{
path: '/bieyuan/info',
component: () => import('@/views/bieyuan/info.vue'),
meta: {
title: '详情页',
},
},
];
......
<!--
* @Date: 2024-09-15 22:08:49
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-18 14:17:43
* @FilePath: /map-demo/src/views/bieyuan/info.vue
* @Description: 文件描述
-->
<template>
<div class="info-page">
<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 in images" :key="image">
<van-image fit="cover" width="100%" height="15rem" :src="image" />
</van-swipe-item>
</van-swipe>
</van-config-provider>
</div>
<div class="info-content-wrapper">
<div class="info-header">
<div>
<p class="info-title">选佛场</p>
<p class="info-sub-title">南楼2层</p>
</div>
<div class="info-btn">前往</div>
</div>
<div class="van-hairline--bottom">
<van-tabs v-model:active="active" color="#DD7850" title-active-color="#DD7850" sticky>
<van-tab title="介 绍">
<div class="info-content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
</div>
</van-tab>
<van-tab title="故 事"></van-tab>
<van-tab title="体 验">
<div style="padding: 1rem;">
<div style="color: #DD7850;">•&nbsp;静心咖啡</div>
<div style="color: #47525F; margin-top: 1rem;">静心咖啡绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍</div>
</div>
<div class="audio-wrapper">
<div @click="playAudio(item, index)" :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in audioList" :key="index">
<div>{{ item.text }}</div>
<div :class="['audio-icon', play_audio_index === index ? 'click' : '']"></div>
</div>
</div>
<div style="width: 100%;">
<img src="https://cdn.ipadbiz.cn/bieyuan/map/xcx.png" style="width: 100%;">
</div>
</van-tab>
</van-tabs>
</div>
</div>
<div style="display: flex; justify-content: center; margin: 2rem 0;">
<van-image
width="3rem"
height="3rem"
fit="contain"
src="https://cdn.ipadbiz.cn/bieyuan/map/icon/scan_logo.png"
/>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const $route = useRoute();
const $router = useRouter();
const themeVars = ref({
swipeIndicatorInactiveBackground: '#fff',
});
const images = ref([
'https://cdn.ipadbiz.cn/bieyuan/map/swiper_img.png',
'https://cdn.ipadbiz.cn/bieyuan/map/_DL92427.png',
'https://cdn.ipadbiz.cn/bieyuan/map/swiper_img.png',
'https://cdn.ipadbiz.cn/bieyuan/map/swiper_img.png',
]);
const active = ref(2);
const play_audio_index = ref(null);
const audioList = ref([{
text: '5分钟观呼吸',
src: 'https://cdn.ipadbiz.cn/bieyuan/map/1130958712.mp3',
play: false,
}, {
text: '10分钟正念静坐',
src: 'https://cdn.ipadbiz.cn/bieyuan/map/1130958712.mp3',
play: false,
}, {
text: '15分钟正念静坐',
src: 'https://cdn.ipadbiz.cn/bieyuan/map/1130958712.mp3',
play: false,
}])
const playAudio = ({src}, index) => {
audio.value.src = src;
play_audio_index.value = index;
let play_status = audio.value.play() // 播放
if (play_status) {
console.warn('start');
play_status.then(() => {
console.warn('success');
}).catch((e) => {
// 失败
console.log('Operation is too fast, audio play fails')
})
}
}
const audio = ref(new Audio());
const audio_play = (src, index) => {
audio.value.src = src;
}
</script>
<style lang="less">
.info-page {
background-color: #EBEBEB;
height: 100vh;
overflow: scroll;
position: relative;
.info-content-wrapper {
// position: absolute;
// top: 14.9rem;
margin: 1rem;
margin-top: 0;
// padding: 1rem;
border-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.25rem;
}
.info-sub-title {
font-size: 0.85rem;
color: #A0A8B1;
}
.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 {
padding: 1rem;
}
.audio-wrapper {
padding: 1rem 0;
.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);
}
}
}
}
}
}
</style>
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-15 19:04:38
* @LastEditTime: 2024-09-18 09:49:17
* @FilePath: /map-demo/src/views/bieyuan/map.vue
* @Description: 公众地图主体页面
-->
......@@ -16,6 +16,12 @@
src="https://cdn.ipadbiz.cn/bieyuan/map/icon/scan@3x.png"
/>
</div>
<van-config-provider :theme-vars="themeVars">
<van-floating-panel v-model:height="info_height" :anchors="anchors" @height-change="onHeightChange">
<page-info></page-info>
</van-floating-panel>
</van-config-provider>
</div>
</template>
......@@ -28,6 +34,7 @@ import $ from 'jquery';
import { useRect } from '@vant/use';
import { mapAPI } from '@/api/map.js'
import wx from 'weixin-js-sdk'
import pageInfo from '@/views/bieyuan/info.vue'
const GPS = {
PI: 3.14159265358979324,
......@@ -86,7 +93,7 @@ const GPS = {
};
export default {
components: { },
components: { pageInfo },
data() {
return {
map: '',
......@@ -108,6 +115,11 @@ export default {
data_rotation: 0, // 接口获取-地图旋转角度
data_paths: {}, // 接口获取-地图导航路径
data_path_list: [], // 接口获取-地图导航路径
info_height: 0,
anchors: [0, Math.round(0.4 * window.innerHeight), Math.round(1 * window.innerHeight)],
themeVars: {
floatingPanelHeaderHeight: 0,
}
}
},
async mounted() {
......@@ -149,6 +161,10 @@ export default {
});
// 设置贴片地图
this.setTitleLayer();
//
setTimeout(() => {
this.info_height = Math.round(0.4 * window.innerHeight);
}, 2000);
},
watch: {
},
......@@ -517,6 +533,9 @@ export default {
// path: '/bieyuan/scan'
// })
},
onHeightChange ({ height }) {
console.warn('拖动完成', height);
}
}
}
</script>
......
<!--
* @Date: 2024-09-15 11:45:13
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-15 18:54:36
* @LastEditTime: 2024-09-18 11:15:56
* @FilePath: /map-demo/src/views/bieyuan/scan.vue
* @Description: 文件描述
-->
......
......@@ -118,10 +118,10 @@ export default ({ command, mode }) => {
host: '0.0.0.0',
port: viteEnv.VITE_PORT, // 本地服务端口
// strictPort: true, // 设为true时若端口已被占用则会直接退出, 而不是尝试下一个可用端口
https: {
key: fs.readFileSync(path.resolve(__dirname, 'keys/localhost+2-key.pem')),
cert: fs.readFileSync(path.resolve(__dirname, 'keys/localhost+2.pem')),
},
// https: {
// key: fs.readFileSync(path.resolve(__dirname, 'keys/localhost+2-key.pem')),
// cert: fs.readFileSync(path.resolve(__dirname, 'keys/localhost+2.pem')),
// },
// open: false, // 在服务器启动时自动在浏览器中打开应用程序. 当此值为字符串时, 会被当作URL的路径名.
// proxy: { // 代理
// '/srv/': {
......