crm-mobile/pages_log/component/commentPopup.vue

<template>
  <view class="popup">
    <view class="popup-header">
      <text class="wk wk-close icon" @click="handleClose" />
      <text class="text">
        全部{{ journalData.replyNum }}条评论
      </text>
    </view>

    <scroll-view scroll-y class="popup-container">
      <comment-list
        :show-icon="false"
        :reply-list="replyData"
        class="comment-list"
        @choose="handleChooseUser" />
    </scroll-view>

    <add-comment
      ref="comment"
      v-model="content"
      :replay="replayInfo"
      :immediate-focus="immediateFocus"
      @change-user="changeUser"
      @submit="submit" />
  </view>
</template>

<script>
  import { SetComment } from 'API/oa/comment'

  import CommentList from '@/components/base/comment-list.vue'
  import AddComment from '@/components/base/add-comment.vue'

  export default {
    name: 'CommentPopup',
    components: {
      CommentList,
      AddComment
    },
    props: {
      journalData: {
        type: Object,
        required: true
      },
      replyData: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        content: '',
        replayInfo: null,
        immediateFocus: false,
      }
    },
    methods: {
      handleChooseUser(user) {
        console.log('selected: ', user)
        if (this.replayInfo) {
          let str = `回复@${this.replayInfo.user.realname} `
          if (this.content.startsWith(str)) {
            this.content = this.content.replace(str, `回复@${user.user.realname} `)
          } else {
            this.content = `回复@${user.user.realname} ` + this.content
          }
        } else {
          this.content = `回复@${user.user.realname} ` + this.content
        }
        this.replayInfo = user
        this.$refs.comment.focus()
      },

      changeUser(data) {
        this.replayInfo = data
      },

      submit() {
        let params = {
          type: 2,
          typeId: this.journalData.logId,
          content: this.content
        }
        if (this.replayInfo) {
          params.pid = this.replayInfo.userId; // 被回复人的id
          params.mainId = this.replayInfo.mainId != 0 ? this.replayInfo.mainId : this.replayInfo.commentId; // 回复主id

          let str = `回复@${this.replayInfo.user.realname} `
          if (params.content.startsWith(str)) {
            params.content = params.content.replace(str, '')
          }
        }
        if (this.$isEmpty(params.content)) {
          this.$toast('回复内容不能为空')
          return
        }
        console.log('save: ', params)
        SetComment(params).then(() => {
          this.$toast('回复成功')
          this.content = ''
          this.replayInfo = null
          this.showEmoji = false
          this.$emit('update')
        }).catch()
      },

      handleClose() {
        this.$emit('close')
      }
    }
  }
</script>

<style scoped lang="scss">
.popup {
  padding-top: 20rpx;
  padding-bottom: 112rpx;

  .popup-header {
    position: relative;
    padding: 0 36rpx;
    margin-bottom: 36rpx;
    @include center;
    .text {
      font-size: $wk-font-large;
    }
    .icon {
      position: absolute;
      left: 20rpx;
      top: 50%;
      transform: translateY(-50%);
      color: $gray;
      font-size: $wk-font-medium;
      padding: 20rpx;

      &.wk-arrow-right {
        transform: rotate(180deg) translateY(50%);
        transform-origin: center center;
      }
    }
  }

  .popup-container {
    min-height: 45vh;
    max-height: 65vh;
    padding: 0 36rpx 15rpx;
    overflow: auto;
    box-sizing: border-box;

    .comment-list {
      overflow: initial;
    }
  }
}
</style>