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