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.keChengTuPian?courseDetail.keChengTuPian:''"></courseDesc>
				<courseCredits v-if="currentTab === 1" :credit="courseDetail.keChengXueFen"></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://tse4-mm.cn.bing.net/th/id/OIP-C.X_J8jL0bSPQ_jgOrdIbsgQHaEK?rs=1&pid=ImgDetMain",
			jiaGe: 199.00,
			isGouMai: true,
			isShouCang: false,
			fuFeiLeiXing: "会员免费",
			keChengXueFen: 2,
		}
		// console.log(courseDetail.value)
	}
	// 购买课程
	function toBuy() {
		uni.navigateTo({
			url: "/pages/goOnEdu/course/courseDetail/courseOrder?id=" + courseDetail.value.id
		})
		// 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>