From 0a8a88b9462ac07068c25f71f6f072292876c7e9 Mon Sep 17 00:00:00 2001
From: ice909 <tonimayloneya@gmail.com>
Date: Wed, 4 Sep 2024 10:14:16 +0800
Subject: [PATCH] feat: optimize post-op code
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

减少defineModel使用
之前有点滥用
---
 src/pages/thread/post-op.vue   | 53 ++++++++++++++++++----------------
 src/pages/thread/send-post.vue | 17 +++++------
 src/pages/thread/thread.vue    | 43 +++++++++++++--------------
 3 files changed, 57 insertions(+), 56 deletions(-)

diff --git a/src/pages/thread/post-op.vue b/src/pages/thread/post-op.vue
index 7dbb5c0..862f4c9 100644
--- a/src/pages/thread/post-op.vue
+++ b/src/pages/thread/post-op.vue
@@ -118,21 +118,22 @@ const prompt = usePromptStore()
 
 const threadInfo = defineModel<ThreadInfoData>("threadInfo", { required: true })
 const post = defineModel<PostListResponse["data"][0]>("post", { required: true })
-const showLoginDialog = defineModel<boolean>("showLoginDialog", { required: true })
-const threadClosed = defineModel<boolean>("threadClosed", { required: true })
-const isReply = defineModel<boolean>("isReply", { required: true })
-const replyId = defineModel<number>("replyId", { required: true })
-const replyUserId = defineModel<number>("replyUserId", { required: true })
-const replyNickName = defineModel<string>("replyNickName", { required: true })
-const refreshScroll = defineModel<boolean>("refreshScroll", { required: true })
-const postRefresh = defineModel<number>("postRefresh", { required: true })
+const replyInfo = defineModel<{
+  isReply: boolean,
+  replyId: number,
+  replyUserId: number,
+  replyNickName: string
+}>("replyInfo", { required: true })
+const scrollToRostDivider = defineModel<boolean>("scrollToRostDivider", { required: true })
 const winnowPosts = defineModel<WinnowThreadPostList>("winnowPosts", { required: true })
-const winnowPostsRefresh = defineModel<number>("winnowPostsRefresh", { required: true })
 
-defineProps<{
-  isModerator: boolean
+const props = defineProps<{
+  isModerator: boolean,
+  threadClosed: boolean
 }>()
 
+const emit = defineEmits(['login', 'postRefresh', 'winnowPostsRefresh'])
+
 // 版主操作
 // 版主删除评论对话框
 const showModeratorDelPostDialog = ref(false)
@@ -197,9 +198,9 @@ const moderatorDelDialogClosed = async (action: string) => {
       })
       if (!data.code) {
         prompt.showToast("success", "删除成功")
-        refreshScroll.value = false
-        postRefresh.value++
-        winnowPostsRefresh.value++
+        scrollToRostDivider.value = false
+        emit("postRefresh")
+        emit("winnowPostsRefresh")
       }
       return true
     }
@@ -234,7 +235,7 @@ const moderatorWinnowDialogClosed = async (action: string) => {
         } else {
           prompt.showToast("success", "精选成功")
         }
-        winnowPostsRefresh.value++
+        emit("winnowPostsRefresh")
         Taro.pageScrollTo({
           selector: ".post-divider",
           offsetTop: -100
@@ -270,8 +271,8 @@ const authorDelPost = async () => {
   const { data } = await DeleteThreadPost(post.value.id)
   if (!data.code) {
     prompt.showToast("success", "删除成功")
-    refreshScroll.value = false
-    postRefresh.value++
+    scrollToRostDivider.value = false
+    emit("postRefresh")
   }
 }
 
@@ -289,7 +290,7 @@ const userPostAction = ref({
     {
       name: "举报", callback: async () => {
         if (!account.is_login) {
-          showLoginDialog.value = true
+          emit("login")
           return
         }
         const { data } = await ReportType()
@@ -323,23 +324,25 @@ const reportPost = async () => {
 
 const replyBtnClicked = () => {
   if (!account.is_login) {
-    showLoginDialog.value = true
+    emit("login")
     return
   }
-  if (threadClosed.value) {
+  if (props.threadClosed) {
     prompt.showToast("warn", "帖子已关闭")
     return
   }
-  isReply.value = true
-  replyId.value = post.value.id
-  replyUserId.value = post.value.post_user_id
-  replyNickName.value = post.value.user.nickname
+  replyInfo.value = {
+    isReply: true,
+    replyId: post.value.id,
+    replyUserId: post.value.post_user_id,
+    replyNickName: post.value.user.nickname
+  }
 }
 
 // 点赞评论
 const likeBtnClicked = async () => {
   if (!account.is_login) {
-    showLoginDialog.value = true
+    emit("login")
     return
   }
   const { data } = await ThreadUP(post.value.id, "pid")
diff --git a/src/pages/thread/send-post.vue b/src/pages/thread/send-post.vue
index c6b5b68..e5fd057 100644
--- a/src/pages/thread/send-post.vue
+++ b/src/pages/thread/send-post.vue
@@ -7,9 +7,9 @@
                     @verify="postCaptcha.verify">
                 </ne-captcha>
                 <nut-form-item>
-                    <view class="reply-info" v-if="isReply">
+                    <view class="reply-info" v-if="replyInfo.isReply">
                         <text class="title">回复:</text>
-                        <text class="nickname">{{ replyNickName }}</text>
+                        <text class="nickname">{{ replyInfo.replyNickName }}</text>
                         <CircleClose class="cancel-btn" size="18" @click="cancelReply" />
                     </view>
                     <view v-if="chooseImgList.length" class="choose-img">
@@ -28,7 +28,7 @@
                             <textarea :value="msg" :style="{ marginTop: '0.5rem', height: inputHeight + 'rem' }"
                                 placeholder="说点什么吧..." maxlength="1000" :show-confirm-bar="false" :hold-keyboard="true"
                                 :cursorSpacing="20" :disabled="!account.is_login" @linechange="lineChange"
-                                @input="msg = ($event as any).detail.value" :focus="isReply"
+                                @input="msg = ($event as any).detail.value" :focus="replyInfo.isReply"
                                 @blur="showEmojiList = false" />
                         </view>
                         <img class="emoji-btn" :src="showEmojiList ? KeyboardIcon : SmileIcon"
@@ -95,10 +95,7 @@ const emit = defineEmits<{
 }>()
 const props = defineProps<{
     info: { id: number, forum_id: number, user_id: number },
-    isReply: boolean,
-    replyId: number,
-    replyUserId: number,
-    replyNickName: string
+    replyInfo: { isReply: boolean, replyId: number, replyUserId: number, replyNickName: string }
 }>()
 
 const isChooseImage = defineModel()
@@ -186,7 +183,7 @@ const submitPost = async (captchaCode: string) => {
             message += imgUrls.map(url => `<p><img src='${url}' style='max-width: 100%' /></p>`).join('')
         }
         message += "</div>"
-        if (!props.isReply) {
+        if (!props.replyInfo.isReply) {
             await CreateThreadPost({
                 message,
                 validate: captchaCode,
@@ -202,8 +199,8 @@ const submitPost = async (captchaCode: string) => {
                 captcha_id: postCaptcha.captchaID,
                 thread_id: props.info.id,
                 forum_id: props.info.forum_id,
-                quote_user_id: props.replyUserId,
-                quote_post_id: props.replyId,
+                quote_user_id: props.replyInfo.replyUserId,
+                quote_post_id: props.replyInfo.replyId,
             })
         }
 
diff --git a/src/pages/thread/thread.vue b/src/pages/thread/thread.vue
index ac09058..74b155c 100644
--- a/src/pages/thread/thread.vue
+++ b/src/pages/thread/thread.vue
@@ -198,12 +198,10 @@
                                     </template>
                                 </nut-cell>
                                 <PostOp v-model:thread-info="threadInfo" v-model:post="threadPosts.data[index]"
-                                    v-model:show-login-dialog="showLoginDialog" v-model:thread-closed="threadClosed"
-                                    v-model:is-reply="isReply" v-model:reply-id="replyId"
-                                    v-model:reply-user-id="replyUserId" v-model:reply-nick-name="replyNickName"
-                                    v-model:refresh-scroll="refreshScroll" v-model:post-refresh="postRefresh"
-                                    v-model:winnow-posts="winnowPosts" v-model:winnow-posts-refresh="winnowPostsRefresh"
-                                    :is-moderator="isModerator" />
+                                    v-model:reply-info="replyInfo" v-model:scrollToRostDivider="scrollToRostDivider"
+                                    v-model:winnow-posts="winnowPosts" :is-moderator="isModerator"
+                                    :thread-closed="threadClosed" @login="showLoginDialog = true"
+                                    @postRefresh="postRefresh++" @winnowPostRefresh="winnowPostsRefresh++" />
                             </nut-cell-group>
                         </view>
                     </nut-col>
@@ -236,8 +234,7 @@
                 </view>
             </template>
             <!-- 自己回帖 -->
-            <SendPost v-if="!threadClosed" v-model="isChooseImage" :info="threadInfo" :is-reply="isReply"
-                :reply-id="replyId" :reply-user-id="replyUserId" :reply-nick-name="replyNickName"
+            <SendPost v-if="!threadClosed" v-model="isChooseImage" :info="threadInfo" :reply-info="replyInfo"
                 @login="showLoginDialog = true" @cancel-reply="cancelReply">
             </SendPost>
         </nut-row>
@@ -388,7 +385,7 @@ useDidShow(() => {
     if (!isChooseImage) {
         // 登录成功后返回到帖子页面,刷新点赞和收藏状态
         threadRefresh.value++
-        refreshScroll.value = false
+        scrollToRostDivider.value = false
         postRefresh.value++
     }
     isChooseImage.value = false
@@ -450,23 +447,27 @@ computedAsync(async () => {
 })
 
 // 当前是否是在回复别人的评论
-const isReply = ref(false)
-const replyId = ref(0)
-const replyUserId = ref(0)
-const replyNickName = ref("")
+const replyInfo = ref({
+    isReply: false,
+    replyId: 0,
+    replyUserId: 0,
+    replyNickName: ""
+})
 
 // 取消回复
 const cancelReply = () => {
-    isReply.value = false
-    replyId.value = 0
-    replyUserId.value = 0
-    replyNickName.value = ""
+    replyInfo.value = {
+        isReply: false,
+        replyId: 0,
+        replyUserId: 0,
+        replyNickName: ""
+    }
 }
 
 // 获取回复数据
 const threadPosts = ref<PostListResponse>()
-// 刷新时是否滚动到回帖分割线
-const refreshScroll = ref(true)
+// 评论刷新时是否滚动到回帖分割线（在删除评论时不需要滚动）
+const scrollToRostDivider = ref(true)
 // 回复中的所有用户id以及标签
 const replyUserTags = ref<{ id: number, tags: UserTags[] }[]>([])
 computedAsync(async () => {
@@ -524,13 +525,13 @@ watch(threadPosts, (_, oldVal) => {
                 })
                 sendPostScroll.value = false
             })
-        } else if (refreshScroll.value) {
+        } else if (scrollToRostDivider.value) {
             Taro.pageScrollTo({
                 selector: ".post-divider",
                 offsetTop: -100
             })
         }
-        refreshScroll.value = true
+        scrollToRostDivider.value = true
     })
 })