index.vue
3.83 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
169
170
171
172
173
174
175
176
<template>
<view class="user-center-page">
<!-- 顶部用户信息栏 -->
<view class="header-bg">
<up-avatar
:src="'https://img.jichengshanshui.com.cn:28207/appimg/default-avatar.png'"
size="100rpx"
shape="square"
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>
</view>
<view class="mine-content">
<up-cell-group title="个人信息">
<up-cell title="姓名" :value="userInfo.nickname"></up-cell>
<up-cell title="账号" :value="userInfo.username"></up-cell>
<up-cell title="电话" :value="userInfo.username"></up-cell>
<up-cell title="角色" :value="translateRoles(userStore.userInfo.roles)"></up-cell>
</up-cell-group>
</view>
<up-button
v-if="!userStore.isLogin"
type="primary"
size="mini"
shape="circle"
@click="handleLogin"
class="login-btn"
>
立即登录
</up-button>
<!-- 退出登录按钮 (仅登录状态显示) -->
<view v-if="userStore.isLogin" class="logout-btn-wrap">
<up-button
type="primary"
size="large"
shape="circle"
@click="confirmLogout"
class="login-btn"
>
退出登录
</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'
import {translateRoles} from '@/common/utils/common'
// 初始化Pinia仓库
const userStore = useUserStore()
// 计算属性获取用户信息（响应式）
const userInfo = computed(() => userStore.userInfo.user || {})
/**
* 处理登录跳转
*/
const handleLogin = () => {
uni.navigateTo({
url: '/pages/login/index'
})
}
/**
* 确认退出登录（带二次确认）
*/
const confirmLogout = async () => {
try {
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 {
}
.header-bg {
position:relative;
top: 0;
left: 0;
width: 100%;
height: 230px;
//height: 120px;
background: url("https://img.jichengshanshui.com.cn:28207/appimg/bg.jpg") no-repeat;
background-size: 100% 100%;
z-index: -1;
display: flex;
padding: 80px 0 0 20px;
}
.mine-content{
margin-top: -150px;
border-radius: 30px 30px 0 0;
background: #fff;
}
.user-avatar {
}
.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;
}
// 登录按钮
.login-btn {
margin-top: 20px;
width: 100%;
height: 44px;
line-height: 44px;
border-radius: 4px;
font-size: 16px;
background: #0A86F4;
box-shadow: 0px 4px 6px 1px rgba(25,94,215,0.5);
border-radius: 23px;
}
</style>