From 4c3dbf9c9d6e4c657d059c64803ad0e752753576 Mon Sep 17 00:00:00 2001 From: peng <peng.com> Date: 星期五, 27 六月 2025 10:57:02 +0800 Subject: [PATCH] update 修改商品广场页面 --- pages/kitchen/KitchenVideo.vue | 2 uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue | 9 +++- pages/commodity-square/commoditySquare.vue | 83 ++++++++++++++++++++++++----------------- 3 files changed, 56 insertions(+), 38 deletions(-) diff --git a/pages/commodity-square/commoditySquare.vue b/pages/commodity-square/commoditySquare.vue index 8a0e232..92a9545 100644 --- a/pages/commodity-square/commoditySquare.vue +++ b/pages/commodity-square/commoditySquare.vue @@ -2,10 +2,11 @@ <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"> + <view class="search" :style="{marginTop: buttonHeight+10+'px',}"> <u-search class="nav-search" @blur='searchGoods' placeholder="鎼滅储鍟嗗搧" :show-action="false"></u-search> </view> - <view class="commoditySquare"> + <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)"> @@ -20,7 +21,7 @@ <view class="goodsName">{{item.goodsName}}</view> <view class="priceInfo"> <view class="goodsPrice">锟{item.price}}</view> - <view class="">宸插敭: {{item.buyCount}}</view> + <view class="">宸插敭1: {{item.buyCount}}</view> </view> </view> </view> @@ -39,17 +40,20 @@ <view class="goodsName">{{item.goodsName}}</view> <view class="priceInfo"> <view class="goodsPrice">锟{item.price}}</view> - <view class="">宸插敭: {{item.buyCount}}</view> + <view class="">宸插敭2: {{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> - <uni-drawer ref="showLeft" mode="left" width="120" height="80vh" @change="change($event,'showLeft')" + </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"> <scroll-view class="typeNavigation" :scroll-y="true" show-scrollbar="false"> <view class="typeNavigationItem" :class="{typeNavigationItemCheck:currentCategort ==item.id}" @@ -58,9 +62,6 @@ </view> </scroll-view> </uni-drawer> - </view> - <view style="display: flex;align-items: center;justify-content: center;margin-top: 20rpx;" v-if="canLoadMore"> - 娌℃湁鏇村鏁版嵁浜�.................</view> </view> </template> @@ -77,6 +78,7 @@ components: {TopBar}, data() { return { + buttonHeight:0, //璁板綍涓ゅ垪楂樺害 listHeight1: 0, listHeight2: 0, @@ -172,6 +174,16 @@ url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}` }); }, + //瑙﹀簳鑾峰彇鏁版嵁 + async loadMoreData() { + if (this.getGoodsParam.pageNumber < this.maxPages) { + this.getGoodsParam.pageNumber++; + await this.getgoodsData() + } else { + this.canLoadMore = true; + } + + }, //鑾峰彇鍒嗙被瀵艰埅鏍� async loadCategoryList() { let list = await getCategoryList(0); @@ -240,20 +252,15 @@ this.showDrawer('showLeft') }, async onLoad() { + // 鑾峰彇鐘舵�佹爮楂樺害 + const systemInfo = uni.getSystemInfoSync(); + this.buttonHeight = systemInfo.statusBarHeight +80; + console.log('-------------------------------->',this.buttonHeight) await this.loadCategoryList(); this.getGoodsParam.pageNumber = 1 this.getGoodsParam.categoryId = "" this.getGoodsParam.keyword = "" await this.getgoodsData() - }, - async onReachBottom() { - if (this.getGoodsParam.pageNumber < this.maxPages) { - this.getGoodsParam.pageNumber++; - await this.getgoodsData() - } else { - this.canLoadMore = true; - } - } } </script> @@ -262,16 +269,22 @@ .container { width: 750rpx; padding-bottom: 64rpx; + height: 100vh; + overflow: hidden; } .commoditySquare { width: 750rpx; - position: relative; box-sizing: border-box; display: flex; justify-content: space-around; + height: 100%; } - + .scrollContainer{ + overflow: hidden; + height: 1224rpx; + -webkit-overflow-scrolling: touch; + } .left { box-sizing: border-box; } @@ -323,13 +336,13 @@ } - .scroll-view { - /* #ifndef APP-NVUE */ - width: 100%; - height: 100%; - /* #endif */ - flex: 1 - } + // .scroll-view { + // /* #ifndef APP-NVUE */ + // width: 100%; + // height: 100%; + // /* #endif */ + // flex: 1 + // } // .priceInfo { // margin-top: 10rpx; @@ -338,14 +351,14 @@ // } // 澶勭悊鎶藉眽鍐呭婊氬姩 - .scroll-view-box { - flex: 1; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - } + // .scroll-view-box { + // flex: 1; + // position: absolute; + // top: 0; + // right: 0; + // bottom: 0; + // left: 0; + // } .typeNavigation { diff --git a/pages/kitchen/KitchenVideo.vue b/pages/kitchen/KitchenVideo.vue index a01aae6..3a50db6 100644 --- a/pages/kitchen/KitchenVideo.vue +++ b/pages/kitchen/KitchenVideo.vue @@ -237,7 +237,7 @@ </view> </view> </uni-popup> - <uni-drawer ref="showLeft" mode="left" width="120" :cus-style="true" height="93vh" + <uni-drawer ref="showLeft" mode="left" width="120" :cus-style="true" height="80vh" @change="change($event,'showLeft')" class="navigationLeft"> <scroll-view class="typeNavigation" :scroll-y="true" :show-scrollbar="false"> <view class="typeNavigationItem" :class="{typeNavigationItemCheck:currentCategort ==item.id}" diff --git a/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue b/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue index 5608140..3c00f18 100644 --- a/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue +++ b/uni_modules/uni-drawer/components/uni-drawer/uni-drawer.vue @@ -1,7 +1,7 @@ <template> <view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear"> <view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" /> - <view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer,'custom-style':cusStyle}" :style="{width:drawerWidth+'px',maxHeight:drawerHeight}"> + <view class="uni-drawer__content" :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer,'custom-style':cusStyle}" :style="{width:drawerWidth+'px',maxHeight:drawerHeight,top:drawerTop+'rpx'}"> <slot /> </view> <!-- #ifdef H5 --> @@ -76,6 +76,10 @@ cusStyle: { type: Boolean, default: false + }, + drawerTop:{ + type: Number, + default: 0 } }, data() { @@ -86,12 +90,14 @@ watchTimer: null, drawerWidth: 220, drawerHeight: null, + drawerTop:0 } }, created() { // #ifndef APP-NVUE this.drawerWidth = this.width this.drawerHeight = this.height + this.drawerTop = this.drawerTop console.log("鎵ц浜�",this.drawerHeight,this.height) // #endif this.rightMode = this.mode === 'right' @@ -154,7 +160,6 @@ } .custom-style{ border-radius: 0 24rpx 24rpx 0; - top: 100px; } .uni-drawer--left { -- Gitblit v1.8.0