mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-14 05:16:43 +08:00
2022年5月29日从svn移到git
This commit is contained in:
daihh
178
src/components/UcHeader/Index.vue
Normal file
178
src/components/UcHeader/Index.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<div class="uc-header xcontent">
|
||||
<div style="display: flex;justify-content: space-between;height: 100px;padding-top: 5px;">
|
||||
<div style="display: flex;justify-content: flex-start;">
|
||||
<div>
|
||||
<img style="width: 100px;height: 100px;border-radius: 50%;border: 1px solid #f9f9f9;" :src="userInfo.avatar" v-if="userInfo.avatar !== '' ">
|
||||
<div v-else class="uavatar">
|
||||
<div v-if="sex === 1 "><img src="../../../public/images/Avatarman.png" alt=""></div>
|
||||
<div v-else><img src="../../../public/images/Avatarwoman.png" alt=""></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-left: 15px;">
|
||||
<div style="height: 38px;padding-left: 5px;">
|
||||
<span style="font-size: 20px;font-weight: 500;color: #333;">{{userInfo.name}}</span>
|
||||
<span style="padding-left: 10px;color: #888888;font-size: 12px;cursor: pointer;">
|
||||
<el-link @click="toPage('/user/Setting')" icon="el-icon-setting" type="info" :underline="false">个人设置</el-link>
|
||||
</span>
|
||||
</div>
|
||||
<div style="height: 35px;padding-left: 5px;color:#7a7a7a;">
|
||||
<span style="color: #7a7a7a;padding-right: 15px;" v-if="orgInfo">{{orgInfo}}</span>
|
||||
<!-- 目前海没有实时更新的策略，暂未处理 -->
|
||||
<span>学习时长：{{userInfo.studyTotalH}}小时</span>
|
||||
</div>
|
||||
<div>
|
||||
<span :class="{identity:true,active:curIdentity==1}" @click="setCurIdentity(1)"><router-link to="/study/index">学员</router-link></span>
|
||||
<span v-if="identity == 2 || identity == 5" :class="{identity:true,active:curIdentity==2}" @click="setCurIdentity(2)"><router-link to="/teacher/index">教师</router-link></span>
|
||||
<span v-if="identity == 3 || identity == 5" :class="{identity:true,active:curIdentity==3}" @click="setCurIdentity(3)"><router-link to="/manager/index">管理员</router-link></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: flex-end;padding-top: 35px;">
|
||||
<!-- q1没有课程表，所以这里先隐藏
|
||||
<div v-if="curIdentity==2" style="padding: 0px 40px 0px 0px;color: #1EA0FA;text-align: center;">
|
||||
<div><i style="font-size: 40px;" class="el-icon-date"></i> <br/>授课表</div>
|
||||
</div>
|
||||
-->
|
||||
<!---->
|
||||
<!-- <div>
|
||||
<div tabindex="1" class="upicon" @click="toPage('/user/myshare')">
|
||||
<i class="el-icon-share"></i>
|
||||
<div>我分享的</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div tabindex="2" class="upicon" @click="toPage('/user/toshare')">
|
||||
<i class="el-icon-s-promotion"></i>
|
||||
<div>分享给我的</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div tabindex="3" class="upicon" @click="toPage('/user/favorites')">
|
||||
<i class="el-icon-star-on"></i>
|
||||
<div>我的收藏</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
userAvatarText
|
||||
} from "@/utils/tools.js";
|
||||
import { mapGetters } from 'vuex'
|
||||
export default {
|
||||
name: 'UcHeader',
|
||||
computed:{
|
||||
...mapGetters(['curIdentity','identity','userInfo']),
|
||||
avatarText(){
|
||||
return userAvatarText(this.userInfo.name);
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
fileBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
|
||||
uinfo:{},
|
||||
orgInfo:'',
|
||||
sex:'',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.sex = this.userInfo.sex;
|
||||
// 判断路由是进入的学员默认页面就重置setCurIdentity
|
||||
if(this.$route.path == '/study/index'){
|
||||
this.setCurIdentity(1);
|
||||
}
|
||||
this.orgInfo=this.userInfo.departFullName;
|
||||
//console.log(this.orgInfo,'转化前的名称')
|
||||
//this.orgInfo='京东方科技集团/显示事业/技术开发部';
|
||||
if(this.orgInfo){
|
||||
let idx=this.orgInfo.indexOf('/');
|
||||
if(idx>-1){
|
||||
this.orgInfo=this.orgInfo.substring(idx+1);
|
||||
}
|
||||
}
|
||||
//console.log(this.orgInfo,'转化后的名称')
|
||||
},
|
||||
methods:{
|
||||
setCurIdentity(iden){
|
||||
this.$store.dispatch('SetCurIdentity',iden);
|
||||
},
|
||||
toPage(url){
|
||||
this.$router.push({path:url})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uc-header{
|
||||
height: 120px;
|
||||
// min-width: 1366px;
|
||||
// max-width: 1500px;
|
||||
//width: 1500px;
|
||||
//width: 1000px;
|
||||
padding-top: 10px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.upicon{
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
margin-left: 15px;
|
||||
font-size: 14px;
|
||||
i{font-size: 30px;color: #ffb30f;}
|
||||
div{color: #7b7b7b;padding: 5px 0px 10px 0px;}
|
||||
}
|
||||
.upicon:focus div{
|
||||
color: #588afc;
|
||||
}
|
||||
.identity{
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #fcfcfc;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
background-color: #ffffff;
|
||||
margin: 5px;
|
||||
}
|
||||
.active{
|
||||
background-color: #ffb30f;
|
||||
color: #FFFFFF;
|
||||
border: 1px solid #ffb30f;
|
||||
}
|
||||
.uc-alert{
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
padding: 0px 50x;
|
||||
.uc-alert-label{
|
||||
color: #3f3f3f;
|
||||
}
|
||||
.uc-alert-value{
|
||||
padding-top: 10px;
|
||||
color: #aa0000;
|
||||
}
|
||||
}
|
||||
.uavatar{
|
||||
// border: 1px solid #73adfe;
|
||||
// color: #73adfe;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
line-height: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
// background: #d9e9ff;
|
||||
div{
|
||||
border-radius: 50%;
|
||||
img{
|
||||
border-radius: 50%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user