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

feat:修改跳转等问题

Browse Source
This commit is contained in:
lixg
2023-02-19 15:41:58 +08:00
parent 2418321402 db96affc6d
commit f69be42539
31 changed files with 2526 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

565
src/views/faceteach/FaceTeachNoCommon.vue Normal file
View File

@@ -0,0 +1,565 @@
<!--
* @Author: lixg lixg@dongwu-inc.com
* @Date: 2023-02-18 17:47:50
* @LastEditors: lixg lixg@dongwu-inc.com
* @LastEditTime: 2023-02-18 18:06:29
* @FilePath: /stu_h5/src/views/faceteach/FaceTeachNoCommon.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div
style="
background: #0078fc;
height: 150px;
width: 100%;
position: absolute;
top: 0;
z-index: -9999;
"
></div>
<div class="faceteach" style="padding: 30px">
<!-- 面包屑导航 -->
<div class="crumb">
<div>课程列表</div>
<div style="margin-left: 6px; margin-right: 6px">/</div>
<div style="font-weight: 700">课程报名</div>
<div v-if="pName != ''" class="return">
<div style="display: flex" @click="returnclick">
<el-button style="color: #0073fb"
><img
class="img2"
style="margin-right: 11px; cursor: pointer"
src="../../assets/image/return.png"
/>返回
</el-button>
</div>
</div>
</div>
<!-- 面包屑导航 -->
<!-- 基本信息 -->
<div class="bascinfo">
<div style="display: flex">
<img
style="
width: 405px;
height: 230px;
margin-left: 48px;
border-radius: 8px;
margin-top: 40px;
"
:src="data.offcourseDto.picUrl"
alt=""
/>
<div style="margin-left: 40px; margin-top: 56px">
<div class="title">【面授课】{{ data.planDto?.name }}</div>
<div class="time" style="margin-top: 30px">
<img
style="width: 15px; height: 17px"
src="../../assets/image/time.png"
/>
<div style="margin-left: 8px">
{{
dayjs(data.planDto?.beginTime).format("YYYY-MM-DD HH:MM") +
" 至 " +
dayjs(data.planDto?.endTime).format("YYYY-MM-DD HH:MM")
}}
</div>
</div>
<div
v-if="data.planDto.address"
class="time"
style="margin-top: 10px"
>
<img
style="width: 16px; height: 18px"
src="../../assets/image/position.png"
/>
<div style="margin-left: 8px">{{ data.planDto?.address }}</div>
</div>
<!-- <div class="time" style="margin-top: 37px">-->
<!-- <botton class="btn" style="margin-right: 20px;width: 160px;height: 46px;" v-if="data.planDto.applyFlag" @click="onLineSignUp" :style="{ background: data.isSignUp ? '#999' : 'rgb(57, 146, 249)'}">{{data.isSignUp?'已报名':'立即报名'}}</botton>-->
<!-- </div>-->
</div>
</div>
<div style="display: flex"></div>
</div>
<!-- 基本信息 -->
<!-- 详细信息 -->
<div class="detailinfo">
<div class="detail">
<div class="detailB">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="课程介绍" name="first">
<div class="notice" style="padding: 20px; font-size: 14px">
{{ data.offcourseDto?.intro || "暂无课程介绍" }}
</div>
</el-tab-pane>
<el-tab-pane label="课程大纲" name="second">
<div style="display: flex; align-items: center">
<div
style="padding: 20px"
class="content"
v-html="data.offcourseDto?.outline"
></div>
</div>
</el-tab-pane>
<!-- <el-tab-pane label="课程评论" name="third" :disabed=dayjs().isBefore(dayjs(data.planDto.beginTime))>
</el-tab-pane> -->
<el-tab-pane
label="材料下载"
name="third"
:disabed="dayjs().isBefore(dayjs(data.planDto.beginTime))"
>
<div
v-if="!data.planDto?.attach"
style="
font-size: 14px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
margin-left: 40px;
margin-top: 20px;
"
>
此课程无附件
</div>
<div v-else>
<div
v-for="(el, index) in formateArr(data.planDto.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: 20px">
{{
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:#999;">-->
<!-- 下载-->
<!-- </div>-->
<!-- <div style="margin-left: 5px;color:#999;" @click="download(el)">
下载
</div> -->
<!-- </div>-->
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
<div class="teacher">
<div class="title">
<img
style="width: 21px; height: 23px"
src="../../assets/image/livelecturer.png"
/>
<div class="text">面授课讲师</div>
<div class="box"></div>
</div>
<!-- todo #面授课接口 讲师缺少img和介绍-->
<div class="teacheritem">
<img class="peopleimg" :src="teacherInfo.avatar" />
<div class="nameSpan">
<div class="teacherName" style="margin-right: 5px">
{{ data.planDto?.teacher }}
</div>
<div class="introduce">{{ data.planDto?.bandDesc }}</div>
</div>
<!-- <div class="follow">+ 关注</div>-->
</div>
</div>
</div>
<!-- 详细信息 -->
</div>
</template>
<script setup>
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 },
} = useRoute();
const { data } = useRequest(STU_OFFCOURSE_DETAIL, { courseId });
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) => {
window.open(url);
};
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;
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.faceteach {
.crumb {
color: #fff;
display: flex;
font-size: 14px;
line-height: 24px;
}
.bascinfo {
width: 100%;
height: 310px;
border-radius: 8px;
background-color: rgba(255, 255, 255, 1);
margin-top: 37px;
display: flex;
justify-content: space-between;
align-items: center;
.btn {
width: 146px;
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;
}
.title {
font-size: 20px;
font-weight: 800;
color: #333333;
line-height: 24px;
margin-left: -9px;
}
.time {
font-size: 14px;
color: #6e7b84;
line-height: 24px;
display: flex;
align-items: center;
}
}
.return {
position: absolute;
right: 10%;
.text {
text-align: center;
display: flex;
flex-direction: row;
align-items: center;
}
}
.detailinfo {
width: 100%;
margin-top: 20px;
display: flex;
align-items: flex-start;
.detail {
flex: 1;
margin-right: 20px;
.detailT {
min-height: 263px;
background: #ffffff;
border-radius: 8px;
color: rgba(51, 51, 51, 1);
.title {
display: flex;
align-items: center;
padding-top: 39px;
position: relative;
}
.title .text {
margin-left: 8px;
font-size: 16px;
color: rgba(51, 51, 51, 1);
font-weight: 800;
}
.title .box {
width: 75px;
height: 10px;
background-color: rgba(36, 120, 255, 0.15);
position: absolute;
left: 23px;
top: 53px;
}
.content {
margin-left: 8px;
font-size: 14px;
color: rgba(51, 51, 48, 1);
font-weight: 500;
line-height: 35px;
margin-top: 30px;
padding-bottom: 30px;
}
}
.detailB {
min-height: 363px;
background: #ffffff;
border-radius: 8px;
margin-top: 20px;
.wenxintishi {
display: flex;
justify-content: stretch;
padding: 72px;
}
.el-tabs__item {
height: 69px;
padding: 25px 7px 0px 52px;
font-size: 14px;
font-weight: 500;
}
.el-tabs__nav-wrap::after {
background-color: rgba(56, 125, 247, 0.2);
}
.enclosure {
height: 89px;
margin-left: 51px;
margin-right: 40px;
// border-bottom: 1px solid rgba(56, 125, 247, 0.2);
display: flex;
justify-content: space-between;
align-items: center;
.enclosureL {
display: flex;
align-items: center;
font-size: 14px;
font-weight: 400;
color: #677d86;
line-height: 24px;
}
.download {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 400;
color: #2478ff;
line-height: 24px;
cursor: pointer;
}
}
.work {
margin-left: 51px;
margin-right: 40px;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 37px;
}
.work .question {
font-size: 14px;
font-weight: 500;
color: #333330;
line-height: 18px;
}
.work .submit {
width: 126px;
height: 46px;
background: #2478ff;
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
border-radius: 4px;
font-size: 16px;
font-weight: 800;
color: #ffffff;
line-height: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
}
}
.teacher {
width: 434px;
min-height: 500px;
// height: 10%;
background-color: rgba(255, 255, 255, 1);
border-radius: 8px;
.title {
display: flex;
align-items: center;
padding-top: 39px;
position: relative;
margin-left: 48px;
}
.title .text {
margin-left: 8px;
font-size: 16px;
color: rgba(51, 51, 51, 1);
font-weight: 800;
}
.title .box {
width: 75px;
height: 10px;
background-color: rgba(36, 120, 255, 0.15);
position: absolute;
left: 23px;
top: 53px;
}
.teacheritem {
margin-left: 48px;
margin-right: 48px;
// min-height: 115px;
margin-top: 20px;
padding: 25px 0px;
display: flex;
position: relative;
// align-items: center;
}
.teacheritem .peopleimg {
width: 60px;
height: 60px;
border-radius: 30px;
}
.teacheritem {
.nameSpan {
width: 190px;
display: flex;
align-items: center;
justify-content: center;
.teacherName {
font-size: 14px;
font-weight: bold;
color: #394145;
display: flex;
align-items: center;
}
}
}
.teacheritem {
.nameSpan {
width: 190px;
display: flex;
align-items: center;
justify-content: center;
.teacherName {
font-size: 14px;
font-weight: bold;
color: #394145;
display: flex;
align-items: center;
}
}
}
.teacheritem .introduce {
font-size: 14px;
font-weight: 500;
color: #394145;
margin-top: 14px;
}
.teacheritem .follow {
width: 80px;
height: 30px;
background: #387df7;
border-radius: 4px;
margin-top: 28px;
position: absolute;
right: -25px;
font-size: 14px;
font-weight: 500;
color: #ffffff;
line-height: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
}
}
}
</style>