154 lines
4.6 KiB
TypeScript
154 lines
4.6 KiB
TypeScript
import { View, StyleSheet } from 'react-native'
|
|
import { Skeleton } from './skeleton'
|
|
|
|
export function MembershipSkeleton() {
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* 顶部导航栏骨架 */}
|
|
<View style={styles.header}>
|
|
<Skeleton width={32} height={32} borderRadius={100} />
|
|
<View style={styles.headerSpacer} />
|
|
<Skeleton width={100} height={32} borderRadius={100} />
|
|
<Skeleton width={32} height={32} borderRadius={100} />
|
|
</View>
|
|
|
|
{/* 订阅计划标题骨架 */}
|
|
<Skeleton width={100} height={32} borderRadius={4} style={styles.sectionTitle} />
|
|
|
|
{/* 订阅计划卡片骨架 */}
|
|
<View style={styles.plansContainer}>
|
|
{[1, 2, 3].map((item) => (
|
|
<View
|
|
key={item}
|
|
style={[
|
|
styles.planCard,
|
|
item > 1 && styles.planCardSpacing,
|
|
]}
|
|
>
|
|
<Skeleton width={60} height={16} borderRadius={4} style={styles.planName} />
|
|
<Skeleton width={80} height={28} borderRadius={4} />
|
|
</View>
|
|
))}
|
|
</View>
|
|
|
|
{/* 积分每月卡片骨架 */}
|
|
<View style={styles.pointsMonthlyContainer}>
|
|
<View style={styles.pointsMonthlyCard}>
|
|
<View style={styles.pointsMonthlyHeader}>
|
|
<Skeleton width={14} height={14} borderRadius={4} />
|
|
<Skeleton width={60} height={16} borderRadius={4} />
|
|
<Skeleton width={50} height={14} borderRadius={4} />
|
|
</View>
|
|
<Skeleton width="100%" height={3} borderRadius={10} style={styles.progressBar} />
|
|
<Skeleton width={120} height={12} borderRadius={4} />
|
|
</View>
|
|
|
|
{/* 功能列表骨架 */}
|
|
{[1, 2, 3, 4, 5].map((item) => (
|
|
<View key={item} style={styles.featureItem}>
|
|
<Skeleton width={12} height={12} borderRadius={4} />
|
|
<Skeleton width="80%" height={14} borderRadius={4} />
|
|
</View>
|
|
))}
|
|
</View>
|
|
|
|
{/* 底部订阅按钮骨架 */}
|
|
<View style={styles.subscribeContainer}>
|
|
<Skeleton width="100%" height={48} borderRadius={12} style={styles.subscribeButton} />
|
|
<View style={styles.agreementContainer}>
|
|
<Skeleton width={12} height={12} borderRadius={4} />
|
|
<Skeleton width={200} height={12} borderRadius={4} />
|
|
</View>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#090A0B',
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 12,
|
|
paddingTop: 7,
|
|
paddingBottom: 20,
|
|
},
|
|
headerSpacer: {
|
|
flex: 1,
|
|
},
|
|
sectionTitle: {
|
|
textAlign: 'center',
|
|
marginBottom: 16,
|
|
alignSelf: 'center',
|
|
},
|
|
plansContainer: {
|
|
flexDirection: 'row',
|
|
paddingHorizontal: 16,
|
|
marginBottom: 16,
|
|
},
|
|
planCard: {
|
|
flex: 1,
|
|
paddingTop: 12,
|
|
paddingBottom: 16,
|
|
paddingHorizontal: 12,
|
|
borderRadius: 12,
|
|
backgroundColor: '#16181B',
|
|
gap: 14,
|
|
},
|
|
planCardSpacing: {
|
|
marginLeft: 12,
|
|
},
|
|
planName: {
|
|
marginBottom: 0,
|
|
},
|
|
pointsMonthlyContainer: {
|
|
marginHorizontal: 16,
|
|
backgroundColor: '#191B1F',
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 12,
|
|
borderRadius: 12,
|
|
marginBottom: 24,
|
|
gap: 12,
|
|
},
|
|
pointsMonthlyCard: {
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 10,
|
|
borderRadius: 10,
|
|
backgroundColor: '#272A30',
|
|
marginBottom: 24,
|
|
gap: 10,
|
|
},
|
|
pointsMonthlyHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
},
|
|
progressBar: {
|
|
marginBottom: 10,
|
|
},
|
|
featureItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 16,
|
|
marginBottom: 12,
|
|
},
|
|
subscribeContainer: {
|
|
paddingTop: 16,
|
|
alignItems: 'center',
|
|
paddingHorizontal: 16,
|
|
gap: 8,
|
|
},
|
|
subscribeButton: {
|
|
marginBottom: 0,
|
|
},
|
|
agreementContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 4,
|
|
},
|
|
})
|
|
|