【线上优化】 feat: 用户信息页增加取消问题的功能

src/views/userPage/components/selfAnswer.vue

@@ -44,6 +44,9 @@
               @click="jumpToArticleDetailPage({ type: ArticleTypeEnum.QUESTION, id: item.id })"
               >去回复</el-button
             >
+            <el-button type="warning" link @click="handleCancelFollow(item.id)">
+              取消关注
+            </el-button>
           </div>
         </div>
       </div>
@@ -70,12 +73,15 @@
 </template>
 
 <script lang="ts" setup>
-import { answerQuestionPage } from '@/api'
+import { answerQuestionPage, addOrCancelToAnswerList } from '@/api'
 import { usePageSearch } from '@/hooks'
 import dayjs from 'dayjs'
 import { useNavigation } from '@/hooks'
 import { ArticleTypeEnum } from '@/constants'
+import { push } from 'notivue'
+import { useMessageBox } from '@/hooks'
 
+const { confirm } = useMessageBox()
 const { list, loading, searchParams, total, refresh, goToPage, changePageSize } = usePageSearch(
   answerQuestionPage,
   {
@@ -83,7 +89,16 @@ const { list, loading, searchParams, total, refresh, goToPage, changePageSize }
   },
 )
 const { jumpToArticleDetailPage } = useNavigation()
-
+const handleCancelFollow = async (id: number) => {
+  await confirm({
+    title: '提示',
+    message: '确定取消关注该问题吗？',
+    type: 'warning',
+  })
+  await addOrCancelToAnswerList({ articleId: id })
+  push.success('取消关注成功')
+  refresh()
+}
 onActivated(() => {
   refresh()
 })