Skip to content

L
learn-online-pc
提交 25ab3863 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

update

上级 aaf71072
隐藏空白字符变更
内嵌 并排
正在显示 包含 112 行增加 和 73 行删除
src/components/learnSysLayout/sidebar.vue
浏览文件 @ 25ab3863
<template>
<el-aside :style="[obj.sidebarStyle]">
<el-menu :default-active="defaultActive" :collapse="obj.status" :default-openeds="['1', '2']" @select="curSelect">
<el-menu-item index="0" class="my-account">
<div class="pic" @click="goUpdatePic">
<div class="set-pic">{{ $t('components.learnSysLayout.sideBar.updatePic') }}</div>
<template v-if="UserInfo.avatar">
<img :src="UserInfo.avatar" :alt="$t('components.learnSysLayout.sideBar.updateAvatar')">
</template>
<template v-else>
<img src="https://webapp-pub.ezijing.com/weapp/share/default.jpg" :alt="$t('components.learnSysLayout.sideBar.updateAvatar')">
</template>
</div>
<el-button type="text" class="com-txt set-pwd" @click="goSetPwd">{{ $t('components.learnSysLayout.sideBar.updatePwd') }}</el-button>
<el-button type="text" class="com-txt out-login" @click="goOutLogin">{{ $t('components.learnSysLayout.sideBar.outLogin') }}</el-button>
</el-menu-item>
<template v-for="(item, index) in headerData">
<template v-if="item.children && item.children.length > 0">
<el-submenu v-bind:key="index" :index="item.index">
<template slot="title"><i :class="item.iconClass"></i><span slot="title">{{item.name}}</span></template>
<template v-for="(_item, _index) in item.children">
<el-menu-item v-bind:key="_index" :index="_item.index" @click="goPages(_item.index)">{{_item.name}}</el-menu-item>
<el-aside :style="[obj.sidebarStyle]">
<el-menu :default-active="defaultActive" :collapse="obj.status" :default-openeds="['1', '2']" @select="curSelect">
<el-menu-item index="0" class="my-account">
<div class="pic" @click="goUpdatePic">
<div class="set-pic">{{ $t('components.learnSysLayout.sideBar.updatePic') }}</div>
<template v-if="!UserInfo.avatar">
<img :src="UserInfo.avatar" :alt="$t('components.learnSysLayout.sideBar.updateAvatar')" />
</template>
</el-submenu>
</template>
<template v-else>
<template v-if="item.index === '3'">
<el-menu-item v-bind:key="index" :index="item.index" @click="goPages(item.index)" v-if="isExamination">
<i :class="item.iconClass"></i><span slot="title">{{item.name}}</span>
</el-menu-item>
<template v-else>
<img
style="border-radius: 0;"
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/weapp/share/paa/paa-learn-logo.png"
:alt="$t('components.learnSysLayout.sideBar.updateAvatar')"
/>
</template>
</div>
<el-button type="text" class="com-txt set-pwd" @click="goSetPwd">{{
$t('components.learnSysLayout.sideBar.updatePwd')
}}</el-button>
<el-button type="text" class="com-txt out-login" @click="goOutLogin">{{
$t('components.learnSysLayout.sideBar.outLogin')
}}</el-button>
</el-menu-item>
<template v-for="(item, index) in headerData">
<template v-if="item.children && item.children.length > 0">
<el-submenu v-bind:key="index" :index="item.index">
<template slot="title"
><i :class="item.iconClass"></i><span slot="title">{{ item.name }}</span></template
>
<template v-for="(_item, _index) in item.children">
<el-menu-item v-bind:key="_index" :index="_item.index" @click="goPages(_item.index)">{{
_item.name
}}</el-menu-item>
</template>
</el-submenu>
</template>
<template v-else>
<el-menu-item v-bind:key="index" :index="item.index" @click="goPages(item.index)">
<i :class="item.iconClass"></i><span slot="title">{{item.name}}</span>
</el-menu-item>
<template v-if="item.index === '3'">
<el-menu-item v-bind:key="index" :index="item.index" @click="goPages(item.index)" v-if="isExamination">
<i :class="item.iconClass"></i><span slot="title">{{ item.name }}</span>
</el-menu-item>
</template>
<template v-else>
<el-menu-item v-bind:key="index" :index="item.index" @click="goPages(item.index)">
<i :class="item.iconClass"></i><span slot="title">{{ item.name }}</span>
</el-menu-item>
</template>
</template>
</template>
</template>
</el-menu>
<div class="side-move"
:style="{left: (obj.isMouseDown ? 0 : (parseInt(obj.sidebarStyle.width)-2+'px')), width: (obj.isMouseDown ? obj.containerStyle.width : '5px')}"
v-if="obj.sidebarStyle.width !== 'auto'"
@mousedown="beforeMove"
@mousemove="moving"
@mouseup="afterMove"
></div>
</el-aside>
</el-menu>
<div
class="side-move"
:style="{
left: obj.isMouseDown ? 0 : parseInt(obj.sidebarStyle.width) - 2 + 'px',
width: obj.isMouseDown ? obj.containerStyle.width : '5px'
}"
v-if="obj.sidebarStyle.width !== 'auto'"
@mousedown="beforeMove"
@mousemove="moving"
@mouseup="afterMove"
></div>
</el-aside>
</template>
<script>
......@@ -57,15 +73,23 @@ export default {
*/
obj: { type: Object, require: true }
},
data () {
data() {
const _global = this.$GLOBAL
const _path = (_global && _global.sidebar && _global.sidebar.defaultPath) || this.$route.path || '/'
let defaultActive = ''
switch (_path) {
case '/app/tips/learning-tips': defaultActive = '1-1'; break
case '/app/tips/examina-tips': defaultActive = '1-2'; break
case '/app/learn/course': defaultActive = '2'; break
case '/app/examination/my-examination': defaultActive = '3'; break
case '/app/tips/learning-tips':
defaultActive = '1-1'
break
case '/app/tips/examina-tips':
defaultActive = '1-2'
break
case '/app/learn/course':
defaultActive = '2'
break
case '/app/examination/my-examination':
defaultActive = '3'
break
}
return {
isExamination: !!parseInt(window.G.UserInfo.student_info.is_open_examination),
......@@ -108,7 +132,7 @@ export default {
]
}
},
mounted () {
mounted() {
this.defineEvent()
// this.showHeaderData()
},
......@@ -136,7 +160,11 @@ export default {
var arrList = []
var obj
if (Number(isOpenExamination) === 0 && Number(isOpenExaminationNotes) === 0 && (Number(isOpenTextbookLearning) || Number(isOpenRequiredCourse) || Number(isOpenXxtendedCourse))) {
if (
Number(isOpenExamination) === 0 &&
Number(isOpenExaminationNotes) === 0 &&
(Number(isOpenTextbookLearning) || Number(isOpenRequiredCourse) || Number(isOpenXxtendedCourse))
) {
this.headerData = this.arrHeader(this.headerData).filter(k => k.index !== '1')
if (this.defaultActive === '1-1' || this.defaultActive === '1-2') {
this.defaultActive = '2'
......@@ -165,13 +193,16 @@ export default {
this.$router.push({ path: '/app/tips/examina-tips' })
}
} else if (Number(isOpenExaminationNotes) === 1 && Number(isOpenExamination) === 1) {
obj = [{ name: '学习须知', index: '1-1' }, { name: '考前须知', index: '1-2' }]
obj = [
{ name: '学习须知', index: '1-1' },
{ name: '考前须知', index: '1-2' }
]
if (Number(isOpenTextbookLearning) || Number(isOpenRequiredCourse) || Number(isOpenXxtendedCourse)) {
arrList = this.arrHeader(this.headerData)
} else {
arrList = this.arrHeader(this.headerData).filter(k => k.index !== '2')
}
obj.forEach((item) => {
obj.forEach(item => {
arrList[0].children.push(item)
})
this.headerData = arrList
......@@ -186,24 +217,32 @@ export default {
}
}
},
goPages (str) {
goPages(str) {
switch (str) {
case '1-1': this.$router.push({ path: '/app/tips/learning-tips' }); break
case '1-2': this.$router.push({ path: '/app/tips/examina-tips' }); break
case '2': this.$router.push({ path: '/app/learn/course' }); break
case '3': this.$router.push({ path: '/app/examination/my-examination' }); break
case '1-1':
this.$router.push({ path: '/app/tips/learning-tips' })
break
case '1-2':
this.$router.push({ path: '/app/tips/examina-tips' })
break
case '2':
this.$router.push({ path: '/app/learn/course' })
break
case '3':
this.$router.push({ path: '/app/examination/my-examination' })
break
}
},
/* 修改头像 - 跳转方法 */
goUpdatePic () {
goUpdatePic() {
this.$router.push({ path: '/app/other/update-pic' })
},
/* 修改密码 - 跳转方法 */
goSetPwd () {
goSetPwd() {
this.$router.push({ path: '/app/other/set-pwd' })
},
/* 退出登录 - 跳转方法 */
goOutLogin () {
goOutLogin() {
cAction.Other.outLogin()
.then(str => {
window.G.UserInfo = {}
......@@ -217,28 +256,28 @@ export default {
// this.$router.push({ path: '/login/index' })
},
/* 定义监听事件 */
defineEvent () {
this.VueEvent.$off('can-change-sidebar').$on('can-change-sidebar', (data) => {
defineEvent() {
this.VueEvent.$off('can-change-sidebar').$on('can-change-sidebar', data => {
this.defaultActive = data.defaultActive
})
},
/* 当前菜单选中 */
curSelect (i, p) {
curSelect(i, p) {
this.defaultActive = i
},
/* 侧边栏 拖拽条按下并移动前 */
beforeMove (e) {
beforeMove(e) {
this.obj.isMouseDown = true
this.obj.beforeMoveInitX = parseInt(this.obj.sidebarStyle.width) - e.pageX
},
/* 侧边栏 拖拽条按下并移动中 */
moving (e) {
moving(e) {
if (this.obj.isMouseDown) {
this.obj.sidebarStyle.width = e.pageX + this.obj.beforeMoveInitX + 'px'
}
},
/* 侧边栏 拖拽条按下并移动中 */
afterMove () {
afterMove() {
this.obj.isMouseDown = false
}
}
......@@ -255,15 +294,15 @@ export default {
}
.el-menu-item {
text-align: center;
i{
i {
margin-left: -35px;
}
}
.el-submenu {
text-align: center;
font-size:18px;
font-size: 18px;
color: #333333;
i{
i {
margin-left: -35px;
}
.el-menu-item {
......@@ -319,18 +358,18 @@ export default {
height: 100%;
cursor: ew-resize;
}
.com-txt{
.com-txt {
color: #999999;
font-size:14px;
font-size: 14px;
}
.el-menu-item.is-active{
color: #71C0FF;
.el-menu-item.is-active {
color: #71c0ff;
}
@media (max-width: 767px) {
// .el-aside {
// position: fixed;
// z-index: 99;
// position: fixed;
// z-index: 99;
// }
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论