绿满眶商城微信小程序-uniapp
zxl
2025-07-30 61032da9f6f840c9c96af090d1810bc7a0734f4b
pages/commodity-square/commoditySquare.vue
@@ -3,7 +3,7 @@
      <input type="text" value="flushDom" v-if="false" />
      <top-bar selectedTitleIndex="shop" textColor="black" @changeTab="topBarChange" class="topBar"></top-bar>
      <view class="search">
         <u-search class="nav-search" @blur='searchGoods' v-model="searchInfo" placeholder="搜索商品"
         <u-search class="nav-search" @change='searchGoods' v-model="searchInfo" placeholder="搜索商品"
            :show-action="false"></u-search>
      </view>
      <view style="display: flex;padding: 32rpx;box-sizing: border-box;height: 100%;">
@@ -16,25 +16,27 @@
            </scroll-view>
         </view>
         <view class="goodsInfos">
            <scroll-view :scroll-y="true" :show-scrollbar="false">
         <view class="goodsInfos" style="position: relative;">
            <scroll-view :scroll-y="true" :show-scrollbar="false" style="height: 100%;" @scrolltolower="loadMoreData()">
               <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">
                  style="display: flex;align-items: flex-start;justify-content: flex-start;margin: 10rpx 0;
                  box-sizing: border-box; ">
                  <view class="pic" style="position: relative;">
                     <image :src="item.thumbnail" mode="aspectFill"
                        style="height: 150rpx;width: 150rpx;border-radius: 24rpx;">
                     </image>
                     <text style="background-color: #f92e20;color: #fff;
                        font-weight: bold;border-radius: 12rpx;padding: 5rpx;
                        margin-right: 15rpx;position: absolute;top: 0;left: 0;" v-if="item.salesModel==='PRESALE'">预售</text>
                  </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>
@@ -43,7 +45,7 @@
                              @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"
                           <input v-show="item.cardNum&&item.cardNum>0" @click.stop="" :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;"
@@ -56,6 +58,10 @@
                  </view>
               </view>
            </scroll-view>
            </view>
            <view   @click="gotoCardList()" style="position: absolute;bottom: 120rpx; right: 32rpx;">
              <div class="settlement" >去购物车结算</div>
            </view>
         </view>
      </view>
@@ -85,6 +91,8 @@
      },
      data() {
         return {
            canGoToCarList:false,
            nums:10,
            searchInfo: '',
            //商品列表
            goodsList: [],
@@ -106,11 +114,17 @@
               pageSize: 12,
               pageNumber: 1,
               categoryId: null,
               canFilter: true
               canFilter: true,
               needFilterPre:true
            },
         }
      },
      methods: {
         gotoCardList(){
            uni.navigateTo({
               url:'/pages/cusbar/cart/cartList'
            })
         },
         addCardNum(e, id) {
            this.goodsList.forEach(item => {
               if (item.id === id) {
@@ -194,6 +208,7 @@
            this.getGoodsParam.keyword = keyWard
            this.getGoodsParam.pageNumber = 1
            this.getGoodsParam.categoryId = ''
            this.goodsList = [];
            await this.getgoodsData();
         },
         confirm() {},
@@ -237,12 +252,14 @@
         },
         goToGoodsInfo(id) {
            const item = this.goodsList.find(item => id === item.id);
            console.log(item)
            uni.navigateTo({
               url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`
            });
         },
         //触底获取数据
         async loadMoreData() {
            console.log("触底加载------------》",this.maxPages)
            if (this.getGoodsParam.pageNumber < this.maxPages) {
               this.getGoodsParam.pageNumber++;
               await this.getgoodsData()
@@ -264,6 +281,7 @@
            const cardInfos = await getCarts();
            // 处理购物车信息
            let cardMap = new Map();
         this.canGoToCarList =   cardInfos.data.result.cartList.length>0
            cardInfos.data.result.cartList.forEach(item => {
               item.skuList.forEach(sku => {
@@ -282,7 +300,9 @@
                  item.cardNum = cardItem.num;
               }
            })
            this.goodsList = goodsList.data.result.records;
            this.goodsList = [...this.goodsList,...goodsList.data.result.records];
            this.maxPages = goodsList.data.result.pages
            console.log('this.goodsList----------------------->',JSON.stringify(goodsList.data.result))
         },
         async chooseCategory(id) {
@@ -326,7 +346,16 @@
      overflow: hidden;
   }
   .settlement {
     width: 180rpx;
     height: 70rpx;
     line-height: 70rpx;
     background: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%);
     border-radius: 900rpx;
     text-align: center;
     color: #fff;
     margin-right: 10rpx;
   }
   .navigatorMenue {
      margin-left: -32rpx;