<template>
|
<div class="courseManage" v-loading="loading">
|
<div class="backBox">
|
<span @click="router.back()">< 返回</span>
|
</div>
|
<div class="courseName">
|
<div class="title" :title="detailData.name">{{ detailData.name }}</div>
|
<span class="courseId">ID：{{ detailData.id }}</span>
|
</div>
|
<div class="courseInfoBox">
|
<div class="desc" :title="detailData.description">
|
{{ detailData.description }}
|
</div>
|
<div class="textBookImg autoImgBox">
|
<img
|
v-if="detailData?.linkProduct?.icon != 'default'"
|
:src="
|
detailData.linkProduct?.icon ? getPublicImage(detailData.linkProduct.icon, 80) : defaultImg
|
"
|
/>
|
</div>
|
<div class="textBookInfo">
|
<p class="title">{{ bookDetail?.name }}</p>
|
<p v-if="bookDetail?.author">作者： {{ bookDetail?.author }}</p>
|
<p>ISBN：{{ bookDetail?.isbn }}</p>
|
</div>
|
<div class="statisticsInfoBox">
|
<p class="title">班级数量<span>（进行中/全部）</span></p>
|
<!-- <p class="num">0 / 0</p> -->
|
<p class="num">{{ numClass }}</p>
|
</div>
|
<!-- <div class="statisticsInfoBox">
|
<p class="title">学习人数<span>（学习中/全部）</span></p>
|
<p class="num">0 / 0</p>
|
</div> -->
|
<!-- <div class="statisticsInfoBox">
|
<p class="title" style="margin-bottom: 40px">教学大纲</p>
|
<p class="num">25</p>
|
</div> -->
|
</div>
|
<el-tabs style="margin-top: 20px">
|
<el-tab-pane label="我的班级">
|
<classManage
|
v-if="detailData.id"
|
:courseId="detailData.id"
|
:bookInfo="bookDetail"
|
@refreshParent="refreshParent"
|
/>
|
</el-tab-pane>
|
<!-- <el-tab-pane label="教学计划">教学计划</el-tab-pane> -->
|
</el-tabs>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { reactive, ref, onMounted, inject, watch } from 'vue'
|
import { useRouter, useRoute } from 'vue-router'
|
import { Search } from '@element-plus/icons-vue'
|
import { ElMessage } from 'element-plus'
|
import { getPublicImage } from '@/assets/js/middleGround/tool.js'
|
import classManage from './components/class.vue'
|
import defaultImg from '@/assets/images/default-book-img.png'
|
|
const MG: any = inject('MG')
|
const router = useRouter()
|
const route = useRoute()
|
const query = route.query
|
const bookDetail = ref()
|
const numClass = ref(0)
|
|
onMounted(() => {
|
getData()
|
})
|
|
const loading = ref(true)
|
|
const detailData: any = ref({})
|
|
// 获取班级
|
const getDataClass = () => {
|
MG.edu
|
.getCourseClassList({
|
courseId: detailData.value.id,
|
start: 0,
|
size: 999,
|
sort: {
|
type: 'Desc',
|
field: 'CreateDate'
|
},
|
filterList: [],
|
searchList: []
|
})
|
.then((res: any) => {
|
numClass.value = res.datas.length
|
})
|
}
|
|
// 获取课程信息
|
const getData = () => {
|
MG.edu
|
.getCourseById({
|
courseId: query.courseId
|
})
|
.then((res: any) => {
|
detailData.value = res
|
loading.value = false
|
const shopId = res.linkProduct?.id
|
getBookDetail(shopId)
|
getDataClass()
|
})
|
}
|
|
// 获取教材详情
|
const getBookDetail = (shopId: number) => {
|
let query = {
|
path: '*',
|
queryType: '*',
|
productId: String(shopId),
|
coverSize: {
|
height: 300,
|
width: 210
|
},
|
fields: {
|
seriesName: [],
|
author: [],
|
isbn: [],
|
publicationDate: []
|
}
|
}
|
MG.store.getProductDetail(query).then(async (res: any) => {
|
bookDetail.value = res.datas
|
})
|
}
|
|
const refreshParent = (str: string) => {
|
if (str == 'del') getData()
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.courseManage {
|
padding: 0 20px;
|
.backBox {
|
border-bottom: 1px solid #efefef;
|
padding: 15px 0;
|
margin-bottom: 20px;
|
color: var(--el-color-primary);
|
span {
|
cursor: pointer;
|
}
|
}
|
.courseName {
|
margin-bottom: 20px;
|
font-size: 16px;
|
font-weight: bold;
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
.title {
|
max-width: 300px;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
word-wrap: break-word;
|
}
|
.courseId {
|
margin-left: 40px;
|
font-size: 12px;
|
font-weight: normal;
|
}
|
}
|
.courseInfoBox {
|
font-size: 14px;
|
border: 1px solid #7ac1ec;
|
border-radius: 10px;
|
padding: 20px 10px;
|
display: flex;
|
background: #ebf7ff;
|
.desc {
|
width: 18%;
|
border-right: 1px solid #ccc;
|
padding-right: 20px;
|
margin-right: 20px;
|
font-size: 12px;
|
line-height: 30px;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
-webkit-line-clamp: 4;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
.textBookImg {
|
width: 100px;
|
height: 120px;
|
margin-right: 10px;
|
}
|
.textBookInfo {
|
flex: 1.5;
|
overflow: hidden;
|
line-height: 18px;
|
p {
|
margin-bottom: 10px;
|
}
|
}
|
.statisticsInfoBox {
|
flex: 1;
|
overflow: hidden;
|
text-align: center;
|
p {
|
margin-bottom: 20px;
|
}
|
.num {
|
font-size: 16px;
|
}
|
}
|
.title {
|
font-weight: bold;
|
font-size: 14px;
|
span {
|
display: inline-block;
|
font-weight: normal;
|
font-size: 12px;
|
margin-top: 6px;
|
}
|
}
|
}
|
}
|
</style>
|
