| | |
| | | <template> |
| | | <view class="container"> |
| | | <input type="text" v-show="false" v-model="flushDom"/> |
| | | <input type="text" v-show="false" v-model="flushDom" /> |
| | | <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="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" |
| | |
| | | </view> |
| | | </view> |
| | | <view class="right" style="width: 310rpx;"> |
| | | <view class="commoditySquareItem" v-for="(item,index) in goodsList2" @click="goToGoodsInfo('goodsList2',item.id)"> |
| | | <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" |
| | |
| | | </view> |
| | | </uni-drawer> |
| | | </view> |
| | | <view style="display: flex;align-items: center;justify-content: center;margin-top: 20rpx;" v-if="canLoadMore">没有更多数据了.................</view> |
| | | <view style="display: flex;align-items: center;justify-content: center;margin-top: 20rpx;" v-if="canLoadMore"> |
| | | 没有更多数据了.................</view> |
| | | <custom-tabbar bgColor="#ffffff" selected="shop"></custom-tabbar> |
| | | </view> |
| | | </template> |
| | | |
| | |
| | | //当前选中的分类 |
| | | currentCategort: '', |
| | | //显示没有数据 |
| | | canLoadMore:false, |
| | | canLoadMore: false, |
| | | //最大页数 |
| | | maxPages: 0, |
| | | //刷新dom使用 |
| | | flushDom:'', |
| | | flushDom: '', |
| | | //查询商品需要的参数 |
| | | getGoodsParam: { |
| | | keyword: '', |
| | |
| | | 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); |
| | | uni.navigateTo({ |
| | | url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}` |
| | | }); |
| | | goToGoodsInfo(arrName, id) { |
| | | const item = this[arrName].find(item => id === item.id); |
| | | uni.navigateTo({ |
| | | url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}` |
| | | }); |
| | | }, |
| | | //获取分类导航栏 |
| | | async loadCategoryList() { |
| | |
| | | } |
| | | }) |
| | | //平分给两个数组 |
| | | 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) |
| | | 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') |
| | | }, |
| | | onLoad() { |
| | | this.loadCategoryList(); |
| | | 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){ |
| | | async onReachBottom() { |
| | | if (this.getGoodsParam.pageNumber < this.maxPages) { |
| | | this.getGoodsParam.pageNumber++; |
| | | const goodsList = await getGoodsList(this.getGoodsParam); |
| | | const sts = await getSTSToken(); |
| | |
| | | } |
| | | }) |
| | | //平分给两个数组 |
| | | const middle = Math.ceil(goodsList.data.result.records.length / 2); |
| | | 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 |
| | | }else{ |
| | | const middle = Math.ceil(goodsList.data.result.records.length / 2); |
| | | 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 |
| | | } else { |
| | | this.canLoadMore = true; |
| | | } |
| | | |
| | | |
| | | } |
| | | } |
| | | </script> |
| | |
| | | } |
| | | |
| | | .commoditySquareItem { |
| | | border: 1rpx solid darkgray; |
| | | // border: 1rpx solid #b6dbba; |
| | | border-radius: 12rpx; |
| | | box-sizing: border-box; |
| | | padding: 0 32rpx; |