接口

pages/coach/my/teaching_management.vue

@@ -1,12 +1,17 @@
 <template>
 	<view>
-		<view class="dis_style div_style" v-for="(item,index) in arrayList" :key="index" @click="info(item.id)">
+		<fui-tabs :tabs="tabsList" @change="change" isDot scroll alignLeft></fui-tabs>
-			<view>
+		<scroll-view scroll-y :scroll-with-animation="true" @scrolltolower="onReachBottom">
-				<view class='color_style'>{{item.title}}</view>
+			<view class="dis_style div_style" v-for="(item,index) in arrayList" :key="index" @click="info(item.id)">
-				<view class='color_type_style'>{{getTableType(item.table_type)}}</view>
+				<view>
+					<view class='color_style'>{{item.title}}</view>
+					<view class='color_type_style'>{{getTableType(item.table_type)}}</view>
+				</view>
+				<view class='color_date_style'>{{item.create_time}}</view>
 			</view>
-			<view class='color_date_style'>{{item.create_time}}</view>
+			<view v-if="loading" class="loading">加载中...</view>
-		</view>
+			<view v-else-if="noMoreData" class="no-more">没有更多数据了</view>
+		</scroll-view>
 	</view>
 </template>
 
@@ -16,6 +21,7 @@
 		data() {
 			return {
 				arrayList: [],
+				tabsList: [],
 				tableTypeName: {
 					'1': "课程教学大纲",
 					'2': "跳绳教案库",
@@ -46,27 +52,75 @@
 					'27': "互动游戏",
 					'28': "套圈游戏",
 					'29': "鼓励方式"
-				}
+				},
+				tabsListArr: [],
+				searchArr: {
+					table_type: undefined,
+					page: 1,
+					limit: 10
+				},
+				loading: false,
+				noMoreData: false,
+				initId: undefined
 			}
 		},
 		onLoad() {
-			this.init()
+			this.getTabs()
 		},
 		methods: {
-			init() {
+			getTabs() {
-				apiRoute.teachingResearchList().then(res => {
+				this.tabsListArr = []
+				this.tabsList = []
+				apiRoute.teachingResearchLookType().then(res => {
 					if (res.code == 1) {
-						this.arrayList = res.data.data
+						res.data.forEach(item => {
+							let arr = {
+								value: item,
+								lebal: this.tableTypeName[item]
+							}
+							this.tabsListArr.push(arr)
+							this.tabsList.push(this.tableTypeName[item])
+						})
+						if (this.tabsListArr.length > 0) {
+							this.initId = this.tabsListArr[0].value
+							this.init()
+						}
 					}
 				})
 			},
+			change(e) {
+				const item = this.tabsListArr.find(item => item.lebal == e.name);
+				const id = item ? item.value : 0
+				this.initId = id
+				this.arrayList = []
+				this.searchArr.page = 1
+				this.init()
+			},
 			getTableType(text) {
 				return this.tableTypeName[text]
 			},
 			info(id) {
 				console.log(id)
 				uni.navigateTo({
-				  url: '/pages/coach/my/teaching_management_info?id=' + id
+					url: '/pages/coach/my/teaching_management_info?id=' + id
+				})
+			},
+			onReachBottom() {
+				if (this.noMoreData || this.loading) return;
+				this.searchArr.page += 1
+				this.init();
+			},
+			init(id) {
+				this.searchArr.table_type = this.initId
+				apiRoute.teachingResearchList(this.searchArr).then(res => {
+					this.loading = true
+					if (res.code == 1) {
+						this.arrayList.push(...res.data.data)
+						if(res.last_page <= this.searchArr.page){
+							this.noMoreData = true;
+						}
+						this.loading = false
+					}
 				})
 			}
 		}
@@ -74,24 +128,29 @@
 </script>
 
 <style>
-	.div_style{
+	.div_style {
 		padding: 18rpx 50rpx;
 		background-color: #fff;
 		margin-top: 10rpx;
+		line-height: 30px;
 	}
-	.dis_style{
+
+	.dis_style {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 	}
-	.color_style{
+
+	.color_style {
 		font-size: 30rpx;
 		font-weight: bold;
 	}
-	.color_type_style{
+
+	.color_type_style {
 		font-size: 22rpx;
 	}
-	.color_date_style{
+
+	.color_date_style {
 		font-size: 22rpx;
 	}
 </style>

pages/coach/my/teaching_management_info.vue

@@ -6,6 +6,23 @@
 		<view class="date_style">
 			{{arrayInfo.update_time}}
 		</view>
+
+		<view class="url_style" v-if="arrayInfo.type == 1 && empty(arrayInfo.url)">
+			<video style="margin: auto;" :src="arrayInfo.url" :enable-progress-gesture="true"
+				:show-fullscreen-btn="true" :show-play-btn="true" @error="onVideoError" @play="onPlay"
+				@pause="onPause" />
+		</view>
+
+		<view class="url_image_style" v-if="arrayInfo.type == 3 && empty(arrayInfo.url)">
+			<image :src="arrayInfo.url" mode="aspectFill" @click="clickPreviewImage(arrayInfo.url)"
+				style="width: 80%;margin: auto;">
+			</image>
+		</view>
+
+		<view class="url_file_style" v-if="arrayInfo.type == 2 && empty(arrayInfo.url)">
+			<a style="cursor: pointer;color: blue;" @click="previewFile(arrayInfo.url)">素材文件</a>
+		</view>
+
 		<view class="con_style" v-html="arrayInfo.content"></view>
 	</view>
 </template>
@@ -16,7 +33,7 @@
 		data() {
 			return {
 				articleId: undefined,
-				arrayInfo: []
+				arrayInfo: [],
 			}
 		},
 		onLoad(options) {
@@ -32,19 +49,73 @@
 					}
 				})
 			},
+			clickPreviewImage(url) {
+				uni.previewImage({
+					urls: [url], // 支持多张图预览
+					current: url, // 当前显示的图片链接
+					success: () => {
+						console.log('预览成功');
+					},
+					fail: (err) => {
+						console.error('预览失败', err);
+					}
+				});
+			},
+			async previewFile(url) {
+				try {
+					// 1. 下载文件到本地
+					const {
+						tempFilePath
+					} = await this.downloadFile(url);
+
+					// 2. 打开文件
+					await uni.openDocument({
+						filePath: tempFilePath,
+						showMenu: true,
+						success: () => {
+							console.log('打开文档成功');
+						}
+					});
+				} catch (err) {
+					uni.showToast({
+						title: '预览失败',
+						icon: 'none'
+					});
+					console.error('预览失败:', err);
+				}
+			},
+
+			downloadFile(url) {
+				return new Promise((resolve, reject) => {
+					uni.downloadFile({
+						url,
+						success: (res) => {
+							if (res.statusCode === 200) {
+								resolve(res);
+							} else {
+								reject(new Error('下载失败'));
+							}
+						},
+						fail: (err) => {
+							reject(err);
+						}
+					});
+				});
+			}
 		}
 	}
 </script>
 
 <style>
-	.title_style{
+	.title_style {
 		width: 100%;
 		text-align: center;
 		font-size: 40rpx;
 		font-weight: bold;
 		padding-top: 10px;
 	}
-	.date_style{
+
+	.date_style {
 		width: 100%;
 		text-align: right;
 		font-size: 20rpx;
@@ -52,9 +123,24 @@
 		padding-right: 16rpx;
 		margin-top: 10px;
 	}
-	.con_style{
+
+	.con_style {
 		font-size: 30rpx;
 		padding: 18rpx;
 		margin-top: 20px;
 	}
+
+	.url_style {
+		margin-top: 20px;
+		text-align: center;
+	}
+
+	.url_image_style {
+		padding: 20rpx;
+		text-align: center;
+	}
+	
+	.url_file_style{
+		padding: 20rpx;
+	}
 </style>