Merge branch 'master' of http://gogs.efunbox.cn/Rorschach/efunbox-mobile-8

pages/CourseDetails.js

@@ -26,18 +26,22 @@ import courseDetails from './services/courseDetails'
 export default class CourseDetails extends Component {
   componentDidMount() {
     const { courseId } = this.props.navigation.state.params;
-    console.log(courseId)
     courseDetails.getCourseDetails(courseId).success(res => {
       console.log('列表',res.data)
+      const courseList = res.data.course;
+      const wareList = res.data.wareList;
       this.setState({
-        courseList: 222
+        courseList,
+        wareList
       })
     });
   }
   state = {
     fullStyle: {},
     lefts: 0,
-    courseList: 111
+    courseList: {},
+    wareList: {},
+    uri: 'http://chimee.org/vod/1.mp4'
   }
   render() {
     return (
@@ -46,16 +50,15 @@ export default class CourseDetails extends Component {
           <View>
             <VideoExplain 
             full={this.full.bind(this)}
-            title={'同步辅导语文一年级下册'}
-            details={'汉字，作为象形文字，是中华文化的载体，本课程从甲骨文开始，让孩子爱上识字爱上文字的美。了解文字…'}
-            uri={'http://chimee.org/vod/1.mp4'}
+            uri={ this.state.uri }
             dataList={ this.state.courseList }
+            ref={view => (this.video = view)} //设置ID
             videoback={this.back.bind(this) } 
             />
           </View>
           <View style={ this.state.fullStyle }>
-            <CourseListRow title={'课件'}></CourseListRow>
-            <CourseListLine title={'课件'}></CourseListLine>
+            <CourseListRow title={'课件'} wareList={ this.state.wareList} changeUri={ this.changeUri.bind(this) }></CourseListRow>
+            {/* <CourseListLine title={'课件'} wareList={ this.state.wareList}></CourseListLine> */}
             <Comment title={ '全部评论' }></Comment>
           </View> 
         </ScrollView>
@@ -84,6 +87,14 @@ export default class CourseDetails extends Component {
     }
 
   }
+  changeUri(uri) {
+    console.log(uri)
+    this.setState({
+      uri
+    })
+    // 开始播放
+    this.video.start();
+  }
 }
 
 const styles = StyleSheet.create({

pages/components/Comment.js

@@ -3,19 +3,31 @@ import {
   StyleSheet,
   Text,
   View,
-  Image
+  Image,
+  TextInput,
+  TouchableOpacity
 } from "react-native";
 
 export default class Comment extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { 
+      text: '',
+      input: false,
+      default: '写评论'
+    };
+  }
   render() {
     return (
       <View style={styles.courseComment}>
         <View style={[styles.padding, styles.title]}>
           <Text style={styles.font}>{this.props.title}</Text>
-          <View style={[ styles.button, styles.center ]}>
-            <Image source={require('../images/courseDetails/comment.png')} style={styles.iconSize} />
-            <Text>写评论</Text>
-          </View>
+          <TouchableOpacity onPress={() => this.comments()}>
+            <View style={[ styles.button, styles.center ]}>
+              <Image source={require('../images/courseDetails/comment.png')} style={styles.iconSize} />
+              <Text>写评论</Text>
+            </View>
+          </TouchableOpacity>
         </View>
         <View style={[ styles.padding ]}>
           <View style={[ styles.title ]}>
@@ -39,9 +51,31 @@ export default class Comment extends Component {
             <Text>爱上识字爱上文字的美，了解文字，幽默风趣的画风，动画识字展示让识字更有趣，跟喜欢。</Text>
           </View>
         </View>
+        {
+            this.state.input ?
+            <View style={[ styles.input, this.state.fullStyle]}>
+            <TextInput
+              style={{height: '100%', borderColor: '#DFDFDF', borderWidth: 1, width: '90%', backgroundColor: '#fff', borderRadius: 6, padding: 0, textAlignVertical: 'top', padding: 10}}
+              onChangeText={(text) => this.setState({text})}
+              value={this.state.text}
+              numberOfLines={7}
+              multiline = {true}
+              autoFocus = {true}
+              defaultValue= {this.state.default}
+            />
+            <Text style={{ color: '#58A8FA', fontSize: 18}}>发送</Text>
+          </View>
+          :
+          null
+        }
       </View>
     );
   }
+  comments() {
+    this.setState({
+      input: true
+    })
+  }
 }
 
 const styles = StyleSheet.create({
@@ -90,8 +124,8 @@ const styles = StyleSheet.create({
     borderRadius: 40
   },
   iconSize: {
-    width: 18,
-    height: 18,
+    width: 20,
+    height: 20,
     marginRight: 10
   },
   reply: {
@@ -110,5 +144,18 @@ const styles = StyleSheet.create({
   },
   color: {
     color: '#518AD1'
+  },
+  input: {
+    width: '100%',
+    height: 124,
+    backgroundColor: '#F9F9F9',
+    paddingLeft: 18,
+    paddingTop: 18,
+    paddingBottom: 18,
+    paddingRight: 24,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end'
   }
 });

pages/components/CourseListRow.js

@@ -21,13 +21,13 @@ export default class CourseListRow extends Component {
       <View style={styles.courseList}>
         <View style={[styles.padding, styles.title]}>
           <Text style={styles.font}>{this.props.title}</Text>
-          <Text style={styles.color}>共28课</Text>
+          <Text style={styles.color}>共{this.props.wareList.length}课</Text>
         </View>
         <View style={{
             flex: 1,
             height: 200,
           }}>
-            <ScrollRow itemWidth={106} itemHeight={150} />
+            <ScrollRow itemWidth={106} itemHeight={150} data={this.props.wareList} type={ true } changeUri={ this.props.changeUri }/>
           </View>
       </View>
     );

pages/components/MainPage.js

@@ -94,13 +94,13 @@ export default class MainPage extends BasePage {
         ?
         null
         :
-        <TouchableOpacity onPress={()=>this.switchGrade(index)} key={index} style={index === 1 ? styles.gradeItemMid : styles.gradeItem}>
+        <TouchableOpacity onPress={() => this.switchGrade(index)} key={index} style={index === 1 ? styles.gradeItemMid : styles.gradeItem}>
           <Text style={styles.gradeText}>{item.title}</Text>
         </TouchableOpacity>
     )
   }
 
-  switchGrade=(index)=>{
+  switchGrade = (index) => {
     const obj = this.state.switchList[index]
     this.setState({
       currentSwitch: obj
@@ -122,7 +122,7 @@ export default class MainPage extends BasePage {
           renderSectionHeader={this.sectionTitle}
           onScroll={this.hideGradeMenu}
         /> */}
-        <ScrollView style={{ height: Dimensions.height }} onScroll={this.hideGradeMenu} >
+        <ScrollView style={{ height: Dimensions.height }} showsVerticalScrollIndicator = {false} onScroll={this.hideGradeMenu} >
           {this.headerorfooterComponent()}
           {this.getSwiperElement()}
           {this.getScheduleElement()}
@@ -203,7 +203,7 @@ export default class MainPage extends BasePage {
     return (
       <View
         style={{
-          height: Dimensions.getDp(163),
+          height: Dimensions.getHeight(163),
           flex: 1,
           justifyContent: "center",
           alignItems: "center",
@@ -213,7 +213,7 @@ export default class MainPage extends BasePage {
         <View
           style={{
             width: Dimensions.getWidth(358),
-            height: Dimensions.getDp(153),
+            height: Dimensions.getHeight(153),
             justifyContent: "center",
             overflow: 'hidden'
           }}
@@ -233,7 +233,11 @@ export default class MainPage extends BasePage {
     let renderScheduleItem = (item, index) => {
       return (
         <TouchableOpacity
-          style={{ width: 172, height: 86, marginRight: 12 }}
+          style={{
+            width: Dimensions.getWidth(172),
+            height: Dimensions.getHeight(86),
+            marginRight: 12
+          }}
           onPress={() => this.toNextPage('SchedulePage')}
           key={index}
           activeOpacity={1}
@@ -259,7 +263,7 @@ export default class MainPage extends BasePage {
         style={{
           flex: 1,
           flexDirection: "column",
-          height: 160,
+          height: Dimensions.getHeight(160),
         }}
       >
         <TopicTitle title={'课程表：第一周'} ifTubeShow={true} />
@@ -419,7 +423,7 @@ const styles = StyleSheet.create({
   searchSection: {
     flex: 1,
     width: Dimensions.width,
-    height: 60,
+    height: Dimensions.getHeight(60),
     flexDirection: 'row',
     alignItems: 'center',
     backgroundColor: '#f0f1f5',
@@ -427,14 +431,14 @@ const styles = StyleSheet.create({
     position: 'relative',
   },
   searchBox: {
-    width: 232,
-    height: 40,
+    width: Dimensions.getWidth(232),
+    height: Dimensions.getHeight(40),
     backgroundColor: '#fff',
     borderRadius: 20
   },
   rightBtn: {
-    width: 113,
-    height: 40,
+    width: Dimensions.getWidth(113),
+    height: Dimensions.getHeight(40),
     backgroundColor: '#fff',
     borderRadius: 20,
     alignItems: 'center',
@@ -445,8 +449,8 @@ const styles = StyleSheet.create({
     paddingRight: 10,
   },
   rightBtnIcon: {
-    width: 14,
-    height: 14
+    width: Dimensions.getWidth(23),
+    height: Dimensions.getHeight(23),
   },
   rightBtnText: {
     color: '#151515',

pages/components/ScheduleFlatItem.js

@@ -12,18 +12,11 @@ import {
   DeviceEventEmitter
 } from "react-native";
 
-/** 因没有图，所以Image先用颜色代替，有图可替换 */
-const instructions = Platform.select({
-  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
-  android:
-    "Double tap R on your keyboard to reload,\n" +
-    "Shake or press menu button for dev menu"
-});
 
-type Props = {};
 var width = Dimensions.get("window").width;
 var height = Dimensions.get("window").height;
-export default class ScheduleFlatItem extends Component<Props> {
+
+export default class ScheduleFlatItem extends Component {
   render() {
     return (
       <TouchableOpacity activeOpacity={1} onPress={this.props.onPress}>
@@ -49,7 +42,7 @@ export default class ScheduleFlatItem extends Component<Props> {
             <View
               style={{
                 flex: 2.5,
-                backgroundColor: this.props.data.typecolor,
+                backgroundColor: this.props.data.subColor,
                 width: "100%",
                 height: "70%",
                 alignItems: "center",
@@ -57,7 +50,7 @@ export default class ScheduleFlatItem extends Component<Props> {
                 borderRadius: 20
               }}
             >
-              <Text style={{ color: "white" }}>{this.props.data.typename}</Text>
+              <Text style={{ color: "white",fontSize: 12, }}>{this.props.data.subTitle}</Text>
             </View>
             <View style={{ flex: 0.2 }} />
             <View
@@ -69,7 +62,7 @@ export default class ScheduleFlatItem extends Component<Props> {
               }}
             >
               <Text style={{ textAlign: "left" }}>
-                {this.props.data.videoname}
+                {this.props.data.title}
               </Text>
             </View>
             <View

pages/components/SchedulePage.js

@@ -30,14 +30,9 @@ import CourseTitle from "./CourseTitle";
 import SharedDialog from "./SharedDialog";
 import ScheduleFlatItem from "./ScheduleFlatItem";
 import CusVideo from "./CusVideo";
-const instructions = Platform.select({
-  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
-  android:
-    "Double tap R on your keyboard to reload,\n" +
-    "Shake or press menu button for dev menu"
-});
+import ScheduleUrl from '../services/schedule'
+
 
-type Props = {};
 export default class SchedulePage extends BasePage {
   constructor(props) {
     super(props);
@@ -58,7 +53,16 @@ export default class SchedulePage extends BasePage {
       seat_height: "2%",
       flatlist_height: "60%",
       isFull: false,
-      playing_key: 0
+      playing_key: 0,
+      scheduleTitle: '',
+      wareList: [],
+      colorList: [
+        '#FFBC3D',
+        '#FB5B76',
+        '#EC48E1',
+        '#39D6B9',
+        '#3397F0'
+      ]
     };
   }
 
@@ -93,7 +97,7 @@ export default class SchedulePage extends BasePage {
           >
             <CourseTitle
               width={this.getWindowWidth()}
-              title="第12周 爱上幼儿园"
+              title={this.state.scheduleTitle}
               lefttype={1}
               righttype={1}
               textcolor={"#231F20"}
@@ -153,81 +157,9 @@ export default class SchedulePage extends BasePage {
               renderItem={({ item }) => {
                 return this.loadFlatItem(item);
               }}
-              keyExtractor={(item, index) => item.key.toString()}
+              keyExtractor={(item, index) => item.id.toString()}
               horizontal={false}
-              data={[
-                {
-                  key: 1,
-                  typecolor: "#74E0FF",
-                  typename: "习惯养成",
-                  videoname: "碗里不剩一粒米",
-                  videourl: "碗里不剩一粒米xxxx"
-                },
-                {
-                  key: 2,
-                  typecolor: "#FB5B76",
-                  typename: "品格礼仪",
-                  videoname: "我有很多朋友",
-                  videourl: "我有很多朋友xxxx"
-                },
-                {
-                  key: 3,
-                  typecolor: "#EC48E1",
-                  typename: "自我保护",
-                  videoname: "小猫喵喵叫",
-                  videourl: "小猫喵喵叫xxxx"
-                },
-                {
-                  key: 4,
-                  typecolor: "#39D6B9",
-                  typename: "亲子游戏",
-                  videoname: "安静的睡前游戏-全家人都睡了",
-                  videourl: "安静的睡前游戏xxxx"
-                },
-                {
-                  key: 5,
-                  typecolor: "#3397F0",
-                  typename: "欢乐音乐",
-                  videoname: "小鸡捉虫子",
-                  videourl: "小鸡捉虫子xxxx"
-                },
-                {
-                  key: 11,
-                  typecolor: "#74E0FF",
-                  typename: "习惯养成",
-                  videoname: "碗里不剩一粒米",
-                  videourl: "碗里不剩一粒米xxxx"
-                },
-                {
-                  key: 12,
-                  typecolor: "#FB5B76",
-                  typename: "品格礼仪",
-                  videoname: "我有很多朋友",
-                  videourl: "我有很多朋友xxxx"
-                },
-                {
-                  key: 13,
-                  typecolor: "#EC48E1",
-                  typename: "自我保护",
-                  videoname: "小猫喵喵叫",
-                  videourl: "小猫喵喵叫xxxx"
-                },
-                {
-                  key: 14,
-                  typecolor: "#39D6B9",
-                  typename: "亲子游戏",
-                  videoname: "安静的睡前游戏-全家人都睡了",
-                  videourl:
-                    "https://www.apple.com/105/media/cn/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-cn-20170912_1280x720h.mp4"
-                },
-                {
-                  key: 15,
-                  typecolor: "#3397F0",
-                  typename: "欢乐音乐",
-                  videoname: "小鸡捉虫子",
-                  videourl: "http://chimee.org/vod/1.mp4"
-                }
-              ]}
+              data={this.state.wareList}
             />
           </View>
         </View>
@@ -269,6 +201,32 @@ export default class SchedulePage extends BasePage {
   componentWillUnmount() {
     BackHandler.removeEventListener("hardwareBackPress", this.onBackAndroid);
   }
+  componentDidMount() {
+    let colorTemp = '';
+    let colorIndexTemp = 0;
+    const colorList = this.state.colorList;
+    ScheduleUrl.getSchedule('KINDERGARTEN').success(res => {
+      res.data.wareList.forEach((item, index) => {
+        if (index === 0) {
+          colorTemp = item.subTitle;
+        }
+        if (item.subTitle === colorTemp) {
+          item.subColor = colorList[colorIndexTemp];
+        } else {
+          colorIndexTemp++;
+          if (colorIndexTemp > colorList.length - 1) {
+            colorIndexTemp = 0
+          }
+          colorTemp = item.subTitle;
+          item.subColor = colorList[colorIndexTemp];
+        }
+      })
+      this.setState({
+        scheduleTitle: res.data.category.title,
+        wareList: res.data.wareList
+      })
+    })
+  }
   showSharedDialog() {
     this.video.pause();
     this.shareddialog.setModalVisible(true);
@@ -336,7 +294,7 @@ export default class SchedulePage extends BasePage {
           videoImage_x: pageX,
           videoImage_y: pageY,
           video_show: true,
-          video_uri: data.videourl,
+          video_uri: data.playUrl,
           playing_key: data.key
         });
       });

pages/components/ScrollRow.js

@@ -24,16 +24,16 @@ export default class ScrollRow extends Component {
     render() {
         return (
             <FlatList
-
                 data={this.props.data}
                 horizontal={true}
                 renderItem={({ item, separators }) => this.renderItem(item, separators)}
+                keyExtractor={(item, index) => index.toString()}
+                showsHorizontalScrollIndicator = {false}
             />
         )
     }
 
     renderItem(item, separators) {
-        console.log(this.toNextPage)
         const courseId = item.course ? item.course.id : item.operationContent;
         return (
             <TouchableOpacity
@@ -45,7 +45,7 @@ export default class ScrollRow extends Component {
                     alignItems: 'center',
                     marginLeft: 9,
                 }}
-                onPress={() => this.props.nav('CourseDetails', {courseId})}
+                onPress={() => this.playOrGoback(courseId, item.playUrl)}
                 activeOpacity={1}
             >
                 <View style={{
@@ -57,7 +57,7 @@ export default class ScrollRow extends Component {
                 }}>
                     <Image
                         source={{
-                            uri: item.zoneCourse ? item.zoneCourse.iconImg : item.boothContent
+                            uri: item.zoneCourse ? item.zoneCourse.iconImg : item.iconImg ? item.iconImg : item.boothContent
                             // uri: item.icon
                         }}
                         style={{
@@ -73,6 +73,12 @@ export default class ScrollRow extends Component {
                             {item.summary}
                         </Text>
                         :
+                        item.title
+                        ?
+                        <Text style={styles.itemSummary}>
+                            {item.title}
+                        </Text>
+                        :
                         null
                     }
 
@@ -81,6 +87,13 @@ export default class ScrollRow extends Component {
             </TouchableOpacity>
         )
     }
+    playOrGoback(courseId, playUrl) {
+        if (this.props.type) {
+            this.props.changeUri(playUrl)
+        } else {
+            this.props.nav('CourseDetails', {courseId})
+        }
+    }
 }
 
 const styles = StyleSheet.create({

pages/components/Swiper.js

@@ -28,7 +28,8 @@ export default class Swipers extends Component {
         horizontal={true}
         autoplayTimeout={5}
         autoplay={this.props.autoplay}
-        loop={this.props.loop}
+        // loop={this.props.loop}
+        loop={true}
         index={this.props.ifShowMiddle ? 1 : 0}
         activeDotColor="#fff"
         showsPagination={true}
@@ -59,14 +60,14 @@ const styles = StyleSheet.create({
     // flex: 1,
   },
   slide: {
-    width: Dimensions.getDp(352),
-    height: Dimensions.getDp(153),
+    width: Dimensions.getWidth(352),
+    height: Dimensions.getHeight(153),
     marginHorizontal: Dimensions.getDp(3),
     zIndex: 1
   },
   img: {
-    width: Dimensions.getDp(352),
-    height: Dimensions.getDp(153),
+    width: Dimensions.getWidth(352),
+    height: Dimensions.getHeight(153),
     borderRadius: Dimensions.getDp(10),
     zIndex: 1
   }

pages/components/VideoExplain.js

@@ -25,11 +25,6 @@ import { Dimensions } from 'react-native'
 const { height, width } =  Dimensions.get('window');
 
 export default class VideoExplain extends Component {
-  static propTypes = {
-    // uri: PropTypes.string,
-    // title: PropTypes.string,
-    // details: PropTypes.string,
-  };
   state = {
     isFull: false,
     video_height: 210,
@@ -38,7 +33,8 @@ export default class VideoExplain extends Component {
       width: "100%"
     },
     collectImage: require('../images/courseDetails/collect.png'),
-    isCollect: true
+    isCollect: true,
+    numberLine: 2
   };
 
   render() {
@@ -68,7 +64,7 @@ export default class VideoExplain extends Component {
         />
         <View style={styles.videoExplain}>
           <View style={styles.title}>
-            <Text style={styles.font}>{this.props.dataList}</Text>
+            <Text style={styles.font}>{this.props.dataList.title}</Text>
             <View style={styles.icon}>
               <TouchableOpacity onPress={this.collection.bind(this)}>
                 <Image source={this.state.collectImage} style={styles.iconSize} />
@@ -80,9 +76,9 @@ export default class VideoExplain extends Component {
           </View>
           <View style={[styles.title, styles.tops]}>
             <Text style={styles.font}>课程介绍：</Text>
-            <Text style={styles.clor}>更多 ></Text>
+            <Text style={styles.clor} onPress={() => this.open()}>更多 ></Text>
           </View>
-          <Text style={styles.clor}>{this.props.details}</Text>
+          <Text style={[ styles.clor, styles.introduce]} numberOfLines={this.state.numberLine}>{this.props.dataList.description}</Text>
         </View>
       </View>
     );
@@ -125,6 +121,9 @@ export default class VideoExplain extends Component {
   back(){
     this.props.videoback();
   }
+  start(){
+    this.video.start();
+  }
   componentWillMount() {
     this.backlistener=BackHandler.addEventListener(
       "hardwareBackPress",
@@ -167,6 +166,12 @@ export default class VideoExplain extends Component {
   share() {
     alert('点击分享')
   }
+  // 点击更多展开说明
+  open() {
+    this.setState({
+      numberLine: 10
+    })
+  }
 }
 
 const styles = StyleSheet.create({
@@ -205,5 +210,8 @@ const styles = StyleSheet.create({
   },
   tops: {
     marginTop: 18
+  },
+  introduce: {
+    marginTop: 5
   }
 });

pages/services/api.js

@@ -1,14 +1,17 @@
+
 const url = {
-    library_url: 'http://ott80testlibrary.yifangjiaoyu.cn/mobile/page'
+    library_url: 'http://ott80testlibrary.yifangjiaoyu.cn/mobile/page',
+    schedule_url: 'http://ott80test-schedule.yifangjiaoyu.cn/mobile/schedule/'
 }
 
 
 export default class APIConfig {
-    constructor(props){
-        this.library_url = 'http://ott80testlibrary.yifangjiaoyu.cn/mobile/page'
-    }
+    
     static getLibraryUrl(path){
-        console.log(url.library_url + path)
         return url.library_url + path
     }
+    static getScheduleUrl(path){
+        console.log(33333,url.schedule_url + path)
+        return url.schedule_url + path
+    }
 } 

pages/services/library.js

@@ -3,13 +3,10 @@ import efunRequest from '../utils/efunRequest'
 
 export default class LibraryUrl {
     
-    static aabbcc(){
-        alert(123)
-    }
     static getIndex(ageGroup) {
-        console.log(ageGroup)
         return efunRequest.getHttpRequest().url(APIConfig.getLibraryUrl(`/category`)).params({
             ageGroup
         }).get();
     }
+    
 }

pages/services/schedule.js

@@ -0,0 +1,16 @@
+import APIConfig from './api.js';
+import efunRequest from '../utils/efunRequest'
+
+export default class ScheduleUrl {
+    
+    static getSchedule(code) {
+        console.log(22222,efunRequest.getHttpRequest().url(APIConfig.getScheduleUrl(`/ware`)).params({
+            code
+        }))
+        return efunRequest.getHttpRequest().url(APIConfig.getScheduleUrl(`/ware`)).params({
+            code
+        }).get();
+    }
+    
+
+}