mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-06 09:26:46 +08:00
488 lines
14 KiB
Vue
488 lines
14 KiB
Vue
<template>
|
||
<div class="faceteachnocourse">
|
||
<ReturnHead text="课程详情"></ReturnHead>
|
||
|
||
<div class="main">
|
||
<div class="title">
|
||
<div class="faceteachimgname">
|
||
<img
|
||
style="width: 129.5px; height: 73px"
|
||
:src="data.offcourseDto?.picUrl"
|
||
alt=""
|
||
/>
|
||
<div class="faceteachname">{{ data.planDto?.name }}</div>
|
||
</div>
|
||
<div class="titlemain">
|
||
<div class="timeposition">
|
||
<div class="time">
|
||
<img
|
||
style="width: 13px; height: 14.5px; margin-right: 5.5px"
|
||
src="../../assets/image/faceteach/time.png"
|
||
/>
|
||
<div style="font-size: 12px; color: rgba(110, 123, 132, 1)">
|
||
{{
|
||
dayjs(data.planDto?.beginTime).format("YYYY-MM-DD HH:mm") +
|
||
" 至 " +
|
||
dayjs(data.planDto?.endTime).format("YYYY-MM-DD HH:mm")
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div class="time" style="margin-top: 9px">
|
||
<img
|
||
style="width: 13px; height: 15px; margin-right: 5.5px"
|
||
src="../../assets/image/faceteach/position.png"
|
||
/>
|
||
<div style="font-size: 12px; color: rgba(110, 123, 132, 1)">
|
||
{{ data.planDto?.address }}
|
||
</div>
|
||
</div>
|
||
<div class="time" style="margin-top: 16px">
|
||
<botton class="btn" :style="{ background: '#999' }"
|
||
>当前任务暂未开放，请联系管理员</botton
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="teacher">
|
||
<div style="width: 90%">
|
||
<div class="teachertitle" style="width: 100px">
|
||
<img
|
||
style="width: 17px; height: 17px"
|
||
src="../../assets/image/faceteach/livelecturer.png"
|
||
/>
|
||
<div class="talk">面授课讲师</div>
|
||
<div class="box" style="width: 80px; right: 0px"></div>
|
||
</div>
|
||
<div class="teachermain">
|
||
<img class="teacherAvatar" :src="teacherInfo.avatar" />
|
||
<div style="flex: 1; margin-left: 11px; margin-right: 13px">
|
||
<div class="teacherName">{{ data.planDto?.teacher }}</div>
|
||
<div class="teacherIntro">
|
||
{{ data.planDto?.bandDesc }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="course">
|
||
<div style="width: 100%">
|
||
<el-tabs v-model:activeName="activeName" @tab-click="handleClick">
|
||
<el-tab-pane label="课程简介" name="first">
|
||
<div class="notice" style="padding: 10px; font-size: 14px">
|
||
{{ data.offcourseDto?.intro || "暂无课程介绍" }}
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="课程大纲" name="second">
|
||
<div class="work">
|
||
<div style="display: flex; align-items: center">
|
||
<div
|
||
style="padding: 5px"
|
||
class="content"
|
||
v-html="data.offcourseDto?.outline"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<!-- <el-tab-pane label="课程评论" name="fourth"> </el-tab-pane> -->
|
||
<el-tab-pane label="材料下载" name="third">
|
||
<div
|
||
v-if="!data.offcourseDto?.attach"
|
||
style="
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 24px;
|
||
cursor: pointer;
|
||
margin-left: 20px;
|
||
margin-top: 10px;
|
||
"
|
||
>
|
||
此课程无附件
|
||
</div>
|
||
<div v-else>
|
||
<div
|
||
v-for="(el, index) in formateArr(data.offcourseDto.attach)"
|
||
:key="index"
|
||
class="enclosure"
|
||
:style="{ borderBottom: '1px solid rgba(56, 125, 247, 0.2)' }"
|
||
>
|
||
<div class="enclosureL">
|
||
<FileTypeImg
|
||
:v-model="
|
||
el.slice(el.lastIndexOf('/') + 1, el.indexOf('-')) +
|
||
el.slice(el.lastIndexOf('.'))
|
||
"
|
||
:style="{
|
||
width: '22px',
|
||
height: '26px',
|
||
marginLeft: '10px',
|
||
}"
|
||
></FileTypeImg>
|
||
<div style="margin-left: 10px">
|
||
{{
|
||
el.slice(el.lastIndexOf("/") + 1, el.indexOf("-")) +
|
||
el.slice(el.lastIndexOf("."))
|
||
}}
|
||
</div>
|
||
</div>
|
||
<div class="download">
|
||
<img
|
||
style="width: 16px; height: 15px"
|
||
src="../../assets/image/download.png"
|
||
/>
|
||
<div
|
||
style="margin-left: 5px; color: rgba(36, 120, 255, 1)"
|
||
@click="download(el)"
|
||
>
|
||
下载
|
||
</div>
|
||
<!-- <div style="margin-left: 5px;color:#999;" @click="download(el)">
|
||
下载
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import ReturnHead from "@/components/ReturnHead.vue";
|
||
import { computed, reactive, toRefs, watch, onUnmounted } from "vue";
|
||
import FileTypeImg from "@/components/FileTypeImg.vue";
|
||
import { request, useRequest } from "@/api/request";
|
||
import { STU_OFFCOURSE_DETAIL, FACETEACH_SIGNUP } from "@/api/api";
|
||
import { useRoute, useRouter } from "vue-router";
|
||
import { useUserInfo } from "@/api/utils";
|
||
import { ElMessage, messageConfig } from "element-plus";
|
||
import dayjs from "dayjs";
|
||
const router = useRouter();
|
||
const returnclick = () => {
|
||
router.back();
|
||
};
|
||
const {
|
||
query: { courseId, type, id: taskId },
|
||
} = useRoute();
|
||
|
||
const { data } = useRequest(STU_OFFCOURSE_DETAIL, { courseId });
|
||
console.log("获取信息", data);
|
||
|
||
const teacherInfo = useUserInfo(computed(() => data.value?.planDto?.teacherId));
|
||
|
||
const state = reactive({
|
||
activeName: "first",
|
||
enclosure: "",
|
||
isAllowSign: false,
|
||
});
|
||
const { activeName, enclosure, isAllowSign } = toRefs(state);
|
||
const handleClick = (tab, event) => {
|
||
console.log("附件", tab, event);
|
||
};
|
||
const download = (url) => {
|
||
console.log(
|
||
"url2",
|
||
import.meta.env.VITE_BOE_API_URL + import.meta.env.VITE_FILE_PATH + url
|
||
);
|
||
window.open(
|
||
import.meta.env.VITE_BOE_API_URL + import.meta.env.VITE_FILE_PATH + url,
|
||
"_top"
|
||
);
|
||
};
|
||
const downloads = (url) => {
|
||
ElMessage.warning("未在有效时间范围内，请耐心等待！");
|
||
};
|
||
let timer = null;
|
||
|
||
// 报名
|
||
function onLineSignUp() {
|
||
if (data.value.isSignUp) {
|
||
return;
|
||
}
|
||
request(FACETEACH_SIGNUP, { courseId });
|
||
data.value.isSignUp = true;
|
||
ElMessage.success("报名成功");
|
||
}
|
||
|
||
function formateArr(strs) {
|
||
let arrs = strs.split(",");
|
||
console.log("112233", arrs);
|
||
return arrs;
|
||
}
|
||
watch(data, () => {
|
||
console.log("data.offcourseDto", data.value.offcourseDto);
|
||
if (data.value.offcourseDto && data.value.offcourseDto.outline) {
|
||
let obj = data.value.offcourseDto.outline;
|
||
let regex = new RegExp("<img", "gi");
|
||
let deleteStyle = /(?<=\" )style=\".*?\"/gi;
|
||
obj = obj.replace(deleteStyle, "");
|
||
obj = obj.replace(regex, '<img style="max-width: 100%;height:auto"');
|
||
data.value.offcourseDto.outline = obj;
|
||
console.log("data.offcourseDto.outline", data.value.offcourseDto.outline);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||
<style lang="scss">
|
||
.faceteachnocourse {
|
||
width: 100%;
|
||
padding-bottom: 20px;
|
||
.main {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
|
||
.title {
|
||
width: 90%;
|
||
min-height: 167px;
|
||
border-radius: 4px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.faceteachimgname {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 90%;
|
||
margin-top: 17px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.faceteachname {
|
||
margin-left: 15px;
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
color: #394145;
|
||
}
|
||
.titlemain {
|
||
width: 90%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.timeposition {
|
||
.time {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.btn {
|
||
margin-right: 20px;
|
||
width: 260px;
|
||
height: 46px;
|
||
background: #2478ff;
|
||
border-radius: 4px;
|
||
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
font-weight: 800;
|
||
line-height: 24px;
|
||
cursor: pointer;
|
||
margin-right: 96px;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
.titlebtn {
|
||
width: 83px;
|
||
height: 33px;
|
||
background: #2478ff;
|
||
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||
border-radius: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 12px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
.teachertitle {
|
||
width: 90px;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 21px;
|
||
.talk {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
line-height: 12px;
|
||
margin-left: 7.5px;
|
||
}
|
||
.box {
|
||
position: absolute;
|
||
width: 62.5px;
|
||
height: 10px;
|
||
right: 6px;
|
||
bottom: -4px;
|
||
background: rgba(36, 120, 255, 0.15);
|
||
}
|
||
}
|
||
.teacher {
|
||
width: 90%;
|
||
padding-bottom: 15px;
|
||
border-radius: 4px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
|
||
.teachermain {
|
||
margin-top: 24px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.teacherAvatar {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 25px;
|
||
margin-left: 4px;
|
||
}
|
||
.teacherName {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #394145;
|
||
line-height: 21px;
|
||
}
|
||
.teacherIntro {
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
color: #394145;
|
||
line-height: 21px;
|
||
margin-top: 12px;
|
||
}
|
||
.teacherFollow {
|
||
width: 73px;
|
||
height: 28px;
|
||
background: #2478ff;
|
||
border-radius: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 12px;
|
||
color: #fff;
|
||
margin-top: 13px;
|
||
}
|
||
}
|
||
}
|
||
.detail {
|
||
width: 90%;
|
||
padding-bottom: 25px;
|
||
background: #ffffff;
|
||
border-radius: 4px;
|
||
margin-top: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.detailMain {
|
||
margin-top: 22px;
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
color: #333330;
|
||
line-height: 24px;
|
||
}
|
||
}
|
||
.course {
|
||
width: 90%;
|
||
// padding-bottom: 15px;
|
||
border-radius: 4px;
|
||
background: #ffffff;
|
||
margin-top: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.el-tabs__nav {
|
||
width: 90%;
|
||
margin-left: 5%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.el-tabs__item {
|
||
height: 50px;
|
||
padding: 0px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
line-height: 21px;
|
||
padding-top: 15px;
|
||
}
|
||
.el-tabs__nav-wrap::after {
|
||
background-color: rgba(56, 125, 247, 0.2);
|
||
}
|
||
.el-tabs__header {
|
||
margin: 0;
|
||
}
|
||
.enclosure {
|
||
width: 90%;
|
||
margin-left: 5%;
|
||
height: 50px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.enclosureL {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
color: #677d86;
|
||
line-height: 19px;
|
||
}
|
||
.download {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
color: #2478ff;
|
||
line-height: 19px;
|
||
}
|
||
}
|
||
.work {
|
||
// margin-left: 51px;
|
||
// margin-right: 40px;
|
||
padding-bottom: 20px;
|
||
width: 90%;
|
||
margin-left: 5%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
margin-top: 17.5px;
|
||
}
|
||
.work .question {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: #333330;
|
||
line-height: 21.5px;
|
||
}
|
||
|
||
.work .submit {
|
||
width: 73px;
|
||
height: 28px;
|
||
margin-top: 16px;
|
||
background: #2478ff;
|
||
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||
border-radius: 2px;
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|