learning-system-portal/src/components/HomePage/homePage.vue

<template>
    <div class="uc-header">
      <div class="uc-header-box" >
        <div class="personalData">
            <div class="uesr-avaer">
              <img :src="fileBaseUrl+userData.avatar" v-if="userData.avatar !== '' ">
              <div v-else class="uavatar">
                  <div v-if="userData.sex === 1 "><img :src="`${webBaseUrl}/images/Avatarman.png`" style="width: 100%;" alt=""></div>
                  <div v-if="userData.sex === 2 "><img :src="`${webBaseUrl}/images/Avatarwoman.png`" style="width: 100%;" alt=""></div>
              </div>
            </div>

           <div class="user-content">
              <div style="display: flex;justify-content: start;margin-left:25px">
                  <div  style="min-width: 240px;">
                    <div class="content-top">
                      <h6> {{userData.name}}<span style="margin-left:8px;color: #999999;font-weight: 400;">{{userData.orgInfo}}</span> </h6>
                    </div>
                     <div class="grade" style="margin-top:5px">
                        <div class="level" style="margin-top:4px">{{statData.level}}</div>
                        <span style="color: #A3680A;margin-left:5px;line-height: 24px;margin-right: 20px;">经验值：{{statData.evalue}}</span>
                      <!-- <div style="float:right"> -->
                       <router-link v-if="pageId == userInfo.aid" to="/user/Setting"><span class="content-one-info pointer" style="line-height: 30px;">个人设置</span></router-link>
                      <span v-if="pageId == userInfo.aid"   style="margin-left:10px;line-height: 30px;" class="content-one-info" ><router-link to="/uc/study/courses" class="pointer" style="color:#0060FF;">个人中心</router-link></span>
                      <span class="content-one-info"  v-if="pageId != userInfo.aid && !isFollowHas" @click="toFollow()">关注TA</span>
                      <span class="Followed"  @click="cancelFollow()" v-if="isFollowHas">已关注</span>
                      <el-button type="text" round  class="btn-user"  >  <router-link :to="'/home/'+pageId+'/leaving'">{{pageId == userInfo.aid ? '留言板':'去留言'}}<i class="el-icon-arrow-right"></i> </router-link> </el-button>
                      <!-- <div style="height: 30px;margin-top: 10px;"> -->


                      <!-- </div> -->
                      <!-- </div> -->
                    </div>
                    <div class="content-bottom" style="margin-top:20px">
                      <p v-if="userData.sign" class="portal-summary-text">{{userData.sign}} </p>
                      <p v-else  class="portal-summary-text">暂无签名</p>
                    </div>

                  </div>
                  <!-- <div style="text-align: center;"> -->


                  <!-- </div> -->
               </div>
           </div>
        </div>
        <div class="learningData">
          <div class="learning-info">
             <div class="learning-qus">当月学习时长</div>
             <div class="learning-an"><span>{{statData.monthStudyHour}}</span>h</div>
          </div>
           <div class="learning-info">
             <div class="learning-qus">累计学习时长</div>
             <div class="learning-an"><span>{{statData.totalStudyHour}}</span>h</div>
          </div>
          <div class="learning-border" ></div>
           <div class="learning-info" style="margin-left:22px">
             <div class="learning-qus">当月学习天数</div>
             <div class="learning-an"><span>{{statData.monthStudyDays}}</span>天</div>
          </div>
           <div class="learning-info">
             <div class="learning-qus">累计学习天数</div>
             <div class="learning-an"><span>{{statData.totalStudyDays}}</span>天</div>
          </div>
           <div class="learning-border" ></div>
           <div class="learning-info" style="margin-left:22px">
             <div class="learning-qus">我的U币（累计）</div>
             <div class="learning-an"><span>{{statData.uvalue}}</span></div>
          </div>
		  <!--
          <div class="learning-info" v-if="userInfo.aid == pageId">
              <div @click="jumrank" style="cursor: pointer;" class="ranking-link"> BOE 排行榜 >></div>
          </div>
		  -->
        </div>
      </div>
    </div>
  </template>

  <script>
  import {userAvatarText,cutFullName} from "@/utils/tools.js";
    import { mapGetters } from 'vuex'
    import apiStart from '@/api/phase2/stat.js';
    import apiFollow from "@/api/phase2/userfollow.js"
    import apiUser from "@/api/system/user.js";
    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,
          statData:{
            evalue: 0,//经验值
            level: "LV1",//级别
            monthStudyHour:0,//当月学习时长
            totalStudyHour: 0, //累计学习时长
            monthStudyDays:0, //当月学习天数
            totalStudyDays:0, //累计学习天数
            uvalue:0 //U币数量
          },
          orgInfo:'',
          sex:'',
          pageId:'',
          isFollowHas:false,
          userData:{
              aid: "",
              avatar: "",
              code: "",
              name: "",
              orgInfo: "",
              sex: '',
              sign: "",
          }
        }
      },
      mounted() {
        
        this.pageId = this.$xpage.getHomeId(this.$route);
        this.sex = this.userInfo.sex;
        // 判断路由是进入的学员默认页面就重置setCurIdentity
        if(this.$route.path == '/uc/study/task' || this.$route.path == '/study/index'){
          this.setCurIdentity(1);
        }
        this.orgInfo=cutFullName(this.userInfo.departFullName,1);

        this.loadUserStat();
        if(this.pageId !== this.userInfo.aid) {
          this.followHas();
        }
       
      },
      methods:{
        cancelFollow() {
          apiFollow.remove(this.pageId).then(res=>{
            if(res.status == 200) {
               this.isFollowHas = false;
			         this.$message.success("取消关注成功");
            } else {
              this.$message.error(res.message);
            }
          })
        },
        loadUserStat(){//获取经验值和等级
            apiUser.getByIds([this.pageId]).then(res => {
                if (res.status == 200) {
                   this.userData = res.result[0];
                   this.userData.orgInfo=cutFullName(this.userData.orgInfo);
                } else {
                   this.$message.error(res.message);
                }
            });
            apiStart.getUserStatTotalInfo(this.pageId).then(res=>{
              if(res.status == 200) {
                 this.statData.evalue = res.result.evalue;
                 this.statData.level = res.result.level;
                 this.statData.monthStudyHour = res.result.monthStudyHour;
                 this.statData.totalStudyHour = res.result.totalStudyHour;
                 this.statData.monthStudyDays = res.result.monthStudyDays;
                 this.statData.totalStudyDays = res.result.totalStudyDays;
                 this.statData.uvalue = res.result.uvalue;
                 this.medalList=res.result.medalList;
              }
            });
        },
        followHas() {//他人主页，判断关注状态
          apiFollow.has(this.pageId).then(res=>{
            if(res.status == 200) {
               this.isFollowHas = res.result;
            } else {
              this.$message.error(res.message);
            }
          })
        },
        toFollow() {
          apiFollow.save(this.pageId).then(res=>{
            if(res.status == 200) {
              this.$message.success("关注成功");
              this.followHas();
            } else {
              this.$message.error(res.message);
            }
          })
        },
        setCurIdentity(iden){
          this.$store.dispatch('SetCurIdentity',iden);
        },
        jumrank(){
          this.$router.push('/user/ranking');
        },
        toPage(url){
          this.$router.push({path:url})
        },
      }
    }
  </script>

<style lang="scss" scoped>
  .level{
    float: left;
    width: 57px;
    height: 24px;
    text-align: center;
    line-height: 28px;
    background-image: url(../../../public/images/lvbg.png);
    background-repeat: no-repeat;
    background-size:100%;
  }
  .ranking-link{
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    margin-top: 20px;
  }
  .uc-header{
    display: flex;
    justify-content: space-between;
    height: 210px;
    background-color: #ffffff;
    background-image: url('../../../public/images/userbgimg.png');
    background-repeat: no-repeat;
    background-size:445px 210px;
    background-position: right 0;
  }
  .uc-header-box{
    display: flex;
    justify-content: space-between;
    height: 210px;
    margin: 0 auto;
  }
  .list{
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    margin-top: 20px;
  }
  .learningData{
    padding-top: 70px;
    box-sizing: border-box;
    margin-left:auto;
    .learning-info{
      float: left;
      margin-right: 22px;
       .learning-qus{
            font-size: 14px;
            color: #666660;
            margin-bottom: 24px;
       }
       .learning-an{
            color: #999999;
            text-align: center;
            font-size: 14px;
            span{
              font-weight: 600;
              font-size: 22px;
              color: #0060FF;
              margin-right: 6px;
            }
       }
    }
    .learning-border{
      width: 1px;
      height: 49px;
      opacity: 0.3;
      border: 1px solid #AAA6A6;
      float: left;
      margin-top: 5px;
    }
  }
//   .content-bottom{
//     margin-top: 12px;
     .medal{
       float: left;
       img{
           width: 36px;
           height: 40px;
           margin-right: 10px;
           vertical-align: top;
       }
     }

     .medalbutt{
       color: #333333;
       font-size: 14px;
       float: left;
       margin-top: 10px;
     }
     .btn-user{
          color: #387DF7;
          margin: 0;
          font-size: 16px;
          padding: 0;
      }
     .grade{
       // margin-top: 20px;

       div{
        //  margin-left: 22px;
         font-weight: 600;
          float: left;
          width: 57px;
          height: 24px;
          //text-align: center;
          line-height: 24px;
          color: #9D6110 ;
          //background: url('../../../public/images/lvbg.png') no-repeat 100% / 100%;
       }
     }
//   }
  .personalData{
    flex: 1;
    padding-top: 40px;
    box-sizing: border-box;
    display: flex;
    .uesr-avaer{
      width: 120px;
      height: 120px;
      margin-right: 30px;
      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        vertical-align: top;
      }
    }
    .user-content{
      flex: 1;
      .content-top{
        // margin-top: 15px;
        height: 46px;
        line-height: 46px;

        h6{
          color: #333333;
          font-size: 26px;
          margin:0;
          float: left;

        }
        span{
          color: #999999;
          font-size: 14px;
          margin-left: 5px;
          margin-right: 24px;
        }

      }
    }
  }
.content-one-info{
  cursor: pointer;
  display: inline-block;
  line-height: 30px;
   width: 80px;
    height: 30px;
    text-align: center;
    border-radius: 20px;
    padding: 0;
    border: 1px solid #619DFF;
    font-size: 14px;
    color: #387DF7;

}
.Followed{
  width: 80px;
  height: 30px;
  padding: 0;
  margin-right: 8px;
  font-size: 14px;
  text-align: center;
  border-radius: 20px;
  display: inline-block;
  line-height: 30px;
  border: 1px solid #999;
  color: #999;

}
.editbutt{
  font-size: 14px;
  color: #333333;
}
   .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;
    }
   }


@media screen and (max-width: 1366px){
  .uc-header-box {
    width: 1160px;
  }
  .learningData{
    margin-left:auto;
    .learning-info{
      margin-left: 10px;
      margin-right: 10px;
      .learning-qus{
        font-size: 12px;
      }
      .learning-an{
        font-size: 12px;
      }
    }
  }
  .personalData{
    .uesr-avaer{
      margin-right: 10px;
    }
    .user-content{
      .content-top{
        .grade{
          div{
              width: 48px;
          }
          span{
            font-size: 14px;
          }
        }
        h6{
          font-size: 26px;
        }
        span{
          font-size: 14px;
          margin-left: 5px;
          margin-right: 10px;
        }
        .editbutt{
          width: 80px;
          height: 25px;
          line-height: 5px;
          text-align: center;
          font-size: 12px;
        }
      }
    }
  }
  .content-bottom{

     .medalbutt{
       margin-right: 20px;
     }

  }
}
@media screen and (max-width: 1680px) and (min-width:1367px){
  .uc-header-box {
    width: 1300px;
  }
  .learningData{
    margin-left:auto;
    .learning-info{
      margin-left: 10px;
      margin-right: 12px;
    }
  }

  .personalData{
    .uesr-avaer{
      margin-right: 10px;
    }
    .user-content{
      .content-top{
        .grade{
          div{
              width: 48px;
          }
          span{
            font-size: 14px;
          }
        }
        h6{
          font-size: 26px;
        }
        span{
          font-size: 14px;
          margin-left: 5px;
          margin-right: 15px;
        }
        .editbutt{
          width: 80px;
          height: 25px;
          line-height: 5px;
          text-align: center;
          font-size: 12px;
        }
      }
    }
  }
}
@media screen and (max-width: 1920px) and (min-width: 1681px){
  .uc-header-box {
    width: 1600px;
  }
  .learningData{
    margin-left:auto;
    .learning-info{
      margin-left: 20px;
      margin-right: 22px;
    }
  }
}

@media screen and (min-width: 1921px){
  .uc-header-box {
    width: 1800px;
  }
  .learningData{
    margin-left:auto;
    .learning-info{
      margin-left: 30px;
      margin-right: 30px;
    }
  }
}
  </style>