Skip to content

B
beyond-clouds-front
Commit d1528f17 by yanju
Options

添加点赞功能

parent bd3e03fa
Showing with 858 additions and 94 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/common/video/src/main.vue
<template>
<div class="video-container__wrap">
<video class="video" src="">
<div class="video-container__wrap" ref="videoCon" @contextmenu="showContextmenu">
<video ref="video" class="video" :src="src" @click="clickToPlay">
</video>
<div class="advertise-container" v-if="!play">
<transition name="fadeIcon">
<div class="play__btn" v-if="!play" @click="clickToPlay">
<yun-icon name="play" pb="7px" ></yun-icon>
</div>
</transition>
<!-- <transition name="fadeIcon">-->
<!-- <div class="play__btn" v-if="play">-->
<!-- <yun-icon name="pause" pb="7px" @click.native="clickToPlay"></yun-icon>-->
<!-- </div>-->
<!-- </transition>-->
</div>
<div class="contextmenu-container">
</div>
<div class="video-container__left">
</div>
......@@ -14,33 +33,37 @@
</div>
<div class="video-container__bottom">
<div class="process-container" @mousedown="dragVideo">
<div class="video-drag__btn" :style="{left:videoProcess}" @mousedown="dragVideo"></div>
<div class="video-process__line" @mousedown="dragVideo" :style="{width:videoProcess}" ></div>
</div>
<div class="bottom-container">
<div class="bottom__left">
<yun-icon class="play__btn" name="play" v-if="!play" @click.native="clickToPlay"></yun-icon>
<yun-icon class="pause__btn" name="pause" v-if="play" @click.native="clickToPlay"></yun-icon>
<p class="process__word"><span>1:00</span>/3:34</p>
<p class="process__word"><span>{{currentTimePacked}}</span>/{{durationPacked}}</p>
</div>
<div class="bottom__right">
<yun-icon name="volume" v-if="volume!==0"></yun-icon>
<yun-icon name="mute" v-if="volume===0"></yun-icon>
<yun-icon name="volume" @mouseleave.native="mouseLeaveToHideVolumeBox" @mouseover.native="mouseOverToShowVolumeBox" v-if="volume!==0"></yun-icon>
<yun-icon name="mute" @mouseleave.native="mouseLeaveToHideVolumeBox" @mouseover.native="mouseOverToShowVolumeBox" v-if="volume===0"></yun-icon>
<yun-icon name="setting"></yun-icon>
<yun-icon name="fullScreen2"></yun-icon>
<yun-icon name="fullScreen1"></yun-icon>
<yun-icon name="fullScreen1" @click.native="FullScreen"></yun-icon>
</div>
<div class="abs__setting-box">
</div>
<div class="abs__volume-box">
<div class="process__volume" @mousedown.stop="clickVolume">
<div class="drag__btn" @mousedown="dragVolume" :style="{bottom:`calc(${volume*100}% - 8px)`}"></div>
<div class="process__line" :style="{height:`calc(${volume*100}% - 8px)`}"></div>
<div class="abs__volume-box" @mousedown="dragVolume" v-if="showVolumeBox" @mouseover="mouseOverToShowVolumeBox" @mouseleave="mouseLeaveToHideVolumeBox">
<div class="process__volume" @mousedown="dragVolume" >
<div class="drag__btn" @mousedown="dragVolume" :style="{bottom:volumeProcess}"></div>
<div class="process__line" @mousedown="dragVolume" :style="{height:volumeProcess}"></div>
</div>
</div>
<div class="abs__speed-box">
</div>
......@@ -58,12 +81,169 @@
data(){
return{
play:true,
volume:0.8,
play:false,
volume:0.5,
showVolumeBox:false,
showVolumeBoxTime:null,
currentTime:0,
duration:0,
src:''
}
},
computed:{
volumePacked(){
},
videoProcess(){
return `${this.currentTime/this.duration*100*758/768}%`;
},
volumeProcess(){
return `calc(${this.volume*100}% - 8px)`
},
currentTimePacked(){
let currentTime = this.currentTime;
let min = Math.floor(currentTime/60)>9?Math.floor(currentTime/60):`0${Math.floor(currentTime/60)}`;
let sec = Math.floor(currentTime - min*60)>9?Math.floor(currentTime - min*60):`0${Math.floor(currentTime - min*60)}`;
return `${min}:${sec}`
},
durationPacked(){
let duration = this.duration;
let min = Math.floor(duration/60)>9?Math.floor(duration/60):`0${Math.floor(duration/60)}`;
let sec = Math.floor(duration - min*60)>9?Math.floor(duration - min*60):`0${Math.floor(duration - min*60)}`;
return `${min}:${sec}`
}
},
created() {
if(process.browser){
this.src = ' http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4';
setTimeout(()=>{
this.$refs.video.volume = this.volume;
this.$refs.video.oncontextmenu = function () {
return false
};
});
// firefox,opera
document.addEventListener('keypress',this.forbidBackSpace);
// ie , Chrome
document.addEventListener('keydown',this.forbidBackSpace);
}
console.log(this.$store.state.auth.token);
},
destroyed(){
// firefox,opera
document.removeEventListener('keypress',this.forbidBackSpace)
// ie , Chrome
document.removeEventListener('keydown',this.forbidBackSpace);
},
watch:{
play(val){
if(process.browser){
if(val===true){
this.$refs.video.play();
this.videoProcessTime = setInterval(()=>{
let {currentTime,duration} = this;
if(currentTime<duration){
this.currentTime = this.currentTime +0.1;
}else if(currentTime>duration){
this.currentTime = duration;
clearInterval(this.videoProcessTime);
}else if(currentTime===duration){
this.currentTime = 0;
clearInterval(this.videoProcessTime);
}
},100)
}else{
this.$refs.video.pause();
let {currentTime,duration} = this;
if(currentTime<duration){
clearInterval(this.videoProcessTime);
}else if(currentTime>=duration){
this.currentTime = 0;
clearInterval(this.videoProcessTime);
}
}
}
},
volume(val){
if(process.browser) {
this.$refs.video.volume = val;
}
},
src(val){
if(process.browser){
let that = this;
this.$refs.video.onloadedmetadata = function () {
that.duration = this.duration;
that.currentTime = this.currentTime;
}
}
},
currentTime(val){
if(process.browser){
this.$refs.video.currentTime = val;
}
}
},
methods:{
//取消页面的空格键
forbidBackSpace(e){
let ev = e || window.event; //获取event对象
let obj = ev.target || ev.srcElement; //获取事件源
let t = obj.type || obj.getAttribute('type');//获取事件源类型
//当桥backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效
//判断
if(ev.keyCode ===13 &&t!=="password"&&t!=="text"&&t!=="textarea"){ //阻止回车键默认事件
e.stopPropagation(); // 阻止事件冒泡传递
e.preventDefault();
}
if(ev.keyCode ===32 &&t!=="password"&&t!=="text"&&t!=="textarea"){ //阻止空格键默认事件
e.stopPropagation(); // 阻止事件冒泡传递
e.preventDefault();
this.clickToPlay();
}
},
FullScreen() {
let ele = this.$refs.videoCon;
if (ele .requestFullscreen) {
ele .requestFullscreen();
} else if (ele .mozRequestFullScreen) {
ele .mozRequestFullScreen();
} else if (ele .webkitRequestFullScreen) {
ele .webkitRequestFullScreen();
}
},
exitFullscreen() {
let de = document;
if (de.exitFullscreen) {
de.exitFullscreen();
} else if (de.mozCancelFullScreen) {
de.mozCancelFullScreen();
} else if (de.webkitCancelFullScreen) {
de.webkitCancelFullScreen();
}
},
getElementToPageTop(el) {
if(el.parentElement) {//父级元素须为定位元素
// console.log(el)
......@@ -72,19 +252,95 @@
}
return el.offsetTop
},
getElementToPageLeft(el) {
if(el.parentElement) {//父级元素须为定位元素
return this.getElementToPageLeft(el.parentElement) + el.offsetLeft
}
return el.offsetLeft
},
clickToPlay(){
this.play = !this.play;
},
showContextmenu(e){
e.stopPropagation();//阻止传递
e.preventDefault();//阻止默认事件
console.log(11)
},
dragVolume(el){
let disY = el.clientY - el.target.offsetTop;
this.clickVolume(el);
let disY = el.pageY - el.target.offsetTop;
let divY = this.getElementToPageTop(el.target);
document.onmousemove = (e) => {
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let top = e.clientY - disY;
if(el.target.className==='drag__btn'||el.target.className==='process__line'||el.target.className==='process__volume'){
let top = e.pageY - disY;
let bottom = 100 - top;
if(bottom>=0&&bottom<=100){
console.log(bottom/100);
if(bottom<5){
this.volume = 0
}else if(bottom >95){
this.volume =1;
}else{
this.volume = bottom/100;
}
}
}
if(el.target.className==='abs__volume-box'){
let top = e.pageY - divY;
if(top>=15&&top<=115) {
let bottom = 100 - top + 15;
if (bottom >= 0 && bottom <= 100) {
if (bottom < 5) {
this.volume = 0
} else if (bottom > 95) {
this.volume = 1;
} else {
this.volume = bottom / 100;
}
}
}
}
// if(el.target.className==='process__line'){
// let top = e.clientY - divY;
// let bottom = 100 - top;
//
// if(bottom>=0&&bottom<=100){
// if(bottom<5){
// this.volume = 0
// }else if(bottom >95){
// this.volume =1;
// }else{
// this.volume = bottom/100;
//
// }
// }
// }else if(el.target.className==='process__volume'){
//
// let disY = el.pageY - this.getElementToPageTop(el.target);
// let bottom = 100-disY;
// if(bottom>=0&&bottom<=100){
// if(bottom<5){
// this.volume = 0
// }else if(bottom >95){
// this.volume =1;
// }else{
// this.volume = bottom/100;
//
// }
// }
//
// }else if(el.target.className==='abs__volume-box'){
// let disY = el.pageY - this.getElementToPageTop(el.target);
//
// }
};
document.onmouseup = () => {
document.onmousemove = null;
......@@ -93,52 +349,89 @@
},
clickVolume(el){
el.stopPropagation();
if(el.target.className!=='process__line'){
if(el.target.className==='process__line'){
let disY = el.pageY - this.getElementToPageTop(el.target);
this.volume = (100-disY)/100
let bottom = 100 - disY-el.target.offsetTop;
if(bottom>=0&&bottom<=100){
if(bottom<5){
this.volume = 0
}else if(bottom >95){
this.volume =1;
}else{
let disY = el.pageY - this.getElementToPageTop(el.target);
console.log(disY);
this.volume =(100 - disY-el.target.offsetTop)/100;
this.volume = bottom/100;
}
}
},
}else if(el.target.className==='process__volume'){
directives: {
drag: {
// 指令的定义
bind: function (el) {
let disY = el.pageY - this.getElementToPageTop(el.target);
let bottom = 100-disY;
if(bottom>=0&&bottom<=100){
if(bottom<5){
this.volume = 0
}else if(bottom >95){
this.volume =1;
}else{
this.volume = bottom/100;
if(process.browser){
let odiv = el; //获取当前元素
odiv.onmousedown = (e) => {
//算出鼠标相对元素的位置
let disX = e.clientX - odiv.offsetLeft;
let disY = e.clientY - odiv.offsetTop;
}
}
}
},
mouseOverToShowVolumeBox(){
clearTimeout(this.showVolumeBoxTime);
this.showVolumeBox = true;
},
mouseLeaveToHideVolumeBox(){
this.showVolumeBoxTime=setTimeout(()=>{
this.showVolumeBox = false;
},200)
},
dragVideo(el){
let disX = el.pageX - this.getElementToPageLeft(el.target);
this.clickVideo(el);
document.onmousemove = (e) => {
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let top = e.clientY - disY;
console.log(top);
let bottom = 100 - top;
this.volume = bottom/100;
//绑定元素位置到positionX和positionY上面
// el.positionX = top;
let left = e.pageX - disX;
if(left>=0&&left<=758){
if(left<5){
this.currentTime = 0;
}else if(left >=752){
this.currentTime = this.duration;
}else{
this.currentTime = left/758 * this.duration;
//移动当前元素
// odiv.style.marginTop = top + 'px';
}
}
};
document.onmouseup = (e) => {
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
};
};
},
clickVideo(el){
let disX;
if(el.target.className==='video-process__line'||el.target.className==='video-drag__btn'){
disX = el.pageX - this.getElementToPageLeft(el.target.parentElement);
}else{
disX = el.pageX - this.getElementToPageLeft(el.target);
}
let left = disX;
if(left>=0&&left<=758){
if(left<5){
this.currentTime = 0;
}else if(left >=752){
this.currentTime = this.duration;
}else{
this.currentTime = left/758 * this.duration;
}}
}
}
},
}
}
</script>
......@@ -158,6 +451,40 @@
height:auto;
}
.advertise-container{
position:absolute;
bottom:48*$length;
top:48*$length;
left:30*$length;
right:30*$length;
z-index: 100;
background-color: rgba(34,34,34,.4);
.play__btn{
position:absolute;
margin:0 auto;
top:50%;
left:0;
right:0;
margin-top: -28*$length;
width:56*$length;
height:56*$length;
border-radius: 50%;
background-color: rgba(34,34,34,.8);
@extend %cursorPointer;
@extend %flex-column-center;
@extend %animate-transition;
&:hover{
transform:scale(1.2);
}
i{
color:#fff;
font-size: 18*$font-size;
}
}
}
.video-container__bottom{
......@@ -173,6 +500,35 @@
background-position: 0 bottom;
background-repeat: repeat-x;
.process-container{
height:8*$length;
width:100%;
position:absolute;
bottom:40*$length;
left:0;
right:0;
background-color: rgba(255,255,255,.5);
@extend %cursorPointer;
.video-drag__btn{
position:absolute;
height:10*$length;
width:10*$length;
box-shadow: 0 0 5px 2px #00AAE6;
left:50%;
top:-1*$length;
background-color: #fff;
border-radius: 50%;
@extend %cursorPointer;
}
.video-process__line{
width:50%;
height:100%;
@extend %cursorPointer;
background-color: #00AAE6;
}
}
.bottom-container{
height:38*$length;
......
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