OfficeSystem/pages/my/profile/index.vue

<template>
  <view class="profile-detail-page">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-content">
        <text class="nav-btn" @click="handleBack">‹</text>
        <text class="nav-title">个人资料</text>
        <text class="nav-btn" style="opacity: 0;">占位</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view class="content-scroll" scroll-y>
      <!-- 头像和基本信息卡片 -->
      <view class="profile-header-card">
        <view class="avatar-section">
          <view class="avatar-wrapper-large">
            <image 
              v-if="userInfo?.user?.avatar" 
              class="avatar-img-large" 
              :src="userInfo.user.avatar" 
              mode="aspectFill"
            />
            <view v-else class="avatar-placeholder-large">
              <text class="avatar-text-large">{{ getAvatarText(userInfo?.user?.nickName) }}</text>
            </view>
          </view>
          <view class="user-basic-info">
            <text class="user-name-large">{{ userInfo?.user?.nickName || '--' }}</text>
            <view style="display: flex;align-items: center;gap: 10px">
              <view class="user-dept-large">{{ userInfo?.user?.deptName || '--' }}</view>
<!--              <view class="role-tags" v-if="userInfo?.roles && userInfo.roles.length > 0">-->
<!--                <text-->
<!--                    class="role-tag"-->
<!--                    v-for="(role, index) in userInfo.roles"-->
<!--                    :key="index"-->
<!--                >-->
<!--                  {{ role }}-->
<!--                </text>-->
<!--              </view>-->
            </view>

          </view>
        </view>
      </view>

      <!-- 统计信息卡片 -->
<!--      <view class="info-card stats-card">-->
<!--        <view class="card-title">工作统计</view>-->
<!--        <view class="stats-grid">-->
<!--          <view class="stat-box">-->
<!--            <text class="stat-number">{{ userInfo?.user?.taskCount || 0 }}</text>-->
<!--            <text class="stat-desc">任务数</text>-->
<!--          </view>-->
<!--          <view class="stat-box">-->
<!--            <text class="stat-number">{{ userInfo?.user?.projectCount || 0 }}</text>-->
<!--            <text class="stat-desc">项目数</text>-->
<!--          </view>-->
<!--          <view class="stat-box">-->
<!--            <text class="stat-number">{{ userInfo?.user?.taskNum || 0 }}</text>-->
<!--            <text class="stat-desc">任务编号</text>-->
<!--          </view>-->
<!--        </view>-->
<!--      </view>-->

      <!-- 基本信息卡片 -->
      <view class="info-card">
        <view class="card-title">基本信息</view>
        <view class="info-list">
          <view class="info-item">
            <text class="info-label">用户名</text>
            <text class="info-value">{{ userInfo?.user?.userName || '--' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">工号</text>
            <text class="info-value">{{ userInfo?.user?.userNo || '--' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">手机号</text>
            <text class="info-value">{{ userInfo?.user?.phonenumber || '--' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">邮箱</text>
            <text class="info-value">{{ userInfo?.user?.email || '--' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">性别</text>
            <text class="info-value">{{ getSexText(userInfo?.user?.sex) }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">生日</text>
            <text class="info-value">{{ userInfo?.user?.birthday || '--' }}</text>
          </view>
        </view>
      </view>

      <!-- 部门信息卡片 -->
      <view class="info-card" v-if="userInfo?.user?.dept">
        <view class="card-title">部门信息</view>
        <view class="info-list">
          <view class="info-item">
            <text class="info-label">部门名称</text>
            <text class="info-value">{{ userInfo.user.dept.deptName || '--' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">部门负责人</text>
            <text class="info-value">{{ userInfo.user.dept.leader || '--' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">部门邮箱</text>
            <text class="info-value">{{ userInfo.user.dept.email || '--' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">部门电话</text>
            <text class="info-value">{{ userInfo.user.dept.phone || '--' }}</text>
          </view>
        </view>
      </view>

      <!-- 工作信息卡片 -->
      <view class="info-card">
        <view class="card-title">工作信息</view>
        <view class="info-list">
          <view class="info-item">
            <text class="info-label">入职日期</text>
            <text class="info-value">{{ userInfo?.user?.employDate || '--' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">离职日期</text>
            <text class="info-value">{{ userInfo?.user?.resignDate || '--' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">创建时间</text>
            <text class="info-value">{{ userInfo?.user?.createTime || '--' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">最后登录</text>
            <text class="info-value">{{ userInfo?.user?.loginDate || '--' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">登录IP</text>
            <text class="info-value">{{ userInfo?.user?.loginIp || '--' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">状态</text>
            <text class="info-value" :class="getStatusClass(userInfo?.user?.status)">
              {{ getStatusText(userInfo?.user?.status) }}
            </text>
          </view>
        </view>
      </view>

      <!-- 权限信息卡片 -->
<!--      <view class="info-card" v-if="userInfo?.permissions && userInfo.permissions.length > 0">-->
<!--        <view class="card-title">权限信息</view>-->
<!--        <view class="permissions-list">-->
<!--          <text -->
<!--            class="permission-tag" -->
<!--            v-for="(permission, index) in userInfo.permissions" -->
<!--            :key="index"-->
<!--          >-->
<!--            {{ permission }}-->
<!--          </text>-->
<!--        </view>-->
<!--      </view>-->

      <!-- 备注信息 -->
      <view class="info-card" v-if="userInfo?.user?.remark">
        <view class="card-title">备注</view>
        <view class="remark-content">
          <text>{{ userInfo.user.remark }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

// 获取头像文字
const getAvatarText = (name) => {
  if (!name) return '?'
  return name.charAt(0).toUpperCase()
}

// 获取性别文本
const getSexText = (sex) => {
  if (sex === '0') return '女'
  if (sex === '1') return '男'
  return '--'
}

// 获取状态文本
const getStatusText = (status) => {
  if (status === '0') return '正常'
  if (status === '1') return '停用'
  return '--'
}

// 获取状态样式类
const getStatusClass = (status) => {
  if (status === '0') return 'status-normal'
  if (status === '1') return 'status-disabled'
  return ''
}

// 返回
const handleBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.profile-detail-page {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  //height: 100vh;
  background-color: #f5f5f5;
}

.custom-navbar {
  background-color: #fff;
  padding-top: var(--status-bar-height, 0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 100;
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
}

.nav-btn {
  font-size: 24px;
  color: #333;
  font-weight: bold;
  min-width: 44px;
  text-align: center;
}

.nav-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  flex: 1;
  text-align: center;
}

.content-scroll {
  box-sizing: border-box;
  flex: 1;
  padding: 16px;
}

.profile-header-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 32px 24px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.avatar-section {
  display: flex;
  align-items: center;
}

.avatar-wrapper-large {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.2);
  border: 4px solid rgba(255, 255, 255, 0.3);
  margin-right: 24px;
  flex-shrink: 0;
}

.avatar-img-large {
  width: 100%;
  height: 100%;
}

.avatar-placeholder-large {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
}

.avatar-text-large {
  font-size: 48px;
  font-weight: 600;
  color: #ffffff;
}

.user-basic-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.user-name-large {
  font-size: 28px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
}

.user-dept-large {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);

}

.role-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.role-tag {
  font-size: 12px;
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 500;
}

.info-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.stats-card {
  .stats-grid {
    display: flex;
    justify-content: space-around;
    padding: 16px 0;
  }

  .stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
  }

  .stat-number {
    font-size: 32px;
    font-weight: 600;
    color: #667eea;
    margin-bottom: 8px;
  }

  .stat-desc {
    font-size: 14px;
    color: #666;
  }
}

.info-list {
  display: flex;
  flex-direction: column;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }
}

.info-label {
  font-size: 14px;
  color: #666;
  flex-shrink: 0;
}

.info-value {
  font-size: 14px;
  color: #333;
  text-align: right;
  flex: 1;
  margin-left: 16px;

  &.status-normal {
    color: #67c23a;
  }

  &.status-disabled {
    color: #f56c6c;
  }
}

.permissions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.permission-tag {
  font-size: 12px;
  background: #f0f7ff;
  color: #409eff;
  padding: 6px 12px;
  border-radius: 12px;
  font-weight: 500;
}

.remark-content {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  padding: 8px 0;
}
</style>