124 lines
3.7 KiB
Vue
124 lines
3.7 KiB
Vue
<template>
|
|
<div>
|
|
<div class="topbar" ref="topbar">
|
|
<van-nav-bar left-arrow :title="$route.meta.title" v-if="$route.meta.showNavBar" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
|
|
<van-search v-model="keyword" show-action action-text="搜索" placeholder="请输入寺院、方丈、监院名称" />
|
|
<div class="operation-bar">
|
|
<div class="position">
|
|
<span class="iconfont icon-dingwei"></span>
|
|
<span>重新定位</span>
|
|
</div>
|
|
<div class="show-mode" v-if="mode === 'list'" @click="onModeSwitch('map')">
|
|
<span>地图模式</span>
|
|
<span class="iconfont icon-ditu"></span>
|
|
</div>
|
|
<div class="show-mode" v-if="mode === 'map'" @click="onModeSwitch('list')">
|
|
<span>列表模式</span>
|
|
<span class="iconfont icon-liebiao"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="temple-list-container" :style="{height: containerHeight + 'px'}" >
|
|
<!-- <div class="temple-container content" v-if="mode === 'list'">
|
|
<temple v-for="i in 10" :key="i"></temple>
|
|
</div> -->
|
|
<scroll-view
|
|
v-if="mode === 'list'"
|
|
class="temple-container content"
|
|
:height="containerHeight - 20"
|
|
pulldown
|
|
pullup
|
|
@pulldown="refresh"
|
|
@pullup="loadMore"
|
|
>
|
|
<temple v-for="i in 10" :key="i"></temple>
|
|
</scroll-view>
|
|
<div class="temple-map" id="container" v-show="mode === 'map'">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import TMAPLoader from '@/common/tmap';
|
|
|
|
export default {
|
|
data(){
|
|
return {
|
|
containerHeight: 0,
|
|
keyword: '',
|
|
mode: 'list'
|
|
}
|
|
},
|
|
inject: ['root', 'tabbar'],
|
|
mounted(){
|
|
this.$nextTick(() => {
|
|
const { offsetHeight } = this.root.$refs.tabbar.$el;
|
|
this.containerHeight = window.innerHeight - this.$refs.topbar.offsetHeight - offsetHeight - 20;
|
|
})
|
|
TMAPLoader.load({
|
|
key: process.env.VUE_APP_TMAP_KEY
|
|
}).then(TMap => {
|
|
console.log(TMap)
|
|
var center = new TMap.LatLng(39.984104, 116.307503);
|
|
//初始化地图
|
|
var map = new TMap.Map("container", {
|
|
zoom:12,//设置地图缩放级别
|
|
center: center//设置地图中心点坐标
|
|
});
|
|
console.log(map)
|
|
})
|
|
|
|
},
|
|
methods: {
|
|
onModeSwitch(mode){
|
|
this.mode = mode;
|
|
},
|
|
loadMore(){
|
|
console.log('加载更多')
|
|
},
|
|
refresh(){
|
|
console.log('refresh')
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.operation-bar{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 .4rem;
|
|
color: #333;
|
|
margin-bottom: .4rem;
|
|
margin-top: .3rem;
|
|
.position{
|
|
line-height: .37rem;
|
|
color: green;
|
|
span{
|
|
font-size: .37rem;
|
|
display: inline-block;
|
|
margin-right: .13rem;
|
|
}
|
|
}
|
|
.show-mode{
|
|
line-height: .37rem;
|
|
span{
|
|
font-size: .37rem;
|
|
display: inline-block;
|
|
margin-left: .13rem;
|
|
}
|
|
}
|
|
}
|
|
.temple-list-container{
|
|
background: #f5f5f5;
|
|
overflow: hidden;
|
|
padding: .3rem;
|
|
.temple-map{
|
|
height: 100%;
|
|
background: #f5f5f5;
|
|
}
|
|
}
|
|
</style> |