aquagreen_wechat_app/src/components/my/ProfileView.vue

<template>
  <view class="app-container pb-24">
    <!-- 顶部个人信息 -->
    <view class="header-gradient">
      <StatusBar />
      <view class="px-4 pt-4 pb-8">
        <view class="flex items-center">
          <view class="profile-avatar mr-4">
            <text class="uni-icons uniui-person-filled text-primary text-3xl"></text>
          </view>
          <view class="flex-1 min-w-0">
            <view class="flex items-center flex-wrap">
              <text class="text-white text-xl font-bold truncate">{{ displayName }}</text>
              <text class="role-chip">{{ roleLabel }}</text>
            </view>
            <view v-if="primaryMeta || secondaryMeta" class="flex items-center flex-wrap mt-2">
              <text v-if="primaryMeta" class="profile-meta">{{ primaryMeta }}</text>
              <text v-if="primaryMeta && secondaryMeta" class="profile-meta-dot">·</text>
              <text v-if="secondaryMeta" class="profile-meta">{{ secondaryMeta }}</text>
            </view>
            <view v-if="userInfo?.employeeNo" class="mt-2">
              <text class="emp-chip">工号 {{ userInfo.employeeNo }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 内容区 -->
    <view class="px-4 -mt-4">
      <!-- 账号信息 -->
      <view class="card">
        <view class="flex items-center px-4 pt-4 pb-3">
          <view class="section-bar mr-2"></view>
          <text class="text-base font-bold text-gray-800">账号信息</text>
        </view>
        <view class="px-4 pb-2">
          <view class="info-row">
            <text class="info-label">姓名</text>
            <text class="info-value">{{ userInfo?.name || '-' }}</text>
          </view>
          <template v-if="role === 'construction'">
            <view class="info-row">
              <text class="info-label">班组</text>
              <text class="info-value">{{ userInfo?.team || '-' }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">职位</text>
              <text class="info-value">{{ userInfo?.position || '-' }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">工号</text>
              <text class="info-value">{{ userInfo?.employeeNo || '-' }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">联系电话</text>
              <text class="info-value">{{ userInfo?.phone || '-' }}</text>
            </view>
          </template>
          <template v-else>
            <view class="info-row">
              <text class="info-label">部门</text>
              <text class="info-value">{{ userInfo?.department || '-' }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">职位</text>
              <text class="info-value">{{ userInfo?.position || '-' }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">工号</text>
              <text class="info-value">{{ userInfo?.employeeNo || '-' }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">电话</text>
              <text class="info-value">{{ userInfo?.phone || '-' }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">邮箱</text>
              <text class="info-value break-all">{{ userInfo?.email || '-' }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">入职日期</text>
              <text class="info-value">{{ userInfo?.hireDate || '-' }}</text>
            </view>
          </template>
        </view>
      </view>

      <!-- 功能菜单 -->
      <view class="card p-2">
        <view
          class="menu-item"
          hover-class="menu-hover"
          :hover-start-time="0"
          :hover-stay-time="120"
          @click="goToChangePassword"
        >
          <view class="menu-icon bg-blue-50">
            <text class="uni-icons uniui-locked-filled text-blue-600"></text>
          </view>
          <view class="flex-1 min-w-0">
            <text class="menu-title">修改密码</text>
            <text class="menu-desc">定期更换，保障账号安全</text>
          </view>
          <text class="uni-icons uniui-arrowright text-gray-400"></text>
        </view>
        <view
          class="menu-item"
          hover-class="menu-hover"
          :hover-start-time="0"
          :hover-stay-time="120"
          @click="goToNotices"
        >
          <view class="menu-icon bg-orange-50">
            <text class="uni-icons uniui-notification-filled text-orange-600"></text>
          </view>
          <view class="flex-1 min-w-0">
            <text class="menu-title">通知公告</text>
            <text class="menu-desc">查看公司最新通知与公告</text>
          </view>
          <text class="uni-icons uniui-arrowright text-gray-400"></text>
        </view>
        <view
          class="menu-item"
          hover-class="menu-hover"
          :hover-start-time="0"
          :hover-stay-time="120"
          @click="goToHelp"
        >
          <view class="menu-icon bg-green-50">
            <text class="uni-icons uniui-help-filled text-green-600"></text>
          </view>
          <view class="flex-1 min-w-0">
            <text class="menu-title">帮助中心</text>
            <text class="menu-desc">常见问题与使用指南</text>
          </view>
          <text class="uni-icons uniui-arrowright text-gray-400"></text>
        </view>
      </view>

      <!-- 退出登录 -->
      <view
        class="card logout-row"
        hover-class="logout-hover"
        :hover-start-time="0"
        :hover-stay-time="120"
        @click="handleLogout"
      >
        <view class="menu-icon bg-red-50 mr-3">
          <text class="uni-icons uniui-loop text-red-600"></text>
        </view>
        <text class="flex-1 text-base font-medium text-red-600">退出登录</text>
        <text class="uni-icons uniui-arrowright text-red-300"></text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useAuthStore } from '@/stores/auth'
import StatusBar from '@/components/common/StatusBar.vue'

const authStore = useAuthStore()

const userInfo = computed(() => authStore.user)
const role = computed(() => userInfo.value?.role || 'sales')

const roleLabel = computed(() => {
  const map: Record<string, string> = {
    sales: '销售',
    dispatch: '调度',
    construction: '施工',
  }
  return map[role.value] || '员工'
})

const displayName = computed(() => {
  return userInfo.value?.name || '用户'
})

const primaryMeta = computed(() => {
  if (role.value === 'construction') {
    return userInfo.value?.team ? `${userInfo.value.team}` : ''
  }
  return userInfo.value?.department || ''
})

const secondaryMeta = computed(() => {
  return userInfo.value?.position || ''
})

function goToChangePassword() {
  uni.navigateTo({ url: '/subPackages/pages-common/changePassword' })
}

function goToNotices() {
  const paths: Record<string, string> = {
    sales: '/subPackages/pages-common/noticeList',
    dispatch: '/subPackages/pages-dispatch/noticeList',
    construction: '/subPackages/pages-construction/noticeList',
  }
  uni.navigateTo({ url: paths[role.value] || paths.sales })
}

function goToHelp() {
  uni.navigateTo({ url: '/subPackages/pages-common/helpCenter' })
}

async function handleLogout() {
  const res = await uni.showModal({
    title: '确认退出',
    content: '确定要退出登录吗？',
  })
  if (res.confirm) {
    uni.reLaunch({
      url: '/pages/login/login',
      complete: () => {
        authStore.doLogout()
      },
    })
  }
}
</script>

<style scoped>
/* 头像 */
.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

/* 角色徽标 */
.role-chip {
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* 头部 meta 文字 */
.profile-meta {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
}

.profile-meta-dot {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  margin: 0 6px;
}

/* 工号 chip */
.emp-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.92);
  background-color: rgba(0, 0, 0, 0.16);
}

/* 区块标题装饰条 */
.section-bar {
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
}

/* 信息行 */
.info-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 14px;
  color: #6b7280;
  flex-shrink: 0;
  margin-right: 16px;
}

.info-value {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  text-align: right;
}

/* 菜单项 */
.menu-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
}

.menu-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 12px;
  font-size: 20px;
}

.menu-title {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: #1f2937;
}

.menu-desc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #9ca3af;
}

.menu-hover {
  background-color: #f9fafb;
}

/* 退出登录 */
.logout-row {
  display: flex;
  align-items: center;
  padding: 14px 16px;
}

.logout-hover {
  background-color: #fef2f2;
}

.text-red-300 {
  color: #fca5a5;
}
</style>