import { Ionicons } from '@expo/vector-icons'
import { root } from '@repo/core'
import { AlipayController } from '@repo/sdk'
import { LinearGradient } from 'expo-linear-gradient'
import Alipay from 'expo-native-alipay'
import { Stack, useRouter } from 'expo-router'
import ExpoWeChat from 'expo-wechat'
import React, { useEffect, useState } from 'react'
import { Dimensions, Platform, ScrollView } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { Block, Img, Text } from '@/@share/components'
import { IOS_UNIVERSAL_LINK, SCHEME } from '@/app.constants'
import { useUserBalance } from '@/hooks/core'
import { useError } from '@/hooks/data/use-error'
import { cn } from '@/utils/cn'
const { width: SCREEN_WIDTH } = Dimensions.get('window')
const OPTION_WIDTH = (SCREEN_WIDTH - 32 - 15) / 2 // 32px padding, 15px gap
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()
console.log('balanceRes-------', balanceRes)
const selectedRecharge = RECHARGE_OPTIONS.find((option) => option.id === selectedOption)
const initPay = async () => {
// 设置支付宝回调 URL Scheme（使用 App 的统一 scheme）
if (Platform.OS === 'ios') {
Alipay.setAlipayScheme(SCHEME)
} else {
Alipay.setAlipaySandbox(true) // 开启沙箱模式，测试环境使用
}
console.log('-------alipay version:', await Alipay.getVersion())
const wechatAppId = 'wx940e1ed91a5c303c'
const result = await ExpoWeChat.registerApp(wechatAppId, IOS_UNIVERSAL_LINK)
console.log('-------wechat', result)
}
const handlePay = async () => {
// 支付宝端支付
// payInfo 是后台拼接好的支付参数
// return_url=
// const payInfo =
// 'alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_id=2021001172656340&biz_content=%7B%22out_trade_no%22%3A%221111112222222%22%2C%22total_amount%22%3A%220.01%22%2C%22subject%22%3A%221234%22%2C%22product_code%22%3A%22QUICK_MSECURITY_PAY%22%7D&charset=UTF-8&format=json&method=alipay.trade.app.pay¬ify_url=http%3A%2F%2Fane.boshu.ltd%2Fowner%2Fpay%2Fapi%2FownerPay%2Fcallback&sign=oUQmGtkv8mrhJ0YwHl9%2FfxMcoLACWuSFKiMTC4Id8nc%2FZVvDQ6MLQq5hhtEN03Qn1%2BAtzTAaofE8nNixdroxOek2l5YtOAcYcXVYlJIyogN%2B22erN2NpDTWJ7tQTKgYFDJLRiG0DZJaxfADhUUF6UR9kdA8omoXKLDlP17ZPUs5Jr4aKv5HJtH5C53ui7PbmyWYg934L4UDC2F%2F9pPQlRwwDeE1SAaV3HW9Dt83kK52o8%2FlChXdotbFdAvH0d4qYGhpEYU5sepj9xiOMyL9aC4pMXW9INYLLGbvtqtlRchZTAfH5yji6nqqQm9KKMmcVrWdBDLyjFVNpejq1UjbJBw%3D%3D&sign_type=RSA2×tamp=2020-07-09+12%3A16%3A16&version=1.0'
if (paymentMethod === 'alipay') {
console.log('handlePay-----------alipay')
const alipay = root.get(AlipayController)
const { data, error } = await useError(
async () =>
await alipay.appPay({
subject: '2',
totalAmount: selectedRecharge ? selectedRecharge.price.replace('$', '') : '0.01',
body: '',
outTradeNo: '2' + Date.now(),
credits: 1,
}),
)
console.log('error----------', error)
console.log('data-----------', data)
// const payInfo =
// 'alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_id=9021000158673972&biz_content=%7B%22out_trade_no%22%3A%221111112222222%22%2C%22total_amount%22%3A%220.01%22%2C%22subject%22%3A%221234%22%2C%22product_code%22%3A%22QUICK_MSECURITY_PAY%22%7D&charset=UTF-8&format=json&method=alipay.trade.app.pay¬ify_url=http%3A%2F%2Fane.boshu.ltd%2Fowner%2Fpay%2Fapi%2FownerPay%2Fcallback&sign=oUQmGtkv8mrhJ0YwHl9%2FfxMcoLACWuSFKiMTC4Id8nc%2FZVvDQ6MLQq5hhtEN03Qn1%2BAtzTAaofE8nNixdroxOek2l5YtOAcYcXVYlJIyogN%2B22erN2NpDTWJ7tQTKgYFDJLRiG0DZJaxfADhUUF6UR9kdA8omoXKLDlP17ZPUs5Jr4aKv5HJtH5C53ui7PbmyWYg934L4UDC2F%2F9pPQlRwwDeE1SAaV3HW9Dt83kK52o8%2FlChXdotbFdAvH0d4qYGhpEYU5sepj9xiOMyL9aC4pMXW9INYLLGbvtqtlRchZTAfH5yji6nqqQm9KKMmcVrWdBDLyjFVNpejq1UjbJBw%3D%3D&sign_type=RSA2×tamp=2020-07-09+12%3A16%3A16&version=1.0'
const resule = await Alipay.pay(data.orderStr)
console.log('alipay:resule-->>>', resule)
balanceRes.load()
} else if (paymentMethod === 'wechat') {
}
}
useEffect(() => {
balanceRes.load()
initPay()
}, [])
const renderHeader = () => (
router.back()}>
积分充值
)
const renderMyPoints = () => (
我的积分
{balanceRes?.balance}
)
const renderOptions = () => (
选择充值积分：
{RECHARGE_OPTIONS.map((item) => {
const isSelected = selectedOption === item.id
return (
setSelectedOption(item.id)}
>
![]()
{/* Flash Icon */}
{/* Points */}
{item.points}
{/* Price Button */}
只需 {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()}
)
}