106 lines
3.4 KiB
Vue
106 lines
3.4 KiB
Vue
<script setup>
|
||
import { computed, ref } from 'vue'
|
||
import { onShow } from '@dcloudio/uni-app'
|
||
import { useUserStore } from '@/stores/user'
|
||
import { PAGE_PATHS } from '@/config/api'
|
||
import { resolveUserAvatarUrl } from '@/utils/avatar'
|
||
|
||
const userStore = useUserStore()
|
||
const loggingOut = ref(false)
|
||
|
||
const displayName = computed(() => {
|
||
const info = userStore.userInfo
|
||
if (!info) return '未登录'
|
||
return info.realName || info.username || '用户'
|
||
})
|
||
|
||
const username = computed(() => userStore.userInfo?.username || '-')
|
||
const phone = computed(() => userStore.userInfo?.phone || userStore.userInfo?.mobile || '-')
|
||
const email = computed(() => userStore.userInfo?.email || '-')
|
||
const deptName = computed(
|
||
() => userStore.userInfo?.deptName || userStore.userInfo?.dept_name || '-'
|
||
)
|
||
const roleLabel = computed(() => userStore.userRole || '-')
|
||
const avatarUrl = computed(() =>
|
||
resolveUserAvatarUrl(userStore.userInfo?.avatarUrl, userStore.userRole)
|
||
)
|
||
|
||
onShow(() => {
|
||
userStore.checkLoginStatus()
|
||
if (!userStore.isLoggedIn) {
|
||
uni.reLaunch({ url: PAGE_PATHS.login })
|
||
return
|
||
}
|
||
userStore.refreshUserInfo()
|
||
})
|
||
|
||
const handleSaveHint = () => {
|
||
uni.showToast({ title: '个人信息修改将在后续开放', icon: 'none' })
|
||
}
|
||
|
||
const handleLogout = async () => {
|
||
if (loggingOut.value) return
|
||
loggingOut.value = true
|
||
try {
|
||
await userStore.logout()
|
||
} finally {
|
||
loggingOut.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="mp-page mp-page--tab">
|
||
<view class="mp-profile-hero">
|
||
<view class="mp-profile-hero__user">
|
||
<view class="mp-profile-hero__avatar">
|
||
<image v-if="avatarUrl" :src="avatarUrl" mode="aspectFill" />
|
||
</view>
|
||
<view>
|
||
<text class="mp-profile-hero__name">{{ displayName }}</text>
|
||
<text class="mp-profile-hero__dept">山峡化工 · {{ deptName }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mp-profile-panel">
|
||
<view class="mp-form-item">
|
||
<text class="mp-form-item__label">姓名</text>
|
||
<text class="mp-form-item__value">{{ displayName }}</text>
|
||
</view>
|
||
<view class="mp-form-item">
|
||
<text class="mp-form-item__label">账号</text>
|
||
<text class="mp-form-item__value">{{ username }}</text>
|
||
</view>
|
||
<view class="mp-form-item">
|
||
<text class="mp-form-item__label">手机号</text>
|
||
<text class="mp-form-item__value">{{ phone }}</text>
|
||
</view>
|
||
<view class="mp-form-item">
|
||
<text class="mp-form-item__label">邮箱</text>
|
||
<text class="mp-form-item__value">{{ email }}</text>
|
||
</view>
|
||
<view class="mp-form-item">
|
||
<text class="mp-form-item__label">所属部门</text>
|
||
<text class="mp-form-item__value">{{ deptName }}</text>
|
||
</view>
|
||
<view class="mp-form-item">
|
||
<text class="mp-form-item__label">角色</text>
|
||
<text class="mp-form-item__value">{{ roleLabel }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mp-profile-actions">
|
||
<button class="mp-btn mp-btn--primary mp-btn--block" @click="handleSaveHint">保存修改</button>
|
||
<button
|
||
class="mp-btn mp-btn--ghost mp-btn--block"
|
||
:loading="loggingOut || userStore.isLoading"
|
||
@click="handleLogout"
|
||
>
|
||
退出登录
|
||
</button>
|
||
</view>
|
||
<text class="mp-hint">本期支持查看个人信息与退出登录；资料编辑后续开放</text>
|
||
</view>
|
||
</template>
|