增加商品客服显示

src/pages/goods-detail/index.vue

@@ -32,15 +32,20 @@
                     <li :class="[lTypeId === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType.id, 1)">{{ lType.name }}</li>
                 </ul>
             </div>
-            <div>
+            <div class="paied_list">
                 <user-merit v-for="pay in payList" :key="pay.id" :data="pay"></user-merit>
-                <div class="read-more" v-if="noMore && page > 1">没有更多了</div>
-                <div class="read-more" v-if="noMore && page === 1">暂无数据</div>
-                <div class="read-more" v-else @click="loadMoreFn">查看更多</div>
+                <div ref="target" class="observer-target">
+                    <div class="read-more" v-if="noMore && page > 1">没有更多了</div>
+                    <div class="read-more" v-if="noMore && page === 1">暂无数据</div>
+                    <div class="read-more" v-if="!noMore" @click="loadMoreFn">查看更多</div>
+                </div>
             </div>
         </div>
 
         <fixed-bottom ref="fixedBottom">
+            <div class="customer-absolute">
+                <customer-service></customer-service>
+            </div>
             <button class="iconfont icon-home" v-if="query.no_login === '1'" @click="backHome"></button>
             <button class="merit-button" @click="onHasLoginToNext">{{ data.pay_name }}</button>
         </fixed-bottom>
@@ -81,16 +86,20 @@ import { swiper, swiperSlide } from "vue-awesome-swiper";
 import { getGoodsDetail, getOrderCompare, hasLogin } from "@/api";
 import SelectSpec from "./components/select-spec.vue";
 import FillInformation from "./components/fill-information.vue";
+import ObserverInteraction from "@/util/ObserverInteraction";
+import CustomerService from "@/components/customer-service/index.vue";
 
 export default {
     components: {
         swiper,
         swiperSlide,
         SelectSpec,
+        CustomerService,
         FillInformation,
     },
     data() {
         return {
+            observer: null,
             result: "a",
             showAnyAmount: false,
             paddingBottom: 0,
@@ -146,7 +155,22 @@ export default {
     mounted() {
         this.getGoodsDetail("common");
     },
+    beforeDestroy() {
+        this.observer.disconnect();
+    },
     methods: {
+        initObserver() {
+            this.observer = new ObserverInteraction();
+
+            // 3. 监听元素可见性
+            this.observer.observeVisibility(
+                this.$refs.target,
+                () => {
+                    this.loadMoreFn();
+                },
+                { threshold: 0.5 }
+            );
+        },
         backHome() {
             const { query } = this.$router.currentRoute;
             const name = query.temple_id === "1" ? "home" : "temple-home";
@@ -217,6 +241,7 @@ export default {
             await this.getPayRecords(this.lTypeId, 1);
             this.$nextTick(() => {
                 this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() - 50;
+                this.initObserver();
             });
             this.wechatReady({
                 ...this.data.shareConfig,
@@ -226,6 +251,7 @@ export default {
         // 获取更多感恩功德1
         loadMoreFn() {
             this.page += 1;
+            if (this.noMore) return;
             this.getPayRecords(this.lTypeId, this.page);
         },
         // 获取感恩功德
@@ -347,6 +373,9 @@ $lightWidth: 1.3rem;
                 }
             }
         }
+        .paied_list {
+            flex: 1 1;
+        }
     }
     .swiper-container {
         background: #f5f5f5;
@@ -515,5 +544,11 @@ $lightWidth: 1.3rem;
             }
         }
     }
+
+    .customer-absolute {
+        position: absolute;
+        right: 0.3rem;
+        top: 0.28rem;
+    }
 }
 </style>