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 {
Post:{
release:'/api/post',//发布动态
},
PostPraise:{
praise:'/api/post/',//动态点赞 +{postId}/praise
},
PostComment:{
release:'/api/post/',//发布动态评论 +{postId}/comment
......@@ -139,6 +142,10 @@ export default {
release:'/api/blog'//发布博客
},
BlogPraise:{
praise:'/api/blog/' ,//博客点赞 +{blogId}/praise
},
BlogComment:{
release:'/api/blog/', //发布博客评论 +{blogId}/comment
},
......@@ -179,6 +186,11 @@ export default {
release:'/api/question'//发布问题
},
QuestionPraise:{
praise:'/api/question/' ,//博客点赞 +{blogId}/praise
replyPraise:'/api/question/reply/',//回复点赞 +{replyId}/praise
},
QuestionReply:{
release:'/api/question/',//发布回复 +{questionId}/reply
},
......@@ -189,6 +201,10 @@ export default {
Project:{
release:'/api/project',//发布项目
},
ProjectPraise:{
praise:'/api/project/' ,//项目点赞 +{blogId}/praise
},
ProjectComment:{
release:'/api/project/',//项目发表评论 +{projectId}/comment
},
......@@ -197,7 +213,9 @@ export default {
Post:{
delete:'/api/post/',//删除动态 +{postId}
},
PostPraise:{
praise:'/api/post/',//动态点赞 +{postId}/praise
},
PostComment:{
delete:'/api/post/comment/',//删除动态评论 +{commentId}
},
......@@ -205,6 +223,9 @@ export default {
Blog:{
delete:'/api/blog/'//删除博客 +{blogId}
},
BlogPraise:{
praise:'/api/blog/' ,//博客点赞 +{blogId}/praise
},
BlogComment:{
delete:'/api/blog/comment/', //删除博客评论 +{commentId}
......@@ -219,6 +240,11 @@ export default {
delete:'/api/question/'//删除问题 +{questionId}
},
QuestionPraise:{
praise:'/api/question/' ,//博客点赞 +{blogId}/praise
replyPraise:'/api/question/reply/',//回复点赞 +{replyId}/praise
},
Topic:{
cancelFollow:'/api/topic/',//取消关注 +{topicId}/follower
},
......@@ -235,6 +261,10 @@ export default {
delete:'/api/project/',//删除项目 +{projectId}
},
ProjectPraise:{
praise:'/api/project/' ,//项目点赞 +{blogId}/praise
},
ProjectComment:{
delete:'/api/project/comment/',//删除项目评论 +{commentId}
},
......
assets/common.scss
......@@ -385,16 +385,16 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
//icon
.fadeIcon-enter-active ,.fadeIcon-leave-active{
transition: all .5s;
transition: all .8s;
}
.fadeIcon-enter {
opacity: 0;
transform: translateY(-10px);
transform: scale(.5);
}
.fadeIcon-leave-to{
opacity: 0;
transform: translateY(10px);
transform: scale(1.2);
}
......
components/pc/answerCard.vue
......@@ -30,6 +30,10 @@
<!-- <yun-icon name="star" size="10px" vertical="middle" color="#ccc"></yun-icon>-->
<!-- <span>12</span>-->
<!-- </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">
<yun-icon name="view" size="10px" vertical="middle" color="#ccc"></yun-icon>
<span>{{viewNumber}}</span>
......@@ -107,6 +111,7 @@
this.userNick = info.userNick;
this.viewNumber = info.viewNumber;
this.status = info.status;
this.praiseNum = info.praiseNum;
}
if(this.info.itemId){
this.questionTitle = info.title;
......
components/pc/comment/commentCard1.vue
......@@ -21,8 +21,8 @@
<h6>{{dateConvert2}}</h6>
<p>
<span v-if="totalRecords" @click="showCommentInput=!showCommentInput">回复({{totalRecords}})</span>
<span @click="showCommentInput=!showCommentInput">回复</span>
<!-- <span>赞{{likeNum}}</span>-->
<span v-if="!totalRecords" @click="showCommentInput=!showCommentInput">回复</span>
<!-- <span :class="returnlikeWordClass" @click="clickToPraise">赞({{praiseNum}})</span>-->
<span @click="dataDeleteComment" v-if="this.info.userId ===$store.state.userProfile.userId">删除</span>
</p>
</div>
......@@ -56,7 +56,7 @@
<h6>{{dateConvert2}}</h6>
<p>
<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 @click="dataDeleteComment" v-if="this.info.userId ===$store.state.userProfile.userId">删除</span>
</p>
......@@ -107,6 +107,9 @@
computed:{
dateConvert2(){
return dateConvert(this.info.createTime)
},
returnlikeWordClass(){
return this.praised?'likeActive':'like'
}
},
......@@ -128,7 +131,8 @@
currentPage:1,
pages:1,
totalRecords:0,
praised:false,
praiseNum:0,
}
},
......@@ -306,6 +310,50 @@
}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 @@
}
p{
@include fontStyle(12,16,500,#999,start);
.like{
&:hover{
color:#00AAE6;
}
}
.likeActive{
color: #00AAE6;
}
span{
margin-left:20*$length;
@extend %cursorPointer;
......
components/pc/projectCard.vue
......@@ -41,10 +41,10 @@
<!-- <yun-icon name="star" size="12px" vertical="top" color="#ccc"></yun-icon>-->
<!-- <span>{{cardStar}}</span>-->
<!-- </div>-->
<!-- <div class="icon-box" v-if="cardLike">-->
<!-- <yun-icon name="like1" size="12px" vertical="top" color="#ccc"></yun-icon>-->
<!-- <span>{{cardLike}}</span>-->
<!-- </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" v-if="cardView">
<yun-icon name="view" size="12px" vertical="top" color="#ccc"></yun-icon>
<span>{{cardView}}</span>
......@@ -155,6 +155,7 @@
this.cardUser = info.userNick;
this.cardType = 2;
this.status = info.status;
this.praiseNum =info.praiseNum
}
if(this.info.projectId){
......@@ -169,6 +170,7 @@
this.cardUser = info.author;
this.cardType = 1;
this.status = info.status;
this.praiseNum =info.praiseNum
}
if(this.info.contentId){
......
pages/answer/detail/_id.vue
......@@ -29,10 +29,10 @@
<!-- <yun-icon name="star" size="12px" pb="7px" color="#ccc"></yun-icon>-->
<!-- <span>4</span>-->
<!-- </div>-->
<!-- <div class="icon-box">-->
<!-- <yun-icon name="like1" size="12px" pb="7px" color="#ccc"></yun-icon>-->
<!-- <span>4</span>-->
<!-- </div>-->
<div class="icon-box">
<yun-icon name="like1" size="12px" pb="7px" color="#ccc"></yun-icon>
<span>{{articleDetail.praiseNum}}</span>
</div>
<div class="icon-box">
<yun-icon name="view" size="12px" pb="7px" color="#ccc"></yun-icon>
<span>{{articleDetail.viewNumber}}</span>
......@@ -46,11 +46,11 @@
<div class="article__content" v-html="articleDetail.contentHtml">
</div>
<!-- <div class="article__like">-->
<!-- <yun-icon name="like_egg" class="egg"></yun-icon>-->
<!-- <yun-icon name="like1" class="heart"></yun-icon>-->
<!-- <p class="num">122</p>-->
<!-- </div>-->
<div :class="returnArticleLikeClass" @click="clickToPraise">
<yun-icon name="like_egg" class="egg"></yun-icon>
<yun-icon name="like1" class="heart"></yun-icon>
<p class="num">{{articleDetail.praiseNum}}</p>
</div>
<div class="article__footer">
<p class="link" v-if="false">原文链接：<a target="_blank" :href="articleDetail.originLink"> <span>{{articleDetail.originLink}}</span></a></p>
<p></p>
......@@ -86,8 +86,8 @@
<yun-icon name="star" class="star"></yun-icon>
</div>
<div class="option-item" @click="MessageAlert">
<yun-icon name="like1" class="like"></yun-icon>
<div class="option-item" @click="clickToPraise">
<yun-icon name="like1" :class="returnOptionLikeClass"></yun-icon>
</div>
<div class="option-item" @click="MessageAlert">
......@@ -141,6 +141,14 @@
answerList:[],
}
},
computed:{
returnArticleLikeClass(){
return this.articleDetail.praised?'article__like2':'article__like1'
},
returnOptionLikeClass(){
return this.articleDetail.praised?'likeActive':'like'
}
},
created(){
this.dataGetReAnswerList();
......@@ -182,6 +190,53 @@
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:{
......@@ -343,7 +398,7 @@
@extend %article-content;
}
.article__like{
.article__like1{
margin:60*$length auto;
width:66*$length;
height:64*$length;
......@@ -385,6 +440,52 @@
@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{
......@@ -539,6 +640,9 @@
color:#CCCCCC;
font-size: 12px;
}
.likeActive{
color:#FF7474
}
&:hover{
.star{
......
pages/blog/detail/_id.vue
......@@ -30,10 +30,10 @@
<!-- <yun-icon name="star" size="12px" pb="7px" color="#ccc"></yun-icon>-->
<!-- <span>4</span>-->
<!-- </div>-->
<!-- <div class="icon-box">-->
<!-- <yun-icon name="like1" size="12px" pb="7px" color="#ccc"></yun-icon>-->
<!-- <span>4</span>-->
<!-- </div>-->
<div class="icon-box">
<yun-icon name="like1" size="12px" pb="7px" color="#ccc"></yun-icon>
<span>{{articleDetail.praiseNum}}</span>
</div>
<div class="icon-box">
<yun-icon name="view" size="12px" pb="7px" color="#ccc"></yun-icon>
<span>{{articleDetail.viewNumber}}</span>
......@@ -47,11 +47,12 @@
<div class="article__content" v-html="articleDetail.contentHtml">
</div>
<!-- <div class="article__like">-->
<!-- <yun-icon name="like_egg" class="egg"></yun-icon>-->
<!-- <yun-icon name="like1" class="heart"></yun-icon>-->
<!-- <p class="num">122</p>-->
<!-- </div>-->
<div :class="returnArticleLikeClass" @click="clickToPraise">
<yun-icon name="like_egg" class="egg"></yun-icon>
<yun-icon name="like1" class="heart"></yun-icon>
<p class="num">{{articleDetail.praiseNum}}</p>
</div>
<div class="article__footer">
<!-- <p class="link">原文链接：<a target="_blank" :href="articleDetail.originLink"> <span>{{articleDetail.originLink}}</span></a></p>-->
<p></p>
......@@ -83,10 +84,9 @@
<yun-icon name="star" class="star"></yun-icon>
</div>
<div class="option-item" @click="MessageAlert">
<yun-icon name="like1" class="like"></yun-icon>
<div class="option-item" @click="clickToPraise">
<yun-icon name="like1" :class="returnOptionLikeClass"></yun-icon>
</div>
<div class="option-item" @click="MessageAlert">
<yun-icon name="comment" class="comment"></yun-icon>
</div>
......@@ -138,6 +138,15 @@
}
},
computed:{
returnArticleLikeClass(){
return this.articleDetail.praised?'article__like2':'article__like1'
},
returnOptionLikeClass(){
return this.articleDetail.praised?'likeActive':'like'
}
},
created(){
globalBus.$emit(config.event.listenDetailInfo,this.articleDetail.blogTitle,'blog')
},
......@@ -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 @@
}
.article__like{
.article__like1{
margin:60*$length auto;
width:66*$length;
height:64*$length;
......@@ -377,6 +433,52 @@
@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{
......@@ -531,6 +633,9 @@
color:#CCCCCC;
font-size: 12px;
}
.likeActive{
color:#FF7474
}
&:hover{
.star{
......
pages/project/detail/_id.vue
......@@ -30,10 +30,10 @@
<!-- <yun-icon name="star" size="12px" pb="7px" color="#ccc"></yun-icon>-->
<!-- <span>4</span>-->
<!-- </div>-->
<!-- <div class="icon-box">-->
<!-- <yun-icon name="like1" size="12px" pb="7px" color="#ccc"></yun-icon>-->
<!-- <span>4</span>-->
<!-- </div>-->
<div class="icon-box">
<yun-icon name="like1" size="12px" pb="7px" color="#ccc"></yun-icon>
<span>{{articleDetail.praiseNum}}</span>
</div>
<div class="icon-box">
<yun-icon name="view" size="12px" pb="7px" color="#ccc"></yun-icon>
<span>{{articleDetail.viewNumber}}</span>
......@@ -47,11 +47,11 @@
<div class="article__content" v-html="articleDetail.contentHtml">
</div>
<!-- <div class="article__like">-->
<!-- <yun-icon name="like_egg" class="egg"></yun-icon>-->
<!-- <yun-icon name="like1" class="heart"></yun-icon>-->
<!-- <p class="num">122</p>-->
<!-- </div>-->
<div :class="returnArticleLikeClass" @click="clickToPraise">
<yun-icon name="like_egg" class="egg"></yun-icon>
<yun-icon name="like1" class="heart"></yun-icon>
<p class="num">{{articleDetail.praiseNum}}</p>
</div>
<div class="article__footer">
<p class="link" v-if="!articleDetail.projectId">原文链接：<a target="_blank" :href="articleDetail.sourceLink"> <span>{{articleDetail.sourceLink}}</span></a></p>
<p></p>
......@@ -83,8 +83,8 @@
<yun-icon name="star" class="star"></yun-icon>
</div>
<div class="option-item" @click="MessageAlert">
<yun-icon name="like1" class="like"></yun-icon>
<div class="option-item" @click="clickToPraise">
<yun-icon name="like1" :class="returnOptionLikeClass"></yun-icon>
</div>
<div class="option-item" @click="MessageAlert">
......@@ -160,6 +160,15 @@
}
},
computed:{
returnArticleLikeClass(){
return this.articleDetail.praised?'article__like2':'article__like1'
},
returnOptionLikeClass(){
return this.articleDetail.praised?'likeActive':'like'
}
},
created(){
globalBus.$emit(config.event.listenDetailInfo,this.articleDetail.projectName,'project')
},
......@@ -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 @@
}
.article__like{
.article__like1{
margin:60*$length auto;
width:66*$length;
height:64*$length;
......@@ -392,6 +448,52 @@
@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{
......@@ -549,6 +651,9 @@
color:#CCCCCC;
font-size: 12px;
}
.likeActive{
color:#FF7474
}
&:hover{
.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