对接接口

2021-11-03 21:02:22 +08:00
parent 411ecf4c05
commit c5c2f661a0
71 changed files with 5436 additions and 145 deletions
@@ -0,0 +1,124 @@
+<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>