hookehuyr

feat(mine): 添加退出登录功能并美化按钮样式

- 在页面底部添加退出登录按钮,视觉上与菜单列表区分
- 使用红色主题:红色图标、红色文字、淡红色背景和边框
- 点击时弹出确认对话框,防止误操作
- 确认后清除本地用户信息(user_info 和 sessionid)
- 使用 reLaunch 跳转到首页,清空页面栈
- 添加 active:opacity-70 按下效果,提升交互体验

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
......@@ -7,7 +7,7 @@
<!-- Width: 353px -> 706rpx, Height: 124px -> 248rpx -->
<!-- Background image from design -->
<view
class="w-[706rpx] h-[248rpx] mt-[40rpx] bg-[url('https://lanhu-oss-2537-2.lanhuapp.com/SketchPng19a28c052635ccb70614c5be60713a4731e85f98029d396460b46bb31e6a529f')] bg-[length:100%_100%] bg-no-repeat flex items-center px-[40rpx]"
class="w-[706rpx] h-[248rpx] mt-[40rpx] bg-white rounded-[24rpx] flex items-center px-[40rpx]"
@tap="go('/pages/avatar/index')"
>
<!-- Avatar -->
......@@ -51,6 +51,17 @@
</view>
</view>
<!-- Logout Button -->
<view class="w-[730rpx] rounded-[24rpx] p-[32rpx] mt-[32rpx]">
<view
class="flex items-center justify-center py-[20rpx] px-[32rpx] rounded-[16rpx] border-[2rpx] border-[#FEE2E2] bg-[#FEF2F2] active:opacity-70"
@tap="handleLogout"
>
<IconFont name="Issue" size="18" color="#EF4444" customClass="mr-[12rpx]" />
<text class="text-[28rpx] text-[#EF4444] font-medium">退出登录</text>
</view>
</view>
<!-- TabBar -->
<TabBar current="me" />
</view>
......@@ -82,6 +93,42 @@ const handleMenuClick = (item) => {
})
}
}
// 退出登录
const handleLogout = () => {
Taro.showModal({
title: '提示',
content: '确定要退出登录吗?',
confirmText: '确定',
cancelText: '取消',
confirmColor: '#EF4444',
success: (res) => {
if (res.confirm) {
// 清除用户信息
try {
Taro.removeStorageSync('user_info')
Taro.removeStorageSync('sessionid')
// 跳转到首页
Taro.reLaunch({
url: '/pages/index/index'
})
Taro.showToast({
title: '已退出登录',
icon: 'success'
})
} catch (error) {
console.error('退出登录失败:', error)
Taro.showToast({
title: '退出失败,请重试',
icon: 'none'
})
}
}
}
})
}
</script>
<style lang="less">
......