设置页面退出登录按钮的封装
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>
|
||||||
</view>
|
</view>
|
||||||
<view class="log-out" @click="handleLogout">退出登录</view>
|
<view class="logout-container">
|
||||||
|
<logout-button
|
||||||
|
@logout-success="onLogoutSuccess"
|
||||||
|
@logout-error="onLogoutError"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { userLogout } from '@/api/auth/auth.js'
|
|
||||||
import { updateNickName, uploadAvatar } from '@/api/user/user.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 {
|
export default {
|
||||||
|
components: {
|
||||||
|
LogoutButton
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
userInfoSettings: [
|
userInfoSettings: [
|
||||||
|
|
@ -323,59 +330,14 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// 退出登录处理
|
// 退出登录成功回调
|
||||||
async handleLogout() {
|
onLogoutSuccess(response) {
|
||||||
try {
|
console.log('退出登录成功:', response)
|
||||||
// 显示确认对话框
|
},
|
||||||
const res = await new Promise((resolve, reject) => {
|
|
||||||
uni.showModal({
|
|
||||||
title: '确认退出',
|
|
||||||
content: '确定要退出登录吗？',
|
|
||||||
confirmText: '确定',
|
|
||||||
cancelText: '取消',
|
|
||||||
success: resolve,
|
|
||||||
fail: reject,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
if (!res.confirm) {
|
// 退出登录错误回调
|
||||||
return
|
onLogoutError(error) {
|
||||||
}
|
console.error('退出登录失败:', error)
|
||||||
|
|
||||||
// 调用退出登录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,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
@ -445,84 +407,8 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.log-out {
|
.logout-container {
|
||||||
margin-top: 866rpx;
|
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>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user