点赞/评论/个人主页功能完善
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user