✨ add comment report

2024-11-03 22:49:45 +08:00
parent c725936f39
commit fca5879dc0
11 changed files with 131 additions and 119 deletions
--- a/components.d.ts
+++ b/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']
--- a/src/components/CommentReply/src/CommentInput/CommentInput.vue
+++ b/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'));
  }
 }
--- a/src/components/CommentReply/src/CommentList/CommentList.vue
+++ b/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>

-    <!--举报窗口-->
-    <AModal v-model:open="showMessageReport" :title="t('comment.report')" :width="600" :footer="null">
-      <MessageReport/>
-    </AModal>
+    <MessageReport/>
  </div>
 </template>

@@ -164,7 +161,6 @@ const user = useStore().user;

 const topicId = ref<string>("123");

-const showMessageReport = ref<boolean>(false);

 /**
 *  获取评论列表
--- a/src/components/CommentReply/src/MessageReport/MessageReport.vue
+++ b/src/components/CommentReply/src/MessageReport/MessageReport.vue
@@ -1,101 +1,86 @@
 <template>
-  <div>
-    <ASteps :current="current" :status="current==2?'finish':'process'" @change="handleCurrentChange">
-      <AStep title="类型">
-      </AStep>
-      <AStep title="说明">
-      </AStep>
-      <AStep title="材料">
-      </AStep>
-    </ASteps>
-    <div class="steps-content">
-      <div v-if="current === 0">
-        <a-radio-group v-model:value="value">
-          <a-radio :style="radioStyle" :value="1">Option A</a-radio>
-          <a-radio :style="radioStyle" :value="2">Option B</a-radio>
-          <a-radio :style="radioStyle" :value="3">Option C</a-radio>
-          <a-radio :style="radioStyle" :value="4">
-            More...
-            <a-input v-if="value === 4" style="width: 100px; margin-left: 10px"/>
-          </a-radio>
-        </a-radio-group>
-      </div>
-      <div v-if="current === 1">
-        <a-textarea :rows="8" placeholder="maxlength is 6" :maxlength="6"/>
-      </div>
-      <div v-if="current === 2">
-        <a-upload-dragger
-            v-model:fileList="fileList"
-            name="file"
-            :multiple="true"
-            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-            @change="handleChange"
-            @drop="handleDrop"
-        >
-          <p class="ant-upload-drag-icon">
-            <inbox-outlined></inbox-outlined>
-          </p>
-          <p class="ant-upload-text">Click or drag file to this area to upload</p>
-          <p class="ant-upload-hint">
-            Support for a single or bulk upload. Strictly prohibit from uploading company data or other
-            band files
-          </p>
-        </a-upload-dragger>
-      </div>
+  <!--举报窗口-->
+  <AModal draggable="true" v-model:open="comment.showMessageReport" :title="t('comment.reportSeletion')" :width="600"
+          @cancel="comment.closeReportMessage"
+          @ok="handleReport">
+    <div class="message-report-main">
+      <ARadioGroup v-model:value="comment.reportType">
+        <AFlex :vertical="true">
+          <ASpace direction="vertical">
+            <span class="message-report-title">违反法律法规</span>
+            <div class="message-report-content">
+              <ARadio :style="radioStyle" :value="1">违法违规</ARadio>
+              <ARadio :style="radioStyle" :value="2">色情</ARadio>
+              <ARadio :style="radioStyle" :value="3">低俗</ARadio>
+              <ARadio :style="radioStyle" :value="4">赌博诈骗</ARadio>
+              <ARadio :style="radioStyle" :value="5">违法信息外链</ARadio>
+            </div>
+          </ASpace>
+          <ASpace direction="vertical">
+            <span class="message-report-title">谣言类不实信息</span>
+            <div class="message-report-content">
+              <ARadio :style="radioStyle" :value="6">涉政谣言</ARadio>
+              <ARadio :style="radioStyle" :value="7">虚假不实信息</ARadio>
+              <ARadio :style="radioStyle" :value="8">涉社会事件谣言</ARadio>
+            </div>
+          </ASpace>
+          <ASpace direction="vertical">
+            <span class="message-report-title">侵犯个人权益</span>
+            <div class="message-report-content">
+              <ARadio :style="radioStyle" :value="9">人身攻击</ARadio>
+              <ARadio :style="radioStyle" :value="10">侵犯隐私</ARadio>
+            </div>
+          </ASpace>
+          <ASpace direction="vertical">
+            <span class="message-report-title">有害社区环境</span>
+            <div class="message-report-content">
+              <ARadio :style="radioStyle" :value="11">垃圾广告</ARadio>
+              <ARadio :style="radioStyle" :value="12">引战</ARadio>
+              <ARadio :style="radioStyle" :value="13">刷屏</ARadio>
+              <ARadio :style="radioStyle" :value="14">作品不相关</ARadio>
+              <ARadio :style="radioStyle" :value="15">违规抽奖</ARadio>
+              <ARadio :style="radioStyle" :value="16">青少年不良信息</ARadio>
+            </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">
-      <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>
+  </AModal>

-    </div>
-  </div>
 </template>
 <script lang="ts" setup>
-import {reactive, ref} from 'vue';
-import type {UploadChangeParam} from 'ant-design-vue';
-import {message} from 'ant-design-vue';
+import {reactive} from "vue";
+import {useI18n} from "vue-i18n";
+import useStore from "@/store";

-const current = ref<number>(0);
-const next = () => {
-  current.value++;
-};
-const prev = () => {
-  current.value--;
-};
-function handleCurrentChange(index: number) {
-  current.value = index;
-}
-const value = ref<number>(1);
+const {t} = useI18n();
+const comment = useStore().comment;
 const radioStyle = reactive({
-  display: 'flex',
-  height: '30px',
-  lineHeight: '30px',
+  color: 'rgba(15,15,16,0.66)',
+  fontSize: '13px',
+  fontWeight: 'bold'
 });

-
-const fileList = ref([]);
-const handleChange = (info: UploadChangeParam) => {
-  const status = info.file.status;
-  if (status !== 'uploading') {
-    console.log(info.file, info.fileList);
-  }
-  if (status === 'done') {
-    message.success(`${info.file.name} file uploaded successfully.`);
-  } else if (status === 'error') {
-    message.error(`${info.file.name} file upload failed.`);
-  }
-};
-
-function handleDrop(e: DragEvent) {
-  console.log(e);
+/**
+ * 提交举报信息
+ */
+function handleReport() {
+  const data: any = {
+    comment_id: comment.commentId,
+    report_type: comment.reportType,
+    report_content: comment.reportContent
+  };
+  console.log(data);
 }
 </script>
 <style scoped lang="less" src="./index.scss">
--- a/src/components/CommentReply/src/MessageReport/index.scss
+++ b/src/components/CommentReply/src/MessageReport/index.scss
@@ -1,16 +1,20 @@
-.steps-content {
-    margin-top: 16px;
-    border: 1px dashed #e9e9e9;
-    border-radius: 10px;
-    background-color: #fafafa;
-    min-height: 200px;
-    text-align: center;
-    //padding-top: 80px;
+
+.message-report-main {
+    display: flex;
+    flex-direction: column;
+
+    .message-report-title {
+        font-size: 13px;
+        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;
-}
+
--- a/src/components/CommentReply/src/ReplyInput/ReplyInput.vue
+++ b/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'));
  }
 }
--- a/src/components/CommentReply/src/ReplyList/ReplyList.vue
+++ b/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
--- a/src/components/CommentReply/src/ReplyReplyInput/ReplyReply.vue
+++ b/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'));
  }
 }
--- a/src/locales/language/en.ts
+++ b/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',
    }
 };
--- a/src/locales/language/zh.ts
+++ b/src/locales/language/zh.ts
@@ -102,6 +102,7 @@ export default {
        illegalImage: ' 非法图片！',
        loadingMore: '加载更多',
        noMore: '没有更多了',
+        reportSeletion: '请选择举报原因',
    }

 };
--- a/src/store/modules/commentStore.ts
+++ b/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
        };
    },
    {