dvcp_v2_wechat_app/src/components/AiComment/AiComment.vue

<template>
  <div class="AiComment">
    <div class="pageTitle flex">
      评论
      <div class="mar-l16" v-text="total"/>
    </div>
    <div class="flex item" v-for="row in list" :key="row.id">
      <img :src="row.avatar"/>
      <div class="fill">
        <div class="flex font-32">
          <div class="fill font600 font-28" v-text="row.name"/>
          <AiThumbsUp :bid="row.id" type="comment" :count.sync="row.hotCount"/>
        </div>
        <div class="font-32 mar-t8 mar-b24" v-text="row.content"/>
        <div class="flex mar-b24">
          <div class="color-999" v-text="[row.areaName,row.commentTime].join('    ')"/>
          <comment-editor class="mar-l16" :bid="row.id" type="2">回复TA</comment-editor>
        </div>
        <div v-if="getArrayLength(row.replyList)>0" class="replyList">
          <div v-if="row.showAllReply">
            <div class="flex color-666 mar-t8" v-for="reply in row.replyList" :key="reply.id">
              <div class="font600" v-text="reply.name+'：'"/>
              <div v-text="reply.content"/>
            </div>
            <div v-if="getArrayLength(row.replyList)>2" class="color-687DA6 mar-t8" v-text="`收起`" @click="handleExpand(row)"/>
          </div>
          <div v-else>
            <div class="flex color-666 mar-t8" v-for="reply in getReplies(row.replyList)" :key="reply.id">
              <div class="font600" v-text="reply.name+'：'"/>
              <div v-text="reply.content"/>
            </div>
            <div v-if="getArrayLength(row.replyList)>2" class="color-687DA6 mar-t8" v-text="`查看全部${getArrayLength(row.replyList)}条回复 >`"
                 @click="handleExpand(row)"/>
          </div>
        </div>
      </div>
    </div>
    <comment-editor class="fixedBottom" :bid="bid" :comment-count="total"/>
    <u-gap height="128"/>
  </div>
</template>

<script>

import CommentEditor from "./commentEditor";
import AiThumbsUp from "../AiThumbsUp/AiThumbsUp";

export default {
  name: "AiComment",
  components: {AiThumbsUp, CommentEditor},
  props: {
    bid: {default: ""}
  },
  data() {
    return {
      list: [],
      current: 1,
      total: 0
    }
  },
  methods: {
    getComments() {
      let {current, total, bid: contentId} = this
      if (!total || this.list.length < total) {
        this.$instance.post("/app/appcontentcomment/list", null, {
          params: {current, contentId}
        }).then(res => {
          if (res?.data) {
            res.data.records.map(e => e.showAllReply = false)
            this.list = [current == 1 ? [] : this.list, res.data.records].flat()
            this.total = res.data.total
          }
        })
      }
    },
    getReplies(list, showAll) {
      return list?.slice(0, showAll ? this.getArrayLength(list) : 2) || []
    },
    getArrayLength(list) {
      return list?.length || 0
    },
    handleExpand(row) {
      console.log(row)
      row.showAllReply = !row.showAllReply
    }
  },
  created() {
    this.getComments()
    uni.$on("moreComments", flag => {
      flag == 1 ? this.current = 1 : this.current++
      this.getComments()
    })
  },
  destroyed() {
    uni.$off("moreComments")
  }
}
</script>

<style lang="scss" scoped>
.AiComment {
  background: #fff;

  .item {
    padding: 24px 32px;
    align-items: flex-start;
    color: #333;
    font-size: 26px;

    & > img {
      height: 64px;
      width: 64px;
      border-radius: 50%;
      margin-right: 16px;
    }

    .content {
      margin: 8px 0 24px;
    }
  }

  .font600 {
    font-weight: 600;
  }

  .font-32 {
    font-size: 32px;
  }

  .font-28 {
    font-size: 28px;
  }

  .mar-t8 {
    margin-top: 8px;
  }

  .mar-b24 {
    margin-bottom: 24px;
  }

  .mar-r16 {
    margin-right: 16px;
  }

  .mar-l16 {
    margin-left: 16px;
  }

  .color-999 {
    color: #999;
  }

  .color-666 {
    color: #666;
  }

  .color-687DA6 {
    color: #687DA6;
  }

  .replyList {
    padding: 8px 16px 16px;
    background: #F4F5FA;
    border-radius: 8px;
    font-size: 28px;
  }

  .pageTitle {
    height: 100px;
    padding: 0 32px;
    font-size: 34px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
  }
}
</style>