Skip to content

C
center-resource
提交 d5c2eaec authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

update

上级 31edd649
隐藏空白字符变更
内嵌 并排
正在显示 包含 266 行增加 和 10 行删除
src/modules/course/my/api.ts
浏览文件 @ d5c2eaec
...@@ -153,6 +153,11 @@ export function delCharacter(data: { id: string; course_id: string }) { ...@@ -153,6 +153,11 @@ export function delCharacter(data: { id: string; course_id: string }) {
return httpRequest.post('/api/resource/v1/course/course/delete-chapter', data) return httpRequest.post('/api/resource/v1/course/course/delete-chapter', data)
} }
// 直播列表 // 直播列表
export function getLiveList(params: { name: string; page?: number; ['page_size']?: number }) { export function getLiveList(params: { name: string; page?: number;['page_size']?: number }) {
return httpRequest.get('/api/resource/v1/course/course/search-live', { params }) return httpRequest.get('/api/resource/v1/course/course/search-live', { params })
} }
// 获取课程详情
export function getViewCourseDetails(params: { id: string }) {
return httpRequest.get('/api/resource/v1/course/course/view', { params })
}
src/modules/course/my/components/ViewTop.vue
浏览文件 @ d5c2eaec
<script setup lang="ts"> <script setup lang="ts">
import VEditor from '@/components/tinymce/Index.vue'
const props: any = defineProps({
data: {
type: Object
}
})
const form: any = ref({})
watch(() => props.data, value => {
form.value = value
})
interface IBasicInfo {
icon: string
label: string
value: string
key: string
}
// interface ILecturerInfo {
// icon: string
// label: string
// value: string
// key: string
// }
const basicInfo = computed((): IBasicInfo[] => {
const basicList = [
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon1.png',
label: '课程类型',
value: '',
key: 'online_type_name'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon2.png',
label: '课程分类',
value: '',
key: 'classification_name'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon3.png',
label: '课程学分',
value: '',
key: 'credit'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon4.png',
label: '创建人',
value: '',
key: 'created_operator_name'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon5.png',
label: '更新人',
value: '',
key: 'updated_operator_name'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon6.png',
label: '选课类型',
value: '',
key: 'elective_type_name'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon7.png',
label: '是否可用',
value: '',
key: 'status_name'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon8.png',
label: '创建时间',
value: '',
key: 'created_time'
},
{
icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon9.png',
label: '更新时间',
value: '',
key: 'updated_time'
}
]
basicList.map((item: any) => {
item.value = props?.data[item.key] || '-'
return item
})
return basicList
})
</script> </script>
<template> <template>
<div class="top-info"> <div class="info-box">
<div class="cover"></div> <div class="top-info">
</div> <div class="cover"></div>
<div class="infos">
<div class="item" v-for="item in basicInfo" :key="item.key">
<img :src="item.icon" />
<div class="item-right">
<div class="label">{{ item.label }}</div>
<div class="value">{{ item.value }}</div>
</div>
</div>
</div>
</div>
<div class="bottom-info">
<div class="lecturer-list">
<div class="item" v-for="item in props.data.lecturers" :key="item.id">
<div class="avatar" :style="`background-image:url(${item.avatar})`"></div>
<div class="name">{{ item.name }}</div>
</div>
</div>
<div class="other-info">
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon10.png" />
<div class="label">课程所属部门</div>
<div class="value">{{ props.data.organ_id_name }}</div>
</div>
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon11.png" />
<div class="label">课程公开信息</div>
<div class="value">{{ props.data.department_public_name }}</div>
<div class="value">{{ props.data.platform_public_name }}</div>
</div>
<div class="item">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/course-view-icon12.png" />
<div class="label">课程授权信息</div>
<div class="value">Marrywood</div>
</div>
</div>
</div>
<el-form ref="ruleFormRef" label-position="top" :model="form" style="width: 100%; margin-top: 30px">
<el-form-item label="课程简介与描述：">
<v-editor disabled v-model="form.represent" class="editor" :height="200"></v-editor>
</el-form-item>
<el-form-item label="课程小论文：">
<v-editor disabled v-model="form.essay" class="editor" :height="200"></v-editor>
</el-form-item>
<el-form-item label="前期准备与预备知识：">
<v-editor disabled v-model="form.previous_preparation" class="editor" :height="200"></v-editor>
</el-form-item>
<el-form-item label="授课目标：">
<v-editor disabled v-model="form.target" class="editor" :height="200"></v-editor>
</el-form-item>
</el-form>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.top-info{ .info-box {
background: #f7f7f7;
border-radius: 10px;
padding: 25px 17px;
}
.top-info {
display: flex; display: flex;
.cover{ .cover {
width: 240px; min-width: 240px;
height: 180px; height: 180px;
background: url(https://webapp-pub.ezijing.com/upload/admin/0d58c61cda01afd20d8ec0274b4d8a08.jpg); background: url(https://webapp-pub.ezijing.com/upload/admin/0d58c61cda01afd20d8ec0274b4d8a08.jpg);
background-size: cover; background-size: cover;
} }
.infos {
padding-left: 20px;
display: flex;
flex-wrap: wrap;
.item {
width: 180px;
display: flex;
align-items: center;
height: fit-content;
.item-right {
margin-left: 15px;
.label {
font-size: 14px;
line-height: 100%;
color: #999999;
margin-bottom: 8px;
}
.value {
font-size: 16px;
font-weight: 500;
line-height: 100%;
color: #333333;
}
}
}
}
}
.bottom-info {
display: flex;
padding-top: 20px;
.other-info {
width: 594px;
background: #ebe4d9;
border-radius: 6px;
display: flex;
padding: 64px 0 38px;
.item {
flex: 1;
&:nth-child(2) {
// height: 150px;
border-left: 1px solid #ddb67c;
border-right: 1px solid #ddb67c;
}
img {
width: 52px;
display: block;
margin: 0 auto;
}
.label {
font-size: 14px;
line-height: 100%;
color: #666666;
padding-top: 10px;
padding-bottom: 13px;
text-align: center;
}
.value {
font-size: 16px;
font-weight: 500;
line-height: 100%;
color: #333333;
margin-bottom: 10px;
text-align: center;
}
}
}
.lecturer-list {
width: 230px;
display: flex;
flex-wrap: wrap;
// justify-content: center;
.item {
padding-top: 25px;
width: 115px;
.avatar {
width: 56px;
height: 56px;
background-size: cover;
border-radius: 50%;
margin: 0 auto;
}
.name {
text-align: center;
font-size: 16px;
font-weight: 500;
line-height: 100%;
color: #333333;
margin-top: 10px;
}
}
}
} }
</style> </style>
src/modules/course/my/views/View.vue
浏览文件 @ d5c2eaec
<script setup lang="ts"> <script setup lang="ts">
import ViewTop from '../components/ViewTop.vue' import ViewTop from '../components/ViewTop.vue'
import { getViewCourseDetails } from '../api'
const route = useRoute()
// const router = useRouter()
const id = route.query.id as string
const courseDetails:any = ref({})
onMounted(() => {
getViewCourseDetails({ id: id }).then((res:any) => {
courseDetails.value = res.data
console.log(res, 'getViewCourseDetails')
})
})
</script> </script>
<template> <template>
<AppCard title="查阅课程"> <AppCard title="查阅课程">
<div class="course-view"> <div class="course-view">
<div class="course-left_info"> <div class="course-left_info">
<ViewTop></ViewTop> <ViewTop :data="courseDetails"></ViewTop>
</div> </div>
</div> </div>
</AppCard> </AppCard>
...@@ -15,8 +31,6 @@ import ViewTop from '../components/ViewTop.vue' ...@@ -15,8 +31,6 @@ import ViewTop from '../components/ViewTop.vue'
display: flex; display: flex;
.course-left_info{ .course-left_info{
width: 840px; width: 840px;
// height: 200px;
// background: red;
} }
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论