aquagreen_wechat_app/src/components/my/ProfileView.vue

<template>
  <view class="app-container pb-40">
    <!-- 顶部个人信息 -->
    <view class="px-4 pb-6 rounded-b-3xl" style="background: linear-gradient(135deg, #1e3a8a, #1e40af);">
      <StatusBar />
      <view class="flex items-center pt-3">
        <view class="w-16 h-16 rounded-full flex items-center justify-center mr-4" style="background-color: rgba(255, 255, 255, 0.2);">
          <text class="uni-icons uniui-person-filled text-white text-2xl"></text>
        </view>
        <view class="flex-1 min-w-0">
          <text class="text-white text-lg font-semibold block truncate">{{ displayName }}</text>
          <view class="flex items-center flex-wrap mt-1">
            <text v-if="primaryMeta" class="text-white text-sm mr-3" style="opacity: 0.8;">{{ primaryMeta }}</text>
            <text v-if="secondaryMeta" class="text-white text-sm" style="opacity: 0.8;">{{ secondaryMeta }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 功能列表 -->
    <view class="px-4 py-4 gap-y-4">
      <!-- 账号信息 -->
      <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-item title="姓名" :note="userInfo?.name || '-'" />
          <template v-if="role === 'construction'">
            <uni-list-item title="班组" :note="userInfo?.team || '-'" />
            <uni-list-item title="职位" :note="userInfo?.position || '-'" />
            <uni-list-item title="工号" :note="userInfo?.employeeNo || '-'" />
            <uni-list-item title="联系电话" :note="userInfo?.phone || '-'" />
          </template>
          <template v-else>
            <uni-list-item title="部门" :note="userInfo?.department || '-'" />
            <uni-list-item title="职位" :note="userInfo?.position || '-'" />
            <uni-list-item title="工号" :note="userInfo?.employeeNo || '-'" />
            <uni-list-item title="电话" :note="userInfo?.phone || '-'" />
            <uni-list-item title="邮箱" :note="userInfo?.email || '-'" />
            <uni-list-item title="入职日期" :note="userInfo?.hireDate || '-'" />
          </template>
        </uni-list>
      </view>

      <!-- 功能菜单 -->
      <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">
          <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
            />
          </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
            />
          </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
            />
          </view>
        </uni-list>
      </view>

      <!-- 退出登录 -->
      <view class="mt-4">
        <button class="w-full py-3 bg-red-500 text-white rounded-xl font-medium transition-colors logout-btn" @click="handleLogout">
          退出登录
        </button>
      </view>
    </view>
  </view>
</template>

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

const authStore = useAuthStore()

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

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(() => {
  if (role.value === 'construction') {
    return userInfo.value?.position ? `/${userInfo.value.position}` : ''
  }
  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>
.scale-down {
  transition: transform 0.15s ease;
}
.scale-down:hover,
.scale-down:active {
  transform: scale(0.95);
}

.logout-btn:active {
  background-color: #dc2626;
}
</style>