From 642a3b5191eb72a68b257630eac678b891c77740 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期三, 02 七月 2025 16:19:14 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev' into dev
---
pages/video/video-search.vue | 307 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 307 insertions(+), 0 deletions(-)
diff --git a/pages/video/video-search.vue b/pages/video/video-search.vue
new file mode 100644
index 0000000..4ade5f1
--- /dev/null
+++ b/pages/video/video-search.vue
@@ -0,0 +1,307 @@
+<template>
+ <view class="search-page">
+ <!-- 鎼滅储鍖哄煙 -->
+ <view class="search-bar">
+ <input
+ class="search-input"
+ v-model="searchQuery.keyword"
+ placeholder="璇疯緭鍏ユ悳绱㈠叧閿瘝"
+ placeholder-class="placeholder-style"
+ @confirm="handleSearch"
+ />
+ <button class="search-btn" @click="handleSearch">鎼滅储</button>
+ </view>
+
+ <!-- 鐎戝竷娴佽棰戝垪琛� -->
+ <view class="waterfall-container">
+ <view class="waterfall-left">
+ <view
+ class="video-item"
+ v-for="(item, index) in leftList"
+ :key="item.id"
+ @click="playVideo(item)"
+ >
+ <image class="video-cover" :src="item.coverUrl" mode="widthFix"></image>
+ <view class="video-info">
+ <text class="video-title">{{item.title}}</text>
+ <view class="video-tags">
+ <text class="tag" v-for="(tag, i) in item.tagList" :key="i">{{tag.tagName}}</text>
+ </view>
+ <view class="video-stats">
+ <text class="like-count">鉂わ笍 {{item.thumbsUpNum}}</text>
+ </view>
+ </view>
+ </view>
+ </view>
+
+ <view class="waterfall-right">
+ <view
+ class="video-item"
+ v-for="(item, index) in rightList"
+ :key="item.id"
+ @click="playVideo(item)"
+ >
+ <image class="video-cover" :src="item.coverUrl" mode="widthFix"></image>
+ <view class="video-info">
+ <text class="video-title">{{item.title}}</text>
+ <view class="video-tags">
+ <text class="tag" v-for="(tag, i) in item.tagList" :key="i">{{tag.tagName}}</text>
+ </view>
+ <view class="video-stats">
+ <text class="like-count">鉂わ笍 {{item.thumbsUpNum}}</text>
+ </view>
+ </view>
+ </view>
+ </view>
+ </view>
+
+ <!-- 鍔犺浇鏇村鎻愮ず -->
+ <view class="load-more" v-if="loading">
+ <text>鍔犺浇涓�...</text>
+ </view>
+ <view class="load-more" v-if="noMore">
+ <text>娌℃湁鏇村浜�</text>
+ </view>
+ </view>
+</template>
+
+<script>
+ import {videoSearch} from "@/api/video.js"
+export default {
+ data() {
+ return {
+ videoList: [], // 鎵�鏈夎棰戞暟鎹�
+ leftList: [], // 宸︿晶鍒楄棰�
+ rightList: [], // 鍙充晶鍒楄棰�
+ searchQuery: {
+ keyword: '',
+ pageNumber: 1, // 铏界劧es鏄粠绗�0椤靛紑濮嬬殑锛屼絾鏄负浜嗗湪璺宠浆鍒皏ideo-play椤典箣鍚庡拰鍏跺畠绫诲瀷鐨勬煡璇繚鎸佷竴鑷达紝杩欓噷浠�1寮�濮嬶紝鍚庣榛樿-1
+ pageSize: 10
+ },
+ loading: false,
+ noMore: false
+ }
+ },
+ onLoad() {
+ // 鍒濆鍔犺浇涓�浜涙暟鎹�
+ this.loadVideos();
+ },
+ methods: {
+ handleSearch() {
+ if (!this.searchQuery.keyword.trim()) {
+ uni.showToast({
+ title: '璇疯緭鍏ユ悳绱㈠叧閿瘝',
+ icon: 'none'
+ });
+ return;
+ }
+
+ // 閲嶇疆鏁版嵁
+ this.searchQuery.pageNumber = 1;
+ this.videoList = [];
+ this.leftList = [];
+ this.rightList = [];
+ this.noMore = false;
+
+ // 鎵ц鎼滅储
+ this.loadVideos();
+ },
+
+ async loadVideos() {
+ if (this.loading || this.noMore) return;
+
+ this.loading = true;
+ uni.showLoading({ title: '鍔犺浇涓�' });
+
+ try {
+ videoSearch(this.searchQuery).then(res => {
+ if (this.searchQuery.pageNumber === 1) {
+ this.videoList = res.data.data
+ } else {
+ this.videoList = [
+ ...this.videoList,
+ ...res.data.data.filter(
+ (newItem) => !this.videoList.some((oldItem) => oldItem.id === newItem.id)
+ ),
+ ];
+ }
+ // 鍒嗛厤鐎戝竷娴�
+ this.distributeWaterfall();
+
+ if (res.data.data.length < this.searchQuery.pageSize) {
+ this.noMore = true
+ } else {
+ this.searchQuery.pageNumber += 1
+ }
+ })
+ } catch (error) {
+ console.error('鍔犺浇瑙嗛澶辫触:', error);
+ uni.showToast({
+ title: '鍔犺浇澶辫触',
+ icon: 'none'
+ });
+ } finally {
+ this.loading = false;
+ uni.hideLoading();
+ }
+ },
+
+ // 鍒嗛厤鐎戝竷娴佸乏鍙冲垪
+ distributeWaterfall() {
+ let leftHeight = this.getColumnHeight(this.leftList);
+ let rightHeight = this.getColumnHeight(this.rightList);
+
+ // 浠庡綋鍓峷ideoList涓湭鍒嗛厤鐨勫紑濮�
+ const startIndex = this.leftList.length + this.rightList.length;
+
+ for (let i = startIndex; i < this.videoList.length; i++) {
+ const item = this.videoList[i];
+ item["index"] = i;
+ // 璁＄畻杩欎釜item鐨勫ぇ姒傞珮搴︼紙鏍规嵁灏侀潰姣斾緥锛�
+ const itemHeight = 200 + Math.random() * 50; // 绠�鍗曟ā鎷熼珮搴﹀樊寮�
+
+ if (leftHeight <= rightHeight) {
+ this.leftList.push(item);
+ leftHeight += itemHeight;
+ } else {
+ this.rightList.push(item);
+ rightHeight += itemHeight;
+ }
+ }
+ },
+
+ // 鑾峰彇鍒楃殑楂樺害锛堢畝鍗曞疄鐜帮級
+ getColumnHeight(list) {
+ return list.length * 250; // 鍋囪姣忎釜item澶х害250楂樺害
+ },
+
+ // 鎾斁瑙嗛
+ playVideo(item) {
+ const searchPlayInfo = {
+ videoList: this.videoList,
+ nomore: this.noMore,
+ pageNumber: this.searchQuery.pageNumber,
+ playIndex: item.index,
+ keyword: this.searchQuery.keyword
+ }
+ uni.setStorageSync("searchPlayInfo", searchPlayInfo)
+ uni.navigateTo({
+ url: `/pages/video/video-play?videoFrom=search`
+ });
+ },
+ },
+
+ // 涓婃媺鍔犺浇鏇村
+ onReachBottom() {
+ this.loadVideos();
+ }
+}
+</script>
+
+<style scoped>
+.search-page {
+ padding: 20rpx;
+}
+
+.search-bar {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20rpx;
+}
+
+.search-input {
+ flex: 1;
+ height: 70rpx;
+ padding: 0 20rpx;
+ background-color: #efefef;
+ border-radius: 35rpx;
+ font-size: 28rpx;
+}
+
+.placeholder-style {
+ color: #999;
+}
+
+.search-btn {
+ width: 120rpx;
+ height: 70rpx;
+ margin-left: 20rpx;
+ line-height: 70rpx;
+ font-size: 28rpx;
+ background-color: #07c160;
+ color: white;
+ border-radius: 35rpx;
+}
+
+.waterfall-container {
+ display: flex;
+ justify-content: space-between;
+}
+
+.waterfall-left,
+.waterfall-right {
+ width: 48%;
+}
+
+.video-item {
+ margin-bottom: 20rpx;
+ background: #fff;
+ border-radius: 12rpx;
+ overflow: hidden;
+ box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+}
+
+.video-cover {
+ width: 100%;
+ display: block;
+}
+
+.video-info {
+ padding: 16rpx;
+}
+
+.video-title {
+ font-size: 28rpx;
+ color: #333;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ line-height: 1.4;
+}
+
+.video-tags {
+ margin-top: 10rpx;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20rpx;
+}
+
+.tag {
+ font-size: 24rpx;
+ color: #07c160;
+ background: #e8f5e9;
+ border-radius: 20rpx;
+ flex: 1 1 calc(50% - 20rpx); /* 鑰冭檻gap鐨勫搴� */
+ min-width: calc(50% - 20rpx);
+ max-width: 100%;
+}
+
+.video-stats {
+ margin-top: 10rpx;
+ display: flex;
+ align-items: center;
+}
+
+.like-count {
+ font-size: 24rpx;
+ color: #666;
+}
+
+.load-more {
+ text-align: center;
+ padding: 20rpx;
+ font-size: 24rpx;
+ color: #999;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0