Просмотр исходного кода

fix: 调试视频详情-评论模块

wenxingxing 2 дней назад
Родитель
Сommit
530b18e2e3
3 измененных файлов с 165 добавлено и 109 удалено
  1. 15 1
      api/course.js
  2. 70 59
      pages/course/components/newCommentList.vue
  3. 80 49
      pages/course/info.vue

+ 15 - 1
api/course.js

@@ -302,4 +302,18 @@ let request = new Request().http
  //获取最近看课记录
  export function getAppCourseLearningOne(data, type) {
  	return request('/app/course/getAppCourseLearningOne', data, 'GET');
- }
+ }
+
+  //新版-课堂课堂评论
+ export function getNewCommentListApi(parmars,page = 1, size = 10) {
+   let data = {"pageNum":page,"pageSize":size};
+   data=Object.assign(parmars, data);
+   return request('/store/app/course/comment/list',data,'GET');
+ }
+
+ 
+ //新版-新增课堂评论
+ export function addNewCommentApi(data) {
+ 	 return request('/store/app/course/comment/addComment',data,'POST','application/json;charset=UTF-8');
+ }
+ 

+ 70 - 59
pages/course/components/newCommentList.vue

@@ -1,81 +1,92 @@
 <template>
-	<view class="contentViewClass">
+	<view v-if="commentList.length > 0" class="contentViewClass">
 		<view class="commentItem" v-for="(item, index) in commentList" :key="index">
-			<image class="comment-avatar" :src="$isEmpty(item.avatar)?defHeadImg:item.avatar" mode="aspectFill"></image>
+			<image class="comment-avatar" :src="$isEmpty(item.avatar) ? defHeadImg : item.avatar" mode="aspectFill"></image>
 			<view class="comment-box">
 				<view class="comment-people">
-					<view class="comment-people-name textOne">{{item.nickName}}</view>
-					<view class="comment-time">{{ $isEmpty(item.createTime)?"":$formatDate(item.createTime) }}</view>
+					<view class="comment-people-name textOne">{{ item.nickName }}</view>
+					<view class="comment-time">{{ $isEmpty(item.createTime) ? "" : $formatDate(item.createTime) }}</view>
 				</view>
-				<view class="comment-text">{{item.content}}</view>
+				<view class="comment-text">{{ item.content }}</view>
 			</view>
 		</view>
 	</view>
+	<view class="emptyCourse" v-else>暂无评论~</view>
 </template>
 
 <script>
-	export default {
-		name: "newCommentList",
-		props: {
-			commentList: {
-				type: Array,
-				default: () => []
-			}
-		},
-		data() {
-			return {
-				defHeadImg: "/static/image/hall/my_heads_icon.png",
-			};
-		},
-	}
+export default {
+	name: "newCommentList",
+	props: {
+		commentList: {
+			type: Array,
+			default: () => []
+		}
+	},
+	data() {
+		return {
+			defHeadImg: "/static/image/hall/my_heads_icon.png",
+		};
+	},
+}
 </script>
 
 <style scoped lang="scss">
-	.contentViewClass {
-		width: 100%;
-		padding-bottom: 180rpx;
-	}
+.contentViewClass {
+	width: 100%;
+	padding-bottom: 180rpx;
+}
 
-	.commentItem {
-		width: 100%;
-		display: flex;
-		align-items: flex-start;
-		margin-bottom: 24rpx;
-	}
+.commentItem {
+	width: 100%;
+	display: flex;
+	align-items: flex-start;
+	margin-bottom: 24rpx;
+}
 
-	.comment-avatar {
-		width: 90rpx;
-		height: 90rpx;
-		margin-right: 12rpx;
-	}
+.comment-avatar {
+	width: 90rpx;
+	height: 90rpx;
+	margin-right: 12rpx;
+	border-radius: 100%;
+}
 
-	.comment-box {
-		width: calc(100vw - 150rpx);
-	}
+.comment-box {
+	width: calc(100vw - 150rpx);
+}
 
-	.comment-people {
-		width: 100%;
-		margin-bottom: 12rpx;
-	}
+.comment-people {
+	width: 100%;
+	margin-bottom: 12rpx;
+}
 
-	.comment-people-name {
-		width: 100%;
-		font-weight: 600;
-		font-size: 32rpx;
-		color: #222222;
-		margin-bottom: 12rpx;
-	}
+.comment-people-name {
+	width: 100%;
+	font-weight: 600;
+	font-size: 32rpx;
+	color: #222222;
+	margin-bottom: 12rpx;
+}
 
-	.comment-time {
-		font-weight: 400;
-		font-size: 28rpx;
-		color: rgba(0, 0, 0, 0.45);
-	}
+.comment-time {
+	font-weight: 400;
+	font-size: 28rpx;
+	color: rgba(0, 0, 0, 0.45);
+}
 
-	.comment-text {
-		font-weight: 400;
-		font-size: 32rpx;
-		color: #222222;
-		line-height: 44rpx;
-	}
+.comment-text {
+	font-weight: 400;
+	font-size: 32rpx;
+	color: #222222;
+	line-height: 44rpx;
+}
+
+.emptyCourse {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 200rpx;
+	padding: 24rpx 50rpx;
+	color: #999999;
+}
 </style>

+ 80 - 49
pages/course/info.vue

@@ -132,7 +132,8 @@
 			</view>
 		</view>
 
-		<scroll-view class="scroll-Y" :scroll-y="true" :style="'height:' + clientHeight + 'px;'" v-show="!isShowList">
+		<scroll-view class="scroll-Y" :scroll-y="true" :style="'height:' + clientHeight + 'px;'" v-show="!isShowList"
+			@scrolltolower="getPageNewCommentData">
 			<view class="video-info">
 				<view class="video-info-header">
 					<view class="video-info-headerl">
@@ -179,7 +180,8 @@
 						<text>{{ isFavorite ? "已收藏" : "收藏" }}</text>
 					</view>
 					<view @tap="doLike()">
-						<image :src="isLike ? '/static/image/hall/like_on_icon.png' : '/static/image/hall/like_icon.png'"
+						<image
+							:src="isLike ? '/static/image/hall/like_on_icon.png' : '/static/image/hall/like_icon.png'"
 							mode="aspectFill"></image>
 						<text>{{ isLike ? "喜欢" : "喜欢" }}</text>
 					</view>
@@ -254,13 +256,13 @@
 				<view class="box-header">
 					<view class="box-header-title">评论</view>
 					<view v-if="false" class="box-header-r" @tap="goToComment()">
-						<text>共{{ newCommentList.length }}条</text>
+						<text>共{{ newCommentArrList.length }}条</text>
 						<image src="@/static/image/hall/my_right_arrow_right_icon.png" mode="aspectFill"></image>
 					</view>
 				</view>
 				<view style="padding: 0 24rpx 20rpx;">
 					<!-- <commentList :commentList="data.commentList" /> -->
-					<newCommentList :commentList="newCommentList" />
+					<newCommentList :commentList="newCommentArrList" />
 				</view>
 			</view>
 
@@ -280,7 +282,7 @@
 			</view>
 		</scroll-view>
 		<view class="bottomCommentInputClass">
-			<input type="text" v-model="inputContent" placeholder="发表我的态度" :maxlength="50" class="input-box"
+			<input type="text" v-model="inputComment" placeholder="发表我的态度" :maxlength="50" class="input-box"
 				confirm-type="send" @confirm="sendCommentMsg" />
 			<view class="send-btn" @click="sendCommentMsg">发送</view>
 			<view class="icon-btn" @tap="openShare">
@@ -289,7 +291,7 @@
 			</view>
 		</view>
 		<!-- h5下载 -->
-		<h5-down-app-tip :pageUrl="pageUrl" :type="'course'" :courseId="courseId" />
+		<!-- <h5-down-app-tip :pageUrl="pageUrl" :type="'course'" :courseId="courseId" /> -->
 
 		<!-- 分享弹窗 -->
 		<u-popup :show="showShare" @close="closeShareAct()">
@@ -445,7 +447,9 @@ import {
 	wxPayment,
 	getCourseOrderById,
 	getComments,
-	saveMsg
+	saveMsg,
+	getNewCommentListApi,
+	addNewCommentApi
 } from '@/api/course'
 import commentList from "./components/commentList.vue";
 import newCommentList from "./components/newCommentList.vue";
@@ -485,44 +489,8 @@ export default {
 			isShowQuestions: false,
 			isShowAnswerPrompt: false,
 			answerPromptType: 1,
-			inputContent: '',
-			newCommentList: [{
-				avatar: "",
-				content: "讲的真好,循序渐进,让小白也很容易能入门学习!让小白也很容易能入门学习让小白也很容易能入门学习让小白也很容易能入门学习让小白也很容易能入门学习让小白也很容易能入门学习",
-				createTime: "2026-04-23  12:37",
-				nickName: "app用户32781app用户32781app用户32781app用户32781app用户32781app用户32781"
-			},
-			{
-				avatar: "",
-				content: "讲的真好,循序渐进,让小白也很容易能入门学习!",
-				createTime: "2026-02-10  12:37",
-				nickName: "app用户32781app用户32781app用户32781app用户32781app用户32781app用户32781"
-			},
-			{
-				avatar: "",
-				content: "讲的真好,循序渐进,让小白也很容易能入门学习!",
-				createTime: "2025-02-10  12:37",
-				nickName: "app用户32781app用户32781app用户32781app用户32781app用户32781app用户32781"
-			},
-			{
-				avatar: "",
-				content: "讲的真好,循序渐进,让小白也很容易能入门学习!",
-				createTime: "2026-02-10  12:37",
-				nickName: "app用户32781app用户32781app用户32781app用户32781app用户32781app用户32781"
-			},
-			{
-				avatar: "",
-				content: "讲的真好,循序渐进,让小白也很容易能入门学习!",
-				createTime: "2026-02-10  12:37",
-				nickName: "app用户32781app用户32781app用户32781app用户32781app用户32781app用户32781"
-			},
-			{
-				avatar: "",
-				content: "讲的真好,循序渐进,让小白也很容易能入门学习!",
-				createTime: "2026-02-10  12:37",
-				nickName: "app用户32781app用户32781app用户32781app用户32781app用户32781app用户32781"
-			}
-			],
+			inputComment: '',
+			newCommentArrList: [],
 			data: {
 				courseId: null,
 				imgUrl: "",
@@ -656,6 +624,11 @@ export default {
 			danmuboxHeight: 0,
 			isPause: true, // 视频是否暂停
 			isClickVideo: false, // 是否点击视频
+			commentPage: {
+				pageNum: 1,
+				pageSize: 10,
+				total: 0,
+			},
 		}
 	},
 	onLoad(options) {
@@ -686,6 +659,7 @@ export default {
 		if (this.$isLogin()) {
 			this.getUserInfo();
 			this.checkFavorite();
+			this.getNewCommentArrList();
 			this.checkLike();
 			// #ifndef H5
 			uni.onKeyboardHeightChange(this.keyboardHeightChange);
@@ -763,6 +737,27 @@ export default {
 		uni.$off("refreshCatalog");
 	},
 	methods: {
+		// 获取新版-评论列表
+		async getNewCommentArrList() {
+			let params = {
+				courseId: this.courseId,
+				sortType: 2
+			};
+			const res = await getNewCommentListApi(params, this.commentPage.pageNum, this.commentPage.pageSize);
+			if (res.code === 200 && res.data.list.length > 0) {
+				this.commentPage.total = res.data.total;
+				this.newCommentArrList = [...this.newCommentArrList, ...res.data.list];
+			}
+		},
+		// 分页获取评论数据
+		getPageNewCommentData() {
+			if (this.commentPage.total <= this.newCommentArrList.length) {
+				return;
+			}
+			this.commentPage.pageNum++;
+			this.getNewCommentArrList();
+		},
+
 		// 点击答题
 		handleAnswerMethods() {
 			this.isShowQuestions = true
@@ -787,7 +782,45 @@ export default {
 			this.answerPromptType = 3
 			this.isShowAnswerPrompt = true
 		},
-		sendCommentMsg() { },
+		// 发送评论
+		sendCommentMsg() {
+			if (this.inputComment == '' || this.inputComment.trim() == '') {
+				uni.showToast({
+					title: '评论不能为空~',
+					icon: 'none'
+				})
+				return;
+			}
+			if (!this.$isLogin()) {
+				uni.showToast({
+					title: '请先登录后评论~',
+					icon: 'none'
+				})
+				setTimeout(() => {
+					this.$showLoginPage();
+				}, 1500);
+			}
+
+			addNewCommentApi({
+				courseId: this.courseId,
+				type: 1,
+				content: this.inputComment,
+				toUserId: this.user.userId,
+			}).then(res => {
+				if (res.code == 200) {
+					uni.showToast({
+						title: '评论成功~',
+						icon: 'none'
+					})
+					this.inputComment = '';
+					this.commentPage.pageNum = 1;
+					this.commentPage.total = 0;
+					this.newCommentArrList = [];
+					this.getNewCommentArrList();
+				}
+			});
+		},
+
 		endCountsTime() {
 			if (this.timer) {
 				clearInterval(this.timer);
@@ -1366,9 +1399,7 @@ export default {
 				"videoId": this.pickCatalog.videoId
 			};
 			addDuration(parmas).then(res => {
-				if (res.code == 200) {
-
-				}
+				if (res.code == 200) {}
 			},
 				rej => { }
 			);