/**
 * 个人中心页
 */
import { View, Text } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import { observer } from 'mobx-react'
import { userStore } from '../../store'
import './index.scss'

const UserIndex = observer(() => {
  useLoad(() => {
    console.log('个人中心页面加载')
  })

  return (
    <View className="user-page">
      <View className="header">
        <View className="avatar">
          <Text className="avatar-text">
            {userStore.userInfo?.nickname?.[0] || '未'}
          </Text>
        </View>
        <Text className="nickname">
          {userStore.userInfo?.nickname || '未登录'}
        </Text>
      </View>
      
      <View className="content">
        <View className="info-card">
          <Text className="label">账户余额</Text>
          <Text className="value">¥ {userStore.balance.toFixed(2)}</Text>
        </View>
      </View>
    </View>
  )
})

export default UserIndex