hz/student-h5
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git synced 2025-12-09 02:46:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat:增加面授扫码跳转页面

Browse Source
This commit is contained in:
wyx
2023-03-23 22:34:11 +08:00
parent 61516aa617
commit 9f42702d52
1 changed files with 433 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

433
src/views/faceteach/FaceTeachCourseList.vue Normal file
View File

@@ -0,0 +1,433 @@
<template>
<div class="faceteachcourselise">
<ReturnHead text="课程详情" :gohome="true"></ReturnHead>
<div class="main">
<div class="title" style="height: 120px;">
<div class="faceteachimgname">
<img
style="width: 129.5px; height: 73px"
:src="data.offcourseDto?.picUrl"
alt=""
/>
<div class="faceteachname">{{ data.planDto?.name }}</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 v-if="8>1" class="teachermain" style="display: flex;flex-direction:column;">
<div
v-for="item,key in [1,2]"
style="width: 100%;display: flex;justify-content: space-between;align-items: center;margin-bottom: 12px;background: rgb(247, 251, 253);height: 40px;padding: 5px;border-radius: 5px;">
<div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 200px;">{{ item }}</div>
<div
style="width:60px;height:30px;text-align:center;line-height:30px;background:#0078fc;border-radius:5px;color:#fff;cursor: pointer;">去上课</div>
</div>
</div>
<div v-else class="teachermain" style="display: flex;flex-direction:column;">
<div style="font-size: 12px;font-weight:600;margin-top:12px;margin-bottom:12px;">暂无开课</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
id="face_img_id"
style="padding: 10px"
class="content faceteachsignup_img_class"
v-html="data.offcourseDto?.outline"
></div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="课程评论" name="fourth">
<CommentReply :faceId="courseId" :type="3" />
</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, onBeforeMount, ref,} from "vue";
import FileTypeImg from "@/components/FileTypeImg.vue";
import {request, useRequest} from "@/api/request";
import {FACETEACH_SIGNUP, STU_OFFCOURSE_DETAIL} from "@/api/api";
import {useRoute, useRouter} from "vue-router";
import {useUserInfo} from "@/api/utils";
import {ElLoading, ElMessage} from "element-plus";
import CommentReply from "@/components/CommentReply.vue";
import dayjs from "dayjs";
import isBetween from "dayjs/plugin/isBetween";
const router = useRouter();
const returnclick = () => {
router.back();
};
const {
query: { courseId },
} = useRoute();
onBeforeMount(() => dayjs.extend(isBetween));
const loading = ref(false); // loading
const openLoading = () => {
loading.value = ElLoading.service({
lock: true,
text: "Loading",
background: "rgba(0, 0, 0, 0.7)",
});
};
openLoading();
const closeLoading = () => {
loading.value.close();
};
const { data } = useRequest(STU_OFFCOURSE_DETAIL, { courseId }, () => closeLoading());
const isAllowSign = computed(() => dayjs().isBetween(dayjs(data.value.planDto?.beginTime).subtract(data.value.beforeStart || 0, "minute"), dayjs(data.value.afterStart ? data.value.planDto?.beginTime : data.value.planDto?.endTime).add(data.value.afterStart || 0, "minute")));
const teacherInfo = useUserInfo(computed(() => data.value?.planDto?.teacherId));
const activeName = ref("first");
const handleClick = (tab, event) => {
console.log("附件", tab, event);
};
const download = (url) => window.open(import.meta.env.VITE_BOE_API_URL + import.meta.env.VITE_FILE_PATH + url, "_top");
// 报名
function onLineSignUp(isAgain) {
if (!isAllowSign.value) {
ElMessage.warning("未在允许报名时间范围内");
return;
}
if (data.value.isSignUp && !isAgain) {
return;
}
request(FACETEACH_SIGNUP, { courseId });
data.value.isSignUp = true;
data.value.isSignUpAgain = isAgain;
data.value.isRefused = false;
ElMessage.success(isAgain ? "重新报名成功" : "报名成功");
}
function formateArr(strs) {
return strs?.split(",");
}
</script>
<style lang="scss">
.faceteachcourselise {
width: 100%;
padding-bottom: 20px;
.faceteachsignup_img_class img {
max-width: 100% !important;
}
.main {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 10px;
.title {
width: 90%;
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;
}
}
.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>