寺庙列表加载功能多

src/components/content-expand/index.vue

@@ -1,12 +1,13 @@
 <template>
     <div class="content-expand">
-       <div class="content" :class="[contentOverflow && !show && 'multiple-line-3']" ref="wrapper" :style="{height: (show ? contentHeight : 50) + 'px'}">
+       <div class="content" :class="[contentOverflow && !show && 'multiple-line-3']" ref="wrapper" :style="{height: (show ? contentHeight : 100) + 'px'}">
             <div ref="content">
                 <slot></slot>
             </div>
         </div>
         <span class="expand" v-if="contentOverflow" @click="toggle">
             <i class="iconfont icon-double-arrow-down-" :class="[show && 'iconfont-expand']"></i>
+            <span class="label">{{show ? '收起全文': '展开全文'}}</span>
         </span>
     </div>
 </template>
@@ -19,7 +20,8 @@ export default {
             wrapperHeight: 0,
             contentHeight: 0,
             show: false,
-            wrapperContainerHeight: 0
+            wrapperContainerHeight: 0,
+            defaultContentHeight: 0
         }
     },
     computed: {
@@ -28,10 +30,15 @@ export default {
                 return this.contentHeight > this.wrapperHeight;
             }
         }
+    },
+    updated() {
+
     },
     mounted(){
         this.wrapperHeight = this.$refs.wrapper.offsetHeight
         this.contentHeight = this.$refs.content.offsetHeight
+        this.defaultContentHeight = this.$refs.content.querySelector('.goods-content').offsetHeight / (3/2)
+        console.log(this.defaultContentHeight)
         this.$nextTick(() => {
             this.wrapperContainerHeight = this.wrapperHeight;
         })
@@ -71,6 +78,10 @@ export default {
         .iconfont-expand{
             transform: rotateZ(180deg);
         }
+        .label{
+            padding-left: .1rem;
+            font-size: .35rem;
+        }
     }
 }
 </style>

src/components/detail-content-expand/index.vue

@@ -0,0 +1,101 @@
+<template>
+    <div class="detail-content-expand">
+       <div class="content" :class="[contentOverflow && !show && '']" ref="wrapper" :style="{height: (show ? contentHeight : defaultContentHeight) + 'px'}">
+            <div ref="content">
+                <slot></slot>
+            </div>
+        </div>
+        <span class="expand" v-if="contentOverflow" @click="toggle">
+            <i class="iconfont icon-double-arrow-down-" :class="[show && 'iconfont-expand']"></i>
+            <span class="label">{{show ? '收起全文': '展开全文'}}</span>
+        </span>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'detail-content-expand',
+    props: {
+        selector: {
+            type: String,
+            default: '.goods-content'
+        }
+    },
+    data(){
+        return {
+            wrapperHeight: 0,
+            contentHeight: 0,
+            show: false,
+            wrapperContainerHeight: 0,
+            defaultContentHeight: 0
+        }
+    },
+    computed: {
+        contentOverflow: {
+            get(){
+                return this.contentHeight > this.wrapperHeight;
+            }
+        }
+    },
+    updated() {
+
+    },
+    mounted(){
+        this.wrapperHeight = this.$refs.wrapper.offsetHeight
+        this.contentHeight = this.$refs.content.offsetHeight
+        this.$nextTick(() => {
+            this.wrapperContainerHeight = this.wrapperHeight;
+            this.refresh();
+        })
+    },
+    methods: {
+        toggle(){
+            this.show = !this.show
+        },
+        refresh(){
+            const selector = this.$refs.content.querySelector(this.selector);
+            if(!selector) {
+                this.defaultContentHeight = 100;
+                return
+            }
+            console.log('selector', selector)
+            this.defaultContentHeight = selector.offsetHeight / (4/1)
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.detail-content-expand{
+    .content{
+        line-height: 1.4;
+        font-size: .35rem;
+        color: #888;
+        letter-spacing: 1px;
+        text-align: justify;
+        margin-top: .3rem;
+        overflow: hidden;
+        height: 4em;
+        transition: height .3s linear;
+    }
+    .expand{
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 1.07rem;
+        color: #888;
+        .iconfont{
+            display: inline-block;
+            
+        }
+        .iconfont-expand{
+            transform: rotateZ(180deg);
+        }
+        .label{
+            padding-left: .1rem;
+            font-size: .35rem;
+        }
+    }
+}
+</style>

src/components/index.js

@@ -8,6 +8,7 @@ import Order from './order';
 import ScrollView from './scroll-view'
 import Uploader from './uploader'
 import ContentExpand from './content-expand'
+import detailContentExpand from './detail-content-expand'
 import UserDynamic from './user-dynamic';
 import RandomMoney from './random-money'
 import ThankGiving from './Thanksgiving'
@@ -27,6 +28,7 @@ Vue.component(Order.name, Order)
 Vue.component(ScrollView.name, ScrollView)
 Vue.component(Uploader.name, Uploader)
 Vue.component(ContentExpand.name, ContentExpand)
+Vue.component(detailContentExpand.name, detailContentExpand)
 Vue.component(UserDynamic.name, UserDynamic)
 Vue.component(RandomMoney.name, RandomMoney)
 Vue.component(ThankGiving.name, ThankGiving)

src/pages/buddha-detail/index.vue

@@ -8,9 +8,10 @@
             <div class="image-group">
                 <img :src="cover" v-for="(cover, index) in covers" :key="index" alt="" />
             </div>
-            <div v-html="data.content" class="process-content">
+            <detail-content-expand selector=".process-content">
+                <div v-html="data.content" class="process-content"></div>
+            </detail-content-expand>
 
-            </div>
             <button class="purchase" @click.stop="onGoodsDetail">{{ data.btn_title }}</button>
             <div class="bar">
                 <span class="join">已有{{ data.sales }}人参与</span>

src/pages/everyday-donation/index.vue

@@ -23,7 +23,9 @@
                 <div class="panel-head">
                     <span class="title">详情</span>
                 </div>
-                <div v-html="data.content" class="goods-content"></div>
+                <detail-content-expand ref="contentWrap" selector=".process-content">
+                    <div v-html="data.content" class="process-content"></div>
+                </detail-content-expand>
             </div>
             <div class="divider"></div>
             <div class="panel" v-if="goodsDynamicList.length > 0">
@@ -285,6 +287,11 @@ export default {
             await this.getDynamicDataByGoodsId(goods_id, goods_type);
             await this.getPayRecords(this.lTypeId, 1);
             this.data = response;
+            this.$nextTick(() => {
+
+                this.$refs.contentWrap.refresh()
+                console.log('a', this.$refs.contentWrap)
+            })
             if(!this.onlySpecs){
                 const { donate_number, money, id } = this.data.spec[0];
                 const priceUnit = donate_number || money;
@@ -399,6 +406,12 @@ export default {
     }
 }
 
+.process-content{
+    *{
+        max-width: 100%;
+    }
+}
+
 .caret{
     padding-bottom: .2rem;
     .head{

src/pages/goods-detail/index.vue

@@ -20,7 +20,9 @@
             <div class="panel-head">
                 <span class="title">详情</span>
             </div>
-            <div v-html="data.content" class="goods-content"></div>
+            <detail-content-expand>
+                <div v-html="data.content" class="goods-content"></div>
+            </detail-content-expand>
         </div>
         <div class="divider"></div>
         <div class="support">

src/pages/temple-home/index.vue

@@ -113,9 +113,9 @@
                         <img src="@/assets/img/user-popup/功德箱.png" alt="">
                         <span>功德箱</span>
                     </li>
-                    <li  @click="onPushForRouteName('temple-list')">
+                    <li  @click="onPushForRouteName('home')">
                         <img src="@/assets/img/user-popup/查看更多寺院.png" alt="">
-                        <span>查看更多寺院</span>
+                        <span>自在福田首页</span>
                     </li>
                 </ul>
             </div>
@@ -284,6 +284,7 @@ export default {
     }
     .merit-scroll-container{
         height: 3.39rem;
+        margin: 0;
         overflow-x: auto;
         .merit-scroll-wrapper{
             white-space: nowrap;

src/pages/temple-list/index.vue

@@ -30,8 +30,7 @@
 
             <div class="temple-list-container" :style="{height: containerHeight + 'px'}" v-if="mode === 'list'" >
                 <scroll-view 
-                    
+                    class="temple-container content"
-                    class="temple-container content" 
                     :height="containerHeight - 20" 
                     ref="scroll"
                     pulldown 
@@ -66,7 +65,8 @@ export default {
             lng: '',
             lat: '',
             map: null,
-            positioning: false
+            positioning: false,
+            noMore: false,
         }
     },
     inject: ['root', 'parentHeight'],
@@ -126,6 +126,7 @@ export default {
                 this.templeList = res.results;
             } else {
                 this.templeList = this.templeList.concat(res.results);
+                this.noMore = res.results.length < 10;
             }
             if(this.mode === 'map'){
                 this.setMarker();
@@ -171,7 +172,9 @@ export default {
             this.getTempleList();
         },
         loadMore(){
-            console.log('加载更多')
+            if(this.noMore) return;
+            this.page += 1;
+            this.getTempleList();
         },
         refresh(){
             console.log('refresh')