index.vue
3.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<template>
<view class="user-center-page">
<!-- 顶部用户信息栏 -->
<view class="user-info-header">
<!-- 渐变背景层 -->
<view class="header-bg"></view>
<!-- 用户信息主体 -->
<view class="user-info-wrap">
<!-- 头像 -->
<up-avatar
:src="userStore.isLogin ? userInfo.avatar : '/static/imgs/default-avatar.png'"
size="100rpx"
shape="circle"
class="user-avatar"
></up-avatar>
<!-- 用户名+手机号 -->
<view class="user-info-content">
<view class="user-name">{{ userStore.isLogin ? userInfo.username : '未登录' }}</view>
<view class="user-phone">{{ userStore.isLogin ? userInfo.nickname : '--------' }}</view>
</view>
<!-- 登录入口 -->
<up-button
v-if="!userStore.isLogin"
type="primary"
size="mini"
@click="handleLogin"
>
立即登录
</up-button>
</view>
</view>
<!-- 退出登录按钮 (仅登录状态显示) -->
<view v-if="userStore.isLogin" class="logout-btn-wrap">
<up-button
type="primary"
size="large"
@click="confirmLogout"
>
退出登录
</up-button>
</view>
</view>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useUserStore } from '@/pinia/user'
import { showModal, onShow } from '@dcloudio/uni-app'
// 初始化Pinia仓库
const userStore = useUserStore()
// 计算属性获取用户信息（响应式）
const userInfo = computed(() => userStore.userInfo.user || {})
/**
* 处理登录跳转
*/
const handleLogin = () => {
uni.navigateTo({
url: '/pages/login/index'
})
}
/**
* 确认退出登录（带二次确认）
*/
const confirmLogout = async () => {
console.log('13213')
try {
console.log('434')
const res = await uni.showModal({
title: '提示',
content: '确定要退出登录吗？',
confirmText: '退出',
cancelText: '取消'
})
if (res.confirm) {
await userStore.logout()
// uni.showToast({ title: '退出登录成功', type: 'success' })
}
} catch (error) {
console.error('退出登录失败：', error)
uni.showToast({ title: '退出登录失败，请重试', type: 'error' })
}
}
// 页面显示时检查登录状态
onShow(() => {
userStore.checkLogin()
})
</script>
<script lang="ts">
export default {
name: 'UserCenter',
options: {
navigationBarTitleText: '个人中心'
}
}
</script>
<style lang="scss" scoped>
.user-center-page {
min-height: 100vh;
background-color: #f5f7fa;
}
// 顶部用户信息栏
.user-info-header {
position: relative;
padding-bottom: 40rpx;
.header-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 320rpx;
background: linear-gradient(135deg, #409eff, #67c23a);
border-radius: 0 0 20rpx 20rpx;
z-index: 1;
}
.user-info-wrap {
position: relative;
z-index: 2;
display: flex;
align-items: center;
padding: 60rpx 30rpx 0;
.user-avatar {
border: 4rpx solid #ffffff;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease;
&:active {
transform: scale(0.95);
}
}
.user-info-content {
margin-left: 30rpx;
flex: 1;
.user-name {
font-size: 32rpx;
font-weight: 600;
color: #ffffff;
margin-bottom: 10rpx;
text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
}
.user-phone {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.9);
}
}
}
}
// 退出登录按钮
.logout-btn-wrap {
margin: 200rpx 20rpx 20rpx;
}
</style>