| | |
| | | <template> |
| | | <view class="container"> |
| | | <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> |
| | | </view> |
| | | <view class="commoditySquare"> |
| | | <view class="left" style="width: 310rpx;"> |
| | | <view class="commoditySquareItem" v-for="(item,index) in goodsList1" |
| | |
| | | <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" @change="change($event,'showLeft')" |
| | | class="navigationLeft"> |
| | | <view class="typeNavigation"> |
| | | <uni-drawer ref="showLeft" mode="left" width="120" height="94vh" @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}" |
| | | @click="chooseCategory(item.id)" v-for="item in categoryList" :key="item.id"> |
| | | {{item.name}} |
| | | </view> |
| | | </view> |
| | | </scroll-view> |
| | | </uni-drawer> |
| | | </view> |
| | | <view style="display: flex;align-items: center;justify-content: center;margin-top: 20rpx;" v-if="canLoadMore"> |
| | |
| | | } |
| | | }, |
| | | methods: { |
| | | async searchGoods(keyWard) { |
| | | this.getGoodsParam.keyword = keyWard |
| | | this.getGoodsParam.pageNumber = 1 |
| | | this.getGoodsParam.categoryId = '' |
| | | this.goodsList1 = [] |
| | | this.goodsList2 = [] |
| | | await this.getgoodsData(); |
| | | }, |
| | | confirm() {}, |
| | | // 打开窗口 |
| | | showDrawer(e) { |
| | |
| | | let list = await getCategoryList(0); |
| | | this.categoryList = list.data.result |
| | | }, |
| | | async chooseCategory(id) { |
| | | if (this.currentCategort === id) return |
| | | this.canLoadMore = false; |
| | | this.currentCategort = id |
| | | this.getGoodsParam.categoryId = id |
| | | this.getGoodsParam.keyword = '' |
| | | this.getGoodsParam.pageNumber = 1 |
| | | 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 middle = Math.ceil(goodsList.data.result.records.length / 2); |
| | | this.goodsList1 = goodsList.data.result.records.slice(0, middle); |
| | | this.goodsList2 = goodsList.data.result.records.slice(middle); |
| | | this.maxPages = goodsList.data.result.pages |
| | | console.log(this.maxPages) |
| | | } |
| | | }, |
| | | onShow() { |
| | | this.showDrawer('showLeft') |
| | | }, |
| | | async onLoad() { |
| | | await this.loadCategoryList(); |
| | | this.getGoodsParam.pageNumber = 1 |
| | | this.getGoodsParam.categoryId = "" |
| | | this.getGoodsParam.keyword = "" |
| | | 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 middle = Math.ceil(goodsList.data.result.records.length / 2); |
| | | this.goodsList1 = goodsList.data.result.records.slice(0, middle); |
| | | this.goodsList2 = goodsList.data.result.records.slice(middle); |
| | | this.maxPages = goodsList.data.result.pages |
| | | console.log(this.maxPages) |
| | | }, |
| | | async onReachBottom() { |
| | | if (this.getGoodsParam.pageNumber < this.maxPages) { |
| | | this.getGoodsParam.pageNumber++; |
| | | async getgoodsData() { |
| | | const goodsList = await getGoodsList(this.getGoodsParam); |
| | | const sts = await getSTSToken(); |
| | | const stsUrl = sts.data.data.endpoint |
| | |
| | | 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 |
| | | }, |
| | | async chooseCategory(id) { |
| | | this.canLoadMore = false; |
| | | this.currentCategort = id |
| | | this.getGoodsParam.categoryId = id |
| | | this.getGoodsParam.keyword = '' |
| | | this.getGoodsParam.pageNumber = 1 |
| | | this.goodsList1 = []; |
| | | this.goodsList2 = []; |
| | | await this.getgoodsData(); |
| | | console.log(this.maxPages) |
| | | } |
| | | }, |
| | | onShow() { |
| | | this.showDrawer('showLeft') |
| | | }, |
| | | async onLoad() { |
| | | 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; |
| | | } |
| | |
| | | |
| | | .openShowLeft { |
| | | position: fixed; |
| | | top: 30rpx; |
| | | top: 120rpx; |
| | | 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; |
| | | } |
| | | |
| | | .navigationLeft { |
| | |
| | | |
| | | |
| | | .typeNavigation { |
| | | box-sizing: border-box; |
| | | padding: 10rpx; |
| | | position: relative; |
| | | height: 100%; |
| | | // position: relative; |
| | | } |
| | | |
| | | .typeNavigationItem { |
| | |
| | | top: 20rpx; |
| | | right: 0; |
| | | } |
| | | |
| | | .nav-search { |
| | | padding-left: 30rpx !important; |
| | | padding-right: 20rpx !important; |
| | | // position: fixed; |
| | | // top: 0; |
| | | // width: 500rpx; |
| | | // z-index: 9999; |
| | | } |
| | | </style> |