他人信息+用户快捷入口

This commit is contained in:
jiayuqi7813
2022-07-16 02:17:19 +08:00
parent 368248116b
commit 7e4c8ff4f4
6 changed files with 219 additions and 14 deletions

View File

@@ -5,7 +5,6 @@
<el-col :span="16">
<el-table :data="tableData" style="width: 100%" stripe :row-class-name="tableRowClassName">
<el-table-column prop="rank" label="Ranking" width="180" />
<el-table-column prop="id" label="Userid" width="180" />
<el-table-column prop="username" label="User" width="180" />
<el-table-column prop="score" label="Score" />
</el-table>

173
src/components/userid.vue Normal file
View File

@@ -0,0 +1,173 @@
<template>
<el-row class="row-bg" justify="center">
<el-col :span="16">
<div class="userinfo">
<h1>{{name}}</h1>
<h1>{{score}}</h1>
<h1>用户id{{$route.params.id}}</h1>
</div>
<el-button @click="editUserVisible=true" type="primary" circle >
<el-icon><User /></el-icon>
</el-button>
<el-dialog v-model="editUserVisible" title="用户信息">
<p>联系方式{{userData.affiliation}}</p>
<p>城市{{userData.country}}</p>
<p>网站{{userData.website}}</p>
</el-dialog>
<h1 style="color: #FFFFFF">解题数</h1>
<div>
<el-table :data="formData" style="width: 100%" stripe>
<el-table-column prop="challenge_name" label="题目" width="180" />
<el-table-column prop="score" label="分数" width="180" />
<el-table-column prop="created_at" label="提交时间" />
</el-table>
</div>
</el-col>
</el-row>
</template>
<script>
import axios from "axios";
import dayjs from 'dayjs';
export default {
data(){
return{
userData:{
affiliation: "",
country: "",
website: "",
name: "",
},
editUserVisible:false,
name: "",
rank:"",
score:0,
id:0,
formData:[],
}
},
methods:{
},
mounted() {
//管理员信息保护
if(this.$route.params.id ==='1'){
this.name = "admin";
this.rank = "管理员";
this.score = "114514";
this.userData.affiliation = "下北泽";
this.id = 1;
this.formData = [
{
challenge_name: "简单题目",
score: "0",
created_at: "2020-01-01"
},
{
challenge_name: "简单题目",
score: "0",
created_at: "2020-01-01"
},
{
challenge_name: "简单题目",
score: "0",
created_at: "2020-01-01"
},
{
challenge_name: "简单题目",
score: "0",
created_at: "2020-01-01"
},
{
challenge_name: "简单题目",
score: "0",
created_at: "2020-01-01"
},
{
challenge_name: "简单题目",
score: "0",
created_at: "2020-01-01"
},
{
challenge_name: "简单题目",
score: "0",
created_at: "2020-01-01"
},
{
challenge_name: "简单题目",
score: "0",
created_at: "2020-01-01"
},
{
challenge_name: "简单题目",
score: "0",
created_at: "2020-01-01"
},
{
challenge_name: "简单题目",
score: "0",
created_at: "2020-01-01"
}
]
}else {
//他人信息
axios.get('/api/v1/user/'+this.$route.params.id).then(res=> {
this.id = res.data.data.id;
this.userData.affiliation= res.data.data.affiliation;
this.userData.country= res.data.data.country;
this.name =this.userData.name= res.data.data.username;
this.userData.website= res.data.data.website;
if(res.data.data.username===""){
this.name = "用户不存在捏";
return
}
})
//获取排名信息
axios.get("/api/v1/score/"+this.$route.params.id).then(res => {
if (res.data.code === 200) {
this.score = res.data.data
}
})
//获取提交记录
axios.get("/api/v1/user/solves/uid/"+this.$route.params.id).then(res=>{
if (res.data.code === 200) {
this.formData = res.data.data;
this.formData.forEach(function(item,index){
item.created_at = dayjs(item.created_at).format('YYYY-MM-DD HH:mm:ss');
})
this.formData.reverse();
}
})
}
}
}
</script>
<style lang="less">
.row-bg{
.userinfo{
//内容垂直居中
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
//div内标题间隙
line-height:1px;
color: #FFFFFF;
}
}
</style>

View File

@@ -1,5 +1,4 @@
<template>
<el-row class="row-bg" justify="center">
<el-col :span="16">
<div class="userinfo">
@@ -76,11 +75,7 @@ export default {
name: "",
},
editUserVisible:false,
affiliation: "",
country: "",
email: "",
name: "",
website: "",
rank:"",
score:0,
id:0,
@@ -90,7 +85,13 @@ export default {
},
methods:{
editUser(){
console.log(this.userData)
axios.put('/api/v1/user/userinfo',this.userData).then(res=>{
this.editUserVisible=false
this.$message({
message: '修改成功',
type: 'success'
})
})
}
},
mounted() {
@@ -98,11 +99,11 @@ export default {
axios.get("/api/v1/user/session").then(res => {
if (res.data.code === 200) {
this.id = res.data.data.id;
this.affiliation =this.userData.affiliation= res.data.data.affiliation;
this.country =this.userData.country= res.data.data.country;
this.email =this.userData.email= res.data.data.email;
this.userData.affiliation= res.data.data.affiliation;
this.userData.country= res.data.data.country;
this.userData.email= res.data.data.email;
this.name =this.userData.name= res.data.data.username;
this.website =this.userData.website= res.data.data.website;
this.userData.website= res.data.data.website;
}
//请求不到就删除token防止变量出现还有遗留的情况非常号解决方案
}).catch(err => {localStorage.removeItem('token');});
@@ -116,7 +117,6 @@ export default {
//获取提交记录
axios.get("/api/v1/user/solves/self").then(res=>{
if (res.data.code === 200) {
console.log(res.data.data);
this.formData = res.data.data;
this.formData.forEach(function(item,index){
item.created_at = dayjs(item.created_at).format('YYYY-MM-DD HH:mm:ss');

View File

@@ -6,7 +6,14 @@
<el-col :span="16">
<el-table :data="tableData" style="width: 100%" stripe :row-class-name="tableRowClassName">
<el-table-column prop="id" label="Id" width="180" />
<el-table-column prop="username" label="User" width="180" />
<el-table-column label="User" width="180">
<template #default="scope">
<el-link type="primary" :href="'/user/'+scope.row.id">
{{scope.row.username}}
</el-link>
</template>
</el-table-column>
<el-table-column prop="affiliation" label="Affiliation" />
<el-table-column prop="country" label="Country" />
<el-table-column prop="website" label="Website" />
@@ -45,4 +52,4 @@ export default {
justify-content: center;
color: #dddddd;
}
</style>
</style>

View File

@@ -57,6 +57,17 @@ const router = createRouter({
path:'/info',
name:'info',
component: () => import('../views/Info.vue'),
meta: {
requireAuth: true,
}
},
{
path:'/user/:id',
name:'user',
component: () => import('../views/Userother.vue'),
meta: {
requireAuth: true,
}
},
{
path:'/admin',

15
src/views/Userother.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<Navbar></Navbar>
<userid></userid>
</template>
<script>
import Navbar from "../components/Navbar.vue";
import userid from '../components/userid.vue'
export default {
components: {
userid,
Navbar
}
}
</script>