135 lines
2.6 KiB
Vue
135 lines
2.6 KiB
Vue
<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> |