Vue 移动端 实战八 文章评论 评论列表组件、点赞、发布评论、评论回复等、Vue依赖注入方法、解决列表重复数据问题和不重新获取数据问题

1.0 展示文章评论列表

1.1 准备组件

为了更好的开发和维护，这里我们把文章评论单独封装到一个组件中来处理。

1、创建 src/views/article/components/article-comment.vue

<template>
  <div class="article-comments">
    <!-- 评论列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item" :title="item">
        <van-image
          slot="icon"
          round
          width="30"
          height="30"
          style="margin-right: 10px;"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
        <span style="color: #466b9d;" slot="title">hello</span>
        <div slot="label">
          <p style="color: #363636;">我出去跟别人说我的是。。。</p>
          <p>
            <span style="margin-right: 10px;">3天前</span>
            <van-button size="mini" type="default">回复</van-button>
          </p>
        </div>
        <van-icon slot="right-icon" name="like-o" />
      </van-cell>
    </van-list>
    <!-- 评论列表 -->

    <!-- 发布评论 -->
    <van-cell-group class="publish-wrap">
      <van-field clearable placeholder="请输入评论内容">
        <van-button slot="button" size="mini" type="info">发布</van-button>
      </van-field>
    </van-cell-group>
    <!-- /发布评论 -->
  </div>
</template>

<script>
  export default {
   
    name: "ArticleComment",
    props: {
   },
    data() {
   
      return {
   
        list: [], // 评论列表
        loading: false, // 上拉加载更多的 loading
        finished: false // 是否加载结束
      };
    },

    methods: {
   
      onLoad() {
   
        // 异步更新数据
        setTimeout(() => {
   
          for (let i = 0; i < 10; i++) {
   
            this.list.push(this.list.length + 1);
          }
          // 加载状态结束
          this.loading = false;

          // 数据全部加载完成
          if (this.list.length >= 40) {
   
            this.finished = true;
          }
        }, 500);
      }
    }
  };
</script>

<style scoped lang="less">
  .publish-wrap {
   
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }

  .van-list {
   
    margin-bottom: 45px;
  }
</style>

2、在文章详情页面中加载注册文章评论子组件

import ArticleComment from './components/article-comment'

export default {
   
  ...
  components: {
   
    ArticleComment
  }
}

3、在文章详情页面的加载失败提示消息后面使用文章评论子组件

<!-- 文章评论 -->
<article-comment />
<!-- /文章评论 -->

1.2 获取数据并展示

提示：有评论数据的文章 id：139987。

步骤：

• 封装接口
• 请求获取数据
• 处理模板

实现：

1、在 api/comment.js 中添加封装请求方法

/**
 * 评论接口模块
 */
import request from "@/utils/request";

/**
 * 获取文章列表
 */
export function getComments(params) {
   
  return request({
   
    method: "GET",
    url: "/app/v1_0/comments",
    params
  });
}

2、请求获取数据

data () {
   
  return {
   
    ...
    articleComment: {
    // 文章评论相关数据
      list: [],
      loading: false,
      finished: false,
      offset: null, // 请求下一页数据的页码
      totalCount: 0 // 总数据条数
    }
  }
}

       async onLoad () {
   
         try {
   
            const articleComment = this.articleComment
            // 1. 请求获取数据
            const {
    data } = await getComments({
   
              type: 'a', // 评论类型，a-对文章(article)的评论，c-对评论(comment)       的回复
              source: this.articleId, // 源id，文章id或评论id
              offset: articleComment.offset, // 获取评论数据的偏移量，值为评论       id，表示从此id的数据向后取，不传表示从第一页开始读取数据
              limit: 10 // 每页大小
            })
          
            // 2. 将数据添加到列表中
            const {
    results } = data.data
            articleComment.list.push(...results)
          
            // 更新总数据条数
            articleComment.totalCount = data.data.total_count
          
            // 3. 将加载更多的 loading 设置为 false
            articleComment.loading = false
          
            // 4. 判断是否还有数据
            if (results.length) {
   
              articleComment.offset = data.data.last_id // 更新获取下一页数据的       页码
            } else {
   
              articleComment.finished = true // 没有数据了，关闭加载更多
            }
          } catch(err) {
   
            this.$toast('获取数据失败')
            articleComment.loading = false
          }
      }

3、模板绑定

  <div class="article-comments">
    <!-- 评论列表 -->
    <van-list
      v-model="articleComment.loading"
      :finished="articleComment.finished"
      finished-text="没有更多了"
      @load="onLoad"
    >  
      <van-cell v-for="item in articleComment.list" :key="item.com_id.toString()">
        <van-image
          slot="icon"
          round
          width="30"
          height="30"
          style="margin-right: 10px;"
          
          :src="item.aut_photo"
        />
         <span style="color: #466b9d;" slot="title">{
   {
    item.aut_name }}    </span>
        <div slot="label">
        
          <p style="color: #363636;">{
   {
    item.content }}</p>
          <p>
            
            <span style="margin-right: 10px;"
              >{
   {
    item.pubdate | relativeTime }}<