社会在发展,时代在进步
现在随随便便一个APP就用评论功能吧,那么如何实现评论功能哪?
第一步,写好样式 布局
<van-tab title="评论" class="tab">
<p class="commentText">评论({{ commentTotal }})</p>
<div class="commentsList">
<div class="comments" v-for="item in commentsList">
<div class="top">
<img :src="item.headPortrait | getImgPath" alt="" :onerror="defaultAvatar">
<div class="text">
<div class="name">{{ item.realName }}</div>
<div class="time">
<span>{{ item.crtTime }}</span>
<span v-if="item.isDel" class="delete" @click="deleteComment(item)">删除</span>
</div>
<div class="con">{{ item.content }}</div>
</div>
</div>
</div>
</div>
<div class="commentBtn">
<van-cell-group>
<van-field v-model="commentText" placeholder="发表您的精彩评论" >
<template #button>
<van-button size="small" type="primary" @click="submitComment">发送</van-button>
</template>
</van-field>
</van-cell-group>
</div></van-tab>
然后我们需要调取接口来实现
// 新增评论
submitComment(){
let ths = this//给this赋值给一个新变量
ths.$openLoading();//加载动画
//接口调用传参
this.$axios.post(URL.hotWelfare.addComment, {
dataId: this.id,//传id
content: this.commentText//文本框里输入的内容
}).then(res => {
this.$closeLoading();
if (res && res.code == 1) {//上传成功后
this.commentText = ''//让这个输入框为空
this.getCommentsList()//调用一下评论列表
} else {
ths.isLoadError = true;
}
}).catch(error => {
this.$closeLoading();
});
},
//评论列表
getCommentsList(){
let ths = this
// ths.$openLoading();
this.$axios.post(URL.hotWelfare.worksComment, {
dataId: this.id,//id
page: 1,//页数
pageSize: 10//每页多少条
}).then(res => {
this.$closeLoading();
if (res && res.code == 1) {
this.commentsList = res.data.rows//评论详情数据
this.commentTotal = res.data.total//评论条数
console.log(this.commentsList,"getCommentsList");
} else {
ths.isLoadError = true;
}
}).catch(error => {
// this.$closeLoading();
});
},
// 删除自己的评论
deleteComment(item){
let ths = this
Dialog.confirm({
title: '提示',
message: '是否确认删除评论!',
}).then(() => {
ths.$openLoading();
this.$axios.post(URL.hotWelfare.delMyComment, {
id: item.id
}).then(res => {
this.getCommentsList()
this.$closeLoading();
}).catch(error => {
this.$closeLoading();
});
})
},