123

src/pages/temple-list/index.vue

@@ -2,7 +2,11 @@
     <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="请输入寺院、方丈、监院名称" />
+            <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">
                     <span class="iconfont icon-dingwei"></span>
@@ -31,7 +35,7 @@
                 @pulldown="refresh"
                 @pullup="loadMore"
             >
-                <temple v-for="i in 10" :key="i"></temple>
+                <temple v-for="temple in templeList" :key="temple.id" :data="temple"></temple>
             </scroll-view>
             <div class="temple-map" id="container" v-show="mode === 'map'">
 
@@ -41,6 +45,7 @@
 </template>
 
 <script>
+import { getTempleList } from '@/api';
 import TMAPLoader from '@/common/tmap';
 
 export default {
@@ -48,7 +53,11 @@ export default {
         return {
             containerHeight: 0,
             keyword: '',
-            mode: 'list'
+            mode: 'list',
+            page: 1,
+            templeList: [],
+            lng: '',
+            lat: ''
         }
     },
     inject: ['root', 'tabbar'],
@@ -69,12 +78,30 @@ export default {
             });
             console.log(map)
         })
-        
+        this.getTempleList();
     },
     methods: {
+        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);
+            }
+        },
         onModeSwitch(mode){
             this.mode = mode;
         },
+        onCancel(){
+            this.keyword = ''
+            this.page = 1;
+            this.getTempleList();
+        },
+        onSearch(){
+            this.getTempleList();
+        },
         loadMore(){
             console.log('加载更多')
         },