|
@@ -1,35 +1,50 @@
|
|
|
<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 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">
|
|
|
- <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 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>
|
|
|
- <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 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>
|
|
@@ -37,9 +52,6 @@
|
|
|
</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,
|
|
@@ -62,7 +74,7 @@
|
|
|
|
|
|
const courseDetail = ref({});
|
|
|
const courseId = ref(null);
|
|
|
- const items = ref(['课程简介', '课程学分', '观看评论']);
|
|
|
+ const items = ref(['课程简介', '观看评论']);
|
|
|
const currentTab = ref(0);
|
|
|
const comment = ref("");
|
|
|
// 评论发送按钮样式
|
|
@@ -198,37 +210,19 @@
|
|
|
!isMember.value &&
|
|
|
!courseDetail.value.hasBuy &&
|
|
|
currentTab.value === 0) {
|
|
|
- console.log(1)
|
|
|
+ // console.log(1)
|
|
|
return true
|
|
|
}
|
|
|
// 付费,不管是不是会员,并且没买的
|
|
|
if (courseDetail.value.viewMode === '3' &&
|
|
|
!courseDetail.value.hasBuy &&
|
|
|
currentTab.value === 0) {
|
|
|
- console.log(2)
|
|
|
+ // console.log(2)
|
|
|
return true
|
|
|
}
|
|
|
- console.log(3)
|
|
|
+ // console.log(3)
|
|
|
return false
|
|
|
}
|
|
|
- // 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 showBuy = ref(false)
|
|
|
const isMember = computed(()=>{
|
|
|
return authStore.userInfo.isMember == '0' ? false : true
|
|
@@ -239,8 +233,6 @@
|
|
|
id,
|
|
|
name
|
|
|
} = option;
|
|
|
- // isMember.value = authStore.userInfo.isMember == '0' ? false : true;
|
|
|
- // console.log("是否是会员", isMember.value)
|
|
|
courseId.value = id
|
|
|
uni.setNavigationBarTitle({
|
|
|
title: name
|
|
@@ -250,23 +242,51 @@
|
|
|
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;
|
|
|
+ // height: 100vh;
|
|
|
width: 100vw;
|
|
|
background-color: #fff;
|
|
|
- padding: 0 20rpx;
|
|
|
- // display: flex;
|
|
|
- // flex-direction: column;
|
|
|
+ // padding: 0 20rpx;
|
|
|
}
|
|
|
|
|
|
.course-tab-list {
|
|
|
- // margin: 15rpx 0;
|
|
|
display: flex;
|
|
|
background-color: #f2f2f2;
|
|
|
flex: 0 0 auto;
|
|
|
+ margin: 0 20rpx;
|
|
|
|
|
|
.course-tab-item {
|
|
|
width: 100%;
|
|
@@ -279,12 +299,31 @@
|
|
|
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));
|
|
|
- // flex: 1;
|
|
|
- // padding-bottom: ;
|
|
|
+ // 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 {
|
|
@@ -295,7 +334,7 @@
|
|
|
line-height: 80rpx;
|
|
|
background-color: #fe0000;
|
|
|
width: 100%;
|
|
|
- position: fixed;
|
|
|
+ position: absolute;
|
|
|
bottom: 0;
|
|
|
box-sizing: content-box;
|
|
|
padding-bottom: env(safe-area-inset-bottom, 0);
|
|
@@ -317,4 +356,28 @@
|
|
|
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>
|