完善课程模块;添加轮播图模块

This commit is contained in:
2023-02-02 15:26:20 +08:00
parent 34bc6f1af0
commit 5b2fdcb833
7 changed files with 450 additions and 33 deletions

View File

@@ -21,6 +21,11 @@ async function getCourse() { // 获取课程信息
courseData.value = res.data
}
}
function downloadChapterChildFunc(item) { // 点击下载
console.log(item)
window.open(row.url)
}
</script>
<template>
<div>
@@ -28,24 +33,24 @@ async function getCourse() { // 获取课程信息
<div class="gva-search-box">
<div class="baseinfoBox">
<div class="base-card course-name">
<div class="bc-left">课程名称</div>
<div class="bc-right">{{courseData.step1.name}}</div>
<div class="bc-left" style="font-size: 18px">课程名称</div>
<div class="bc-right" style="font-size: 18px">{{courseData.name}}</div>
</div>
<div class="base-card">
<div class="bc-left">课程名称</div>
<div class="bc-right">{{courseData.step1.name}}</div>
<div class="bc-right">{{courseData.name}}</div>
</div>
<div class="base-card">
<div class="bc-left">课程科目</div>
<div class="bc-right">{{courseData.step1.subject}}</div>
<div class="bc-right">{{courseData.subject}}</div>
</div>
<div class="base-card">
<div class="bc-left">课程状态</div>
<div class="bc-right">{{courseData.step1.status === 1?'上架':'下架'}}</div>
<div class="bc-right">{{courseData.status === 1?'上架':'下架'}}</div>
</div>
<div class="base-card">
<div class="bc-left">课程价格</div>
<div class="bc-right">{{courseData.step1.price}}</div>
<div class="bc-right">{{courseData.price}}</div>
</div>
<div class="base-card">
<div class="bc-left">教师姓名</div>
@@ -53,27 +58,86 @@ async function getCourse() { // 获取课程信息
</div>
<div class="base-card">
<div class="bc-left">创建时间</div>
<div class="bc-right"></div>
<div class="bc-right">{{courseData.CreatedAt}}</div>
</div>
<div class="base-card">
<div class="bc-left">课程简介</div>
<div class="bc-right">{{courseData.step1.introduction}}</div>
<div class="bc-right">{{courseData.introduction}}</div>
</div>
</div>
</div>
<!-- 章节信息-->
<div class="gva-table-box">
<div class="list-box">
<div class="lb-card" v-for="(item,i) in courseData.course_ware_json">
<!--大章节标题-->
<div class="lb-title-part">
<div class="lbt-title">{{item.name}}</div>
</div>
<!--表格数据-->
<div class="lb-table-part" style="margin-bottom: 20px">
<el-table :data="item.children" >
<el-table-column align="left" label="id" width="60" prop="id" />
<el-table-column align="left" label="子章节名称" min-width="60" prop="name" />
<el-table-column align="left" label="课件名称" min-width="60">
<template #default="scope">
{{scope.row.url_name === ''?'未上传课件':scope.row.url_name}}
</template>
</el-table-column>
<el-table-column align="left" label="章节习题" min-width="60" prop="is_contain_exercise">
<template #default="scope">
{{scope.row.is_contain_exercise === 0?'未添加习题':scope.row.is_contain_exercise}}
</template>
</el-table-column>
<el-table-column align="left" label="是否免费" min-width="60">
<template #default="scope">
{{scope.row.is_free === 1? '是':'否'}}
</template>
</el-table-column>
<el-table-column align="left" label="是否展示" min-width="60">
<template #default="scope">
{{scope.row.is_show === 1? '是':'否'}}
</template>
</el-table-column>
<el-table-column align="left" label="操作" min-width="60">
<template #default="scope">
<el-button v-if="scope.row.url"
icon="edit"
size="small"
type="primary"
link
@click="downloadChapterChildFunc(scope.row)"
>下载</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.lbt-title{
margin-right: 20px;
font-size: 18px;
margin-bottom: 10px;
}
.base-card{
display: flex;
float: left;
white-space: nowrap;
width: 33%;
padding: 10px 0px;
color: gray;
}
.course-name{
font-weight: 900;
font-size: 18px;
font-size: 18px !important;
width: 100%;
color:black
}
.baseinfoBox{
overflow: hidden;
}
.baseinfoBox{
overflow: hidden;
}
</style>