sl-sfy-safety/src/views/system/comments/component/SingleComment.vue

<template>
  <div>
    <div
      class="single-item"
      :style="`padding-bottom:${props.problemData.isReplied === REPLY_STATUS.REPLIED ? '16px' : '38px'}`"
    >
      <div v-show="props.problemData.isUserDeleted === 1" class="delete-label"></div>
      <div :style="{ opacity: props.problemData.isUserDeleted === 1 ? 0.6 : 1 }">
        <div style="display: flex; font-size: 12px">
          <div style="color: #00000073">
            评论人：{{ props.problemData.realname }}({{ props.problemData.userName }} )
          </div>
          <div style="margin-left: 20px; color: #00000073">日期：{{ props.problemData.createdAt }}</div>
          <!-- <img src="@/assets/icons/phone.png" alt="" /> -->
          <div class="single-contact">联系方式：{{ props.problemData.mobile }}</div>
        </div>
        <div class="buttonBar">
          <el-button
            v-show="props.problemData.status === COMMENT_STATUS.PASSED"
            type="primary"
            class="label-button"
            style="margin-left: auto; margin-right: 0"
            @click="showDialogBox('隐藏', '取消展示')"
            :disabled="props.problemData.isUserDeleted"
          >
            隐藏
          </el-button>
          <el-button
            v-show="props.problemData.status !== COMMENT_STATUS.PASSED"
            type="primary"
            class="label-button"
            style="margin-left: auto; margin-right: 0"
            @click="showDialogBox('显示', '公开展示')"
            :disabled="props.problemData.isUserDeleted"
          >
            显示
          </el-button>
          <el-button
            v-show="
              props.problemData.isReplied === REPLY_STATUS.UN_REPLIED &&
              props.problemData.status === COMMENT_STATUS.PASSED
            "
            class="label-button"
            type="primary"
            @click="openReply = true"
            :disabled="props.problemData.isUserDeleted"
          >
            回复
          </el-button>
          <el-button v-show="props.problemData.isReplied === REPLY_STATUS.REPLIED" class="label-button" disabled>
            已回复
          </el-button>
        </div>

        <el-divider />
        <div class="problem-describe">
          <div>评论内容：</div>
          <div class="problem-content">{{ props.problemData.comment }}</div>
        </div>
        <div class="problem-picture">
          <div class="picture-content" v-for="(item, index) in problemImageUrls" :key="index">
            <el-image
              style="width: 80px; height: 80px"
              :src="item"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="problemImageUrls"
              :initial-index="index"
              fit="cover"
            />
          </div>
        </div>

        <div v-if="openReply === true" style="position: relative">
          <el-input
            placeholder="请输入回复(不超过200个字符)"
            type="textarea"
            v-model="replyContent"
            rows="4"
            maxlength="200"
            resize="none"
          >
          </el-input>
          <span v-show="replyContent.length > 185" class="word-count">
            <span style="line-height: normal" :style="replyContent.length === 200 ? 'color:red' : ''">
              {{ replyContent.length }}
            </span>
            <span style="line-height: normal">/200</span>
          </span>
          <div class="reply-button-area">
            <el-button
              style="margin-top: 3px"
              type="primary"
              size="small"
              @click="submitReply"
              :disabled="replyContent.length === 0"
            >
              发布
            </el-button>
            <el-button style="margin-top: 3px" size="small" @click="openReply = false">取消</el-button>
          </div>
        </div>

        <div v-if="props.problemData.isReplied === REPLY_STATUS.REPLIED" style="position: relative">
          <el-input type="textarea" v-model="props.problemData.reply" rows="3" disabled> </el-input>
        </div>
      </div>
    </div>
    <el-dialog v-model="showDialog" width="424px" top="20%" class="dialog">
      <template #header="">
        <div class="dialogHeader">
          <img src="@/assets/icons/deleteTip.png" class="deleteTip" />
          <span class="titleSpan">请确认是否{{ title }}</span>
        </div>
      </template>
      <span style="margin-left: 37px">{{ title }}后，该评论将在前台{{ result }}</span>
      <div class="dialogBottom">
        <el-button class="dialogBtn" type="primary" @click="submit">确定</el-button>
        <el-button class="dialogBtn" @click="showDialog = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue';
  import { undateCommentStatus, replyComment } from '@/api/comments/comments';
  import { REPLY_STATUS, COMMENT_STATUS } from '@/types/comments/constant';
  import { Records } from '@/types/comments/type';
  const props = defineProps<{
    problemData: Records;
  }>();

  const emit = defineEmits(['reFreshList']);

  const problemImageUrls = computed(() => {
    const imageUrlString = props.problemData.picUrl;
    return imageUrlString ? imageUrlString.split(',') : [];
  });

  const showDialog = ref(false);
  const title = ref('显示'); //该值为显示或隐藏
  const result = ref('公开展示'); //该值为公开展示或取消展示

  const showDialogBox = (setTitle: string, setResult: string) => {
    title.value = setTitle;
    result.value = setResult;
    showDialog.value = true;
  };

  const submit = () => {
    if (title.value === '显示') {
      displayComment();
    } else {
      hideComment();
    }
  };

  const hideComment = () => {
    undateCommentStatus({ id: props.problemData.id, status: COMMENT_STATUS.REJECTED }).then(() => {
      showDialog.value = false;
      emit('reFreshList');
    });
  };
  const displayComment = () => {
    undateCommentStatus({ id: props.problemData.id, status: COMMENT_STATUS.PASSED }).then(() => {
      showDialog.value = false;
      emit('reFreshList');
    });
  };
  const submitReply = () => {
    replyComment({ id: props.problemData.id, reply: replyContent.value }).then(() => {
      openReply.value = false;
      emit('reFreshList');
    });
  };

  const openReply = ref(false);

  const replyContent = ref('');
</script>

<style scoped>
  .single-item {
    background: #ffffff;
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.09);
    border-radius: 6px;
    padding: 16px 12px 0px 12px;
    position: relative;
    margin-top: 22px;
    margin-bottom: 2px;
  }

  .delete-label {
    width: 80px;
    height: 70px;
    position: absolute;
    right: 40px;
    top: 50px;
    background-image: url('@/assets/icons/deleted.png');
    background-size: 100% 100%;
    z-index: 99;
  }

  .label-button {
    width: 74px;
  }

  .single-contact {
    margin-left: 20px;
    margin-right: 40px;
    color: #00000073;
  }
  .buttonBar {
    position: absolute;
    display: flex;
    width: 200px;
    top: 11px;
    right: 12px;
  }
  .single-handle {
    position: relative;
    top: 11px;
    right: 12px;
  }

  .el-divider--horizontal {
    margin: 16px 0;
  }

  .problem-type,
  .problem-describe {
    font-size: 14px;
    white-space: nowrap;
    word-break: break-word;
    display: flex;
    margin-bottom: 8px;
  }

  .type-content,
  .problem-content {
    white-space: pre-wrap;
    word-break: break-word;
  }
  .type-content {
    font-weight: 600;
  }
  .problem-picture {
    display: flex;
    gap: 20px;
  }

  .word-count {
    position: absolute;
    left: 10px;
    padding-bottom: 5px;
    bottom: 2px;
    color: grey;
    background-color: #fff;
    line-height: 0;
    font-size: 12px;
  }

  .reply-button-area {
    position: absolute;
    height: 32px;
    right: 10px;
    padding-bottom: 5px;
    bottom: 2px;
  }

  .dialog {
    .dialogHeader {
      display: flex;
      .deleteTip {
        height: 24px;
        width: 24px;
      }
      .titleSpan {
        height: 24px;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.88);
        line-height: 24px;
        text-align: center;
        margin-left: 12px;
      }
    }
    .dialogBottom {
      display: flex;
      justify-content: flex-end;
      margin-top: 12px;
    }
  }

  :deep(.el-collapse-item__header) {
    border-bottom: none;
  }

  :deep(.el-collapse-item__wrap) {
    border-bottom: none;
  }

  :deep(.el-collapse-item__content) {
    padding-bottom: 0px;
  }
  :deep(.el-collapse) {
    border-top: none;
  }
</style>
@/types/comments/constant