uniapp-app/pages_app/replayText/replayText.vue

<template>
	<view class="meeting-page">
		<!-- 导航栏 -->
		<navBar :title="name" />
		
		<!-- 主内容区域 -->
		<scroll-view 
			class="content-scroll" 
			scroll-y="true"
			refresher-enabled="true"
			:refresher-triggered="refreshing"
			@refresherrefresh="onRefresh"
			@scrolltolower="onLoadMore"
			lower-threshold="300"
		>
			<view class="meeting-list">
				<view 
					class="meeting-item" 
					v-for="(meeting, index) in meetingList" 
					:key="meeting.id"
					@click="playVideo(meeting)"
				>
					<view class="meeting-content">
						{{ meeting.name }}
					</view>
					<view class="meeting-arrow">
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
			</view>
			
			<!-- 加载更多状态 -->
			<uni-load-more 
				v-if="meetingList.length > 0"
				:status="loadMoreStatus"
				:content-text="{ 
					contentdown: '上拉加载更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}"
				
			></uni-load-more>
			
			<!-- 空状态 -->
			<view class="empty-state" v-if="meetingList.length === 0 && !loading">
				<view class="empty-content">
					<text class="empty-text">暂无数据</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { onShow,onLoad } from "@dcloudio/uni-app";
	import navBar from '@/components/navBar/navBar.vue';
	import api from '@/api/api.js';
    import navTo from '@/utils/navTo';
	// 会议列表数据
    const typeUuid=ref('');
    const typeName=ref('');
    const currentPage=ref(1);
    const pageSize=ref(20);
    const hasMoreData=ref(true);
    const loadMoreStatus=ref('more');
    const loading=ref(false);
    const refreshing=ref(false);
    const meetingList=ref([]);
	
	// 页面加载
	onMounted(() => {
		// 初始化数据
	});
	const name=ref('');
	onLoad((options)=>{
		if(options.name){
			name.value=decodeURIComponent(options.name);
		}
        getVideoType();
	});
	
	const  getVideoType=async () => {
        const response = await api.getTypeUuidByName({
            name: name.value,
        });
        if(response.code === 200 && response.data){
            typeUuid.value = response.data;
            loadVideoData();
        }
}
	// 返回上一页
	const goBack = () => {
		uni.navigateBack({
			fail() {
				uni.redirectTo({
					url: '/pages/index/index'
				});
			}
		});
	};
	const loadVideoData = async (isRefresh = false) => {
		if (loading.value && !isRefresh) return;
		loading.value = true;
		try {
			const response = await api.patientVideoByJingHuaNew({
				page: currentPage.value,
				pageSize: pageSize.value,
				typeUuid:typeUuid.value,
			});
			console.log('视频列表API原始响应:', response);
			// 检查响应结构
			let videoData = {};
			if (response && response.data) {
				if (response.data.code === 200) {
					videoData = response.data.data || {};
				} else if (response.code === 200) {
					videoData = response.data || {};
				}
			} else if (response && response.code === 200) {
				videoData = response.data || {};
			}
			
			console.log('解析后的视频数据:', videoData);
			
			if (videoData && videoData.list) {
				const { list, totalPage,pageNumber } = videoData;
				console.log('视频列表数据:', list);
				loading.value=false;
				if (isRefresh) {
					meetingList.value = list || [];
					currentPage.value = 1;
				} else {
					meetingList.value = [...meetingList.value, ...(list || [])];
				}
				
				hasMoreData.value = totalPage>pageNumber;
				loadMoreStatus.value = hasMoreData.value ? 'more' : 'noMore';
				if(hasMoreData.value ){
					
					onLoadMore();
				}
			} else {
				throw new Error(response?.message || '获取数据失败');
			}
			
		} catch (error) {
			console.error('加载视频失败:', error);
			
		} finally {
			loading.value = false;
			refreshing.value = false;
		}
	};

	// 下拉刷新
	const onRefresh = () => {
		refreshing.value = true;
		currentPage.value = 1;
		hasMoreData.value = true;
		loadVideoData(true);
	};

	// 上拉加载更多
	const onLoadMore = () => {
		console.log('onLoadMore');
		console.log('hasMoreData',hasMoreData.value);
		console.log('loading',loading.value);
		if (!hasMoreData.value || loading.value) return;
		
		loadMoreStatus.value = 'loading';
		currentPage.value++;
		loadVideoData();
	};

	// 跳转到会议详情
	// 播放视频
	const playVideo = (video) => {
		const videoId = video.id || video.uuid;
		
		navTo({
			url: `/pages_app/videoDetail/videoDetail?id=${videoId}`
		});
	};
</script>

<style scoped lang="scss">
	$theme-color: #8B2316;
	$text-color: #333;
	$text-gray: #999;
	$bg-color: #f5f5f5;
	$white: #fff;
	
	.meeting-page {
		background-color: $bg-color;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	
	/* 内容滚动区域 */
	.content-scroll {
		flex: 1;
		height: calc(100vh - var(--status-bar-height) - 44px);
		background-color: $white;
		margin-top: calc(var(--status-bar-height) + 44px);
	}
	
	/* 会议列表 */
	.meeting-list {
		background-color: $white;
	}
	
	/* 会议项 */
	.meeting-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		background-color: $white;
		transition: background-color 0.2s ease;
	}
	
	
	
	.meeting-item:active {
		background-color: #f8f8f8;
	}
	
	/* 会议内容 */
	.meeting-content {
		flex: 1;
		margin-right: 20rpx;
        white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 30rpx;
		color: $text-color;
	}
	
	.meeting-title {
		font-size: 30rpx;
		color: $text-color;
		line-height: 1.4;
		
	}
	
	/* 箭头图标 */
	.meeting-arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40rpx;
		height: 40rpx;
	}
	
	/* 空状态样式 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
	}
	
	.empty-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.empty-text {
		color: #999;
		font-size: 28rpx;
	}
</style>