Fix：5453 【商城小程序】苹果手机视频列表布局方向从右到左，应该从左到右排列，与安卓同步

pages/VideoPlayBackList/VideoPlayBackList.vue

@@ -6,11 +6,11 @@
       </view>
     </view>
 
-    <view class="list" v-if="list.length">
+    <view class="list" v-show="hasList">
       <view class="video-waterfalls-wrap">
-        <custom-waterfalls-flow :value="list" imageKey="cover">
+        <view class="waterfalls-column">
-          <view class="item" v-for="(item,index) in list" :key="index" slot="slot{{index}}" @click="goDetail(item)">
+          <view class="item" v-for="(item,index) in leftList" :key="item.id || index" @click="goDetail(item)">
-            <image class="cover" :src="item.cover" mode="widthFix"></image>
+            <image class="cover" :src="item.cover" mode="widthFix" lazy-load></image>
             <view class="content">
               <view class="title more-t">{{ item.title }}</view>
               <view class="footer flex jc-between ai-center">
@@ -22,11 +22,26 @@
               </view>
             </view>
           </view>
-        </custom-waterfalls-flow>
+        </view>
+        <view class="waterfalls-column">
+          <view class="item" v-for="(item,index) in rightList" :key="item.id || index" @click="goDetail(item)">
+            <image class="cover" :src="item.cover" mode="widthFix" lazy-load></image>
+            <view class="content">
+              <view class="title more-t">{{ item.title }}</view>
+              <view class="footer flex jc-between ai-center">
+                <view class="visit flex ai-center">
+                  <image class="icon" style="margin-right: 8rpx" :src="item.storeLogo" mode="scaleToFill"></image>
+                  {{ item.storeName }}
+                </view>
+                <image class="icon flex-0" :src="webUrl+'/20210806121203835373.png'" mode="scaleToFill"></image>
+              </view>
+            </view>
+          </view>
+        </view>
       </view>
     </view>
 
-    <view class="v4-nodata" v-else>
+    <view class="v4-nodata" v-show="!hasList">
       <image src="@/static/images/img_nodata.png" mode="scaleToFill"/>
       <view class="text">暂无数据</view>
     </view>
@@ -38,6 +53,11 @@ import {getStoreVideoType, getArticleList} from '@/api/public'
 import {getVideoList} from '@/api/user'
 import { pageListenMixins } from '@/mixins/pageListenMixins'
 
+// 封面固定宽度（rpx）
+const COVER_WIDTH = 332
+// 每项除封面外的文字内容预估高度（rpx）
+const TEXT_HEIGHT = 120
+
 export default {
   mixins: [pageListenMixins],
   data() {
@@ -48,11 +68,19 @@ export default {
       page: 1,
       limit: 10,
       keyword: '',
-      list: [],
+      leftList: [],
+      rightList: [],
+      leftHeight: 0,
+      rightHeight: 0,
       isWait: false,
       pageKeyId: Object.freeze('findVideoList')
     }
   },
+  computed: {
+    hasList() {
+      return this.leftList.length + this.rightList.length > 0
+    }
+  },
   onLoad(options) {
     if (!options.click) {
       uni.switchTab({ url: '/pages/home/index' })
@@ -78,10 +106,16 @@ export default {
     changeType(item) {
       this.type = item.value
       this.page = 1
-      this.list = []
+      this.resetList()
       this.fetchList()
     },
-    fetchList() {
+    resetList() {
+      this.leftList = []
+      this.rightList = []
+      this.leftHeight = 0
+      this.rightHeight = 0
+    },
+    async fetchList() {
       if (this.isWait) return
       this.isWait = true
       const params = {
@@ -89,16 +123,47 @@ export default {
         page: this.page,
         limit: this.limit
       }
-      getVideoList(params).then(res => {
+      try {
+        const res = await getVideoList(params)
         if (res.status === 200) {
-          for (let i = 0; i < res.data.length; i++) {
+          const items = res.data
-            res.data[i].hide = true
+          for (let i = 0; i < items.length; i++) {
-            this.list.push(res.data[i])
+            items[i].hide = true
           }
+          // 并行获取所有封面高度
+          const heights = await Promise.all(items.map(item => this.getImageHeight(item.cover)))
+          items.forEach((item, i) => {
+            this.pushToColumn(item, heights[i] + TEXT_HEIGHT)
+          })
         }
+      } catch (e) {
+        // 忽略请求或图片尺寸获取失败
+      } finally {
         this.isWait = false
+      }
+    },
+    getImageHeight(src) {
+      return new Promise(resolve => {
+        uni.getImageInfo({
+          src,
+          success: res => {
+            resolve(res.height / res.width * COVER_WIDTH)
+          },
+          fail: () => {
+            resolve(COVER_WIDTH)
+          }
+        })
       })
     },
+    pushToColumn(item, height) {
+      if (this.leftHeight <= this.rightHeight) {
+        this.leftList.push(item)
+        this.leftHeight += height
+      } else {
+        this.rightList.push(item)
+        this.rightHeight += height
+      }
+    },
     goDetail(item) {
       this.$yrouter.push("/pages/VideoPlayBackList/VideoPlayBackDetail?videoUrl=" + item.video + '&id=' + item.id + '&click=1')
     }
@@ -129,25 +194,22 @@ export default {
   margin: 28rpx 32rpx;
 
   .video-waterfalls-wrap {
-    direction: ltr;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
 
-    /deep/ .waterfalls-flow {
+  .waterfalls-column {
-      direction: ltr;
+    width: 332rpx;
-      text-align: left;
-    }
-
-    /deep/ .waterfalls-flow-column {
-      float: left !important;
-    }
   }
 
   .item {
+    margin-bottom: 20rpx;
     border-radius: 4rpx;
     background: #fff;
 
     .cover {
       width: 332rpx;
-      //height: 200rpx;
       vertical-align: middle;
     }