✨ add comment report

components.d.ts

@@ -34,6 +34,7 @@ declare module 'vue' {
     ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ASkeleton: typeof import('ant-design-vue/es')['Skeleton']
+    ASpace: typeof import('ant-design-vue/es')['Space']
     ASpin: typeof import('ant-design-vue/es')['Spin']
     AStep: typeof import('ant-design-vue/es')['Step']
     ASteps: typeof import('ant-design-vue/es')['Steps']

src/components/CommentReply/src/CommentInput/CommentInput.vue

@@ -182,7 +182,7 @@ async function commentSubmit(point: any) {
     showSubmitCaptcha.value = false;
     await getCommentList();
   } else {
-    showSubmitCaptcha.value = false;
+    await comment.getSlideCaptchaData();
     message.error(result.message || t('comment.commentError'));
   }
 }

src/components/CommentReply/src/CommentList/CommentList.vue

@@ -100,7 +100,7 @@
                         </AButton>
                         <template #overlay>
                           <AMenu>
-                            <AMenuItem key="report" @click="showMessageReport = true">
+                            <AMenuItem key="report" @click="comment.openReportMessage(item.id)">
                               <WarningOutlined/>
                               {{ t('comment.report') }}
                             </AMenuItem>
@@ -128,10 +128,7 @@
       <AEmpty :description="null" v-show="!comment.commentList.comments"/>
     </ASkeleton>
 
-    <!--举报窗口-->
+    <MessageReport/>
-    <AModal v-model:open="showMessageReport" :title="t('comment.report')" :width="600" :footer="null">
-      <MessageReport/>
-    </AModal>
   </div>
 </template>
 
@@ -164,7 +161,6 @@ const user = useStore().user;
 
 const topicId = ref<string>("123");
 
-const showMessageReport = ref<boolean>(false);
 
 /**
  *  获取评论列表

src/components/CommentReply/src/MessageReport/MessageReport.vue

@@ -1,101 +1,86 @@
 <template>
-  <div>
+  <!--举报窗口-->
-    <ASteps :current="current" :status="current==2?'finish':'process'" @change="handleCurrentChange">
+  <AModal draggable="true" v-model:open="comment.showMessageReport" :title="t('comment.reportSeletion')" :width="600"
-      <AStep title="类型">
+          @cancel="comment.closeReportMessage"
-      </AStep>
+          @ok="handleReport">
-      <AStep title="说明">
+    <div class="message-report-main">
-      </AStep>
+      <ARadioGroup v-model:value="comment.reportType">
-      <AStep title="材料">
+        <AFlex :vertical="true">
-      </AStep>
+          <ASpace direction="vertical">
-    </ASteps>
+            <span class="message-report-title">违反法律法规</span>
-    <div class="steps-content">
+            <div class="message-report-content">
-      <div v-if="current === 0">
+              <ARadio :style="radioStyle" :value="1">违法违规</ARadio>
-        <a-radio-group v-model:value="value">
+              <ARadio :style="radioStyle" :value="2">色情</ARadio>
-          <a-radio :style="radioStyle" :value="1">Option A</a-radio>
+              <ARadio :style="radioStyle" :value="3">低俗</ARadio>
-          <a-radio :style="radioStyle" :value="2">Option B</a-radio>
+              <ARadio :style="radioStyle" :value="4">赌博诈骗</ARadio>
-          <a-radio :style="radioStyle" :value="3">Option C</a-radio>
+              <ARadio :style="radioStyle" :value="5">违法信息外链</ARadio>
-          <a-radio :style="radioStyle" :value="4">
+            </div>
-            More...
+          </ASpace>
-            <a-input v-if="value === 4" style="width: 100px; margin-left: 10px"/>
+          <ASpace direction="vertical">
-          </a-radio>
+            <span class="message-report-title">谣言类不实信息</span>
-        </a-radio-group>
+            <div class="message-report-content">
-      </div>
+              <ARadio :style="radioStyle" :value="6">涉政谣言</ARadio>
-      <div v-if="current === 1">
+              <ARadio :style="radioStyle" :value="7">虚假不实信息</ARadio>
-        <a-textarea :rows="8" placeholder="maxlength is 6" :maxlength="6"/>
+              <ARadio :style="radioStyle" :value="8">涉社会事件谣言</ARadio>
-      </div>
+            </div>
-      <div v-if="current === 2">
+          </ASpace>
-        <a-upload-dragger
+          <ASpace direction="vertical">
-            v-model:fileList="fileList"
+            <span class="message-report-title">侵犯个人权益</span>
-            name="file"
+            <div class="message-report-content">
-            :multiple="true"
+              <ARadio :style="radioStyle" :value="9">人身攻击</ARadio>
-            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+              <ARadio :style="radioStyle" :value="10">侵犯隐私</ARadio>
-            @change="handleChange"
+            </div>
-            @drop="handleDrop"
+          </ASpace>
-        >
+          <ASpace direction="vertical">
-          <p class="ant-upload-drag-icon">
+            <span class="message-report-title">有害社区环境</span>
-            <inbox-outlined></inbox-outlined>
+            <div class="message-report-content">
-          </p>
+              <ARadio :style="radioStyle" :value="11">垃圾广告</ARadio>
-          <p class="ant-upload-text">Click or drag file to this area to upload</p>
+              <ARadio :style="radioStyle" :value="12">引战</ARadio>
-          <p class="ant-upload-hint">
+              <ARadio :style="radioStyle" :value="13">刷屏</ARadio>
-            Support for a single or bulk upload. Strictly prohibit from uploading company data or other
+              <ARadio :style="radioStyle" :value="14">作品不相关</ARadio>
-            band files
+              <ARadio :style="radioStyle" :value="15">违规抽奖</ARadio>
-          </p>
+              <ARadio :style="radioStyle" :value="16">青少年不良信息</ARadio>
-        </a-upload-dragger>
+            </div>
-      </div>
+          </ASpace>
+          <ASpace direction="vertical">
+            <span class="message-report-title">其他</span>
+            <div class="message-report-content">
+              <ARadio :style="radioStyle" :value="17">
+                其他
+              </ARadio>
+              <ATextarea style="margin-top: 10px" v-if="comment.reportType === 17" v-model:value="comment.reportContent"
+                         placeholder="请填写举报内容" :rows="1"/>
+            </div>
+          </ASpace>
+        </AFlex>
+      </ARadioGroup>
     </div>
-    <div class="steps-action">
+  </AModal>
-      <AButton v-if="current > 0 && current <= 2" @click="prev">上一步</AButton>
-      <AButton v-if="current >= 0 && current < 2" type="primary" style="margin-left: 8px" @click="next">下一步</AButton>
-      <AButton
-          style="margin-left: 8px"
-          v-if="current == 2"
-          type="primary"
-          @click="message.success('Processing complete!')"
-      >
-        完成
-      </AButton>
 
-    </div>
-  </div>
 </template>
 <script lang="ts" setup>
-import {reactive, ref} from 'vue';
+import {reactive} from "vue";
-import type {UploadChangeParam} from 'ant-design-vue';
+import {useI18n} from "vue-i18n";
-import {message} from 'ant-design-vue';
+import useStore from "@/store";
 
-const current = ref<number>(0);
+const {t} = useI18n();
-const next = () => {
+const comment = useStore().comment;
-  current.value++;
-};
-const prev = () => {
-  current.value--;
-};
-function handleCurrentChange(index: number) {
-  current.value = index;
-}
-const value = ref<number>(1);
 const radioStyle = reactive({
-  display: 'flex',
+  color: 'rgba(15,15,16,0.66)',
-  height: '30px',
+  fontSize: '13px',
-  lineHeight: '30px',
+  fontWeight: 'bold'
 });
 
-
+/**
-const fileList = ref([]);
+ * 提交举报信息
-const handleChange = (info: UploadChangeParam) => {
+ */
-  const status = info.file.status;
+function handleReport() {
-  if (status !== 'uploading') {
+  const data: any = {
-    console.log(info.file, info.fileList);
+    comment_id: comment.commentId,
-  }
+    report_type: comment.reportType,
-  if (status === 'done') {
+    report_content: comment.reportContent
-    message.success(`${info.file.name} file uploaded successfully.`);
+  };
-  } else if (status === 'error') {
+  console.log(data);
-    message.error(`${info.file.name} file upload failed.`);
-  }
-};
-
-function handleDrop(e: DragEvent) {
-  console.log(e);
 }
 </script>
 <style scoped lang="less" src="./index.scss">

src/components/CommentReply/src/MessageReport/index.scss

@@ -1,16 +1,20 @@
-.steps-content {
+
-    margin-top: 16px;
+.message-report-main {
-    border: 1px dashed #e9e9e9;
+    display: flex;
-    border-radius: 10px;
+    flex-direction: column;
-    background-color: #fafafa;
+
-    min-height: 200px;
+    .message-report-title {
-    text-align: center;
+        font-size: 13px;
-    //padding-top: 80px;
+        color: rgba(15, 15, 16, 0.58);
+        font-weight: bolder;
+    }
+    .message-report-content {
+        border: 1px dashed #e9e9e9;
+        border-radius: 10px;
+        background-color: #fafafa;
+        min-height: 20px;
+        padding: 10px;
+    }
 }
 
-.steps-action {
+
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    margin-top: 24px;
-}

src/components/CommentReply/src/ReplyInput/ReplyInput.vue

@@ -197,7 +197,7 @@ async function replySubmit(point: any) {
     comment.commentMap[props.item.id].reply_count++;
     message.success(t('comment.replySuccess'));
   } else {
-    showSubmitCaptcha.value = false;
+    await comment.getSlideCaptchaData();
     message.error(t('comment.replyError'));
   }
 }

src/components/CommentReply/src/ReplyList/ReplyList.vue

@@ -79,7 +79,7 @@
                       </AButton>
                       <template #overlay>
                         <AMenu>
-                          <AMenuItem key="report" @click="showMessageReport = true">
+                          <AMenuItem key="report" @click="comment.openReportMessage(child.id)">
                             <WarningOutlined/>
                             {{ t('comment.report') }}
                           </AMenuItem>
@@ -106,9 +106,6 @@
       </AFlex>
       <AEmpty :description="null" v-show="!comment.replyList.comments"/>
     </ASpin>
-    <AModal v-model:open="showMessageReport" :title="t('comment.report')" :width="600" :footer="null">
-      <MessageReport/>
-    </AModal>
   </AFlex>
 </template>
 <script lang="ts" setup>
@@ -126,7 +123,6 @@ import {useI18n} from "vue-i18n";
 import useStore from "@/store";
 import ReplyReply from "@/components/CommentReply/src/ReplyReplyInput/ReplyReply.vue";
 import {useThrottleFn} from "@vueuse/core";
-import MessageReport from "@/components/CommentReply/src/MessageReport/MessageReport.vue";
 
 const {t} = useI18n();
 
@@ -139,7 +135,7 @@ const props = defineProps({
     required: true
   }
 });
-const showMessageReport = ref<boolean>(false);
+
 /**
  * 格式化时间
  * @param dateString

src/components/CommentReply/src/ReplyReplyInput/ReplyReply.vue

@@ -200,7 +200,7 @@ async function replyReplySubmit(point: any) {
     comment.commentMap[props.item.id].reply_count++;
     message.success(t('comment.replySuccess'));
   } else {
-    showSubmitCaptcha.value = false;
+    await comment.getSlideCaptchaData();
     message.error(t('comment.replyError'));
   }
 }

src/locales/language/en.ts

@@ -103,5 +103,6 @@ export default {
         illegalImage: 'illegal image！',
         loadingMore: 'loading more',
         noMore: 'no more',
+        reportSeletion: 'Please select the reason for reporting the comment',
     }
 };

src/locales/language/zh.ts

@@ -102,6 +102,7 @@ export default {
         illegalImage: ' 非法图片！',
         loadingMore: '加载更多',
         noMore: '没有更多了',
+        reportSeletion: '请选择举报原因',
     }
 
 };

src/store/modules/commentStore.ts

@@ -33,7 +33,10 @@ export const useCommentStore = defineStore(
         const imageList = ref<any[]>([]);
         const uploadLoading = ref<boolean>(false);
         const emojiList = ref<any[]>(QQ_EMOJI);
-
+        const commentId = ref<number | null>(null);
+        const showMessageReport = ref<boolean>(false);
+        const reportType = ref<number>(0);
+        const reportContent = ref<string>("");
 
         /**
          * 获取评论列表
@@ -256,6 +259,25 @@ export const useCommentStore = defineStore(
             return `${seconds} 秒前`;
         }
 
+        /**
+         *  打开举报弹窗
+         * @param id
+         */
+        function openReportMessage(id: number) {
+            commentId.value = id;
+            showMessageReport.value = true;
+        }
+
+        /**
+         *  关闭举报弹窗
+         */
+        function closeReportMessage() {
+            commentId.value = null;
+            showMessageReport.value = false;
+            reportType.value = 0;
+            reportContent.value = "";
+        }
+
         return {
             commentList,
             commentLoading,
@@ -269,6 +291,10 @@ export const useCommentStore = defineStore(
             imageList,
             uploadLoading,
             emojiList,
+            commentId,
+            showMessageReport,
+            reportType,
+            reportContent,
             getCommentList,
             handleShowReplyInput,
             closeReplyInput,
@@ -282,6 +308,8 @@ export const useCommentStore = defineStore(
             removeBase64Image,
             clearFileList,
             formatTimeAgo,
+            openReportMessage,
+            closeReportMessage
         };
     },
     {