|
@@ -1,17 +1,17 @@
|
|
|
<template>
|
|
<template>
|
|
|
<view class="app-container pb-20">
|
|
<view class="app-container pb-20">
|
|
|
<!-- 顶部个人信息 -->
|
|
<!-- 顶部个人信息 -->
|
|
|
- <view class="bg-white px-4 pb-6 border-b border-gray-200">
|
|
|
|
|
|
|
+ <view class="bg-gradient-to-br from-blue-900 to-blue-800 px-4 pb-6 rounded-b-3xl">
|
|
|
<StatusBar />
|
|
<StatusBar />
|
|
|
<view class="flex items-center pt-3">
|
|
<view class="flex items-center pt-3">
|
|
|
- <view class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mr-4">
|
|
|
|
|
- <text class="uni-icons uniui-person-filled text-primary text-2xl"></text>
|
|
|
|
|
|
|
+ <view class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mr-4">
|
|
|
|
|
+ <text class="uni-icons uniui-person-filled text-white text-2xl"></text>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="flex-1 min-w-0">
|
|
<view class="flex-1 min-w-0">
|
|
|
- <text class="text-gray-800 text-lg font-semibold block truncate">{{ displayName }}</text>
|
|
|
|
|
|
|
+ <text class="text-white text-lg font-semibold block truncate">{{ displayName }}</text>
|
|
|
<view class="flex items-center flex-wrap mt-1">
|
|
<view class="flex items-center flex-wrap mt-1">
|
|
|
- <text v-if="primaryMeta" class="text-gray-500 text-sm mr-3">{{ primaryMeta }}</text>
|
|
|
|
|
- <text v-if="secondaryMeta" class="text-gray-500 text-sm">{{ secondaryMeta }}</text>
|
|
|
|
|
|
|
+ <text v-if="primaryMeta" class="text-white/80 text-sm mr-3">{{ primaryMeta }}</text>
|
|
|
|
|
+ <text v-if="secondaryMeta" class="text-white/80 text-sm">{{ secondaryMeta }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
@@ -20,7 +20,8 @@
|
|
|
<!-- 功能列表 -->
|
|
<!-- 功能列表 -->
|
|
|
<view class="px-4 py-4 gap-y-4">
|
|
<view class="px-4 py-4 gap-y-4">
|
|
|
<!-- 账号信息 -->
|
|
<!-- 账号信息 -->
|
|
|
- <uni-card title="账号信息" icon="uniui-person-filled" :is-shadow="false">
|
|
|
|
|
|
|
+ <view class="bg-white rounded-xl shadow-sm p-4">
|
|
|
|
|
+ <text class="text-base font-semibold text-gray-800 block mb-3">账号信息</text>
|
|
|
<uni-list :border="false">
|
|
<uni-list :border="false">
|
|
|
<uni-list-item title="姓名" :note="userInfo?.name || '-'" />
|
|
<uni-list-item title="姓名" :note="userInfo?.name || '-'" />
|
|
|
<template v-if="role === 'construction'">
|
|
<template v-if="role === 'construction'">
|
|
@@ -38,35 +39,42 @@
|
|
|
<uni-list-item title="入职日期" :note="userInfo?.hireDate || '-'" />
|
|
<uni-list-item title="入职日期" :note="userInfo?.hireDate || '-'" />
|
|
|
</template>
|
|
</template>
|
|
|
</uni-list>
|
|
</uni-list>
|
|
|
- </uni-card>
|
|
|
|
|
|
|
+ </view>
|
|
|
|
|
|
|
|
<!-- 功能菜单 -->
|
|
<!-- 功能菜单 -->
|
|
|
- <uni-card title="功能菜单" icon="uniui-gear-filled" :is-shadow="false">
|
|
|
|
|
|
|
+ <view class="bg-white rounded-xl shadow-sm p-4">
|
|
|
|
|
+ <text class="text-base font-semibold text-gray-800 block mb-3">功能菜单</text>
|
|
|
<uni-list :border="false">
|
|
<uni-list :border="false">
|
|
|
- <uni-list-item
|
|
|
|
|
- title="修改密码"
|
|
|
|
|
- icon="uniui-locked-filled"
|
|
|
|
|
- show-arrow
|
|
|
|
|
- @click="goToChangePassword"
|
|
|
|
|
- />
|
|
|
|
|
- <uni-list-item
|
|
|
|
|
- title="通知公告"
|
|
|
|
|
- icon="uniui-notification-filled"
|
|
|
|
|
- show-arrow
|
|
|
|
|
- @click="goToNotices"
|
|
|
|
|
- />
|
|
|
|
|
- <uni-list-item
|
|
|
|
|
- title="帮助中心"
|
|
|
|
|
- icon="uniui-help-filled"
|
|
|
|
|
- show-arrow
|
|
|
|
|
- @click="goToHelp"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <view hover-class="scale-down" :hover-start-time="0" :hover-stay-time="150" @click="goToChangePassword">
|
|
|
|
|
+ <uni-list-item
|
|
|
|
|
+ title="修改密码"
|
|
|
|
|
+ icon="uniui-locked-filled"
|
|
|
|
|
+ show-arrow
|
|
|
|
|
+ clickable
|
|
|
|
|
+ />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view hover-class="scale-down" :hover-start-time="0" :hover-stay-time="150" @click="goToNotices">
|
|
|
|
|
+ <uni-list-item
|
|
|
|
|
+ title="通知公告"
|
|
|
|
|
+ icon="uniui-notification-filled"
|
|
|
|
|
+ show-arrow
|
|
|
|
|
+ clickable
|
|
|
|
|
+ />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view hover-class="scale-down" :hover-start-time="0" :hover-stay-time="150" @click="goToHelp">
|
|
|
|
|
+ <uni-list-item
|
|
|
|
|
+ title="帮助中心"
|
|
|
|
|
+ icon="uniui-help-filled"
|
|
|
|
|
+ show-arrow
|
|
|
|
|
+ clickable
|
|
|
|
|
+ />
|
|
|
|
|
+ </view>
|
|
|
</uni-list>
|
|
</uni-list>
|
|
|
- </uni-card>
|
|
|
|
|
|
|
+ </view>
|
|
|
|
|
|
|
|
<!-- 退出登录 -->
|
|
<!-- 退出登录 -->
|
|
|
<view class="mt-4">
|
|
<view class="mt-4">
|
|
|
- <button class="w-full py-3 bg-white text-danger rounded-xl font-medium border border-gray-200" @click="handleLogout">
|
|
|
|
|
|
|
+ <button class="w-full py-3 bg-red-500 text-white rounded-xl font-medium transition-colors logout-btn" @click="handleLogout">
|
|
|
退出登录
|
|
退出登录
|
|
|
</button>
|
|
</button>
|
|
|
</view>
|
|
</view>
|
|
@@ -78,7 +86,6 @@
|
|
|
import { computed } from 'vue'
|
|
import { computed } from 'vue'
|
|
|
import { useAuthStore } from '@/stores/auth'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
|
import StatusBar from '@/components/common/StatusBar.vue'
|
|
import StatusBar from '@/components/common/StatusBar.vue'
|
|
|
-import UniCard from '@/components/uni-card/uni-card.vue'
|
|
|
|
|
import UniList from '@/components/uni-list/uni-list.vue'
|
|
import UniList from '@/components/uni-list/uni-list.vue'
|
|
|
import UniListItem from '@/components/uni-list/uni-list-item.vue'
|
|
import UniListItem from '@/components/uni-list/uni-list-item.vue'
|
|
|
|
|
|
|
@@ -137,3 +144,17 @@ async function handleLogout() {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped>
|
|
|
|
|
+.scale-down {
|
|
|
|
|
+ transition: transform 0.15s ease;
|
|
|
|
|
+}
|
|
|
|
|
+.scale-down:hover,
|
|
|
|
|
+.scale-down:active {
|
|
|
|
|
+ transform: scale(0.95);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.logout-btn:active {
|
|
|
|
|
+ background-color: #dc2626;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|