temple-h5/src/pages/temple-list/index.vue

<template>
    <div class="temple-list" :style="{height: root.minHeight + 'px'}">
        <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="请输入寺院、方丈、监院名称" @search="onSearch" @cancel="onCancel">
                <template #action>
                    <span @click="onSearch">搜索</span>
                </template>
            </van-search>
            <div class="operation-bar">
                <div class="position" v-if="positioning" >
                    <span class="iconfont icon-dingwei positioning"></span>
                    <span>正在获取位置...</span>
                </div>
                <div class="position" v-else @click="onGetLocation">
                    <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  >

            <div class="temple-list-container" :style="{height: containerHeight + 'px'}" v-if="mode === 'list'" >
                <scroll-view 
                    class="temple-container content"
                    :height="containerHeight - 20" 
                    ref="scroll"
                    pulldown 
                    pullup
                    @pulldown="refresh"
                    @pullup="loadMore"
                >
                    <temple v-for="temple in templeList" :key="temple.id" :data="temple" @location-to="onLocationTo"></temple>
                </scroll-view>
            </div>
            <div class="temple-map" v-show="mode === 'map'" :style="{height: containerHeight + 'px'}">
                <div id="container" style="height: 100%"></div>
            </div>
        </div>
    </div>
</template>

<script>
import { getTempleList } from '@/api';
import TMAPLoader from '@/common/tmap';
import { getLocation, openLocation } from "@/common/wechat-web";

export default {
    data(){
        return {
            query: this.$route.query,
            containerHeight: 0,
            keyword: '',
            mode: 'list',
            page: 1,
            templeList: [],
            lng: '',
            lat: '',
            map: null,
            positioning: false,
            noMore: false,
        }
    },
    inject: ['root', 'parentHeight'],
    computed: {
        scroll(){
            return this.$refs.scroll
        }
    },
    mounted(){
        setTimeout(() => {
            if(this.query.hideTab === '1'){
                this.containerHeight = this.root.minHeight - this.$refs.topbar.offsetHeight;
            } else {
                this.containerHeight = this.root.minHeight - this.$refs.topbar.offsetHeight - 100;
            }
        }, 50)

        if(this.query.search){
            this.keyword = this.query.search;
        }

        this.getTempleList();
        this.wechatReady()
    },
    methods: {
        initMap(){
            TMAPLoader.load({
                key: process.env.VUE_APP_TMAP_KEY
            }).then(TMap => {
                var center = new TMap.LatLng(39.984104, 116.307503);
                //初始化地图
                var map = new TMap.Map("container", {
                    zoom:12,//设置地图缩放级别
                    center: center//设置地图中心点坐标
                });
                this.map = map;
                this.setMarker(TMap)
            })
        },
        setMarker(TMap){
            const markers = []
            this.templeList.forEach(temple => {
                console.log(temple)
                const infoWindow = new TMap.InfoWindow({
                    map: this.map,
                    position: new TMap.LatLng(temple.lat, temple.lng),
                    content: temple.unit_name
                })  
                markers.push(infoWindow)
            })
            this.markers = markers;
        },
        async getTempleList(){
            const res = await getTempleList(this.keyword, this.lng, this.lat, this.page);
            if(this.page === 1){
                this.total = res.total;
                this.templeList = res.results;
            } else {
                this.templeList = this.templeList.concat(res.results);
                this.noMore = res.results.length < 10;
            }
            if(this.mode === 'map'){
                this.setMarker();
            }
            this.$nextTick(() => {
                this.scroll.refresh();
            })
        },
        onGetLocation(){
            this.positioning = true;
            getLocation().then(res => {
                console.log(res)
                this.positioning = false
                this.lng = res.longitude;
                this.lat = res.latitude;
                this.page = 1;
                this.getTempleList();
            }).catch((a) => {
                console.log(a)
                this.positioning = false;
            })
        },
        onLocationTo(data){
            openLocation({
                longitude: data.lng,
                latitude: data.lat,
                name: data.unit_name,
                address: data.address
            })
        },
        onModeSwitch(mode){
            this.mode = mode;
            if(mode === 'map' && !this.map){
                this.initMap();
            }
        },
        onCancel(){
            this.keyword = ''
            this.page = 1;
            this.getTempleList();
        },
        onSearch(){
            this.getTempleList();
        },
        loadMore(){
            if(this.noMore) return;
            this.page += 1;
            this.getTempleList();
        },
        refresh(){
            console.log('refresh')
        },
    }
}
</script>

<style lang="scss">
@keyframes positioning {
    0%{
        opacity: 1;
    }
    25%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    75%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.temple-list{
    .operation-bar{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 .4rem;
        color: #333;
        padding-bottom: .4rem;
        padding-top: .3rem;
        .position{
            line-height: .37rem;
            color: green;
            span{
                font-size: .37rem;
                display: inline-block;
                margin-right: .13rem;
            }
            .positioning{
                animation: positioning 3s linear infinite;
            }
        }
        .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>