更改寺庙列表导航和定位

src/pages/temple-list/index.vue

@@ -8,7 +8,11 @@
                 </template>
             </van-search>
             <div class="operation-bar">
-                <div class="position" @click="onGetLocation">
+                <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>
@@ -23,9 +27,7 @@
             </div>
         </div>
         <div  >
-            <!-- <div class="temple-container content" v-if="mode === 'list'">
-                <temple v-for="i in 10" :key="i"></temple>
-            </div> -->
+
             <div class="temple-list-container" :style="{height: containerHeight + 'px'}" v-if="mode === 'list'" >
                 <scroll-view 
                     
@@ -37,7 +39,7 @@
                     @pulldown="refresh"
                     @pullup="loadMore"
                 >
-                    <temple v-for="temple in templeList" :key="temple.id" :data="temple"></temple>
+                    <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'}">
@@ -50,7 +52,7 @@
 <script>
 import { getTempleList } from '@/api';
 import TMAPLoader from '@/common/tmap';
-import { getLocation } from '@/common/wechat-web';
+import { getLocation, openLocation } from "@/common/wechat-web";
 
 export default {
     data(){
@@ -64,6 +66,7 @@ export default {
             lng: '',
             lat: '',
             map: null,
+            positioning: false
         }
     },
     inject: ['root', 'parentHeight'],
@@ -86,6 +89,7 @@ export default {
         }
 
         this.getTempleList();
+        this.wechatReady()
     },
     methods: {
         initMap(){
@@ -131,11 +135,26 @@ export default {
             })
         },
         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;
@@ -162,6 +181,23 @@ export default {
 </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;
@@ -179,6 +215,9 @@ export default {
                 display: inline-block;
                 margin-right: .13rem;
             }
+            .positioning{
+                animation: positioning 3s linear infinite;
+            }
         }
         .show-mode{
             line-height: .37rem;