update 修改商品广场样式

peng

2025-07-02 274b52d99807967726ec3234a744c34e3de3f913

 pages/commodity-square/commoditySquare.vue

@@ -1,67 +1,64 @@
<template>
   <view class="container">
   <view class="container" :style="{paddingTop:buttonHeight+'px'}">
      <input type="text" value="flushDom" v-if="false" />
      <top-bar selectedTitleIndex="shop" textColor="black" @changeTab="topBarChange" class="topBar"></top-bar>
      <input type="text" v-show="false" v-model="flushDom" />
      <view class="search" :style="{marginTop: buttonHeight+'px',}">
         <u-search class="nav-search" @blur='searchGoods' placeholder="搜索商品" :show-action="false"></u-search>
      <view class="search">
         <u-search class="nav-search" @blur='searchGoods' v-model="searchInfo" placeholder="搜索商品"
            :show-action="false"></u-search>
      </view>
      <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)">
               <!-- <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"
                  mode="aspectFill" class="goodsImg">
               </image>
               <view class="goodsInfo">
                  <view class="goodsName">{{item.goodsName}}</view>
                  <view class="priceInfo">
                     <view class="goodsPrice">￥{{item.price}}</view>
                     <view class="">已售: {{item.buyCount}}</view>
                  </view>
               </view>
            </view>
         </view>
         <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"
                  :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"
                  mode="aspectFill" class="goodsImg">
               </image>
               <view class="goodsInfo">
                  <view class="goodsName">{{item.goodsName}}</view>
                  <view class="priceInfo">
                     <view class="goodsPrice">￥{{item.price}}</view>
                     <view class="">已售: {{item.buyCount}}</view>
                  </view>
               </view>
            </view>
         </view>

         <view class="openShowLeft" @click="showDrawer('showLeft')" v-if="!showLeft">
            <uni-icons type="right" size="30"></uni-icons>
         </view>
      </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 style="display: flex;padding: 32rpx;box-sizing: border-box;height: 100%;">
         <view class="navigatorMenue">
            <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 class="goodsInfos">
            <scroll-view :scroll-y="true" :show-scrollbar="false">

               <view class="goodsItem" v-for="item in goodsList" :key="item.id"
                  @click.prevent="goToGoodsInfo(item.id)"
                  style="display: flex;align-items: flex-start;justify-content: flex-start;margin: 10rpx 0;">
                  <view class="pic">
                     <image :src="item.thumbnail" mode="aspectFill"
                        style="height: 150rpx;width: 150rpx;border-radius: 24rpx;">
                     </image>
                  </view>
                  <view class="goodsContent" style="display: flex;align-items: flex-start;justify-content: space-between;
                     margin-left: 10rpx;flex-direction: column;width: 100%;">
                     <view class="goodsName">
                        <text style="background-color: #f92e20;color: #fff;
                           font-weight: bold;border-radius: 12rpx;padding: 5rpx;
                           margin-right: 15rpx;">预售</text>
                        <text>{{item.goodsName}}</text>
                     </view>
                     <view
                        style="display: flex; justify-content: space-between;align-items:center; 100%;margin-top: 32rpx;width: 100%;">
                        <view class="goodsPrice">￥{{item.price}}</view>
                        <view class="addCard" style="display: flex; align-items: center;">
                           <view style="padding: 20rpx 0 20rpx 20rpx;" v-show="item.cardNum && item.cardNum>0"
                              @click.stop="miousCardNum($event,item.id)">
                              <uni-icons type="minus" size="30" color="#96a6bc"></uni-icons>
                           </view>
                           <input v-show="item.cardNum&&item.cardNum>0" :maxlength="2" type="number"
                              confirm-type="numeric" style="width: 50rpx;text-align: center;"
                              v-model="item.cardNum" :disabled="true" />
                           <view style="padding: 20rpx 20rpx 20rpx 0;"
                              @click.stop="addCardNum($event,item.id)">
                              <uni-icons type="plus" size="30" color="#e06c75"></uni-icons>
                              <!-- <text class="iconfont" style="size: 1.5em;">&#xe7b1;</text> -->
                           </view>
                        </view>
                     </view>
                  </view>
               </view>
            </scroll-view>
         </view>
      </view>

   </view>
</template>

@@ -72,18 +69,27 @@
      getGoodsList
   } from "@/api/goods.js";
   import {
      addCard,
      getCarts,
      deleteSkuItem
   } from '@/api/trade.js'
   import {
      getSTSToken
   } from '@/api/common.js'
   import {
      data
   } from "../../components/uview-components/uview-ui/libs/mixin/mixin";
   export default {
      components: {TopBar},
      components: {
         TopBar
      },
      data() {
         return {
            buttonHeight:0,
            searchInfo: '',
            //商品列表
            goodsList: [],
            buttonHeight: 0,
            //记录两列高度
            listHeight1: 0,
            listHeight2: 0,
            //是否显示打开左侧弹窗
            showLeft: false,
            //商品导航分类
            categoryList: [],
            //当前选中的分类
@@ -100,14 +106,79 @@
               pageSize: 12,
               pageNumber: 1,
               categoryId: null,
               canFilter:true
               canFilter: true
            },
            //商品双列显示
            goodsList1: [],
            goodsList2: [],
         }
      },
      methods: {
         addCardNum(e, id) {
            this.goodsList.forEach(item => {
               if (item.id === id) {
                  if (item.cardNum) {
                     item.cardNum++;
                  } else {
                     item.cardNum = 1;
                  }
                  this.flushDom = new Date().getMilliseconds();
                  console.log("选中的商品为------------------->", JSON.stringify(item))
                  const data = {
                     skuId: item.id,
                     num: item.cardNum
                  }
                  addCard(data)
                  return;
               }
            })

         },
         miousCardNum(e, id) {
            for (let i = 0; i < this.goodsList.length; i++) {
               const item = this.goodsList[i];
               if (item.id === id) {
                  if (item.cardNum && item.cardNum > 1) {
                     item.cardNum--;
                  } else {
                     deleteSkuItem([id]);
                     item.cardNum = 0;
                     this.flushDom = new Date().getMilliseconds();
                     break; // 退出整个循环
                  }
                  this.flushDom = new Date().getMilliseconds();
                  const data = {
                     skuId: item.id,
                     num: item.cardNum
                  };
                  addCard(data);
                  break; // 退出整个循环
               }
            }
            // this.goodsList.forEach(item => {
            //    console.log('测试为什么不进入循环1',id,JSON.stringify(item.cardNum))
            //    if (item.id === id) {
            //       console.log('测试为什么不进入循环2',id,JSON.stringify(item.cardNum))
            //       if (item.cardNum && item.cardNum > 1) {
            //          console.log('测试为什么不进入循环3',id,JSON.stringify(item.cardNum))
            //          item.cardNum--;
            //       } else {
            //          console.log('测试为什么不进入循环4',id,JSON.stringify(item.cardNum))
            //          deleteSkuItem([id])
            //          item.cardNum = 0;
            //          this.flushDom = new Date().getMilliseconds();
            //          return;
            //       }
            //       this.flushDom = new Date().getMilliseconds();
            //       console.log("选中的商品为------------------->", JSON.stringify(item))
            //       console.log(item.cardNum, item.id)
            //       const data = {
            //          skuId: item.id,
            //          num: item.cardNum
            //       }
            //       addCard(data)
            //       return;
            //    }
            // })

         },
         topBarChange(titleObj) {
            if (titleObj.index === 'home') {
               uni.switchTab({
@@ -123,10 +194,6 @@
            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() {},
@@ -168,8 +235,8 @@
            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);
         goToGoodsInfo(id) {
            const item = this.goodsList.find(item => id === item.id);
            uni.navigateTo({
               url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`
            });
@@ -182,80 +249,66 @@
            } else {
               this.canLoadMore = true;
            }
			

         },
         //获取分类导航栏
         async loadCategoryList() {
            let list = await getCategoryList(0);
            list.data.result.unshift({
               id: 'ALL',
               name: '全部'
            })
            this.categoryList = list.data.result
         },
         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 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
            const cardInfos = await getCarts();
            // 处理购物车信息
            let cardMap = new Map();
            cardInfos.data.result.cartList.forEach(item => {

            // if(this.listHeight1===0||this.listHeight2===0)}
            this.listHeight1 += middle * 300;
            this.listHeight2 += (goodsSize - middle) * 300
               item.skuList.forEach(sku => {
                  cardMap.set(sku.goodsSku.id, {
                     skuId: sku.goodsSku.id,
                     num: sku.num
                  })
               })

            })
            //回显购物车数据
            const goodsList = await getGoodsList(this.getGoodsParam);
            goodsList.data.result.records.forEach(item => {
               const cardItem = cardMap.get(item.id);
               if (cardItem) {
                  item.cardNum = cardItem.num;
               }
            })
            this.goodsList = goodsList.data.result.records;

         },
         async chooseCategory(id) {
            this.searchInfo = '';
            this.canLoadMore = false;
            this.currentCategort = id
            this.getGoodsParam.categoryId = id
            this.getGoodsParam.keyword = ''
            this.getGoodsParam.pageNumber = 1
            this.goodsList1 = [];
            this.goodsList2 = [];
            this.listHeight1 = 0;
            this.listHeight2 = 0;
            this.goodsList = []
            if (id === 'ALL') {
               this.getGoodsParam.categoryId = '';
            } else {
               this.getGoodsParam.categoryId = id
            }
            await this.getgoodsData();
            console.log(this.maxPages)
         }
      },
      onShow() {
         this.showDrawer('showLeft')
      },

      async onLoad() {
         // 获取状态栏高度
         const systemInfo = uni.getSystemInfoSync();
         this.buttonHeight = systemInfo.statusBarHeight +40;
         console.log('-------------------------------->',this.buttonHeight)

         this.buttonHeight = systemInfo.statusBarHeight + 40;
         console.log('-------------------------------->', JSON.stringify(systemInfo))
         await this.loadCategoryList();
         this.getGoodsParam.pageNumber = 1
         this.getGoodsParam.categoryId = ""
@@ -271,106 +324,35 @@
      padding-bottom: 64rpx;
      height: 100vh;
      overflow: hidden;

   }

   .commoditySquare {
      width: 750rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-around;

   .navigatorMenue {
      margin-left: -32rpx;
      background-color: #f4f4f4;
      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;
      width: 200rpx;
      border-radius: 0 24rpx 24rpx 0;
   }

   .right {
      box-sizing: border-box;
   .goodsInfos {
      width: 500rpx;
      margin-left: 10rpx;
   }

   .goodsImg {
      width: 300rpx;
      height: 300rpx;
      padding-bottom: 10rpx;
   }

   .commoditySquareItem {
      // border: 1rpx solid #b6dbba;
      border-radius: 12rpx;
      box-sizing: border-box;
      padding: 0 32rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
   }

   .commoditySquareItem:nth-child(n+1) {
      margin-top: 32rpx;
   }

   .openShowLeft {
   .topBar {
      position: fixed;
      top: 200rpx;
      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;
      top: 20rpx;
      left: 20rpx;
      z-index: 1000;
      background-color: #ffffff;
   }

   .navigationLeft {
      position: relative;
      background-color: #fcfcfc;
      // opacity: 0.5;
      box-sizing: border-box;
   }


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

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

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


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

   .typeNavigationItem {
@@ -387,51 +369,22 @@
      border: 0;
   }

   .closeShowLeft {
      position: absolute;
      top: 20rpx;
      right: 0;
   }

   .nav-search {
      padding-left: 30rpx !important;
      padding-right: 20rpx !important;
      // position: fixed;
      // top: 0;
      // width: 500rpx;
      // z-index: 9999;
   }
   .goodsInfo{
      margin-top: 10rpx;
   .goodsName {
      padding: 10rpx;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      flex-direction: column;
   }
   .goodsName{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      height: 32rpx;
      height: 52rpx;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
      text-align: start;
      vertical-align: middle;
   }
   .priceInfo{
      margin-top: 10rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
   }
   .goodsPrice{

   .goodsPrice {
      color: red;
      font-weight: bold;
   }
   .topBar {
      position: fixed;
      top: 20rpx;
      left: 20rpx;
      z-index: 1000
   }
</style>
</style>