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

fix:增加面授和直播任务未到开始时间按钮灰色点击提示

Browse Source
This commit is contained in:
wuyx
2022-12-23 16:35:18 +08:00
parent 70c441e343
commit c16dfe5716
2 changed files with 1111 additions and 1183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/views/faceteach/FaceTeach.vue
View File

@@ -5,13 +5,9 @@
<div>课程列表</div> <div>课程列表</div>
<div style="margin-left: 6px; margin-right: 6px">/</div> <div style="margin-left: 6px; margin-right: 6px">/</div>
<div style="font-weight: 700">课程详情</div> <div style="font-weight: 700">课程详情</div>
<div v-if="pName !=''" class="return"> <div v-if="pName != ''" class="return">
<div style="display: flex" @click="returnclick"> <div style="display: flex" @click="returnclick">
<img <img class="img2" style="margin-right: 22px" src="../../assets/image/return.png" />
class="img2"
style="margin-right: 22px"
src="../../assets/image/return.png"
/>
<div class="text">返回</div> <div class="text">返回</div>
</div> </div>
</div> </div>
@@ -23,56 +19,31 @@
<div style="margin-left: 46px"> <div style="margin-left: 46px">
<div class="title">【面授课】{{ data.planDto?.name }}</div> <div class="title">【面授课】{{ data.planDto?.name }}</div>
<div class="time" style="margin-top: 26px"> <div class="time" style="margin-top: 26px">
<img <img style="width: 15px; height: 17px" src="../../assets/image/time.png" />
style="width: 15px; height: 17px"
src="../../assets/image/time.png"
/>
<div style="margin-left: 8px"> <div style="margin-left: 8px">
{{ data.planDto?.beginTime + "至" + data.planDto?.endTime }} {{ data.planDto?.beginTime + "至" + data.planDto?.endTime }}
</div> </div>
</div> </div>
<div class="time" style="margin-top: 23px"> <div class="time" style="margin-top: 23px">
<img <img style="width: 16px; height: 18px" src="../../assets/image/position.png" />
style="width: 16px; height: 18px"
src="../../assets/image/position.png"
/>
<div style="margin-left: 8px">{{ data.planDto?.address }}</div> <div style="margin-left: 8px">{{ data.planDto?.address }}</div>
</div> </div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<botton <botton v-if="!isAllowSign" class="btn" style="margin-right: 20px; background: #999" @click="signClick">签到
v-if="!isAllowSign"
class="btn"
style="margin-right: 20px; background: #999"
@click="signClick"
>签到
</botton> </botton>
<botton <botton v-if="isAllowSign" class="btn" style="margin-right: 20px" :style="{
v-if="isAllowSign"
class="btn"
style="margin-right: 20px"
:style="{
background: data.signFlag ? '#999' : 'rgb(57, 146, 249)', background: data.signFlag ? '#999' : 'rgb(57, 146, 249)',
}" }" @click="signClick">{{ data.signFlag ? "已签到" : "签到" }}
@click="signClick"
>{{ data.signFlag ? "已签到" : "签到" }}
</botton> </botton>
<botton <botton style="background: #999" class="btn" @click="toSurvery" v-if="data.planDto?.evalFlag == 0">
style="background: #999"
class="btn"
@click="toSurvery"
v-if="data.planDto?.evalFlag == 0"
>
评估 评估
</botton> </botton>
<botton <botton :style="{
:style="{ background: `${new Date(data.planDto.beginTime).getTime() > new Date().getTime() ? '#999' : data.isSurvery ? '#999' : 'rgb(57, 146, 249)'}`,
background: `${new Date(data.planDto.beginTime).getTime()>new Date().getTime()? '#999' : data.isSurvery ? '#999' : 'rgb(57, 146, 249)'}`, }" class="btn" @click="toSurvery" v-if="data.planDto?.evalFlag && data.planDto?.evalFlag == 1">{{
}" data.isSurvery ? "已评估" : "评估"
class="btn" }}
@click="toSurvery"
v-if="data.planDto?.evalFlag && data.planDto?.evalFlag == 1"
>{{ data.isSurvery ? "已评估" : "评估" }}
</botton> </botton>
</div> </div>
</div> </div>
@@ -84,10 +55,7 @@
<div class="detailT"> <div class="detailT">
<div class="" style="margin-left: 48px; margin-right: 48px"> <div class="" style="margin-left: 48px; margin-right: 48px">
<div class="title"> <div class="title">
<img <img style="width: 20px; height: 20px" src="../../assets/image/course.png" />
style="width: 20px; height: 20px"
src="../../assets/image/course.png"
/>
<div class="text">课程详情</div> <div class="text">课程详情</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
@@ -99,79 +67,49 @@
<div class="detailB"> <div class="detailB">
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="课程附件" name="first"> <el-tab-pane label="课程附件" name="first">
<div <div v-if="data.planDto?.attach === '[]'" style="
v-if="data.planDto?.attach === '[]'"
style="
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
cursor: pointer; cursor: pointer;
margin-left: 40px; margin-left: 40px;
margin-top: 20px; margin-top: 20px;
" ">
>
此课程无附件 此课程无附件
</div> </div>
<div <div v-for="(el, index) in JSON.parse(data.planDto?.attach)" :key="index" v-if="data.planDto"
v-for="(el, index) in JSON.parse(data.planDto?.attach)" class="enclosure" :style="{ borderBottom: '1px solid rgba(56, 125, 247, 0.2)' }">
:key="index"
v-if="data.planDto"
class="enclosure"
:style="{ borderBottom: '1px solid rgba(56, 125, 247, 0.2)' }"
>
<div class="enclosureL"> <div class="enclosureL">
<FileTypeImg <FileTypeImg v-model="el.name" :style="{
v-model="el.name"
:style="{
width: '22px', width: '22px',
height: '26px', height: '26px',
marginLeft: '10px', marginLeft: '10px',
}" }"></FileTypeImg>
></FileTypeImg>
<div style="margin-left: 20px">{{ el.name }}</div> <div style="margin-left: 20px">{{ el.name }}</div>
</div> </div>
<div <div v-if="new Date(data.planDto.beginTime).getTime() > new Date().getTime()" class="download">
v-if="new Date(data.planDto.beginTime).getTime() > new Date().getTime()" <img style="width: 16px; height: 15px" src="../../assets/image/download.png" />
class="download"> <div style="margin-left: 5px;color:#999;" @click="downloads(el.response.data)">
<img
style="width: 16px; height: 15px"
src="../../assets/image/download.png"
/>
<div
style="margin-left: 5px;color:#999;"
@click="downloads(el.response.data)"
>
下载 下载
</div> </div>
</div> </div>
<div <div v-else class="download">
v-else <img style="width: 16px; height: 15px" src="../../assets/image/download.png" />
class="download"> <div style="margin-left: 5px" @click="download(el.response.data)">
<img
style="width: 16px; height: 15px"
src="../../assets/image/download.png"
/>
<div
style="margin-left: 5px"
@click="download(el.response.data)"
>
下载 下载
</div> </div>
</div> </div>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="课程作业" name="second"> <el-tab-pane label="课程作业" name="second">
<div <div v-if="data.planDto?.attach === '[]'" style="
v-if="data.planDto?.attach === '[]'"
style="
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
cursor: pointer; cursor: pointer;
margin-left: 40px; margin-left: 40px;
margin-top: 20px; margin-top: 20px;
" ">
>
此课程无作业 此课程无作业
</div> </div>
<div class="work" v-if="data.workDto?.workName"> <div class="work" v-if="data.workDto?.workName">
@@ -187,24 +125,21 @@
已结束 已结束
</div> </div>
<div <div
:style="{background: new Date(data.planDto.beginTime).getTime() > new Date().getTime()?'#999':''}" :style="{ background: new Date(data.planDto.beginTime).getTime() > new Date().getTime() ? '#999' : '' }"
v-else class="submit" @click="toWork" v-if="data.workDto?.workId"> v-else class="submit" @click="toWork" v-if="data.workDto?.workId">
交作业 交作业
</div> </div>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="课程考试" name="third"> <el-tab-pane label="课程考试" name="third">
<div <div v-if="data.planDto?.attach === '[]'" style="
v-if="data.planDto?.attach === '[]'"
style="
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
cursor: pointer; cursor: pointer;
margin-left: 40px; margin-left: 40px;
margin-top: 20px; margin-top: 20px;
" ">
>
此课程无考试 此课程无考试
</div> </div>
<div class="work" v-if="data.examinationDto?.examinationTestName"> <div class="work" v-if="data.examinationDto?.examinationTestName">
@@ -213,16 +148,15 @@
{{ data.examinationDto?.examinationTestName }} {{ data.examinationDto?.examinationTestName }}
</div> </div>
<div style="margin-top: 16px; display: flex"> <div style="margin-top: 16px; display: flex">
<div <div class="tag1" v-if="data.examinationDto?.examinationFlag">
class="tag1"
v-if="data.examinationDto?.examinationFlag"
>
必修 必修
</div> </div>
<div class="tag3" style="margin-left: 11px">考试</div> <div class="tag3" style="margin-left: 11px">考试</div>
</div> </div>
</div> </div>
<div :style="{background: new Date(data.planDto.beginTime).getTime() > new Date().getTime()?'#999':''}" class="submit" @click="toExamItem(data.examinationDto)"> <div
:style="{ background: new Date(data.planDto.beginTime).getTime() > new Date().getTime() ? '#999' : '' }"
class="submit" @click="toExamItem(data.examinationDto)">
去考试 去考试
</div> </div>
</div> </div>
@@ -232,10 +166,7 @@
</div> </div>
<div class="teacher"> <div class="teacher">
<div class="title"> <div class="title">
<img <img style="width: 21px; height: 23px" src="../../assets/image/livelecturer.png" />
style="width: 21px; height: 23px"
src="../../assets/image/livelecturer.png"
/>
<div class="text">面授课讲师</div> <div class="text">面授课讲师</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
@@ -296,7 +227,7 @@ const download = (url) => {
window.open(url); window.open(url);
}; };
const downloads = (url) => { const downloads = (url) => {
ElMessage.info("面授课未开始"); ElMessage.info("未到开始时间，请耐心等待！");
}; };
let timer = null; let timer = null;
//判断能否签到 //判断能否签到
@@ -356,11 +287,11 @@ const signClick = () => {
// state.isAllowSign, // state.isAllowSign,
// !state.isAllowSign // !state.isAllowSign
// ); // );
if(data.value.planDto.beginTime){ if (data.value.planDto.beginTime) {
let date1 = new Date(data.value.planDto.beginTime).getTime() let date1 = new Date(data.value.planDto.beginTime).getTime()
let date2 = new Date().getTime() let date2 = new Date().getTime()
if(date1>date2){ if (date1 > date2) {
ElMessage.info("面授课未开始"); ElMessage.info("未到开始时间，请耐心等待！");
return; return;
} }
} }
@@ -384,11 +315,11 @@ function toSurvery() {
if (data.value.isSurvery) { if (data.value.isSurvery) {
// return; // return;
} }
if(data.value.planDto.beginTime){ if (data.value.planDto.beginTime) {
let date1 = new Date(data.value.planDto.beginTime).getTime() let date1 = new Date(data.value.planDto.beginTime).getTime()
let date2 = new Date().getTime() let date2 = new Date().getTime()
if(date1>date2){ if (date1 > date2) {
ElMessage.info("面授课未开始"); ElMessage.info("未到开始时间，请耐心等待！");
return; return;
} }
} }
@@ -407,24 +338,24 @@ function toSurvery() {
} }
function isEndSubMitWork() { function isEndSubMitWork() {
if(data.value.workDto.submitEndTime){ if (data.value.workDto.submitEndTime) {
let date1 = new Date(data.value.workDto.submitEndTime).getTime(); let date1 = new Date(data.value.workDto.submitEndTime).getTime();
let date2 = new Date().getTime(); let date2 = new Date().getTime();
console.log(date1, date2, date1>date2, data.value.workDto.submitEndTime) console.log(date1, date2, date1 > date2, data.value.workDto.submitEndTime)
if(date1<date2){ if (date1 < date2) {
return true; return true;
} }
}else{ } else {
return false; return false;
} }
} }
function toWork() { function toWork() {
if(data.value.planDto.beginTime){ if (data.value.planDto.beginTime) {
let date1 = new Date(data.value.planDto.beginTime).getTime() let date1 = new Date(data.value.planDto.beginTime).getTime()
let date2 = new Date().getTime() let date2 = new Date().getTime()
if(date1>date2){ if (date1 > date2) {
ElMessage.info("面授课未开始"); ElMessage.info("未到开始时间，请耐心等待！");
return; return;
} }
} }
@@ -441,11 +372,11 @@ function toWork() {
} }
function toExamItem(obj) { function toExamItem(obj) {
if(data.value.planDto.beginTime){ if (data.value.planDto.beginTime) {
let date1 = new Date(data.value.planDto.beginTime).getTime() let date1 = new Date(data.value.planDto.beginTime).getTime()
let date2 = new Date().getTime() let date2 = new Date().getTime()
if(date1>date2){ if (date1 > date2) {
ElMessage.info("面授课未开始"); ElMessage.info("未到开始时间，请耐心等待！");
return; return;
} }
} }
@@ -514,9 +445,11 @@ onUnmounted(() => {
align-items: center; align-items: center;
} }
} }
.return { .return {
position: absolute; position: absolute;
right: 10%; right: 10%;
.text { .text {
text-align: center; text-align: center;
display: flex; display: flex;
@@ -524,6 +457,7 @@ onUnmounted(() => {
align-items: center; align-items: center;
} }
} }
.detailinfo { .detailinfo {
width: 100%; width: 100%;
margin-top: 20px; margin-top: 20px;

108
src/views/liveBroadcast/LiveBroadcast.vue
View File

@@ -17,11 +17,7 @@
</div>--> </div>-->
<div class="return"> <div class="return">
<div style="display: flex" @click="returnclick"> <div style="display: flex" @click="returnclick">
<img <img class="img2" style="margin-right: 22px" src="../../assets/image/return.png" />
class="img2"
style="margin-right: 22px"
src="../../assets/image/return.png"
/>
<div class="text">返回</div> <div class="text">返回</div>
</div> </div>
</div> </div>
@@ -33,10 +29,7 @@
<div style="margin-left: 46px"> <div style="margin-left: 46px">
<div class="title">【直播】{{ data?.liveName }}</div> <div class="title">【直播】{{ data?.liveName }}</div>
<div class="time" style="margin-top: 26px"> <div class="time" style="margin-top: 26px">
<img <img style="width: 15px; height: 17px" src="../../assets/image/time.png" />
style="width: 15px; height: 17px"
src="../../assets/image/time.png"
/>
<div style="margin-left: 8px"> <div style="margin-left: 8px">
{{ data?.liveStartTime + "至" + data?.liveEndTime }} {{ data?.liveStartTime + "至" + data?.liveEndTime }}
</div> </div>
@@ -52,37 +45,23 @@
</div> --> </div> -->
</div> </div>
<div class="threeBtn"> <div class="threeBtn">
<botton <botton class="btn" :style="{
class="btn" background: `${new Date(data.liveStartTime).getTime() > new Date().getTime() ? '#999' : 'rgb(59, 191, 252)'}`,
style="background: rgb(59, 191, 252)" }" @click="showClick">观看
@click="showClick"
>观看
</botton> </botton>
<botton <botton class="btn" :style="{
class="btn" background: `${new Date(data.liveStartTime).getTime() > new Date().getTime() ? '#999' : data.signFlag ? '#999' : 'rgb(57, 146, 249)'}`,
:style="{ }" @click="signClick">{{ data.signFlag ? "已签到" : "签到" }}
background: `${data.signFlag ? '#999' : 'rgb(57, 146, 249)'}`,
}"
@click="signClick"
>{{ data.signFlag ? "已签到" : "签到" }}
</botton> </botton>
<botton <botton style="background: #999" class="btn" @click="commitClick" v-if="data.isEvaluate == 0">
style="background: #999"
class="btn"
@click="commitClick"
v-if="data.isEvaluate == 0"
>
评估 评估
</botton> </botton>
<botton <botton :style="{
:style="{ background: `${new Date(data.liveStartTime).getTime() > new Date().getTime() ? '#999' : data.isSurvery ? '#999' : 'rgb(57, 146, 249)'}`,
background: `${data.isSurvery ? '#999' : 'rgb(57, 146, 249)'}`, }" class="btn" @click="commitClick" v-if="data.isEvaluate && data.isEvaluate == 1">{{ data.isSurvery ? "已评估"
}" : "评估"
class="btn" }}
@click="commitClick"
v-if="data.isEvaluate && data.isEvaluate == 1"
>{{ data.isSurvery ? "已评估" : "评估" }}
</botton> </botton>
</div> </div>
</div> </div>
@@ -94,10 +73,7 @@
<div class="detailT"> <div class="detailT">
<div class="" style="margin-left: 48px; margin-right: 48px"> <div class="" style="margin-left: 48px; margin-right: 48px">
<div class="title"> <div class="title">
<img <img style="width: 20px; height: 20px" src="../../assets/image/course.png" />
style="width: 20px; height: 20px"
src="../../assets/image/course.png"
/>
<div class="text">直播说明</div> <div class="text">直播说明</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
@@ -131,10 +107,7 @@
<div> <div>
<div class="tell"> <div class="tell">
<div class="title"> <div class="title">
<img <img style="width: 21px; height: 23px" src="../../assets/image/tv.png" />
style="width: 21px; height: 23px"
src="../../assets/image/tv.png"
/>
<div class="text">直播公告</div> <div class="text">直播公告</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
@@ -142,18 +115,12 @@
</div> </div>
<div class="teacher"> <div class="teacher">
<div class="title"> <div class="title">
<img <img style="width: 21px; height: 23px" src="../../assets/image/livelecturer.png" />
style="width: 21px; height: 23px"
src="../../assets/image/livelecturer.png"
/>
<!-- todo #直播详情 没有直播讲师--> <!-- todo #直播详情 没有直播讲师-->
<div class="text">直播讲师</div> <div class="text">直播讲师</div>
<div class="box"></div> <div class="box"></div>
</div> </div>
<div <div class="teacheritem" :style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }">
class="teacheritem"
:style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }"
>
<img class="peopleimg" :src="teacherInfo.avatar" /> <img class="peopleimg" :src="teacherInfo.avatar" />
<div style="margin-left: 17px; width: 190px"> <div style="margin-left: 17px; width: 190px">
<div class="teacherName" style="margin-right: 5px"> <div class="teacherName" style="margin-right: 5px">
@@ -189,7 +156,7 @@ const returnclick = () => {
}; };
const { data } = useRequest(TASK_BROADCAST_DETAIL, { liveId }); const { data } = useRequest(TASK_BROADCAST_DETAIL, { liveId });
console.log('直播信息', data)
const teacherInfo = useUserInfo( const teacherInfo = useUserInfo(
computed(() => data.value.userInfoBo?.userId) computed(() => data.value.userInfoBo?.userId)
); );
@@ -208,6 +175,14 @@ const state = reactive({
}); });
const { activeName, teacher } = toRefs(state); const { activeName, teacher } = toRefs(state);
const signClick = () => { const signClick = () => {
if (data.value.liveStartTime) {
let date1 = new Date(data.value.liveStartTime).getTime()
let date2 = new Date().getTime()
if (date1 > date2) {
ElMessage.info("未到开始时间，请耐心等待！");
return;
}
}
if (data.value.signFlag) { if (data.value.signFlag) {
return; return;
} }
@@ -216,9 +191,17 @@ const signClick = () => {
request(TASK_BROADCAST_SIGN, { courseId: liveId, taskId, type }); request(TASK_BROADCAST_SIGN, { courseId: liveId, taskId, type });
}; };
const commitClick = () => { const commitClick = () => {
if (data.value.isSurvery) { if (data.value.liveStartTime) {
let date1 = new Date(data.value.liveStartTime).getTime()
let date2 = new Date().getTime()
if (date1 > date2) {
ElMessage.info("未到开始时间，请耐心等待！");
return; return;
} }
}
if (data.value.isSurvery) {
// return;
}
if (data.value.isEvaluate == 0) { if (data.value.isEvaluate == 0) {
ElMessage.info("此直播无评估"); ElMessage.info("此直播无评估");
return; return;
@@ -235,6 +218,14 @@ const commitClick = () => {
}; };
function showClick() { function showClick() {
if (data.value.liveStartTime) {
let date1 = new Date(data.value.liveStartTime).getTime()
let date2 = new Date().getTime()
if (date1 > date2) {
ElMessage.info("未到开始时间，请耐心等待！");
return;
}
}
window.open(data.value.liveLink); window.open(data.value.liveLink);
} }
</script> </script>
@@ -249,9 +240,11 @@ function showClick() {
line-height: 24px; line-height: 24px;
position: relative; position: relative;
} }
.return { .return {
position: absolute; position: absolute;
right: 10%; right: 10%;
.text { .text {
text-align: center; text-align: center;
display: flex; display: flex;
@@ -259,6 +252,7 @@ function showClick() {
align-items: center; align-items: center;
} }
} }
.preNext { .preNext {
position: absolute; position: absolute;
right: 0px; right: 0px;
@@ -333,6 +327,7 @@ function showClick() {
} }
@media screen and (max-width: 1030px) { @media screen and (max-width: 1030px) {
// .threeBtn { // .threeBtn {
// margin-right: 30px; // margin-right: 30px;
// } // }
@@ -340,6 +335,7 @@ function showClick() {
margin-bottom: -24px; margin-bottom: -24px;
} }
} }
// @media screen and(max-width:) { // @media screen and(max-width:) {
// } // }
.time { .time {
@@ -530,11 +526,9 @@ function showClick() {
// min-height: 557px; // min-height: 557px;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
border-radius: 8px; border-radius: 8px;
background: linear-gradient( background: linear-gradient(180deg,
180deg,
rgba(36, 120, 255, 0.15) 0%, rgba(36, 120, 255, 0.15) 0%,
rgba(255, 255, 255) 50% rgba(255, 255, 255) 50%);
);
.title { .title {
display: flex; display: flex;