index.tsx 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. import { useRouter } from 'expo-router';
  2. import React, { useEffect, useState } from 'react';
  3. import {
  4. ImageBackground,
  5. ScrollView,
  6. StatusBar,
  7. StyleSheet,
  8. Text,
  9. TouchableOpacity,
  10. View,
  11. } from 'react-native';
  12. import { useSafeAreaInsets } from 'react-native-safe-area-context';
  13. import { Images } from '@/constants/images';
  14. import { getDateTimeScope, getRoomTypePermission } from '@/services/weal';
  15. export default function WealIndexScreen() {
  16. const router = useRouter();
  17. const insets = useSafeAreaInsets();
  18. const [showSection, setShowSection] = useState(false);
  19. const [startTime, setStartTime] = useState('');
  20. const [endTime, setEndTime] = useState('');
  21. const [wishSwitch, setWishSwitch] = useState(false);
  22. const [roomSwitch, setRoomSwitch] = useState(false);
  23. useEffect(() => {
  24. loadConfig();
  25. }, []);
  26. const loadConfig = async () => {
  27. try {
  28. // 获取时间范围
  29. const timeRes = await getDateTimeScope();
  30. if (timeRes && timeRes.startTime && timeRes.endTime) {
  31. setStartTime(timeRes.startTime.substring(0, 10));
  32. setEndTime(timeRes.endTime.substring(0, 10));
  33. const now = new Date().getTime();
  34. const start = new Date(timeRes.startTime.replace(/-/g, '/')).getTime();
  35. const end = new Date(timeRes.endTime.replace(/-/g, '/')).getTime();
  36. setShowSection(now >= start && now <= end);
  37. }
  38. // 获取开关配置 (模拟 getParamConfig)
  39. // 原项目是 getParamConfig('wish_on') 和 getParamConfig('roomcost_on')
  40. // 这里假设 getRoomTypePermission 中包含相关信息,或者需要额外的配置接口
  41. const permission = await getRoomTypePermission();
  42. setRoomSwitch(permission?.roomConfig !== 0);
  43. setWishSwitch(true); // 默认开启或根据实际接口调整
  44. } catch (error) {
  45. console.error('加载福利房配置失败:', error);
  46. }
  47. };
  48. const toRouter = (path: string) => {
  49. router.push(path as any);
  50. };
  51. return (
  52. <View style={styles.container}>
  53. <StatusBar barStyle="light-content" />
  54. <ImageBackground source={{ uri: Images.mine.kaixinMineBg }} style={styles.background} resizeMode="cover">
  55. {/* 导航栏 */}
  56. <View style={[styles.nav, { paddingTop: insets.top }]}>
  57. <Text style={styles.navTitle}>福利</Text>
  58. </View>
  59. <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
  60. {/* 头部标题区 */}
  61. <ImageBackground source={{ uri: Images.welfare.wealTitle }} style={styles.head} resizeMode="contain">
  62. <View style={styles.headContent}>
  63. <Text style={styles.headTitle}>限时福利活动</Text>
  64. <Text style={styles.headSub}>限时活动,不定时开放</Text>
  65. </View>
  66. </ImageBackground>
  67. {/* 活动入口列表 */}
  68. {showSection && (
  69. <View style={styles.selectSection}>
  70. {roomSwitch && (
  71. <TouchableOpacity
  72. activeOpacity={0.8}
  73. onPress={() => toRouter('/weal/room')}
  74. style={styles.itemContainer}
  75. >
  76. <ImageBackground source={{ uri: Images.welfare.indexItem1 }} style={styles.item} resizeMode="stretch">
  77. <View style={styles.dateTag}>
  78. <Text style={styles.dateText}>开放时间:{startTime}至{endTime}</Text>
  79. </View>
  80. </ImageBackground>
  81. </TouchableOpacity>
  82. )}
  83. <TouchableOpacity
  84. activeOpacity={0.8}
  85. onPress={() => toRouter('/weal/catchDoll')}
  86. style={styles.itemContainer}
  87. >
  88. <ImageBackground source={{ uri: Images.welfare.indexItem2 }} style={styles.item} resizeMode="stretch">
  89. <View style={styles.dateTag}>
  90. <Text style={styles.dateText}>开放时间:{startTime}至{endTime}</Text>
  91. </View>
  92. </ImageBackground>
  93. </TouchableOpacity>
  94. {wishSwitch && (
  95. <TouchableOpacity
  96. activeOpacity={0.8}
  97. onPress={() => toRouter('/weal/wish')}
  98. style={styles.itemContainer}
  99. >
  100. <ImageBackground source={{ uri: Images.welfare.indexItem3 }} style={styles.item} resizeMode="stretch">
  101. <View style={styles.dateTag}>
  102. <Text style={styles.dateText}>开放时间:{startTime}至{endTime}</Text>
  103. </View>
  104. </ImageBackground>
  105. </TouchableOpacity>
  106. )}
  107. </View>
  108. )}
  109. <View style={{ height: 100 }} />
  110. </ScrollView>
  111. </ImageBackground>
  112. </View>
  113. );
  114. }
  115. const styles = StyleSheet.create({
  116. container: { flex: 1, backgroundColor: '#52504e' },
  117. background: { flex: 1 },
  118. nav: {
  119. height: 80,
  120. justifyContent: 'center',
  121. alignItems: 'center',
  122. zIndex: 100,
  123. },
  124. navTitle: {
  125. fontSize: 16,
  126. fontWeight: 'bold',
  127. color: '#fff',
  128. },
  129. scrollView: { flex: 1 },
  130. head: {
  131. width: '100%',
  132. height: 192, // 385rpx
  133. justifyContent: 'center',
  134. alignItems: 'center',
  135. marginTop: 20,
  136. },
  137. headContent: {
  138. alignItems: 'center',
  139. },
  140. headTitle: {
  141. fontSize: 40, // 80rpx
  142. fontWeight: 'bold',
  143. color: '#FDF685',
  144. textShadowColor: '#E85801',
  145. textShadowOffset: { width: 1, height: 2 },
  146. textShadowRadius: 1,
  147. },
  148. headSub: {
  149. fontSize: 15, // 30rpx
  150. fontWeight: '400',
  151. color: '#E85801',
  152. textShadowColor: '#fff',
  153. textShadowOffset: { width: 1, height: 1 },
  154. textShadowRadius: 1,
  155. marginTop: 5,
  156. },
  157. selectSection: {
  158. width: '100%',
  159. paddingHorizontal: 0,
  160. marginTop: 15,
  161. },
  162. itemContainer: {
  163. width: '100%',
  164. height: 130, // 260rpx
  165. marginBottom: 15,
  166. },
  167. item: {
  168. flex: 1,
  169. position: 'relative',
  170. },
  171. dateTag: {
  172. position: 'absolute',
  173. right: 10,
  174. top: 15,
  175. backgroundColor: '#FFFFFF',
  176. borderRadius: 13,
  177. paddingHorizontal: 10,
  178. paddingVertical: 2,
  179. },
  180. dateText: {
  181. fontSize: 10,
  182. fontWeight: '500',
  183. color: '#000000',
  184. },
  185. });