展开培训课程详情页面设计：课程详情、观看评论

pages.json

@@ -299,7 +299,7 @@
 		},
 		{
 			"path" : "pages/daiJiaoGeRenChaXunJieGuo/daiJiaoGeRenChaXunJieGuo",
-			"style" : 
+			"style" :
 			{
 				"navigationBarTitleText" : "查询结果",
 				"enablePullDownRefresh": false,
@@ -310,7 +310,7 @@
 		},
 		{
 			"path" : "pages/daiJiaoDanWeiHuiFei/daiJiaoDanWeiHuiFei",
-			"style" : 
+			"style" :
 			{
 				"navigationBarTitleText" : "代缴单位会费",
 				"enablePullDownRefresh": false,
@@ -321,7 +321,7 @@
 		},
 		{
 			"path" : "pages/daiJiaoDanWeiChaXunJieGuo/daiJiaoDanWeiChaXunJieGuo",
-			"style" : 
+			"style" :
 			{
 				"navigationBarTitleText" : "单位会费缴交",
 				"enablePullDownRefresh": false,
@@ -329,6 +329,17 @@
 					"titleNView": true
 				}
 			}
+		},
+		{
+			"path" : "pages/goOnEdu/course/courseDetail/courseDetail",
+			"style" : {
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"app-plus": {
+					"titleNView": false
+				}
+			}
 		}
 	],
 	"globalStyle": {

pages/goOnEdu/course/component/courseHome/courseHome.vue

@@ -1,23 +1,30 @@
 <template>
 	<view class="container">
 		<!-- 搜索 -->
-		<u-search @search="search" :show-action="false" shape="round" placeholder="搜索您想要的内容" v-model="searchWord"></u-search>
+		<u-search @search="search" :show-action="false" shape="round" placeholder="搜索您想要的内容"
+			v-model="searchWord"></u-search>
 		<!-- tabs -->
 		<view style="padding-top: 20rpx;display: flex;">
-			<u-tabs style="flex: 1;"  :list="tabsList" :is-scroll="true" font-size="24" :bold="false"
+			<u-tabs style="flex: 1;" :list="tabsList" :is-scroll="true" font-size="24" :bold="false"
 				inactive-color="#000000" active-color="#000000" :bar-style="{'background-color': '#2979ff'}"
 				:gutter="30" height="45" v-model="currentTab" @change="changeTab"></u-tabs>
 			<u-icon name="list" style="flex: 0 0 auto;padding-left: 20rpx;"></u-icon>
 		</view>
 		<!-- 列表 -->
 		<view class="course-list">
-			<view v-for="course in filterCourses" :key="course.id">
+			<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.keChengTuPian" mode="aspectFill"></image>
 					</view>
 					<view class="course-item-content">
-						<view class="course-title">{{ course.keChengMingCheng }}</view>
+						<view class="course-title">
+							<text>{{ course.keChengMingCheng }}</text>
+							<image style="width: 25rpx;height: 25rpx;padding-left: 20rpx;"
+								:src="course.isShouCang ? '/static/edu-icon/favi-icon.png' : '/static/edu-icon/no-favi-icon.png'"
+								@click.stop="collectCourse(course.id, index)">
+							</image>
+						</view>
 						<view class="course-type">{{ course.keChengLeXing }}</view>
 						<view class="course-teacher">
 							<u-icon name="account" size="28"></u-icon>
@@ -41,8 +48,11 @@
 	import {
 		ref
 	} from 'vue';
-	import { onLoad } from '@dcloudio/uni-app'
+	import {
+		onLoad
+	} from '@dcloudio/uni-app'
 	const searchWord = ref("")
+	const isMember = ref(false);
 	const tabsList = ref([{
 		name: '全部'
 	}, {
@@ -57,17 +67,15 @@
 	const filterCourses = ref([]);
 	const courses = ref([{
 			id: 1,
-			keChengMingCheng: "前端开发基础",
+			keChengMingCheng: "前端开发基础前端开发基础前端开发基础",
 			keChengLeXing: "精英训练营",
 			shouKeZhe: "张老师",
 			shouKeShiJian: "2023-10-01",
 			keChengTuPian: "https://tse3-mm.cn.bing.net/th/id/OIP-C.YKoZzgmubNBxQ8j-mmoTKAHaEK?rs=1&pid=ImgDetMain",
 			jiaGe: 99.00,
-			isMaiFei: true,
 			isGouMai: false,
-			isJieShu: false,
-			isHuiYuanMianFei: false,
-			isShouCang: false // 新增字段，标识是否收藏
+			isShouCang: true,
+			fuFeiLeiXing: "免费" // 新增字段，标识课程的付费类型
 		},
 		{
 			id: 2,
@@ -77,11 +85,9 @@
 			shouKeShiJian: "2023-09-15",
 			keChengTuPian: "https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c",
 			jiaGe: 199.00,
-			isMaiFei: false,
 			isGouMai: false,
-			isJieShu: false,
-			isHuiYuanMianFei: false,
-			isShouCang: false // 新增字段，标识是否收藏
+			isShouCang: false,
+			fuFeiLeiXing: "会员免费"
 		},
 		{
 			id: 3,
@@ -91,11 +97,9 @@
 			shouKeShiJian: "2023-11-05",
 			keChengTuPian: "https://desk-fd.zol-img.com.cn/t_s960x600c5/g4/M03/00/0C/Cg-4zFS8bC-Ie9zBADCvovJAqiEAATJ8wDX__cAMK-6184.jpg",
 			jiaGe: 149.00,
-			isMaiFei: false,
 			isGouMai: false,
-			isJieShu: false,
-			isHuiYuanMianFei: true,
-			isShouCang: false // 新增字段，标识是否收藏
+			isShouCang: false,
+			fuFeiLeiXing: "付费"
 		},
 		{
 			id: 4,
@@ -105,41 +109,88 @@
 			shouKeShiJian: "2023-08-20",
 			keChengTuPian: "https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c",
 			jiaGe: 299.00,
-			isMaiFei: false,
 			isGouMai: true,
-			isJieShu: true,
-			isHuiYuanMianFei: false,
-			isShouCang: false // 新增字段，标识是否收藏
+			isShouCang: false,
+			fuFeiLeiXing: "付费"
 		},
 		{
 			id: 5,
-			keChengMingCheng: "移动端开发技巧移动端开发技巧移动端开发技巧",
+			keChengMingCheng: "移动端开发技巧",
 			keChengLeXing: "精英训练营",
 			shouKeZhe: "钱老师",
-			shouKeShiJian: "2023-07-18",
+			shouKeShiJian: "2025-07-18",
 			keChengTuPian: "https://desk-fd.zol-img.com.cn/t_s960x600c5/g4/M03/00/0C/Cg-4zFS8bC-Ie9zBADCvovJAqiEAATJ8wDX__cAMK-6184.jpg",
 			jiaGe: 89.00,
-			isMaiFei: false,
 			isGouMai: true,
-			isJieShu: false,
-			isHuiYuanMianFei: false,
-			isShouCang: false // 新增字段，标识是否收藏
-		}
+			isShouCang: false,
+			fuFeiLeiXing: "付费"
+		},
+		{
+			id: 6,
+			keChengMingCheng: "11Vue.js 从入门到精通",
+			keChengLeXing: "领袖锻造营",
+			shouKeZhe: "李老师11",
+			shouKeShiJian: "2023-09-15",
+			keChengTuPian: "https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c",
+			jiaGe: 199.00,
+			isGouMai: true,
+			isShouCang: false,
+			fuFeiLeiXing: "会员免费"
+		},
+		{
+			id: 7,
+			keChengMingCheng: "113Vue.js 从入门到精通",
+			keChengLeXing: "领袖锻造营",
+			shouKeZhe: "李老师11",
+			shouKeShiJian: "2025-09-15",
+			keChengTuPian: "https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c",
+			jiaGe: 199.00,
+			isGouMai: true,
+			isShouCang: false,
+			fuFeiLeiXing: "会员免费"
+		},
 	]);
+
 	// 按钮的文字
 	function getButtonText(course) {
-		if (course.isMaiFei) return "免费";
-		if (course.isGouMai) return course.isJieShu ? "点击查看回放" : "点击查看";
-		if (course.isHuiYuanMianFei) return "会员免费";
-		return "点击购买";
+		const currentDate = new Date();
+		const classDate = new Date(course.shouKeShiJian);
+
+		if (course.fuFeiLeiXing === "免费") {
+			return "免费";
+		}
+		if (course.fuFeiLeiXing === "会员免费") {
+			if (isMember.value) return "会员免费";
+			if (!course.isGouMai && !isMember.value) return "会员免费";
+			if (course.isGouMai) {
+				return currentDate < classDate ? "点击查看" : "点击查看回放";
+			}
+		}
+
+		if (course.fuFeiLeiXing === "付费") {
+			if (!course.isGouMai) return "点击购买";
+			return currentDate < classDate ? "点击查看" : "点击查看回放";
+		}
+
+		return "error"; // 默认返回
 	}
+
+
 	// 按钮的样式
 	function getButtonClass(course) {
-		if (course.isMaiFei) return 'free';
-		if (course.isGouMai) return course.isJieShu ? 'replay' : 'purchased';
-		if (course.isHuiYuanMianFei) return 'member-free';
-		return 'purchase';
+		if (course.fuFeiLeiXing === "免费") return 'free';
+		if (course.fuFeiLeiXing === "会员免费") {
+			if (isMember.value) return 'member-free';
+			return course.isGouMai ? (new Date() < new Date(course.shouKeShiJian) ? 'purchased' : 'replay') :
+				'member-free';
+		}
+		if (course.fuFeiLeiXing === "付费") {
+			return course.isGouMai ? (new Date() < new Date(course.shouKeShiJian) ? 'purchased' : 'replay') : 'purchase';
+		}
+		return 'error';
 	}
+
+
 	// 日期格式：xxxx年xx月xx日（星期x）
 	function getDateWeek(val) {
 		const date = new Date(val);
@@ -152,24 +203,40 @@
 		return `${year}年${month}月${day}日（星期${dayOfWeek}）`
 	}
 
+	// 切换搜索框下面的tab
 	function changeTab(index) {
-		if(index===0){
+		if (index === 0) {
 			filterCourses.value = courses.value
 			return
 		}
-		filterCourses.value = courses.value.filter(item=> item.keChengLeXing == tabsList.value[index].name )
+		filterCourses.value = courses.value.filter(item => item.keChengLeXing == tabsList.value[index].name)
 	}
 	// 搜索
-	function search(e){
-		console.log(e,"searchword")
+	function search(e) {
+		console.log(e, "searchword")
+	}
+	// 收藏
+	function collectCourse(id,index) {
+		// 联调后端，
+		// 返回成功后
+		courses.value[index].isShouCang = !courses.value[index].isShouCang
 	}
 	// 初始化
-	function init () {
+	function init() {
 		// 初始化页面，获取数据
 		filterCourses.value = courses.value
 		searchWord.value = ""
 	}
+
+	function toPage(course) {
+		uni.navigateTo({
+			url: `/pages/goOnEdu/course/courseDetail/courseDetail?id=${course.id}&name=${course.keChengMingCheng}`
+		});
+	}
+
 	onLoad(() => {
+		const userInfo = uni.getStorageSync("userinfo");
+		isMember.value = userInfo.isMember
 		init()
 	})
 </script>
@@ -228,9 +295,12 @@
 				color: #fe0000;
 				letter-spacing: 2rpx;
 			}
+
 			.button::after {
-			  content: none; /* 移除内容 */
+				content: none;
+				/* 移除内容 */
 			}
+
 			.button {
 				position: absolute;
 				right: 0;
@@ -246,6 +316,7 @@
 				color: white;
 				border: none;
 			}
+
 			.free {
 				background-color: #006af4;
 			}
@@ -260,9 +331,9 @@
 				background-size: cover;
 				background-repeat: no-repeat;
 				color: #000;
-				    height: initial;
-				    padding: 6rpx 0 3rpx;
-				    border-radius: 0;
+				height: initial;
+				padding: 6rpx 0 3rpx;
+				border-radius: 0;
 			}
 
 			.replay {
@@ -274,7 +345,4 @@
 			}
 		}
 	}
-
-
-
-</style>
+</style>

pages/goOnEdu/course/component/courseMine/courseMine.vue

@@ -7,34 +7,36 @@
 	</view>
 </template>
 
-<script>
-	export default {
-		data() {
-			return {
-				btnList: [
-					{
-						id: "1",
-						path: "",
-						name: "观看记录"
-					},
-					{
-						id: "2",
-						path: "",
-						name: "学分明细"
-					},
-					{
-						id: "3",
-						path: "",
-						name: "我的收藏"
-					},
-				]
-			};
-		}
-	}
+<script setup>
+	import {
+		ref
+	} from 'vue'
+	import {
+		onLoad
+	} from '@dcloudio/uni-app'
+	const btnList = ref([{
+			id: "1",
+			path: "",
+			name: "观看记录"
+		},
+		{
+			id: "2",
+			path: "",
+			name: "学分明细"
+		},
+		{
+			id: "3",
+			path: "",
+			name: "我的收藏"
+		},
+	]);
+	onLoad(() => {
+		console.log('课程-我的页面')
+	})
 </script>
 
 <style lang="scss" scoped>
-	.btn-list-item{
+	.btn-list-item {
 		background-color: #fff;
 		width: 100%;
 		margin: 20rpx 0;
@@ -45,4 +47,4 @@
 		border: 1px solid rgba(211, 211, 211, 0.5);
 		color: #000;
 	}
-</style>
+</style>

pages/goOnEdu/course/courseDetail/component/courseComment/courseComment.vue

@@ -0,0 +1,96 @@
+<template>
+	<view class="tabs-content" :style="{ paddingBottom : `${props.paddingBottom || 0}rpx` }">
+		<view v-for="(comment, index) in sortedCommentList" :key="index" class="comment-list-item">
+			<view class="comment-list-left">
+				<image src="/static/images/weixin.png" class="comment-list-avator"></image>
+			</view>
+			<view class="comment-list-right">
+				<view style="margin-bottom: 15rpx;">
+					<text class="comment-list-username">{{ comment.yongHuMing }}</text>
+					<text class="comment-list-moment">{{ formatTime(comment.pingLunShiJian) }}</text>
+				</view>
+				<view>{{ comment.pingLunNeiRong }}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		defineProps,
+		computed
+	} from 'vue'
+	const props = defineProps({
+	  paddingBottom: {
+	    type: Number,
+	    required: false,
+	    default: 10
+	  },
+	  commentList: {
+	    type: Array,
+	    required: false,
+	    default: () => []
+	  },
+	});
+	
+	function formatDate(dateStr) {
+		return dateStr.replace(" ", "T"); // Replace space with 'T' to make it ISO format
+	}
+	
+	function formatTime(timeString) {
+	    const commentDate = new Date(formatDate(timeString));
+	    const now = new Date();
+	    const diff = now - commentDate; // Difference in milliseconds
+	
+	    const minutes = Math.floor(diff / 60000); // Convert milliseconds to minutes
+	    const hours = Math.floor(diff / 3600000); // Convert milliseconds to hours
+	    const days = Math.floor(diff / 86400000); // Convert milliseconds to days
+	
+	    if (minutes < 1) { // 修改这里以处理0分钟
+	        return "刚刚";
+	    } else if (minutes < 60) {
+	        return `${minutes}分钟前`;
+	    } else if (hours < 24) {
+	        return `${hours}小时前`;
+	    } else {
+	        return commentDate.toISOString().split('T')[0]; // Return date in yyyy-MM-dd format
+	    }
+	}
+
+	
+	const sortedCommentList = computed(() => {
+		return props.commentList.sort((a, b) => 
+			new Date(formatDate(b.pingLunShiJian)) - new Date(formatDate(a.pingLunShiJian))
+		);
+	});
+</script>
+
+<style lang="scss" scoped>
+	.tabs-content{
+		padding-top: 10rpx;
+	}
+	.comment-list-item {
+		display: flex;
+		padding: 20rpx 0;
+		font-size: 24rpx;
+		.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/courseDetail/component/courseCredits/courseCredits.vue

@@ -0,0 +1,85 @@
+<template>
+	<view class="tabs-content" :style="{ paddingBottom : `${props.paddingBottom || 0}rpx` }">
+		课程学分不知道页面是什么！！
+		<!-- <view v-for="(data,index) in dataList" :key="index">{{
+			data
+		}}</view> -->
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		defineProps 
+	} from 'vue'
+	const props = defineProps({
+	  paddingBottom: {
+	    type: Number,
+	    required: false,
+		default: 10
+	  }
+	});
+	const dataList = ref([{
+			name: "11212213213213123",
+			msg: "djsgjdagsjdasdegfueg检查过程检查后好几次撒谎成功 俺曾经杀过从擦检察官案件安插给从安插给从"
+		},
+		{
+			name: "11212213213213123",
+			msg: "djsgjdagsjdasdegfueg检查过程检查后好几次撒谎成功 俺曾经杀过从擦检察官案件安插给从安插给从"
+		},
+		{
+			name: "11212213213213123",
+			msg: "djsgjdagsjdasdegfueg检查过程检查后好几次撒谎成功 俺曾经杀过从擦检察官案件安插给从安插给从"
+		},
+		{
+			name: "11212213213213123",
+			msg: "djsgjdagsjdasdegfueg检查过程检查后好几次撒谎成功 俺曾经杀过从擦检察官案件安插给从安插给从"
+		},
+		{
+			name: "11212213213213123",
+			msg: "djsgjdagsjdasdegfueg检查过程检查后好几次撒谎成功 俺曾经杀过从擦检察官案件安插给从安插给从"
+		},
+		{
+			name: "11212213213213123",
+			msg: "djsgjdagsjdasdegfueg检查过程检查后好几次撒谎成功 俺曾经杀过从擦检察官案件安插给从安插给从"
+		},
+		{
+			name: "11212213213213123",
+			msg: "djsgjdagsjdasdegfueg检查过程检查后好几次撒谎成功 俺曾经杀过从擦检察官案件安插给从安插给从"
+		},
+		{
+			name: "11212213213213123",
+			msg: "djsgjdagsjdasdegfueg检查过程检查后好几次撒谎成功 俺曾经杀过从擦检察官案件安插给从安插给从"
+		},
+		{
+			name: "11212213213213123",
+			msg: "djsgjdagsjdasdegfueg检查过程检查后好几次撒谎成功 俺曾经杀过从擦检察官案件安插给从安插给从"
+		},
+		{
+			name: "11212213213213123",
+			msg: "djsgjdagsjdasdegfueg检查过程检查后好几次撒谎成功 俺曾经杀过从擦检察官案件安插给从安插给从"
+		},
+		{
+			name: "11212213213213123",
+			msg: "djsgjdagsjdasdegfueg检查过程检查后好几次撒谎成功 俺曾经杀过从擦检察官案件安插给从安插给从11"
+		},
+		{
+			name: "11212213213213123",
+			msg: "djsgjdagsjdasdegfueg检查过程检查后好几次撒谎成功 俺曾经杀过从擦检察官案件安插给从安插给从"
+		},
+		{
+			name: "11212213213213123",
+			msg: "djsgjdagsjdasdegfueg检查过程检查后好几次撒谎成功 俺曾经杀过从擦检察官案件安插给从安插给从"
+		},
+		{
+			name: "11212213213213123",
+			msg: "djsgjdagsjdasdegfueg检查过程检查后好几次撒谎成功 俺曾经杀过从擦检察官案件安插给从安插给从22"
+		}
+	])
+</script>
+
+<style lang="scss" scoped>
+	.tabs-content{
+		padding-top: 10rpx;
+	}
+</style>

pages/goOnEdu/course/courseDetail/component/courseDesc/courseDesc.vue

@@ -0,0 +1,41 @@
+<template>
+	<view class="tabs-content" :style="{ paddingBottom : `${props.paddingBottom || 0}rpx` }">
+		<image :src="content" v-if="showType === 'image'" style="width: 100%" mode="widthFix"></image>
+		<u-parse :html="content" :selectable="true" v-else></u-parse>
+		课程简介-测试用，看能不能看到底部
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		defineProps 
+	} from 'vue'
+	const props = defineProps({
+	  paddingBottom: {
+	    type: Number,
+	    required: false,
+		default: 10 
+	  },
+	  showType :{
+		  type: String,
+		  required: true,
+		  default: "image"
+	  },
+	  content: {
+		  type: String,
+		  required: true,
+		  default: ""
+	  }
+	});
+	// const content = ref("<p>20名协会成员于10月15adhjshajdhsadsajdakshdjahjkd，骄傲的噶说的话吗，计划的哈手机号，很多看啥看，撒海空军的卡号是，按开机动画就撒开，安达市快点哈尽快，打火机客户打款，收获颇丰。此次活动增进了大家对科技前沿的认识。</p><img src='/static/notice/ditu.png' /><img src='/static/notice/ditu.png' /><img src='/static/notice/ditu.png' /><img src='/static/notice/ditu.png' />")
+	
+</script>
+
+<style lang="scss" scoped>
+	.tabs-content{
+		padding-top: 10rpx;
+		height: inherit;
+		position: relative;
+	}
+</style>

pages/goOnEdu/course/courseDetail/courseDetail.vue

@@ -0,0 +1,257 @@
+<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.keChengTuPian?courseDetail.keChengTuPian:''"></courseDesc>
+				<courseCredits v-if="currentTab === 1"></courseCredits>
+				<courseComment v-if="currentTab === 2" :paddingBottom="100" :commentList="commentList"></courseComment>
+			</view>
+
+		</view>
+		<view v-if="currentTab === 0" 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 {
+		ref
+	} from 'vue'
+	import {
+		onLoad
+	} from '@dcloudio/uni-app'
+	const courseDetail = ref({});
+	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([
+		{
+			pingLunId: "01",
+			yongHuMing: "用户名123",
+			touXiang: "",
+			pingLunNeiRong:"评论内容评论内容评容，大赛冠军的",
+			pingLunShiJian: "2023-10-10 19:00:00"
+		},
+		{
+			pingLunId: "02",
+			yongHuMing: "用户名567",
+			touXiang: "",
+			pingLunNeiRong:"hajdkhd dhasjhd 等哈十九点按时鉴定会撒低级，撒谎客户端喝酒侃大山哈吉斯肯定会大会开始觉得暗黑界的是客户，大赛冠军的",
+			pingLunShiJian: "2023-10-11 19:00:00"
+		},
+		{
+			pingLunId: "03",
+			yongHuMing: "用户名567",
+			touXiang: "",
+			pingLunNeiRong:"hajdkhd dhasjhd ，，大赛冠军的",
+			pingLunShiJian: "2023-10-12 19:00:00"
+		},
+		{
+			pingLunId: "04",
+			yongHuMing: "用户名567",
+			touXiang: "",
+			pingLunNeiRong:"hajdkhd dhasjhd 等哈十九点按时鉴定会撒低级，撒谎客户端喝酒侃大山哈吉斯肯定会大会开始觉得暗黑界的是客户，大赛冠军的",
+			pingLunShiJian: "2023-10-13 19:00:00"
+		},
+		{
+			pingLunId: "05",
+			yongHuMing: "用户名567",
+			touXiang: "",
+			pingLunNeiRong:"hajdkhd dhasjhd 等哈十九点按时鉴定会撒低级，撒谎客户端喝酒侃大山哈吉斯肯定会大会开始觉得暗黑界的是客户，大赛冠军的",
+			pingLunShiJian: "2023-10-14 19:00:00"
+		},
+		{
+			pingLunId: "06",
+			yongHuMing: "用户名567",
+			touXiang: "",
+			pingLunNeiRong:"hajdkhd dhasjhd 等哈十九点按时鉴定会撒低级，撒谎客户端喝酒侃大山哈吉斯肯定会大会开始觉得暗黑界的是客户，大赛冠军的",
+			pingLunShiJian: "2025-01-17 12:00:00"
+		},
+		{
+			pingLunId: "07",
+			yongHuMing: "用户名567",
+			touXiang: "",
+			pingLunNeiRong:"hajdkhd dhasjhd 等哈十九点按时鉴定会撒低级，撒谎客户端喝酒侃大山哈吉斯肯定会大会开始觉得暗黑界的是客户，大赛冠军的",
+			pingLunShiJian: "2025-01-17 15:30:00"
+		}
+	])
+	// 点击tabs，切换
+	function onClickItem(e) {
+		if (currentTab.value != e) {
+			currentTab.value = e;
+		}
+	}
+	// 初始化
+	function init(id) {
+		// 根据id初始化页面内容
+		courseDetail.value = {
+			id: id,
+			keChengMingCheng: "11Vue.js 从入门到精通",
+			keChengLeXing: "领袖锻造营",
+			shouKeZhe: "李老师11",
+			shouKeShiJian: "2023-09-15",
+			keChengTuPian: "https://sns-webpic-qc.xhscdn.com/202501171040/4a481ca146d6c00d8dc1324efc4bbf2e/1040g2sg31clvciqk0m4g5pidgnm0u8pljld93q0!nd_dft_wlteh_webp_3",
+			jiaGe: 199.00,
+			isGouMai: true,
+			isShouCang: false,
+			fuFeiLeiXing: "会员免费"
+		}
+		// console.log(courseDetail.value)
+	}
+	// 购买课程
+	function toBuy() {
+		console.log("购买该课程", courseDetail.value.id)
+	}
+	
+	function toSend() {
+		console.log("评论内容：",comment.value)
+		// 发送给后端
+		commentList.value.push({
+			pingLunId: "0"+commentList.value.length,
+			yongHuMing: "890567",
+			touXiang: "",
+			pingLunNeiRong: comment.value,
+			pingLunShiJian: formatDate(new Date())
+		})
+		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}`;
+	}
+	
+	// 初始化页面
+	onLoad((option) => {
+		const {
+			id,
+			name
+		} = option;
+		// courseDetail.value.id = id
+		// console.log(courseDetail.value, 90)
+		init(id)
+		uni.setNavigationBarTitle({
+			title: name
+		});
+	})
+</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/index.vue

@@ -64,7 +64,7 @@
 	}
 	.tabbar-block {
 		flex: 0 0 auto;
-		height: 180rpx;
+		height: 150rpx;
 		padding-bottom: env(safe-area-inset-bottom, 0);
 	}
 	.tabbar {
@@ -84,7 +84,7 @@
 		/* 仅在上方添加阴影 */
 		box-shadow: 5px -1px 0px rgba(0, 0, 0, 0.1);
 		/* 上边阴影效果 */
-		height: 180rpx;
+		height: 150rpx;
 		align-items: center;
 		border-top: none;
 		/* 去掉上边的边框，如果之前有的话 */

pages/login/login.vue

@@ -183,7 +183,8 @@
 				setTimeout(() => {
 					this.useAuthStore.setAuthToken("test")
 					uni.setStorageSync("userinfo", {
-						userId: "2121"
+						userId: "2121",
+						isMember: true
 					})
 					uni.switchTab({
 						url: "/pages/index/index"