menber-center/pages/goOnEdu/course/courseDetail/courseDetail.vue

<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:''"></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="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 { loadCourseDetail, loadCommentList, sendComment } from "@/api/edu.js"
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} 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;
			}
		})
	}
	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}`;
	}
	
	// 初始化页面
	onLoad((option) => {
		const {
			id,
			name
		} = option;
		// courseDetail.value.id = id
		// console.log(courseDetail.value, 90)
		courseId.value = id
		init(id)
		getComment(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>