Files
student-h5/src/views/outerchain/OuterChain.vue
2024-06-28 12:49:44 +08:00

406 lines
10 KiB
Vue

<template>
<div class="outerchain">
<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?.linkName }}</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>
</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.linkDescription }}
</div>
</div>
</div>
</div>
<div class="btnbox">
<div class="submitbtn" @click="goOuterChain(data.linkAddress)">去查看</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 { LINK_DETAILS, STUDY_RECORD, checkStudentExist,LEARN,NOLOGINURL } 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";
import store from "@/store";
const {
query: {
courseId: linkId,
id: taskId,
type,
status,
chapterOrStageId,
infoId,
},
} = useRoute();
const router = useRouter();
console.log("外链信息", linkId);
const { data } = useRequest(LINK_DETAILS, { linkId, type }, (e) => {
useRequest(
checkStudentExist,
{
targetId: infoId,
type: type,
chapterId: chapterOrStageId,
courseId: taskId,
},
(res) => {
console.log("判断任务是否删除", res);
if (res.code === 7) {
router.push({
path: "/loseefficacy",
});
} else {
if (res.code === 6) {
router.push({
path: "/notpath",
});
}
}
}
);
});
console.log("外链信息", data);
const userInfo = computed(() => store.state.userInfo);
const goOuterChain = async (url) => {
console.log("userInfo", userInfo);
// request(STUDY_RECORD, {
// studentId: userInfo.value.id,
// targetId: infoId,
// logo: type,
// stageOrChapterId: chapterOrStageId,
// taskId: taskId,
// type: type,
// taskType: 7,
// });
if(url.includes('umu.cn')){
await request(LEARN, {url,userId:userInfo.value.userId}).then(res=>{
console.log(res,'res')
if(res.code == 200){
window.open(res.data, "_top")
}
})
return
}
if(url.includes('firacademy.com')){
await request(NOLOGINURL, {url,userId:userInfo.value.userId}).then(res=>{
if(res.code == 200){
window.open(res.data, "_top")
}
})
return
}
window.open(url);
// window.open(data.value.linkAddress, "_top");
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
clear: both;
}
.outerchain {
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;
padding-bottom: 24px;
margin-top: 20px;
background: #fff;
.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;
}
}
}
}
}
}
}
.btnbox {
width: 301.5px;
height: 33px;
background-color: #2478ff;
border-radius: 6px;
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
font-size: 14px;
margin: 30px auto 0 auto;
text-align: center;
line-height: 33px;
.submitbtn {
border: none;
border-radius: 6px;
background-color: #2478ff;
color: #ffffff;
}
}
}
}
</style>