fix: 添加已删除标签并整体置灰;修改回复功能，最多200字，且有字才能发送

src/views/system/comments/component/SingleComment.vue

@@ -3,89 +3,106 @@
     class="single-item"
     :style="`padding-bottom:${props.problemData.isReplied === REPLYSTATUS.replied ? '16px' : '38px'}`"
   >
-    <div style="display: flex; font-size: 12px">
-      <div style="color: #00000073">评论人：{{ props.problemData.userName }}-{{ props.problemData.staffNo }} </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 === COMMENTSTATUS.passed"
-        type="primary"
-        style="width: 74px; margin-left: auto; margin-right: 0"
-        @click="hideComment"
-        >隐藏</el-button
-      >
-      <el-button
-        v-show="props.problemData.status === COMMENTSTATUS.rejected"
-        type="primary"
-        style="width: 74px; margin-left: auto; margin-right: 0"
-        @click="displayComment"
-        >显示</el-button
-      >
-      <el-button
-        v-show="
-          props.problemData.isReplied === REPLYSTATUS.unReplied && props.problemData.status === COMMENTSTATUS.passed
-        "
-        style="width: 74px"
-        type="primary"
-        @click="openReply = true"
-        >回复</el-button
-      >
-      <el-button v-show="props.problemData.isReplied === REPLYSTATUS.replied" style="width: 74px" disabled
-        >已回复</el-button
-      >
-    </div>
+    <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.userName }}-{{ props.problemData.staffNo }} </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 === COMMENTSTATUS.passed"
+          type="primary"
+          style="width: 74px; margin-left: auto; margin-right: 0"
+          @click="hideComment"
+          >隐藏</el-button
+        >
+        <el-button
+          v-show="props.problemData.status === COMMENTSTATUS.rejected"
+          type="primary"
+          style="width: 74px; margin-left: auto; margin-right: 0"
+          @click="displayComment"
+          >显示</el-button
+        >
+        <el-button
+          v-show="
+            props.problemData.isReplied === REPLYSTATUS.unReplied && props.problemData.status === COMMENTSTATUS.passed
+          "
+          style="width: 74px"
+          type="primary"
+          @click="openReply = true"
+          >回复</el-button
+        >
+        <el-button v-show="props.problemData.isReplied === REPLYSTATUS.replied" style="width: 74px" disabled
+          >已回复</el-button
+        >
+      </div>
 
-    <el-divider />
-    <div class="problem-describe">
-      <div>评论内容：</div>
-      <div class="problem-content">{{ props.problemData.comment }}</div>
-      <div v-show="props.problemData.isUserDeleted === 1" class="delete-label"></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"
-        />
+      <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>
 
-    <div v-if="openReply === true" style="position: relative">
-      <el-input placeholder="请输入回复(不超过30个字符)" type="textarea" v-model="replyContent" rows="4"> </el-input>
-      <span
-        style="
-          position: absolute;
-          left: 10px;
-          padding-bottom: 5px;
-          bottom: 2px;
-          color: grey;
-          background-color: #fff;
-          line-height: 0;
-          font-size: 12px;
-        "
-      >
-        <span style="line-height: normal" :style="replyContent.length > 203 ? 'color:red' : ''">{{
-          replyContent.length - 3
-        }}</span>
-        <span style="line-height: normal">/200</span>
-      </span>
-      <div style="position: absolute; height: 32px; right: 10px; padding-bottom: 5px; bottom: 2px">
-        <el-button style="margin-top: 3px" type="primary" size="small" @click="submitReply">发布</el-button>
-        <el-button style="margin-top: 3px" size="small" @click="openReply = false">取消</el-button>
+      <div v-if="openReply === true" style="position: relative">
+        <el-input
+          placeholder="请输入回复(不超过200个字符)"
+          type="textarea"
+          v-model="replyContent"
+          rows="4"
+          maxlength="200"
+        >
+        </el-input>
+        <span
+          v-show="replyContent.length > 185"
+          style="
+            position: absolute;
+            left: 10px;
+            padding-bottom: 5px;
+            bottom: 2px;
+            color: grey;
+            background-color: #fff;
+            line-height: 0;
+            font-size: 12px;
+          "
+        >
+          <span style="line-height: normal" :style="replyContent.length === 200 ? 'color:red' : ''">{{
+            replyContent.length
+          }}</span>
+          <span style="line-height: normal">/200</span>
+        </span>
+        <div style="position: absolute; height: 32px; right: 10px; padding-bottom: 5px; bottom: 2px">
+          <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>
 
-    <div v-if="props.problemData.isReplied === REPLYSTATUS.replied" style="position: relative">
-      <el-input type="textarea" v-model="props.problemData.reply" rows="3" disabled> </el-input>
+      <div v-if="props.problemData.isReplied === REPLYSTATUS.replied" style="position: relative">
+        <el-input type="textarea" v-model="props.problemData.reply" rows="3" disabled> </el-input>
+      </div>
     </div>
   </div>
 </template>
@@ -117,7 +134,7 @@
     });
   };
   const submitReply = () => {
-    replyComment({ id: props.problemData.id, reply: replyContent.value }).then(() => {
+    replyComment({ id: props.problemData.id, reply: '回复: ' + replyContent.value }).then(() => {
       openReply.value = false;
       emit('reFreshList');
     });
@@ -125,7 +142,7 @@
 
   const openReply = ref(false);
 
-  const replyContent = ref('回复：');
+  const replyContent = ref('');
 </script>
 
 <style scoped>
@@ -137,6 +154,17 @@
     position: relative;
   }
 
+  .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;
+  }
+
   .single-contact {
     margin-left: 20px;
     margin-right: 40px;
@@ -166,18 +194,6 @@
     word-break: break-word;
     display: flex;
     margin-bottom: 8px;
-    .delete-label {
-      width: 100px;
-      height: 60px;
-      position: absolute;
-      right: 80px;
-      top: 60px;
-      background-image: url('@/assets/icons/config-fail.png');
-      background-size: 100% 100%;
-      cursor: pointer;
-
-      background-size: 100% 100%;
-    }
   }
 
   .type-content,