修改：课程详情页面修改，课程列表如果课程免费不显示价格

pages/goOnEdu/course/courseDetail/courseDetail - 副本.vue

@@ -0,0 +1,320 @@
+<template>
+	<view>
+		<view class="container">
+			<view style="height: 500rpx;display: flex;
+				flex-direction: column;
+				justify-content: space-between;;">
+				<view style="height: 400rpx;width: 100%;background-color: aliceblue;flex: 0 0 auto;"></view>
+				<view class="course-tab-list">
+					<view class="course-tab-item" v-for="(data, index) in items" :key="index"
+						@click="onClickItem(index)" :class="currentTab === index ? 'tab-active' : ''">
+						{{ data }}
+					</view>
+				</view>
+			</view>
+			<view class="content">
+				<courseDesc v-if="currentTab === 0" :paddingBottom="100" showType="image"
+					:content="courseDetail.imgUrl?courseDetail.imgUrl:''" :hasBuy="courseDetail.hasBuy"
+					:payType="courseDetail.viewMode"></courseDesc>
+				<courseCredits v-if="currentTab === 1" :credit="courseDetail.courseCredits"></courseCredits>
+				<courseComment v-if="currentTab === 2" :paddingBottom="100" :commentList="commentList"></courseComment>
+			</view>
+
+		</view>
+		<view v-if="showBuy" class="section-bottom" @click="toBuy">
+			<text>点击购买</text>
+		</view>
+		<view v-if="currentTab === 2" class="section-bottom " style="background-color: #f2f2f2;">
+			<view class="comment-input-box">
+				<u-input :custom-style="inputStyle" class="comment-input" v-model="comment" :border="false"
+					placeholder="写留言" height="60" adjust-position />
+				<u-button class="comment-button" :hair-line="false" :custom-style="customStyle"
+					@click="toSend">发送</u-button>
+			</view>
+		</view>
+	</view>
+
+</template>
+
+<script setup>
+	import courseDesc from './component/courseDesc/courseDesc.vue';
+	import courseCredits from './component/courseCredits/courseCredits.vue';
+	import courseComment from './component/courseComment/courseComment.vue';
+	import {
+		loadCourseDetail,
+		loadCommentList,
+		sendComment
+	} from "@/api/edu.js"
+
+	import {
+		useAuthStore
+	} from '@/store/authStore'
+	const authStore = useAuthStore();
+	// const isMember = ref(false)
+
+	import {
+		ref, computed
+	} from 'vue'
+	import {
+		onLoad,
+		onShow
+	} from '@dcloudio/uni-app'
+
+	const courseDetail = ref({});
+	const courseId = ref(null);
+	const items = ref(['课程简介', '课程学分', '观看评论']);
+	const currentTab = ref(0);
+	const comment = ref("");
+	// 评论发送按钮样式
+	const customStyle = ref({
+		backgroundColor: '#e6e6e6',
+		color: '#333333',
+		fontWeight: 'bold',
+		height: '60rpx',
+		marginLeft: '20rpx',
+		border: 'none',
+		fontSize: '26rpx'
+	})
+	// 评论输入框样式
+	const inputStyle = ref({
+		backgroundColor: '#e6e6e6',
+		color: '#333333',
+		borderRadius: '5px',
+		padding: '0 20rpx',
+		fontSize: '26rpx'
+	})
+	// 评论列表
+	const commentList = ref([{
+			commentId: "01",
+			username: "用户名123",
+			iocn: "",
+			content: "评论内容评论内容评容，大赛冠军的",
+			commentTime: "2023-10-10 19:00:00"
+		},
+		{
+			commentId: "02",
+			username: "用户名567",
+			iocn: "",
+			content: "hajdkhd dhasjhd 等哈十九点按时鉴定会撒低级，撒谎客户端喝酒侃大山哈吉斯肯定会大会开始觉得暗黑界的是客户，大赛冠军的",
+			commentTime: "2023-10-11 19:00:00"
+		},
+		{
+			commentId: "03",
+			username: "用户名567",
+			iocn: "",
+			content: "hajdkhd dhasjhd ，，大赛冠军的",
+			commentTime: "2023-10-12 19:00:00"
+		},
+		{
+			commentId: "04",
+			username: "用户名567",
+			iocn: "",
+			content: "hajdkhd dhasjhd 等哈十九点按时鉴定会撒低级，撒谎客户端喝酒侃大山哈吉斯肯定会大会开始觉得暗黑界的是客户，大赛冠军的",
+			commentTime: "2023-10-13 19:00:00"
+		},
+		{
+			commentId: "05",
+			username: "用户名567",
+			iocn: "",
+			content: "hajdkhd dhasjhd 等哈十九点按时鉴定会撒低级，撒谎客户端喝酒侃大山哈吉斯肯定会大会开始觉得暗黑界的是客户，大赛冠军的",
+			commentTime: "2023-10-14 19:00:00"
+		},
+		{
+			commentId: "06",
+			username: "用户名567",
+			iocn: "",
+			content: "hajdkhd dhasjhd 等哈十九点按时鉴定会撒低级，撒谎客户端喝酒侃大山哈吉斯肯定会大会开始觉得暗黑界的是客户，大赛冠军的",
+			commentTime: "2025-01-17 12:00:00"
+		},
+		{
+			commentId: "07",
+			username: "用户名567",
+			iocn: "",
+			content: "hajdkhd dhasjhd 等哈十九点按时鉴定会撒低级，撒谎客户端喝酒侃大山哈吉斯肯定会大会开始觉得暗黑界的是客户，大赛冠军的",
+			commentTime: "2025-01-17 15:30:00"
+		}
+	])
+	// 点击tabs，切换
+	function onClickItem(e) {
+		if (currentTab.value != e) {
+			currentTab.value = e;
+			if (e === 2) {
+				getComment(courseId.value)
+			}
+		}
+	}
+	// 初始化
+	function init(id) {
+		loadCourseDetail(id).then(res => {
+			if (res?.data) {
+				courseDetail.value = res.data;
+				showBuy.value = showBuyAction()
+				// console.log(courseDetail, "课程详情")
+			}
+		})
+	}
+
+	function getComment(id) {
+		loadCommentList(id).then(res => {
+			if (res?.data) {
+				commentList.value = res.data;
+			}
+		})
+	}
+	// 购买课程
+	function toBuy() {
+		uni.navigateTo({
+			url: "/pages/goOnEdu/course/courseDetail/courseOrder?id=" + courseId.value
+		})
+		// console.log("购买该课程", courseDetail.value.id)
+	}
+
+	function toSend() {
+		sendComment({
+			courseId: courseId.value,
+			content: comment.value,
+			commentTime: formatDate(new Date())
+		}).then(res => {
+			getComment(courseId.value)
+			comment.value = ""
+		})
+	}
+
+	function formatDate(date) {
+		const pad = (num) => num.toString().padStart(2, '0');
+
+		const year = date.getFullYear();
+		const month = pad(date.getMonth() + 1); // 月份从0开始，需加1
+		const day = pad(date.getDate());
+
+		const hours = pad(date.getHours());
+		const minutes = pad(date.getMinutes());
+		const seconds = pad(date.getSeconds());
+
+		return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+	}
+	function showBuyAction(){
+		if (courseDetail.value.viewMode === '2' &&
+			!isMember.value &&
+			!courseDetail.value.hasBuy &&
+			currentTab.value === 0) {
+			console.log(1)
+			return true
+		}
+		// 付费，不管是不是会员，并且没买的
+		if (courseDetail.value.viewMode === '3' &&
+			!courseDetail.value.hasBuy &&
+			currentTab.value === 0) {
+			console.log(2)
+			return true
+		}
+		console.log(3)
+		return false
+	}
+	// const showBuy = computed(()=>{
+	// 	if (courseDetail.value.viewMode === '2' &&
+	// 		!isMember.value &&
+	// 		!courseDetail.value.hasBuy &&
+	// 		currentTab.value === 0) {
+	// 		console.log(1)
+	// 		return true
+	// 	}
+	// 	// 付费，不管是不是会员，并且没买的
+	// 	if (courseDetail.value.viewMode === '3' &&
+	// 		!courseDetail.value.hasBuy &&
+	// 		currentTab.value === 0) {
+	// 		console.log(2)
+	// 		return true
+	// 	}
+	// 	console.log(3)
+	// 	return false
+	// })
+	const showBuy = ref(false)
+	const isMember = computed(()=>{
+		return authStore.userInfo.isMember == '0' ? false : true
+	})
+	// 初始化页面
+	onLoad((option) => {
+		const {
+			id,
+			name
+		} = option;
+		// isMember.value = authStore.userInfo.isMember == '0' ? false : true;
+		// console.log("是否是会员", isMember.value)
+		courseId.value = id
+		uni.setNavigationBarTitle({
+			title: name
+		});
+	})
+	onShow(()=>{
+		init(courseId.value)
+		getComment(courseId.value)
+	})
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		height: 100vh;
+		width: 100vw;
+		background-color: #fff;
+		padding: 0 20rpx;
+		// display: flex;
+		// flex-direction: column;
+	}
+
+	.course-tab-list {
+		// margin: 15rpx 0;
+		display: flex;
+		background-color: #f2f2f2;
+		flex: 0 0 auto;
+
+		.course-tab-item {
+			width: 100%;
+			height: 80rpx;
+			line-height: 80rpx;
+			text-align: center;
+		}
+
+		.tab-active {
+			border-bottom: 1px solid #0069f6;
+		}
+	}
+
+	.content {
+		overflow: scroll;
+		height: calc(100vh - 500rpx - env(safe-area-inset-bottom, 0));
+		// flex: 1;
+		// padding-bottom: ;
+	}
+
+	.section-bottom {
+		height: 90rpx;
+		color: #fff;
+		font-size: 34rpx;
+		text-align: center;
+		line-height: 80rpx;
+		background-color: #fe0000;
+		width: 100%;
+		position: fixed;
+		bottom: 0;
+		box-sizing: content-box;
+		padding-bottom: env(safe-area-inset-bottom, 0);
+	}
+
+	.comment-input-box {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		box-sizing: border-box;
+		padding: 0 20rpx;
+		align-items: center;
+
+		.comment-input {
+			flex: 1;
+		}
+
+		.comment-button {
+			flex: 0 0 auto;
+		}
+	}
+</style>

pages/goOnEdu/course/courseDetail/courseDetail.vue

@@ -1,35 +1,50 @@
 <template>
 	<view>
 		<view class="container">
-			<view style="height: 500rpx;display: flex;
-				flex-direction: column;
-				justify-content: space-between;;">
-				<view style="height: 400rpx;width: 100%;background-color: aliceblue;flex: 0 0 auto;"></view>
-				<view class="course-tab-list">
-					<view class="course-tab-item" v-for="(data, index) in items" :key="index"
-						@click="onClickItem(index)" :class="currentTab === index ? 'tab-active' : ''">
-						{{ data }}
-					</view>
+			<view class="container-poster" style="width: 100%;padding: 0 20rpx;">
+				<image :src="courseDetail.poster?courseDetail.poster:''" mode="widthFix" style="width: 100%;" ></image>
+			</view>
+			<view class="course-tab-list">
+				<view class="course-tab-item" v-for="(data, index) in items" :key="index"
+					@click="onClickItem(index)" :class="currentTab === index ? 'tab-active' : ''">
+					{{ data }}
 				</view>
 			</view>
-			<view class="content">
-				<courseDesc v-if="currentTab === 0" :paddingBottom="100" showType="image"
-					:content="courseDetail.imgUrl?courseDetail.imgUrl:''" :hasBuy="courseDetail.hasBuy"
-					:payType="courseDetail.viewMode"></courseDesc>
-				<courseCredits v-if="currentTab === 1" :credit="courseDetail.courseCredits"></courseCredits>
-				<courseComment v-if="currentTab === 2" :paddingBottom="100" :commentList="commentList"></courseComment>
+			<view class="content" v-if="currentTab === 0">
+				<view class="content-text">
+					<view class="text-title">{{courseDetail.courseName}}</view>
+					<view class="text-title">课程概述</view>
+					<view class="text-content">{{courseDetail.summary}}</view>
+					<view class="text-title">课程时间</view>
+					<view class="text-content">{{courseDetail.courseDate}}</view>
+					<view class="text-title">培训地点</view>
+					<view class="text-content">{{courseDetail.loc}}</view>
+					<view class="text-tip" v-if="!isMember">个人会员或单位会员免费，点击现在入会></view>
+				</view>
 			</view>
-
-		</view>
-		<view v-if="showBuy" class="section-bottom" @click="toBuy">
-			<text>点击购买</text>
-		</view>
-		<view v-if="currentTab === 2" class="section-bottom " style="background-color: #f2f2f2;">
-			<view class="comment-input-box">
-				<u-input :custom-style="inputStyle" class="comment-input" v-model="comment" :border="false"
-					placeholder="写留言" height="60" adjust-position />
-				<u-button class="comment-button" :hair-line="false" :custom-style="customStyle"
-					@click="toSend">发送</u-button>
+			<view class="content" v-if="currentTab === 1" style="overflow: hidden;">
+				<view class="" style="margin-bottom: 140rpx;height: 100%;overflow: scroll;padding-left: 20rpx;padding-right: 20rpx;">
+					<view v-for="(comment, index) in sortedCommentList" :key="index" class="comment-list-item">
+						<view class="comment-list-left">
+							<image :src="comment.icon" class="comment-list-avator"></image>
+						</view>
+						<view class="comment-list-right">
+							<view style="margin-bottom: 15rpx;">
+								<text class="comment-list-username">{{ comment.username }}</text>
+								<text class="comment-list-moment">{{ formatTime(comment.commentTime) }}</text>
+							</view>
+							<view>{{ comment.content }}</view>
+						</view>
+					</view>
+				</view>
+				<view class="section-bottom " style="background-color: #f2f2f2;">
+					<view class="comment-input-box">
+						<u-input :custom-style="inputStyle" class="comment-input" v-model="comment" :border="false"
+							placeholder="写留言" height="60" adjust-position />
+						<u-button class="comment-button" :hair-line="false" :custom-style="customStyle"
+							@click="toSend">发送</u-button>
+					</view>
+				</view>
 			</view>
 		</view>
 	</view>
@@ -37,9 +52,6 @@
 </template>
 
 <script setup>
-	import courseDesc from './component/courseDesc/courseDesc.vue';
-	import courseCredits from './component/courseCredits/courseCredits.vue';
-	import courseComment from './component/courseComment/courseComment.vue';
 	import {
 		loadCourseDetail,
 		loadCommentList,
@@ -62,7 +74,7 @@
 
 	const courseDetail = ref({});
 	const courseId = ref(null);
-	const items = ref(['课程简介', '课程学分', '观看评论']);
+	const items = ref(['课程简介', '观看评论']);
 	const currentTab = ref(0);
 	const comment = ref("");
 	// 评论发送按钮样式
@@ -198,37 +210,19 @@
 			!isMember.value &&
 			!courseDetail.value.hasBuy &&
 			currentTab.value === 0) {
-			console.log(1)
+			// console.log(1)
 			return true
 		}
 		// 付费，不管是不是会员，并且没买的
 		if (courseDetail.value.viewMode === '3' &&
 			!courseDetail.value.hasBuy &&
 			currentTab.value === 0) {
-			console.log(2)
+			// console.log(2)
 			return true
 		}
-		console.log(3)
+		// console.log(3)
 		return false
 	}
-	// const showBuy = computed(()=>{
-	// 	if (courseDetail.value.viewMode === '2' &&
-	// 		!isMember.value &&
-	// 		!courseDetail.value.hasBuy &&
-	// 		currentTab.value === 0) {
-	// 		console.log(1)
-	// 		return true
-	// 	}
-	// 	// 付费，不管是不是会员，并且没买的
-	// 	if (courseDetail.value.viewMode === '3' &&
-	// 		!courseDetail.value.hasBuy &&
-	// 		currentTab.value === 0) {
-	// 		console.log(2)
-	// 		return true
-	// 	}
-	// 	console.log(3)
-	// 	return false
-	// })
 	const showBuy = ref(false)
 	const isMember = computed(()=>{
 		return authStore.userInfo.isMember == '0' ? false : true
@@ -239,8 +233,6 @@
 			id,
 			name
 		} = option;
-		// isMember.value = authStore.userInfo.isMember == '0' ? false : true;
-		// console.log("是否是会员", isMember.value)
 		courseId.value = id
 		uni.setNavigationBarTitle({
 			title: name
@@ -250,23 +242,51 @@
 		init(courseId.value)
 		getComment(courseId.value)
 	})
+	
+	function formatDateS(dateStr) {
+		return dateStr.replace(" ", "T");
+	}
+	
+	function formatTime(timeString) {
+	    const commentDate = new Date(formatDateS(timeString));
+	    const now = new Date();
+	    const diff = now - commentDate;
+	
+	    const minutes = Math.floor(diff / 60000);
+	    const hours = Math.floor(diff / 3600000);
+	    const days = Math.floor(diff / 86400000);
+	
+	    if (minutes < 1) { // 修改这里以处理0分钟
+	        return "刚刚";
+	    } else if (minutes < 60) {
+	        return `${minutes}分钟前`;
+	    } else if (hours < 24) {
+	        return `${hours}小时前`;
+	    } else {
+	        return commentDate.toISOString().split('T')[0];
+	    }
+	}
+	
+	const sortedCommentList = computed(() => {
+		return commentList.value.sort((a, b) =>
+			new Date(formatDateS(b.commentTime)) - new Date(formatDateS(a.commentTime))
+		);
+	});
 </script>
 
 <style lang="scss" scoped>
 	.container {
-		height: 100vh;
+		// height: 100vh;
 		width: 100vw;
 		background-color: #fff;
-		padding: 0 20rpx;
-		// display: flex;
-		// flex-direction: column;
+		// padding: 0 20rpx;
 	}
 
 	.course-tab-list {
-		// margin: 15rpx 0;
 		display: flex;
 		background-color: #f2f2f2;
 		flex: 0 0 auto;
+		margin: 0 20rpx;
 
 		.course-tab-item {
 			width: 100%;
@@ -279,12 +299,31 @@
 			border-bottom: 1px solid #0069f6;
 		}
 	}
-
+	// .container-poster{
+	// 	height: calc(100vh - 500rpx - env(safe-area-inset-bottom, 0));
+	// }
 	.content {
 		overflow: scroll;
-		height: calc(100vh - 500rpx - env(safe-area-inset-bottom, 0));
-		// flex: 1;
-		// padding-bottom: ;
+		// height: calc(100vh - 500rpx - env(safe-area-inset-bottom, 0));
+		height: 700rpx;
+		position: relative;
+		.content-text{
+			padding: 0 20rpx env(safe-area-inset-bottom, 0);
+			font-size: 38rpx;
+			.text-title{
+				font-weight: bold;
+				margin-bottom: 15rpx;
+			}
+			.text-content{
+				font-size: 32rpx;
+				margin-bottom: 20rpx;
+			}
+			.text-tip{
+				color: red;
+				// margin-bottom: 20rpx;
+				margin-bottom: env(safe-area-inset-bottom, 0);
+			}
+		}
 	}
 
 	.section-bottom {
@@ -295,7 +334,7 @@
 		line-height: 80rpx;
 		background-color: #fe0000;
 		width: 100%;
-		position: fixed;
+		position: absolute;
 		bottom: 0;
 		box-sizing: content-box;
 		padding-bottom: env(safe-area-inset-bottom, 0);
@@ -317,4 +356,28 @@
 			flex: 0 0 auto;
 		}
 	}
+	
+	.comment-list-item {
+		display: flex;
+		padding: 20rpx 0;
+		font-size: 28rpx;
+		.comment-list-left{
+			flex: 0 0 auto;
+			padding-right: 20rpx;
+			padding-left: 10rpx;
+			.comment-list-avator{
+				width: 100rpx;
+				height: 100rpx;
+				border-radius: 50%;
+			}
+		}
+		.comment-list-right{
+			flex: 1;
+			.comment-list-username{
+				padding-right: 25rpx;
+				font-size: 32rpx;
+				font-weight: bold;
+			}
+		}
+	}
 </style>

pages/goOnEdu/course/courseHome/courseHome.vue

@@ -15,7 +15,7 @@
 			<view v-for="(course,index) in filterCourses" :key="course.id" @click="toPage(course)">
 				<view class="course-item">
 					<view class="course-item-image">
-						<image class="course-image" :src="course.imgUrl" mode="aspectFill"></image>
+						<image class="course-image" :src="course.cover" mode="aspectFill"></image>
 					</view>
 					<view class="course-item-content">
 						<view class="course-title">
@@ -34,7 +34,11 @@
 							<u-icon name="clock" size="28"></u-icon>
 							{{ getDateWeek(course.courseDate) }}
 						</view>
-						<view class="course-price">￥{{ course.price }}元</view>
+						<view class="course-price" 
+						v-if=" (course.viewMode === '3') || (isMember && course.viewMode==='2')">
+						￥{{ isMember ? course.priceMember : course.price }}元
+						</view>
+						<view v-else style="height: 30rpx;width: 100%;"></view>
 						<button :class="['button', getButtonClass(course)]">{{ getButtonText(course) }}</button>
 					</view>
 				</view>

pages/goOnEdu/course/courseMine/mineRecord/mineRecord.vue

@@ -12,7 +12,7 @@
 			<view v-for="(course,index) in courses" :key="course.id">
 				<view class="course-item">
 					<view class="course-item-image">
-						<image class="course-image" :src="course.imgUrl" mode="aspectFill"></image>
+						<image class="course-image" :src="course.cover" mode="aspectFill"></image>
 					</view>
 					<view class="course-item-content">
 						<view class="course-title">