视频页面接口对接

packageB/train/video/videoList.vue

@@ -34,9 +34,9 @@
 				<text>视频列表</text>
 				<view class="title-line"></view>
 			</view>
-            <view class="video-grid" v-if="pageState.list.length">
+            <view class="video-grid" v-if="dataList.length>0">
                 <view 
-                    v-for="video in pageState.list" 
+                    v-for="video in dataList" 
                     :key="video.id || video.videoId"
                     class="video-item"
 					:style="getItemBackgroundStyle('video-bg.png')"
@@ -44,12 +44,12 @@
                 >
                     <view class="video-cover">
                         <image 
-                            :src="video.coverImage || video.videoCover || '/static/icon/video.png'" 
+                            :src="trainVideoImgUrl+ video.cover" 
                             mode="aspectFill"
                         ></image>
                     </view>
                     <view class="video-info">
-                        {{ video.title || video.videoName || '未命名视频' }}
+                        {{ video.videoTitle || '未命名视频' }}
                     </view>
                 </view>
             </view>
@@ -67,14 +67,10 @@ import config from "@/config.js"
 // state
 const title = ref('');
 const searchKeyword = ref('');
-const pageState = reactive({
-    page: 0,
-    list: [],
-    total: 0,
-    maxPage: 1,
-    pageSize: 12,
-    search: {},
-});
+const dataList=ref([])
+const pageSize=ref(10)
+const pageNum=ref(1)
+const totalNum=ref(0)
 const baseUrl = config.imgBaseUrl
 const getItemBackgroundStyle = (imageName) => ({
     backgroundImage: `url(${baseUrl}/train/${imageName})`,
@@ -82,45 +78,7 @@ const getItemBackgroundStyle = (imageName) => ({
     backgroundPosition: 'center', // 居中
     backgroundRepeat: 'no-repeat'
 });
-// 模拟视频数据
-const mockVideoData = [
-    {
-        id: '1',
-        title: '职业技能培训基础课程',
-        coverImage: '/static/icon/server1.png',
-        videoUrl: ''
-    },
-    {
-        id: '2',
-        title: '面试技巧分享',
-        coverImage: '/static/icon/server2.png',
-        videoUrl: ''
-    },
-    {
-        id: '3',
-        title: '简历制作指南',
-        coverImage: '/static/icon/server3.png',
-        videoUrl: ''
-    },
-    {
-        id: '4',
-        title: '职场沟通技巧',
-        coverImage: '/static/icon/server4.png',
-        videoUrl: ''
-    },
-    {
-        id: '5',
-        title: '职业规划讲座',
-        coverImage: '/static/icon/flame.png',
-        videoUrl: ''
-    },
-    {
-        id: '6',
-        title: '行业趋势分析',
-        coverImage: '/static/icon/flame2.png',
-        videoUrl: ''
-    }
-];
+const trainVideoImgUrl=config.trainVideoImgUrl
 
 onLoad(() => {
     getDataList('refresh');
@@ -139,49 +97,46 @@ function clearSearch() {
 
 // 获取视频列表
 function getDataList(type = 'add') {
+	let maxPage=Math.ceil(totalNum.value/pageSize.value)
+	let params={}
     if (type === 'refresh') {
-        pageState.page = 1;
-        pageState.maxPage = 1;
+        pageNum.value = 1;
+		params={
+			category:'',
+			hour:'',
+			level:'',
+			searchValue:searchKeyword.value,
+			orderStr:'',
+			pageSize:pageSize.value,
+			pageNum:pageNum.value
+		}
+		$api.myRequest('/train/public/trainVideo/trainVideoList', params).then((resData) => {
+			dataList.value=resData.rows
+			totalNum.value=resData.total
+		});
     }
-    if (type === 'add' && pageState.page < pageState.maxPage) {
-        pageState.page += 1;
-    }
-    
-    // 模拟API请求延迟
-    setTimeout(() => {
-        // 在实际项目中，这里应该调用真实的API接口
-        // 目前使用模拟数据
-        let filteredList = [...mockVideoData];
-        
-        // 如果有搜索关键词，进行过滤
-        if (searchKeyword.value.trim()) {
-            filteredList = filteredList.filter(video => 
-                video.title.toLowerCase().includes(searchKeyword.value.toLowerCase())
-            );
-        }
-        
-        const start = 0;
-        const end = pageState.pageSize;
-        const pageData = filteredList.slice(start, end);
-        
-        if (type === 'add') {
-            pageState.list = [...pageState.list, ...pageData];
-        } else {
-            pageState.list = pageData;
-        }
-        
-        pageState.total = filteredList.length;
-        pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
-    }, 300);
+    if (type === 'add' && pageNum.value < maxPage) {
+        pageNum.value += 1;
+		params={
+			category:'',
+			hour:'',
+			level:'',
+			searchValue:searchKeyword.value,
+			orderStr:'',
+			pageSize:pageSize.value,
+			pageNum:pageNum.value
+		}
+		$api.myRequest('/train/public/trainVideo/trainVideoList', params).then((resData) => {
+			dataList.value=dataList.value.concat(resData.rows)
+			totalNum.value=resData.total
+		});
+	}
 }
+	
 
 // 播放视频
 function playVideo(video) {
-    // 在实际项目中，这里应该导航到视频播放页面
-    // 或者调用视频播放组件
-    console.log('播放视频:', video);
-    navTo(`/packageB/train/video/videoDetail?id=${video.id}`);
-    // $api.msg(`准备播放: ${video.title}`);
+    navTo(`/packageB/train/video/videoDetail?id=${video.videoId}`);
 }
 </script>
 
@@ -190,13 +145,6 @@ function playVideo(video) {
     width: 64rpx;
     height: 64rpx;
 }
-.btn {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 52rpx;
-    height: 52rpx;
-}
 image {
     height: 100%;
     width: 100%;
@@ -264,7 +212,7 @@ image {
 	width: 70rpx;
 	height: 8rpx;
 	background: linear-gradient(90deg, #FFAD58 0%, #FF7A5B 100%);
-	border-radius: 2px;
+	border-radius: 4rpx;
 }
 .video-grid{
     display: grid;