learning-system-portal/src/components/UcHeader/Index.vue

<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>