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

pages/CourseDetails.js

@@ -21,11 +21,23 @@ import CourseListRow from './components/CourseListRow'
 import CourseListLine from './components/CourseListLine'
 import Comment from './components/Comment'
 import Order from './components/Order'
+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)
+      this.setState({
+        courseList: 222
+      })
+    });
+  }
   state = {
     fullStyle: {},
-    lefts: 0
+    lefts: 0,
+    courseList: 111
   }
   render() {
     return (
@@ -37,6 +49,8 @@ export default class CourseDetails extends Component {
             title={'同步辅导语文一年级下册'}
             details={'汉字，作为象形文字，是中华文化的载体，本课程从甲骨文开始，让孩子爱上识字爱上文字的美。了解文字…'}
             uri={'http://chimee.org/vod/1.mp4'}
+            dataList={ this.state.courseList }
+            videoback={this.back.bind(this) } 
             />
           </View>
           <View style={ this.state.fullStyle }>
@@ -49,6 +63,9 @@ export default class CourseDetails extends Component {
       </View>
     );
   }
+  back(){
+    this.props.navigation.goBack()
+  }
   full(isFull){
     if(isFull) {
       // 全屏时隐藏多余的view

pages/buy/buy.js

@@ -14,7 +14,7 @@ import {
     DeviceEventEmitter,
     ScrollView,
     Modal,
-    Animated
+    Animated,
 } from "react-native";
 import BasePage from "../BasePage";
 import Dimensions from '../utils/dimensions';
@@ -29,7 +29,8 @@ export default class Buy extends BasePage {
         ],
         currentTapindex: 0,
         slideAnim: new Animated.Value(-150),
-        ifDialogShow: false
+        ifDialogShow: false,
+        payType: 1
     };
     itemTap = (index) => {
         this.setState({
@@ -45,17 +46,43 @@ export default class Buy extends BasePage {
             </TouchableOpacity>
         )
     }
-    changeMethod = () => {
-        this.setState({
-            ifDialogShow: !this.state.ifDialogShow
-        }, () => {
+    dialogComeout = (index) => {
+        if (index) {
+            this.setState({
+                ifDialogShow: true
+            }, () => {
+                Animated.timing(
+                    this.state.slideAnim,
+                    {
+                        toValue: 0,
+                        duration: 300,
+                    }
+                ).start();
+            })
+        } else {
             Animated.timing(
                 this.state.slideAnim,
                 {
-                    toValue: 0,
-                    duration: 300,
+                    toValue: -150,
+                    duration: 200,
                 }
             ).start();
+            setTimeout(() => {
+                this.setState({
+                    ifDialogShow: false
+                })
+            }, 210)
+        }
+
+    }
+    setPayMethod = (type) => {
+        this.setState({
+            payType: type
+        },()=>{
+            setTimeout(() => {
+                this.dialogComeout(false)
+            }, 100)
+            
         })
     }
     render() {
@@ -82,7 +109,7 @@ export default class Buy extends BasePage {
                         {this.state.shopData.map((item, index) => this.renderItem(item, index))}
                     </View>
                 </View>
-                <TouchableOpacity style={styles.payment} onPress={() => this.changeMethod()}>
+                <TouchableOpacity style={styles.payment} onPress={() => this.dialogComeout(true)}>
                     <Text style={styles.left}>支付方式</Text>
                     <View style={styles.right}>
                         <Text style={styles.method}>微信支付</Text>
@@ -98,14 +125,45 @@ export default class Buy extends BasePage {
                 {
                     this.state.ifDialogShow
                         ?
-                        <View style={{ ...styles.dialog }}>
-                            <Animated.View style={{ ...styles.payMethod, bottom: this.state.slideAnim }}>
-                                <Text>选择支付方式</Text>
-                                {/* <View> */}
+                        <TouchableHighlight
+                            onPress={() => { this.dialogComeout(false) }}
+                            style={{ ...styles.dialog }}
+                            underlayColor={0.1}
+                        >
+                            <Animated.View
+                                style={{ ...styles.payMethod, bottom: this.state.slideAnim }}
+                                onPress={() => { alert(12311) }}
+                            >
+                                <Text style={styles.payText}>选择支付方式</Text>
+                                <TouchableOpacity activeOpacity={0.9} style={styles.payDialog} onPress={() => this.setPayMethod(1)}>
+                                    <View style={styles.dialogRow}>
+                                        <Image style={styles.payIcon} source={require('../images/common/wxPay.png')} />
+                                        <Text>微信支付</Text>
+                                    </View>
+                                    {
+                                        this.state.payType === 1
+                                            ?
+                                            <Image source={require('../images/common/check.png')} />
+                                            :
+                                            null
+                                    }
 
-                                {/* </View> */}
+                                </TouchableOpacity>
+                                <TouchableOpacity activeOpacity={0.9} style={styles.payDialog} onPress={() => this.setPayMethod(2)}>
+                                    <View style={styles.dialogRow}>
+                                        <Image style={styles.payIcon} source={require('../images/common/aliPay.png')} />
+                                        <Text>支付宝支付</Text>
+                                    </View>
+                                    {
+                                        this.state.payType === 2
+                                            ?
+                                            <Image source={require('../images/common/check.png')} />
+                                            :
+                                            null
+                                    }
+                                </TouchableOpacity>
                             </Animated.View>
-                        </View>
+                        </TouchableHighlight>
                         :
                         null
                 }
@@ -242,8 +300,7 @@ const styles = StyleSheet.create({
         width: Dimensions.width,
         height: Dimensions.height,
         position: 'absolute',
-        backgroundColor: '#000',
-        opacity: 0.4
+        backgroundColor: 'rgba(0,0,0,0.4)',
 
     },
     payMethod: {
@@ -251,6 +308,32 @@ const styles = StyleSheet.create({
         height: 150,
         position: 'absolute',
         // bottom: 0,
-        backgroundColor: '#fff'
+        backgroundColor: '#fff',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'flex-start'
+    },
+    payDialog: {
+        width: '90%',
+        borderTopWidth: 1,
+        borderColor: '#e4e4e4',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flex: 1
+    },
+    dialogRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    payIcon: {
+        marginRight: 17
+    },
+    payText: {
+        fontSize: 16,
+        color: '#191919',
+        alignContent: 'center',
+        flex: 1,
+        lineHeight: 50
     }
 })

pages/components/Comment.js

@@ -13,7 +13,7 @@ export default class Comment extends Component {
         <View style={[styles.padding, styles.title]}>
           <Text style={styles.font}>{this.props.title}</Text>
           <View style={[ styles.button, styles.center ]}>
-            <Image src="" style={styles.iconSize} />
+            <Image source={require('../images/courseDetails/comment.png')} style={styles.iconSize} />
             <Text>写评论</Text>
           </View>
         </View>
@@ -27,7 +27,7 @@ export default class Comment extends Component {
                 </View>
             </View>
             <View style={[ styles.center ]}>
-              <Image src="" style={styles.iconSize} />
+              <Image source={require('../images/courseDetails/reply.png')} style={styles.reply} />
               <Text>回复</Text>
             </View>
           </View>
@@ -49,6 +49,7 @@ const styles = StyleSheet.create({
     width: '100%',
     backgroundColor: '#fff',
     marginTop: 8,
+    marginBottom: 60
   },
   padding: {
     paddingLeft: 20,
@@ -89,11 +90,15 @@ const styles = StyleSheet.create({
     borderRadius: 40
   },
   iconSize: {
-    width: 20,
-    height: 20,
-    backgroundColor: "red",
+    width: 18,
+    height: 18,
     marginRight: 10
   },
+  reply: {
+    width: 16,
+    height: 15,
+    marginRight: 5
+  },
   courseFont: {
     color: '#373737',
     fontSize: 16

pages/components/MainPage.js

@@ -78,7 +78,34 @@ export default class MainPage extends BasePage {
     schedule: [],
     recommend: [],
     listData: [],
-    banner:[]
+    banner: [],
+    currentSwitch: { title: '学前', param: 'PRESCHOOL' },
+    switchList: [
+      { title: '幼儿园', param: 'KINDERGARTEN' },
+      { title: '学前', param: 'PRESCHOOL' },
+      { title: '小学', param: 'PRIMARY_SCHOOL' },
+      { title: '中学', param: 'MIDDLE_SCHOOL' },
+    ]
+  }
+
+  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>
+    )
+  }
+
+  switchGrade=(index)=>{
+    const obj = this.state.switchList[index]
+    this.setState({
+      currentSwitch: obj
+    })
+    this.hideGradeMenu()
   }
 
   render() {
@@ -95,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 }} onScroll={this.hideGradeMenu} >
           {this.headerorfooterComponent()}
           {this.getSwiperElement()}
           {this.getScheduleElement()}
@@ -111,7 +138,7 @@ export default class MainPage extends BasePage {
                 ...styles.callUpGrade,
                 opacity: this.state.fadeAnim
               }}>
-              <TouchableOpacity style={styles.gradeItem}>
+              {/* <TouchableOpacity style={styles.gradeItem}>
                 <Text style={styles.gradeText}>小学</Text>
               </TouchableOpacity>
               <TouchableOpacity style={styles.gradeItemMid}>
@@ -119,7 +146,8 @@ export default class MainPage extends BasePage {
               </TouchableOpacity>
               <TouchableOpacity style={styles.gradeItem}>
                 <Text style={styles.gradeText}>中学</Text>
-              </TouchableOpacity>
+              </TouchableOpacity> */}
+              {this.state.switchList.map((item, index) => this.renderBtn(item, index))}
             </Animated.View>
           ) : (
               null
@@ -154,13 +182,13 @@ export default class MainPage extends BasePage {
               style={styles.rightBtn}
             >
               <Image
-                source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
+                source={require('../images/common/switch.png')}
                 style={styles.rightBtnIcon}
               />
               <Text
                 style={styles.rightBtnText}
               >
-                {this.state.grade}
+                {this.state.currentSwitch.title}
               </Text>
             </View>
           </TouchableOpacity>
@@ -206,7 +234,7 @@ export default class MainPage extends BasePage {
       return (
         <TouchableOpacity
           style={{ width: 172, height: 86, marginRight: 12 }}
-          onPress={()=>this.toNextPage('SchedulePage')}
+          onPress={() => this.toNextPage('SchedulePage')}
           key={index}
           activeOpacity={1}
         >

pages/components/ScrollRow.js

@@ -34,6 +34,7 @@ export default class ScrollRow extends Component {
 
     renderItem(item, separators) {
         console.log(this.toNextPage)
+        const courseId = item.course ? item.course.id : item.operationContent;
         return (
             <TouchableOpacity
                 style={{
@@ -44,7 +45,7 @@ export default class ScrollRow extends Component {
                     alignItems: 'center',
                     marginLeft: 9,
                 }}
-                onPress={() => this.props.nav('CourseDetails')}
+                onPress={() => this.props.nav('CourseDetails', {courseId})}
                 activeOpacity={1}
             >
                 <View style={{

pages/components/VideoExplain.js

@@ -15,7 +15,8 @@ import {
   ScrollView,
   StatusBar,
   BackHandler,
-  FlatList
+  FlatList,
+  TouchableOpacity 
 } from "react-native";
 import Orientation from "react-native-orientation";
 import CusVideo from "./CusVideo";
@@ -35,7 +36,9 @@ export default class VideoExplain extends Component {
     statusbar_hidden: false,
     videoStyle: {
       width: "100%"
-    }
+    },
+    collectImage: require('../images/courseDetails/collect.png'),
+    isCollect: true
   };
 
   render() {
@@ -54,7 +57,7 @@ export default class VideoExplain extends Component {
           uri={this.props.uri} //播放路径
           ref={view => (this.video = view)} //设置ID
           needback={true}
-          videoback={() => alert("videoback")}
+          videoback={this.back.bind(this)}
           videofullScreenPlayer={this.fullScreenPlayer.bind(this)}
           onError={this.onError.bind(this)}
           onEnd={this.onEnd.bind(this)}
@@ -65,10 +68,14 @@ export default class VideoExplain extends Component {
         />
         <View style={styles.videoExplain}>
           <View style={styles.title}>
-            <Text style={styles.font}>{this.props.title}</Text>
+            <Text style={styles.font}>{this.props.dataList}</Text>
             <View style={styles.icon}>
-              <Image src="" style={styles.iconSize} />
-              <Image src="" style={styles.iconSize} />
+              <TouchableOpacity onPress={this.collection.bind(this)}>
+                <Image source={this.state.collectImage} style={styles.iconSize} />
+              </TouchableOpacity>
+              <TouchableOpacity onPress={this.share}>
+                <Image source={require('../images/courseDetails/share.png')} style={styles.iconSize} />
+              </TouchableOpacity>
             </View>
           </View>
           <View style={[styles.title, styles.tops]}>
@@ -80,6 +87,7 @@ export default class VideoExplain extends Component {
       </View>
     );
   }
+  // 全屏播放
   fullScreenPlayer() {
     if (!this.state.isFull) {
       Orientation.lockToLandscape();
@@ -105,32 +113,60 @@ export default class VideoExplain extends Component {
     }
     this.props.full(this.state.isFull);
   }
+  // 播放器异常
   onError() {
     alert("播放器异常");
   }
+  // 播放结束
   onEnd() {
     alert("播放结束");
     this.video.refreshVideo();
   }
+  back(){
+    this.props.videoback();
+  }
   componentWillMount() {
-    BackHandler.addEventListener(
+    this.backlistener=BackHandler.addEventListener(
       "hardwareBackPress",
-      this.onBackAndroid.bind(this)
+      this.onBackAndroid
     );
   }
   componentWillUnmount() {
-    BackHandler.removeEventListener(
-      "hardwareBackPress",
-      this.onBackAndroid.bind(this)
-    );
+    console.log("componentWillUnmount")
+    if( this.backlistener){
+      BackHandler.removeEventListener(
+        "hardwareBackPress",
+        this.onBackAndroid
+      );
+    }
+ 
   }
-  onBackAndroid() {
+  // 播放器返回
+  onBackAndroid=() => {
     if (this.state.isFull) {
       return true;
     } else {
       alert("返回。。。");
     }
   }
+  // 收藏
+  collection() {
+    if (this.state.isCollect) {
+      this.setState({
+        collectImage: require('../images/courseDetails/have_collect.png'),
+        isCollect: false
+      })
+    }else {
+      this.setState({
+        collectImage: require('../images/courseDetails/collect.png'),
+        isCollect: true
+      })
+    }
+  }
+  // 分享
+  share() {
+    alert('点击分享')
+  }
 }
 
 const styles = StyleSheet.create({
@@ -165,7 +201,6 @@ const styles = StyleSheet.create({
   iconSize: {
     width: 20,
     height: 20,
-    backgroundColor: "red",
     marginLeft: 10
   },
   tops: {

pages/services/courseDetails.js

@@ -0,0 +1,8 @@
+import APIConfig from './api.js';
+import efunRequest from '../utils/efunRequest'
+
+export default class CourseDetails {
+    static getCourseDetails(courseId) {
+      return efunRequest.getHttpRequest().url(`http://ott80testlibrary.yifangjiaoyu.cn/mobile/course/${courseId}`).get();
+    }
+}