Skip to content

Commit

Permalink
feat: optimize post-op code
Browse files Browse the repository at this point in the history 
减少defineModel使用
之前有点滥用
  • Loading branch information
@ice909
ice909 committed Sep 4, 2024
1 parent 52b1e12 commit 0a8a88b
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 56 deletions.
53 changes: 28 additions & 25 deletions src/pages/thread/post-op.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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
}
Expand Down Expand Up @@ -234,7 +235,7 @@ const moderatorWinnowDialogClosed = async (action: string) => {
} else {
prompt.showToast("success", "精选成功")
}
winnowPostsRefresh.value++
emit("winnowPostsRefresh")
Taro.pageScrollTo({
selector: ".post-divider",
offsetTop: -100
Expand Down Expand Up @@ -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")
}
}
Expand All @@ -289,7 +290,7 @@ const userPostAction = ref({
{
name: "举报", callback: async () => {
if (!account.is_login) {
showLoginDialog.value = true
emit("login")
return
}
const { data } = await ReportType()
Expand Down Expand Up @@ -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")
Expand Down
17 changes: 7 additions & 10 deletions src/pages/thread/send-post.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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"
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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,
Expand All @@ -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,
})
}
Expand Down
43 changes: 22 additions & 21 deletions src/pages/thread/thread.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -388,7 +385,7 @@ useDidShow(() => {
if (!isChooseImage) {
// 登录成功后返回到帖子页面,刷新点赞和收藏状态
threadRefresh.value++
refreshScroll.value = false
scrollToRostDivider.value = false
postRefresh.value++
}
isChooseImage.value = false
Expand Down Expand Up @@ -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 () => {
Expand Down Expand Up @@ -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
})
})
Expand Down

0 comments on commit 0a8a88b

Please sign in to comment.