| | |
| | | <template> |
| | | <view class="wrapper"> |
| | | |
| | | |
| | | <view style="height: 100rpx"></view> |
| | | <!-- 内容区域 --> |
| | | <scroll-view scroll-y class="content" style="height: 100vh;" @scrolltolower="loadMore" |
| | | :lower-threshold="100" |
| | | > |
| | | <scroll-view scroll-y class="content" style="height: 40vh;" @scrolltolower="loadMore" :lower-threshold="100"> |
| | | <view class="waterfall"> |
| | | <view class="column" v-for="(column, index) in columns" :key="index"> |
| | | <!-- 遍历每列内容 --> |
| | | <view class="item" v-for="(item, idx) in column" :key="item.id" @click="handleItemClick(item)"> |
| | | <!-- 图片类型 --> |
| | | <image v-if="item.type === '图片'" :src="getUrl(item.cover)" mode="widthFix" class="media" |
| | | @load="imageLoad" :data-item="item" :style="{ height: item.height + 'px' }" /> |
| | | <image v-if="item.type === 'image'" :src="item.url" mode="widthFix" class="media" @load="imageLoad" :data-item="item" |
| | | :style="{ height: item.height + 'px' }" /> |
| | | |
| | | <!-- 视频类型 --> |
| | | <video v-if="item.type === '视频'" :src="getUrl(item.cover)" class="media" controls |
| | | :poster="item.poster" @play="handleVideoPlay" |
| | | :style="{ height: item.height + 'px' }"></video> |
| | | <video v-if="item.type === 'video'" :src="item.url" class="media" controls :poster="item.poster" :data-item="item" |
| | | @play="handleVideoPlay" :style="{ height: item.height + 'px' }"></video> |
| | | |
| | | <!-- 文字类型 --> |
| | | <view v-if="item.type === '文字'" class="text-content"> |
| | | <view v-if="item.type === 'text'" class="text-content"> |
| | | <text class="title">{{ item.cover }}</text> |
| | | </view> |
| | | <text class="title">{{ item.title }}</text> |
| | |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <!-- <view style="height: 150rpx;"></view> --> |
| | | <!-- 改进的加载更多提示 --> |
| | | <view class="load-more"> |
| | | <u-loadmore |
| | | v-if="mockData.length > 0" |
| | | :status="loading ? 'loading' : noMore ? 'nomore' : 'loadmore'" |
| | | :load-text="{ |
| | | <!-- <view style="height: 150rpx;"></view> --> |
| | | <!-- 改进的加载更多提示 --> |
| | | <view class="load-more"> |
| | | <u-loadmore v-if="mockData.length > 0" :status="loading ? 'loading' : noMore ? 'nomore' : 'loadmore'" |
| | | :load-text="{ |
| | | loadmore: '上拉加载更多', |
| | | loading: '正在加载', |
| | | nomore: '没有更多了' |
| | | }" |
| | | /> |
| | | </view> |
| | | <view style="height:150rpx"> |
| | | |
| | | </view> |
| | | }" /> |
| | | </view> |
| | | <view style="height:150rpx"> |
| | | |
| | | </view> |
| | | </scroll-view> |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | </view> |
| | | </template> |
| | | |
| | |
| | | import { |
| | | getFilePreviewUrl |
| | | } from '@/api/common.js' |
| | | import UButton from '@/uview-components/uview-ui/components/u-button/u-button.vue'; |
| | | import UImage from '@/uview-components/uview-ui/components/u-image/u-image.vue'; |
| | | import ULoadmore from '@/uview-components/uview-ui/components/u-loadmore/u-loadmore.vue' |
| | | import '@/components/uview-components/uview-ui'; |
| | | import { |
| | | getActivityReportList, |
| | | } from '@/api/activity.js'; |
| | | export default { |
| | | components: { |
| | | UImage, |
| | | UButton, |
| | | ULoadmore |
| | | }, |
| | | data() { |
| | | return { |
| | | columns: [ |
| | |
| | | baseTextHeight: 120, // 文字基础高度 |
| | | query: { |
| | | pageNumber: 1, |
| | | pageSize: 8, |
| | | pageSize: 10, |
| | | }, |
| | | loading: false, // 是否正在加载 |
| | | noMore: false, // 是否没有更多数据 |
| | |
| | | this.getActivityList(); |
| | | }, |
| | | methods: { |
| | | getUrl(params) { |
| | | getFilePreviewUrl(params).then(res => { |
| | | return res.data.data |
| | | }) |
| | | }, |
| | | |
| | | /** |
| | | * 下拉刷新时 |
| | | */ |
| | |
| | | this.getActivityList(); |
| | | }, |
| | | loadMore() { |
| | | |
| | | // 显示加载状态 |
| | | this.loading = true; |
| | | |
| | | // 延迟执行让UI有反应时间 |
| | | setTimeout(() => { |
| | | this.query.pageNumber += 1; |
| | | this.getActivityList(); |
| | | }, 300); |
| | | |
| | | // 显示加载状态 |
| | | this.loading = true; |
| | | |
| | | // 延迟执行让UI有反应时间 |
| | | setTimeout(() => { |
| | | this.query.pageNumber += 1; |
| | | this.getActivityList(); |
| | | }, 300); |
| | | }, |
| | | async getActivityList() { |
| | | |
| | | try { |
| | | |
| | | const res = await getActivityReportList(this.query); |
| | | this.loading = false; |
| | | if (res.statusCode === 200) { |
| | | const newData = res.data.data.map(value => ({ |
| | | id: value.id, |
| | | type: value.coverType, |
| | | cover: value.cover, |
| | | height: value.coverType === '图片' ? this.baseImageHeight : |
| | | value.coverType === '视频' ? this.baseVideoHeight : this.baseTextHeight, |
| | | title: value.activityName, |
| | | content: value.activityContent, |
| | | poster: '', |
| | | })); |
| | | |
| | | // 更新总数据量 |
| | | this.total = res.data.total || 0; |
| | | |
| | | // 追加或替换数据 |
| | | this.mockData = this.query.pageNumber === 1 |
| | | ? newData |
| | | : [...this.mockData, ...newData]; |
| | | |
| | | // 判断是否还有更多数据 |
| | | this.noMore = newData.length < this.query.pageSize || |
| | | this.mockData.length >= this.total; |
| | | |
| | | // 布局更新 |
| | | this.$nextTick(() => { |
| | | this.layoutItems(); |
| | | }); |
| | | } |
| | | } catch (error) { |
| | | console.error('加载失败:', error); |
| | | // 失败时回退页码 |
| | | if (this.query.pageNumber > 1) { |
| | | this.query.pageNumber -= 1; |
| | | } |
| | | } finally { |
| | | this.loading = false; |
| | | uni.hideLoading(); |
| | | uni.stopPullDownRefresh(); |
| | | } |
| | | |
| | | try { |
| | | |
| | | const res = await getActivityReportList(this.query); |
| | | this.loading = false; |
| | | if (res.statusCode === 200) { |
| | | const newData = res.data.data.map(value => ({ |
| | | id: value.id, |
| | | type: value.coverType, |
| | | cover: value.cover, |
| | | height: value.coverType === 'image' ? this.baseImageHeight : value.coverType === |
| | | 'video' ? this.baseVideoHeight : this.baseTextHeight, |
| | | title: value.activityName, |
| | | content: value.activityContent, |
| | | poster: '', |
| | | url: value.url |
| | | })); |
| | | |
| | | // 更新总数据量 |
| | | this.total = res.data.total || 0; |
| | | |
| | | // 追加或替换数据 |
| | | this.mockData = this.query.pageNumber === 1 ? |
| | | newData : |
| | | [...this.mockData, ...newData]; |
| | | |
| | | // 判断是否还有更多数据 |
| | | this.noMore = newData.length < this.query.pageSize || |
| | | this.mockData.length >= this.total; |
| | | |
| | | // 布局更新 |
| | | this.$nextTick(() => { |
| | | this.layoutItems(); |
| | | }); |
| | | } |
| | | } catch (error) { |
| | | console.error('加载失败:', error); |
| | | // 失败时回退页码 |
| | | if (this.query.pageNumber > 1) { |
| | | this.query.pageNumber -= 1; |
| | | } |
| | | } finally { |
| | | this.loading = false; |
| | | uni.hideLoading(); |
| | | uni.stopPullDownRefresh(); |
| | | } |
| | | }, |
| | | // 图片加载完成回调 |
| | | layoutItems() { |
| | |
| | | const ratio = height / width; |
| | | const item = e.currentTarget.dataset.item; |
| | | |
| | | if (!item) { |
| | | console.error('无法获取图片项数据', e); |
| | | return; |
| | | } |
| | | // 重新计算实际显示高度 |
| | | const viewWidth = uni.upx2px(345); // 将rpx转换为px |
| | | const viewHeight = viewWidth * ratio; |
| | |
| | | |
| | | <style lang="scss"> |
| | | /* 新增加载更多样式 */ |
| | | .load-more { |
| | | padding: 20rpx 0; |
| | | text-align: center; |
| | | color: #999; |
| | | font-size: 26rpx; |
| | | background-color: #f7f8fa; |
| | | } |
| | | .load-more { |
| | | padding: 20rpx 0; |
| | | text-align: center; |
| | | color: #999; |
| | | font-size: 26rpx; |
| | | background-color: #f7f8fa; |
| | | } |
| | | |
| | | .btn-container { |
| | | display: flex; |
| | | justify-content: center; |
| | |
| | | |
| | | /* 内容区域优化 */ |
| | | .content { |
| | | flex: 1; |
| | | overflow: hidden; |
| | | padding: 0 20rpx; |
| | | box-sizing: border-box; |
| | | /* 确保可以滚动 */ |
| | | -webkit-overflow-scrolling: touch; |
| | | flex: 1; |
| | | overflow: hidden; |
| | | padding: 0 20rpx; |
| | | box-sizing: border-box; |
| | | /* 确保可以滚动 */ |
| | | -webkit-overflow-scrolling: touch; |
| | | } |
| | | |
| | | /* 瀑布流布局优化 */ |