Skip to content

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

update

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