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 { observer } from 'mobx-react-lite'
import React, { useEffect, useState } from 'react'
import { Dimensions, Platform, RefreshControl, ScrollView } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { Block, Img, Text, Toast } from '@/@share/components'
import { IOS_UNIVERSAL_LINK, SCHEME } from '@/app.config'
import { handleError } from '@/hooks/data/use-error'
import { userBalanceStore } from '@/stores'
import { openUrl } from '@/utils'
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: '￥70' },
{ id: 2, points: '1,000', price: '￥140' },
{ id: 3, points: '2,500', price: '￥350' },
{ id: 4, points: '5,000', price: '￥700' },
]
const PAYMENT_METHODS = [
{ id: 'alipay', label: '支付宝' },
// { id: 'wechat', label: '微信' },
] as const
const ChargePage = observer(function ChargePage() {
const router = useRouter()
const insets = useSafeAreaInsets()
const [selectedOption, setSelectedOption] = useState(RECHARGE_OPTIONS[0].id)
const [paymentMethod, setPaymentMethod] = useState<'alipay' | 'wechat'>('alipay')
const [refreshing, setRefreshing] = useState(false)
// 使用MobX Store中的余额信息
const { balance } = userBalanceStore
const selectedRecharge = RECHARGE_OPTIONS.find((option) => option.id === selectedOption)
const onRefresh = async () => {
setRefreshing(true)
await userBalanceStore.load(true) // 强制刷新余额
setRefreshing(false)
}
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 () => {
// Toast.show({ title: '支付宝支付暂未开放' })
// return
// 支付宝端支付
// 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') {
if (!selectedRecharge?.points) {
Toast.show({ title: '请选择充值选项' })
return
}
const alipay = root.get(AlipayController)
const { data, error } = await handleError(
async () =>
await alipay.preRecharge({
credits: 2,
// credits: parseInt(selectedRecharge?.points.replace(/,/g, '')),
}),
)
console.log('error----------', error)
console.log('data-----------', data)
if (error || !data?.orderStr) {
Toast.show({ title: error?.message || '创建订单失败' })
return
}
const resule = await Alipay.pay(data.orderStr)
console.log('alipay:resule-->>>', resule)
// 支付完成后显示积分到账loading
if (resule.resultStatus === '9000') {
// 支付成功，立即刷新余额并重启轮询
userBalanceStore.load(true)
userBalanceStore.restartPolling() // 重启轮询以更频繁地检查余额变化
Toast.show({ title: '支付成功！积分正在到账中...' })
} else {
Toast.show({ title: '支付取消或失败' })
userBalanceStore.load(true) // 刷新余额状态
}
} else if (paymentMethod === 'wechat') {
}
}
const openWeb = () => {
// webview 显示异常
// router.push({
// pathname: '/webview',
// params: {
// // url: 'http://baidu.com',
// url: 'https://mixvideo.bowong.cc/terms',
// title: '付费服务协议',
// },
// })
openUrl('https://mixvideo.bowong.cc/terms', '付费服务协议')
}
useEffect(() => {
userBalanceStore.load(true) // 页面加载时获取余额
initPay()
}, [])
const renderHeader = () => (
router.back()}>
积分充值
)
const renderMyPoints = () => (
我的积分
{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 = () => (
确认充值
已阅读并同意
付费服务协议
)
return (
{renderHeader()}
}
>
{renderMyPoints()}
{renderOptions()}
{renderPaymentMethods()}
{renderBottomBar()}
)
})
export default ChargePage