优化账号绑定功能及消息提示组件

composables/useMessage.ts

@@ -0,0 +1,81 @@
+import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
+export const useMessage = () => {
+  return {
+    // 消息提示
+    info(content: string) {
+      ElMessage.info(content)
+    },
+    // 错误消息
+    error(content: string) {
+      ElMessage.error(content)
+    },
+    // 成功消息
+    success(content: string) {
+      ElMessage.success(content)
+    },
+    // 警告消息
+    warning(content: string) {
+      ElMessage.warning(content)
+    },
+    // 弹出提示
+    alert(content: string, title: string) {
+      ElMessageBox.alert(content, title)
+    },
+    // 错误提示
+    alertError(content: string, title: string) {
+      ElMessageBox.alert(content, title, { type: 'error' })
+    },
+    // 成功提示
+    alertSuccess(content: string, title: string) {
+      ElMessageBox.alert(content, title, { type: 'success' })
+    },
+    // 警告提示
+    alertWarning(content: string, title: string) {
+      ElMessageBox.alert(content, title, { type: 'warning' })
+    },
+    // 通知提示
+    notify(content: string) {
+      ElNotification.info(content)
+    },
+    // 错误通知
+    notifyError(content: string) {
+      ElNotification.error(content)
+    },
+    // 成功通知
+    notifySuccess(content: string) {
+      ElNotification.success(content)
+    },
+    // 警告通知
+    notifyWarning(content: string) {
+      ElNotification.warning(content)
+    },
+    // 确认窗体
+    confirm(content: string, title?: string, options?: any) {
+      return ElMessageBox.confirm(content, title, {
+        type: 'warning',
+        ...options
+      })
+    },
+    // 删除窗体
+    delConfirm(content?: string, title?: string, options?: any) {
+      return ElMessageBox.confirm(content, title, {
+        type: 'warning',
+        ...options
+      })
+    },
+    // 导出窗体
+    exportConfirm(content?: string, title?: string, options?: any) {
+      return ElMessageBox.confirm(content, title, {
+        type: 'warning',
+        ...options
+      })
+    },
+    // 提交内容
+    prompt(content: string, title: string, options?: any) {
+      return ElMessageBox.prompt(content, title, {
+        type: 'warning',
+        ...options
+      })
+    }
+  }
+}

pages/personal-Center/index/account-bind.vue

@@ -42,6 +42,8 @@
   import { handleLoginQQ, handleLoginWechat } from '~/utils/login'
   import { getUserInfo, cancelSocialBind } from '~/api/personal-center/index'
   import type { UserExtendRespVO } from '~/api/personal-center/types'
+  import { useMessage } from '~/composables/useMessage'
+  const message = useMessage()
   onMounted(() => {
     getUser()
   })
@@ -53,9 +55,11 @@
     user.value = res.data
   }
 
-  const handleBind = (type: string) => {
+  const handleBind = async (type: string) => {
     if (type === 'qq') {
       if (user.value.qqOpenId) {
+        const res = await message.confirm('确定解绑QQ吗？', '提示')
+        if (!res) return
         cancelSocialBind({ type: 35, openid: user.value.qqOpenId }).then((res) => {
           if (res.code === 0) {
             ElMessage.success('解绑成功')
@@ -68,6 +72,8 @@
     }
     if (type === 'wx') {
       if (user.value.wxOpenId) {
+        const res = await message.confirm('确定解绑微信吗？', '提示')
+        if (!res) return
         cancelSocialBind({ type: 32, openid: user.value.wxOpenId }).then((res) => {
           if (res.code === 0) {
             getUser()