hookehuyr

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

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 <!-- Width: 353px -> 706rpx, Height: 124px -> 248rpx --> 7 <!-- Width: 353px -> 706rpx, Height: 124px -> 248rpx -->
8 <!-- Background image from design --> 8 <!-- Background image from design -->
9 <view 9 <view
10 - 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]" 10 + class="w-[706rpx] h-[248rpx] mt-[40rpx] bg-white rounded-[24rpx] flex items-center px-[40rpx]"
11 @tap="go('/pages/avatar/index')" 11 @tap="go('/pages/avatar/index')"
12 > 12 >
13 <!-- Avatar --> 13 <!-- Avatar -->
...@@ -51,6 +51,17 @@ ...@@ -51,6 +51,17 @@
51 </view> 51 </view>
52 </view> 52 </view>
53 53
54 + <!-- Logout Button -->
55 + <view class="w-[730rpx] rounded-[24rpx] p-[32rpx] mt-[32rpx]">
56 + <view
57 + class="flex items-center justify-center py-[20rpx] px-[32rpx] rounded-[16rpx] border-[2rpx] border-[#FEE2E2] bg-[#FEF2F2] active:opacity-70"
58 + @tap="handleLogout"
59 + >
60 + <IconFont name="Issue" size="18" color="#EF4444" customClass="mr-[12rpx]" />
61 + <text class="text-[28rpx] text-[#EF4444] font-medium">退出登录</text>
62 + </view>
63 + </view>
64 +
54 <!-- TabBar --> 65 <!-- TabBar -->
55 <TabBar current="me" /> 66 <TabBar current="me" />
56 </view> 67 </view>
...@@ -82,6 +93,42 @@ const handleMenuClick = (item) => { ...@@ -82,6 +93,42 @@ const handleMenuClick = (item) => {
82 }) 93 })
83 } 94 }
84 } 95 }
96 +
97 +// 退出登录
98 +const handleLogout = () => {
99 + Taro.showModal({
100 + title: '提示',
101 + content: '确定要退出登录吗?',
102 + confirmText: '确定',
103 + cancelText: '取消',
104 + confirmColor: '#EF4444',
105 + success: (res) => {
106 + if (res.confirm) {
107 + // 清除用户信息
108 + try {
109 + Taro.removeStorageSync('user_info')
110 + Taro.removeStorageSync('sessionid')
111 +
112 + // 跳转到首页
113 + Taro.reLaunch({
114 + url: '/pages/index/index'
115 + })
116 +
117 + Taro.showToast({
118 + title: '已退出登录',
119 + icon: 'success'
120 + })
121 + } catch (error) {
122 + console.error('退出登录失败:', error)
123 + Taro.showToast({
124 + title: '退出失败,请重试',
125 + icon: 'none'
126 + })
127 + }
128 + }
129 + }
130 + })
131 +}
85 </script> 132 </script>
86 133
87 <style lang="less"> 134 <style lang="less">
......