76 lines
2.1 KiB
TypeScript
76 lines
2.1 KiB
TypeScript
import { View, Button } from '@tarojs/components'
|
|
import { useState, useEffect } from 'react'
|
|
|
|
interface EarningsCardProps {
|
|
availableAmount?: number
|
|
pendingAmount?: number
|
|
onWithdraw?: () => void
|
|
}
|
|
|
|
function EarningsCard({
|
|
availableAmount = 0.00,
|
|
pendingAmount = 0.00,
|
|
onWithdraw
|
|
}: EarningsCardProps) {
|
|
|
|
const handleWithdraw = () => {
|
|
if (onWithdraw) {
|
|
onWithdraw()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<View className="mx-4 mb-4">
|
|
<View
|
|
className="rounded-2xl p-4 relative overflow-hidden"
|
|
style={{
|
|
background: 'linear-gradient(135deg, #8B5CF6 0%, #A855F7 50%, #C084FC 100%)'
|
|
}}
|
|
>
|
|
{/* 装饰性背景元素 */}
|
|
<View
|
|
className="absolute -top-4 -right-4 w-20 h-20 rounded-full opacity-20"
|
|
style={{ backgroundColor: 'rgba(255, 255, 255, 0.2)' }}
|
|
/>
|
|
<View
|
|
className="absolute -bottom-6 -left-6 w-16 h-16 rounded-full opacity-10"
|
|
style={{ backgroundColor: 'rgba(255, 255, 255, 0.2)' }}
|
|
/>
|
|
|
|
<View className="relative z-10">
|
|
{/* 可提现金额 */}
|
|
<View className="mb-4">
|
|
<View className="text-white text-base opacity-90 mb-1">
|
|
可提现 {availableAmount.toFixed(2)} 元
|
|
</View>
|
|
<View className="text-white text-base opacity-90">
|
|
待提现 {pendingAmount.toFixed(2)} 元
|
|
</View>
|
|
</View>
|
|
|
|
{/* 提现按钮 */}
|
|
<View className="flex justify-end">
|
|
<Button
|
|
className="bg-white text-purple-600 px-6 py-2 rounded-full text-sm font-medium border-0"
|
|
style={{
|
|
backgroundColor: 'white',
|
|
color: '#8B5CF6',
|
|
fontSize: '14px',
|
|
fontWeight: '500',
|
|
borderRadius: '20px',
|
|
padding: '8px 24px',
|
|
border: 'none'
|
|
}}
|
|
onClick={handleWithdraw}
|
|
>
|
|
去提现
|
|
</Button>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default EarningsCard
|