350 lines
9.2 KiB
TypeScript
350 lines
9.2 KiB
TypeScript
import { TemplateList } from '@/components/templates/template-list';
|
|
import { ThemedText } from '@/components/themed-text';
|
|
import { ThemedView } from '@/components/themed-view';
|
|
import { useAuth } from '@/hooks/use-auth';
|
|
import { getTemplates } from '@/lib/api/templates';
|
|
import { Template } from '@/lib/types/template';
|
|
import { LinearGradient } from 'expo-linear-gradient';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
import { Alert, Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
import { LoginModal } from '@/components/auth/login-modal';
|
|
|
|
export default function HomeScreen() {
|
|
const { isAuthenticated } = useAuth();
|
|
const [templates, setTemplates] = useState<Template[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
const [isLoadingMore, setIsLoadingMore] = useState(false);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [hasMore, setHasMore] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [showLoginModal, setShowLoginModal] = useState(false);
|
|
const pulseAnim = useRef(new Animated.Value(0)).current;
|
|
const bounceAnim = useRef(new Animated.Value(0)).current;
|
|
|
|
const fetchTemplates = useCallback(async (page: number = 1, isRefreshing = false, isLoadMore = false) => {
|
|
if (!isAuthenticated) return;
|
|
|
|
try {
|
|
if (isRefreshing) {
|
|
setRefreshing(true);
|
|
} else if (isLoadMore) {
|
|
setIsLoadingMore(true);
|
|
} else {
|
|
setLoading(true);
|
|
}
|
|
setError(null);
|
|
|
|
const response = await getTemplates({
|
|
page,
|
|
size: 10,
|
|
status: 'RELEASE'
|
|
});
|
|
|
|
if (isRefreshing || page === 1) {
|
|
setTemplates(response.data);
|
|
setCurrentPage(1);
|
|
} else {
|
|
setTemplates(prev => [...prev, ...response.data]);
|
|
setCurrentPage(page);
|
|
}
|
|
|
|
setHasMore(response.pagination.page < response.pagination.totalPages);
|
|
} catch (err: any) {
|
|
console.error('获取模板列表失败:', err);
|
|
setError(err.message || '获取模板列表失败');
|
|
} finally {
|
|
setLoading(false);
|
|
setRefreshing(false);
|
|
setIsLoadingMore(false);
|
|
}
|
|
}, [isAuthenticated]);
|
|
|
|
const loadMore = useCallback(() => {
|
|
if (!isLoadingMore && hasMore && !refreshing) {
|
|
fetchTemplates(currentPage + 1, false, true);
|
|
}
|
|
}, [currentPage, hasMore, isLoadingMore, refreshing, fetchTemplates]);
|
|
|
|
useEffect(() => {
|
|
if (isAuthenticated) {
|
|
fetchTemplates();
|
|
setShowLoginModal(false);
|
|
}
|
|
|
|
Animated.loop(
|
|
Animated.sequence([
|
|
Animated.timing(pulseAnim, {
|
|
toValue: 1,
|
|
duration: 2000,
|
|
useNativeDriver: false,
|
|
}),
|
|
Animated.timing(pulseAnim, {
|
|
toValue: 0,
|
|
duration: 2000,
|
|
useNativeDriver: false,
|
|
}),
|
|
])
|
|
).start();
|
|
|
|
Animated.loop(
|
|
Animated.sequence([
|
|
Animated.timing(bounceAnim, {
|
|
toValue: -10,
|
|
duration: 600,
|
|
useNativeDriver: true,
|
|
}),
|
|
Animated.timing(bounceAnim, {
|
|
toValue: -5,
|
|
duration: 200,
|
|
useNativeDriver: true,
|
|
}),
|
|
Animated.timing(bounceAnim, {
|
|
toValue: 0,
|
|
duration: 600,
|
|
useNativeDriver: true,
|
|
}),
|
|
Animated.timing(bounceAnim, {
|
|
toValue: 0,
|
|
duration: 200,
|
|
useNativeDriver: true,
|
|
}),
|
|
])
|
|
).start();
|
|
}, [isAuthenticated, fetchTemplates, pulseAnim, bounceAnim]);
|
|
|
|
const handleRefresh = useCallback(() => {
|
|
fetchTemplates(1, true, false);
|
|
}, [fetchTemplates]);
|
|
|
|
const handleTemplatePress = (template: Template) => {
|
|
Alert.alert('模板详情', `您选择了: ${template.title}`);
|
|
};
|
|
|
|
const handleVideoChange = (template: Template, index: number) => {
|
|
console.log('视频切换到:', template.title, '索引:', index);
|
|
};
|
|
|
|
if (!isAuthenticated) {
|
|
const scaleAnim = pulseAnim.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: [0.95, 1.05],
|
|
});
|
|
|
|
return (
|
|
<ThemedView style={styles.container}>
|
|
<View style={styles.welcomeContainer}>
|
|
<Animated.View
|
|
style={[
|
|
styles.iconContainer,
|
|
{ transform: [{ scale: scaleAnim }] },
|
|
]}
|
|
>
|
|
<Ionicons name="albums-outline" size={80} color="#007AFF" />
|
|
</Animated.View>
|
|
|
|
<ThemedText type="title" style={styles.welcomeTitle}>
|
|
欢迎使用模板中心
|
|
</ThemedText>
|
|
<ThemedText style={styles.welcomeSubtitle}>
|
|
登录后即可浏览和使用海量精美模板
|
|
</ThemedText>
|
|
|
|
<TouchableOpacity
|
|
style={styles.loginButton}
|
|
onPress={() => setShowLoginModal(true)}
|
|
activeOpacity={0.8}
|
|
>
|
|
<LinearGradient
|
|
colors={['#007AFF', '#0056D2']}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
style={styles.loginButtonGradient}
|
|
>
|
|
<Ionicons name="log-in-outline" size={20} color="#fff" style={styles.loginButtonIcon} />
|
|
<Text style={styles.loginButtonText}>立即登录</Text>
|
|
</LinearGradient>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity style={styles.guestButton} activeOpacity={0.6}>
|
|
<Text style={styles.guestButtonText}>游客浏览</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<LoginModal
|
|
visible={showLoginModal}
|
|
onClose={() => setShowLoginModal(false)}
|
|
/>
|
|
</ThemedView>
|
|
);
|
|
}
|
|
|
|
const shadowOpacity = pulseAnim.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: [0.3, 0.4],
|
|
});
|
|
|
|
return (
|
|
<ThemedView style={styles.container}>
|
|
<Animated.View style={[styles.headerBanner, { shadowOpacity }]}>
|
|
<LinearGradient
|
|
colors={['#ff6b6b', '#ff8e53', '#ff6b35']}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
style={styles.gradientBanner}
|
|
>
|
|
<Text style={styles.bannerText}>
|
|
New User 50% Off Coupon : <Text style={styles.couponText}>NEWUSER</Text>
|
|
</Text>
|
|
<Animated.Text
|
|
style={[
|
|
styles.giftIcon,
|
|
{ transform: [{ translateY: bounceAnim }] },
|
|
]}
|
|
>
|
|
🎁
|
|
</Animated.Text>
|
|
</LinearGradient>
|
|
</Animated.View>
|
|
|
|
<TemplateList
|
|
templates={templates}
|
|
loading={loading}
|
|
refreshing={refreshing}
|
|
isLoadingMore={isLoadingMore}
|
|
hasMore={hasMore}
|
|
onRefresh={handleRefresh}
|
|
onLoadMore={loadMore}
|
|
onTemplatePress={handleTemplatePress}
|
|
onVideoChange={handleVideoChange}
|
|
error={error}
|
|
/>
|
|
|
|
<LoginModal
|
|
visible={showLoginModal}
|
|
onClose={() => setShowLoginModal(false)}
|
|
/>
|
|
</ThemedView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
welcomeContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 40,
|
|
},
|
|
iconContainer: {
|
|
width: 120,
|
|
height: 120,
|
|
borderRadius: 60,
|
|
backgroundColor: 'rgba(0, 122, 255, 0.1)',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginBottom: 24,
|
|
},
|
|
welcomeTitle: {
|
|
fontSize: 28,
|
|
fontWeight: '700',
|
|
marginBottom: 12,
|
|
textAlign: 'center',
|
|
},
|
|
welcomeSubtitle: {
|
|
fontSize: 16,
|
|
textAlign: 'center',
|
|
opacity: 0.7,
|
|
marginBottom: 48,
|
|
lineHeight: 24,
|
|
},
|
|
loginButton: {
|
|
width: '100%',
|
|
height: 56,
|
|
borderRadius: 16,
|
|
overflow: 'hidden',
|
|
elevation: 8,
|
|
shadowColor: '#007AFF',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowRadius: 12,
|
|
shadowOpacity: 0.3,
|
|
},
|
|
loginButtonGradient: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
height: '100%',
|
|
},
|
|
loginButtonIcon: {
|
|
marginRight: 8,
|
|
},
|
|
loginButtonText: {
|
|
color: '#fff',
|
|
fontSize: 17,
|
|
fontWeight: '700',
|
|
},
|
|
guestButton: {
|
|
width: '100%',
|
|
height: 56,
|
|
borderRadius: 16,
|
|
borderWidth: 1.5,
|
|
borderColor: 'rgba(0, 122, 255, 0.3)',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginTop: 12,
|
|
},
|
|
guestButtonText: {
|
|
color: '#007AFF',
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
headerBanner: {
|
|
position: 'absolute',
|
|
top: 16,
|
|
left: '10%',
|
|
right: '10%',
|
|
zIndex: 1000,
|
|
borderRadius: 20,
|
|
shadowColor: '#ff6b6b',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowRadius: 12,
|
|
elevation: 8,
|
|
overflow: 'hidden',
|
|
},
|
|
gradientBanner: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: 4,
|
|
paddingHorizontal: 16,
|
|
position: 'relative',
|
|
},
|
|
bannerText: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
color: '#fff',
|
|
textAlign: 'center',
|
|
},
|
|
couponText: {
|
|
fontWeight: '800',
|
|
fontSize: 14,
|
|
color: '#fff',
|
|
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 2,
|
|
borderRadius: 6,
|
|
marginLeft: 6,
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(255, 255, 255, 0.6)',
|
|
borderStyle: 'dashed',
|
|
},
|
|
giftIcon: {
|
|
position: 'absolute',
|
|
right: 8,
|
|
fontSize: 16,
|
|
},
|
|
});
|