绿满眶商城微信小程序-uniapp
zxl
2025-06-19 c9928dd4f6d25e2339ea1400f59ec58674a927a7
pages/commodity-square/commoditySquare.vue
@@ -1,9 +1,10 @@
<template>
   <view class="container">
      <input type="text" v-show="false" v-model="flushDom"/>
      <input type="text" v-show="false" v-model="flushDom" />
      <view class="commoditySquare">
         <view class="left" style="width: 310rpx;">
            <view class="commoditySquareItem" v-for="(item,index) in goodsList1" @click="goToGoodsInfo('goodsList1',item.id)">
            <view class="commoditySquareItem" v-for="(item,index) in goodsList1"
               @click="goToGoodsInfo('goodsList1',item.id)">
               <video :src="item.goodsVideo" v-if="item.goodsVideo " v-show="item.show" :initial-time="0"
                  :controls="false" object-fit="contain" :show-play-btn="false" :show-center-play-btn="false"
                  @loadedmetadata="getvideoInfo($event,'goodsList1',index)" :ref="'video'+item.id"
@@ -21,7 +22,8 @@
            </view>
         </view>
         <view class="right" style="width: 310rpx;">
            <view class="commoditySquareItem" v-for="(item,index) in goodsList2" @click="goToGoodsInfo('goodsList2',item.id)">
            <view class="commoditySquareItem" v-for="(item,index) in goodsList2"
               @click="goToGoodsInfo('goodsList2',item.id)">
               <video :src="item.goodsVideo" v-if="item.goodsVideo " v-show="item.show" :initial-time="0"
                  :controls="false" object-fit="contain" :show-play-btn="false" :show-center-play-btn="false"
                  @loadedmetadata="getvideoInfo($event,'goodsList2',index)" :ref="'video'+item.id"
@@ -53,7 +55,9 @@
            </view>
         </uni-drawer>
      </view>
       <view style="display: flex;align-items: center;justify-content: center;margin-top: 20rpx;" v-if="canLoadMore">没有更多数据了.................</view>
      <view style="display: flex;align-items: center;justify-content: center;margin-top: 20rpx;" v-if="canLoadMore">
         没有更多数据了.................</view>
      <custom-tabbar bgColor="#ffffff" selected="shop"></custom-tabbar>
   </view>
</template>
@@ -75,11 +79,11 @@
            //当前选中的分类
            currentCategort: '',
            //显示没有数据
            canLoadMore:false,
            canLoadMore: false,
            //最大页数
            maxPages: 0,
            //刷新dom使用
            flushDom:'',
            flushDom: '',
            //查询商品需要的参数
            getGoodsParam: {
               keyword: '',
@@ -117,11 +121,11 @@
            console.log(this[arrName][index].width, this[arrName][index].height)
            this.flushDom = new Date();
         },
         goToGoodsInfo(arrName,id){
         const item =this[arrName].find(item=> id === item.id);
         uni.navigateTo({
            url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`
         });
         goToGoodsInfo(arrName, id) {
            const item = this[arrName].find(item => id === item.id);
            uni.navigateTo({
               url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`
            });
         },
         //获取分类导航栏
         async loadCategoryList() {
@@ -150,21 +154,44 @@
               }
            })
            //平分给两个数组
               const middle = Math.ceil(goodsList.data.result.records.length / 2);
               this.goodsList1 = goodsList.data.result.records.slice(0, middle);
               this.goodsList2 = goodsList.data.result.records.slice(middle);
               this.maxPages = goodsList.data.result.pages
               console.log(this.maxPages)
            const middle = Math.ceil(goodsList.data.result.records.length / 2);
            this.goodsList1 = goodsList.data.result.records.slice(0, middle);
            this.goodsList2 = goodsList.data.result.records.slice(middle);
            this.maxPages = goodsList.data.result.pages
            console.log(this.maxPages)
         }
      },
      onShow() {
         this.showDrawer('showLeft')
      },
      onLoad() {
         this.loadCategoryList();
      async onLoad() {
         await this.loadCategoryList();
         this.getGoodsParam.pageNumber = 1
         this.getGoodsParam.categoryId = ""
         this.getGoodsParam.keyword = ""
         const goodsList = await getGoodsList(this.getGoodsParam);
         const sts = await getSTSToken();
         const stsUrl = sts.data.data.endpoint
         // 处理数据
         goodsList.data.result.records.forEach(item => {
            if (item.thumbnail !== '' && item.thumbnail !== null && item.thumbnail.indexOf('http') ===
               -1) {
               item.thumbnail = stsUrl + '/' + item.thumbnail
            }
            if (item.goodsVideo !== '' && item.goodsVideo !== null && item.goodsVideo.indexOf(
                  'http') === -1) {
               item.goodsVideo = stsUrl + '/' + item.goodsVideo
            }
         })
         //平分给两个数组
         const middle = Math.ceil(goodsList.data.result.records.length / 2);
         this.goodsList1 = goodsList.data.result.records.slice(0, middle);
         this.goodsList2 = goodsList.data.result.records.slice(middle);
         this.maxPages = goodsList.data.result.pages
         console.log(this.maxPages)
      },
      async onReachBottom(){
         if(this.getGoodsParam.pageNumber<this.maxPages){
      async onReachBottom() {
         if (this.getGoodsParam.pageNumber < this.maxPages) {
            this.getGoodsParam.pageNumber++;
            const goodsList = await getGoodsList(this.getGoodsParam);
            const sts = await getSTSToken();
@@ -181,14 +208,14 @@
               }
            })
            //平分给两个数组
               const middle = Math.ceil(goodsList.data.result.records.length / 2);
               this.goodsList1 = [...this.goodsList1,...goodsList.data.result.records.slice(0, middle)];
               this.goodsList2 = [...this.goodsList2,...goodsList.data.result.records.slice(middle)];
               this.maxPages = goodsList.data.result.pages
         }else{
            const middle = Math.ceil(goodsList.data.result.records.length / 2);
            this.goodsList1 = [...this.goodsList1, ...goodsList.data.result.records.slice(0, middle)];
            this.goodsList2 = [...this.goodsList2, ...goodsList.data.result.records.slice(middle)];
            this.maxPages = goodsList.data.result.pages
         } else {
            this.canLoadMore = true;
         }
      }
   }
</script>
@@ -222,7 +249,7 @@
   }
   .commoditySquareItem {
      border: 1rpx solid darkgray;
      // border: 1rpx solid #b6dbba;
      border-radius: 12rpx;
      box-sizing: border-box;
      padding: 0 32rpx;