MoeNovaClient/components/cc-comment/componets/common.vue

<template>
  <view class="comment_item">
    <img class="user_avatar" @click="goToUserHomepage(data.user_id)" :src="data.user_avatar" />
    <view class="comment_content">
      <view class="top">
        <view class="top_left" @click="goToUserHomepage(data.user_id)">
          <uni-tag v-if="data.author" class="tag" type="primary" :inverted="false" text="作者" size="mini" circle />
          <span class="user_name">{{ data.user_name  }}</span>
          <span class="user_name cReplyName" v-if="cReplyName">▸</span>
          <span class="user_name">{{ cReplyName }}</span>
        </view>
      </view>
      <view class="content" @click="replyClick(data)">
        {{ c_content }}
        <span class="shrink" v-if="isShrink" @click.stop="expandContentFun(data.user_content)">...展开</span>
        <span class="shrink" v-if="!isShrink && user_content.length > contentShowLength"
          @click.stop="shrinkContentFun(data.user_content)">
          收起</span>
      </view>
      <view class="bottom">
        <view>
          <span class="create_time">{{ data.create_time }}</span>
          <span v-if="data.owner" class="delete" @click="deleteClick(data)">删除</span>
        </view>
        <!-- <span v-else class="reply" @click="replyClick(props.data)"
          >回复</span
        > -->
        <view class="bottom_right" @click="likeClick(data)">
          <image style="width: 32rpx; height: 32rpx;" v-show="!data.is_like" src="@/static/icon/icon-19.png"></image>
          <image style="width: 32rpx; height: 32rpx;" v-show="data.is_like" src="@/static/icon/icon-18.png"></image>
          <span :class="[data.is_like ? 'active' : '', 'like_count']">{{ cLikeCount }}</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 评论数据
    data: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      // 评论过长处理
      contentShowLength: 70, // 默认显示评论字符
      user_content: "",
      isShrink: false, // 是否收缩评论
      c_content: "",
    };
  },
  computed: {
    // 被回复人名称
    cReplyName: function () {
      return this.data?.reply_name ? this.data?.reply_name : "";
    },
    // 点赞数显示
    cLikeCount: function () {
      return this.data.like_count === 0 ? "" : this.data.like_count > 99 ? `99+` : this.data.like_count;
    },
  },
  watch: {
    // 删除变更显示定制
    "data.user_content": function (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.c_content = newVal;
      }
    },
    // 监听isShrink变化，更新c_content
    isShrink: function (newVal) {
      this.c_content = newVal ? this.user_content.slice(0, this.contentShowLength + 1) : this.user_content;
    },
  },
  methods: {
    // 展开文字
    expandContentFun() {
      this.isShrink = false;
    },
    // 收起文字
    shrinkContentFun() {
      this.isShrink = true;
    },
    // 点赞
    likeClick(item) {
      this.$emit("likeClick", item);
    },
    // 回复
    replyClick(item) {
      // 自己不能回复自己
      // if (item.owner) return;
      this.$emit("replyClick", item);
    },
    // 删除
    deleteClick(item) {
      this.$emit("deleteClick", item);
    },
    goToUserHomepage(id) {
      uni.$emit('check_login', () => {
        if (!id) {
          return;
        }
        uni.navigateTo({
          url: "/pages/my/userHomepage?id=" + id,
        });
      })
    },
  },
  mounted() {
    this.user_content = this.data.user_content;
    this.isShrink = this.user_content.length > this.contentShowLength;
    this.c_content = this.isShrink ? this.user_content.slice(0, this.contentShowLength + 1) : this.user_content;
  },
};
</script>

<style lang="scss" scoped>
////////////////////
.center {
  display: flex;
  align-items: center;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

////////////////////
.comment_item {
  font-size: 28rpx;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin-top: 16rpx;
  .user_avatar {
    width: 68rpx;
    height: 68rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }

  .comment_content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
  }

  .top {
    @extend .center;
    justify-content: space-between;
    width: 100%;

    .top_left {
      display: flex;
      align-items: flex-start;
      overflow: hidden;



      .tag {
        margin-right: 6rpx;
      }

      .user_name {
        @extend .ellipsis;
        max-width: 180rpx;
        color: #8c8c8c;
      }
    }

    .top_right {
      @extend .center;
      margin-left: auto;
      min-width: 60rpx;
      justify-content: flex-end;

      .like_count {
        color: #8c8c8c;

        &.active {
          color: #8de10b;
        }
      }
    }
  }

  .content {
    padding: 12rpx; 
    padding-left: 0;
    color: #1f1f1f;
    font-family: "PingFang SC Bold";
    font-weight: 400;

    &:active {
      background-color: #f2f2f2;
    }

    .shrink {
      padding: 20rpx 20rpx 20rpx 0rpx;
      color: #007aff;
    }
  }

  .bottom { 
    font-size: 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .create_time {
      color: #8c8c8c;
    }

    .delete {
      padding: 20rpx 20rpx 0 20rpx;
      color: #c0c0c0;
    }

    .reply {
      color: #007aff;
    }

    .bottom_right {
      @extend .center;
      margin-left: auto;
      min-width: 60rpx;
      justify-content: flex-end;

      .like_count {
        color: #8c8c8c;

        &.active {
          color: #8de10b;
        }
      }
    }
  }
  .cReplyName{
    display: inline-block;
    padding: 0 6rpx;
  }
}
</style>