Merge remote-tracking branch 'origin/dev' into dev

peng

19 小时以前 818fbcd2dc3073ab4dacdff2b19cea56552f32fc

 pages/commodity-square/commoditySquare.vue

@@ -1,9 +1,13 @@
<template>
   <view class="container">
      <input type="text" v-show="false" v-model="flushDom"/>
      <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" @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"
@@ -21,7 +25,8 @@
            </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"
@@ -43,17 +48,19 @@
         <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">没有更多数据了.................</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>

@@ -68,6 +75,9 @@
   export default {
      data() {
         return {
            //记录两列高度
            listHeight1: 0,
            listHeight2: 0,
            //是否显示打开左侧弹窗
            showLeft: false,
            //商品导航分类
@@ -75,11 +85,11 @@
            //当前选中的分类
            currentCategort: '',
            //显示没有数据
            canLoadMore:false,
            canLoadMore: false,
            //最大页数
            maxPages: 0,
            //刷新dom使用
            flushDom:'',
            flushDom: '',
            //查询商品需要的参数
            getGoodsParam: {
               keyword: '',
@@ -93,6 +103,14 @@
         }
      },
      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) {
@@ -111,84 +129,113 @@
            const height = e.detail.height;
            this[arrName][index].width = 310 + 'rpx';
            //计算宽高比
            const videoHeight = 310 / (wight / height)
            this[arrName][index].height = Math.floor(videoHeight) + 'rpx';
            const videoHeight = Math.floor(310 / (wight / height))
            this[arrName][index].height = videoHeight + 'rpx';
            this[arrName][index].show = true;
            //计算集合高度
            if (arrName === 'goodsList2') {
               if (videoHeight > 300) {
                  this.listHeight2 += videoHeight;
               } else if (videoHeight < 300) {
                  this.listHeight2 -= videoHeight;
               }
            }
            if (arrName === 'goodsList1') {
               if (videoHeight > 300) {
                  this.listHeight1 += videoHeight;
               } else if (videoHeight < 300) {
                  this.listHeight1 -= videoHeight;
               }
            }
            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() {
            let list = await getCategoryList(0);
            this.categoryList = list.data.result
         },
         async getgoodsData() {
            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 goodsSize = goodsList.data.result.records.length;
            let middle = Math.ceil(goodsSize / 2);
            //判断那个集合长度高 重新分配集合数据
            const diffHeight = this.listHeight1 - this.listHeight2;
            //list1长度大于list2
            if (diffHeight > 0) {
               const needCount = Math.floor(diffHeight / 300)
               if (needCount > 6) {
                  middle = 0;
               } else {
                  middle -= needCount;
               }
            } else if(diffHeight < 0) {
               const needCount = Math.abs(Math.floor(diffHeight / 300))
               if (needCount > 6) {
                  middle += 6
               } else {
                  middle = needCount;
               }
            }
            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

            // if(this.listHeight1===0||this.listHeight2===0)}
            this.listHeight1 += middle * 300;
            this.listHeight2 += (goodsSize - middle) * 300
         },
         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)
            this.goodsList1 = [];
            this.goodsList2 = [];
            await this.getgoodsData();
            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 = ""
         await this.getgoodsData()
      },
      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 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 = [...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{
            await this.getgoodsData()
         } else {
            this.canLoadMore = true;
         }
			

      }
   }
</script>
@@ -222,7 +269,7 @@
   }

   .commoditySquareItem {
      border: 1rpx solid darkgray;
      // border: 1rpx solid #b6dbba;
      border-radius: 12rpx;
      box-sizing: border-box;
      padding: 0 32rpx;
@@ -238,8 +285,16 @@

   .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 {
@@ -276,8 +331,10 @@


   .typeNavigation {
      box-sizing: border-box;
      padding: 10rpx;
      position: relative;
      height: 100%;
      // position: relative;
   }

   .typeNavigationItem {
@@ -300,4 +357,13 @@
      top: 20rpx;
      right: 0;
   }

   .nav-search {
      padding-left: 30rpx !important;
      padding-right: 20rpx !important;
      // position: fixed;
      // top: 0;
      // width: 500rpx;
      // z-index: 9999;
   }
</style>