From 554745c8cb21be6bff39de0273f0197657e67139 Mon Sep 17 00:00:00 2001
From: lvzhenbo <294221990@qq.com>
Date: Mon, 6 May 2024 18:02:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B8=96=E5=AD=90=E5=9B=9E=E5=A4=8D=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=AE=8C=E6=88=90=EF=BC=8C=E7=BC=96=E8=BE=91=E5=99=A8?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/forum.ts                           |  51 +++++-
 src/components/Editor/CommendTab.vue       |   4 +
 src/composables/useMyEditor.ts             |  39 +++++
 src/views/Thread/add.vue                   |  33 +---
 src/views/Thread/components/rateModal.vue  |   8 +-
 src/views/Thread/components/replyModal.vue | 177 +++++++++++++++++++++
 src/views/Thread/index.vue                 |  26 ++-
 7 files changed, 295 insertions(+), 43 deletions(-)
 create mode 100644 src/composables/useMyEditor.ts
 create mode 100644 src/views/Thread/components/replyModal.vue

diff --git a/src/api/forum.ts b/src/api/forum.ts
index 6335c14..2e0f31b 100644
--- a/src/api/forum.ts
+++ b/src/api/forum.ts
@@ -36,8 +36,14 @@ export interface RateParams {
   pid: string;
 }
 
-export interface NotificationParams {
-  last_updated: string;
+interface ReplyParams {
+  noticetrimstr: string;
+  reppid: string;
+  formhash: string;
+  clienthash: string;
+  message: string;
+  noticeauthor: string;
+  tid: string;
 }
 
 const API = {
@@ -118,6 +124,30 @@ const API = {
       action: 'newthread',
     },
   } as HttpOptions,
+  ReplyInfo: {
+    method: 'GET',
+    url: '/forum.php',
+    params: {
+      mobile: 'yes',
+      tsdmapp: '1',
+      mod: 'post',
+      action: 'reply',
+    },
+  } as HttpOptions,
+  Reply: {
+    method: 'POST',
+    url: '/forum.php',
+    params: {
+      mobile: 'yes',
+      tsdmapp: '1',
+      mod: 'post',
+      action: 'reply',
+      replysubmit: 'yes',
+    },
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+  } as HttpOptions,
 };
 
 export const forumGroup = () => request(API.ForumGroup);
@@ -181,7 +211,7 @@ export const coinRemain = (params: RateParams) =>
     },
   });
 
-export const notification = (params: NotificationParams) =>
+export const notification = (params: { last_updated: string }) =>
   request({
     ...API.Notification,
     params: {
@@ -198,3 +228,18 @@ export const newThreadType = (params: string) =>
       fid: params,
     },
   });
+
+export const replyInfo = (params: { tid: string; repquote: string }) =>
+  request({
+    ...API.ReplyInfo,
+    params: {
+      ...API.ReplyInfo.params,
+      ...params,
+    },
+  });
+
+export const reply = (params: ReplyParams) =>
+  request({
+    ...API.Reply,
+    data: params,
+  });
diff --git a/src/components/Editor/CommendTab.vue b/src/components/Editor/CommendTab.vue
index ec6a561..514ef94 100644
--- a/src/components/Editor/CommendTab.vue
+++ b/src/components/Editor/CommendTab.vue
@@ -98,6 +98,10 @@
       type: Object as PropType<Editor>,
       default: null,
     },
+    mode: {
+      type: String,
+      default: 'add',
+    },
   });
 
   const editorCMD = computed(() => props.editor.chain().focus());
diff --git a/src/composables/useMyEditor.ts b/src/composables/useMyEditor.ts
new file mode 100644
index 0000000..17f3782
--- /dev/null
+++ b/src/composables/useMyEditor.ts
@@ -0,0 +1,39 @@
+import { useEditor } from '@tiptap/vue-3';
+import StarterKit from '@tiptap/starter-kit';
+import Color from '@tiptap/extension-color';
+import TextStyle from '@tiptap/extension-text-style';
+import Underline from '@tiptap/extension-underline';
+import TextAlign from '@tiptap/extension-text-align';
+import Image from '@tiptap/extension-image';
+
+export const useMyEditor = () => {
+  const content = ref('');
+  const editor = useEditor({
+    content: content.value,
+    extensions: [
+      StarterKit,
+      Color,
+      TextStyle,
+      Underline,
+      TextAlign.configure({
+        types: ['heading', 'paragraph'],
+      }),
+      Image.configure({
+        inline: true,
+      }),
+    ],
+    onUpdate: ({ editor }) => {
+      content.value = editor.getHTML();
+    },
+    editorProps: {
+      attributes: {
+        class: 'focus:outline-none focus:caret-[--ion-color-primary]',
+      },
+    },
+  });
+
+  return {
+    content,
+    editor,
+  };
+};
diff --git a/src/views/Thread/add.vue b/src/views/Thread/add.vue
index db22967..384f147 100644
--- a/src/views/Thread/add.vue
+++ b/src/views/Thread/add.vue
@@ -44,15 +44,9 @@
 
 <script setup lang="ts">
   import { htmlToBBCode } from '@/utils/html2bbcode';
-  import { useEditor } from '@tiptap/vue-3';
-  import StarterKit from '@tiptap/starter-kit';
-  import Color from '@tiptap/extension-color';
-  import TextStyle from '@tiptap/extension-text-style';
-  import Underline from '@tiptap/extension-underline';
-  import TextAlign from '@tiptap/extension-text-align';
-  import Image from '@tiptap/extension-image';
   import { useSettingStore } from '@/stores/modules/setting';
   import { newThreadType } from '@/api/forum';
+  import { useMyEditor } from '@/composables/useMyEditor';
 
   interface ThreadType {
     typeid: number;
@@ -64,30 +58,7 @@
   });
 
   const route = useRoute();
-  const content = ref('');
-  const editor = useEditor({
-    content: content.value,
-    extensions: [
-      StarterKit,
-      Color,
-      TextStyle,
-      Underline,
-      TextAlign.configure({
-        types: ['heading', 'paragraph'],
-      }),
-      Image.configure({
-        inline: true,
-      }),
-    ],
-    onUpdate: ({ editor }) => {
-      content.value = editor.getHTML();
-    },
-    editorProps: {
-      attributes: {
-        class: 'focus:outline-none focus:caret-[--ion-color-primary]',
-      },
-    },
-  });
+  const { editor, content } = useMyEditor();
   const settingStore = useSettingStore();
   const fid = ref('');
   const threadTypeList = ref<ThreadType[]>([]);
diff --git a/src/views/Thread/components/rateModal.vue b/src/views/Thread/components/rateModal.vue
index 9564278..2fc4f18 100644
--- a/src/views/Thread/components/rateModal.vue
+++ b/src/views/Thread/components/rateModal.vue
@@ -83,7 +83,7 @@
   const isOpen = defineModel('isOpen', { type: Boolean, default: false });
 
   const props = defineProps({
-    pid: {
+    ratePid: {
       type: String,
       required: true,
     },
@@ -98,10 +98,10 @@
   const settingStore = useSettingStore();
 
   watch(
-    () => props.pid,
+    () => props.ratePid,
     (val) => {
       console.log(val);
-      getRemainCoin();
+      // getRemainCoin();
     },
   );
 
@@ -109,7 +109,7 @@
     try {
       modalContent.value = false;
       loading.value = true;
-      const res = await coinRemain({ tid: route.params.tid as string, pid: props.pid });
+      const res = await coinRemain({ tid: route.params.tid as string, pid: props.ratePid });
       if (res.data) {
         const data = JSON.parse(res.data);
         if (data.status === 0) {
diff --git a/src/views/Thread/components/replyModal.vue b/src/views/Thread/components/replyModal.vue
new file mode 100644
index 0000000..9978378
--- /dev/null
+++ b/src/views/Thread/components/replyModal.vue
@@ -0,0 +1,177 @@
+<template>
+  <IonModal :is-open="isOpen" @did-dismiss="isOpen = false">
+    <IonHeader>
+      <IonToolbar
+        :color="settingStore.isDark ? undefined : 'primary'"
+        class="!pt-[var(--safe-area-inset-top)]"
+      >
+        <IonButtons slot="start">
+          <IonButton @click="closeFunc(false)">
+            <IonIcon slot="icon-only" :icon="close" />
+          </IonButton>
+        </IonButtons>
+        <IonTitle>回复</IonTitle>
+        <IonButtons slot="end">
+          <!-- 确认按钮 -->
+          <IonButton @click="handleReply">
+            <IonIcon slot="icon-only" :icon="checkmark" />
+          </IonButton>
+        </IonButtons>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent color="light">
+      <IonList :inset="true">
+        <IonItem>
+          <IonLabel>
+            <Editor :editor="editor" />
+          </IonLabel>
+        </IonItem>
+      </IonList>
+      <CommendTab slot="fixed" :editor="editor" mode="reply" />
+    </IonContent>
+  </IonModal>
+</template>
+
+<script setup lang="ts">
+  import { useSettingStore } from '@/stores/modules/setting';
+  import { close, checkmark } from 'ionicons/icons';
+  import { htmlToBBCode } from '@/utils/html2bbcode';
+  import { replyInfo, reply } from '@/api/forum';
+  import ClientHash from '@/utils/clientHashPlugin';
+  import { useMyEditor } from '@/composables/useMyEditor';
+  import { alertController, loadingController } from '@ionic/vue';
+
+  const isOpen = defineModel('isOpen', { type: Boolean, default: false });
+  const props = defineProps({
+    replyPid: {
+      type: String,
+      required: true,
+    },
+  });
+
+  const emits = defineEmits(['close']);
+
+  const route = useRoute();
+  const settingStore = useSettingStore();
+  const { editor, content } = useMyEditor();
+  const info = reactive({
+    noticetrimstr: '',
+    formhash: '',
+    noticeauthor: '',
+  });
+
+  watch(isOpen, (val) => {
+    if (val) {
+      getReplyInfo();
+    }
+  });
+
+  const closeFunc = (val: boolean) => {
+    emits('close', val);
+  };
+
+  const getReplyInfo = async () => {
+    const loading = await loadingController.create({
+      message: '获取信息中...',
+    });
+    await loading.present();
+    try {
+      const res = await replyInfo({ repquote: props.replyPid, tid: route.params.tid as string });
+      if (res.data) {
+        const data = JSON.parse(
+          res.data
+            .replace(/\n/g, '\\n')
+            .replace(/\r/g, '\\r')
+            .replace(/\t/g, '\\t')
+            // eslint-disable-next-line no-control-regex
+            .replace(/\u0000/g, '')
+            // eslint-disable-next-line no-control-regex
+            .replace(/\u0014/g, '\\u0014'),
+        );
+        if (data.status === 0) {
+          info.noticetrimstr = data.noticetrimstr;
+          info.formhash = data.formhash;
+          info.noticeauthor = data.noticeauthor;
+        } else {
+          throw new Error(data);
+        }
+      }
+      await loading.dismiss();
+    } catch (error) {
+      await loading.dismiss();
+      const alert = await alertController.create({
+        header: '提示',
+        message: '获取信息失败，请重试！',
+        buttons: [
+          {
+            text: '确定',
+            role: 'cancel',
+            handler: () => {
+              closeFunc(false);
+            },
+          },
+        ],
+      });
+      await alert.present();
+      console.error(error);
+    }
+  };
+
+  const handleReply = async () => {
+    const loading = await loadingController.create({
+      message: '回复发送中...',
+    });
+    await loading.present();
+    try {
+      const { value: clienthash } = await ClientHash.getClientHash({
+        value: `TSDM_APP_${info.formhash}`,
+      });
+      const res = await reply({
+        ...info,
+        reppid: props.replyPid,
+        clienthash,
+        message: htmlToBBCode(content.value),
+        tid: route.params.tid as string,
+      });
+      if (res.data) {
+        const data = JSON.parse(res.data);
+        if (data.status === 0) {
+          await loading.dismiss();
+          const alert = await alertController.create({
+            header: '提示',
+            message: '回复成功！',
+            buttons: [
+              {
+                text: '确定',
+                role: 'cancel',
+                handler: () => {
+                  closeFunc(true);
+                  content.value = '';
+                },
+              },
+            ],
+          });
+          await alert.present();
+        } else {
+          throw new Error(data);
+        }
+      }
+    } catch (error) {
+      await loading.dismiss();
+      const alert = await alertController.create({
+        header: '提示',
+        message: '回复失败，请重试！',
+        buttons: [
+          {
+            text: '确定',
+            role: 'cancel',
+          },
+        ],
+      });
+      await alert.present();
+      console.error(error);
+    }
+  };
+</script>
+
+<style scoped></style>
diff --git a/src/views/Thread/index.vue b/src/views/Thread/index.vue
index 693b804..22d3225 100644
--- a/src/views/Thread/index.vue
+++ b/src/views/Thread/index.vue
@@ -101,10 +101,10 @@
               <IonButton :id="`pid-${item.pid}`" fill="clear" size="small">
                 <IonIcon slot="icon-only" :icon="ellipsisHorizontal" />
               </IonButton>
-              <IonPopover :trigger="`pid-${item.pid}`">
+              <IonPopover :trigger="`pid-${item.pid}`" dismiss-on-select>
                 <IonContent>
                   <IonList lines="none">
-                    <IonItem button :detail="false"> 回复 </IonItem>
+                    <IonItem button :detail="false" @click="openReplyModal(item)"> 回复 </IonItem>
                     <IonItem button :detail="false" @click="openRateModal(item)"> 评分 </IonItem>
                   </IonList>
                 </IonContent>
@@ -174,7 +174,8 @@
         </IonList>
       </IonContent>
     </IonModal>
-    <RateModal v-model:is-open="rateVisible" :pid="pid" @close="closeRateModal" />
+    <RateModal v-model:is-open="rateVisible" :rate-pid @close="closeRateModal" />
+    <ReplyModal v-model:is-open="replyVisible" :reply-pid @close="closeReplyModal" />
   </IonPage>
 </template>
 
@@ -208,6 +209,7 @@
   import { zhCN } from 'date-fns/locale';
   import { baseUrl } from '@/utils/config';
   import RateModal from './components/rateModal.vue';
+  import ReplyModal from './components/replyModal.vue';
 
   interface PostData {
     status: number;
@@ -270,7 +272,9 @@
   const isOpen = ref(false);
   const fabVisible = ref(false);
   const rateVisible = ref(false);
-  const pid = ref('');
+  const ratePid = ref('');
+  const replyVisible = ref(false);
+  const replyPid = ref('');
 
   const loading = ref(false);
   const loadDone = ref(false);
@@ -578,13 +582,25 @@
   };
 
   const openRateModal = (item: Postlist) => {
-    pid.value = item.pid;
+    ratePid.value = item.pid;
     rateVisible.value = true;
   };
 
   const closeRateModal = (rateBool: boolean) => {
     rateVisible.value = rateBool;
   };
+
+  const openReplyModal = (item: Postlist) => {
+    replyPid.value = item.pid;
+    replyVisible.value = true;
+  };
+
+  const closeReplyModal = (replyBool: boolean) => {
+    replyVisible.value = false;
+    if (replyBool) {
+      refresh();
+    }
+  };
 </script>
 
 <style scoped>