|
|
@@ -0,0 +1,396 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-dialog
|
|
|
+ v-model="dialogVisible"
|
|
|
+ :before-close="handleClose"
|
|
|
+ fullscreen
|
|
|
+ :show-close="false"
|
|
|
+ >
|
|
|
+ <template #header>
|
|
|
+ <div class="topH">
|
|
|
+ <div class="backA"></div>
|
|
|
+ <div class="dialog-header">
|
|
|
+ {{ Tips }}
|
|
|
+ </div>
|
|
|
+ <div class="backA">
|
|
|
+ <div class="bABtn" style="flex-shrink: 0;" @click="openCourseDetail">进入课程</div>
|
|
|
+ <div @click="dialogVisible = false" style="cursor: pointer;display: flex;align-items: center;gap: 5px;">
|
|
|
+ <img src="../../assets/icon/backk.svg" alt="">
|
|
|
+ <span style="flex-shrink: 0;">返回</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="fileArea" @click="openDra">
|
|
|
+ <img src="../../assets/icon/filemr.svg" alt="">
|
|
|
+ </div>
|
|
|
+ <el-drawer
|
|
|
+ v-model="drawer"
|
|
|
+ direction="rtl"
|
|
|
+ size="500px"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :show-close="false"
|
|
|
+ :before-close="handleClose"
|
|
|
+ >
|
|
|
+ <template #header>
|
|
|
+ <div class="fileArea" @click="drawer = false">
|
|
|
+ <img src="../../assets/icon/draCha.svg" alt="">
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #default>
|
|
|
+ <div class="draCon">
|
|
|
+ <div class="dratit">
|
|
|
+ <div class="tit" :class="[drawertit == 0 ? 'tit2':'']" @click="drawertit = 0">文本</div>
|
|
|
+ <div class="tit" :class="[drawertit == 1 ? 'tit2':'']" @click="drawertit = 1">附件({{ inst.file && inst.file.length ? inst.file.length : 0 }})</div>
|
|
|
+ </div>
|
|
|
+ <div class="draconL" v-if="drawertit == 0">
|
|
|
+ <div v-html="inst.content"></div>
|
|
|
+ </div>
|
|
|
+ <div class="draCon" v-if="drawertit == 1">
|
|
|
+ <div class="pdflist" v-if="inst.file && inst.file.length">
|
|
|
+ <div v-for="item in inst.file" :key="item.id">
|
|
|
+ <div @click="cutPdf(item.url)" class="pdfCS" :class="[pdfUrl == item.url? 'pdfback' : '']">
|
|
|
+ <div class="pdfCSTit">{{ item.name }}</div>
|
|
|
+ <!-- <img style="flex-shrink: 0;" src="../../assets/icon/xiazai.png" alt="" > -->
|
|
|
+ <!-- @click.stop="downloadPdf(item.url,item.name)" -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="flex: 1;" v-if="inst.file && inst.file.length">
|
|
|
+ <iframe :src="pdfUrl" width="100%" height="100%" frameborder="0"></iframe>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </el-drawer>
|
|
|
+ <!-- <div class="courseL" @click="openCourseDetail">
|
|
|
+ <span>点击进入对应课程</span>
|
|
|
+ <img :src="dian" alt="">
|
|
|
+ </div> -->
|
|
|
+ <iframe
|
|
|
+ allow="camera *; microphone *; display-capture; midi; encrypted-media; fullscreen; geolocation; clipboard-read; clipboard-write; accelerometer; autoplay; gyroscope; payment; picture-in-picture; usb; xr-spatial-tracking;"
|
|
|
+ ref="iframeRef1"
|
|
|
+ :src="iframeRef1Url"
|
|
|
+ style="width: 100%;height: 100%;"
|
|
|
+ frameborder="0">
|
|
|
+ </iframe>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import axios from 'axios';
|
|
|
+import { ref,onMounted } from 'vue';
|
|
|
+import { userInfoStore } from '../../stores/counter'
|
|
|
+import { defineExpose } from 'vue'
|
|
|
+const user = userInfoStore()
|
|
|
+const iframeRef1Url = ref('')
|
|
|
+const cid = ref('')
|
|
|
+const dialogVisible = ref(false)
|
|
|
+const Tips = ref('')
|
|
|
+const drawer = ref(false)
|
|
|
+const drawertit = ref('0')
|
|
|
+const inst = ref('')
|
|
|
+const pdfUrl = ref('')
|
|
|
+const listData = ref([])
|
|
|
+const loading = ref(false)
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ requestUser()
|
|
|
+})
|
|
|
+
|
|
|
+const downloadPdf =(url, fileName = '')=>{
|
|
|
+
|
|
|
+ const a=document.createElement('a');
|
|
|
+ a.href= url;
|
|
|
+ a.download= fileName;
|
|
|
+ a.style.display='none';
|
|
|
+ document.body.appendChild(a);
|
|
|
+ a.click();
|
|
|
+ setTimeout(()=>{if(a.parentNode)a.parentNode.removeChild(a);},100);
|
|
|
+}
|
|
|
+
|
|
|
+// 拉取用户信息并处理
|
|
|
+const requestUser = () => {
|
|
|
+ loading.value = true
|
|
|
+
|
|
|
+ axios.get(`https://pbl.cocorobo.cn/api/pbl/selectAiExp?cl=1`)
|
|
|
+ .then(res => {
|
|
|
+ console.log(res);
|
|
|
+ let data = res.data
|
|
|
+ data[0].forEach(item1 => {
|
|
|
+ // 在第二个数组中查找匹配的数据
|
|
|
+ const matchedItems = data[1].filter(item2 => item2.levA === item1.id);
|
|
|
+ // 将匹配的数据存入ch属性
|
|
|
+ item1.ch = matchedItems;
|
|
|
+ });
|
|
|
+ listData.value = data[0]
|
|
|
+ loading.value = false
|
|
|
+ })
|
|
|
+ .catch(err=>{
|
|
|
+ console.log(err);
|
|
|
+ loading.value = false
|
|
|
+ })
|
|
|
+};
|
|
|
+const handleClose = (done) => {
|
|
|
+ done()
|
|
|
+}
|
|
|
+const cutPdf = (val) =>{
|
|
|
+ pdfUrl.value = val
|
|
|
+}
|
|
|
+const gotoPage = (val)=>{
|
|
|
+ dialogVisible.value = true
|
|
|
+ // window.open(val.link, "_blank")
|
|
|
+ console.log('val',val);
|
|
|
+ iframeRef1Url.value = val.link
|
|
|
+ cid.value = val.courselink
|
|
|
+ if (inst.value) {
|
|
|
+ inst.value = JSON.parse(val.inst)
|
|
|
+ console.log('inst',{...inst.value});
|
|
|
+ if ({...inst.value}.file.length) {
|
|
|
+ pdfUrl.value = {...inst.value}.file[0].url
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ dialogVisible.value = true
|
|
|
+ Tips.value = val.name
|
|
|
+}
|
|
|
+defineExpose({
|
|
|
+ gotoPage
|
|
|
+})
|
|
|
+const openDra = () =>{
|
|
|
+ drawer.value = true
|
|
|
+}
|
|
|
+
|
|
|
+const openCourseDetail = () => {
|
|
|
+ let id = cid.value
|
|
|
+ console.log(user.user)
|
|
|
+ // 会返回复制得课程
|
|
|
+ top.U.A.Request("https://pbl.cocorobo.cn/api/pbl/getcopyCourseByUseridSz", [id, user.user.userid], function (res) {
|
|
|
+ console.log(res)
|
|
|
+ if (res.value[0].length > 0) {
|
|
|
+ // let isSave = res.value[0].filter(x => {
|
|
|
+ // return x.courseId == id
|
|
|
+ // })
|
|
|
+ //这个是打开指定的课程接口
|
|
|
+ top.U.MD.D.I.openInApplication("studyDetail", res.value[0][0].courseId, 2, user.user.type);
|
|
|
+ } else {
|
|
|
+ updateCourseId(id, "studyDetail")
|
|
|
+ }
|
|
|
+ }, [], { "type": "POST", "withCredentials": true });
|
|
|
+}
|
|
|
+const updateCourseId = (id, type) => {
|
|
|
+ top.U.A.Request("https://pbl.cocorobo.cn/api/pbl/copyCourseSz", [id, user.user.userid], function (res) {
|
|
|
+ console.log(res)
|
|
|
+ if (res.value[0][0].courseId != "") {
|
|
|
+ if (type == "openCourseNewUpdate") {
|
|
|
+ top.U.MD.D.I.openInApplication("openCourseNewUpdate", res.value[0][0].courseId)
|
|
|
+ } else {
|
|
|
+ top.U.MD.D.I.openInApplication("studyDetail", res.value[0][0].courseId, 3, user.user.type);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, [], { "type": "POST", "withCredentials": true });
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.alexp{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20px;
|
|
|
+ .areaL{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 5px;
|
|
|
+ }
|
|
|
+ .tit{
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .con{
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(6, 1fr);
|
|
|
+ // grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
|
+ gap: 0px;
|
|
|
+ .conL{
|
|
|
+ flex: 1;
|
|
|
+ box-sizing: border-box;
|
|
|
+ // background: #fff;
|
|
|
+ // border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ cursor: pointer;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.aiex {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(4, 1fr);
|
|
|
+ gap: 20px;
|
|
|
+ .cont {
|
|
|
+ border-radius: 4px;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex: 1;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ min-height: 36px;
|
|
|
+ background: #fff;
|
|
|
+ img {
|
|
|
+ height: 170px;
|
|
|
+ width: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ .tit{
|
|
|
+ margin-top: 16px;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #555555;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+:deep(.el-dialog__body){
|
|
|
+ width: 100% !important;
|
|
|
+ height: calc(100% - 65px);
|
|
|
+ padding: 0 !important;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.fileArea{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ padding: 15px 15px 10px 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #3781FC;
|
|
|
+}
|
|
|
+:deep(.el-dialog__header){
|
|
|
+ padding: 0 !important;
|
|
|
+ height: 58px;
|
|
|
+}
|
|
|
+.dialog-header{
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ width: 70%;
|
|
|
+ text-align: center;
|
|
|
+ color: #000;
|
|
|
+}
|
|
|
+.courseL{
|
|
|
+ background: #FFFFFF;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #F5A70C;
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 5px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 18px;
|
|
|
+ border: 2px #e7e7e7 solid;
|
|
|
+ top: 10px;
|
|
|
+ left: 65%;
|
|
|
+ gap: 5px;
|
|
|
+ img{
|
|
|
+ height: 25px;
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
+}
|
|
|
+.topH{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.backA{
|
|
|
+ display: flex;
|
|
|
+ gap: 30px;
|
|
|
+ height: 35px;
|
|
|
+ align-items: center;
|
|
|
+ width: 15%;
|
|
|
+ font-size: 16px;
|
|
|
+ justify-content: flex-end;
|
|
|
+ .bABtn{
|
|
|
+ padding: 3px 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #3781FC;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.draCon{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+ .dratit{
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1px #C3C3C3 solid;
|
|
|
+ .tit{
|
|
|
+ font-family: PingFang TC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-style: Semibold;
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 100%;
|
|
|
+ color: #000;
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ height: 35px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .tit2{
|
|
|
+ border-bottom: 1px #000 solid;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .draconL{
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ .pdflist{
|
|
|
+ max-height: 100px;overflow: auto;padding: 20px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .pdfCS{
|
|
|
+ padding: 3px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-size: 15px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ .pdfCSTit{
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ img{
|
|
|
+ height: 15px;
|
|
|
+ object-fit: cover;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pdfback{
|
|
|
+ background: #3781FC33;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
11wqe1
