From b8bc98440031503136a4425e85ed2b30f6dd037f Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Thu, 21 Aug 2025 10:15:30 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E9=A1=B5=E9=9D=A2=E9=80=80?=
 =?UTF-8?q?=E5=87=BA=E7=99=BB=E5=BD=95=E6=8C=89=E9=92=AE=E7=9A=84=E5=B0=81?=
 =?UTF-8?q?=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/logout-button/logout-button.vue | 135 +++++++++++++++++++
 pages/set/set.vue                          | 150 +++------------------
 2 files changed, 153 insertions(+), 132 deletions(-)
 create mode 100644 components/logout-button/logout-button.vue

diff --git a/components/logout-button/logout-button.vue b/components/logout-button/logout-button.vue
new file mode 100644
index 0000000..355217f
--- /dev/null
+++ b/components/logout-button/logout-button.vue
@@ -0,0 +1,135 @@
+<template>
+  <view class="logout-button" @click="handleLogout">
+    <text class="logout-text">{{ text }}</text>
+  </view>
+</template>
+
+<script setup>
+import { userLogout } from '@/api/auth/auth.js'
+import { clearToken } from '@/utils/request.js'
+
+// 定义组件属性
+const props = defineProps({
+  text: {
+    type: String,
+    default: '退出登录'
+  },
+  confirmTitle: {
+    type: String,
+    default: '确认退出'
+  },
+  confirmContent: {
+    type: String,
+    default: '确定要退出登录吗？'
+  },
+  confirmText: {
+    type: String,
+    default: '确定'
+  },
+  cancelText: {
+    type: String,
+    default: '取消'
+  },
+  successMessage: {
+    type: String,
+    default: '退出成功'
+  },
+  redirectUrl: {
+    type: String,
+    default: '/pages/login/login'
+  }
+})
+
+// 定义事件
+const emit = defineEmits(['logout-success', 'logout-error'])
+
+// 退出登录处理
+const handleLogout = async () => {
+  try {
+    // 显示确认对话框
+    const res = await new Promise((resolve, reject) => {
+      uni.showModal({
+        title: props.confirmTitle,
+        content: props.confirmContent,
+        confirmText: props.confirmText,
+        cancelText: props.cancelText,
+        success: resolve,
+        fail: reject,
+      })
+    })
+
+    if (!res.confirm) {
+      return
+    }
+
+    // 调用退出登录API
+    const response = await userLogout()
+
+    if (response.code === 200) {
+      // 清除本地token
+      clearToken()
+
+      // 清除用户信息
+      uni.removeStorageSync('userInfo')
+
+      // 显示成功提示
+      uni.showToast({
+        title: props.successMessage,
+        icon: 'success',
+        duration: 1500,
+      })
+
+      // 触发成功事件
+      emit('logout-success', response)
+
+      // 延迟跳转到指定页面
+      setTimeout(() => {
+        uni.reLaunch({
+          url: props.redirectUrl,
+        })
+      }, 1500)
+    } else {
+      throw new Error(response.msg || '退出失败')
+    }
+  } catch (error) {
+    console.error('退出登录失败:', error)
+    
+    // 触发错误事件
+    emit('logout-error', error)
+    
+    uni.showToast({
+      title: error.message || '退出失败',
+      icon: 'none',
+      duration: 2000,
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.logout-button {
+  text-align: center;
+  line-height: 98rpx;
+  color: #f15a04;
+  font-size: 16px;
+  font-weight: 500;
+  width: 710rpx;
+  height: 98rpx;
+  background: #ffffff;
+  border-radius: 24.5px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin: 0 auto;
+
+  &:active {
+    background: #f5f5f5;
+    transform: scale(0.98);
+  }
+
+  .logout-text {
+    color: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/pages/set/set.vue b/pages/set/set.vue
index c6e7712..33a76b0 100644
--- a/pages/set/set.vue
+++ b/pages/set/set.vue
@@ -21,16 +21,23 @@
         </view>
       </view>
     </view>
-    <view class="log-out" @click="handleLogout">退出登录</view>
+    <view class="logout-container">
+      <logout-button 
+        @logout-success="onLogoutSuccess"
+        @logout-error="onLogoutError"
+      />
+    </view>
   </view>
 </template>
 
 <script>
-import { userLogout } from '@/api/auth/auth.js'
 import { updateNickName, uploadAvatar } from '@/api/user/user.js'
-import { clearToken } from '@/utils/request.js'
+import LogoutButton from '@/components/logout-button/logout-button.vue'
 
 export default {
+  components: {
+    LogoutButton
+  },
   data() {
     return {
       userInfoSettings: [
@@ -323,59 +330,14 @@ export default {
       }
     },
 
-    // 退出登录处理
-    async handleLogout() {
-      try {
-        // 显示确认对话框
-        const res = await new Promise((resolve, reject) => {
-          uni.showModal({
-            title: '确认退出',
-            content: '确定要退出登录吗？',
-            confirmText: '确定',
-            cancelText: '取消',
-            success: resolve,
-            fail: reject,
-          })
-        })
+    // 退出登录成功回调
+    onLogoutSuccess(response) {
+      console.log('退出登录成功:', response)
+    },
 
-        if (!res.confirm) {
-          return
-        }
-
-        // 调用退出登录API
-        const response = await userLogout()
-
-        if (response.code === 200) {
-          // 清除本地token
-          clearToken()
-
-          // 清除用户信息
-          uni.removeStorageSync('userInfo')
-
-          // 显示成功提示
-          uni.showToast({
-            title: '退出成功',
-            icon: 'success',
-            duration: 1500,
-          })
-
-          // 延迟跳转到登录页
-          setTimeout(() => {
-            uni.reLaunch({
-              url: '/pages/login/login',
-            })
-          }, 1500)
-        } else {
-          throw new Error(response.msg || '退出失败')
-        }
-      } catch (error) {
-        console.error('退出登录失败:', error)
-        uni.showToast({
-          title: error.message || '退出失败',
-          icon: 'none',
-          duration: 2000,
-        })
-      }
+    // 退出登录错误回调
+    onLogoutError(error) {
+      console.error('退出登录失败:', error)
     },
   },
 }
@@ -445,84 +407,8 @@ export default {
     }
   }
 
-  .log-out {
+  .logout-container {
     margin-top: 866rpx;
-    text-align: center;
-    line-height: 98rpx;
-    color: #f15a04;
-    font-size: 16px;
-    font-weight: 500;
-    width: 710rpx;
-    height: 98rpx;
-    background: #ffffff;
-    border-radius: 24.5px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-
-    &:active {
-      background: #f5f5f5;
-      transform: scale(0.98);
-    }
-  }
-
-  .debug-btn {
-    margin-top: 20rpx;
-    text-align: center;
-    line-height: 98rpx;
-    color: #333;
-    font-size: 16px;
-    font-weight: 500;
-    width: 710rpx;
-    height: 98rpx;
-    background: #e0e0e0;
-    border-radius: 24.5px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-
-    &:active {
-      background: #d0d0d0;
-      transform: scale(0.98);
-    }
-  }
-
-  .test-btn {
-    margin-top: 20rpx;
-    text-align: center;
-    line-height: 98rpx;
-    color: #333;
-    font-size: 16px;
-    font-weight: 500;
-    width: 710rpx;
-    height: 98rpx;
-    background: #e0e0e0;
-    border-radius: 24.5px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-
-    &:active {
-      background: #d0d0d0;
-      transform: scale(0.98);
-    }
-  }
-
-  .validate-btn {
-    margin-top: 20rpx;
-    text-align: center;
-    line-height: 98rpx;
-    color: #333;
-    font-size: 16px;
-    font-weight: 500;
-    width: 710rpx;
-    height: 98rpx;
-    background: #e0e0e0;
-    border-radius: 24.5px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-
-    &:active {
-      background: #d0d0d0;
-      transform: scale(0.98);
-    }
   }
 }
 </style>