xin-school-taro/src/pages/profile/index.tsx

import { useMemo, useCallback } from 'react'
import Taro from '@tarojs/taro'
import { View, Text, Image, ScrollView } from '@tarojs/components'
import { Cell, CellGroup, Icon } from '@antmjs/vantui'
import useAuthStore from '@/stores/auth/useAuthStore'
import { GENDER_MAP } from '@/types/user'
import type { Gender } from '@/types/user'
import './index.less'

/** 状态栏高度 */
function getStatusBarHeight(): number {
  try {
    return Taro.getSystemInfoSync().statusBarHeight || 20
  } catch {
    return 20
  }
}

/** 默认用户信息（未登录时展示占位） */
const DEFAULT_USER = {
  avatar: 'https://picsum.photos/seed/avatar/200/200',
  name: '未登录',
  className: '点击登录体验更多功能',
  gender: '男' as const,
  stats: { likes: '-', comments: '-', favorites: '-' },
}

/** 订单入口 */
const ORDER_TABS = [
  { key: 'all',      label: '全部',     icon: 'orders-o' },
  { key: 'pending',  label: '待付款',   icon: 'balance-pay' },
  { key: 'progress', label: '进行中',   icon: 'logistics' },
  { key: 'confirm',  label: '待确认',   icon: 'checked' },
  { key: 'review',   label: '待评价',   icon: 'star-o' },
]

/** 功能列表 */
const FEATURE_LIST = [
  { key: 'goods',    label: '商品订单', icon: 'orders-o' },
  { key: 'address',  label: '地址管理', icon: 'location-o' },
  { key: 'about',    label: '关于我们', icon: 'info-o' },
  { key: 'feedback', label: '意见反馈', icon: 'chat-o' },
] as const

export default function Profile() {
  const statusBarH = useMemo(getStatusBarHeight, [])
  const user = useAuthStore(s => s.user)
  const logout = useAuthStore(s => s.logout)
  const isLoggedIn = useAuthStore(s => !!s.token && !!s.user)

  /** 跳转登录页 */
  const handleGoToLogin = useCallback(() => {
    Taro.navigateTo({ url: '/pages/login/index' })
  }, [])

  const handleSettings = () => {
    Taro.showToast({ title: '设置页面即将上线', icon: 'none' })
  }

  const handleEditProfile = () => {
    if (isLoggedIn) {
      Taro.navigateTo({ url: '/pages/profile-edit/index' })
    } else {
      handleGoToLogin()
    }
  }

  const handleOrderTab = (key: string) => {
    if (!isLoggedIn) {
      handleGoToLogin()
      return
    }
    Taro.showToast({ title: `${ORDER_TABS.find(t => t.key === key)?.label || ''}订单即将上线`, icon: 'none' })
  }

  const handleFeature = (item: typeof FEATURE_LIST[number]) => {
    if (!isLoggedIn) {
      handleGoToLogin()
      return
    }
    Taro.showToast({ title: `${item.label}即将上线`, icon: 'none' })
  }

  const handleAllOrders = () => {
    if (!isLoggedIn) {
      handleGoToLogin()
      return
    }
    Taro.showToast({ title: '全部订单即将上线', icon: 'none' })
  }

  /** 退出登录 */
  const handleLogout = useCallback(() => {
    Taro.showModal({
      title: '提示',
      content: '确定要退出登录吗？',
      success: (res) => {
        if (res.confirm) {
          logout()
          Taro.showToast({ title: '已退出登录', icon: 'success' })
        }
      },
    })
  }, [logout])

  // 根据登录状态决定展示的用户信息
  const displayUser = isLoggedIn && user
    ? {
        avatar: user.avatar,
        name: user.nickname,
        className: '在校学生', // 后续可扩展班级字段
        gender: GENDER_MAP[user.gender] || '未知',
        stats: { likes: '-', comments: '-', favorites: '-' }, // 暂用占位，后续从 API 获取
      }
    : DEFAULT_USER

  return (
    <View className='profile-page'>
      {/* ========== 背景图区域 ========== */}
      <View
        className='profile-header'
        style={{ paddingTop: `${statusBarH}px` }}
      >
        {/* 设置按钮 */}
        <View className='header-actions'>
          <View className='settings-btn' onClick={handleSettings}>
            <Icon name='setting-o' size={22} color='#fff' />
          </View>
        </View>

        {/* 头像 + 用户信息 */}
        <View
          className={`user-card ${!isLoggedIn ? 'user-card--login' : ''}`}
          onClick={isLoggedIn ? handleEditProfile : handleGoToLogin}
        >
          {isLoggedIn ? (
            <>
              <Image className='avatar' src={displayUser.avatar} mode='aspectFill' />
              <View className='user-info'>
                <View className='name-row'>
                  <Text className='name'>{displayUser.name}</Text>
                  <Text className='gender-tag'>{displayUser.gender === '男' ? '♂' : displayUser.gender === '女' ? '♀' : ''}</Text>
                </View>
                <Text className='class-name'>{displayUser.className}</Text>
              </View>
              <Icon name='arrow' size={18} color='rgba(255,255,255,0.7)' />
            </>
          ) : (
            <>
              <View className='avatar-placeholder'>
                <Icon name='user-circle-o' size={48} color='rgba(255,255,255,0.7)' />
              </View>
              <View className='user-info'>
                <View className='name-row'>
                  <Text className='name login-text'>点击登录账号</Text>
                </View>
                <Text className='class-name'>登录后体验更多功能</Text>
              </View>
              <Icon name='arrow' size={18} color='rgba(255,255,255,0.7)' />
            </>
          )}
        </View>

        {/* 点赞/评论/收藏 */}
        <View className='stats-row'>
          <View className='stat-item'>
            <Text className='stat-num'>{displayUser.stats.likes}</Text>
            <Text className='stat-label'>点赞</Text>
          </View>
          <View className='stat-item'>
            <Text className='stat-num'>{displayUser.stats.comments}</Text>
            <Text className='stat-label'>评论</Text>
          </View>
          <View className='stat-item'>
            <Text className='stat-num'>{displayUser.stats.favorites}</Text>
            <Text className='stat-label'>收藏</Text>
          </View>
        </View>
      </View>

      {/* ========== 可滚动内容 ========== */}
      <ScrollView className='profile-scroll' scrollY enhanced showScrollbar={false}>
        {/* ========== 订单卡片 ========== */}
        <View className='section-card order-card'>
          <View className='card-header' onClick={handleAllOrders}>
            <Text className='card-title'>我的订单</Text>
            <View className='card-more'>
              <Text className='more-text'>全部</Text>
              <Icon name='arrow' size={14} color='#969799' />
            </View>
          </View>
          <View className='order-tabs'>
            {ORDER_TABS.map((tab) => (
              <View
                key={tab.key}
                className='order-tab'
                onClick={() => handleOrderTab(tab.key)}
              >
                <Icon name={tab.icon} size={24} color='#323233' />
                <Text className='tab-label'>{tab.label}</Text>
              </View>
            ))}
          </View>
        </View>

        {/* ========== 功能列表 ========== */}
        <View className='section-card feature-list'>
          <CellGroup inset>
            {FEATURE_LIST.map((item, index) => (
              <Cell
                key={item.key}
                title={item.label}
                icon={item.icon}
                isLink
                border={index < FEATURE_LIST.length - 1}
                onClick={() => handleFeature(item)}
              />
            ))}
          </CellGroup>
        </View>

        {/* ========== 退出登录（仅登录后显示） ========== */}
        {isLoggedIn && (
          <View className='section-card feature-list'>
            <CellGroup inset>
              <Cell
                title='退出登录'
                icon='cross'
                isLink
                border={false}
                onClick={handleLogout}
              />
            </CellGroup>
          </View>
        )}

        {/* ========== 底部信息 ========== */}
        <View className='footer-info'>
          <Text className='footer-icp'>湘ICP备2024000000号-1</Text>
          <Text className='footer-version'>校园通 v1.0.0</Text>
        </View>
      </ScrollView>
    </View>
  )
}