调整
This commit is contained in:
137
src/components/User/UserInfoPage.vue
Normal file
137
src/components/User/UserInfoPage.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<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: center;">
|
||||
<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: flex-start">
|
||||
<div style="width: 100px;height: 100px">
|
||||
<el-avatar :size="90">{{username}}</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.1</span>
|
||||
</div>
|
||||
<span style="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>
|
||||
</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-empty description="暂无评论" :image-size="115"></el-empty>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="项目" name="third">
|
||||
<el-empty description="暂无项目" :image-size="115"></el-empty>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
<RightTools></RightTools>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import RightTools from "@/components/Home/RightTools.vue";
|
||||
|
||||
export default {
|
||||
name: "UserInfoPage",
|
||||
components: {RightTools},
|
||||
data(){
|
||||
return{
|
||||
activeName:'first',
|
||||
username: null,
|
||||
contributionValue:0,
|
||||
creatTime:null,
|
||||
projectNum:0,
|
||||
userId:null,
|
||||
projectList:null,
|
||||
commentList:{},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getUserInfo()
|
||||
this.getUserDetail();
|
||||
},
|
||||
watch: {
|
||||
$route () {
|
||||
if(this.$route.query.refresh){
|
||||
this.getUserInfo() //重新调用http请求实现页面的重新渲染
|
||||
this.getUserDetail();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
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;
|
||||
});
|
||||
},
|
||||
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) {
|
||||
that.projectList=JSON.parse(res.data.project);
|
||||
that.commentList=JSON.parse(res.data.comment);
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
::v-deep .el-page-header__left{
|
||||
position: relative;
|
||||
left:-20vw;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user