12 changed files with 1847 additions and 546 deletions
|
After Width: | Height: | Size: 474 KiB |
@ -0,0 +1,146 @@
|
||||
<template> |
||||
<div class="user-pop-index"> |
||||
<ul> |
||||
<div class="dr-nav-popover-inner-section"> |
||||
<div class="avatar-wrapper"> |
||||
<div class="detail-wrapper"> |
||||
<div class="username-info">{{ user.username }}</div> |
||||
<div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-center uid-info" style="gap: 8px"> |
||||
<div class="ant-space-item" style="">uid:</div> |
||||
<div class="ant-space-item">{{ uid }}</div> |
||||
</div> |
||||
<div class="ant-space css-1me4733 ant-space-horizontal ant-space-align-center" style="gap: 40px"> |
||||
<div class="ant-space-item" style=""> |
||||
<a href="https://fanruanclub.com/#/info/" target="_blank" class="col167">个人资料</a> |
||||
</div> |
||||
<div class="ant-space-item"> |
||||
<a href="https://fanruanclub.com/#/info/auth" target="_blank" class="col167">账号认证</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div> |
||||
<img class="dr-nav-popover-inner-logo-big" :src="'https://bbs.fanruan.com/uc_server/avatar.php?uid=' + uid + '&size=small'" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="dr-nav-popover-inner-section"> |
||||
<div class="ant-row css-1me4733"> |
||||
<div class="ant-col ant-col-12 css-1me4733"> |
||||
<a class="section-item" :href="'https://bbs.fanruan.com/u/' + uid" target="_blank"> <img class="section-item-icon" src="https://hwobs.fanruan.com/ui/digit-fe/header/header-user.png" />我的主页 </a> |
||||
</div> |
||||
<div class="ant-col ant-col-12 css-1me4733"> |
||||
<a class="section-item" href="https://bbs.fanruan.com/task-my.html" target="_blank"> <img class="section-item-icon" src="https://hwobs.fanruan.com/ui/digit-fe/header/header-calendar.png" />我的任务 </a> |
||||
</div> |
||||
<div class="ant-col ant-col-12 css-1me4733"> |
||||
<a class="section-item" href="https://edu.fanruan.com/class" target="_blank"> <img class="section-item-icon" src="https://hwobs.fanruan.com/ui/digit-fe/header/header-report.png" />我的班级 </a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="dr-nav-popover-inner-section" style="border-bottom: none;"> |
||||
<a class="section-item" :href="com_id_url + '/login/token/logout?referrer=' + com_edu_url + $route.fullPath"> <img class="section-item-icon" src="https://hwobs.fanruan.com/ui/digit-fe/header/header-logout.png" />退出登录 </a> |
||||
</div> |
||||
</ul> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { reactive, toRefs } from "vue"; |
||||
import { getUid } from "@/utils/cookie"; |
||||
import { getUserInfoShequ } from "@/api/user"; |
||||
export default { |
||||
setup() { |
||||
const state = reactive({ |
||||
uid: getUid(), |
||||
user: {}, |
||||
}); |
||||
const resGetUserInfoShequ = async () => { |
||||
const res = await getUserInfoShequ(state.uid); |
||||
if (res.code === 200) { |
||||
state.user = res.data; |
||||
console.log(state.user); |
||||
} |
||||
}; |
||||
resGetUserInfoShequ(); |
||||
|
||||
return { |
||||
...toRefs(state), |
||||
}; |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.user-pop-index { |
||||
line-height: 1.5714285714285714; |
||||
} |
||||
.dr-nav-popover-inner-section { |
||||
padding: 20px 0; |
||||
border-bottom: 1px solid #e8eaed; |
||||
} |
||||
.dr-nav-popover-inner-section .avatar-wrapper { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
} |
||||
.dr-nav-popover-inner-section .avatar-wrapper .detail-wrapper { |
||||
width: 160px; |
||||
} |
||||
.dr-nav-popover-inner-section .avatar-wrapper .detail-wrapper .username-info { |
||||
width: 100%; |
||||
font-size: 14px; |
||||
color: #333; |
||||
color: var(--dr-text-black); |
||||
margin-bottom: 4px; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
.dr-nav-popover-inner-section .avatar-wrapper .detail-wrapper .uid-info { |
||||
color: #c5c7ce; |
||||
margin-bottom: 4px; |
||||
} |
||||
.ant-space { |
||||
display: inline-flex; |
||||
align-items: cente; |
||||
.ant-space-item { |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
.dr-nav-popover-inner-logo-big { |
||||
width: 72px; |
||||
height: 72px; |
||||
border-radius: 50%; |
||||
} |
||||
.col167 { |
||||
color: #1677ff !important; |
||||
} |
||||
.ant-row { |
||||
display: flex; |
||||
flex-flow: row wrap; |
||||
min-width: 0; |
||||
} |
||||
.ant-col:not(:nth-last-of-type(-n + 2)) { |
||||
margin-bottom: 16px !important; |
||||
display: block; |
||||
flex: 0 0 50%; |
||||
max-width: 50%; |
||||
} |
||||
.dr-nav-popover-inner-section .section-item { |
||||
color: #8097ad; |
||||
font-size: 14px; |
||||
cursor: pointer; |
||||
transition: all 0.3s; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.dr-nav-popover-inner-section .section-item-icon { |
||||
width: 16px; |
||||
height: 16px; |
||||
margin-right: 5px; |
||||
} |
||||
.dr-nav-popover-inner-section:not(:first-child) { |
||||
padding: 15px 0; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,905 @@
|
||||
<template> |
||||
<header class="header" id="myheader"> |
||||
<div class="wrapper"> |
||||
<!-- left --> |
||||
<nav class="nav"> |
||||
<a class="nav-item item-lf" v-for="item in leftMenu" :key="item.id" :href="item.url" :class="{ active: item.name === '学院' }">{{ item.name }}</a> |
||||
</nav> |
||||
|
||||
<!-- center --> |
||||
<div class="search-box flex-1"> |
||||
<form class="searchform" method="get" autocomplete="off" action="https://search.fanruan.com/?q=" target="_blank" v-if="is_search"> |
||||
<div class="el-input el-input--small el-input--suffix topsearch flex-1"> |
||||
<input class="el-input__inner" name="q" type="text" autocomplete="off" tabindex="" aria-label="" placeholder="请输入关键词" @focus="isfocus('focus')" @blur="isfocus('blur')" v-on:input="isinput" /> |
||||
<button class="el-input__suffix search_sub" type="submit" :class="{ active_btn: kwbtn }"> |
||||
<span class="el-input__suffix-inner search_btn"> |
||||
<i class="iconfont icon-icon_icon-53 icon-ss" :class="{ active: kwfocus }"></i> |
||||
</span> |
||||
</button> |
||||
</div> |
||||
</form> |
||||
|
||||
<div class="searchform" v-else> |
||||
<div class="el-input el-input--small el-input--suffix topsearch flex-1"> |
||||
<div class="el-input__inner" style="color: #B5C1D0; line-height: 30px;">登录后方可搜索</div> |
||||
<button class="el-input__suffix search_sub" type="submit" :class="{ active_btn: kwbtn }"> |
||||
<span class="el-input__suffix-inner search_btn"> |
||||
<i class="iconfont icon-icon_icon-53 icon-ss" :class="{ active: kwfocus }"></i> |
||||
</span> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- rigt --> |
||||
<nav class="infomation"> |
||||
<template v-for="item in rightMenu" :key="item.id"> |
||||
<template v-if="!item.children"> |
||||
<a class="nav-item item-rt" :href="item.url">{{ item.name }}</a> |
||||
</template> |
||||
<template v-else> |
||||
<el-dropdown :show-timeout="0"> |
||||
<span class="el-dropdown-link item-rt"> {{ item.name }}<i class="el-icon-arrow-down el-icon--right"></i> </span> |
||||
<template #dropdown> |
||||
<el-dropdown-menu> |
||||
<el-dropdown-item v-for="child in item.children" :key="child.id" style="padding: 0;"> |
||||
<a class="nav-item" :href="child.url" style="display:block;">{{ child.name }}</a> |
||||
</el-dropdown-item> |
||||
</el-dropdown-menu> |
||||
</template> |
||||
</el-dropdown> |
||||
</template> |
||||
</template> |
||||
|
||||
<!-- <div class="app_qrcode_box"> |
||||
<el-dropdown trigger="hover"> |
||||
<div class="toptxt flex-1"> |
||||
<i class="el-dropdown-link iconfont icon-M-phone"></i> |
||||
<span>下载APP</span> |
||||
</div> |
||||
<template #dropdown> |
||||
<el-dropdown-menu> |
||||
<div class="qrcode-box"> |
||||
<div class="top-txt flex-4"> |
||||
<span>帆软社区APP</span> |
||||
<a href="https://bbs.fanruan.com/thread-135870-1-1.html" target="_blank">更新说明</a> |
||||
</div> |
||||
<img class="codeimg" width="162" |
||||
src="https://bbs.fanruan.com/source/plugin/app_download/img/new_ios_qrcode.png" /> |
||||
<div class="foot-txt-gift flex-4"> |
||||
<img class="img-gift" width="24" src="https://bbs.fanruan.com/static/img/icon_fundction_gift.png" /> |
||||
<a href="https://bbs.fanruan.com/thread-135868-1-1.html" target="_blank">连续签到,赢取千元大奖</a> |
||||
</div> |
||||
</div> |
||||
</el-dropdown-menu> |
||||
</template> |
||||
</el-dropdown> |
||||
</div> --> |
||||
|
||||
<div class="notice_box"> |
||||
<el-dropdown trigger="hover"> |
||||
<el-badge :is-dot="is_dot" class="item badge" type="danger"> |
||||
<i class="el-dropdown-link iconfont icon-icon_icon-66"></i> |
||||
</el-badge> |
||||
<template #dropdown> |
||||
<el-dropdown-menu class="i_item"> |
||||
<a :href="com_shequ_url + '/home.php?mod=space&do=notice&view=system'" target="_blank"> |
||||
<el-dropdown-item class="clearfix"> |
||||
<span class="i_txt">我的通知</span> |
||||
<el-badge class="mark" :value="u_notice" type="danger" /> |
||||
</el-dropdown-item> |
||||
</a> |
||||
</el-dropdown-menu> |
||||
</template> |
||||
</el-dropdown> |
||||
</div> |
||||
|
||||
<el-dropdown v-if="com_user_token" class="personal" ref="userDropdown"> |
||||
<span class="el-dropdown-link"> |
||||
<el-avatar :src="avatarUrl + uid" :size="32" fit="cover" icon="el-icon-user-solid"></el-avatar> |
||||
<i class="el-icon-arrow-down el-icon--right"></i> |
||||
</span> |
||||
<template #dropdown> |
||||
<el-dropdown-menu class="avatar_down"> |
||||
<el-dropdown-item v-for="(item, i) in avatarMenu.baseMenu" :key="i" :icon="item.icon"> |
||||
<a class="item-nav" :href="item.url">{{ item.name }}</a> |
||||
</el-dropdown-item> |
||||
<el-divider></el-divider> |
||||
|
||||
<el-dropdown-item v-for="(item, i) in avatarMenu.navMenu" :key="i" :icon="item.icon"> |
||||
<a class="item-nav" :href="item.url">{{ item.name }}</a> |
||||
</el-dropdown-item> |
||||
<el-divider></el-divider> |
||||
<el-dropdown> |
||||
<teacherApplyModal :uid="uid" /> |
||||
</el-dropdown> |
||||
<el-divider></el-divider> |
||||
<el-dropdown-item v-for="(item, i) in avatarMenu.adminMenu" :key="i" :icon="item.icon"> |
||||
<a class="item-nav" :href="item.url">{{ item.name }}</a> |
||||
</el-dropdown-item> |
||||
<el-divider v-if="avatarMenu.adminMenu?.length > 0"></el-divider> |
||||
|
||||
<el-dropdown-item v-for="(item, i) in avatarMenu.footerMenu" :key="i" :icon="item.icon"> |
||||
<a class="item-nav" :href="item.url">{{ item.name }}</a> |
||||
</el-dropdown-item> |
||||
</el-dropdown-menu> |
||||
</template> |
||||
</el-dropdown> |
||||
<div v-else class="loginReg flex-1"> |
||||
<a class="loginbtn" :href="com_id_url + '/cas/login?service=' + com_edu_url + '/v1/user/cas/edu/login/?redirect=' + $route.fullPath">登录</a> |
||||
</div> |
||||
</nav> |
||||
</div> |
||||
</header> |
||||
|
||||
<div class="edu-nav-box" v-if="isPc"> |
||||
<div class="mainbox"> |
||||
<div class="edu-head"> |
||||
<router-link class="logo" to="/"><img src="@/assets/logo.png"/></router-link> |
||||
<div class="edu-nav"> |
||||
<router-link to="/">首页</router-link> |
||||
<router-link to="/studypath/finereport" :class="$route.meta.active == 'studypath' ? 'active' : ''">学习路径 </router-link> |
||||
<router-link to="/video" :class="$route.meta.active == 'video' ? 'active' : ''">视频课</router-link> |
||||
<router-link to="/class" :class="$route.meta.active == 'class' ? 'active' : ''">学习班</router-link> |
||||
<router-link to="/live" :class="$route.meta.active == 'live' ? 'active' : ''">直播</router-link> |
||||
<router-link to="/cityclass" :class="$route.meta.active == 'cityclass' ? 'active' : ''">城市课堂</router-link> |
||||
<!-- <router-link to="/more" :class="$route.meta.active == 'more' ? 'active' : ''">资源导航</router-link> --> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- 移动端 --> |
||||
<div class="edu-nav-box-m dn" v-else> |
||||
<!-- search --> |
||||
<div class="ss-main-box dn" :class="{ showss: ssOpen }"> |
||||
<div class="search-box-m"> |
||||
<form class="searchform" method="get" autocomplete="off" action="https://search.fanruan.com/?q=" target="_blank" v-if="is_search"> |
||||
<div class="el-input el-input--small el-input--suffix topsearch flex-1"> |
||||
<input class="el-input__inner" name="q" type="text" autocomplete="off" tabindex="" aria-label="" placeholder="请输入关键词" @focus="isfocus('focus')" @blur="isfocus('blur')" v-on:input="isinput" /> |
||||
<button class="el-input__suffix search_sub" type="submit" :class="{ active_btn: kwbtn }"> |
||||
<span class="el-input__suffix-inner search_btn"> |
||||
<i class="iconfont icon-search icon-ss" :class="{ active: kwfocus }"></i> |
||||
</span> |
||||
</button> |
||||
</div> |
||||
</form> |
||||
|
||||
<div class="searchform" v-else> |
||||
<div class="el-input el-input--small el-input--suffix topsearch flex-1"> |
||||
<div class="el-input__inner" style="color: #B5C1D0; line-height: 30px;">登录后方可搜索</div> |
||||
<button class="el-input__suffix search_sub" type="submit" :class="{ active_btn: kwbtn }"> |
||||
<span class="el-input__suffix-inner search_btn"> |
||||
<i class="iconfont icon-search icon-ss" :class="{ active: kwfocus }"></i> |
||||
</span> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="m-box flex-2"> |
||||
<div class="flex-3 flex-1"> |
||||
<!-- left --> |
||||
<div @click="drawer = true"> |
||||
<i class="iconfont icon-zhankai1 ff18" style="margin-right: 10px;"></i> |
||||
<span class="f18">帆软学院</span> |
||||
</div> |
||||
|
||||
<!-- right --> |
||||
<div class="flex-1"> |
||||
<!-- search-btn --> |
||||
<div class="ss-btn-m"> |
||||
<i v-if="!ssOpen" class="iconfont icon-search ff18 col617 cur-p" @click="funssOpen(false)"></i> |
||||
<i |
||||
v-else |
||||
class="iconfont icon-cuohao1 ff18 col617 cur-p" |
||||
@click=" |
||||
funssOpen(true); |
||||
isfocus('blur'); |
||||
" |
||||
></i> |
||||
</div> |
||||
|
||||
<el-dropdown v-if="com_user_token" class="personal" ref="userDropdown" trigger="click" style="margin-left: 26px;"> |
||||
<span class="el-dropdown-link"> |
||||
<el-avatar :src="avatarUrl + uid" :size="32" fit="cover" icon="el-icon-user-solid"></el-avatar> |
||||
</span> |
||||
<template #dropdown> |
||||
<el-dropdown-menu class="avatar_down"> |
||||
<el-dropdown-item v-for="(item, i) in avatarMenu.baseMenu" :key="i" :icon="item.icon"> |
||||
<a class="item-nav" :href="item.url">{{ item.name }}</a> |
||||
</el-dropdown-item> |
||||
<el-divider></el-divider> |
||||
|
||||
<el-dropdown-item v-for="(item, i) in avatarMenu.navMenu" :key="i" :icon="item.icon"> |
||||
<a class="item-nav" :href="item.url">{{ item.name }}</a> |
||||
</el-dropdown-item> |
||||
<el-divider></el-divider> |
||||
<el-dropdown> |
||||
<teacherApplyModal :uid="uid" /> |
||||
</el-dropdown> |
||||
<el-divider></el-divider> |
||||
<el-dropdown-item v-for="(item, i) in avatarMenu.adminMenu" :key="i" :icon="item.icon"> |
||||
<a class="item-nav" :href="item.url">{{ item.name }}</a> |
||||
</el-dropdown-item> |
||||
<el-divider v-if="avatarMenu.adminMenu?.length > 0"></el-divider> |
||||
|
||||
<el-dropdown-item v-for="(item, i) in avatarMenu.footerMenu" :key="i" :icon="item.icon"> |
||||
<a class="item-nav" :href="item.url">{{ item.name }}</a> |
||||
</el-dropdown-item> |
||||
</el-dropdown-menu> |
||||
</template> |
||||
</el-dropdown> |
||||
|
||||
<div v-else class="loginReg flex-1"> |
||||
<a class="loginbtn" :href="com_login_url">登录</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-drawer v-model="drawer" title="我的帆软" direction="ltr" custom-class="drawerHead" size="55%"> |
||||
<div class="lf-nav-box-m"> |
||||
<el-scrollbar style="height: 100%; width: 99%; position: absolute;"> |
||||
<el-menu default-active="2-1" class="el-menu-lf" @open="handleOpen" @close="handleClose"> |
||||
<li v-for="item in allMenu" :key="item.id"> |
||||
<el-submenu index="item.id" v-if="item.ident === 'edu'"> |
||||
<template #title> |
||||
<span class="col008 f16"> |
||||
{{ item.name }} |
||||
</span> |
||||
</template> |
||||
|
||||
<el-menu-item-group> |
||||
<el-menu-item index="2-1"> |
||||
<router-link to="/" class="lfnav-item" @click="drawer = false">学院首页</router-link> |
||||
</el-menu-item> |
||||
<el-menu-item index="2-2"> |
||||
<router-link to="/studypath/finereport" @click="drawer = false" class="lfnav-item" :class="$route.meta.active == 'studypath' ? 'active' : ''">学习路径 </router-link> |
||||
</el-menu-item> |
||||
<el-menu-item> |
||||
<router-link to="/video" @click="drawer = false" class="lfnav-item" :class="$route.meta.active == 'video' ? 'active' : ''">视频课 </router-link> |
||||
</el-menu-item> |
||||
<el-menu-item> |
||||
<router-link to="/class" @click="drawer = false" class="lfnav-item" :class="$route.meta.active == 'class' ? 'active' : ''">学习班 </router-link> |
||||
</el-menu-item> |
||||
<el-menu-item> |
||||
<router-link to="/live" @click="drawer = false" class="lfnav-item" :class="$route.meta.active == 'live' ? 'active' : ''">直播 </router-link> |
||||
</el-menu-item> |
||||
<el-menu-item> |
||||
<router-link to="/cityclass" @click="drawer = false" class="lfnav-item" :class="$route.meta.active == 'cityclass' ? 'active' : ''"> 城市课堂</router-link> |
||||
</el-menu-item> |
||||
<!-- <el-menu-item> |
||||
<router-link to="/more" @click="drawer = false" class="lfnav-item" :class="$route.meta.active == 'more' ? 'active' : ''">资源导航 </router-link> |
||||
</el-menu-item> --> |
||||
</el-menu-item-group> |
||||
</el-submenu> |
||||
|
||||
<el-menu-item :index="item.id" v-if="!item.children && item.ident != 'edu'"> |
||||
<template #title> |
||||
<a class="lfnav-item" :href="item.url">{{ item.name }}</a> |
||||
</template> |
||||
</el-menu-item> |
||||
|
||||
<el-submenu :index="item.id" v-else-if="item.ident != 'edu'"> |
||||
<template #title> |
||||
<span>{{ item.name }}</span> |
||||
</template> |
||||
<el-menu-item-group> |
||||
<el-menu-item v-for="child in item.children" :key="child.id"> |
||||
<a class="lfnav-item" :href="child.url">{{ child.name }}</a> |
||||
</el-menu-item> |
||||
</el-menu-item-group> |
||||
</el-submenu> |
||||
</li> |
||||
</el-menu> |
||||
</el-scrollbar> |
||||
</div> |
||||
</el-drawer> |
||||
</template> |
||||
<script> |
||||
import { defineComponent, reactive, toRefs, ref, getCurrentInstance } from "vue"; |
||||
import teacherApplyModal from "@/components/TeacherApply/TeacherApplyModal"; |
||||
import { getMenuList } from "@/api/nav"; |
||||
import { getNotice, avatarMenu } from "@/api/user"; |
||||
import store from "@/store"; |
||||
import { onBeforeRouteUpdate } from "vue-router"; |
||||
|
||||
export default defineComponent({ |
||||
components: { |
||||
teacherApplyModal, |
||||
}, |
||||
name: "Header", |
||||
setup() { |
||||
const { proxy } = getCurrentInstance(); |
||||
const state = reactive({ |
||||
isPc: document.body.clientWidth > 1200, |
||||
allMenu: [], |
||||
leftMenu: [], |
||||
rightMenu: [], |
||||
userInfo: {}, |
||||
kwfocus: 0, |
||||
kwbtn: 0, |
||||
u_notice: 0, |
||||
is_dot: false, |
||||
avatarMenu: [], |
||||
is_search: false, |
||||
drawer: false, |
||||
ssOpen: false, |
||||
avatarUrl: "https://bbs.fanruan.com/uc_server/avatar.php?uid=", |
||||
uid: 0, |
||||
wwwUrl: "", |
||||
}); |
||||
|
||||
state.wwwUrl = window.location.href; |
||||
onBeforeRouteUpdate((to) => { |
||||
state.wwwUrl = proxy.$root.com_edu_url + to.path; |
||||
}); |
||||
|
||||
window.addEventListener("resize", function() { |
||||
state.isPc = document.body.clientWidth > 1200; |
||||
}); |
||||
|
||||
const fetchMenuList = async () => { |
||||
const res = await getMenuList(); |
||||
if (res.code === 1) { |
||||
state.menuList = res.data; |
||||
const arr = res.data; |
||||
state.allMenu = arr; |
||||
arr.forEach((item) => { |
||||
if (item.position) { |
||||
state.rightMenu.push(item); |
||||
} else { |
||||
state.leftMenu.push(item); |
||||
} |
||||
}); |
||||
} |
||||
}; |
||||
fetchMenuList(); |
||||
|
||||
// 头像下拉菜单 |
||||
const fetchavatarMenu = async () => { |
||||
const res = await avatarMenu(); |
||||
if (res.code === 200) { |
||||
state.avatarMenu = res.data; |
||||
} |
||||
}; |
||||
|
||||
// 消息 |
||||
const resNotice = async () => { |
||||
const res = await getNotice(); |
||||
if (res.code === 200) { |
||||
state.u_notice = res.data.system; |
||||
if (state.u_notice > 0) { |
||||
state.is_dot = true; |
||||
} |
||||
} |
||||
}; |
||||
if (store.getters.get_uid) { |
||||
resNotice(); |
||||
state.uid = store.getters.get_uid; |
||||
state.is_search = true; |
||||
setTimeout(function() { |
||||
fetchavatarMenu(); |
||||
}, 500); |
||||
} else { |
||||
state.is_search = false; |
||||
} |
||||
|
||||
function isfocus(k) { |
||||
if (k == "focus") { |
||||
state.kwfocus = 1; |
||||
} else { |
||||
state.kwfocus = 0; |
||||
} |
||||
} |
||||
|
||||
function isinput(e) { |
||||
const { value } = e.target; |
||||
if (value) { |
||||
state.kwbtn = 1; |
||||
} else { |
||||
state.kwbtn = 0; |
||||
} |
||||
} |
||||
|
||||
function funssOpen(o) { |
||||
if (o == true) { |
||||
state.ssOpen = false; |
||||
} else { |
||||
state.ssOpen = true; |
||||
} |
||||
} |
||||
|
||||
return { |
||||
...toRefs(state), |
||||
input: ref(""), |
||||
isfocus, |
||||
isinput, |
||||
funssOpen, |
||||
}; |
||||
}, |
||||
}); |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.el-divider--horizontal { |
||||
margin: 8px 0; |
||||
} |
||||
|
||||
.app_qrcode_box { |
||||
.toptxt { |
||||
i { |
||||
font-size: 20px; |
||||
margin-top: 3px; |
||||
} |
||||
|
||||
span { |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.qrcode-box { |
||||
width: 220px; |
||||
font-size: 14px; |
||||
|
||||
.codeimg { |
||||
display: block; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.top-txt { |
||||
height: 40px; |
||||
|
||||
a { |
||||
color: #8c8c8c; |
||||
margin-left: 12px; |
||||
} |
||||
} |
||||
|
||||
.foot-txt-gift { |
||||
height: 40px; |
||||
|
||||
a { |
||||
color: #ff7a45; |
||||
margin-left: 8px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.header { |
||||
height: 48px; |
||||
background: #fff; |
||||
padding: 0 40px 0 20px; |
||||
|
||||
.wrapper { |
||||
height: 100%; |
||||
background: #fff; |
||||
min-width: 1100px; |
||||
|
||||
display: flex; |
||||
align-items: flex-start; |
||||
justify-content: space-between; |
||||
|
||||
.nav { |
||||
min-width: 400px; |
||||
} |
||||
|
||||
.nav { |
||||
position: relative; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 16px; |
||||
|
||||
.nav-item { |
||||
font-size: 16px; |
||||
color: #333; |
||||
|
||||
&:hover { |
||||
color: #0082fc; |
||||
} |
||||
} |
||||
|
||||
.item-lf { |
||||
margin-left: 26px; |
||||
|
||||
&.active { |
||||
color: #0082fc; |
||||
} |
||||
} |
||||
|
||||
.item-rt { |
||||
margin-right: 26px; |
||||
} |
||||
} |
||||
|
||||
.infomation { |
||||
position: relative; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: flex-end; |
||||
font-size: 16px; |
||||
|
||||
.nav-item { |
||||
font-size: 16px; |
||||
color: #333; |
||||
|
||||
&:hover { |
||||
color: #0082fc; |
||||
} |
||||
} |
||||
|
||||
.item-lf { |
||||
margin-right: 20px; |
||||
} |
||||
|
||||
.item-rt { |
||||
margin-right: 26px; |
||||
} |
||||
|
||||
::v-deep .el-dropdown.personal { |
||||
width: 32px; |
||||
height: 32px; |
||||
margin-left: 24px; |
||||
border-radius: 50%; |
||||
overflow: hidden; |
||||
z-index: 99; |
||||
} |
||||
} |
||||
|
||||
.search-box { |
||||
height: 48px; |
||||
margin: 0 auto; |
||||
width: 40%; |
||||
transition: all 0.2s; |
||||
|
||||
.searchform { |
||||
width: 100%; |
||||
} |
||||
|
||||
.search_sub { |
||||
border-radius: 0px 20px 20px 0px; |
||||
height: 32px; |
||||
cursor: pointer; |
||||
background: none; |
||||
border: none; |
||||
right: 0; |
||||
} |
||||
|
||||
.search_btn { |
||||
display: inline-block; |
||||
color: #617288; |
||||
width: 48px; |
||||
|
||||
.active { |
||||
color: #0082fc; |
||||
} |
||||
} |
||||
|
||||
.active_btn { |
||||
background-color: #0082fc; |
||||
|
||||
.icon-ss { |
||||
color: #fff; |
||||
} |
||||
} |
||||
|
||||
.el-input__inner { |
||||
border: none; |
||||
border: 1px solid #eef3fa; |
||||
background-color: #eef3fa; |
||||
border-radius: 100px; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.el-input__inner:focus { |
||||
border: 1px solid #0082fc; |
||||
background-color: #fff; |
||||
} |
||||
|
||||
::placeholder { |
||||
color: #8496ab !important; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
/*响应式-小屏幕*/ |
||||
@media screen and (max-width: 1800px) { |
||||
.search-box { |
||||
width: 36% !important; |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 1700px) { |
||||
.search-box { |
||||
width: 32% !important; |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 1600px) { |
||||
.search-box { |
||||
width: 28% !important; |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 1500px) { |
||||
.search-box { |
||||
width: 25% !important; |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 1400px) { |
||||
.search-box { |
||||
width: 20% !important; |
||||
} |
||||
} |
||||
|
||||
@media screen and (max-width: 1300px) { |
||||
.search-box { |
||||
width: 15% !important; |
||||
} |
||||
} |
||||
|
||||
.el-popper { |
||||
.nav-item { |
||||
padding: 0 20px; |
||||
color: #8496ab; |
||||
|
||||
&:hover { |
||||
color: #0082fc; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.el-dropdown-selfdefine { |
||||
font-size: 16px; |
||||
color: #333; |
||||
} |
||||
|
||||
.avatar_down { |
||||
width: 234px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
flex-wrap: wrap; |
||||
|
||||
.item-nav { |
||||
display: inline-block; |
||||
} |
||||
} |
||||
|
||||
.avatar_down li:hover { |
||||
background: none; |
||||
} |
||||
|
||||
.loginReg { |
||||
padding-left: 26px; |
||||
|
||||
span { |
||||
color: #ddd; |
||||
padding: 0 8px; |
||||
} |
||||
|
||||
.loginbtn { |
||||
border-radius: 20px; |
||||
font-size: 14px; |
||||
color: #fff; |
||||
padding: 5px 20px; |
||||
background: linear-gradient(270deg, #0082fc 0%, #00bbfe 100%); |
||||
|
||||
@keyframes gradientBG { |
||||
0% { |
||||
background-position: 0% 50%; |
||||
} |
||||
|
||||
50% { |
||||
background-position: 100% 50%; |
||||
} |
||||
|
||||
100% { |
||||
background-position: 0% 50%; |
||||
} |
||||
} |
||||
|
||||
&:hover { |
||||
color: #fff; |
||||
background: linear-gradient(60deg, #0070d8, #0082fc, #00bbfe, #0ec4fc, #0082fc, #0070d8); |
||||
background-size: 400% 400%; |
||||
animation: gradientBG 4s ease infinite; |
||||
} |
||||
} |
||||
|
||||
a { |
||||
color: #8496ab; |
||||
} |
||||
|
||||
a:hover { |
||||
color: #0082fc; |
||||
} |
||||
} |
||||
|
||||
.notice_box { |
||||
padding: 4px 0 0 0px; |
||||
|
||||
.icon-icon_icon-66 { |
||||
font-size: 26px; |
||||
color: #333; |
||||
margin: 0; |
||||
} |
||||
} |
||||
|
||||
.i_item { |
||||
.i_txt { |
||||
padding-right: 30px; |
||||
} |
||||
} |
||||
|
||||
::v-deep .el-badge__content { |
||||
background-color: #ff3d23 !important; |
||||
border: none; |
||||
margin: 6px 4px 0 0; |
||||
} |
||||
</style> |
||||
|
||||
<style lang="scss"> |
||||
.edu-head { |
||||
height: 70px; |
||||
background: #fff; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
|
||||
.edu-head .logo img { |
||||
height: 34px; |
||||
} |
||||
|
||||
.edu-nav a { |
||||
margin-left: 40px; |
||||
font-size: 18px; |
||||
} |
||||
|
||||
.edu-nav-box { |
||||
background: #fff; |
||||
box-shadow: 0px 4px 6px -3px rgba(179, 193, 211, 0.3); |
||||
z-index: 6; |
||||
position: relative; |
||||
} |
||||
|
||||
.el-dropdown-menu__item { |
||||
min-width: 117px; |
||||
} |
||||
</style> |
||||
|
||||
<style lang="scss"> |
||||
/*响应式-移动端*/ |
||||
.edu-nav-box-m { |
||||
background: #fff; |
||||
box-shadow: 0px 4px 6px -3px rgba(179, 193, 211, 0.3); |
||||
z-index: 6; |
||||
position: relative; |
||||
height: 50px; |
||||
} |
||||
|
||||
.m-box { |
||||
height: 50px; |
||||
padding: 0 20px; |
||||
} |
||||
|
||||
.ss-main-box { |
||||
position: absolute; |
||||
background-color: #fff; |
||||
width: 100%; |
||||
padding: 0 20px; |
||||
transition: all 0.3s; |
||||
margin-top: 0; |
||||
box-shadow: 0px 4px 6px -3px rgba(179, 193, 211, 0.3); |
||||
z-index: -1px; |
||||
} |
||||
|
||||
.showss { |
||||
transition: all 0.3s; |
||||
margin-top: 50px; |
||||
display: block !important; |
||||
} |
||||
|
||||
.search-box-m { |
||||
height: 48px; |
||||
padding-top: 3px; |
||||
width: 100%; |
||||
transition: all 0.2s; |
||||
|
||||
.searchform { |
||||
width: 100%; |
||||
} |
||||
|
||||
.search_sub { |
||||
border-radius: 0px 20px 20px 0px; |
||||
height: 32px; |
||||
cursor: pointer; |
||||
background: none; |
||||
border: none; |
||||
right: 0; |
||||
} |
||||
|
||||
.search_btn { |
||||
display: inline-block; |
||||
color: #617288; |
||||
width: 48px; |
||||
|
||||
.active { |
||||
color: #0082fc; |
||||
} |
||||
} |
||||
|
||||
.active_btn { |
||||
background-color: #0082fc; |
||||
|
||||
.icon-ss { |
||||
color: #fff; |
||||
} |
||||
} |
||||
|
||||
.el-input__inner { |
||||
border: none; |
||||
border: 1px solid #eef3fa; |
||||
background-color: #eef3fa; |
||||
border-radius: 100px; |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.el-input__inner:focus { |
||||
border: 1px solid #0082fc; |
||||
background-color: #fff; |
||||
} |
||||
|
||||
::placeholder { |
||||
color: #8496ab !important; |
||||
} |
||||
} |
||||
|
||||
/* 导航 */ |
||||
.lfnav-item { |
||||
display: block; |
||||
font-size: 15px; |
||||
} |
||||
|
||||
.drawerHead { |
||||
text-align: left; |
||||
|
||||
.el-submenu__icon-arrow, |
||||
.el-icon-arrow-down, |
||||
.el-icon-close { |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.el-drawer__header { |
||||
margin-bottom: 0; |
||||
border-bottom: 1px solid #eee; |
||||
padding-top: 10px; |
||||
padding-bottom: 10px; |
||||
font-weight: 700; |
||||
color: #333; |
||||
letter-spacing: 2px; |
||||
} |
||||
|
||||
.el-menu-item, |
||||
.el-submenu__title { |
||||
height: 48px; |
||||
line-height: 48px; |
||||
} |
||||
|
||||
.el-menu-item-group__title { |
||||
padding: 0; |
||||
} |
||||
|
||||
.el-menu { |
||||
border: none; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,305 @@
|
||||
<template> |
||||
<a :href="com_edu_url + '/v2'" class="til f16 fw600" v-if="isTeacher" target="_blank"> |
||||
<div class="item-nav apply_trigger_btn"> |
||||
<i class="iconfont icon-icon_icon-37" /> |
||||
讲师工作台 |
||||
</div> |
||||
</a> |
||||
<div @click="showModal" class="item-nav apply_trigger_btn" v-else> |
||||
<i class="iconfont icon-icon_icon-37" /> |
||||
讲师入驻 |
||||
<span class="apply_trigger_btn_watting_text" v-if="form.teacherId && form.status === 0">审核中</span> |
||||
</div> |
||||
<el-dialog custom-class="teacher-apply-dialog" v-model="qrDialogVisible"> |
||||
<template #title> |
||||
<p class="success-dialog__title"> |
||||
<img src="../../assets/teacherapply/watting.png" class="icon" /> |
||||
申请已提交，待管理员审核 |
||||
</p> |
||||
</template> |
||||
<div> |
||||
<p>请联系管理员 放大镜，微信号：frfangdajing</p> |
||||
<img src="@/assets/teacherapply/fangdajing_qrcode.png" class="qrimg"/> |
||||
<p>微信扫一扫添加管理员微信</p> |
||||
<el-button class="success-dialog__btn" type="primary" @click="qrDialogVisible = false">我知道了</el-button> |
||||
</div> |
||||
</el-dialog> |
||||
<el-dialog :width="640" :close-on-click-modal="false" custom-class="teacher-apply-dialog" v-model="dialogVisible" title="申请讲师入驻"> |
||||
<div class="teacher-apply-dialog_tips"> |
||||
<i class="iconfont icon-tanhao1" />提交申请后，请联系放大镜，微信号：frfangdajing</div> |
||||
<div class="teacher-apply-dialog_form"> |
||||
<el-form label-suffix=":" :rules="rules" :model="form" ref="ruleFormRef"> |
||||
<el-form-item label="讲师名称" :label-width="formLabelWidth" required prop="name"> |
||||
<el-input show-word-limit v-model="form.name" autocomplete="off" placeholder="请输入" maxlength="50"/> |
||||
</el-form-item> |
||||
<el-form-item label="讲师头像" :label-width="formLabelWidth" prop="avatar"> |
||||
<teacherApplyUpload @onDelete="deleteAvatar" @onUpload="handleFileSuccess" :default-avatar="form.avatar"/> |
||||
</el-form-item> |
||||
<el-form-item label="联系电话" :label-width="formLabelWidth" prop="phone"> |
||||
<div class="mobile_row"> |
||||
{{form.avatar}} |
||||
<span v-if="form.phone" class="mobile_number"> |
||||
{{form.phone}} |
||||
</span> |
||||
<span v-else>请先绑定手机号</span> |
||||
仅对管理员可见，便于管理员联系您 |
||||
</div> |
||||
<div class="mobile_row tips_text" v-if="form.phone"> |
||||
手机号不对？请至<a :href="com_id_url+'/#/info/'" target="_blank">账号中心</a>修改 |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item label="讲师介绍" :label-width="formLabelWidth" required prop="introduction"> |
||||
<el-input type="textarea" show-word-limit v-model="form.introduction" autocomplete="off" placeholder="请输入" maxlength="500"/> |
||||
</el-form-item> |
||||
</el-form> |
||||
</div> |
||||
<template #footer> |
||||
<span class="dialog-footer"> |
||||
<el-button @click="dialogVisible = false">取消</el-button> |
||||
<el-button :loading="submitLoading" type="primary" @click="submitForm(ruleFormRef)" |
||||
>确定</el-button |
||||
> |
||||
</span> |
||||
</template> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script lang="ts"> |
||||
import {defineComponent, reactive, ref} from 'vue' |
||||
import teacherApplyUpload from './Upload/TeacherApplyUpload'; |
||||
import { ElMessage } from 'element-plus' |
||||
import { addTeacher, getTeacherInfo, editTeacher, judgeIsTeacher } from "../../api/teacher" |
||||
export default defineComponent({ |
||||
name: 'TeacherApplyModal', |
||||
props:{ |
||||
uid:undefined |
||||
}, |
||||
components:{ |
||||
teacherApplyUpload |
||||
}, |
||||
setup(props) { |
||||
const isTeacher = ref(false); |
||||
const dialogVisible = ref(false); |
||||
const qrDialogVisible = ref(false); |
||||
const submitLoading = ref(false); |
||||
const ruleFormRef = ref(); |
||||
const form = reactive({ |
||||
status: 0, |
||||
teacherId: '', |
||||
name: '', |
||||
phone: '', |
||||
introduction: '', |
||||
avatar:'', |
||||
}) |
||||
const judgeIfTeacher = async () => { |
||||
const judgeRes = await judgeIsTeacher(props.uid) |
||||
if (judgeRes.code === 200){ |
||||
isTeacher.value = judgeRes.data; |
||||
} |
||||
} |
||||
judgeIfTeacher(); |
||||
const getInfo = async () => { |
||||
console.log('获取用户资料'); |
||||
const res = await getTeacherInfo(); |
||||
if (res.code === 200 && res.data){ |
||||
const {name = '', avatar = '',introduction = '', id= '', phone=''} = res.data; |
||||
form.phone = phone; |
||||
form.name = name; |
||||
form.avatar = avatar; |
||||
form.introduction = introduction; |
||||
form.teacherId = id; |
||||
form.status=res.data.approvalState; |
||||
} |
||||
} |
||||
const showModal = () => { |
||||
getInfo(); |
||||
dialogVisible.value = true |
||||
} |
||||
// 获取讲师资料 |
||||
const rules = reactive({ |
||||
name: [ |
||||
{ required: true, message: '请输入讲师姓名', trigger: 'blur' }, |
||||
{ min: 0, max: 50, message: '字符长度在0-50', trigger: 'blur' }, |
||||
], |
||||
introduction: [ |
||||
{ required: true, message: '请输入讲师介绍', trigger: 'blur' }, |
||||
{ min: 0, max: 500, message: '字符长度在0-500', trigger: 'blur' }, |
||||
], |
||||
phone: [ |
||||
{ required: true, message: '请填写手机号', trigger: 'blur' }, |
||||
], |
||||
}) |
||||
const handleFileSuccess = (response) => { |
||||
console.log('上传成功收到回调'); |
||||
console.log(response); |
||||
form.avatar = response.path; |
||||
} |
||||
const deleteAvatar = () => { |
||||
form.avatar = ''; |
||||
} |
||||
|
||||
const submitForm = async (formEl) => { |
||||
if (!formEl) return |
||||
await formEl.validate(async (valid) => { |
||||
if (valid) { |
||||
console.log('submit!'); |
||||
console.log(form); |
||||
submitLoading.value=true; |
||||
try { |
||||
let res; |
||||
if (form.teacherId){ |
||||
res = await editTeacher(form.teacherId,{...form}); |
||||
} else { |
||||
res = await addTeacher({...form}); |
||||
} |
||||
if (res.code === 200 && res.message === 'success'){ |
||||
submitLoading.value=false; |
||||
dialogVisible.value = false; |
||||
qrDialogVisible.value=true; |
||||
} else { |
||||
ElMessage({ |
||||
message: '提交申请失败，请稍后重试', |
||||
type: 'warning', |
||||
}) |
||||
submitLoading.value=false; |
||||
} |
||||
} catch (e) { |
||||
ElMessage({ |
||||
message: '提交申请失败，请稍后重试', |
||||
type: 'warning', |
||||
}) |
||||
submitLoading.value=false; |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
return { |
||||
isTeacher, |
||||
dialogVisible, |
||||
form, |
||||
ruleFormRef, |
||||
formLabelWidth: 140, |
||||
submitForm, |
||||
rules, |
||||
qrDialogVisible, |
||||
submitLoading, |
||||
handleFileSuccess, |
||||
deleteAvatar, |
||||
showModal, |
||||
} |
||||
} |
||||
}) |
||||
</script> |
||||
<style lang="scss"> |
||||
.apply_trigger_btn{ |
||||
font-size: 14px; |
||||
font-weight: 400; |
||||
color: #606266; |
||||
cursor: pointer; |
||||
display: flex; |
||||
align-items: center; |
||||
margin: 10px 0; |
||||
margin-left: 20px; |
||||
user-select: none; |
||||
i{ |
||||
margin-right: 5px; |
||||
} |
||||
&:hover{ |
||||
color: #0082FC; |
||||
} |
||||
&_watting_text{ |
||||
color: #FFA940; |
||||
margin-left: 5px; |
||||
} |
||||
} |
||||
.teacher-apply-dialog{ |
||||
&_tips{ |
||||
background-color: #FFFBE6; |
||||
height: 40px; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 14px; |
||||
color: #515a6e; |
||||
padding-left: 24px; |
||||
i{ |
||||
margin-right: 16px; |
||||
color: #FFA940; |
||||
} |
||||
} |
||||
.el-dialog__body{ |
||||
padding: 0; |
||||
} |
||||
.el-dialog__header{ |
||||
text-align: left; |
||||
} |
||||
.el-dialog__footer{ |
||||
border-top:1px solid #E8E8E8; |
||||
padding: 10px 16px; |
||||
} |
||||
.success-dialog__title{ |
||||
font-size: 16px; |
||||
font-weight: bold; |
||||
color: #17243e; |
||||
line-height: 22px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
.icon{ |
||||
margin-right: 10px; |
||||
width: 20px; |
||||
height: 20px; |
||||
} |
||||
} |
||||
.success-dialog__btn{ |
||||
margin: 24px 0; |
||||
} |
||||
.qrimg{ |
||||
margin-top: 16px; |
||||
width: 115px; |
||||
height: 115px; |
||||
margin-bottom: 8px; |
||||
} |
||||
&_form{ |
||||
padding-left: 24px; |
||||
padding-right: 120px; |
||||
padding-top: 16px; |
||||
.tips_text{ |
||||
color: #c5c7ce; |
||||
} |
||||
.el-upload-dragger{ |
||||
border: none; |
||||
width: auto; |
||||
height: auto; |
||||
//position: relative; |
||||
//right: 25px; |
||||
} |
||||
.el-upload__tip{ |
||||
color: #c5c7ce; |
||||
margin-top: 0; |
||||
text-align: left; |
||||
line-height: 20px; |
||||
flex: 1; |
||||
.delete_btn{ |
||||
color: #0082fc; |
||||
cursor: pointer; |
||||
margin-top: 20px; |
||||
&:hover{ |
||||
opacity: 0.6; |
||||
} |
||||
} |
||||
} |
||||
.mobile_row{ |
||||
display: flex; |
||||
align-items: center; |
||||
font-size:14px; |
||||
a{ |
||||
color: #0082FC; |
||||
} |
||||
.mobile_number{ |
||||
color: #262626; |
||||
margin-right: 10px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue