This commit is contained in:
imeepos
2026-01-28 16:04:14 +08:00
parent efd4aba8c1
commit ffed84a90c
4 changed files with 339 additions and 60 deletions

View File

@@ -24,6 +24,7 @@ import PointsDrawer from '@/components/drawer/PointsDrawer'
import Dropdown from '@/components/ui/dropdown'
import GradientText from '@/components/GradientText'
import { useMembership } from '@/hooks/use-membership'
import { useActivates } from '@/hooks/use-activates'
// 使用唯一 id 的 PointsIcon避免与其他页面的图标 id 冲突
const MembershipPointsIcon = () => {
@@ -102,6 +103,9 @@ export default function MembershipScreen() {
stripePricingData,
} = useMembership()
// 使用 useActivates hook 获取广告数据
const { load: loadActivates, data: activatesData } = useActivates()
// 映射 API 数据到 UI 格式
const plans: Plan[] = creditPlans.map((plan, index) => ({
@@ -131,14 +135,15 @@ export default function MembershipScreen() {
}
}
// 轮播图相关
const carouselImages = [
require('@/assets/images/membership.png'),
require('@/assets/images/icon.png'),
require('@/assets/images/generate.png'),
]
// 轮播图相关 - 使用动态广告数据
const activities = activatesData?.activities || []
const [currentImageIndex, setCurrentImageIndex] = useState(0)
// 加载广告数据
useEffect(() => {
loadActivates()
}, [])
// 处理订阅按钮点击
const handleSubscribe = async () => {
if (!agreed || !selectedPlan) return
@@ -243,43 +248,55 @@ export default function MembershipScreen() {
showsVerticalScrollIndicator={false}
>
<View style={styles.imageContainer}>
<Carousel
width={screenWidth}
height={screenWidth / 1.1}
data={carouselImages}
renderItem={({ item }) => (
<Image
source={item}
style={[styles.membershipImage, { width: screenWidth, height: screenWidth / 1.1 }]}
contentFit="cover"
{/* 只在有广告数据时显示轮播图 */}
{activities.length > 0 && (
<>
<Carousel
testID="carousel"
width={screenWidth}
height={screenWidth / 1.1}
data={activities}
renderItem={({ item }) => (
<Pressable
onPress={() => router.push(item.link as any)}
style={{ width: screenWidth, height: screenWidth / 1.1 }}
>
<Image
source={{ uri: item.coverUrl }}
style={[styles.membershipImage, { width: screenWidth, height: screenWidth / 1.1 }]}
contentFit="cover"
/>
</Pressable>
)}
autoPlay
autoPlayInterval={2000}
loop
onSnapToItem={(index) => setCurrentImageIndex(index)}
enabled={false}
windowSize={1}
mode="parallax"
/>
)}
autoPlay
autoPlayInterval={2000}
loop
onSnapToItem={(index) => setCurrentImageIndex(index)}
enabled={false}
windowSize={1}
mode="parallax"
/>
<View style={styles.dotsContainer}>
{carouselImages.map((_, index) => (
<View
key={index}
style={[
styles.dot,
index === currentImageIndex && styles.dotActive,
]}
<View style={styles.dotsContainer}>
{activities.map((_, index) => (
<View
key={index}
testID={`dot-${index}`}
style={[
styles.dot,
index === currentImageIndex && styles.dotActive,
]}
/>
))}
</View>
<LinearGradient
colors={['#090A0B00', '#090A0B']}
start={{ x: 0, y: 0 }}
end={{ x: 0, y: 1 }}
style={styles.imageGradient}
pointerEvents="none"
/>
))}
</View>
<LinearGradient
colors={['#090A0B00', '#090A0B']}
start={{ x: 0, y: 0 }}
end={{ x: 0, y: 1 }}
style={styles.imageGradient}
pointerEvents="none"
/>
</>
)}
</View>
{/* 订阅计划标题 */}