屏幕快照 2018-10-12 下午1.19.50.png
export default class CourseDetails extends Component {
constructor(props) {
super(props);
this.state = {
changeType: 'info',
}
}
render () {
return (
<View style={{flex: 1, backgroundColor: '#f9f9f9'}}>
<Head barStyle={'light-content'} animated={true} hidden={false} backgroundColor={'transparent'} overflow={'overflow'}/>
<ScrollView style={{marginBottom: Resolution.scaleSize(50),}}>
{/* 课程详情、内容安排、同学评价、更新日志 */}
<View style={PackDetailsStyles.content}>
<View style={PackDetailsStyles.scrollBar}>
<TouchableOpacity style={[PackDetailsStyles.scrollBarItem,this.state.changeType==='info'?PackDetailsStyles.cur:'']} onPress={() => {this.chooseTab("info")}}>
<Text style={PackDetailsStyles.scrollBarText}>课程详情</Text>
</TouchableOpacity>
<TouchableOpacity style={[PackDetailsStyles.scrollBarItem,this.state.changeType==='cont'?PackDetailsStyles.cur:'']} onPress={() => {this.chooseTab("cont")}}>
<Text style={[PackDetailsStyles.scrollBarText]}>内容安排</Text>
</TouchableOpacity>
<TouchableOpacity style={[PackDetailsStyles.scrollBarItem,this.state.changeType==='student'?PackDetailsStyles.cur:'']} onPress={() => {this.chooseTab("student")}}>
<Text style={[PackDetailsStyles.scrollBarText]}>同学评价</Text>
</TouchableOpacity>
<TouchableOpacity style={[PackDetailsStyles.scrollBarItem,this.state.changeType==='diary'?PackDetailsStyles.cur:'']} onPress={() => {this.chooseTab("diary")}}>
<Text style={[PackDetailsStyles.scrollBarText]}>更新日志</Text>
</TouchableOpacity>
</View>
{this.contentTab()}
</View>
</ScrollView>
</View>
)
}
// 选项卡头部 课程详情、内容安排、同学评价、更新日志
chooseTab(e) {
if(e!=this.state.changeType){
this.setState({
changeType: e,
})
}
}
// 选项卡内容切换
contentTab() {
if(this.state.changeType==='info') {
return(
<View style={PackDetailsStyles.tabCourseDetails}>
<View style={PackDetailsStyles.courseGroup}>
<View style={PackDetailsStyles.title}>
<View style={PackDetailsStyles.titleShu}></View>
<Text style={PackDetailsStyles.titleTxt}>课程组合</Text>
</View>
</View>
<View style={PackDetailsStyles.courseIntro}>
<View style={PackDetailsStyles.title}>
<View style={PackDetailsStyles.titleShu}></View>
<Text style={PackDetailsStyles.titleTxt}>课程介绍</Text>
</View>
</View>
</View>
)
}else if(this.state.changeType==='cont') {
return(
<View style={PackDetailsStyles.tabContPlan}>
<View style={PackDetailsStyles.planItem}>
<View style={PackDetailsStyles.planLesson}>
<Text style={{color: '#fff'}}>第一课</Text>
</View>
<Text style={PackDetailsStyles.planTitle} numberOfLines={1}>课程初识</Text>
<Text style={PackDetailsStyles.planIntro} numberOfLines={5}>对课程进行简单介绍，如何学习课程，以及课程的结构。对课程进行简单介绍，如何学习课程，以及课程的结构。对课程进行简单介绍，如何学习课程，以及课程的结构。对课程进行简单介绍，如何学习课程，以及课程的结构。对课程进行简单介绍，如何学习课程，以及课程的结构。</Text>
</View>
<View style={PackDetailsStyles.planItem}></View>
</View>
)
}else if(this.state.changeType==='student'){
return(
<View/>
)
}else if (this.state.changeType==='diary') {
return(
<View style={PackDetailsStyles.dailyRecord}>
<View style={PackDetailsStyles.dailyRecordItem}>
<View style={PackDetailsStyles.dailyRecordLeft}>
<View style={PackDetailsStyles.dailyRecordLine}></View>
<View style={PackDetailsStyles.dailyRecordCircle}></View>
</View>
<View style={PackDetailsStyles.dailyRecordRight}>
<View style={PackDetailsStyles.dailyRecordTop}>
<Text style={PackDetailsStyles.dailyRecordType}>学习日志</Text>
<Text style={PackDetailsStyles.dailyRecordTime}>2018-08-08</Text>
</View>
<View style={PackDetailsStyles.dailyRecordBottom}>
<Text style={PackDetailsStyles.dailyRecordIntro}>最近一个月，大家一起加油进步！</Text>
</View>
</View>
</View>
</View>
)
}
}
}