视频发布商品搜索从第0页开始

xiangpei

2025-06-29 d6e3b7494c1d6a6d7e8d000258d0f38265cc5563

 pages/commodity-square/commoditySquare.vue

@@ -2,10 +2,11 @@
   <view class="container">
      <top-bar selectedTitleIndex="shop" textColor="black" @changeTab="topBarChange" class="topBar"></top-bar>
      <input type="text" v-show="false" v-model="flushDom" />
      <view class="search">
      <view class="search" :style="{marginTop: buttonHeight+'px',}">
         <u-search class="nav-search" @blur='searchGoods' placeholder="搜索商品" :show-action="false"></u-search>
      </view>
      <view class="commoditySquare">
      <scroll-view class="scrollContainer"  :scroll-y="true" @scrolltolower="loadMoreData" >
         <view class="commoditySquare">
         <view class="left" style="width: 310rpx;">
            <view class="commoditySquareItem" v-for="(item,index) in goodsList1"
               @click="goToGoodsInfo('goodsList1',item.id)">
@@ -45,22 +46,22 @@
            </view>
         </view>


         <view class="openShowLeft" @click="showDrawer('showLeft')" v-if="!showLeft">
            <uni-icons type="right" size="30"></uni-icons>
         </view>
         <uni-drawer ref="showLeft" mode="left" width="120" height="80vh" @change="change($event,'showLeft')"
            :cus-style="true" class="navigationLeft">
            <scroll-view class="typeNavigation" :scroll-y="true" show-scrollbar="false">
      </view>
      <view style="display: flex;align-items: center;justify-content: center;margin-top: 20rpx;" v-if="canLoadMore">
         没有更多数据了.................</view>
      </scroll-view>
         <uni-drawer ref="showLeft" mode="left" width="120" height="80vh" :drawerTop="buttonHeight" @change="change($event,'showLeft')"
            :cus-style="true" class="navigationLeft" :mask="false">
            <scroll-view class="typeNavigation" :scroll-y="true" :show-scrollbar="false" >
               <view class="typeNavigationItem" :class="{typeNavigationItemCheck:currentCategort ==item.id}"
                  @click="chooseCategory(item.id)" v-for="item in categoryList" :key="item.id">
                  {{item.name}}
               </view>
            </scroll-view>
         </uni-drawer>
      </view>
      <view style="display: flex;align-items: center;justify-content: center;margin-top: 20rpx;" v-if="canLoadMore">
         没有更多数据了.................</view>
   </view>
</template>

@@ -77,6 +78,7 @@
      components: {TopBar},
      data() {
         return {
            buttonHeight:0,
            //记录两列高度
            listHeight1: 0,
            listHeight2: 0,
@@ -172,6 +174,16 @@
               url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`
            });
         },
         //触底获取数据
         async loadMoreData() {
            if (this.getGoodsParam.pageNumber < this.maxPages) {
               this.getGoodsParam.pageNumber++;
               await this.getgoodsData()
            } else {
               this.canLoadMore = true;
            }
			
         },
         //获取分类导航栏
         async loadCategoryList() {
            let list = await getCategoryList(0);
@@ -240,20 +252,15 @@
         this.showDrawer('showLeft')
      },
      async onLoad() {
         // 获取状态栏高度
         const systemInfo = uni.getSystemInfoSync();
         this.buttonHeight = systemInfo.statusBarHeight +40;
         console.log('-------------------------------->',this.buttonHeight)
         await this.loadCategoryList();
         this.getGoodsParam.pageNumber = 1
         this.getGoodsParam.categoryId = ""
         this.getGoodsParam.keyword = ""
         await this.getgoodsData()
      },
      async onReachBottom() {
         if (this.getGoodsParam.pageNumber < this.maxPages) {
            this.getGoodsParam.pageNumber++;
            await this.getgoodsData()
         } else {
            this.canLoadMore = true;
         }

      }
   }
</script>
@@ -262,16 +269,27 @@
   .container {
      width: 750rpx;
      padding-bottom: 64rpx;
      height: 100vh;
      overflow: hidden;
   }

   .commoditySquare {
      width: 750rpx;
      position: relative;
      box-sizing: border-box;
      display: flex;
      justify-content: space-around;
      height: 100%;
   }

   .scrollContainer{
      overflow: hidden;
      height: 1224rpx;
      -webkit-overflow-scrolling: touch;
   }
   .scrollContainer::-webkit-scrollbar {
     display: none; /* Chrome/Safari等 */
     width: 0 !important; /* 兼容iOS */
     height: 0 !important;
   }
   .left {
      box-sizing: border-box;
   }
@@ -323,13 +341,13 @@
   }


   .scroll-view {
      /* #ifndef APP-NVUE */
      width: 100%;
      height: 100%;
      /* #endif */
      flex: 1
   }
   // .scroll-view {
   //    /* #ifndef APP-NVUE */
   //    width: 100%;
   //    height: 100%;
   //    /* #endif */
   //    flex: 1
   // }

   // .priceInfo {
   //    margin-top: 10rpx;
@@ -338,14 +356,14 @@
   // }

   // 处理抽屉内容滚动
   .scroll-view-box {
      flex: 1;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
   }
   // .scroll-view-box {
   //    flex: 1;
   //    position: absolute;
   //    top: 0;
   //    right: 0;
   //    bottom: 0;
   //    left: 0;
   // }


   .typeNavigation {
@@ -360,13 +378,12 @@
      font-size: 28rpx;
      color: black;
      margin-top: 10rpx;
      border-radius: 12rpx;
      border: 1rpx solid gray;
   }

   .typeNavigationItemCheck {
      background-color: #42b993;
      color: #fff;
      color: #ef321e;
      font-size: 32rpx;
      font-weight: bold;
      border: 0;
   }

@@ -392,9 +409,14 @@
      flex-direction: column;
   }
   .goodsName{
      display: flex;
      align-items: center;
      justify-content: center;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      height: 32rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
      vertical-align: middle;
   }
   .priceInfo{
      margin-top: 10rpx;