import { Ionicons } from '@expo/vector-icons'
import { LinearGradient } from 'expo-linear-gradient'
import { Stack, useRouter } from 'expo-router'
import React, { useEffect, useState } from 'react'
import { Dimensions, ScrollView } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { Block, Img, Text } from '@/@share/components'
import { useUserBalance } from '@/hooks/core'
import { cn } from '@/utils/cn'
const { width: SCREEN_WIDTH } = Dimensions.get('window')
const OPTION_WIDTH = (SCREEN_WIDTH - 32 - 15) / 2
const RECHARGE_OPTIONS = [
{ id: 1, points: '500', price: '$10.00' },
{ id: 2, points: '1,000', price: '$20.00' },
{ id: 3, points: '2,500', price: '$50.00' },
{ id: 4, points: '5,000', price: '$100.00' },
]
const PAYMENT_METHODS = [
{ id: 'alipay', label: '支付宝' },
{ id: 'wechat', label: '微信' },
] as const
export default function ChargePage() {
const router = useRouter()
const insets = useSafeAreaInsets()
const [selectedOption, setSelectedOption] = useState(RECHARGE_OPTIONS[0].id)
const [paymentMethod, setPaymentMethod] = useState<'alipay' | 'wechat'>('alipay')
const balanceRes = useUserBalance()
useEffect(() => {
balanceRes.load()
}, [])
const handlePay = () => {
console.log('支付功能仅在移动端可用')
}
const renderHeader = () => (
router.back()}>
积分充值
)
const renderMyPoints = () => (
我的积分
{balanceRes?.balance}
)
const renderOptions = () => (
选择充值积分：
{RECHARGE_OPTIONS.map((item) => {
const isSelected = selectedOption === item.id
return (
setSelectedOption(item.id)}
>
![]()
{item.points}
只需 {item.price}
)
})}
)
const renderPaymentMethods = () => (
选择付款方式:
{PAYMENT_METHODS.map((method) => {
const isSelected = paymentMethod === method.id
return (
setPaymentMethod(method.id)}
>
{isSelected && }
{method.label}
)
})}
)
const renderBottomBar = () => (
确认充值
已阅读并同意
console.log('Open agreement')}>
付费服务协议
)
return (
{renderHeader()}
{renderMyPoints()}
{renderOptions()}
{renderPaymentMethods()}
{renderBottomBar()}
)
}