comi-logic/expo-popcore-app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: implement user balance management with hooks and store

Browse Source
This commit is contained in:
imeepos
2026-01-26 12:57:21 +08:00
parent 2757b68756
commit 3fd445bb6e
7 changed files with 489 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/(tabs)/my.tsx
View File

@@ -21,6 +21,7 @@ import { signOut } from '@/lib/auth'
import { useTemplateGenerations, type TemplateGeneration } from '@/hooks'
import { MySkeleton } from '@/components/skeleton/MySkeleton'
import { useSession } from '@/lib/auth'
import { useUserBalance } from '@/hooks/use-user-balance'
const { width: screenWidth } = Dimensions.get('window')
const GALLERY_GAP = 2
@@ -38,6 +39,9 @@ export default function My() {
const { t, i18n } = useTranslation()
const [editDrawerVisible, setEditDrawerVisible] = useState(false)
// 获取积分余额
const { balance } = useUserBalance()
// 获取当前登录用户信息
const { data: session } = useSession()
const userName = session?.user?.name || session?.user?.username || '用户'
@@ -133,7 +137,7 @@ export default function My() {
onPress={() => router.push('/membership' as any)}
>
<PointsIcon />
<Text style={styles.pointsPillText}>60</Text>
<Text style={styles.pointsPillText}>{balance}</Text>
</Pressable>
<Dropdown
options={settingsOptions}

8
app/membership.tsx
View File

@@ -22,6 +22,7 @@ import { CheckMarkIcon } from '@/components/icon/checkMark'
import PointsDrawer from '@/components/drawer/PointsDrawer'
import Dropdown from '@/components/ui/dropdown'
import GradientText from '@/components/GradientText'
import { useUserBalance } from '@/hooks/use-user-balance'
// 使用唯一 id 的 PointsIcon，避免与其他页面的图标 id 冲突
const MembershipPointsIcon = () => {
@@ -70,6 +71,9 @@ export default function MembershipScreen() {
const { t } = useTranslation()
// 获取积分余额
const { balance } = useUserBalance()
// 订阅计划数据（使用国际化）
const plans: Plan[] = [
{
@@ -174,7 +178,7 @@ export default function MembershipScreen() {
>
<Text style={styles.pointsLabel}>{t('membership.myPoints')}</Text>
<MembershipPointsIcon />
<Text style={styles.pointsValue}>60</Text>
<Text style={styles.pointsValue}>{balance}</Text>
</Pressable>
<View style={styles.settingsButtonContainer}>
<Dropdown
@@ -419,7 +423,7 @@ export default function MembershipScreen() {
<PointsDrawer
visible={pointsDrawerVisible}
onClose={() => setPointsDrawerVisible(false)}
totalPoints={60}
totalPoints={balance}
subscriptionPoints={0}
topUpPoints={0}
/>

186
components/drawer/PointsDrawer.tsx
View File

@@ -3,26 +3,16 @@ import {
View,
Text,
StyleSheet,
ScrollView,
Pressable,
useWindowDimensions,
} from 'react-native'
import { LinearGradient } from 'expo-linear-gradient'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { useTranslation } from 'react-i18next'
import BottomSheet, { BottomSheetView, BottomSheetBackdrop, BottomSheetScrollView } from '@gorhom/bottom-sheet'
import BottomSheet, { BottomSheetView, BottomSheetBackdrop } from '@gorhom/bottom-sheet'
import { CloseIcon } from '@/components/icon'
import TopUpDrawer, { TopUpOption } from '@/components/drawer/TopUpDrawer'
export type PointsTabType = 'all' | 'consume' | 'obtain'
export interface PointsTransaction {
id: string
title: string
date: string
points: number // 正数表示获得，负数表示消耗
}
export interface PointsDrawerProps {
/**
* 是否显示抽屉
@@ -44,28 +34,21 @@ export interface PointsDrawerProps {
* 额外充值积分
*/
topUpPoints?: number
/**
* 交易记录列表
*/
transactions?: PointsTransaction[]
}
export default function PointsDrawer({
visible,
onClose,
totalPoints = 60,
totalPoints = 0,
subscriptionPoints = 0,
topUpPoints = 0,
transactions = [],
}: PointsDrawerProps) {
const { t } = useTranslation()
const { height: screenHeight } = useWindowDimensions()
const insets = useSafeAreaInsets()
const bottomSheetRef = useRef<BottomSheet>(null)
const [pointsTab, setPointsTab] = useState<PointsTabType>('all')
const [topUpDrawerVisible, setTopUpDrawerVisible] = useState(false)
const snapPoints = useMemo(() => [screenHeight * 0.85], [screenHeight])
const snapPoints = useMemo(() => [380], [])
useEffect(() => {
if (visible) {
@@ -93,40 +76,6 @@ export default function PointsDrawer({
[]
)
// 标签页配置
const tabOptions: Array<{ value: PointsTabType; label: string }> = [
{ value: 'all', label: t('pointsDrawer.all') },
{ value: 'consume', label: t('pointsDrawer.consume') },
{ value: 'obtain', label: t('pointsDrawer.obtain') },
]
// 根据标签页过滤交易记录
const filteredTransactions = transactions.filter((transaction) => {
if (pointsTab === 'all') return true
if (pointsTab === 'consume') return transaction.points < 0
if (pointsTab === 'obtain') return transaction.points > 0
return true
})
// 如果没有提供交易记录，使用示例数据
const displayTransactions =
filteredTransactions.length > 0
? filteredTransactions
: [
{
id: '1',
title: t('pointsDrawer.dailyFreePoints'),
date: '2025年11月28日 10:33',
points: 60,
},
...Array.from({ length: 60 }, (_, i) => ({
id: `example-${i + 2}`,
title: t('pointsDrawer.dailyFreePoints'),
date: '2025年11月28日 10:33',
points: -60,
})),
]
return (
<BottomSheet
ref={bottomSheetRef}
@@ -169,57 +118,6 @@ export default function PointsDrawer({
</View>
</View>
{/* 标签页 */}
<View style={styles.tabs}>
{tabOptions.map((tab) => {
const isActive = pointsTab === tab.value
return (
<Pressable
key={tab.value}
style={[styles.tab]}
onPress={() => setPointsTab(tab.value)}
>
<View style={styles.tabContent}>
{isActive && (
<LinearGradient
colors={['#FF9966', '#FF6699', '#9966FF']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
style={styles.tabGradient}
/>
)}
<Text style={[styles.tabText, isActive && styles.tabTextActive]}>{tab.label}</Text>
</View>
</Pressable>
)
})}
</View>
{/* 交易历史列表 */}
<BottomSheetScrollView
style={styles.list}
contentContainerStyle={styles.listContent}
showsVerticalScrollIndicator={false}
>
{displayTransactions.map((transaction) => (
<View key={transaction.id} style={styles.item}>
<View style={styles.itemLeft}>
<Text style={styles.itemTitle}>{transaction.title}</Text>
<Text style={styles.itemDate}>{transaction.date}</Text>
</View>
<Text
style={[
styles.itemPoints,
transaction.points < 0 && styles.itemPointsNegative,
]}
>
{transaction.points > 0 ? '+' : ''}
{transaction.points}
</Text>
</View>
))}
</BottomSheetScrollView>
{/* 底部按钮 */}
<View style={[styles.footer, { paddingBottom: Math.max(insets.bottom, 16) }]}>
<Pressable
@@ -233,7 +131,6 @@ export default function PointsDrawer({
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
style={styles.subscribeButtonGradient}
>
<Text style={styles.subscribeButtonText}>{t('pointsDrawer.subscribeForPoints')}</Text>
</LinearGradient>
@@ -276,9 +173,6 @@ const styles = StyleSheet.create({
borderTopLeftRadius: 24,
borderTopRightRadius: 24,
},
handleIndicator: {
backgroundColor: '#666666',
},
container: {
flex: 1,
backgroundColor: '#090A0B',
@@ -296,8 +190,6 @@ const styles = StyleSheet.create({
titleContainer: {
paddingLeft: 20,
marginTop: -4,
borderBottomWidth: 1,
borderBottomColor: '#3A3A3A',
},
title: {
color: '#F5F5F5',
@@ -340,77 +232,6 @@ const styles = StyleSheet.create({
backgroundColor: '#3A3A3A',
marginTop: 2,
},
tabs: {
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 16,
marginTop:20,
marginBottom:24,
},
tab: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
tabContent: {
position: 'relative',
alignSelf: 'center',
},
tabGradient: {
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
height: 10,
backgroundColor: '#FF9966',
},
tabText: {
color: '#ABABAB',
fontSize: 14,
textAlign: 'center',
},
tabTextActive: {
color: '#F5F5F5',
fontSize: 14,
textAlign: 'center',
},
list: {
height: 400,
},
listContent: {
paddingBottom: 16,
paddingHorizontal: 16,
},
item: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingVertical: 16,
borderBottomWidth: 1,
borderBottomColor: '#1C1E20',
},
itemLeft: {
flex: 1,
},
itemTitle: {
color: '#F5F5F5',
fontSize: 14,
fontWeight: '500',
marginBottom: 4,
},
itemDate: {
color: '#ABABAB',
fontSize: 12,
fontWeight: '400',
},
itemPoints: {
color: '#4CAF50',
fontSize: 16,
fontWeight: '600',
},
itemPointsNegative: {
color: '#F5F5F5',
},
footer: {
paddingTop: 20,
paddingHorizontal: 16,
@@ -445,4 +266,3 @@ const styles = StyleSheet.create({
fontWeight: '400',
},
})

91
components/drawer/TopUpDrawer.tsx
View File

@@ -4,14 +4,27 @@ import {
Text,
StyleSheet,
Pressable,
useWindowDimensions,
ActivityIndicator,
Platform,
} from 'react-native'
import { LinearGradient } from 'expo-linear-gradient'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { useRouter } from 'expo-router'
import { useTranslation } from 'react-i18next'
import BottomSheet, { BottomSheetView, BottomSheetBackdrop } from '@gorhom/bottom-sheet'
import { root } from '@repo/core'
import { AlipayController } from '@repo/sdk'
import { CloseIcon, CheckIcon, UncheckedIcon, PointsIcon } from '@/components/icon'
import Toast from '@/components/ui/Toast'
import { useUserBalanceStore } from '@/stores/userBalanceStore'
// 动态导入支付宝 SDK（需要安装 expo-native-alipay）
let Alipay: any = null
try {
Alipay = require('expo-native-alipay').default
} catch (e) {
console.warn('expo-native-alipay not installed, payment will not work')
}
export interface TopUpOption {
id: string
@@ -65,6 +78,9 @@ const defaultOptions: TopUpOption[] = [
{ id: '4', points: 10000, price: 20 },
]
// 支付宝回调 scheme（需要与 app.json 中配置一致）
const ALIPAY_SCHEME = 'popcore'
export default function TopUpDrawer({
visible,
onClose,
@@ -82,6 +98,10 @@ export default function TopUpDrawer({
options[0] || null
)
const [agreed, setAgreed] = useState(false)
const [loading, setLoading] = useState(false)
// 获取余额 store 的方法
const { load: loadBalance, restartPolling } = useUserBalanceStore()
const snapPoints = useMemo(() => [420], [])
@@ -119,9 +139,66 @@ export default function TopUpDrawer({
// 如果没有传入标题，使用默认翻译
const displayTitle = topUpTitle || t('topUp.title')
const handleConfirm = () => {
if (selectedOption && agreed) {
// 初始化支付宝 SDK
useEffect(() => {
if (Alipay && Platform.OS === 'ios') {
Alipay.setAlipayScheme(ALIPAY_SCHEME)
}
}, [])
const handleConfirm = async () => {
if (!selectedOption || !agreed) return
// 检查支付宝 SDK 是否可用
if (!Alipay) {
Toast.show(t('topUp.alipayNotInstalled') || '支付宝 SDK 未安装')
return
}
setLoading(true)
try {
// 1. 调用后端 API 创建订单
const alipay = root.get(AlipayController)
const response = await alipay.preRecharge({
credits: selectedOption.points,
})
if (!response?.orderStr) {
Toast.show(t('topUp.createOrderFailed') || '创建订单失败')
setLoading(false)
return
}
// 2. 调用支付宝 SDK 发起支付
const result = await Alipay.pay(response.orderStr)
console.log('Alipay payment result:', result)
// 3. 处理支付结果
if (result.resultStatus === '9000') {
// 支付成功
Toast.show(t('topUp.paymentSuccess') || '支付成功！积分正在到账中...')
// 刷新余额
loadBalance(true)
restartPolling()
// 关闭抽屉
onClose()
// 调用外部回调
onConfirm?.(selectedOption)
} else if (result.resultStatus === '6001') {
// 用户取消
Toast.show(t('topUp.paymentCancelled') || '支付已取消')
} else {
// 支付失败
Toast.show(t('topUp.paymentFailed') || '支付失败，请重试')
}
} catch (err: any) {
console.error('Payment error:', err)
Toast.show(err?.message || t('topUp.paymentError') || '支付出错')
} finally {
setLoading(false)
// 无论成功失败都刷新余额
loadBalance(true)
}
}
@@ -213,7 +290,7 @@ export default function TopUpDrawer({
<Pressable
style={styles.confirmButton}
onPress={handleConfirm}
disabled={!agreed || !selectedOption}
disabled={!agreed || !selectedOption || loading}
>
<LinearGradient
colors={['#FF9966', '#FF6699', '#9966FF']}
@@ -221,10 +298,14 @@ export default function TopUpDrawer({
end={{ x: 1, y: 0 }}
style={[
styles.confirmButtonGradient,
(!agreed || !selectedOption) && styles.confirmButtonDisabled,
(!agreed || !selectedOption || loading) && styles.confirmButtonDisabled,
]}
>
{loading ? (
<ActivityIndicator color="#F5F5F5" size="small" />
) : (
<Text style={styles.confirmButtonText}>{t('topUp.confirm')}</Text>
)}
</LinearGradient>
</Pressable>
<View style={styles.agreementContainer}>

27
hooks/use-user-balance.ts Normal file
View File

@@ -0,0 +1,27 @@
import { useEffect } from 'react'
import { useUserBalanceStore } from '@/stores/userBalanceStore'
/**
* 用户积分余额 Hook
* 提供积分余额的获取和管理功能
*/
export const useUserBalance = () => {
const { balance, loading, error, load, startPolling, stopPolling, deductBalance } = useUserBalanceStore()
// 组件挂载时开始轮询，卸载时停止
useEffect(() => {
startPolling()
return () => {
stopPolling()
}
}, [startPolling, stopPolling])
return {
balance,
loading,
error,
load,
deductBalance,
}
}

162
stores/userBalanceStore.ts Normal file
View File

@@ -0,0 +1,162 @@
import { AppState, type AppStateStatus } from 'react-native'
import { create } from 'zustand'
import { subscription } from '@/lib/auth'
import type { ApiError } from '@/lib/types'
interface UserBalanceState {
balance: number
loading: boolean
error: ApiError | null
lastLoadTime: number
pollingEnabled: boolean
}
interface UserBalanceActions {
load: (force?: boolean) => Promise<void>
setBalance: (balance: number) => void
deductBalance: (amount: number) => void
startPolling: () => void
stopPolling: () => void
restartPolling: () => void
reset: () => void
}
type UserBalanceStore = UserBalanceState & UserBalanceActions
const POLLING_INTERVAL = 60e3 // 60秒轮询一次
const DEBOUNCE_TIME = 5e3 // 5秒防抖
let pollingInterval: ReturnType<typeof setInterval> | null = null
let loadingPromise: Promise<void> | null = null
let appStateSubscription: { remove: () => void } | null = null
export const useUserBalanceStore = create<UserBalanceStore>((set, get) => ({
// State
balance: 0,
loading: false,
error: null,
lastLoadTime: 0,
pollingEnabled: false,
// Actions
load: async (force = false) => {
const state = get()
const now = Date.now()
const timeSinceLastLoad = now - state.lastLoadTime
// 如果不是强制刷新，且距离上次调用少于5秒，则跳过
if (!force && timeSinceLastLoad < DEBOUNCE_TIME) {
console.log('跳过余额加载，距离上次调用时间过短:', timeSinceLastLoad + 'ms')
return
}
// 如果已经在加载中且不是强制刷新，直接返回
if (state.loading && !force) {
console.log('余额加载中，跳过重复请求')
return loadingPromise || undefined
}
set({ lastLoadTime: now, loading: true })
loadingPromise = (async () => {
try {
const { data, error } = await subscription.list()
if (error) {
set({ error, loading: false })
return
}
const meteredSubscriptions = data?.filter((sub) => sub.type === 'metered') || []
const creditBalance = meteredSubscriptions[0]?.creditBalance?.remainingTokenBalance || 0
set({ balance: creditBalance, error: null, loading: false })
} catch (e) {
console.error('加载余额失败:', e)
set({ loading: false })
} finally {
loadingPromise = null
}
})()
return loadingPromise
},
setBalance: (balance: number) => {
set({ balance })
},
deductBalance: (amount: number) => {
set((state) => ({ balance: Math.max(0, state.balance - amount) }))
},
startPolling: () => {
const { stopPolling, load } = get()
// 先清理可能存在的旧轮询状态
stopPolling()
console.log('开始余额轮询，间隔:', POLLING_INTERVAL / 1000, '秒')
set({ pollingEnabled: true })
// 立即执行一次
load(false)
// 设置定时器
pollingInterval = setInterval(() => {
const state = get()
if (state.pollingEnabled) {
load(false)
}
}, POLLING_INTERVAL)
// 设置应用状态监听
if (!appStateSubscription) {
appStateSubscription = AppState.addEventListener('change', (nextAppState: AppStateStatus) => {
const state = get()
if (nextAppState === 'active' && state.pollingEnabled) {
console.log('应用回到前台，重启余额轮询')
get().restartPolling()
} else if (nextAppState === 'background' || nextAppState === 'inactive') {
console.log('应用进入后台，暂停余额轮询')
get().stopPolling()
}
})
}
},
stopPolling: () => {
console.log('停止余额轮询')
set({ pollingEnabled: false })
if (pollingInterval) {
clearInterval(pollingInterval)
pollingInterval = null
}
},
restartPolling: () => {
const { stopPolling, startPolling } = get()
stopPolling()
setTimeout(() => startPolling(), 1000) // 延迟1秒重启
},
reset: () => {
const { stopPolling } = get()
stopPolling()
set({
balance: 0,
loading: false,
error: null,
lastLoadTime: 0,
pollingEnabled: false,
})
// 清理应用状态监听器
if (appStateSubscription) {
appStateSubscription.remove()
appStateSubscription = null
}
},
}))

176
tests/stores/userBalanceStore.test.ts Normal file
View File

@@ -0,0 +1,176 @@
import { act, renderHook } from '@testing-library/react-native'
import { useUserBalanceStore } from '@/stores/userBalanceStore'
import { subscription } from '@/lib/auth'
// Mock subscription API
jest.mock('@/lib/auth', () => ({
subscription: {
list: jest.fn(),
},
}))
// Mock AppState
jest.mock('react-native', () => ({
AppState: {
addEventListener: jest.fn(() => ({ remove: jest.fn() })),
},
}))
describe('userBalanceStore', () => {
beforeEach(() => {
// Reset store state before each test
const { reset } = useUserBalanceStore.getState()
reset()
jest.clearAllMocks()
})
describe('load', () => {
it('should load balance from API', async () => {
const mockData = [
{
type: 'metered',
creditBalance: {
remainingTokenBalance: 1000,
},
},
]
;(subscription.list as jest.Mock).mockResolvedValue({ data: mockData })
const { load } = useUserBalanceStore.getState()
await act(async () => {
await load(true)
})
const { balance } = useUserBalanceStore.getState()
expect(balance).toBe(1000)
})
it('should handle API error', async () => {
const mockError = { message: 'API Error', status: 500, statusText: 'Internal Server Error' }
;(subscription.list as jest.Mock).mockResolvedValue({ error: mockError })
const { load } = useUserBalanceStore.getState()
await act(async () => {
await load(true)
})
const { error } = useUserBalanceStore.getState()
expect(error).toEqual(mockError)
})
it('should debounce requests within 5 seconds', async () => {
const mockData = [
{
type: 'metered',
creditBalance: {
remainingTokenBalance: 500,
},
},
]
;(subscription.list as jest.Mock).mockResolvedValue({ data: mockData })
const { load } = useUserBalanceStore.getState()
// First call
await act(async () => {
await load(false)
})
// Second call within 5 seconds (should be skipped)
await act(async () => {
await load(false)
})
// API should only be called once
expect(subscription.list).toHaveBeenCalledTimes(1)
})
it('should force load when force=true', async () => {
const mockData = [
{
type: 'metered',
creditBalance: {
remainingTokenBalance: 500,
},
},
]
;(subscription.list as jest.Mock).mockResolvedValue({ data: mockData })
const { load } = useUserBalanceStore.getState()
// First call
await act(async () => {
await load(true)
})
// Second call with force=true (should not be skipped)
await act(async () => {
await load(true)
})
// API should be called twice
expect(subscription.list).toHaveBeenCalledTimes(2)
})
})
describe('setBalance', () => {
it('should set balance directly', () => {
const { setBalance } = useUserBalanceStore.getState()
act(() => {
setBalance(2000)
})
const { balance } = useUserBalanceStore.getState()
expect(balance).toBe(2000)
})
})
describe('deductBalance', () => {
it('should deduct balance', () => {
const { setBalance, deductBalance } = useUserBalanceStore.getState()
act(() => {
setBalance(1000)
deductBalance(300)
})
const { balance } = useUserBalanceStore.getState()
expect(balance).toBe(700)
})
it('should not go below zero', () => {
const { setBalance, deductBalance } = useUserBalanceStore.getState()
act(() => {
setBalance(100)
deductBalance(500)
})
const { balance } = useUserBalanceStore.getState()
expect(balance).toBe(0)
})
})
describe('reset', () => {
it('should reset all state', () => {
const { setBalance, reset } = useUserBalanceStore.getState()
act(() => {
setBalance(5000)
})
expect(useUserBalanceStore.getState().balance).toBe(5000)
act(() => {
reset()
})
const state = useUserBalanceStore.getState()
expect(state.balance).toBe(0)
expect(state.loading).toBe(false)
expect(state.error).toBe(null)
})
})
})