yijianbao_user_uniapp/pages_im/pages/moments/momentsDetails/index.vue

<template>
  <view class="page_container">
    <custom-nav-bar title="详情" />
    <u-loading-page :loading="loading"></u-loading-page>
    <moments-item
      v-if="!loading"
      :moments="moments"
      showDetails
      @startComent="startComent"
    />
    <comment-input
      v-show="commenting"
      ref="commentInputRef"
      inDetails
      :loading="commentLoading"
      :commenting="commenting"
      :placeholder="placeholder"
      @completeInput="sendComment"
      @hiddenInput="commenting = false"
    />
  </view>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
import { PageEvents } from "../../../constant";
import CustomNavBar from "../../../components/CustomNavBar/index.vue";
import CommentInput from "../index/components/CommentInput.vue";
import MomentsItem from "../index/components/MomentsItem.vue";
import { commentMoments, getMomentsByID } from "../../../api/moments";
export default {
  components: {
    CustomNavBar,
    CommentInput,
    MomentsItem,
  },
  data() {
    return {
      commenting: false,
      moments: {},
      commentLoading: false,
      commentState: {
        workMomentID: "",
        comment: {},
      },
      loading: false,
    };
  },
  computed: {
    placeholder() {
      if (this.commentState.comment.userID) {
        return `回复${this.commentState.comment.nickname}`;
      }
      return "评论";
    },
  },
  onLoad(options) {
    this.fetchMoments(options);
    this.$nextTick(() => this.$refs.commentInputRef.setKeyboardListener());
  },
  onUnload() {
    this.$refs.commentInputRef.disposeKeyboardListener();
  },
  methods: {
    fetchMoments(options) {
      this.loading = true;
      getMomentsByID(options.workMomentID)
        .then(({ workMoment }) => {
          this.moments = {
            ...workMoment,
          };
        })
        .catch(() => uni.$u.toast("获取详情失败！"))
        .finally(() => (this.loading = false));
    },
    startComent(workMomentID, comment = {}) {
      this.commentState.workMomentID = workMomentID;
      this.commentState.comment = comment;
      this.commenting = true;
    },
    sendComment(content) {
      this.commentLoading = true;
      commentMoments(
        this.commentState.workMomentID,
        content,
        this.commentState.comment.userID,
      )
        .then(() => {
          const newComment = {
            userID: this.$store.getters.storeCurrentUserID,
            nickname: this.$store.getters.storeSelfInfo.nickname,
            replyUserID: this.commentState.comment.userID,
            replyNickname: this.commentState.comment.nickname,
            commentID: uuidv4(),
            content,
          };
          this.moments.comments = [...this.moments.comments, newComment];
          uni.$emit(
            PageEvents.PushNewComment,
            newComment,
            this.commentState.workMomentID,
          );
        })
        .catch((err) => uni.$u.toast("评论失败！"))
        .finally(() => {
          this.commentLoading = false;
          this.commentState.workMomentID = "";
          this.commentState.comment = {};
          this.commenting = false;
        });
    },
  },
  onBackPress() {
    if (this.commenting) {
      this.commenting = false;
      return true;
    }
    return false;
  },
};
</script>

<style lang="scss" scoped>
.page_container {
  .moments_item {
    flex: 1;
    padding: 0 32rpx;

    /deep/.moments_text {
      -webkit-line-clamp: unset;
    }
  }

  .input_bar {
    display: flex;
    padding: 18rpx 24rpx;
    background-color: #e9f4ff;

    .u-input {
      flex: 1;
      height: 64rpx;
      background-color: #fff;
    }

    .u-button {
      height: 64rpx;
      width: 108rpx;
      margin-left: 24rpx;
    }
  }
}
</style>