Files
FT541-WMS/RuoYi-App-master/pages/mine/info/index.vue
2025-10-16 14:37:22 +08:00

74 lines
2.2 KiB
Vue

<template>
<view class="container">
<view class="info-card">
<uni-list>
<uni-list-item class="list-item" showExtraIcon="true" :extraIcon="{type: 'person-filled', color: '#3c96f3'}" title="昵称" :rightText="user.userName" />
<uni-list-item class="list-item" showExtraIcon="true" :extraIcon="{type: 'phone-filled', color: '#3c96f3'}" title="手机号码" :rightText="user.phonenumber" />
<uni-list-item class="list-item" showExtraIcon="true" :extraIcon="{type: 'email-filled', color: '#3c96f3'}" title="邮箱" :rightText="user.email" />
<!-- <uni-list-item class="list-item" showExtraIcon="true" :extraIcon="{type: 'auth-filled', color: '#3c96f3'}" title="岗位" :rightText="postGroup" /> -->
<uni-list-item class="list-item" showExtraIcon="true" :extraIcon="{type: 'staff-filled', color: '#3c96f3'}" title="角色" :rightText="roleGroup" />
<uni-list-item class="list-item" showExtraIcon="true" :extraIcon="{type: 'calendar-filled', color: '#3c96f3'}" title="创建日期" :rightText="user.createTime" />
</uni-list>
</view>
</view>
</template>
<script>
import { getUserProfile } from "@/api/system/user"
export default {
data() {
return {
user: {},
roleGroup: "",
postGroup: ""
}
},
onLoad() {
this.getUser()
},
methods: {
getUser() {
getUserProfile().then(response => {
this.user = response.user
// 添加数据有效性检查
this.roleGroup = Array.isArray(response.roles) ? response.roles.join(',') : ''
this.postGroup = Array.isArray(response.posts) ? response.posts.join(',') : ''
})
}
}
}
</script>
<style lang="scss">
page {
background-color: #f5f6f7;
min-height: 100vh;
}
.container {
padding: 20px;
}
.info-card {
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
overflow: hidden;
.list-item {
padding: 16px 0;
:deep(.uni-list-item__content-title) {
font-size: 16px;
color: #333;
}
:deep(.uni-list-item__extra-text) {
font-size: 15px;
color: #666;
}
}
}
</style>