feat: 增加界面

src/pages/temple-list/index.vue

@@ -8,7 +8,7 @@
                 </template>
             </van-search>
             <div class="operation-bar">
-                <div class="position">
+                <div class="position" @click="onGetLocation">
                     <span class="iconfont icon-dingwei"></span>
                     <span>重新定位</span>
                 </div>
@@ -22,23 +22,26 @@
                 </div>
             </div>
         </div>
-        <div class="temple-list-container" :style="{height: containerHeight + 'px'}" >
+        <div  >
             <!-- <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="temple in templeList" :key="temple.id" :data="temple"></temple>
-            </scroll-view>
-            <div class="temple-map" id="container" v-show="mode === 'map'">
-
+            <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"></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>
@@ -47,6 +50,7 @@
 <script>
 import { getTempleList } from '@/api';
 import TMAPLoader from '@/common/tmap';
+import { getLocation } from '@/common/wechat-web';
 
 export default {
     data(){
@@ -57,42 +61,79 @@ export default {
             page: 1,
             templeList: [],
             lng: '',
-            lat: ''
+            lat: '',
+            map: null,
         }
     },
     inject: ['root', 'tabbar'],
+    computed: {
+        scroll(){
+            return this.$refs.scroll
+        }
+    },
     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)
-        })
+        
         this.getTempleList();
     },
     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);
-            console.log(res)
             if(this.page === 1){
                 this.total = res.total;
                 this.templeList = res.results;
             } else {
                 this.templeList = this.templeList.concat(res.results);
             }
+            if(this.mode === 'map'){
+                this.setMarker();
+            }
+            this.$nextTick(() => {
+                this.scroll.refresh();
+            })
+        },
+        onGetLocation(){
+            getLocation().then(res => {
+                this.lng = res.longitude;
+                this.lat = res.latitude;
+                this.getTempleList();
+            }) 
         },
         onModeSwitch(mode){
             this.mode = mode;
+            if(mode === 'map' && !this.map){
+                this.initMap();
+            }
         },
         onCancel(){
             this.keyword = ''