mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-09 10:56:47 +08:00
606 lines
16 KiB
Vue
606 lines
16 KiB
Vue
<template>
|
|
<div class="liveboradcast">
|
|
<ReturnHead text="课程直播"></ReturnHead>
|
|
<!-- <TitleHead text="【投票】管理者进阶腾飞班 - 授课方式"></TitleHead> -->
|
|
<div class="top" :style="{ display: closeBtn ? 'flex' : 'none' }">
|
|
<div class="topin">
|
|
<div class="topsa">
|
|
{{ data?.liveNotice }}
|
|
</div>
|
|
<img
|
|
class="topimg"
|
|
@click="isShowClose"
|
|
src="../../assets/image/liveboradcast/cha.png"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="notice" style="margin-top: 0">
|
|
<div class="noticebox">
|
|
<!-- <div class="avator">
|
|
<img class="avaimg" :src="teacherInfo.avatar" />
|
|
<div class="avaname">{{ data.userInfoBo?.userName }}</div>
|
|
</div> -->
|
|
<div class="mani">
|
|
<div class="joininfo">{{ data?.liveName }}</div>
|
|
<div class="contenttitle">
|
|
<img class="timeimg" src="../../assets/image/ballotpage/time.png" />
|
|
<div class="timee">
|
|
{{ data?.liveStartTime + " 至 " + data?.liveEndTime }}
|
|
</div>
|
|
</div>
|
|
<div class="midline"></div>
|
|
|
|
<div class="timebox" v-if="projectStatus && projectEndTime">
|
|
<div
|
|
v-if="
|
|
projectStatus !== '3' &&
|
|
new Date(projectEndTime).getTime() > new Date().getTime()
|
|
"
|
|
class="allbtn"
|
|
>
|
|
<botton
|
|
class="samebtn btno"
|
|
:style="{
|
|
background: `${
|
|
new Date(data.liveStartTime).getTime() >
|
|
new Date().getTime()
|
|
? '#999'
|
|
: 'rgb(59, 191, 252)'
|
|
}`,
|
|
}"
|
|
@click="showClick"
|
|
>观看
|
|
</botton>
|
|
|
|
<botton
|
|
class="samebtn btnt"
|
|
:style="{
|
|
background: `${
|
|
!isAllowSign
|
|
? '#999'
|
|
: data.signFlag
|
|
? '#999'
|
|
: 'rgb(57, 146, 249)'
|
|
}`,
|
|
}"
|
|
@click="signClick"
|
|
>{{ data.signFlag ? "已签到" : "签到" }}
|
|
</botton>
|
|
|
|
<botton
|
|
:style="{
|
|
background: `${
|
|
new Date(data.liveStartTime).getTime() >
|
|
new Date().getTime()
|
|
? '#999'
|
|
: data.isSurvery
|
|
? '#999'
|
|
: 'rgb(57, 146, 249)'
|
|
}`,
|
|
}"
|
|
class="samebtn btnr"
|
|
@click="commitClick"
|
|
v-if="data.isEvaluate && data.isEvaluate == 1"
|
|
>{{ data.isSurvery ? "已评估" : "评估" }}
|
|
</botton>
|
|
</div>
|
|
<div v-else class="threeBtn">
|
|
<botton
|
|
:style="{
|
|
background: `${
|
|
new Date(data.liveStartTime).getTime() >
|
|
new Date().getTime()
|
|
? '#999'
|
|
: data.isSurvery
|
|
? '#999'
|
|
: 'rgb(57, 146, 249)'
|
|
}`,
|
|
}"
|
|
class="samebtn btnr"
|
|
@click="commitClick"
|
|
v-if="data.isEvaluate && data.isEvaluate == 1 && data.isSurvery"
|
|
>{{ data.isSurvery ? "已评估" : "评估" }}
|
|
</botton>
|
|
</div>
|
|
</div>
|
|
<div class="timebox" v-else>
|
|
<div class="allbtn">
|
|
<botton
|
|
class="samebtn btno"
|
|
:style="{
|
|
background: `${
|
|
new Date(data.liveStartTime).getTime() >
|
|
new Date().getTime()
|
|
? '#999'
|
|
: 'rgb(59, 191, 252)'
|
|
}`,
|
|
}"
|
|
@click="showClick"
|
|
>观看
|
|
</botton>
|
|
|
|
<botton
|
|
class="samebtn btnt"
|
|
:style="{
|
|
background: `${
|
|
!isAllowSign
|
|
? '#999'
|
|
: data.signFlag
|
|
? '#999'
|
|
: 'rgb(57, 146, 249)'
|
|
}`,
|
|
}"
|
|
@click="signClick"
|
|
>{{ data.signFlag ? "已签到" : "签到" }}
|
|
</botton>
|
|
|
|
<botton
|
|
:style="{
|
|
background: `${
|
|
new Date(data.liveStartTime).getTime() >
|
|
new Date().getTime()
|
|
? '#999'
|
|
: data.isSurvery
|
|
? '#999'
|
|
: 'rgb(57, 146, 249)'
|
|
}`,
|
|
}"
|
|
class="samebtn btnr"
|
|
@click="commitClick"
|
|
v-if="data.isEvaluate && data.isEvaluate == 1"
|
|
>{{ data.isSurvery ? "已评估" : "评估" }}
|
|
</botton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="notice">
|
|
<div class="noticebox">
|
|
<div class="mani">
|
|
<div class="joininfo">直播说明</div>
|
|
<div class="line"></div>
|
|
<div class="contentone">
|
|
<div class="actinner">
|
|
{{ data.liveExplain }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="notice">
|
|
<div class="noticebox">
|
|
<div class="mani">
|
|
<div class="joininfo">课后作业</div>
|
|
<div class="line"></div>
|
|
<div class="contentone">
|
|
<div class="de">
|
|
<div class="deal">网易有道词典现有功能结构拆解</div>
|
|
<img
|
|
class="rightpng"
|
|
src="../../assets/image/liveboradcast/toright.png"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="detailin">
|
|
<div class="in">
|
|
查找资料，介绍一种国外（日本、美国、欧洲）道路（公路、铁路、城市道路、地铁）设计规范的演变过程，可以一种或几种主要技术指标为例，并说明其原因。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import ReturnHead from "@/components/ReturnHead.vue";
|
|
import { computed, reactive, toRefs, onUnmounted, ref, watch } from "vue";
|
|
import img from "@/assets/image/uploadimg.png";
|
|
import { request, useRequest } from "@/api/request";
|
|
import { TASK_BROADCAST_DETAIL, TASK_BROADCAST_SIGN } from "@/api/api";
|
|
import { useRoute } from "vue-router/dist/vue-router";
|
|
import { useRouter } from "vue-router";
|
|
import { useUserInfo } from "@/api/utils";
|
|
import { ElMessage } from "element-plus";
|
|
import dayjs from "dayjs";
|
|
|
|
const {
|
|
query: {
|
|
courseId: liveId,
|
|
id: taskId,
|
|
type,
|
|
pName,
|
|
sName,
|
|
projectStatus,
|
|
projectEndTime,
|
|
},
|
|
} = useRoute();
|
|
const router = useRouter();
|
|
const returnclick = () => {
|
|
router.back();
|
|
};
|
|
onUnmounted(() => {
|
|
if (timer) {
|
|
clearInterval(timer);
|
|
}
|
|
});
|
|
const { data } = useRequest(TASK_BROADCAST_DETAIL, { liveId, type }, (e) => {
|
|
console.log("直播判断", e);
|
|
if (e.code === 6) {
|
|
router.push({
|
|
path: "/notpath",
|
|
});
|
|
}
|
|
});
|
|
console.log("直播信息", data);
|
|
|
|
const teacherInfo = useUserInfo(computed(() => data.value.userInfoBo?.userId));
|
|
|
|
const state = reactive({
|
|
activeName: "first",
|
|
teacher: [],
|
|
isAllowSign: false,
|
|
});
|
|
const { activeName, teacher, isAllowSign } = toRefs(state);
|
|
const signClick = () => {
|
|
if (!state.isAllowSign) {
|
|
// console.log("data.signFlag", data.value.signFlag, isAllowSign);
|
|
ElMessage.warning("未在允许签到时间范围内");
|
|
return;
|
|
}
|
|
if (data.value.signFlag) {
|
|
return;
|
|
}
|
|
data.value.signFlag = 1;
|
|
ElMessage.warning("签到成功");
|
|
request(TASK_BROADCAST_SIGN, { courseId: liveId, taskId, type });
|
|
};
|
|
let timer = null;
|
|
//判断能否签到
|
|
function isSignClick() {
|
|
// timer = setInterval(() => {
|
|
let beginTime = new Date(data.value.liveStartTime).getTime();
|
|
let endTime = !data.value.afterSignIn
|
|
? new Date(data.value.liveEndTime).getTime()
|
|
: new Date(data.value.liveStartTime).getTime();
|
|
let nowTime = new Date().getTime();
|
|
if (data.value.beforeSignIn && data.value.afterSignIn) {
|
|
//有开始前有开始后
|
|
beginTime = beginTime - data.value.beforeSignIn * 60 * 1000;
|
|
endTime = endTime + data.value.afterSignIn * 60 * 1000;
|
|
console.log("1111");
|
|
} else if (data.value.beforeSignIn && !data.value.afterSignIn) {
|
|
//只有开始前无开始后
|
|
beginTime = beginTime - data.value.beforeSignIn * 60 * 1000;
|
|
console.log("11112222");
|
|
} else if (!data.value.beforeSignIn && data.value.afterSignIn) {
|
|
//无开始前有开始后
|
|
endTime = endTime + data.value.afterSignIn * 60 * 1000;
|
|
console.log("1111333");
|
|
}
|
|
if (nowTime < endTime && nowTime > beginTime) {
|
|
state.isAllowSign = true;
|
|
} else {
|
|
state.isAllowSign = false;
|
|
}
|
|
// console.log(
|
|
// "isAllowSign",
|
|
// state.isAllowSign,
|
|
// nowTime,
|
|
// endTime,
|
|
// beginTime,
|
|
// nowTime < endTime,
|
|
// nowTime > beginTime
|
|
// );
|
|
// }, 1000);
|
|
}
|
|
watch(data, () => {
|
|
isSignClick();
|
|
});
|
|
const commitClick = () => {
|
|
if (data.value.liveStartTime) {
|
|
let date1 = new Date(data.value.liveStartTime).getTime();
|
|
let date2 = new Date().getTime();
|
|
if (date1 > date2) {
|
|
ElMessage.warning("未到时间，请耐心等待！");
|
|
return;
|
|
}
|
|
}
|
|
if (data.value.isSurvery) {
|
|
// return;
|
|
}
|
|
if (data.value.isEvaluate == 0) {
|
|
ElMessage.warning("此直播无评估");
|
|
return;
|
|
}
|
|
|
|
console.log({
|
|
courseId: data.value.assessmentId,
|
|
taskIds: taskId,
|
|
chapterOrStageId: 0,
|
|
pName: "直播",
|
|
sName: data.value.liveName,
|
|
type: 4,
|
|
});
|
|
|
|
router.push({
|
|
path: "/investigatpage",
|
|
query: {
|
|
courseId: data.value.assessmentId,
|
|
infoId: data.value.liveId,
|
|
chapterOrStageId: 0,
|
|
pName: "直播",
|
|
sName: data.value.liveName,
|
|
type: 4,
|
|
},
|
|
});
|
|
};
|
|
|
|
function showClick() {
|
|
if (data.value.liveStartTime) {
|
|
let date1 = new Date(data.value.liveStartTime).getTime();
|
|
let date2 = new Date().getTime();
|
|
if (date1 > date2) {
|
|
ElMessage.warning("未到开始时间，请耐心等待！");
|
|
return;
|
|
}
|
|
}
|
|
window.open(data.value.liveLink, "_top");
|
|
}
|
|
|
|
//是否显示头部公告
|
|
const closeBtn = ref(true);
|
|
const isShowClose = () => {
|
|
closeBtn.value = false;
|
|
};
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style lang="scss">
|
|
.clearfix:before,
|
|
.clearfix:after {
|
|
content: " ";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
.liveboradcast {
|
|
width: 100%;
|
|
.top {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
height: 25px;
|
|
background-color: #fffbee;
|
|
.topin {
|
|
// text-align: center;
|
|
width: 90%;
|
|
height: 25px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.topsa {
|
|
color: #ff9e00;
|
|
line-height: 25px;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.topimg {
|
|
height: 10px;
|
|
width: 10px;
|
|
margin-top: 7px;
|
|
}
|
|
}
|
|
}
|
|
.notice {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
// margin-top: -17.5px;
|
|
margin-top: 20px;
|
|
.noticebox {
|
|
width: 100%;
|
|
background: #fff;
|
|
// border-radius: 4px;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
.avator {
|
|
display: flex;
|
|
position: absolute;
|
|
right: 29px;
|
|
top: 30px;
|
|
// background-color:red;
|
|
// z-index: 999;
|
|
.avaimg {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
}
|
|
.avaname {
|
|
line-height: 30px;
|
|
margin-left: 8px;
|
|
color: #0d233a;
|
|
}
|
|
}
|
|
.line {
|
|
width: 100%;
|
|
height: 0;
|
|
border-top: 1px solid #f1f2f3;
|
|
margin-top: 17px;
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
.mani {
|
|
width: 90%;
|
|
margin-top: 20px;
|
|
// position:relative;
|
|
.joininfo {
|
|
color: #0d233a;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.contenttitle {
|
|
width: 100%;
|
|
// height:10px;
|
|
margin-top: 15px;
|
|
// background-color: #bfa;
|
|
display: flex;
|
|
.timeimg {
|
|
width: 12.8px;
|
|
height: 13px;
|
|
}
|
|
.timee {
|
|
color: #6e7b84;
|
|
font-size: 14px;
|
|
line-height: 13px;
|
|
margin-left: 6px;
|
|
}
|
|
}
|
|
.midline {
|
|
height: 0;
|
|
border-top: 1px solid #f1f2f3;
|
|
width: 100%;
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.timebox {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
// height: 100px;
|
|
// background-color: #bfa;
|
|
margin-bottom: 15px;
|
|
.allbtn {
|
|
width: 92%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
// background-color: lightcoral;
|
|
.samebtn {
|
|
width: 93px;
|
|
height: 33px;
|
|
border: 0;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.btno {
|
|
background-color: #00c1fc;
|
|
}
|
|
.btnt {
|
|
background-color: #0096fa;
|
|
}
|
|
.btnr {
|
|
background-color: #2478ff;
|
|
}
|
|
}
|
|
}
|
|
.detailin {
|
|
width: 100%;
|
|
// height: 100px;
|
|
// background-color: red;
|
|
display: flex;
|
|
justify-content: center;
|
|
.in {
|
|
margin-left: 20px;
|
|
width: 86%;
|
|
color: #6e7b84;
|
|
line-height: 30px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
.contentone {
|
|
margin-top: 43px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
// height: 200px;
|
|
.actinner {
|
|
// background-color: red;
|
|
color: #6e7b84;
|
|
font-size: 13px;
|
|
line-height: 30px;
|
|
}
|
|
.de {
|
|
width: 100%;
|
|
height: 34px;
|
|
border-radius: 10px;
|
|
background-color: #f2f5f7;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.deal {
|
|
color: #333330;
|
|
font-weight: bold;
|
|
line-height: 34px;
|
|
margin-left: 21px;
|
|
font-size: 14px;
|
|
}
|
|
.rightpng {
|
|
width: 6px;
|
|
height: 11px;
|
|
margin-right: 6px;
|
|
margin-top: 12px;
|
|
}
|
|
}
|
|
.ballotjoincontainer {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
.ballotjoin {
|
|
width: 85%;
|
|
// height:100px;
|
|
// background-color: #bfa;
|
|
.ballotitem {
|
|
.upitem {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.left {
|
|
display: flex;
|
|
.leftimg {
|
|
width: 4.5px;
|
|
height: 14.5px;
|
|
margin-top: 1px;
|
|
}
|
|
.leftcontent {
|
|
margin-left: 9px;
|
|
color: #6e7b84;
|
|
font-size: 13px;
|
|
line-height: 30px;
|
|
margin-top: -5px;
|
|
}
|
|
}
|
|
.btn {
|
|
background-color: #2478ff;
|
|
color: #fff;
|
|
width: 64px;
|
|
height: 21px;
|
|
border-radius: 10px;
|
|
border: 0;
|
|
font-size: 12px;
|
|
line-height: 19px;
|
|
margin-top: -1px;
|
|
}
|
|
}
|
|
.thinline {
|
|
width: 100%;
|
|
border-top: 1px solid #f1f2f3;
|
|
margin-top: 17px;
|
|
margin-bottom: 17px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|