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