| | |
| | | <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)"> |
| | |
| | | <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> |
| | |
| | | <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}" |
| | |
| | | </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> |
| | | |
| | |
| | | components: {TopBar}, |
| | | data() { |
| | | return { |
| | | buttonHeight:0, |
| | | //记录两列高度 |
| | | listHeight1: 0, |
| | | listHeight2: 0, |
| | |
| | | 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); |
| | |
| | | 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> |
| | |
| | | .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; |
| | | } |
| | |
| | | } |
| | | |
| | | |
| | | .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; |
| | |
| | | // } |
| | | |
| | | // 处理抽屉内容滚动 |
| | | .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 { |