From 2ee9876f01e528284f328af33cc9268f9319cbab Mon Sep 17 00:00:00 2001
From: linxi <957440651@qq.com>
Date: Wed, 26 Aug 2026 15:54:51 +0800
Subject: [PATCH] =?UTF-8?q?Fix=EF=BC=9A5453=20=E3=80=90=E5=95=86=E5=9F=8E?=
=?UTF-8?q?=E5=B0=8F=E7=A8=8B=E5=BA=8F=E3=80=91=E8=8B=B9=E6=9E=9C=E6=89=8B?=
=?UTF-8?q?=E6=9C=BA=E8=A7=86=E9=A2=91=E5=88=97=E8=A1=A8=E5=B8=83=E5=B1=80?=
=?UTF-8?q?=E6=96=B9=E5=90=91=E4=BB=8E=E5=8F=B3=E5=88=B0=E5=B7=A6=EF=BC=8C?=
=?UTF-8?q?=E5=BA=94=E8=AF=A5=E4=BB=8E=E5=B7=A6=E5=88=B0=E5=8F=B3=E6=8E=92?=
=?UTF-8?q?=E5=88=97=EF=BC=8C=E4=B8=8E=E5=AE=89=E5=8D=93=E5=90=8C=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
pages/VideoPlayBackList/VideoPlayBackList.vue | 108 ++++++++++++++----
1 file changed, 85 insertions(+), 23 deletions(-)
diff --git a/pages/VideoPlayBackList/VideoPlayBackList.vue b/pages/VideoPlayBackList/VideoPlayBackList.vue
index b2fd8c7..e21c418 100644
--- a/pages/VideoPlayBackList/VideoPlayBackList.vue
+++ b/pages/VideoPlayBackList/VideoPlayBackList.vue
@@ -6,11 +6,11 @@
-
+
-
-
-
+
+
+
{{ item.title }}
-
+
+
+
+
+
+ {{ item.title }}
+
+
+
+
-
+
暂无数据
@@ -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++) {
- res.data[i].hide = true
- this.list.push(res.data[i])
+ const items = res.data
+ for (let i = 0; i < items.length; 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 {
- direction: ltr;
- text-align: left;
- }
-
- /deep/ .waterfalls-flow-column {
- float: left !important;
- }
+ .waterfalls-column {
+ width: 332rpx;
}
.item {
+ margin-bottom: 20rpx;
border-radius: 4rpx;
background: #fff;
.cover {
width: 332rpx;
- //height: 200rpx;
vertical-align: middle;
}