设置页面退出登录按钮的封装
This commit is contained in:
WindowBird
parent
b34801c6b6
commit
b8bc984400
135
components/logout-button/logout-button.vue
Normal file
135
components/logout-button/logout-button.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user