Style(店铺):商品列表接口对接

pagesInn/inn/innGoodList.vue

@@ -33,6 +33,18 @@
           </view>
         </view>
       </view>
+      <view
+        v-if="loading"
+        class="loading-txt"
+      >
+        加载中...
+      </view>
+      <view
+        v-if="page >= totalPage"
+        class="loading-txt"
+      >
+        已经到底了
+      </view>
     </view>
     <goo-skeleton v-else />
   </view>
@@ -42,11 +54,7 @@
 import {
   getHotelGoodList
 } from "@/api/inn.js";
-import {formatDateTime} from "@/utils";
-import {getUrlParam} from "@/utils/common.js";
 import imgBox from '@/components/imageTypeSet/imagebox.vue'
-import cookie from "@/utils/store/cookie";
-import {addStore, removeStore} from "@/api/favorite";
 import GooSkeleton from '@/components/GooSkeleton/index.vue'
 
 export default {
@@ -58,7 +66,9 @@ export default {
     return {
       webUrl: this.$VUE_APP_RESOURCES_URL,
       isLoad: false,
+      loading: false,
       page: 1,
+      totalPage: 1,
       goodsList: [],
       id: null,
     }
@@ -69,6 +79,15 @@ export default {
       this.fetchGoods()
     }
   },
+	onReachBottom() {
+    if (this.page >= this.totalPage) {
+      return
+    }
+		if (!this.loading) {
+      this.page++
+			this.fetchGoods()
+		}
+	},
   methods: {
     goGoodsConByID(item) {
       this.$yrouter.push({
@@ -79,6 +98,7 @@ export default {
       })
     },
     fetchGoods() {
+      this.loading = true
       getHotelGoodList({
         id: this.id,
         page: this.page,
@@ -87,6 +107,7 @@ export default {
         const { success, data } = res
         if (success) {
           this.isLoad = true
+          this.totalPage = data.pages
           const len = data.records.length
           if (len > 0) {
             for (let i = 0; i < len; i++) {
@@ -94,6 +115,8 @@ export default {
             }
           }
         }
+      }).finally(() => {
+        this.loading = false
       })
     }
   }
@@ -103,7 +126,6 @@ export default {
 @import "@/assets/css/store.less";
 .goods-section {
   padding: 40rpx 32rpx 0;
-  background: #F5F5FA;
   .item {
     position: relative;
     width: 332rpx;
@@ -161,6 +183,11 @@ export default {
 }
 .container {
   position: relative;
-  background: #FFFFFF;
+  background: #F5F5FA;
+}
+.loading-txt {
+  padding: 30rpx 0;
+  color: #999;
+  text-align: center;
 }
 </style>