文章详情页

评论区

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>