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:''" :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
	} 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;
				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}`;
	}

	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 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
		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>