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

<template>
	<view>
		<view class="container">
			<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" 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 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>

</template>

<script setup>
	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 = ref(false)
	const isMember = computed(()=>{
		return authStore.userInfo.isMember == '0' ? false : true
	})
	// 初始化页面
	onLoad((option) => {
		const {
			id,
			name
		} = option;
		courseId.value = id
		uni.setNavigationBarTitle({
			title: name
		});
	})
	onShow(()=>{
		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;
		width: 100vw;
		background-color: #fff;
		// padding: 0 20rpx;
	}

	.course-tab-list {
		display: flex;
		background-color: #f2f2f2;
		flex: 0 0 auto;
		margin: 0 20rpx;

		.course-tab-item {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
		}

		.tab-active {
			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));
		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 {
		height: 90rpx;
		color: #fff;
		font-size: 34rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #fe0000;
		width: 100%;
		position: absolute;
		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;
		}
	}
	
	.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>