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