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);
  }

  componentDidMount() {
    this.updateRender('PRIMARY_SCHOOL')
  }

  updateRender(index) {
    LibraryUrl.getIndex(index).success(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)
    }).fail(() => {
      alert(1111)
    })
  }

  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>
    )
  }

  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' }}></View>
              }
              <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: "第五张图片文字"
        }
      ]
    },]
  }
]