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

zxl

2025-06-26 3bff34c3aa7ad412042272ea6a37b7d5b49b8d9b

 pages/commodity-square/commoditySquare.vue

@@ -1,5 +1,6 @@
<template>
   <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">
         <u-search class="nav-search" @blur='searchGoods' placeholder="搜索商品" :show-action="false"></u-search>
@@ -8,17 +9,17 @@
         <view class="left" style="width: 310rpx;">
            <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"
               <!-- <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"
                  :style="{width:item.width,height:item.height}"></video>
               <image :src="item.thumbnail" v-if="item.goodsVideo ==null  || item.goodsVideo == ''"
                  :style="{width:item.width,height:item.height}"></video> -->
               <image :src="item.thumbnail"
                  mode="aspectFill" class="goodsImg">
               </image>
               <view class="goodsInfo">
                  <view class="">{{item.goodsName}}</view>
                  <view class="goodsName">{{item.goodsName}}</view>
                  <view class="priceInfo">
                     <view class="">￥{{item.price}}</view>
                     <view class="goodsPrice">￥{{item.price}}</view>
                     <view class="">已售: {{item.buyCount}}</view>
                  </view>
               </view>
@@ -27,17 +28,17 @@
         <view class="right" style="width: 310rpx;">
            <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"
<!--                <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"
                  :style="{width:item.width,height:item.height}"></video>
               <image :src="item.thumbnail" v-if="item.goodsVideo ==null || item.goodsVideo == ''"
                  :style="{width:item.width,height:item.height}"></video> -->
               <image :src="item.thumbnail"
                  mode="aspectFill" class="goodsImg">
               </image>
               <view class="goodsInfo">
                  <view class="">{{item.goodsName}}</view>
                  <view class="goodsName">{{item.goodsName}}</view>
                  <view class="priceInfo">
                     <view class="">￥{{item.price}}</view>
                     <view class="goodsPrice">￥{{item.price}}</view>
                     <view class="">已售: {{item.buyCount}}</view>
                  </view>
               </view>
@@ -48,7 +49,7 @@
         <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="94vh" @change="change($event,'showLeft')"
         <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 class="typeNavigationItem" :class="{typeNavigationItemCheck:currentCategort ==item.id}"
@@ -60,11 +61,11 @@
      </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>

<script>
   import TopBar from "@/components/TopBar.vue";
   import {
      getCategoryList,
      getGoodsList
@@ -73,8 +74,12 @@
      getSTSToken
   } from '@/api/common.js'
   export default {
      components: {TopBar},
      data() {
         return {
            //记录两列高度
            listHeight1: 0,
            listHeight2: 0,
            //是否显示打开左侧弹窗
            showLeft: false,
            //商品导航分类
@@ -93,6 +98,7 @@
               pageSize: 12,
               pageNumber: 1,
               categoryId: null,
               canFilter:true
            },
            //商品双列显示
            goodsList1: [],
@@ -100,12 +106,25 @@
         }
      },
      methods: {
         topBarChange(titleObj) {
            if (titleObj.index === 'home') {
               uni.switchTab({
                  url: titleObj.pagePath
               });
            } else {
               uni.redirectTo({
                  url: titleObj.pagePath
               });
            }
         },
         async searchGoods(keyWard) {
            this.getGoodsParam.keyword = keyWard
            this.getGoodsParam.pageNumber = 1
            this.getGoodsParam.categoryId = ''
            this.goodsList1 = []
            this.goodsList2 = []
            this.listHeight1 = 0;
            this.listHeight2 = 0;
            await this.getgoodsData();
         },
         confirm() {},
@@ -126,9 +145,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();
         },
@@ -145,24 +179,48 @@
         },
         async getgoodsData() {
            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 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);
            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;
@@ -172,6 +230,8 @@
            this.getGoodsParam.pageNumber = 1
            this.goodsList1 = [];
            this.goodsList2 = [];
            this.listHeight1 = 0;
            this.listHeight2 = 0;
            await this.getgoodsData();
            console.log(this.maxPages)
         }
@@ -243,7 +303,7 @@

   .openShowLeft {
      position: fixed;
      top: 120rpx;
      top: 200rpx;
      left: 0;
      align-items: center;
      justify-content: flex-start;
@@ -271,11 +331,11 @@
      flex: 1
   }

   .priceInfo {
      margin-top: 10rpx;
      display: flex;
      justify-content: space-around;
   }
   // .priceInfo {
   //    margin-top: 10rpx;
   //    display: flex;
   //    justify-content: space-around;
   // }

   // 处理抽屉内容滚动
   .scroll-view-box {
@@ -324,4 +384,32 @@
      // width: 500rpx;
      // z-index: 9999;
   }
</style>
   .goodsInfo{
      margin-top: 10rpx;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      flex-direction: column;
   }
   .goodsName{
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .priceInfo{
      margin-top: 10rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
   }
   .goodsPrice{
      color: red;
      font-weight: bold;
   }
   .topBar {
      position: fixed;
      top: 20rpx;
      left: 20rpx;
      z-index: 1000
   }
</style>