mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-10 19:36:43 +08:00
695 lines
19 KiB
Vue
695 lines
19 KiB
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 @click="showTeacherInfo" v-if="teaechswich" style="margin-left:10px;line-height: 30px;" class="content-one-info">教师简介</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">{{pageId == userInfo.aid? '我的U币（累计）':'TA的U币（累计）'}}</div>
|
||
<div class="learning-an"><span>{{statData.uvalue < 0 ? 0 : 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>
|
||
<el-dialog title="教师信息" :visible.sync="dialogVisible" width="42%" class="teardiabox">
|
||
<div class="teachphoto">
|
||
<h6>教师职业照</h6>
|
||
<img :src="tearchUrl" alt="">
|
||
</div>
|
||
<div class="teachphoto">
|
||
<h6>教师经历</h6>
|
||
{{ teachtext.workExperience }}
|
||
</div>
|
||
<div class="teachphoto" style="height:70px">
|
||
<h6>擅长课程</h6>
|
||
<div>
|
||
{{ teachtext.courses }}
|
||
</div>
|
||
|
||
</div>
|
||
<div class="teachphoto" style="height:70px">
|
||
<h6>专长</h6>
|
||
<div v-for="(item,idx) in workname" :key="idx" class="teachexcel">
|
||
{{ item }}
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {userAvatarText,cutFullName} from "@/utils/tools.js";
|
||
import { mapGetters,mapActions } from 'vuex'
|
||
import apiTeach from '@/api/modules/teacher.js';
|
||
import apiStart from '@/api/phase2/stat.js';
|
||
import apiFollow from "@/api/phase2/userfollow.js"
|
||
import apiUser from "@/api/system/user.js";
|
||
import apiBoeTeahcer from "@/api/boe/teacher.js"
|
||
export default {
|
||
name: 'UcHeader',
|
||
computed:{
|
||
...mapGetters(['curIdentity','identity','sysTypeMap','userInfo']),
|
||
avatarText(){
|
||
return userAvatarText(this.userInfo.name);
|
||
}
|
||
},
|
||
data(){
|
||
return {
|
||
workname:[],
|
||
childData:[],
|
||
sysTypeListtear:[],
|
||
teachtext:{},
|
||
dialogVisible: false,
|
||
teaechswich:false,
|
||
fileBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
|
||
statData:{
|
||
evalue: 0,//经验值
|
||
level: "LV1",//级别
|
||
monthStudyHour:0,//当月学习时长
|
||
totalStudyHour: 0, //累计学习时长
|
||
monthStudyDays:0, //当月学习天数
|
||
totalStudyDays:0, //累计学习天数
|
||
uvalue:0 //U币数量
|
||
},
|
||
tearchUrl:'',
|
||
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.getSysTypeTree().then(rs => {
|
||
this.sysTypeListtear = rs;
|
||
});
|
||
this.loadUserStat();
|
||
if(this.pageId !== this.userInfo.aid) {
|
||
this.followHas();
|
||
}
|
||
this.teacherProfile();
|
||
|
||
},
|
||
|
||
methods:{
|
||
...mapActions({
|
||
getResOwnerTree: 'resOwner/getResOwnerTree',
|
||
loadResOwners: 'resOwner/loadResOwners',
|
||
getSysTypeTree: 'sysType/getSysTypeTree',
|
||
loadSysTypes: 'sysType/loadSysTypes'
|
||
}),
|
||
showTeacherInfo(){
|
||
this.loadTeacherinfo();
|
||
this.dialogVisible = true
|
||
},
|
||
loadTeacherinfo(){
|
||
this.workname=[];
|
||
apiTeach.detailTeacher(this.pageId).then(res =>{
|
||
this.teachtext.workExperience = res.result.workExperience;
|
||
this.teachtext.courses = res.result.courses;
|
||
if(res.result.photo){
|
||
this.tearchUrl = this.fileBaseUrl + res.result.photo;
|
||
}else{
|
||
this.tearchUrl ='';
|
||
}
|
||
|
||
//通过用户的sysId（原系统中的kid）去取用户
|
||
apiBoeTeahcer.simpleInfo(res.result.sysId).then(sinfo=>{
|
||
if(sinfo.status=='200'){
|
||
if(sinfo.result.courses){
|
||
this.teachtext.courses = sinfo.result.courses;
|
||
}
|
||
if(sinfo.result.work){
|
||
this.teachtext.workExperience = sinfo.result.work;
|
||
}
|
||
if(sinfo.result.photo){
|
||
this.teachtext.photo = sinfo.result.photo;
|
||
this.tearchUrl = this.fileBaseUrl + sinfo.result.photo;
|
||
}
|
||
}
|
||
})
|
||
|
||
this.teachtext.expertise = res.result.expertise.split( ',' );
|
||
//console.log(this.teachtext,"this.teachtext");
|
||
this.childData=[];
|
||
this.sysTypeListtear.forEach(nm =>{
|
||
nm.children.forEach(lk =>{
|
||
this.childData.push(lk);
|
||
})
|
||
});
|
||
this.teachtext.expertise.forEach(item =>{
|
||
this.childData.forEach(it =>{
|
||
if(item == it.id){
|
||
//console.log(item)
|
||
this.workname.push(it.name);
|
||
}
|
||
})
|
||
})
|
||
})
|
||
},
|
||
teacherProfile(){ //检查是否是教师
|
||
apiTeach.has(this.pageId).then(res =>{
|
||
this.teaechswich = res.result.isTeacher;
|
||
})
|
||
},
|
||
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>
|
||
::v-deep .el-dialog__body{
|
||
padding: 30px 50px !important;
|
||
}
|
||
.teardiabox{
|
||
padding: 20px 30px;
|
||
}
|
||
.teachexcel{
|
||
padding: 5px 10px;
|
||
margin-right: 10px;
|
||
border: 1px solid #588afc;
|
||
border-radius: 20px;
|
||
color: #588afc;
|
||
float: left;
|
||
}
|
||
.teachphoto{
|
||
margin-top: 20px;
|
||
h6{
|
||
margin: 0;
|
||
font-size: 18px;
|
||
color: #000;
|
||
padding-bottom: 20px;
|
||
}
|
||
img{
|
||
width: 200px;
|
||
height: 200px;
|
||
}
|
||
}
|
||
.teachbox{
|
||
span{
|
||
line-height: 60px;
|
||
margin-left: 10px;
|
||
font-size: 24px;
|
||
font-weight: 500;
|
||
color: #000;
|
||
}
|
||
}
|
||
.tearch-img{
|
||
float: left;
|
||
width: 80px;
|
||
height: 80px;
|
||
img{
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.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>
|