efunbox-mobile-8/pages/components/MainPage.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import {
	Platform,
	StyleSheet,
	Text,
	View,
	Image,
	FlatList,
	TouchableOpacity,
	ImageBackground,
	TextInput,
	Button,
	ViewPagerAndroid,
	DeviceEventEmitter,
	SectionList,
	Animated,
	TouchableHighlight
} from 'react-native';
import Swiper from 'react-native-swiper';
import AndroidUtil from '../../util/AndroidUtil';
import BasePage from '../BasePage';
import Header from './Header';
import MySwiper from './Swiper';
import Dimensions from '../utils/dimensions';
import TopicTitle from './TopicTitle';
import ScrollRow from './ScrollRow';
import LibraryUrl from '../services/library';
import { ScrollView } from 'react-native-gesture-handler';

export default class MainPage extends BasePage {
	constructor(props) {
		super(props);
	}

	updateRender(index) {
		// LibraryUrl.getIndex(index).success(res => {

		// }).fail(() => {
		//   alert(1111)
		// })
		LibraryUrl.getIndex(index).then((res) => {
			console.log(res);
			const monthTopicTitle = res.data.monthTopic.zone.title;
			const monthTopicScroll = res.data.monthTopic.zoneCourseVOList;
			const schedule = res.data.schedule;
			const hotCourse = res.data.hotCourse;
			const recommend = res.data.recommend; //全部课程
			const banner = res.data.banner; //轮播图
			// const listData = [];
			// for(let item in res.data){
			//   console.log(item)
			//   listData.push(1)
			// }
			// console.log(typeof listData)
			// console.log(listData)
			// console.log(listData.length)
			let scheduleWeek = schedule[0].featureMap ? schedule[0].featureMap.weekSeq : '1';
			this.setState({
				// listData: listData.length? listData : [],
				hotCourse,
				monthTopicTitle,
				monthTopicScroll,
				schedule,
				recommend,
				banner,
				scheduleWeek
			});
			console.log(this.state.banner);
		});
	}

	state = {
		grade: '大学',
		text: '小伙子',
		ifGradeMenuShow: false,
		fadeAnim: new Animated.Value(0),
		schedule: [],
		recommend: [],
		listData: [],
		banner: [],
		currentSwitch: { title: '小学', param: 'PRIMARY_SCHOOL' },
		switchList: [
			// { title: '幼儿园', param: 'KINDERGARTEN' },
			{ title: '学前', param: 'PRESCHOOL' },
			{ title: '小学', param: 'PRIMARY_SCHOOL' },
			{ title: '中学', param: 'MIDDLE_SCHOOL' }
		],
		scheduleWeek: '1'
	};

	renderBtn = (item, index) => {
		return (
			// this.state.currentSwitch.param === item.param
			//   ?
			//   null
			//   :
			//   <TouchableOpacity onPress={() => this.switchGrade(index)} key={index} style={index === 1 ? styles.gradeItemMid : styles.gradeItem}>
			//     <Text style={styles.gradeText}>{item.title}</Text>
			//   </TouchableOpacity>
			<TouchableOpacity
				onPress={() => this.switchGrade(index)}
				key={index}
				style={index === 1 ? styles.gradeItemMid : styles.gradeItem}
			>
				<Text style={styles.gradeText}>{item.title}</Text>
			</TouchableOpacity>
		);
	};

	componentWillMount() {
		var index = 0;
		if (this.props.navigation.state.params == undefined) {
			index = 0;
		} else {
			index = this.props.navigation.state.params.index;
		}
		this.switchGrade(index);
	}
	componentDidMount() {
		// this.updateRender('PRIMARY_SCHOOL');
	}

	switchGrade = (index) => {
		const obj = this.state.switchList[index];
		this.setState({
			currentSwitch: obj
		});
		this.hideGradeMenu();
		// if (obj.param === this.state.currentSwitch.param) return
		this.updateRender(obj.param);
	};

	render() {
		// const abc =Object.keys(this.state.data).map((k)=>this.state.data[k])
		return (
			<View style={{ flex: 1 }} onPress={this.hideGradeMenu}>
				{/* <SectionList     sectionList组件 性能好 但是针对当前布局是否有要用的必要，以后可能迭代
          sections={this.state.listData}
          renderItem={({ item }) => {
            return this.loadFlatItem(item);
          }}
          keyExtractor={(item, index) => item.key.toString()}
          ListHeaderComponent={() => this.headerorfooterComponent()}
          renderSectionHeader={this.sectionTitle}
          onScroll={this.hideGradeMenu}
        /> */}
				<ScrollView
					style={{ height: Dimensions.height }}
					showsVerticalScrollIndicator={false}
					onScroll={this.hideGradeMenu}
				>
					{this.headerorfooterComponent()}
					{this.getSwiperElement()}
					{this.getScheduleElement()}
					{this.getMonthTopic()}
					{this.getHotCourse()}
					{this.getAllCourses()}
				</ScrollView>

				{this.state.ifGradeMenuShow ? (
					<Animated.View
						style={{
							...styles.callUpGrade,
							opacity: this.state.fadeAnim
						}}
					>
						{this.state.switchList.map((item, index) => this.renderBtn(item, index))}
					</Animated.View>
				) : null}
			</View>
		);
	}

	// 头部组件
	headerorfooterComponent() {
		return (
			<View>
				<Header
					uri="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1295208965,3056573814&amp;fm=26&amp;gp=0.jpg"
					width={400}
					height={150}
					username="卡通笨笨熊"
					flowerNumber="123234"
					onPress={() => this.toNextPage('userCenter')}
				/>
				{/* 搜索区域 */}
				<View style={styles.searchSection}>
					<TextInput
						style={styles.searchBox}
						onChangeText={(text) => this.setState({ text })}
						value={this.state.text}
					/>
					<TouchableOpacity onPress={this.tabCallOutHandler}>
						<View style={styles.rightBtn}>
							<Image source={require('../images/common/switch.png')} style={styles.rightBtnIcon} />
							<Text style={styles.rightBtnText}>{this.state.currentSwitch.title}</Text>
						</View>
					</TouchableOpacity>
				</View>
			</View>
		);
	}
	// 渲染轮播图
	getSwiperElement() {
		return (
			<View
				style={{
					height: Dimensions.getHeight(163),
					flex: 1,
					justifyContent: 'center',
					alignItems: 'center',
					flexDirection: 'row'
				}}
			>
				<View
					style={{
						width: Dimensions.getWidth(358),
						height: Dimensions.getHeight(153),
						justifyContent: 'center',
						overflow: 'hidden'
					}}
				>
					<MySwiper autoplay={true} loop={true} ifShowMiddle={true} data={this.state.banner} />
				</View>
			</View>
		);
	}
	// 渲染课程表
	getScheduleElement() {
		let renderScheduleItem = (item, index) => {
			const id = item.boothId;
			return (
				<TouchableOpacity
					style={{
						width: Dimensions.getWidth(172),
						height: Dimensions.getHeight(86),
						marginRight: 12
					}}
					onPress={() => this.toNextPage('SchedulePage', { id })}
					key={index}
					activeOpacity={1}
				>
					<ImageBackground
						source={{
							uri: item.boothContent
						}}
						key={index}
						style={{
							flex: 1,
							// justifyContent: "center",
							// alignItems: "center",
							borderRadius: 10
						}}
					>
						{item.operationContent === 'KINDERGARTE' ? null : (
							<View
								style={{
									width: Dimensions.getWidth(90),
									height: Dimensions.getHeight(45),
									marginLeft: Dimensions.getWidth(15),
									marginTop: Dimensions.getHeight(15),

									justifyContent: 'center',
									alignItems: 'center'
								}}
							>
								<Text
									style={{
										color: '#fff',
										fontSize: 18
									}}
								>
									{item.title}
								</Text>
								<Text
									style={{
										color: '#fff',
										fontSize: 18
									}}
								>
									{item.summary}
								</Text>
							</View>
						)}
					</ImageBackground>
				</TouchableOpacity>
			);
		};
		return (
			<View
				style={{
					flex: 1,
					flexDirection: 'column',
					height: Dimensions.getHeight(160)
				}}
			>
				<TopicTitle title={`课程表：第${this.state.scheduleWeek}周`} ifTubeShow={true} />
				{/* <View
          style={{
            flex: 2,
            flexDirection: "row",
            alignItems: 'center',
            paddingLeft: 10
          }}
        >
          {this.state.schedule.map((item, index) => renderScheduleItem(item, index))}
        </View> */}
				<FlatList
					data={this.state.schedule}
					horizontal={true}
					style={{ paddingLeft: '3.2%' }}
					renderItem={({ item, index }) => renderScheduleItem(item, index)}
					keyExtractor={(item, index) => index.toString()}
					showsHorizontalScrollIndicator={false}
				/>
			</View>
		);
	}
	// 渲染月主题
	getMonthTopic() {
		return (
			<View
				style={{
					flex: 1,
					height: 225
				}}
			>
				<TopicTitle title={this.state.monthTopicTitle} summary={'每天30分钟'} ifTubeShow={true} />
				<ScrollRow
					itemWidth={352}
					itemHeight={153}
					nav={this.props.navigation.navigate}
					data={this.state.monthTopicScroll}
				/>
			</View>
		);
	}
	// 渲染热门课程
	getHotCourse() {
		return (
			<View
				style={{
					flex: 1,
					height: 220
				}}
			>
				<TopicTitle title={'热门课程'} ifTubeShow={true} />
				<ScrollRow
					itemWidth={106}
					itemHeight={150}
					nav={this.props.navigation.navigate}
					data={this.state.hotCourse}
				/>
			</View>
		);
	}
	// 渲染全部课程
	getAllCourses() {
		return (
			<View>
				{this.state.recommend.map((item, index) => {
					return (
						<View
							style={{
								flex: 1,
								height: 240
							}}
							key={index}
						>
							{index === 0 ? null : (
								<View style={{ width: Dimensions.width, height: 4, backgroundColor: '#f0f1f5' }} />
							)}
							<TopicTitle title={item.zone.title} />
							<ScrollRow
								itemWidth={106}
								itemHeight={150}
								nav={this.props.navigation.navigate}
								data={item.zoneCourseVOList}
							/>
						</View>
					);
				})}
			</View>
		);
	}
	// 渲染每一个块儿  sectionList组件的data，没有用到，以后可能会用
	loadFlatItem(data) {
		switch (data.title) {
			// 轮播图
			case 'banner':
				return this.getSwiperElement();
				break;
			// 课程表
			case 'schedule':
				return this.getScheduleElement();
				break;
			// 大图主题
			case 'monthTopic':
				return this.getMonthTopic();
				break;
			// 热门课程
			case 'hotCourse':
				return this.getHotCourse();
				break;
			case 'recommend':
				return this.getAllCourses();
				break;
			default:
				break;
		}
	}
	// 渲染每一个section的title  sectionList组件的data，没有用到，以后可能会用
	sectionTitle = (info) => {
		switch (info.section.title) {
			case 'operation':
				return (
					<View
						style={{
							width: Dimensions.width,
							height: 10,
							backgroundColor: '#f0f1f5'
						}}
					/>
				);
				break;
			case 'courses':
				return <TopicTitle title={'全部课程'} tubeColor={'#7d9fff'} background={'#f0f1f5'} ifTubeShow={true} />;
				break;
			default:
				break;
		}
	};

	// 点击呼出学龄菜单
	tabCallOutHandler = () => {
		this.setState(
			{
				ifGradeMenuShow: !this.state.ifGradeMenuShow
			},
			() => {
				Animated.timing(this.state.fadeAnim, {
					toValue: this.state.ifGradeMenuShow ? 1 : 0,
					duration: 300
				}).start();
			}
		);
	};

	// 如果切换学龄在显示状态，那么在它失去焦点时将它隐藏
	hideGradeMenu = () => {
		if (this.state.ifGradeMenuShow) {
			this.setState({
				ifGradeMenuShow: false
			});
		}
	};
}

const styles = StyleSheet.create({
	title_text: {
		justifyContent: 'center',
		alignItems: 'center',
		color: 'red',
		fontSize: 30,
		textAlign: 'center',
		marginTop: 30,
		marginBottom: 50
	},
	/* 搜索区域 */
	searchSection: {
		flex: 1,
		width: Dimensions.width,
		height: Dimensions.getHeight(60),
		flexDirection: 'row',
		alignItems: 'center',
		backgroundColor: '#f0f1f5',
		justifyContent: 'space-around',
		position: 'relative'
	},
	searchBox: {
		width: Dimensions.getWidth(232),
		height: Dimensions.getHeight(40),
		backgroundColor: '#fff',
		borderRadius: 20
	},
	rightBtn: {
		width: Dimensions.getWidth(113),
		height: Dimensions.getHeight(40),
		backgroundColor: '#fff',
		borderRadius: 20,
		alignItems: 'center',
		justifyContent: 'center',
		justifyContent: 'space-around',
		flexDirection: 'row',
		paddingLeft: 20,
		paddingRight: 10
	},
	rightBtnIcon: {
		width: Dimensions.getWidth(23),
		height: Dimensions.getHeight(23)
	},
	rightBtnText: {
		color: '#151515',
		fontSize: 18
	},
	callUpGrade: {
		width: 113,
		height: 120,
		borderRadius: 20,
		position: 'absolute',
		right: 9,
		top: 125,
		zIndex: 999,
		elevation: 999,
		backgroundColor: '#fff',
		flexDirection: 'column'
	},
	gradeItem: {
		zIndex: 999,
		flex: 1,
		alignItems: 'center',
		justifyContent: 'center'
	},
	gradeItemMid: {
		zIndex: 999,
		flex: 1,
		alignItems: 'center',
		justifyContent: 'center',
		borderTopWidth: 1,
		borderBottomWidth: 1,
		borderColor: '#f0f1f5'
	},
	gradeText: {
		color: '#151515',
		fontSize: 18
	}
});

const sectionData = [
	{
		title: 'swiper',
		data: [
			{
				//轮播
				key: 111,
				typea: 1,
				text: '第一种类型'
			},
			{
				//只有一个标题下面两个图片
				key: 222,
				typea: 2,
				item: {
					item_type: 1,
					title: '课程表：第一周',
					icon_item: [
						{
							icon:
								'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg',
							name: '第一张图片文字'
						},
						{
							icon:
								'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg',
							name: '第二张图片文字'
						}
					]
				}
			}
		]
	},
	{
		title: 'operation',
		data: [
			{
				//一个标题，大长图
				key: 444,
				typea: 3,
				title: '五月主题：五一启程，去看看不同世界',
				text: '每天30分钟，玩学两不误',
				icon_item: [
					{
						icon:
							'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg',
						name: '第一张图片文字'
					},
					{
						icon:
							'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg',
						name: '第二张图片文字'
					},
					{
						icon:
							'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg',
						name: '第三张图片文字'
					},
					{
						icon:
							'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg',
						name: '第四张图片文字'
					},
					{
						icon:
							'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg',
						name: '第五张图片文字'
					}
				]
			},
			{
				key: 555,
				typea: 4,
				title: '热门课程',
				text: 'text',
				mask: false,
				icon_item: [
					{
						icon:
							'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg',
						name: '第一张图片文字'
					},
					{
						icon:
							'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg',
						name: '第二张图片文字'
					},
					{
						icon:
							'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg',
						name: '第三张图片文字'
					},
					{
						icon:
							'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg',
						name: '第四张图片文字'
					},
					{
						icon:
							'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg',
						name: '第五张图片文字'
					}
				]
			}
		]
	},
	{
		title: 'courses',
		data: [
			{
				//一个标题，大长图
				key: 444,
				typea: 5,
				title: '五月主题：五一启程，去看看不同世界',
				text: '每天30分钟，玩学两不误',
				icon_item: [
					{
						icon:
							'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg',
						name: '第一张图片文字'
					},
					{
						icon:
							'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg',
						name: '第二张图片文字'
					},
					{
						icon:
							'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg',
						name: '第三张图片文字'
					},
					{
						icon:
							'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg',
						name: '第四张图片文字'
					},
					{
						icon:
							'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg',
						name: '第五张图片文字'
					}
				]
			},
			{
				key: 555,
				typea: 5,
				title: '热门课程',
				text: 'text',
				mask: false,
				icon_item: [
					{
						icon:
							'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg',
						name: '第一张图片文字'
					},
					{
						icon:
							'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg',
						name: '第二张图片文字'
					},
					{
						icon:
							'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg',
						name: '第三张图片文字'
					},
					{
						icon:
							'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg',
						name: '第四张图片文字'
					},
					{
						icon:
							'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg',
						name: '第五张图片文字'
					}
				]
			}
		]
	}
];