Skip to content

B
beyond-clouds-front
Commit d1528f17 by yanju
Options

添加点赞功能

parent bd3e03fa
Showing with 457 additions and 49 deletions
action/config.js
...@@ -130,6 +130,9 @@ export default { ...@@ -130,6 +130,9 @@ export default {
Post:{ Post:{
release:'/api/post',//发布动态 release:'/api/post',//发布动态
}, },
PostPraise:{
praise:'/api/post/',//动态点赞 +{postId}/praise
},
PostComment:{ PostComment:{
release:'/api/post/',//发布动态评论 +{postId}/comment release:'/api/post/',//发布动态评论 +{postId}/comment
...@@ -139,6 +142,10 @@ export default { ...@@ -139,6 +142,10 @@ export default {
release:'/api/blog'//发布博客 release:'/api/blog'//发布博客
}, },
BlogPraise:{
praise:'/api/blog/' ,//博客点赞 +{blogId}/praise
},
BlogComment:{ BlogComment:{
release:'/api/blog/', //发布博客评论 +{blogId}/comment release:'/api/blog/', //发布博客评论 +{blogId}/comment
}, },
...@@ -179,6 +186,11 @@ export default { ...@@ -179,6 +186,11 @@ export default {
release:'/api/question'//发布问题 release:'/api/question'//发布问题
}, },
QuestionPraise:{
praise:'/api/question/' ,//博客点赞 +{blogId}/praise
replyPraise:'/api/question/reply/',//回复点赞 +{replyId}/praise
},
QuestionReply:{ QuestionReply:{
release:'/api/question/',//发布回复 +{questionId}/reply release:'/api/question/',//发布回复 +{questionId}/reply
}, },
...@@ -189,6 +201,10 @@ export default { ...@@ -189,6 +201,10 @@ export default {
Project:{ Project:{
release:'/api/project',//发布项目 release:'/api/project',//发布项目
}, },
ProjectPraise:{
praise:'/api/project/' ,//项目点赞 +{blogId}/praise
},
ProjectComment:{ ProjectComment:{
release:'/api/project/',//项目发表评论 +{projectId}/comment release:'/api/project/',//项目发表评论 +{projectId}/comment
}, },
...@@ -197,7 +213,9 @@ export default { ...@@ -197,7 +213,9 @@ export default {
Post:{ Post:{
delete:'/api/post/',//删除动态 +{postId} delete:'/api/post/',//删除动态 +{postId}
}, },
PostPraise:{
praise:'/api/post/',//动态点赞 +{postId}/praise
},
PostComment:{ PostComment:{
delete:'/api/post/comment/',//删除动态评论 +{commentId} delete:'/api/post/comment/',//删除动态评论 +{commentId}
}, },
...@@ -205,6 +223,9 @@ export default { ...@@ -205,6 +223,9 @@ export default {
Blog:{ Blog:{
delete:'/api/blog/'//删除博客 +{blogId} delete:'/api/blog/'//删除博客 +{blogId}
}, },
BlogPraise:{
praise:'/api/blog/' ,//博客点赞 +{blogId}/praise
},
BlogComment:{ BlogComment:{
delete:'/api/blog/comment/', //删除博客评论 +{commentId} delete:'/api/blog/comment/', //删除博客评论 +{commentId}
...@@ -219,6 +240,11 @@ export default { ...@@ -219,6 +240,11 @@ export default {
delete:'/api/question/'//删除问题 +{questionId} delete:'/api/question/'//删除问题 +{questionId}
}, },
QuestionPraise:{
praise:'/api/question/' ,//博客点赞 +{blogId}/praise
replyPraise:'/api/question/reply/',//回复点赞 +{replyId}/praise
},
Topic:{ Topic:{
cancelFollow:'/api/topic/',//取消关注 +{topicId}/follower cancelFollow:'/api/topic/',//取消关注 +{topicId}/follower
}, },
...@@ -235,6 +261,10 @@ export default { ...@@ -235,6 +261,10 @@ export default {
delete:'/api/project/',//删除项目 +{projectId} delete:'/api/project/',//删除项目 +{projectId}
}, },
ProjectPraise:{
praise:'/api/project/' ,//项目点赞 +{blogId}/praise
},
ProjectComment:{ ProjectComment:{
delete:'/api/project/comment/',//删除项目评论 +{commentId} delete:'/api/project/comment/',//删除项目评论 +{commentId}
}, },
......
assets/common.scss
...@@ -385,16 +385,16 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net> ...@@ -385,16 +385,16 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
//icon //icon
.fadeIcon-enter-active ,.fadeIcon-leave-active{ .fadeIcon-enter-active ,.fadeIcon-leave-active{
transition: all .5s; transition: all .8s;
} }
.fadeIcon-enter { .fadeIcon-enter {
opacity: 0; opacity: 0;
transform: translateY(-10px); transform: scale(.5);
} }
.fadeIcon-leave-to{ .fadeIcon-leave-to{
opacity: 0; opacity: 0;
transform: translateY(10px); transform: scale(1.2);
} }
......
components/pc/answerCard.vue
...@@ -30,6 +30,10 @@ ...@@ -30,6 +30,10 @@
<!-- <yun-icon name="star" size="10px" vertical="middle" color="#ccc"></yun-icon>--> <!-- <yun-icon name="star" size="10px" vertical="middle" color="#ccc"></yun-icon>-->
<!-- <span>12</span>--> <!-- <span>12</span>-->
<!-- </div>--> <!-- </div>-->
<div class="icon-box" v-if="praiseNum">
<yun-icon name="like1" size="12px" vertical="top" color="#ccc"></yun-icon>
<span>{{praiseNum}}</span>
</div>
<div class="icon-box"> <div class="icon-box">
<yun-icon name="view" size="10px" vertical="middle" color="#ccc"></yun-icon> <yun-icon name="view" size="10px" vertical="middle" color="#ccc"></yun-icon>
<span>{{viewNumber}}</span> <span>{{viewNumber}}</span>
...@@ -107,6 +111,7 @@ ...@@ -107,6 +111,7 @@
this.userNick = info.userNick; this.userNick = info.userNick;
this.viewNumber = info.viewNumber; this.viewNumber = info.viewNumber;
this.status = info.status; this.status = info.status;
this.praiseNum = info.praiseNum;
} }
if(this.info.itemId){ if(this.info.itemId){
this.questionTitle = info.title; this.questionTitle = info.title;
......
components/pc/comment/commentCard1.vue
...@@ -21,8 +21,8 @@ ...@@ -21,8 +21,8 @@
<h6>{{dateConvert2}}</h6> <h6>{{dateConvert2}}</h6>
<p> <p>
<span v-if="totalRecords" @click="showCommentInput=!showCommentInput">回复({{totalRecords}})</span> <span v-if="totalRecords" @click="showCommentInput=!showCommentInput">回复({{totalRecords}})</span>
<span @click="showCommentInput=!showCommentInput">回复</span> <span v-if="!totalRecords" @click="showCommentInput=!showCommentInput">回复</span>
<!-- <span>赞{{likeNum}}</span>--> <!-- <span :class="returnlikeWordClass" @click="clickToPraise">赞({{praiseNum}})</span>-->
<span @click="dataDeleteComment" v-if="this.info.userId ===$store.state.userProfile.userId">删除</span> <span @click="dataDeleteComment" v-if="this.info.userId ===$store.state.userProfile.userId">删除</span>
</p> </p>
</div> </div>
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
<h6>{{dateConvert2}}</h6> <h6>{{dateConvert2}}</h6>
<p> <p>
<span v-if="totalRecords" @click="showCommentInput=!showCommentInput">回复({{totalRecords}})</span> <span v-if="totalRecords" @click="showCommentInput=!showCommentInput">回复({{totalRecords}})</span>
<span @click="showCommentInput=!showCommentInput">回复</span> <span v-if="!totalRecords" @click="showCommentInput=!showCommentInput">回复</span>
<!-- <span>赞{{likeNum}}</span>--> <!-- <span>赞{{likeNum}}</span>-->
<span @click="dataDeleteComment" v-if="this.info.userId ===$store.state.userProfile.userId">删除</span> <span @click="dataDeleteComment" v-if="this.info.userId ===$store.state.userProfile.userId">删除</span>
</p> </p>
...@@ -107,6 +107,9 @@ ...@@ -107,6 +107,9 @@
computed:{ computed:{
dateConvert2(){ dateConvert2(){
return dateConvert(this.info.createTime) return dateConvert(this.info.createTime)
},
returnlikeWordClass(){
return this.praised?'likeActive':'like'
} }
}, },
...@@ -128,7 +131,8 @@ ...@@ -128,7 +131,8 @@
currentPage:1, currentPage:1,
pages:1, pages:1,
totalRecords:0, totalRecords:0,
praised:false,
praiseNum:0,
} }
}, },
...@@ -306,6 +310,50 @@ ...@@ -306,6 +310,50 @@
}else{ }else{
} }
},
clickToPraise(){
if(this.praised){
this.dataDeletePraise();
}else{
this.dataPostPraise()
}
},
dataPostPraise(){
this.$axios.$post(config.api.post.QuestionPraise.replyPraise+this.info.replyId+'/praise').then((response)=>{
if(response.code===0){
this.$message({
type:'success',
message:'点赞成功'
})
this.praised = true;
this.praiseNum = this.praiseNum +1;
}else if(response.code===1000){
this.$message({
type:'warning',
message:'请在登陆后操作'
})
}
})
},
dataDeletePraise(){
this.$axios.$delete(config.api.delete.QuestionPraise.replyPraise+this.info.replyId+'/praise').then((response)=>{
if(response.code===0){
this.$message({
type:'success',
message:'取消点赞'
})
this.praised = false;
this.praiseNum = this.praiseNum -1;
}else if(response.code===1000){
this.$message({
type:'warning',
message:'请在登陆后操作'
})
}
})
} }
} }
...@@ -377,6 +425,15 @@ ...@@ -377,6 +425,15 @@
} }
p{ p{
@include fontStyle(12,16,500,#999,start); @include fontStyle(12,16,500,#999,start);
.like{
&:hover{
color:#00AAE6;
}
}
.likeActive{
color: #00AAE6;
}
span{ span{
margin-left:20*$length; margin-left:20*$length;
@extend %cursorPointer; @extend %cursorPointer;
......
components/pc/projectCard.vue
...@@ -41,10 +41,10 @@ ...@@ -41,10 +41,10 @@
<!-- <yun-icon name="star" size="12px" vertical="top" color="#ccc"></yun-icon>--> <!-- <yun-icon name="star" size="12px" vertical="top" color="#ccc"></yun-icon>-->
<!-- <span>{{cardStar}}</span>--> <!-- <span>{{cardStar}}</span>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="icon-box" v-if="cardLike">--> <div class="icon-box" v-if="praiseNum">
<!-- <yun-icon name="like1" size="12px" vertical="top" color="#ccc"></yun-icon>--> <yun-icon name="like1" size="12px" vertical="top" color="#ccc"></yun-icon>
<!-- <span>{{cardLike}}</span>--> <span>{{praiseNum}}</span>
<!-- </div>--> </div>
<div class="icon-box" v-if="cardView"> <div class="icon-box" v-if="cardView">
<yun-icon name="view" size="12px" vertical="top" color="#ccc"></yun-icon> <yun-icon name="view" size="12px" vertical="top" color="#ccc"></yun-icon>
<span>{{cardView}}</span> <span>{{cardView}}</span>
...@@ -155,6 +155,7 @@ ...@@ -155,6 +155,7 @@
this.cardUser = info.userNick; this.cardUser = info.userNick;
this.cardType = 2; this.cardType = 2;
this.status = info.status; this.status = info.status;
this.praiseNum =info.praiseNum
} }
if(this.info.projectId){ if(this.info.projectId){
...@@ -169,6 +170,7 @@ ...@@ -169,6 +170,7 @@
this.cardUser = info.author; this.cardUser = info.author;
this.cardType = 1; this.cardType = 1;
this.status = info.status; this.status = info.status;
this.praiseNum =info.praiseNum
} }
if(this.info.contentId){ if(this.info.contentId){
......
pages/answer/detail/_id.vue
...@@ -29,10 +29,10 @@ ...@@ -29,10 +29,10 @@
<!-- <yun-icon name="star" size="12px" pb="7px" color="#ccc"></yun-icon>--> <!-- <yun-icon name="star" size="12px" pb="7px" color="#ccc"></yun-icon>-->
<!-- <span>4</span>--> <!-- <span>4</span>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="icon-box">--> <div class="icon-box">
<!-- <yun-icon name="like1" size="12px" pb="7px" color="#ccc"></yun-icon>--> <yun-icon name="like1" size="12px" pb="7px" color="#ccc"></yun-icon>
<!-- <span>4</span>--> <span>{{articleDetail.praiseNum}}</span>
<!-- </div>--> </div>
<div class="icon-box"> <div class="icon-box">
<yun-icon name="view" size="12px" pb="7px" color="#ccc"></yun-icon> <yun-icon name="view" size="12px" pb="7px" color="#ccc"></yun-icon>
<span>{{articleDetail.viewNumber}}</span> <span>{{articleDetail.viewNumber}}</span>
...@@ -46,11 +46,11 @@ ...@@ -46,11 +46,11 @@
<div class="article__content" v-html="articleDetail.contentHtml"> <div class="article__content" v-html="articleDetail.contentHtml">
</div> </div>
<!-- <div class="article__like">--> <div :class="returnArticleLikeClass" @click="clickToPraise">
<!-- <yun-icon name="like_egg" class="egg"></yun-icon>--> <yun-icon name="like_egg" class="egg"></yun-icon>
<!-- <yun-icon name="like1" class="heart"></yun-icon>--> <yun-icon name="like1" class="heart"></yun-icon>
<!-- <p class="num">122</p>--> <p class="num">{{articleDetail.praiseNum}}</p>
<!-- </div>--> </div>
<div class="article__footer"> <div class="article__footer">
<p class="link" v-if="false">原文链接：<a target="_blank" :href="articleDetail.originLink"> <span>{{articleDetail.originLink}}</span></a></p> <p class="link" v-if="false">原文链接：<a target="_blank" :href="articleDetail.originLink"> <span>{{articleDetail.originLink}}</span></a></p>
<p></p> <p></p>
...@@ -86,8 +86,8 @@ ...@@ -86,8 +86,8 @@
<yun-icon name="star" class="star"></yun-icon> <yun-icon name="star" class="star"></yun-icon>
</div> </div>
<div class="option-item" @click="MessageAlert"> <div class="option-item" @click="clickToPraise">
<yun-icon name="like1" class="like"></yun-icon> <yun-icon name="like1" :class="returnOptionLikeClass"></yun-icon>
</div> </div>
<div class="option-item" @click="MessageAlert"> <div class="option-item" @click="MessageAlert">
...@@ -141,6 +141,14 @@ ...@@ -141,6 +141,14 @@
answerList:[], answerList:[],
} }
}, },
computed:{
returnArticleLikeClass(){
return this.articleDetail.praised?'article__like2':'article__like1'
},
returnOptionLikeClass(){
return this.articleDetail.praised?'likeActive':'like'
}
},
created(){ created(){
this.dataGetReAnswerList(); this.dataGetReAnswerList();
...@@ -182,6 +190,53 @@ ...@@ -182,6 +190,53 @@
this.answerList = response.data.dataList; this.answerList = response.data.dataList;
}); });
}, },
clickToPraise(){
if(this.articleDetail.praised){
this.dataDeletePraise();
}else{
this.dataPostPraise()
}
},
dataPostPraise(){
this.$axios.$post(config.api.post.QuestionPraise.praise+this.articleDetail.questionId+'/praise').then((response)=>{
if(response.code===0){
this.$message({
type:'success',
message:'点赞成功'
})
this.articleDetail.praised = true;
this.articleDetail.praiseNum = this.articleDetail.praiseNum +1;
}else if(response.code===1000){
this.$message({
type:'warning',
message:'请在登陆后操作'
})
}
})
},
dataDeletePraise(){
this.$axios.$delete(config.api.delete.QuestionPraise.praise+this.articleDetail.questionId+'/praise').then((response)=>{
if(response.code===0){
this.$message({
type:'success',
message:'取消点赞'
})
this.articleDetail.praised = false;
this.articleDetail.praiseNum = this.articleDetail.praiseNum -1;
}else if(response.code===1000){
this.$message({
type:'warning',
message:'请在登陆后操作'
})
}
})
}
}, },
components:{ components:{
...@@ -343,7 +398,7 @@ ...@@ -343,7 +398,7 @@
@extend %article-content; @extend %article-content;
} }
.article__like{ .article__like1{
margin:60*$length auto; margin:60*$length auto;
width:66*$length; width:66*$length;
height:64*$length; height:64*$length;
...@@ -385,6 +440,52 @@ ...@@ -385,6 +440,52 @@
@extend %animate-transition; @extend %animate-transition;
} }
}
.article__like2{
margin:60*$length auto;
width:66*$length;
height:64*$length;
position: relative;
@extend %cursorPointer;
@extend %flex-column-center;
&:hover{
.egg{
color:#FF7474;
}
.heart{
color:#fff;
}
.num{
color:#fff;
}
}
.egg{
color:#FF7474;
font-size: 62*$length;
padding-bottom: 16*$length;
@extend %animate-transition;
}
.heart{
position: absolute;
font-size: 18*$length;
color:#fff;
left:24*$length;
top:10*$length;
@extend %animate-transition;
}
.num{
position: absolute;
@include fontStyle(12,19,500,#fff,center);
left:0;
width:100%;
top:38*$length;
@extend %animate-transition;
}
} }
.article__footer{ .article__footer{
...@@ -539,6 +640,9 @@ ...@@ -539,6 +640,9 @@
color:#CCCCCC; color:#CCCCCC;
font-size: 12px; font-size: 12px;
} }
.likeActive{
color:#FF7474
}
&:hover{ &:hover{
.star{ .star{
......
pages/blog/detail/_id.vue
...@@ -30,10 +30,10 @@ ...@@ -30,10 +30,10 @@
<!-- <yun-icon name="star" size="12px" pb="7px" color="#ccc"></yun-icon>--> <!-- <yun-icon name="star" size="12px" pb="7px" color="#ccc"></yun-icon>-->
<!-- <span>4</span>--> <!-- <span>4</span>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="icon-box">--> <div class="icon-box">
<!-- <yun-icon name="like1" size="12px" pb="7px" color="#ccc"></yun-icon>--> <yun-icon name="like1" size="12px" pb="7px" color="#ccc"></yun-icon>
<!-- <span>4</span>--> <span>{{articleDetail.praiseNum}}</span>
<!-- </div>--> </div>
<div class="icon-box"> <div class="icon-box">
<yun-icon name="view" size="12px" pb="7px" color="#ccc"></yun-icon> <yun-icon name="view" size="12px" pb="7px" color="#ccc"></yun-icon>
<span>{{articleDetail.viewNumber}}</span> <span>{{articleDetail.viewNumber}}</span>
...@@ -47,11 +47,12 @@ ...@@ -47,11 +47,12 @@
<div class="article__content" v-html="articleDetail.contentHtml"> <div class="article__content" v-html="articleDetail.contentHtml">
</div> </div>
<!-- <div class="article__like">-->
<!-- <yun-icon name="like_egg" class="egg"></yun-icon>--> <div :class="returnArticleLikeClass" @click="clickToPraise">
<!-- <yun-icon name="like1" class="heart"></yun-icon>--> <yun-icon name="like_egg" class="egg"></yun-icon>
<!-- <p class="num">122</p>--> <yun-icon name="like1" class="heart"></yun-icon>
<!-- </div>--> <p class="num">{{articleDetail.praiseNum}}</p>
</div>
<div class="article__footer"> <div class="article__footer">
<!-- <p class="link">原文链接：<a target="_blank" :href="articleDetail.originLink"> <span>{{articleDetail.originLink}}</span></a></p>--> <!-- <p class="link">原文链接：<a target="_blank" :href="articleDetail.originLink"> <span>{{articleDetail.originLink}}</span></a></p>-->
<p></p> <p></p>
...@@ -83,10 +84,9 @@ ...@@ -83,10 +84,9 @@
<yun-icon name="star" class="star"></yun-icon> <yun-icon name="star" class="star"></yun-icon>
</div> </div>
<div class="option-item" @click="MessageAlert"> <div class="option-item" @click="clickToPraise">
<yun-icon name="like1" class="like"></yun-icon> <yun-icon name="like1" :class="returnOptionLikeClass"></yun-icon>
</div> </div>
<div class="option-item" @click="MessageAlert"> <div class="option-item" @click="MessageAlert">
<yun-icon name="comment" class="comment"></yun-icon> <yun-icon name="comment" class="comment"></yun-icon>
</div> </div>
...@@ -138,6 +138,15 @@ ...@@ -138,6 +138,15 @@
} }
}, },
computed:{
returnArticleLikeClass(){
return this.articleDetail.praised?'article__like2':'article__like1'
},
returnOptionLikeClass(){
return this.articleDetail.praised?'likeActive':'like'
}
},
created(){ created(){
globalBus.$emit(config.event.listenDetailInfo,this.articleDetail.blogTitle,'blog') globalBus.$emit(config.event.listenDetailInfo,this.articleDetail.blogTitle,'blog')
}, },
...@@ -171,6 +180,53 @@ ...@@ -171,6 +180,53 @@
}) })
} }
},
clickToPraise(){
if(this.articleDetail.praised){
this.dataDeletePraise();
}else{
this.dataPostPraise()
}
},
dataPostPraise(){
this.$axios.$post(config.api.post.BlogPraise.praise+this.articleDetail.blogId+'/praise').then((response)=>{
if(response.code===0){
this.$message({
type:'success',
message:'点赞成功'
})
this.articleDetail.praised = true;
this.articleDetail.praiseNum = this.articleDetail.praiseNum +1;
}else if(response.code===1000){
this.$message({
type:'warning',
message:'请在登陆后操作'
})
}
})
},
dataDeletePraise(){
this.$axios.$delete(config.api.delete.BlogPraise.praise+this.articleDetail.blogId+'/praise').then((response)=>{
if(response.code===0){
this.$message({
type:'success',
message:'取消点赞'
})
this.articleDetail.praised = false;
this.articleDetail.praiseNum = this.articleDetail.praiseNum -1;
}else if(response.code===1000){
this.$message({
type:'warning',
message:'请在登陆后操作'
})
}
})
} }
}, },
...@@ -335,7 +391,7 @@ ...@@ -335,7 +391,7 @@
} }
.article__like{ .article__like1{
margin:60*$length auto; margin:60*$length auto;
width:66*$length; width:66*$length;
height:64*$length; height:64*$length;
...@@ -377,6 +433,52 @@ ...@@ -377,6 +433,52 @@
@extend %animate-transition; @extend %animate-transition;
} }
}
.article__like2{
margin:60*$length auto;
width:66*$length;
height:64*$length;
position: relative;
@extend %cursorPointer;
@extend %flex-column-center;
&:hover{
.egg{
color:#FF7474;
}
.heart{
color:#fff;
}
.num{
color:#fff;
}
}
.egg{
color:#FF7474;
font-size: 62*$length;
padding-bottom: 16*$length;
@extend %animate-transition;
}
.heart{
position: absolute;
font-size: 18*$length;
color:#fff;
left:24*$length;
top:10*$length;
@extend %animate-transition;
}
.num{
position: absolute;
@include fontStyle(12,19,500,#fff,center);
left:0;
width:100%;
top:38*$length;
@extend %animate-transition;
}
} }
.article__footer{ .article__footer{
...@@ -531,6 +633,9 @@ ...@@ -531,6 +633,9 @@
color:#CCCCCC; color:#CCCCCC;
font-size: 12px; font-size: 12px;
} }
.likeActive{
color:#FF7474
}
&:hover{ &:hover{
.star{ .star{
......
pages/project/detail/_id.vue
...@@ -30,10 +30,10 @@ ...@@ -30,10 +30,10 @@
<!-- <yun-icon name="star" size="12px" pb="7px" color="#ccc"></yun-icon>--> <!-- <yun-icon name="star" size="12px" pb="7px" color="#ccc"></yun-icon>-->
<!-- <span>4</span>--> <!-- <span>4</span>-->
<!-- </div>--> <!-- </div>-->
<!-- <div class="icon-box">--> <div class="icon-box">
<!-- <yun-icon name="like1" size="12px" pb="7px" color="#ccc"></yun-icon>--> <yun-icon name="like1" size="12px" pb="7px" color="#ccc"></yun-icon>
<!-- <span>4</span>--> <span>{{articleDetail.praiseNum}}</span>
<!-- </div>--> </div>
<div class="icon-box"> <div class="icon-box">
<yun-icon name="view" size="12px" pb="7px" color="#ccc"></yun-icon> <yun-icon name="view" size="12px" pb="7px" color="#ccc"></yun-icon>
<span>{{articleDetail.viewNumber}}</span> <span>{{articleDetail.viewNumber}}</span>
...@@ -47,11 +47,11 @@ ...@@ -47,11 +47,11 @@
<div class="article__content" v-html="articleDetail.contentHtml"> <div class="article__content" v-html="articleDetail.contentHtml">
</div> </div>
<!-- <div class="article__like">--> <div :class="returnArticleLikeClass" @click="clickToPraise">
<!-- <yun-icon name="like_egg" class="egg"></yun-icon>--> <yun-icon name="like_egg" class="egg"></yun-icon>
<!-- <yun-icon name="like1" class="heart"></yun-icon>--> <yun-icon name="like1" class="heart"></yun-icon>
<!-- <p class="num">122</p>--> <p class="num">{{articleDetail.praiseNum}}</p>
<!-- </div>--> </div>
<div class="article__footer"> <div class="article__footer">
<p class="link" v-if="!articleDetail.projectId">原文链接：<a target="_blank" :href="articleDetail.sourceLink"> <span>{{articleDetail.sourceLink}}</span></a></p> <p class="link" v-if="!articleDetail.projectId">原文链接：<a target="_blank" :href="articleDetail.sourceLink"> <span>{{articleDetail.sourceLink}}</span></a></p>
<p></p> <p></p>
...@@ -83,8 +83,8 @@ ...@@ -83,8 +83,8 @@
<yun-icon name="star" class="star"></yun-icon> <yun-icon name="star" class="star"></yun-icon>
</div> </div>
<div class="option-item" @click="MessageAlert"> <div class="option-item" @click="clickToPraise">
<yun-icon name="like1" class="like"></yun-icon> <yun-icon name="like1" :class="returnOptionLikeClass"></yun-icon>
</div> </div>
<div class="option-item" @click="MessageAlert"> <div class="option-item" @click="MessageAlert">
...@@ -160,6 +160,15 @@ ...@@ -160,6 +160,15 @@
} }
}, },
computed:{
returnArticleLikeClass(){
return this.articleDetail.praised?'article__like2':'article__like1'
},
returnOptionLikeClass(){
return this.articleDetail.praised?'likeActive':'like'
}
},
created(){ created(){
globalBus.$emit(config.event.listenDetailInfo,this.articleDetail.projectName,'project') globalBus.$emit(config.event.listenDetailInfo,this.articleDetail.projectName,'project')
}, },
...@@ -187,6 +196,53 @@ ...@@ -187,6 +196,53 @@
}) })
} }
},
clickToPraise(){
if(this.articleDetail.praised){
this.dataDeletePraise();
}else{
this.dataPostPraise()
}
},
dataPostPraise(){
this.$axios.$post(config.api.post.ProjectPraise.praise+this.articleDetail.projectId+'/praise').then((response)=>{
if(response.code===0){
this.$message({
type:'success',
message:'点赞成功'
})
this.articleDetail.praised = true;
this.articleDetail.praiseNum = this.articleDetail.praiseNum +1;
}else if(response.code===1000){
this.$message({
type:'warning',
message:'请在登陆后操作'
})
}
})
},
dataDeletePraise(){
this.$axios.$delete(config.api.delete.ProjectPraise.praise+this.articleDetail.projectId+'/praise').then((response)=>{
if(response.code===0){
this.$message({
type:'success',
message:'取消点赞'
})
this.articleDetail.praised = false;
this.articleDetail.praiseNum = this.articleDetail.praiseNum -1;
}else if(response.code===1000){
this.$message({
type:'warning',
message:'请在登陆后操作'
})
}
})
} }
}, },
...@@ -350,7 +406,7 @@ ...@@ -350,7 +406,7 @@
} }
.article__like{ .article__like1{
margin:60*$length auto; margin:60*$length auto;
width:66*$length; width:66*$length;
height:64*$length; height:64*$length;
...@@ -392,6 +448,52 @@ ...@@ -392,6 +448,52 @@
@extend %animate-transition; @extend %animate-transition;
} }
}
.article__like2{
margin:60*$length auto;
width:66*$length;
height:64*$length;
position: relative;
@extend %cursorPointer;
@extend %flex-column-center;
&:hover{
.egg{
color:#FF7474;
}
.heart{
color:#fff;
}
.num{
color:#fff;
}
}
.egg{
color:#FF7474;
font-size: 62*$length;
padding-bottom: 16*$length;
@extend %animate-transition;
}
.heart{
position: absolute;
font-size: 18*$length;
color:#fff;
left:24*$length;
top:10*$length;
@extend %animate-transition;
}
.num{
position: absolute;
@include fontStyle(12,19,500,#fff,center);
left:0;
width:100%;
top:38*$length;
@extend %animate-transition;
}
} }
.article__footer{ .article__footer{
...@@ -549,6 +651,9 @@ ...@@ -549,6 +651,9 @@
color:#CCCCCC; color:#CCCCCC;
font-size: 12px; font-size: 12px;
} }
.likeActive{
color:#FF7474
}
&:hover{ &:hover{
.star{ .star{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment