|
|
@@ -1,311 +0,0 @@
|
|
|
-<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
|