Merge remote-tracking branch 'origin/dev' into dev

zxl

2025-06-24 e50f021ddf73b80f5a1273b8b01e7dd4344a4cdc

 pages/commodity-square/commoditySquare.vue

@@ -1,6 +1,9 @@
<template>
   <view class="container">
      <input type="text" v-show="false" v-model="flushDom" />
      <view class="search">
         <u-search class="nav-search" @blur='searchGoods' placeholder="搜索商品" :show-action="false"></u-search>
      </view>
      <view class="commoditySquare">
         <view class="left" style="width: 310rpx;">
            <view class="commoditySquareItem" v-for="(item,index) in goodsList1"
@@ -45,14 +48,14 @@
         <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" @change="change($event,'showLeft')"
            class="navigationLeft">
            <view class="typeNavigation">
         <uni-drawer ref="showLeft" mode="left" width="120" height="94vh" @change="change($event,'showLeft')"
            :cus-style="true" class="navigationLeft">
            <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>
            </view>
            </scroll-view>
         </uni-drawer>
      </view>
      <view style="display: flex;align-items: center;justify-content: center;margin-top: 20rpx;" v-if="canLoadMore">
@@ -72,6 +75,9 @@
   export default {
      data() {
         return {
            //记录两列高度
            listHeight1: 0,
            listHeight2: 0,
            //是否显示打开左侧弹窗
            showLeft: false,
            //商品导航分类
@@ -97,6 +103,14 @@
         }
      },
      methods: {
         async searchGoods(keyWard) {
            this.getGoodsParam.keyword = keyWard
            this.getGoodsParam.pageNumber = 1
            this.getGoodsParam.categoryId = ''
            this.goodsList1 = []
            this.goodsList2 = []
            await this.getgoodsData();
         },
         confirm() {},
         // 打开窗口
         showDrawer(e) {
@@ -115,9 +129,24 @@
            const height = e.detail.height;
            this[arrName][index].width = 310 + 'rpx';
            //计算宽高比
            const videoHeight = 310 / (wight / height)
            this[arrName][index].height = Math.floor(videoHeight) + 'rpx';
            const videoHeight = Math.floor(310 / (wight / height))
            this[arrName][index].height = videoHeight + 'rpx';
            this[arrName][index].show = true;
            //计算集合高度
            if (arrName === 'goodsList2') {
               if (videoHeight > 300) {
                  this.listHeight2 += videoHeight;
               } else if (videoHeight < 300) {
                  this.listHeight2 -= videoHeight;
               }
            }
            if (arrName === 'goodsList1') {
               if (videoHeight > 300) {
                  this.listHeight1 += videoHeight;
               } else if (videoHeight < 300) {
                  this.listHeight1 -= videoHeight;
               }
            }
            console.log(this[arrName][index].width, this[arrName][index].height)
            this.flushDom = new Date();
         },
@@ -132,13 +161,7 @@
            let list = await getCategoryList(0);
            this.categoryList = list.data.result
         },
         async chooseCategory(id) {
            if (this.currentCategort === id) return
            this.canLoadMore = false;
            this.currentCategort = id
            this.getGoodsParam.categoryId = id
            this.getGoodsParam.keyword = ''
            this.getGoodsParam.pageNumber = 1
         async getgoodsData() {
            const goodsList = await getGoodsList(this.getGoodsParam);
            const sts = await getSTSToken();
            const stsUrl = sts.data.data.endpoint
@@ -153,11 +176,45 @@
                  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);
            const goodsSize = goodsList.data.result.records.length;
            let middle = Math.ceil(goodsSize / 2);
            //判断那个集合长度高 重新分配集合数据
            const diffHeight = this.listHeight1 - this.listHeight2;
            //list1长度大于list2
            if (diffHeight > 0) {
               const needCount = Math.floor(diffHeight / 300)
               if (needCount > 6) {
                  middle = 0;
               } else {
                  middle -= needCount;
               }
            } else if(diffHeight < 0) {
               const needCount = Math.abs(Math.floor(diffHeight / 300))
               if (needCount > 6) {
                  middle += 6
               } else {
                  middle = needCount;
               }
            }
            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

            // if(this.listHeight1===0||this.listHeight2===0)}
            this.listHeight1 += middle * 300;
            this.listHeight2 += (goodsSize - middle) * 300
         },
         async chooseCategory(id) {
            this.canLoadMore = false;
            this.currentCategort = id
            this.getGoodsParam.categoryId = id
            this.getGoodsParam.keyword = ''
            this.getGoodsParam.pageNumber = 1
            this.goodsList1 = [];
            this.goodsList2 = [];
            await this.getgoodsData();
            console.log(this.maxPages)
         }
      },
@@ -169,49 +226,12 @@
         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)
         await this.getgoodsData()
      },
      async onReachBottom() {
         if (this.getGoodsParam.pageNumber < this.maxPages) {
            this.getGoodsParam.pageNumber++;
            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 = [...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
            await this.getgoodsData()
         } else {
            this.canLoadMore = true;
         }
@@ -265,8 +285,16 @@

   .openShowLeft {
      position: fixed;
      top: 30rpx;
      top: 120rpx;
      left: 0;
      align-items: center;
      justify-content: flex-start;
      background-color: #b6b6b6;
      opacity: 0.8;
      z-index: 999;
      height: 70rpx;
      width: 50rpx;
      border-radius: 0 50% 50% 0;
   }

   .navigationLeft {
@@ -303,8 +331,10 @@


   .typeNavigation {
      box-sizing: border-box;
      padding: 10rpx;
      position: relative;
      height: 100%;
      // position: relative;
   }

   .typeNavigationItem {
@@ -327,4 +357,13 @@
      top: 20rpx;
      right: 0;
   }

   .nav-search {
      padding-left: 30rpx !important;
      padding-right: 20rpx !important;
      // position: fixed;
      // top: 0;
      // width: 500rpx;
      // z-index: 9999;
   }
</style>