评论区
1、写样式
先创建一个新的文件,将他导入并进行注册
然后我们去commentList中写样式
<template>
<div id="commentList">
<div class="comment-area">
<!-- 头部发布人信息 -->
<div class="comment-header">
<div class="picture">
<img src="" alt="">
<span>zx</span>
</div>
<div class="love">
<img src="../../assets/爱心.svg" alt="">
<img src="../../assets/redLove.svg" alt="">
</div>
</div>
<!-- 评论 -->
<div class="comment-content">zxzds</div>
<div class="comment-date">3天前</div>
</div>
</div>
</template>
<script>
export default {
};
</script>
<style lang="less" scoped>
.comment-area{
margin: 70px 20px 20px 20px;
}
.comment-header{
display: flex;
justify-content: space-between;
align-items: center;
}
.picture{
display: flex;
justify-content: space-between;
align-items: center;
}
.picture img{
width: 80px;
height: 80px;
margin-right: 12px;
border-radius: 50%;
}
.love{
width: 20px;
height: 20px;
}
.love img{
width: 28px;
height: 28px;
}
.comment-content{
margin: 15px 0;
text-indent: 50px;
}
.comment-date{
font-size: 15px;
color: #747478;
}
</style>
2、发送网络请求,获取评论数据
/**获取文章评论 */
export const getCommentsAPI=({type,source})=>{
return axios({
url:'/v1_0/comments',
params:{
type,
source
}
})
}
export default {
data() {
return {
commentsList:[]//评论
};
},
async created() {
const res = await getCommentsAPI({
type: "a",
source: this.$route.query.art_id,
});
this.commentsList=res.data.data.results
},
methods:{
fromDate:timeAgo
}
};
3、铺设数据
<template>
<div id="commentList">
<div class="comment-area" v-for="item in commentsList" :key="item.com_id">
<!-- 头部发布人信息 -->
<div class="comment-header">
<div class="picture">
<img :src="item.aut_photo" alt="" />
<span>{{item.aut_name}}</span>
</div>
<div class="love">
<img src="../../assets/爱心.svg" alt="" v-if="!item.is_liking"/>
<img src="../../assets/redLove.svg" alt="" v-else/>
</div>
</div>
<!-- 评论 -->
<div class="comment-content">{{item.content}}</div>
<div class="comment-date" v-html="fromDate(item.pubdate)">{{item.pubdate}}</div>
</div>
</div>
</template>
4、评论点赞/取消点赞
(1)网络请求
/**对文章评论点赞 */
export const commentLikingsAPI=({target})=>{
return axios({
url:'/v1_0/comment/likings',
method:'POST',
data:{
target
}
})
}
/**取消对文章评论点赞 */
export const deCommentLikingsAPI=({target})=>{
return axios({
url:`/v1_0/comment/likings/${target}`,
method:'DELETE',
})
}
(2)给两个爱心绑定点击事件
I、并将我们的item传进去,同时给两个布尔值参数等会做判断用
<div class="love">
<img src="../../assets/爱心.svg" alt="" v-if="item.is_liking===false" @click="onLove(false,item)"/>
<img src="../../assets/redLove.svg" alt="" v-else @click="onLove(true,item)"/>
</div>
II、先实现前端页面点击切换效果
// 评论点赞
onLove(boolean, item) {
// 如果点在已点赞身上(取消点赞)
if (boolean === true) {
item.is_liking = false;
} else {
// 否则就是点在点赞身上(点赞)
item.is_liking = true;
}
},
III、实现后台保存数据
// 评论点赞
async onLove(boolean, item) {
// 如果点在已点赞身上(取消点赞)
if (boolean === true) {
item.is_liking = false;
const res =await deCommentLikingsAPI({
target: item.com_id,
});
} else {
// 否则就是点在点赞身上(点赞)
item.is_liking = true;
const res =await commentLikingsAPI({
target: item.com_id,
});
}
},
IV、如果出现没有评论
加一个没有评论的提示,用v-show来控制它的显示隐藏
<div v-show="noComment" class="noComment">暂时还没有评论哦</div>
定义一个变量,默认不显示
data() {
return {
commentsList: [], //评论
noComment: false,//控制没有评论时显示/隐藏
};
},
用if去判断,在页面创建初期就执行
async created() {
const res = await getCommentsAPI({
type: "a",
source: this.$route.query.art_id,
});
console.log(res);
console.log(res.data.data.results.length);
if (res.data.data.results.length === 0) {
this.noComment = true;
}
this.commentsList = res.data.data.results;
},
发表评论
1、写样式
<template>
<div id="comment">
<!-- 平时看到的评论框 -->
<div class="publish-comment flex">
<!-- 左边返回箭头、输入框 -->
<div class="left flex">
<van-icon name="arrow-left" :class="{ display: isDisplay }" />
<input
class="inContent"
type="text"
name=""
id="publish"
placeholder="发表评论"
@click="inputCli"
@blur="inputBlur"
v-model="content"
:class="{ theInput: this.isInput }"
/>
</div>
<!-- 失焦时显示右边分享、收藏、评论 -->
<div class="right flex" :class="{ display: isDisplay }">
<van-icon name="comment-o" />
<van-icon name="star-o" class="star" />
<van-icon name="share-o" />
</div>
<!-- 聚焦时显示 -->
<div class="theRelease" :class="{ release: isRelease }">发布</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
content: "",
isDisplay: false,
isInput: false,
isRelease: false,
};
},
methods: {
// 点击input(聚焦)
inputCli() {
//控制动态属性的布尔值达到显示/隐藏的效果
this.isInput = true;
this.isDisplay = true;
this.isRelease = true;
},
// input失焦
inputBlur() {
this.isInput = false;
this.isDisplay = false;
this.isRelease = false;
this.content = "";
},
},
};
</script>
<style lang="less" scoped>
.flex {
display: flex;
justify-content: space-between;
align-items: center;
}
/*评论框*/
.publish-comment {
width: 100%;
height: 49px;
background-color: #fff;
border-top: 1px solid #e9e5e5;
position: fixed;
bottom: 0;
}
/*返回箭头、输入框*/
.left {
margin-left: 5px;
}
.inContent {
width: 200px;
height: 30px;
margin: 0 15px;
border-radius: 15px;
border: 1px solid #dad8d8;
background-color: #efefef;
font-size: 16px;
padding-left: 12px;
}
/*评论、收藏、分享*/
.right {
margin-right: 10px;
}
.star {
margin: 0 15px;
}
.theRelease {
display: none;
}
/*聚焦时显示*/
/*隐藏三个小图标*/
.display {
display: none;
}
.release {
font-size: 20px;
margin-right: 12px;
display: block;
}
.theInput {
width: 270px;
}
</style>