390 lines
17 KiB
Vue
390 lines
17 KiB
Vue
<template>
|
||
<div style="display:flex;flex-direction:row;flex-wrap: nowrap">
|
||
<div style="display: flex;flex-direction:column;flex-wrap: nowrap">
|
||
<div class="PageHeader">
|
||
<br/>
|
||
<el-page-header @back="goBack" style="justify-content:left;display: flex;">
|
||
<div slot="title" style="font-size:23px;font-weight: 600;"></div>
|
||
<div slot="content" style="font-size:23px;font-weight: 600;">
|
||
个人主页
|
||
</div>
|
||
</el-page-header>
|
||
</div>
|
||
<div class="PageContent">
|
||
<el-card class="box-card" style="border: none;">
|
||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start">
|
||
<div style="display: flex;flex-direction: row;justify-content: space-between">
|
||
<div @click="changeAvatar" style="cursor: pointer;width: 100px;height: 100px;display: flex;flex-direction: row;align-items: center">
|
||
<el-avatar style="display: flex;align-items: center;justify-content: center" :src="'http://localhost:8082/helloGithub_war_exploded/retUserAv?username='+username" :size="90"></el-avatar>
|
||
</div>
|
||
<div style="display: flex;flex-direction: column;margin-left: 15px;">
|
||
<div style="display: flex;flex-direction: row;align-items: center;justify-content: flex-start;">
|
||
<span style="font-size: 20px;font-weight: bold;">{{username}}</span>
|
||
<span style="font-size: 15px;font-weight: bold;color: #3b82f6;margin-left: 10px">Lv.{{userLevel}}</span>
|
||
</div>
|
||
<span style="display: flex;justify-content:flex-start;margin-top: 10px;color: #6b7280;font-size: 15px">你是 HelloGitHub 社区的第<span style="font-size: 16px;color:#2b2e33;font-weight: bold "> {{userId}} </span>位用户，于 {{creatTime}} 加入。</span>
|
||
<span style="display: flex;justify-content: flex-start;margin-top: 10px;color: #6b7280;font-size: 15px">
|
||
分享
|
||
<span v-if="projectNum!=null" style="font-size: 16px;color:#2b2e33;font-weight: bold ">{{projectNum}}</span>
|
||
<span v-if="projectNum==null" style="font-size: 16px;color:#2b2e33;font-weight: bold ">0</span>
|
||
个开源项目,
|
||
<span v-if="Object.keys(commentList).length!==0" style="font-size: 16px;color:#2b2e33;font-weight: bold ">{{Object.keys(commentList).length}}</span>
|
||
<span v-if="Object.keys(commentList).length===0" style="font-size: 16px;color:#2b2e33;font-weight: bold ">0</span>
|
||
份评价,
|
||
共获得
|
||
<span v-if="contributionValue!=null" style="font-size: 16px;color:#2b2e33;font-weight: bold ">{{contributionValue}}</span>
|
||
<span v-if="contributionValue==null" style="font-size: 16px;color:#2b2e33;font-weight: bold ">0</span>
|
||
点贡献值.
|
||
<span style="font-size: 16px;color:#2b2e33;font-weight: bold ">
|
||
{{Object.keys(article).length}}
|
||
</span>
|
||
篇文章。
|
||
</span>
|
||
</div>
|
||
<el-progress type="circle" :percentage="contributionValue" :width="100" :show-text="true"></el-progress>
|
||
<div style="margin-left: 8px;display: flex;flex-direction: column;align-content: space-between;justify-content: space-between">
|
||
<el-progress style="width: 90px" :show-text="false" :percentage="commentList.length"></el-progress>
|
||
<el-progress style="width: 90px" :show-text="false" :percentage="projectList.length" status="success"></el-progress>
|
||
<el-progress style="width: 90px" :show-text="false" :percentage="like.length" status="warning"></el-progress>
|
||
<el-progress style="width: 90px" :show-text="false" :percentage="Object.keys(article).length" status="exception"></el-progress>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
<el-card class="box-card" style="border: none;margin-top: 20px">
|
||
<el-tabs v-model="activeName">
|
||
<el-tab-pane label="评论" name="first">
|
||
<el-card style="border: none;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start">
|
||
<span style="font-size: 16px;font-weight: bold">总共评论: {{commentList.length}} 条</span>
|
||
</el-card>
|
||
<el-empty v-show="commentList.length===0" description="暂无评论" :image-size="115"></el-empty>
|
||
<div v-show="commentList.length!==0" v-for="(item,index) in commentList" :key="index">
|
||
<UserComments :comments="item" :index="index"></UserComments>
|
||
</div>
|
||
|
||
</el-tab-pane>
|
||
<el-tab-pane label="项目" name="second">
|
||
<el-card style="border: none;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start">
|
||
<span style="font-size: 16px;font-weight: bold">总共提交: {{projectList.length}} 个</span>
|
||
</el-card>
|
||
<el-empty v-show="projectList.length===0" description="暂无项目" :image-size="115"></el-empty>
|
||
<div v-show="projectList.length!==0" v-for="(item,index) in projectList" :key="index">
|
||
<UserProjects :project="item" :index="index"></UserProjects>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="点赞" name="third">
|
||
<el-card style="border: none;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start">
|
||
<span style="font-size: 16px;font-weight: bold">总共点赞: {{like.length}} 个</span>
|
||
</el-card>
|
||
<el-empty v-show="like.length===0" description="暂无点赞" :image-size="115"></el-empty>
|
||
<div v-show="like.length!==0" v-for="(item,index) in like" :key="index">
|
||
<UserProjects :project="item" :index="index"></UserProjects>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="文章" name="four">
|
||
<el-card style="border: none;display: flex;flex-direction: row;justify-content: flex-start;align-items: flex-start">
|
||
<span style="font-size: 16px;font-weight: bold">总文章: {{Object.keys(article).length}} 篇</span>
|
||
</el-card>
|
||
<el-empty v-show="Object.keys(article).length===0" description="暂无点赞" :image-size="115"></el-empty>
|
||
<div v-show="Object.keys(article).length!==0" v-for="(item,index) in article" :key="index">
|
||
<UserArticles :article="item"></UserArticles>
|
||
</div>
|
||
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-card>
|
||
</div>
|
||
</div>
|
||
<RightTools></RightTools>
|
||
<el-dialog
|
||
title="修改头像"
|
||
:visible.sync="openChangeAvatar"
|
||
width="25vw"
|
||
append-to-body
|
||
:close-on-click-modal="false"
|
||
>
|
||
<!-- <span style="font-size: 14px;color: #9ca3af">选择一种方式即可！</span>-->
|
||
<!-- <div style="margin-top: 10px;display: flex;flex-direction: row;align-items: center;justify-content: space-between">-->
|
||
<!-- <el-input placeholder="请输入头像链接" style="width: 17vw" v-model="AvatarUrl">-->
|
||
<!-- <template slot="prepend">url:</template>-->
|
||
<!-- </el-input>-->
|
||
<!-- <el-button @click="changeAvatarByUrl" size="small" type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>-->
|
||
<!-- </div>-->
|
||
|
||
<div style="margin-top: 10px;display: flex;flex-direction: row;align-items: center;justify-content: center">
|
||
<el-upload
|
||
class="upload-demo"
|
||
drag
|
||
action=""
|
||
:http-request="upload"
|
||
multiple>
|
||
<i class="el-icon-upload"></i>
|
||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件。</div>
|
||
</el-upload>
|
||
|
||
</div>
|
||
</el-dialog>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import axios from "axios";
|
||
import RightTools from "@/components/Home/RightTools.vue";
|
||
import UserProjects from "@/components/User/UserProjects.vue";
|
||
import UserComments from "@/components/User/UserComments.vue";
|
||
import UserArticles from "@/components/User/UserArticles.vue";
|
||
import Vue from "vue";
|
||
|
||
export default {
|
||
|
||
name: "UserInfoPage",
|
||
components: {UserArticles, UserComments, UserProjects, RightTools},
|
||
data(){
|
||
return{
|
||
activeName:'first',
|
||
username: null,
|
||
contributionValue:0,
|
||
creatTime:null,
|
||
projectNum:0,
|
||
userId:null,
|
||
projectList:[],
|
||
commentList:[],
|
||
like:[],
|
||
article:[],
|
||
openChangeAvatar:false,
|
||
// AvatarUrl:'',
|
||
// imageUrl:'',
|
||
userLevel:null,
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getUserInfo()
|
||
this.getUserDetail();
|
||
setTimeout(()=>{
|
||
this.updateUserLevel();
|
||
this.getUserInfo();
|
||
},1000)
|
||
// this.changeAvatarByLocal();
|
||
|
||
},
|
||
created() {
|
||
this.updateUserLevel();
|
||
this.getUserInfo();
|
||
|
||
|
||
},
|
||
watch: {
|
||
$route () {
|
||
if(this.$route.query.refresh){
|
||
this.getUserInfo() //重新调用http请求实现页面的重新渲染
|
||
this.getUserDetail();
|
||
}
|
||
},
|
||
},
|
||
computed: {
|
||
headers() {
|
||
return {
|
||
"Content-Type": "multipart/form-data"
|
||
};
|
||
},
|
||
},
|
||
methods: {
|
||
goBack() {
|
||
window.history.go(-1);
|
||
},
|
||
getUserInfo(){
|
||
var that=this;
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/retUser',
|
||
// URL 中的查询参数
|
||
params: {
|
||
username:this.$route.query.name
|
||
}
|
||
}).then(function (res) {
|
||
that.username=res.data.userName;
|
||
that.contributionValue=res.data.contributionValue;
|
||
that.creatTime=res.data.creatTime;
|
||
that.projectNum=res.data.projectNum;
|
||
that.userId=res.data.userId;
|
||
// that.imageUrl=res.data.userAvatar;
|
||
that.userLevel=res.data.userLevel;
|
||
});
|
||
},
|
||
getUserDetail(){
|
||
var that=this;
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/userDetail',
|
||
// URL 中的查询参数
|
||
params: {
|
||
username:this.$route.query.name
|
||
}
|
||
}).then(function (res) {
|
||
// console.log(res);
|
||
that.projectList=JSON.parse(res.data.project);
|
||
that.commentList=JSON.parse(res.data.comment);
|
||
that.like=JSON.parse(res.data.like)
|
||
that.article=JSON.parse(res.data.article);
|
||
// console.log(that.commentList);
|
||
});
|
||
},
|
||
updateUserLevel(){
|
||
if(this.$cookie.get("username")!=null){
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/levelup',
|
||
// URL 中的查询参数
|
||
params: {
|
||
|
||
}
|
||
});
|
||
}else{
|
||
return;
|
||
}
|
||
},
|
||
changeAvatar(){
|
||
if(this.$route.query.name!==this.$cookie.get('username')||this.$cookie.get('username')===null){
|
||
return;
|
||
}else{
|
||
this.openChangeAvatar=true;
|
||
}
|
||
|
||
},
|
||
// changeAvatarByUrl(){
|
||
// if(this.AvatarUrl!==''){
|
||
// axios({
|
||
// method: 'post',
|
||
// // 请求的地址
|
||
// url: 'http://localhost:8082/helloGithub_war_exploded/userAvatar',
|
||
// // URL 中的查询参数
|
||
// params: {
|
||
// url: this.AvatarUrl
|
||
// }
|
||
// }).then(function (res) {
|
||
// if(res.data.code===200){
|
||
// Vue.prototype.$notify({
|
||
// title: '上传成功',
|
||
// message: ('i', {style: 'color: teal'}, res.data.msg),
|
||
// type: 'success',
|
||
// offset: 50
|
||
// });
|
||
// }else{
|
||
// Vue.prototype.$notify.error({
|
||
// title: '错误',
|
||
// message: "上传失败",
|
||
// offset: 50
|
||
// });
|
||
// }
|
||
//
|
||
// });
|
||
// }else{
|
||
// Vue.prototype.$notify.error({
|
||
// title: '错误',
|
||
// message: "请先填写图片链接",
|
||
// offset: 50
|
||
// });
|
||
// }
|
||
//
|
||
// },
|
||
|
||
upload(params){
|
||
var that=this;
|
||
const formData = new FormData();
|
||
formData.append("file", params.file);
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: '/upload/UploadHandle',
|
||
headers:{"Content-Type": "multipart/form-data"},
|
||
// URL 中的查询参数
|
||
data:formData,
|
||
params: {
|
||
username: this.$cookie.get('username')
|
||
}
|
||
}).then((res)=>{
|
||
if(res.data.code===500){
|
||
Vue.prototype.$notify.error({
|
||
title: '错误',
|
||
message: res.data.msg,
|
||
offset: 50
|
||
});
|
||
}else{
|
||
Vue.prototype.$notify({
|
||
title: '成功',
|
||
message: ('i', {style: 'color: teal'}, "上传成功"),
|
||
type: 'success',
|
||
offset: 50
|
||
});
|
||
that.openChangeAvatar=false;
|
||
setTimeout(()=>{
|
||
window.location.reload();
|
||
},500)
|
||
|
||
}
|
||
|
||
})
|
||
},
|
||
// changeAvatarByLocal(){
|
||
// var that=this;
|
||
// axios({
|
||
// method: 'post',
|
||
// // 请求的地址
|
||
// url: '/api/retUserAv',
|
||
// // URL 中的查询参数
|
||
// params:{
|
||
// username:this.username,
|
||
// },
|
||
// responseType:'blob'
|
||
// }).then((res)=>{
|
||
// that.imageUrl = window.URL.createObjectURL(res.data)//这里也是关键,调用window的这个方法URL方法
|
||
// })
|
||
//
|
||
// },
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.el-page-header__left{
|
||
position: relative;
|
||
left:-20vw;
|
||
}
|
||
.avatar-uploader .el-upload {
|
||
border: 1px dashed #d9d9d9;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.avatar-uploader .el-upload:hover {
|
||
border-color: #409EFF;
|
||
}
|
||
.avatar-uploader-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
width: 178px;
|
||
height: 178px;
|
||
line-height: 178px;
|
||
text-align: center;
|
||
}
|
||
.avatar {
|
||
width: 178px;
|
||
height: 178px;
|
||
display: block;
|
||
}
|
||
::v-deep .el-page-header__left{
|
||
left:10px;
|
||
}
|
||
::v-deep .el-page-header__content{
|
||
flex:1;
|
||
}
|
||
</style> |