王明 / Food-Labeling-Management-Platform

  <template>
    <view class="page">
      <view class="header-hero" :style="{ paddingTop: statusBarHeight + 'px' }">
        <view class="top-bar">
          <view class="top-left" @click="goBack">
            <AppIcon name="chevronLeft" size="sm" color="white" />
          </view>
          <view class="top-center">
            <text class="page-title">{{ t('profile.title') }}</text>

            <LocationPicker />

          </view>
          <view class="top-right" @click="isMenuOpen = true">
            <AppIcon name="menu" size="sm" color="white" />
          </view>
        </view>
      </view>
  
      <view class="content">
        <view class="avatar-wrap">
          <view class="avatar"><AppIcon name="user" size="lg" color="white" /></view>

          <text class="avatar-name">{{ name }}</text>
          <text class="avatar-role">Employee</text>

        </view>

  
        <view class="info-card">
          <view class="info-row">
            <view class="info-icon-box blue">
              <AppIcon name="user" size="sm" color="blue" />
            </view>
            <view class="info-detail">
              <text class="info-label">{{ t('profile.name') }}</text>
              <text class="info-value">{{ name }}</text>
            </view>

          </view>

          <view class="info-divider" />
          <view class="info-row">
            <view class="info-icon-box green">
              <AppIcon name="mail" size="sm" color="green" />
            </view>
            <view class="info-detail">
              <text class="info-label">{{ t('profile.email') }}</text>
              <text class="info-value">{{ email }}</text>
            </view>

          </view>

          <view class="info-divider" />
          <view class="info-row">
            <view class="info-icon-box orange">
              <AppIcon name="phone" size="sm" color="orange" />
            </view>
            <view class="info-detail">
              <text class="info-label">{{ t('profile.phone') }}</text>
              <text class="info-value">{{ phone }}</text>
            </view>

          </view>

          <view class="info-divider" />
          <view class="info-row">
            <view class="info-icon-box purple">
              <AppIcon name="tag" size="sm" color="purple" />
            </view>
            <view class="info-detail">
              <text class="info-label">{{ t('profile.employeeId') }}</text>
              <text class="info-value">{{ employeeId }}</text>
            </view>

          </view>
        </view>

  
        <view class="btn-password" @click="goChangePassword">
          <AppIcon name="settings" size="sm" color="primary" />
          <text class="btn-password-text">Change Password</text>
          <AppIcon name="chevronRight" size="sm" color="gray" />

        </view>
      </view>
  
      <SideMenu v-model="isMenuOpen" />
    </view>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import { useI18n } from 'vue-i18n'
  import AppIcon from '../../components/AppIcon.vue'
  import SideMenu from '../../components/SideMenu.vue'

  import LocationPicker from '../../components/LocationPicker.vue'

  import { getStatusBarHeight } from '../../utils/statusBar'
  
  const { t } = useI18n()
  const statusBarHeight = getStatusBarHeight()

  const isMenuOpen = ref(false)
  const name = ref(uni.getStorageSync('userName') || 'John Smith')
  const email = ref('john.smith@company.com')
  const phone = ref('+1 (555) 123-4567')
  const employeeId = ref('EMP-2024-001')
  
  const goBack = () => {
    const pages = getCurrentPages()
    if (pages.length > 1) {
      uni.navigateBack()
    } else {
      uni.redirectTo({ url: '/pages/index/index' })
    }
  }
  

  const goChangePassword = () => {
    uni.navigateTo({ url: '/pages/more/change-password' })

  }
  </script>
  
  <style scoped>
  .page {
    min-height: 100vh;
    background: #f9fafb;
  }
  
  .header-hero {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-dark));
    padding: 16rpx 32rpx 24rpx;
  }
  
  .top-bar {
    height: 96rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .top-left,
  .top-right {
    width: 64rpx;
    height: 64rpx;
    border-radius: 999rpx;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .top-center {
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;

  }
  
  .page-title {
    font-size: 34rpx;
    font-weight: 600;
    color: #fff;
  }
  
  .content {
    padding: 48rpx;
  }
  
  .avatar-wrap {
    display: flex;

    flex-direction: column;
    align-items: center;
    margin-bottom: 40rpx;

  }
  
  .avatar {

    width: 140rpx;
    height: 140rpx;

    background: var(--theme-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 16rpx;

  }
  

  .avatar-name {
    font-size: 36rpx;
    font-weight: 700;
    color: #111827;

    display: block;

    margin-bottom: 4rpx;

  }
  

  .avatar-role {
    font-size: 26rpx;
    color: #6b7280;

  }
  

  .info-card {
    background: #fff;
    padding: 12rpx 32rpx;
    border-radius: 20rpx;
    margin-bottom: 32rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

  }
  

  .info-row {

    display: flex;

    align-items: center;

    gap: 24rpx;

    padding: 28rpx 0;

  }
  

  .info-divider {
    height: 1rpx;

    background: #f3f4f6;

  }
  
  .info-icon-box {
    width: 72rpx;
    height: 72rpx;

    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

  }
  

  .info-icon-box.blue {
    background: #eff6ff;

  }
  

  .info-icon-box.green {
    background: #f0fdf4;
  }
  
  .info-icon-box.orange {
    background: #fff7ed;
  }
  
  .info-icon-box.purple {
    background: #faf5ff;
  }
  
  .info-detail {

    flex: 1;

    min-width: 0;

  }
  

  .info-label {
    font-size: 24rpx;
    color: #9ca3af;
    display: block;
    margin-bottom: 4rpx;
  }
  
  .info-value {
    font-size: 30rpx;
    font-weight: 500;
    color: #111827;
    display: block;
  }
  
  .btn-password {
    background: #fff;
    padding: 32rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    gap: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

  }
  

  .btn-password-text {
    flex: 1;
    font-size: 30rpx;

    font-weight: 600;

    color: #111827;

  }
  </style>