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>

pagesInn/inn/innHome.vue

@@ -148,42 +148,44 @@
       </view>
       <view :class="isMyInn ? 'my-inn-page' : ''">
         <!-- v4 商品列表 -->
-        <view
-          v-if="activeIndex === 0"
-          class="goods-section flex flex-wrap"
-        >
-          <view
-            v-for="(item,index) in goodsList"
-            :key="index"
-            class="item"
-            @click="goGoodsConByID(item)"
-          >
-            <image
-              :src="item.image"
-              class="cover"
-            />
-            <view class="">
-              <view class="name more-t">{{ item.storeName }}</view>
-              <view class="price-line flex ai-center">
+        <view v-if="activeIndex === 0" class="goods-section">
+          <view class="flex flex-wrap">
+            <view
+              v-for="(item,index) in goodsList"
+              :key="index"
+              class="item"
+              @click="goGoodsConByID(item)"
+            >
+              <image
+                :src="item.image"
+                class="cover"
+              />
+              <view class="">
+                <view class="name more-t">{{ item.storeName }}</view>
+                <view class="price-line flex ai-center">
+                  <image
+                    :src="webUrl + '/20221118104357701129.png'"
+                    class="label"
+                    mode="scaleToFill"
+                  />
+                  <text>￥{{ item.price }}</text>
+                </view>
+              </view>
+              <view class="sales-line flex ai-center">
                 <image
-                  :src="webUrl + '/20221118104357701129.png'"
-                  class="label"
+                  :src="webUrl + '/20221118092713277343.png'"
+                  class="icon"
                   mode="scaleToFill"
                 />
-                <text>￥{{ item.price }}</text>
+                <text>{{ item.sales }}人已购买</text>
               </view>
             </view>
-            <view class="sales-line flex ai-center">
-              <image
-                :src="webUrl + '/20221118092713277343.png'"
-                class="icon"
-                mode="scaleToFill"
-              />
-              <text>{{ item.sales }}人已购买</text>
-            </view>
           </view>
-          <view class="btn" @click="viewAllGoodHandle">
-            查看所有商品
+          <view class="btn">
+            <view class="btn-cont" @click="viewAllGoodHandle">
+              查看所有商品
+              <text class="iconfont icon-jiantou"></text>
+            </view>
           </view>
         </view>
         <!-- 最新资讯 -->
@@ -972,6 +974,19 @@ export default {
     margin-right: 6rpx;
     vertical-align: middle;
   }
+  .btn {
+    display: flex;
+    padding: 20rpx 0;
+    justify-content: center;
+    .btn-cont {
+      padding: 10rpx 30rpx;
+      border: 1px solid #0DC5C5;
+      color: #0DC5C5;
+      .iconfont {
+        font-size: 24rpx;
+      }
+    }
+  }
 }
 
 .container {