emis-frontend/src/views/emis/EmisBaseTools/Comments.vue

<template>
    <div class="main">
      <div v-if="comments.length > 0">
        <div class="item" v-for="(item,i) in comments" :key="item.id">
          <div class="comment">
            <div class="content-box">
              <div class="meta-box">
                <span class="username">{{item.createBy}}</span>
              </div>
              <div class="content">{{item.content}}</div>
              <div class="reply-stat">
                <span class="author-time">{{item.createTime}}</span>
              </div>
              <!-- <div class="reply-box">
                <div class="item" v-for="(reply,j) in item.reply" :key="j">
                  <div class="comment">
                    <div class="content-box">
                      <div class="meta-box">
                        <span class="username">{{reply.from}}</span>
                      </div>
                      <div class="content">
                        <span>回复<a>{{reply.to}}</a>:</span>
                        <span class="reply">{{reply.comment}}</span>
                      </div>
                      <div class="reply-stat">
                        <span class="author-time">{{reply.time}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
      <div v-else>暂无数据</div>
    </div>
  </template>
  <script>
  
  import { listEmisWaybillProblemFaq } from "@/api/emis/emisWaybillProblemFaq";

  export default {
    name: "Comments",
    props: {
      billCode: {
        type: String,
        required: false
      },
    },
    data() {
      return {
        inputAdd:"",
        isShowEmoji:false,
        replyInput:"",
        btnShow: false,
        index: "0",
        content:'',
        emojiContent: "",
        myName: "",
        to: "",
        toId: -1,
        comments: []
      };
    },
    watch: {
      billCode(newVal) {
        if(newVal){
          this.getList();
        }else{
          this.comments = [];
        }
      },
    },
    directives: {  },
    components: {
      // VEmojiPicker
    },
    methods: {
      getList(){
        listEmisWaybillProblemFaq({billCode: this.billCode}).then(response => {
          // debugger;
          if(response && response.code == 200){
            this.comments = response.rows;
          }else{
            this.$modal.msgError(response.msg)
          }
        })
      }
    }
  };
  </script>
<style  scoped>
  .main {
      margin: 0 auto;
  }

  .main .title {
      color: #8a9aa9;
      font-size: 16px;
      font-weight: 400;
      text-align: center;
      padding: 1.67rem 0 5px;
  }

  .main .comment-form {
      display: flex;
      position: relative;
      padding: 10px;
      background-color: #fafbfc;
      border-radius: 3px;
      margin: 1.333rem 0;
  }

  .main .comment-form .avatar-box {
      flex: 0 0 auto;
  }

  .main .comment-form .avatar-box .header-img {
      margin-right: 10px;
  }

  .main .comment-form .form-box {
      flex: 1 1 auto;
      position: relative;
  }

  .main .comment-form .form-box .input-box {
      position: relative;
      display: inline-block;
      width: 100%;
  }

  .main .comment-form .form-box .input-box .reply-input {
      min-height: 20px;
      line-height: 22px;
      padding: 10px 110px 10px 10px;
      color: #ccc;
      background-color: #fff;
      border: 1px solid #f1f1f1;
      border-radius: 3px;
      text-align: left;
  }

  .main .comment-form .form-box .input-box .reply-input:empty:before {
      content: attr(placeholder);
  }

  .main .comment-form .form-box .input-box .reply-input:focus:before {
      content: none;
  }

  .main .comment-form .form-box .input-box .reply-input:focus {
      border: 1px solid #007fff;
      outline: none;
  }

  .main .comment-form .form-box .action-box {
      display: flex;
      align-items: center;
      margin: .65rem 0 0;
  }

  .main .comment-form .form-box .action-box .reply-btn-box {
      flex: 0 0 auto;
      margin-left: auto;
  }

  .main .item {
      margin-bottom: 15px;
      padding: 10px;
  }

  .main .item .comment {
      display: flex;
  }

  .main .item .comment .user-popover-box {
      height: 40px;
  }

  .main .item .comment .content-box {
      border-bottom: 1px solid #f1f1f1;
      /* margin-left: 15px; */
      flex: 1 1 auto;
      text-align: left;
  }

  .main .item .comment .content-box .meta-box {
      display: flex;
      align-items: center;
      font-size: 14px;
      line-height: 1.2;
      white-space: nowrap;
  }

  .main .item .comment .content-box .content {
      margin-top: 5px;
      font-size: 16px;
      line-height: 1.8;
      word-wrap: break-word;
      white-space: pre-wrap;
      word-break: break-all;
      color: #505050;
  }

  .main .item .comment .content-box .content a {
      display: inline-block;
      margin: 0 4px;
      font-size: 14px;
      font-weight: 400;
      color: #406599;
      cursor: pointer;
  }

  .main .item .comment .content-box .reply-stat {
      display: flex;
      margin-top: 10px;
      font-weight: 400;
  }

  .main .item .comment .content-box .reply-stat .author-time {
      font-size: 14px;
      color: #8a9aa9;
      cursor: default;
  }

  .main .item .comment .content-box .reply-stat .icon-btn {
      flex: 0 0 auto;
      display: flex;
      justify-content: space-between;
      margin-left: auto;
      min-width: 8.8rem;
      color: #8a93a0;
      user-select: none;
  }

  .main .item .comment .content-box .reply-stat .icon-btn span {
      display: inline-block;
      margin: 0 8px;
      min-width: 100px;
      padding: 0 3px;
      cursor: pointer;
  }

  .main .item .comment .content-box .reply-box {
      margin: 15px 0;
      background-color: #efefef;
      border-radius: 3px;
  }

  .main .item .comment .content-box .reply-box .item {
      padding: 10px 0 10px 10px;
  }

  .main .item .comment .content-box .reply-box .item:not(:last-child) {
      border-bottom: 1px solid rgba(178, 186, 194, 0.3);
  }
</style>