From 2857087d3c7a2ec77f8e7691dc750ccdcf1d877c Mon Sep 17 00:00:00 2001
From: Wen Fangping <front_wenfp@163.com>
Date: Sat, 2 Apr 2022 10:02:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=AF=BA=E5=BA=99=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=8A=A0=E8=BD=BD=E6=9B=B4=E5=A4=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail-content-expand/index.vue           | 11 +--
 src/pages/temple-list/index.vue               | 85 ++++++++++++-------
 vue.config.js                                 |  1 +
 wap/index.html                                |  2 +-
 4 files changed, 63 insertions(+), 36 deletions(-)

diff --git a/src/components/detail-content-expand/index.vue b/src/components/detail-content-expand/index.vue
index e42e9c3..c848d70 100644
--- a/src/components/detail-content-expand/index.vue
+++ b/src/components/detail-content-expand/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="detail-content-expand">
        <div class="content" :class="[contentOverflow && !show && '']" ref="wrapper" :style="{height: (show ? contentHeight : defaultContentHeight) + 'px'}">
-            <div ref="content">
+            <div ref="content" class="ref-content">
                 <slot></slot>
             </div>
         </div>
@@ -37,13 +37,15 @@ export default {
             }
         }
     },
-    updated() {
-
+    watch: {
+        '$slots'(val){
+            console.log('slots val',val)
+        }
     },
     mounted(){
         this.wrapperHeight = this.$refs.wrapper.offsetHeight
-        this.contentHeight = this.$refs.content.offsetHeight
         this.$nextTick(() => {
+            this.contentHeight = this.$refs.content.offsetHeight
             this.wrapperContainerHeight = this.wrapperHeight;
             this.refresh();
         })
@@ -58,7 +60,6 @@ export default {
                 this.defaultContentHeight = 100;
                 return
             }
-            console.log('selector', selector)
             this.defaultContentHeight = selector.offsetHeight / (4/1)
         }
     }
diff --git a/src/pages/temple-list/index.vue b/src/pages/temple-list/index.vue
index 528ae17..b958f46 100644
--- a/src/pages/temple-list/index.vue
+++ b/src/pages/temple-list/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="temple-list" :style="{height: root.minHeight + 'px'}">
+    <div class="temple-list" :style="{height: root.minHeight - root.tabHeight + '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">
@@ -29,17 +29,22 @@
         <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"
-                >
+<!--                <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 class="temple-container content" :style="{height: containerHeight+'px'}" @scroll="onScroll">
                     <temple v-for="temple in templeList" :key="temple.id" :data="temple" @location-to="onLocationTo"></temple>
-                </scroll-view>
+                    <div v-if="loading" class="no-more">正在加载...</div>
+                    <div class="no-more" v-if="!loading && noMore">没有更多了</div>
+                </div>
             </div>
             <div class="temple-map" v-show="mode === 'map'" :style="{height: containerHeight + 'px'}">
                 <div id="container" style="height: 100%"></div>
@@ -62,11 +67,13 @@ export default {
             mode: 'list',
             page: 1,
             templeList: [],
-            lng: '',
-            lat: '',
+            lng: '106.45233',
+            lat: '29.507471',
             map: null,
             positioning: false,
             noMore: false,
+            timer: null,
+            loading: false
         }
     },
     inject: ['root', 'parentHeight'],
@@ -92,6 +99,19 @@ export default {
         this.wechatReady()
     },
     methods: {
+        onScroll(e){
+            const scrollTop = e.target.scrollTop;
+            const scrollHeight = e.target.offsetHeight;
+            const windowHeight = this.templeList.length * 220;
+            if(scrollTop === 0){
+                this.page = 1;
+                this.getTempleList()
+                return
+            }
+            if(((scrollTop + scrollHeight) / windowHeight) > 0.9){
+                this.loadMore()
+            }
+        },
         initMap(){
             TMAPLoader.load({
                 key: process.env.VUE_APP_TMAP_KEY
@@ -120,35 +140,37 @@ export default {
             this.markers = markers;
         },
         async getTempleList(){
+            this.loading = true;
             const res = await getTempleList(this.keyword, this.lng, this.lat, this.page);
+            this.loading = false;
+            this.total = res.total;
             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;
+                this.templeList = [];
             }
+            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(){
+        async onGetLocation(){
             this.positioning = true;
+            console.log(getLocation)
             getLocation().then(res => {
-                console.log(res)
                 this.positioning = false
                 this.lng = res.longitude;
                 this.lat = res.latitude;
                 this.page = 1;
+                this.templeList = [];
                 this.getTempleList();
-            }).catch((a) => {
-                console.log(a)
+            }).catch(() => {
                 this.positioning = false;
             })
         },
+        refresh(){
+            this.page = 1;
+            this.getTempleList()
+        },
         onLocationTo(data){
             openLocation({
                 longitude: data.lng,
@@ -173,11 +195,11 @@ export default {
         },
         loadMore(){
             if(this.noMore) return;
-            this.page += 1;
-            this.getTempleList();
-        },
-        refresh(){
-            console.log('refresh')
+            clearTimeout(this.timer)
+            this.timer = setTimeout(() => {
+                this.page += 1;
+                this.getTempleList()
+            }, 300)
         },
     }
 }
@@ -239,6 +261,9 @@ export default {
             height: 100%;
             background: #f5f5f5;
         }
+        .temple-container{
+            overflow: scroll;
+        }
     }
 }
 
diff --git a/vue.config.js b/vue.config.js
index d249f4d..797bab8 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -7,6 +7,7 @@ module.exports = {
     filenameHashing: true,
     devServer: {
         // https:true,
+        host: '0.0.0.0',
         disableHostCheck: false,
         proxy: {
             '/api': {
diff --git a/wap/index.html b/wap/index.html
index 494137f..d4d4665 100644
--- a/wap/index.html
+++ b/wap/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="" manifest="IGNORE.manifest"><head><meta charset="utf-8"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache" content="no-cache"><meta http-equiv="Cache-control" content="no-cache,must-revalidate"><meta http-equiv="cache-control" content="max-age=0"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"><meta name="referrer" content="never"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script><link rel="icon" href="/wap/favicon.ico"><title></title><link href="/wap/css/chunk-06989813.71427027.css" rel="prefetch"><link href="/wap/css/chunk-0c2fb5ff.801176d5.css" rel="prefetch"><link href="/wap/css/chunk-0fc99fae.fe91d988.css" rel="prefetch"><link href="/wap/css/chunk-12af3aac.9bd8c9fd.css" rel="prefetch"><link href="/wap/css/chunk-149b8711.af81736f.css" rel="prefetch"><link href="/wap/css/chunk-1582e689.bf578cd7.css" rel="prefetch"><link href="/wap/css/chunk-1ee67cda.66128e1b.css" rel="prefetch"><link href="/wap/css/chunk-2d2edb2f.ee5ca517.css" rel="prefetch"><link href="/wap/css/chunk-33624dbc.593a2807.css" rel="prefetch"><link href="/wap/css/chunk-355d1160.8d4cfd1c.css" rel="prefetch"><link href="/wap/css/chunk-54116e46.c61ddbdf.css" rel="prefetch"><link href="/wap/css/chunk-56baad82.09d4c509.css" rel="prefetch"><link href="/wap/css/chunk-5b54acba.9f5805a7.css" rel="prefetch"><link href="/wap/css/chunk-5fa963a1.98cdc6f3.css" rel="prefetch"><link href="/wap/css/chunk-605a7b47.299c97b2.css" rel="prefetch"><link href="/wap/css/chunk-659d3025.a841f655.css" rel="prefetch"><link href="/wap/css/chunk-680bff6b.01366e41.css" rel="prefetch"><link href="/wap/css/chunk-6812afb4.608e618d.css" rel="prefetch"><link href="/wap/css/chunk-68aed67e.5e008df0.css" rel="prefetch"><link href="/wap/css/chunk-72193536.38f98820.css" rel="prefetch"><link href="/wap/css/chunk-72ac2317.eed886f8.css" rel="prefetch"><link href="/wap/css/chunk-7754aff9.0c5a593c.css" rel="prefetch"><link href="/wap/css/chunk-784c5176.9040e0cc.css" rel="prefetch"><link href="/wap/css/chunk-7bc42cc8.071327ae.css" rel="prefetch"><link href="/wap/css/chunk-b19dfaea.df6dc1f1.css" rel="prefetch"><link href="/wap/css/chunk-b775401a.32e6b154.css" rel="prefetch"><link href="/wap/css/chunk-becd0956.d458deaa.css" rel="prefetch"><link href="/wap/css/chunk-d228c670.2e0c3718.css" rel="prefetch"><link href="/wap/css/chunk-d3d22b26.6a63377f.css" rel="prefetch"><link href="/wap/css/chunk-de2b197c.f58bf23a.css" rel="prefetch"><link href="/wap/css/chunk-f3521632.5aaa535a.css" rel="prefetch"><link href="/wap/css/chunk-f35d22b6.fad02444.css" rel="prefetch"><link href="/wap/css/chunk-f5214612.7322f29c.css" rel="prefetch"><link href="/wap/js/chunk-06989813.8e11a6b8.js" rel="prefetch"><link href="/wap/js/chunk-0c2fb5ff.8f13210c.js" rel="prefetch"><link href="/wap/js/chunk-0fc99fae.05b56130.js" rel="prefetch"><link href="/wap/js/chunk-12af3aac.631b0dac.js" rel="prefetch"><link href="/wap/js/chunk-149b8711.8d884e63.js" rel="prefetch"><link href="/wap/js/chunk-1582e689.8c6bfe72.js" rel="prefetch"><link href="/wap/js/chunk-1ee67cda.54efecec.js" rel="prefetch"><link href="/wap/js/chunk-2d229265.282fee6c.js" rel="prefetch"><link href="/wap/js/chunk-2d2edb2f.4b9dc465.js" rel="prefetch"><link href="/wap/js/chunk-33624dbc.8fde7179.js" rel="prefetch"><link href="/wap/js/chunk-355d1160.f0f64ee6.js" rel="prefetch"><link href="/wap/js/chunk-3d7f52ef.f769c2d5.js" rel="prefetch"><link href="/wap/js/chunk-54116e46.67c05b5d.js" rel="prefetch"><link href="/wap/js/chunk-56baad82.86c21a30.js" rel="prefetch"><link href="/wap/js/chunk-5b54acba.e7e7876c.js" rel="prefetch"><link href="/wap/js/chunk-5fa963a1.1790acc3.js" rel="prefetch"><link href="/wap/js/chunk-605a7b47.00fcec8b.js" rel="prefetch"><link href="/wap/js/chunk-659d3025.c8b07a94.js" rel="prefetch"><link href="/wap/js/chunk-680bff6b.b729839b.js" rel="prefetch"><link href="/wap/js/chunk-6812afb4.a3e09765.js" rel="prefetch"><link href="/wap/js/chunk-68aed67e.ab7fd2a9.js" rel="prefetch"><link href="/wap/js/chunk-72193536.8da16316.js" rel="prefetch"><link href="/wap/js/chunk-72ac2317.af8bbe33.js" rel="prefetch"><link href="/wap/js/chunk-7754aff9.a61696ce.js" rel="prefetch"><link href="/wap/js/chunk-784c5176.234e89d1.js" rel="prefetch"><link href="/wap/js/chunk-7bc42cc8.3a7521bc.js" rel="prefetch"><link href="/wap/js/chunk-b19dfaea.b41decfc.js" rel="prefetch"><link href="/wap/js/chunk-b775401a.b0a9b219.js" rel="prefetch"><link href="/wap/js/chunk-becd0956.4934a97b.js" rel="prefetch"><link href="/wap/js/chunk-d228c670.98e1787d.js" rel="prefetch"><link href="/wap/js/chunk-d3d22b26.c2cca4a3.js" rel="prefetch"><link href="/wap/js/chunk-de2b197c.f8bbe45c.js" rel="prefetch"><link href="/wap/js/chunk-f3521632.79e4fe5c.js" rel="prefetch"><link href="/wap/js/chunk-f35d22b6.b82cce85.js" rel="prefetch"><link href="/wap/js/chunk-f5214612.c61658d9.js" rel="prefetch"><link href="/wap/css/app.26d521ce.css" rel="preload" as="style"><link href="/wap/css/chunk-vendors.acea0471.css" rel="preload" as="style"><link href="/wap/js/app.451abf66.js" rel="preload" as="script"><link href="/wap/js/chunk-vendors.20541610.js" rel="preload" as="script"><link href="/wap/css/chunk-vendors.acea0471.css" rel="stylesheet"><link href="/wap/css/app.26d521ce.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but 自在福田 - 寺庙联盟 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/wap/js/chunk-vendors.20541610.js"></script><script src="/wap/js/app.451abf66.js"></script></body></html>
\ No newline at end of file
+<!DOCTYPE html><html lang="" manifest="IGNORE.manifest"><head><meta charset="utf-8"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache" content="no-cache"><meta http-equiv="Cache-control" content="no-cache,must-revalidate"><meta http-equiv="cache-control" content="max-age=0"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"><meta name="referrer" content="never"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script><link rel="icon" href="/wap/favicon.ico"><title></title><link href="/wap/css/chunk-06989813.b010ffcd.css" rel="prefetch"><link href="/wap/css/chunk-0c2fb5ff.801176d5.css" rel="prefetch"><link href="/wap/css/chunk-0fc99fae.fe91d988.css" rel="prefetch"><link href="/wap/css/chunk-12af3aac.9bd8c9fd.css" rel="prefetch"><link href="/wap/css/chunk-149b8711.af81736f.css" rel="prefetch"><link href="/wap/css/chunk-1582e689.bf578cd7.css" rel="prefetch"><link href="/wap/css/chunk-1ee67cda.66128e1b.css" rel="prefetch"><link href="/wap/css/chunk-2d2edb2f.ee5ca517.css" rel="prefetch"><link href="/wap/css/chunk-33624dbc.593a2807.css" rel="prefetch"><link href="/wap/css/chunk-355d1160.8d4cfd1c.css" rel="prefetch"><link href="/wap/css/chunk-54116e46.c61ddbdf.css" rel="prefetch"><link href="/wap/css/chunk-56baad82.09d4c509.css" rel="prefetch"><link href="/wap/css/chunk-5b54acba.9f5805a7.css" rel="prefetch"><link href="/wap/css/chunk-5fa963a1.98cdc6f3.css" rel="prefetch"><link href="/wap/css/chunk-605a7b47.299c97b2.css" rel="prefetch"><link href="/wap/css/chunk-659d3025.a841f655.css" rel="prefetch"><link href="/wap/css/chunk-680bff6b.01366e41.css" rel="prefetch"><link href="/wap/css/chunk-6812afb4.608e618d.css" rel="prefetch"><link href="/wap/css/chunk-68aed67e.5e008df0.css" rel="prefetch"><link href="/wap/css/chunk-72193536.38f98820.css" rel="prefetch"><link href="/wap/css/chunk-72ac2317.eed886f8.css" rel="prefetch"><link href="/wap/css/chunk-7754aff9.0c5a593c.css" rel="prefetch"><link href="/wap/css/chunk-784c5176.9040e0cc.css" rel="prefetch"><link href="/wap/css/chunk-7bc42cc8.071327ae.css" rel="prefetch"><link href="/wap/css/chunk-b19dfaea.df6dc1f1.css" rel="prefetch"><link href="/wap/css/chunk-b775401a.32e6b154.css" rel="prefetch"><link href="/wap/css/chunk-becd0956.d458deaa.css" rel="prefetch"><link href="/wap/css/chunk-d228c670.2e0c3718.css" rel="prefetch"><link href="/wap/css/chunk-d3d22b26.6a63377f.css" rel="prefetch"><link href="/wap/css/chunk-de2b197c.f58bf23a.css" rel="prefetch"><link href="/wap/css/chunk-f3521632.5aaa535a.css" rel="prefetch"><link href="/wap/css/chunk-f35d22b6.fad02444.css" rel="prefetch"><link href="/wap/css/chunk-f5214612.7322f29c.css" rel="prefetch"><link href="/wap/js/chunk-06989813.91b785c6.js" rel="prefetch"><link href="/wap/js/chunk-0c2fb5ff.8f13210c.js" rel="prefetch"><link href="/wap/js/chunk-0fc99fae.05b56130.js" rel="prefetch"><link href="/wap/js/chunk-12af3aac.631b0dac.js" rel="prefetch"><link href="/wap/js/chunk-149b8711.8d884e63.js" rel="prefetch"><link href="/wap/js/chunk-1582e689.8c6bfe72.js" rel="prefetch"><link href="/wap/js/chunk-1ee67cda.54efecec.js" rel="prefetch"><link href="/wap/js/chunk-2d229265.282fee6c.js" rel="prefetch"><link href="/wap/js/chunk-2d2edb2f.4b9dc465.js" rel="prefetch"><link href="/wap/js/chunk-33624dbc.8fde7179.js" rel="prefetch"><link href="/wap/js/chunk-355d1160.f0f64ee6.js" rel="prefetch"><link href="/wap/js/chunk-3d7f52ef.f769c2d5.js" rel="prefetch"><link href="/wap/js/chunk-54116e46.67c05b5d.js" rel="prefetch"><link href="/wap/js/chunk-56baad82.86c21a30.js" rel="prefetch"><link href="/wap/js/chunk-5b54acba.e7e7876c.js" rel="prefetch"><link href="/wap/js/chunk-5fa963a1.1790acc3.js" rel="prefetch"><link href="/wap/js/chunk-605a7b47.00fcec8b.js" rel="prefetch"><link href="/wap/js/chunk-659d3025.c8b07a94.js" rel="prefetch"><link href="/wap/js/chunk-680bff6b.b729839b.js" rel="prefetch"><link href="/wap/js/chunk-6812afb4.a3e09765.js" rel="prefetch"><link href="/wap/js/chunk-68aed67e.ab7fd2a9.js" rel="prefetch"><link href="/wap/js/chunk-72193536.8da16316.js" rel="prefetch"><link href="/wap/js/chunk-72ac2317.af8bbe33.js" rel="prefetch"><link href="/wap/js/chunk-7754aff9.a61696ce.js" rel="prefetch"><link href="/wap/js/chunk-784c5176.234e89d1.js" rel="prefetch"><link href="/wap/js/chunk-7bc42cc8.3a7521bc.js" rel="prefetch"><link href="/wap/js/chunk-b19dfaea.b41decfc.js" rel="prefetch"><link href="/wap/js/chunk-b775401a.b0a9b219.js" rel="prefetch"><link href="/wap/js/chunk-becd0956.4934a97b.js" rel="prefetch"><link href="/wap/js/chunk-d228c670.98e1787d.js" rel="prefetch"><link href="/wap/js/chunk-d3d22b26.c2cca4a3.js" rel="prefetch"><link href="/wap/js/chunk-de2b197c.f8bbe45c.js" rel="prefetch"><link href="/wap/js/chunk-f3521632.79e4fe5c.js" rel="prefetch"><link href="/wap/js/chunk-f35d22b6.b82cce85.js" rel="prefetch"><link href="/wap/js/chunk-f5214612.c61658d9.js" rel="prefetch"><link href="/wap/css/app.26d521ce.css" rel="preload" as="style"><link href="/wap/css/chunk-vendors.acea0471.css" rel="preload" as="style"><link href="/wap/js/app.8ff150b3.js" rel="preload" as="script"><link href="/wap/js/chunk-vendors.20541610.js" rel="preload" as="script"><link href="/wap/css/chunk-vendors.acea0471.css" rel="stylesheet"><link href="/wap/css/app.26d521ce.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but 自在福田 - 寺庙联盟 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/wap/js/chunk-vendors.20541610.js"></script><script src="/wap/js/app.8ff150b3.js"></script></body></html>
\ No newline at end of file