点赞/评论/个人主页功能完善
This commit is contained in:
@@ -17,7 +17,9 @@
|
||||
color: #2c3e50;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.el-tag{
|
||||
border-radius: 10px;
|
||||
}
|
||||
nav {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
@@ -69,12 +69,12 @@
|
||||
</el-tabs>
|
||||
</div>
|
||||
<div style="margin-left: 20px;display: flex;flex-direction: column;flex-wrap: nowrap;">
|
||||
<el-card class="box-card" style="width: 13vw">
|
||||
<el-card class="box-card" style="width: 15vw">
|
||||
<el-button type="info" plain @click="openLogin" v-show="this.$cookie.get('username')==null">登 录</el-button>
|
||||
<UserInfo></UserInfo>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card" style="margin-top: 20px;width: 13vw">
|
||||
<el-card class="box-card" style="margin-top: 20px;width: 15vw">
|
||||
<div slot="header" class="clearfix">
|
||||
<el-statistic group-separator="," :precision="0" decimal-separator="." :value="userTotal" title="用户总数">
|
||||
<template slot="prefix">
|
||||
|
||||
@@ -120,18 +120,7 @@
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div style="display: flex;flex-direction:column;flex-wrap: nowrap">-->
|
||||
<!-- <div class="UserInfo">-->
|
||||
<!-- 用户信息展示内容：-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="RightContent">-->
|
||||
<!-- 空位置，待填入-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="ReferralProgram">-->
|
||||
<!-- 推荐项目目录-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<RightTools></RightTools>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -140,8 +129,10 @@
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import Vue from "vue";
|
||||
import RightTools from "@/components/Home/RightTools.vue";
|
||||
export default {
|
||||
name: "MonthlyComponent",
|
||||
components: {RightTools},
|
||||
data(){
|
||||
return{
|
||||
// 项目总数
|
||||
|
||||
13
src/components/Paper/PublishArticle.vue
Normal file
13
src/components/Paper/PublishArticle.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "PublishArticle"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -52,7 +52,8 @@
|
||||
<el-dropdown-item>下载</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-button style="height: 60px;width: 150px;margin-left: 10px" icon="el-icon-star-off">点 赞 {{startNum}}</el-button>
|
||||
<el-button v-show="isRouterAlive" v-if="Like===0" @click="addStar" style="height: 60px;width: 150px;margin-left: 10px" icon="el-icon-star-off" type="success">点 赞 {{startNum}}</el-button>
|
||||
<el-button v-show="isRouterAlive" v-if="Like===1" @click="cancleStar" style="height: 60px;width: 150px;margin-left: 10px" icon="el-icon-star-on" type="danger">取消点赞 {{startNum}}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -171,46 +172,97 @@
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div v-if="isRouterAlive" style="display: flex;flex-direction: column;flex-wrap: nowrap;margin-top: 20px">
|
||||
<div style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;justify-content: space-between">
|
||||
<span style="font-size: 16px;font-weight: bold">{{ commentNum }} 条精选评论</span>
|
||||
<el-button-group>
|
||||
<el-button type="primary" icon="el-icon-star-on" size="small">最新</el-button>
|
||||
<el-button type="primary" icon="el-icon-s-opportunity" size="small">最热</el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
|
||||
<div v-for="(item,index) in commentContent" :key="index" style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;margin-top: 20px">
|
||||
<div style="display: flex;flex-direction: row">
|
||||
<div style="width: 50px;height: 50px;">
|
||||
<el-avatar :size="50">{{item.username}}</el-avatar>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: column;justify-content: space-between">
|
||||
<div style="display: flex;flex-direction: row;margin-left: 10px;align-items: center">
|
||||
<span style="font-size: 14px;font-weight: bold;">{{item.username}}</span>
|
||||
<span style="margin-left: 10px">评分: </span>
|
||||
<el-rate
|
||||
style="margin-left: 10px"
|
||||
v-model="item.star" disabled>
|
||||
</el-rate>
|
||||
<span style="margin-left: 10px">
|
||||
<div style="display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: flex-start">
|
||||
<span style="display: flex;flex-direction: row;justify-content: flex-start;font-size: 16px;font-weight: bold">{{ commentNum }} 条精选评论</span>
|
||||
<!-- <el-button-group>-->
|
||||
<!-- <el-button :disabled="isDisabled" @click.once="getLastComment" type="primary" icon="el-icon-star-on" size="small">最新</el-button>-->
|
||||
<!-- <el-button :disabled="isDisabled2" @click.once="getHotComment" type="primary" icon="el-icon-s-opportunity" size="small">最热</el-button>-->
|
||||
<!-- </el-button-group>-->
|
||||
<el-empty v-show="commentContent.length ===0" description="暂无评论"></el-empty>
|
||||
<el-tabs v-show="commentContent.length!==0" type="card" style="margin-top: 10px" v-model="activeCommentName" @tab-click="getComment">
|
||||
<el-tab-pane name="last">
|
||||
<span slot="label"><i class="el-icon-star-on"></i>最新</span>
|
||||
<div v-for="(item,index) in commentContent" :key="index" style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;margin-top: 20px">
|
||||
<div style="display: flex;flex-direction: row">
|
||||
<div style="width: 50px;height: 50px;">
|
||||
<el-avatar :size="50">{{item.username}}</el-avatar>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: column;justify-content: space-between">
|
||||
<div style="display: flex;flex-direction: row;margin-left: 10px;align-items: center">
|
||||
<span style="font-size: 14px;font-weight: bold;">{{item.username}}</span>
|
||||
<span style="margin-left: 10px">评分: </span>
|
||||
<el-rate
|
||||
style="margin-left: 10px"
|
||||
v-model="item.star" disabled>
|
||||
</el-rate>
|
||||
<span style="margin-left: 10px">
|
||||
|
||||
<el-tag v-if="item.isUsed===0" type="warning" size="mini">没用过</el-tag>
|
||||
<el-tag v-if="item.isUsed===1" type="success" size="mini">用过</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
<div style="margin-left: 10px;margin-top: 5px">
|
||||
<el-card style="border: none;text-align:left;">
|
||||
<span>{{item.content}}</span>
|
||||
</el-card>
|
||||
</div>
|
||||
<div style="margin-left: 10px;margin-top: 5px">
|
||||
<el-card style="border: none;text-align:left;">
|
||||
<span>{{item.content}}</span>
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: row;justify-content: space-between;margin-left: 10px;margin-top: 5px">
|
||||
<span style="font-size: 14px;color: #9ca3af">{{item.commentTime}}</span>
|
||||
<div style="display: flex;align-items: center">
|
||||
<span style="margin-right: 5px;font-size: 14px; color: rgb(156, 163, 175);">{{ formatNumber(item.likeNum) }}</span>
|
||||
<el-link @click="addLike(item.commentId)" icon="el-icon-star-off" :underline="false">点赞</el-link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: flex-start;margin-left: 10px;margin-top: 5px">
|
||||
<span style="font-size: 14px;color: #9ca3af">{{item.time}}</span>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="hot">
|
||||
<span slot="label"><i class="el-icon-s-opportunity"></i>最热</span>
|
||||
<div v-for="(item,index) in commentContent" :key="index" style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;margin-top: 20px">
|
||||
<div style="display: flex;flex-direction: row">
|
||||
<div style="width: 50px;height: 50px;">
|
||||
<el-avatar :size="50">{{item.username}}</el-avatar>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: column;justify-content: space-between">
|
||||
<div style="display: flex;flex-direction: row;margin-left: 10px;align-items: center">
|
||||
<span style="font-size: 14px;font-weight: bold;">{{item.username}}</span>
|
||||
<span style="margin-left: 10px">评分: </span>
|
||||
<el-rate
|
||||
style="margin-left: 10px"
|
||||
v-model="item.star" disabled>
|
||||
</el-rate>
|
||||
<span style="margin-left: 10px">
|
||||
|
||||
<el-tag v-if="item.isUsed===0" type="warning" size="mini">没用过</el-tag>
|
||||
<el-tag v-if="item.isUsed===1" type="success" size="mini">用过</el-tag>
|
||||
</span>
|
||||
</div>
|
||||
<div style="margin-left: 10px;margin-top: 5px">
|
||||
<el-card style="border: none;text-align:left;">
|
||||
<span>{{item.content}}</span>
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: row;justify-content: space-between;margin-left: 10px;margin-top: 5px">
|
||||
<span style="font-size: 14px;color: #9ca3af">{{item.commentTime}}</span>
|
||||
<div style="display: flex;align-items: center">
|
||||
<span style="margin-right: 5px;font-size: 14px; color: rgb(156, 163, 175);">{{ formatNumber(item.likeNum) }}</span>
|
||||
<el-link @click="addLike(item.commentId)" icon="el-icon-star-off" :underline="false">点赞</el-link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
@@ -247,6 +299,7 @@ export default {
|
||||
starValue:null,
|
||||
activeNames: ['1'],
|
||||
activeName:'first',
|
||||
activeCommentName:'last',
|
||||
loginDialogVisible:false,
|
||||
editorOption: {
|
||||
theme: 'bubble',
|
||||
@@ -283,12 +336,19 @@ export default {
|
||||
new OrderedList(),
|
||||
],
|
||||
isRouterAlive:true,
|
||||
isDisabled:false,
|
||||
isDisabled2:false,
|
||||
Like:null,
|
||||
checked:false,
|
||||
tabCheckedLast:true,
|
||||
tabCheckedHot:false,
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getProjectDetail();
|
||||
this.getComment();
|
||||
|
||||
this.getLastComment();
|
||||
this.isStart();
|
||||
},
|
||||
watch: {
|
||||
$route () {
|
||||
@@ -328,24 +388,32 @@ export default {
|
||||
},
|
||||
reload() {
|
||||
this.isRouterAlive = false;
|
||||
this.$nextTick(function () {
|
||||
this.$nextTick( ()=> {
|
||||
this.isRouterAlive = true;
|
||||
});
|
||||
},
|
||||
|
||||
getComment(){
|
||||
getComment(tab){
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/selectCommentByPro',
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/selectCommentBy',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
id:this.$route.query.id
|
||||
id:this.$route.query.id,
|
||||
trait:tab.name
|
||||
}
|
||||
}).then(function (res) {
|
||||
that.commentContent=res.data;
|
||||
that.commentNum=Object.keys(that.commentContent).length;
|
||||
if(tab.name==='last'){
|
||||
that.tabCheckedLast=true;
|
||||
that.tabCheckedHot=false;
|
||||
}else if(tab.name==='hot'){
|
||||
that.tabCheckedHot=true;
|
||||
that.tabCheckedLast=false;
|
||||
}
|
||||
});
|
||||
},
|
||||
publishComment(){
|
||||
@@ -370,7 +438,7 @@ export default {
|
||||
type: 'success',
|
||||
offset: 50
|
||||
});
|
||||
that.getComment();
|
||||
that.getLastComment();
|
||||
that.reload();
|
||||
} else {
|
||||
Vue.prototype.$notify.error({
|
||||
@@ -390,6 +458,141 @@ export default {
|
||||
|
||||
|
||||
},
|
||||
formatNumber(num) {
|
||||
return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
|
||||
},
|
||||
|
||||
addLike(id){
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/addLike',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
id:id
|
||||
}
|
||||
}).then((res)=>{
|
||||
if(res.data.code===500){
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: res.data.msg,
|
||||
offset: 50
|
||||
});
|
||||
return;
|
||||
}else{
|
||||
if(!that.tabCheckedLast){
|
||||
that.getHotComment();
|
||||
}else{
|
||||
that.getLastComment();
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
getHotComment(){
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/selectCommentBy',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
id:this.$route.query.id,
|
||||
trait:'hot'
|
||||
}
|
||||
}).then(function (res) {
|
||||
that.commentContent=res.data;
|
||||
});
|
||||
},
|
||||
getLastComment(){
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/selectCommentBy',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
id:this.$route.query.id,
|
||||
trait:'last'
|
||||
}
|
||||
}).then(function (res) {
|
||||
that.commentContent=res.data;
|
||||
that.commentNum=Object.keys(that.commentContent).length;
|
||||
|
||||
});
|
||||
},
|
||||
isStart(){
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/whetherLike',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
proId:this.$route.query.id,
|
||||
|
||||
}
|
||||
}).then(function (res) {
|
||||
that.Like=res.data;
|
||||
});
|
||||
},
|
||||
addStar(){
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/whetherAddLike',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
proId:this.$route.query.id,
|
||||
}
|
||||
}).then((res)=>{
|
||||
if (res.data.code === 500) {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: res.data.msg,
|
||||
offset: 50
|
||||
});
|
||||
} else {
|
||||
this.isStart();
|
||||
this.$router.push({
|
||||
path:'/ProjectDetail',
|
||||
query: {
|
||||
id: this.projectId, refresh: true
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
cancleStar(){
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/whetherCancelLike',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
proId:this.$route.query.id,
|
||||
}
|
||||
}).then((res)=>{
|
||||
if (res.data.code === 500) {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: res.data.msg,
|
||||
offset: 50
|
||||
});
|
||||
} else {
|
||||
this.isStart();
|
||||
// window.location.reload()
|
||||
this.$router.push({
|
||||
path:'/ProjectDetail',
|
||||
query: {
|
||||
id: this.projectId, refresh: true
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -430,4 +633,7 @@ export default {
|
||||
padding: 8px;
|
||||
display: none;
|
||||
}
|
||||
::v-deep .el-card__header{
|
||||
border-bottom: none;
|
||||
}
|
||||
</style>
|
||||
@@ -47,13 +47,17 @@
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
<RightTools></RightTools>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RightTools from "@/components/Home/RightTools.vue";
|
||||
|
||||
export default {
|
||||
name: "RankingComponent",
|
||||
components: {RightTools},
|
||||
data(){
|
||||
return{
|
||||
selectedValue:'1',
|
||||
97
src/components/User/UserComments.vue
Normal file
97
src/components/User/UserComments.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div style="display: flex;flex-direction: column;flex-wrap: nowrap;margin-top: 10px">
|
||||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;justify-content: space-between">
|
||||
<div>
|
||||
<span style="color: #4b5563;font-size: 16px"><span style="font-size: 17px;font-weight: bold">{{index+1}}</span>. 在 {{comments.commentTime}} 发布的评论</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-link :underline="false" style="color: red">申诉</el-link>
|
||||
<el-button @click="toCommentDeatil" icon="el-icon-search" circle style="margin-left: 10px"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<el-card style="border-radius: 10px;margin-top: 10px;">
|
||||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap">
|
||||
<div style="width: 60px;height: 60px;">
|
||||
<el-avatar :size="60">{{ this.$cookie.get('username') }}</el-avatar>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: column;flex-wrap: nowrap;margin-left: 20px">
|
||||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center">
|
||||
<span style="font-size: 16px;font-weight: bold">{{ this.$cookie.get('username') }}</span>
|
||||
<span style="margin-left: 10px">评分: </span>
|
||||
<el-rate
|
||||
style="margin-left: 5px"
|
||||
v-model="comments.star"
|
||||
disabled
|
||||
score-template="{value}">
|
||||
</el-rate>
|
||||
<el-tag v-if="comments.isUsed===1" size="mini" style="margin-left: 10px">
|
||||
用过
|
||||
</el-tag>
|
||||
<el-tag type="warning" v-if="comments.isUsed===0" size="mini" style="margin-left: 10px">
|
||||
没用过
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-card style=";border:none;display: flex;flex-direction:row;justify-content: flex-start;margin-top: 10px">
|
||||
{{comments.content}}
|
||||
</el-card>
|
||||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-top: 10px;align-items: center;justify-content: space-between">
|
||||
<span style="color: #9ca3af;font-size: 15px">
|
||||
{{formatTime}}
|
||||
</span>
|
||||
<div style="font-size: 14px;color:#9ca3af;display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center">
|
||||
<span>项目</span>
|
||||
<span style="margin-left: 8px">•</span>
|
||||
<span v-if="comments.likeNum>=200" style="margin-left: 8px;color: #ffba00">热评</span>
|
||||
<span v-if="comments.likeNum<200" style="margin-left: 8px">非热评</span>
|
||||
<span style="margin-left: 8px">•</span>
|
||||
<span style="margin-left: 8px">点赞</span>
|
||||
<span style="margin-left: 8px">{{comments.likeNum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "UserComments",
|
||||
props:{
|
||||
comments:Object,
|
||||
index:Number
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
value:5,
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
formatTime: function() {
|
||||
if (this.comments) {
|
||||
const dt = new Date(this.comments.commentTime)
|
||||
const year=dt.getFullYear()
|
||||
const month = dt.getMonth()
|
||||
const date = dt.getDate()
|
||||
return `${year}-${month}-${date}`
|
||||
}
|
||||
return '';
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
toCommentDeatil(){
|
||||
this.$router.push({
|
||||
path:'/ProjectDetail',
|
||||
query: {
|
||||
id: this.comments.projectId, refresh: true
|
||||
}})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -63,7 +63,9 @@ export default {
|
||||
offset: 50
|
||||
});
|
||||
setTimeout(()=>{
|
||||
window.location.reload();
|
||||
this.$router.push({
|
||||
path:'/home',
|
||||
})
|
||||
},1000)
|
||||
}
|
||||
|
||||
|
||||
@@ -43,10 +43,33 @@
|
||||
<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-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="third">
|
||||
<el-empty description="暂无项目" :image-size="115"></el-empty>
|
||||
<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"></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"></UserProjects>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
@@ -59,10 +82,12 @@
|
||||
<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";
|
||||
|
||||
export default {
|
||||
name: "UserInfoPage",
|
||||
components: {RightTools},
|
||||
components: {UserComments, UserProjects, RightTools},
|
||||
data(){
|
||||
return{
|
||||
activeName:'first',
|
||||
@@ -71,8 +96,9 @@ export default {
|
||||
creatTime:null,
|
||||
projectNum:0,
|
||||
userId:null,
|
||||
projectList:null,
|
||||
commentList:{},
|
||||
projectList:[],
|
||||
commentList:[],
|
||||
like:[],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -123,6 +149,7 @@ export default {
|
||||
}).then(function (res) {
|
||||
that.projectList=JSON.parse(res.data.project);
|
||||
that.commentList=JSON.parse(res.data.comment);
|
||||
that.like=JSON.parse(res.data.like)
|
||||
});
|
||||
},
|
||||
}
|
||||
|
||||
69
src/components/User/UserProjects.vue
Normal file
69
src/components/User/UserProjects.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<el-card style="border-radius: 15px;margin-top: 10px">
|
||||
<div style="cursor: pointer;display: flex;flex-direction: row;flex-wrap: nowrap">
|
||||
<!-- <div style="display: flex;align-items: center">-->
|
||||
<!-- <span style="font-size: 16px;font-weight: bold">●</span>-->
|
||||
<!-- </div>-->
|
||||
<div @click="toProjectDetail" class="userProjects" style=";margin-left:10px;display: flex;flex-direction: column;flex-wrap: nowrap">
|
||||
<div style="margin-left: 10px;display: flex;flex-direction: row;justify-content: flex-start">
|
||||
<span style="font-size: 16px;font-weight: bold">{{project.projectName}}</span>
|
||||
</div>
|
||||
<div style="margin-top: 10px;margin-left: 10px;">
|
||||
<span style="display: flex;flex-direction: row;justify-content:flex-start;text-align: left;font-size: 16px;color: #9ca3af">{{brief}}</span>
|
||||
</div>
|
||||
<div style=" margin-left: 10px;;margin-top: 10px;display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center">
|
||||
<div style="width: 10px;height: 10px;background-color: #42b983;border-radius: 50px"></div>
|
||||
<el-tag size="mini" style="margin-left: 5px;border-radius: 10px">
|
||||
{{project.categoryName}}
|
||||
</el-tag>
|
||||
<span style="margin-left: 5px;font-size: 14px;color: #9ca3af">●</span>
|
||||
<span style="margin-left: 5px;font-size: 14px;color: #9ca3af">{{ formatNumber(project.lookCount) }}</span>
|
||||
<span style="margin-left: 5px;font-size: 14px;color: #9ca3af">●</span>
|
||||
<span style="margin-left: 5px;font-size: 14px;color: #9ca3af">{{project.submitTime}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "UserProjects",
|
||||
props:{
|
||||
project:Object
|
||||
},
|
||||
|
||||
|
||||
data(){
|
||||
return{
|
||||
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
brief:function(){
|
||||
return this.project.projectDescription.substr(0, 43) + '...';
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
formatNumber(num) {
|
||||
return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
|
||||
},
|
||||
toProjectDetail(){
|
||||
this.$router.push({
|
||||
path:'/ProjectDetail',
|
||||
query: {
|
||||
id: this.project.projectId, refresh: true
|
||||
}})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.userProjects:hover{
|
||||
background-color: #eeeeee;
|
||||
border-radius: 10px;
|
||||
border: #9ca3af;
|
||||
}
|
||||
</style>
|
||||
@@ -3,7 +3,7 @@ import VueRouter from 'vue-router'
|
||||
import index from '../views/index.vue'
|
||||
import home from "@/components/Home/Home.vue";
|
||||
import monthly from "@/components/Monthly/Monthly.vue";
|
||||
import ranking from "@/components/Ranking.vue";
|
||||
import ranking from "@/components/Ranking/Ranking.vue";
|
||||
import paper from "@/components/Paper/Paper.vue";
|
||||
import MonthlyDetail from "@/components/Monthly/MonthlyDetail.vue";
|
||||
import MonthlyByTags from "@/components/Monthly/MonthlyByTags.vue";
|
||||
|
||||
Reference in New Issue
Block a user