调整
This commit is contained in:
106
src/components/User/UserInfo.vue
Normal file
106
src/components/User/UserInfo.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div style="display: flex;flex-direction: column;flex-wrap: nowrap" v-show="this.$cookie.get('username')!=null">
|
||||
<div style="display: flex;flex-direction: row;align-items: center;width: 11vw;justify-content: space-between">
|
||||
<div style="display: flex;flex-direction: row;align-items: center">
|
||||
<el-avatar shape="square" style=" background-color: #59A3A4;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)" size="large">{{this.$cookie.get('username')}}</el-avatar>
|
||||
<div style="margin-left: 5px;display: flex;flex-direction: column;justify-content: space-evenly">
|
||||
<span style="font-weight: bold">{{this.$cookie.get('username')}}</span>
|
||||
<span style="font-weight: 800;font-size: 13px;color: #3b82f6">Lv.1</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-switch v-model="switchValue" style="">
|
||||
</el-switch>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: row;margin-top: 10px;justify-content: space-between;align-items: center">
|
||||
<span style="font-size: 10px;color: #9ca3af">贡献值</span>
|
||||
<span style="font-weight: bold;color: #59A3A4;font-size: 20px">{{ContributionValue}}/100</span>
|
||||
</div>
|
||||
<div style="margin-top: 10px">
|
||||
<el-progress :text-inside="true" :stroke-width="15" :percentage="ContributionValue"></el-progress>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div style="display: flex;align-items: center;justify-content: space-between;flex-direction: row;flex-wrap: nowrap;">
|
||||
<el-link style="color: #9ca3af;font-size: 13px" icon="el-icon-s-custom" class="link" @click="toUserPage">我的主页</el-link>
|
||||
<el-link style="color: #9ca3af;font-size: 13px" icon="el-icon-switch-button" class="link" @click="signOut">退出登录</el-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import Vue from "vue";
|
||||
|
||||
export default {
|
||||
name: "UserInfo",
|
||||
data(){
|
||||
return{
|
||||
switchValue:false,
|
||||
ContributionValue:0,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getContributionValue();
|
||||
},
|
||||
methods:{
|
||||
signOut(){
|
||||
// deletecookie
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'get',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/deletesession',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
}
|
||||
});
|
||||
this.$cookie.delete('username');
|
||||
if(this.$cookie.get('username')===null){
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, "退出成功！"),
|
||||
type: 'success',
|
||||
offset: 50
|
||||
});
|
||||
setTimeout(()=>{
|
||||
window.location.reload();
|
||||
},1000)
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
toUserPage(){
|
||||
this.$router.push({
|
||||
path:'/UserInfoPage',
|
||||
query: {
|
||||
name: this.$cookie.get('username'),
|
||||
refresh: true
|
||||
}})
|
||||
},
|
||||
getContributionValue(){
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/contributionValue',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
|
||||
}
|
||||
}).then((res)=>{
|
||||
// console.log(res);
|
||||
if(res.data.code===500){
|
||||
return;
|
||||
}else{
|
||||
that.ContributionValue=res.data;
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
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