course_resource/src/views/main.vue

<template>
  <div style="height:100%">
    <Header></Header>
    <div class="container" v-if="isLogin" >
      <div class="container-left" :style="leftShow ? {width:0}:{width:'240px'}">
        <div :class="activeIndex == 0 ? 'container-left-top active' : 'container-left-top'" @click="activeIndex = 0">
          <img class="icon-img" :src="activeIndex == 0 ? img1 : img11" alt="教学中心" />教学中心
        </div>
        <div class="container-left-top" @click="dialogVisible = !dialogVisible">
          <span>
            <img class="icon-img" :src="img2" alt="AI 应用" />AI 应用
            <img v-if="dialogVisible" class="up" :src="img3" alt="up" />
            <img v-else class="up" :src="down" alt="down" />
          </span>
        </div>
        <transition name="fade">
          <div v-if="dialogVisible">
            <div :class="activeIndex == 1 ? 'container-left-top active' : 'container-left-top'" @click="clickSwitch(1)">
              应用中心
            </div>
            <div :class="activeIndex == 2 ? 'container-left-top active' : 'container-left-top'" @click="clickSwitch(2)">
              创建应用
            </div>
            <!-- <div :class="activeIndex == 3 ? 'container-left-top active' : 'container-left-top'" @click="clickSwitch(3)">
              AI
              应用精选</div> -->
          </div>
        </transition>
        <div class="container-left-show" :style="leftShow ? {width:'35px'}:{width:'240px'}" @click="leftShow = !leftShow">
          <img :src="shows" alt="">
        </div>
      </div>
      <div class="main" :style="leftShow ? {width:'100%'}:''" v-if="activeIndex == 0">
        <!-- <BannerVue></BannerVue> -->
        <CourseSelect></CourseSelect>
        <DemoCurourse />
        <resource></resource>
        <Practice></Practice>
        <!-- <other v-if="!isupdateCourse"></other> -->
        <Edu v-if="isLogin"></Edu>
        <Feedback></Feedback>
      </div>
      <div class="iframe" v-else-if="activeIndex == 1" v-loading="loading">
        <iframe ref="iframeRef1" :src="iframeRef1Url" frameborder="0"></iframe>
      </div>
      <div class="iframe" v-else-if="activeIndex == 2" v-loading="loading">
        <iframe ref="iframeRef2" :src="iframeRef2Url" frameborder="0"></iframe>
        <el-dialog v-model="iframeRef2Dialog" width="450" @close="clickSwitch(1)">
          <template #header="{ }">
            <div class="my-header">
              <h4 style="display: flex;align-items: center;color: #0354D7;font-weight: bold;"><img :src="info" alt="" style="margin-right: 5px;" />无权访问 !</h4>
            </div>
          </template>
          <div class="dialog-content">
            暂无开通权限，请通过<span style="color: #0354D7;font-weight: bold;">“support@cocorobo.cc”</span>联系管理员。
          </div>
          <template #footer="{ }">
            <div class="dialog-footer" style="text-align: right;">
              <el-button  @click="clickSwitch(1)">返回</el-button>
              <el-button type="primary" @click="copyEmail">复制邮箱</el-button>
            </div>
          </template>
          
        </el-dialog>
      </div>
      <div class="iframe" v-else-if="activeIndex == 3" v-loading="loading">
        <iframe ref="iframeRef" src="//app.cocorobo.cn/#/appSelection" frameborder="0"></iframe>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, watchEffect,onMounted } from 'vue';
import img1 from '@/assets/icon/1.png'
import img11 from '@/assets/icon/1-1.png'
import img2 from '@/assets/icon/2.png'
import img3 from '@/assets/icon/up.png'
import down from '@/assets/icon/down.png'
import info from '@/assets/icon/info.png'
import shows from '@/assets/icon/show.png'
import BannerVue from '@/components/main/banner.vue'
import CourseSelect from '@/components/main/courseSelect.vue'
import DemoCurourse from '@/components/main/demoCourse.vue'
import resource from '@/components/main/resource.vue';
import Practice from '@/components/main/Practice.vue';
import other from '@/components/main/other.vue';
import Edu from '@/components/main/edu.vue';
import Feedback from '@/components/main/feedback.vue';
import Header from './header.vue'
import { userCurrentRole, userInfoStore } from '../stores/counter'


const user = userInfoStore()
const CurrentRole = userCurrentRole()
const isupdateCourse = ref(false)
const isLogin = ref(false)
const activeIndex = ref(0)
const dialogVisible = ref(true)
const iframeRef = ref(null)
const iframeRef1 = ref(null)
const iframeRef2 = ref(null)
const loading = ref(false)
const iframeRef1Url = ref('')
const iframeRef2Url = ref('')
const iframeRef2Dialog = ref(false)
const leftShow = ref(false)

onMounted(() => {
  let timer = setInterval(() => {
    if(JSON.stringify(user.user) != "{}") {
      clickSwitch(1)
      clearInterval(timer)
    }
  }, 10);
})

watchEffect(() => {
  // console.log('111111111111',CurrentRole, user.user)
  if (JSON.stringify(user.user) != "{}") {
    isLogin.value = true
    if (CurrentRole.currentRole == "edupersonnel" || CurrentRole.currentRole == "areaAdministrator" || CurrentRole.currentRole == "userAdministrator" || CurrentRole.currentRole == "securityAuditor" || CurrentRole.currentRole == "schoolAdministrator" || CurrentRole.currentRole == "schoolSecurityAuditor" || CurrentRole.currentRole == "teacher" || user.user.type != 2) {
      isupdateCourse.value = true
    }
  }
})

const clickSwitch = (index) => {
  console.log('clickSwitch', activeIndex.value)
  if (index == 1 && activeIndex.value != 1) {
    loading.value = true
    iframeRef1Url.value = `//app.cocorobo.cn/#/appManagement?userid=${user.user.userid}&oid=${user.user.organizeid}&org=${user.user.org}&role=${user.user.role}`
    setTimeout(() => {
      iframeRef1.value.onload = () => {
        loading.value = false
      }
    }, 10)
  } else if (index == 3 && activeIndex.value != 3) {
    loading.value = true
    setTimeout(() => {
      iframeRef.value.onload = () => {
        loading.value = false
      }
    }, 10)
  } else if (index == 2 && activeIndex.value != 2) {
    loading.value = true
    iframeRef2Url.value = `//app.cocorobo.cn/#/AppList?userid=${user.user.userid}&oid=${user.user.organizeid}&org=${user.user.org}&role=${user.user.role}`
    setTimeout(() => {
      iframeRef2.value.onload = () => {
        loading.value = false
      }
    }, 10)
  }
  activeIndex.value = index
}

const copyEmail = () => {
  navigator.clipboard.writeText('support@cocorobo.cc').then(() => {
    console.log('复制成功');
  }).catch((error) => {
    console.error('复制失败:', error);
  });
}
const show = () => {
  console.log('show')
}
</script>
<style lang="scss">
.container {
  display: flex;
  overflow: hidden;
  align-items: center;

  .container-left {
    height: calc(100vh - 60px);
    width: 240px;
    background: #fff;
    overflow: hidden;
    padding-top: 15px;

    .container-left-top {
      margin: 0 10px 0 10px;
      font-size: 14px;
      color: #111;
      font-weight: 500;
      padding: 10px 0 10px 40px;
      position: relative;
      cursor: pointer;
      transition: all 0.7s ease 0ms;

      .icon-img {
        position: absolute;
        top: 10px;
        left: 15px;
      }

      .up {
        position: absolute;
        top: 15px;
        left: 140px;
      }

      div {
        background-color: #fff;
        padding: 5px 0;
        color: #00000099;
      }

    }

    .container-left-show{
      width: 240px;
      position: fixed;
      bottom: 0;
      left: 0;
      border: 1px solid #E7E7E7;
      cursor: pointer;
      background-color: #fff;
      height: 35px;
    }
  }

  .main {
    background: #F0F2F5;
    padding: 20px 10%;
    width: calc(100% - 240px);
    height: calc(100vh - 60px);
    overflow: auto;
  }

  .iframe {
    width: calc(100% - 150px);
    height: calc(100vh - 60px);
    position: relative;

    .el-overlay {
      position: absolute !important;

      .el-overlay-dialog {
        position: absolute !important;
        
        .el-dialog__header{
          text-align: left;
        }
      }
    }

    iframe {
      width: 100%;
      height: 100%;
    }
  }
}

.active {
  background: #F0F2F5;
  color: #0061FF !important;
  border-radius: 5px;
}

/* 渐入渐出动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>