385 lines
7.8 KiB
Vue
385 lines
7.8 KiB
Vue
<template>
|
|
<view class="profile-page" :class="`theme-${themeMode}`">
|
|
<view class="profile-header">
|
|
<view class="profile-top">
|
|
<view class="avatar-wrap">
|
|
<u-icon name="account-fill" color="#ffffff" size="52" />
|
|
</view>
|
|
<view class="profile-meta">
|
|
<text class="profile-name">{{ user.name }}</text>
|
|
<text class="profile-account">{{ user.account }}</text>
|
|
</view>
|
|
<text class="profile-role">{{ user.role }}</text>
|
|
</view>
|
|
<view class="profile-stat-row">
|
|
<view class="stat-item" v-for="item in stats" :key="item.label">
|
|
<text class="stat-value">{{ item.value }}</text>
|
|
<text class="stat-label">{{ item.label }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="profile-card">
|
|
<view class="card-title">基本信息</view>
|
|
<view class="info-list">
|
|
<view class="info-row">
|
|
<text class="info-label">手机号</text>
|
|
<text class="info-value">{{ user.phone }}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="info-label">所属组织</text>
|
|
<text class="info-value">{{ user.department }}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="info-label">账号状态</text>
|
|
<text class="info-value success">{{ user.status }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="profile-card">
|
|
<view class="card-title">快捷操作</view>
|
|
<view class="action-list">
|
|
<view class="action-item" @tap="handleAction('修改资料')">
|
|
<view class="action-left">
|
|
<u-icon name="edit-pen" color="#2f6cf6" size="30" />
|
|
<text>修改资料</text>
|
|
</view>
|
|
<u-icon name="arrow-right" color="#c1c7d0" size="24" />
|
|
</view>
|
|
<view class="action-item" @tap="handleAction('修改密码')">
|
|
<view class="action-left">
|
|
<u-icon name="lock-fill" color="#f7b733" size="30" />
|
|
<text>修改密码</text>
|
|
</view>
|
|
<u-icon name="arrow-right" color="#c1c7d0" size="24" />
|
|
</view>
|
|
<view class="action-item" @tap="handleAction('切换账号')">
|
|
<view class="action-left">
|
|
<u-icon name="account" color="#35bfa3" size="30" />
|
|
<text>切换账号</text>
|
|
</view>
|
|
<u-icon name="arrow-right" color="#c1c7d0" size="24" />
|
|
</view>
|
|
<view class="action-item danger" @tap="handleAction('退出登录')">
|
|
<view class="action-left">
|
|
<u-icon name="logout" color="#ef4f4f" size="30" />
|
|
<text>退出登录</text>
|
|
</view>
|
|
<u-icon name="arrow-right" color="#c1c7d0" size="24" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getUserInfo } from '@/api/member.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
user: {
|
|
name: '-',
|
|
account: '-',
|
|
role: '会员用户',
|
|
phone: '-',
|
|
department: '-',
|
|
status: '正常'
|
|
},
|
|
stats: [
|
|
{ label: '今日扫码', value: '-' },
|
|
{ label: '异常处理', value: '-' },
|
|
{ label: '累计天数', value: '-' }
|
|
]
|
|
}
|
|
},
|
|
onShow() {
|
|
this.loadUserInfo()
|
|
},
|
|
methods: {
|
|
async loadUserInfo() {
|
|
try {
|
|
const profile = await getUserInfo()
|
|
uni.setStorageSync('scanapp_user', profile)
|
|
this.user = {
|
|
name: profile.nickname || profile.username || '-',
|
|
account: profile.username || profile.email || '-',
|
|
role: '会员用户',
|
|
phone: profile.phone || '-',
|
|
department: profile.department_name || '-',
|
|
status: Number(profile.enabled) === 0 ? '已停用' : '正常'
|
|
}
|
|
} catch (error) {
|
|
console.error('[scanapp] 获取用户信息失败', error)
|
|
}
|
|
},
|
|
handleAction(title) {
|
|
const actionMap = {
|
|
'修改资料': this.goEditProfile,
|
|
'修改密码': this.goChangePassword,
|
|
'切换账号': this.switchAccount,
|
|
'退出登录': this.logout
|
|
}
|
|
const action = actionMap[title]
|
|
if (action) {
|
|
action()
|
|
}
|
|
},
|
|
goEditProfile() {
|
|
uni.navigateTo({
|
|
url: '/pages/profile/edit'
|
|
})
|
|
},
|
|
goChangePassword() {
|
|
uni.navigateTo({
|
|
url: '/pages/profile/password'
|
|
})
|
|
},
|
|
switchAccount() {
|
|
uni.showModal({
|
|
title: '切换账号',
|
|
content: '将清除当前登录状态并返回登录页，是否继续？',
|
|
confirmText: '切换',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.clearLoginState()
|
|
uni.reLaunch({ url: '/pages/auth/login' })
|
|
}
|
|
}
|
|
})
|
|
},
|
|
logout() {
|
|
uni.showModal({
|
|
title: '退出登录',
|
|
content: '确认退出当前账号？',
|
|
confirmText: '退出',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.clearLoginState()
|
|
uni.reLaunch({ url: '/pages/auth/login' })
|
|
}
|
|
}
|
|
})
|
|
},
|
|
clearLoginState() {
|
|
uni.removeStorageSync('scanapp_token')
|
|
uni.removeStorageSync('scanapp_refresh_token')
|
|
uni.removeStorageSync('scanapp_user')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.profile-page {
|
|
min-height: 100vh;
|
|
padding: 28rpx 24rpx 48rpx;
|
|
box-sizing: border-box;
|
|
background: linear-gradient(180deg, #eef6ff 0%, #f4f6fb 36%, #f4f6fb 100%);
|
|
}
|
|
|
|
.profile-header,
|
|
.profile-card {
|
|
padding: 38rpx 34rpx;
|
|
border: 1rpx solid rgba(255, 255, 255, 0.75);
|
|
border-radius: 28rpx;
|
|
background: #ffffff;
|
|
box-shadow: 0 16rpx 40rpx rgba(23, 35, 61, 0.06);
|
|
}
|
|
|
|
.profile-card {
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.profile-top {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
}
|
|
|
|
.profile-meta {
|
|
flex: 1;
|
|
min-width: 0;
|
|
margin-left: 36rpx;
|
|
}
|
|
|
|
.avatar-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 92rpx;
|
|
height: 92rpx;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #35bfa3 0%, #1677ff 100%);
|
|
box-shadow: 0 12rpx 28rpx rgba(53, 191, 163, 0.28);
|
|
flex: none;
|
|
}
|
|
|
|
.profile-meta {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.profile-name {
|
|
display: block;
|
|
color: #17233d;
|
|
font-size: 28rpx;
|
|
font-weight: 800;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.profile-account,
|
|
.profile-role,
|
|
.info-label,
|
|
.info-value,
|
|
.action-item text {
|
|
display: block;
|
|
}
|
|
|
|
.profile-account {
|
|
margin-top: 14rpx;
|
|
color: #7d8798;
|
|
font-size: 20rpx;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.profile-role {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex: none;
|
|
margin-left: 24rpx;
|
|
padding: 6rpx 16rpx;
|
|
border-radius: 999rpx;
|
|
background: rgba(25, 190, 107, 0.1);
|
|
color: #19be6b;
|
|
font-size: 18rpx;
|
|
font-weight: 600;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.profile-stat-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 16rpx;
|
|
margin-top: 34rpx;
|
|
}
|
|
|
|
.stat-item {
|
|
padding: 24rpx 12rpx;
|
|
border-radius: 20rpx;
|
|
background: #f7f9fc;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-value {
|
|
display: block;
|
|
color: #1677ff;
|
|
font-size: 28rpx;
|
|
font-weight: 800;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.stat-label {
|
|
display: block;
|
|
margin-top: 10rpx;
|
|
color: #8a94a6;
|
|
font-size: 18rpx;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.card-title {
|
|
color: #17233d;
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.info-list {
|
|
margin-top: 26rpx;
|
|
}
|
|
|
|
.info-row,
|
|
.action-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 26rpx 0;
|
|
border-bottom: 1rpx solid #eef1f6;
|
|
}
|
|
|
|
.info-row:last-child,
|
|
.action-item:last-child {
|
|
padding-bottom: 0;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.info-label {
|
|
color: #8a94a6;
|
|
font-size: 20rpx;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.info-value {
|
|
color: #17233d;
|
|
font-size: 22rpx;
|
|
font-weight: 600;
|
|
line-height: 1.35;
|
|
text-align: right;
|
|
}
|
|
|
|
.info-value.success {
|
|
color: #19be6b;
|
|
}
|
|
|
|
.action-list {
|
|
margin-top: 26rpx;
|
|
}
|
|
|
|
.action-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 18rpx;
|
|
color: #17233d;
|
|
font-size: 22rpx;
|
|
font-weight: 600;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.action-item.danger .action-left {
|
|
color: #ef4f4f;
|
|
}
|
|
.theme-dark.profile-page {
|
|
background: #151923;
|
|
}
|
|
|
|
.theme-dark .profile-header,
|
|
.theme-dark .profile-card {
|
|
border-color: #364152;
|
|
background: #222936;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.theme-dark .stat-item {
|
|
background: #1c2431;
|
|
}
|
|
|
|
.theme-dark .profile-name,
|
|
.theme-dark .card-title,
|
|
.theme-dark .info-value,
|
|
.theme-dark .action-left {
|
|
color: #f2f5fa;
|
|
}
|
|
|
|
.theme-dark .profile-account,
|
|
.theme-dark .info-label,
|
|
.theme-dark .stat-label {
|
|
color: #aeb9ca;
|
|
}
|
|
|
|
.theme-dark .info-row,
|
|
.theme-dark .action-item {
|
|
border-color: #364152;
|
|
}
|
|
</style>
|