|
|
@@ -16,18 +16,88 @@ import {
|
|
|
TouchableHighlight,
|
|
|
DeviceEventEmitter,
|
|
|
FlatList,
|
|
|
- TextInput
|
|
|
+ TextInput,
|
|
|
+ ScrollView,
|
|
|
+ Animated
|
|
|
} from "react-native";
|
|
|
import BasePage from "./BasePage";
|
|
|
import Dimensions from './utils/dimensions';
|
|
|
import ShopBox from "./components/ShopBox";
|
|
|
import TopicTitle from './components/TopicTitle';
|
|
|
import ScrollRow from './components/ScrollRow';
|
|
|
+import CourseTitle from './components/CourseTitle';
|
|
|
+import search from './services/search'
|
|
|
|
|
|
export default class SearchResult extends BasePage {
|
|
|
+ // componentDidMount() {
|
|
|
+ // const { searchText } = this.props.navigation.state.params;
|
|
|
+ // console.log('searchText',searchText)
|
|
|
+ // this.setState({
|
|
|
+ // text: searchText
|
|
|
+ // })
|
|
|
+ // this.search(searchText)
|
|
|
+ // // courseDetails.getCourseDetails(courseId).then(res => {
|
|
|
+ // // console.log('列表',res.data)
|
|
|
+ // // const courseList = res.data.course;
|
|
|
+ // // const wareList = res.data.wareList;
|
|
|
+ // // this.setState({
|
|
|
+ // // courseList,
|
|
|
+ // // wareList,
|
|
|
+ // // uri: wareList[0].playUrl
|
|
|
+ // // })
|
|
|
+ // // }).catch(err => {
|
|
|
+ // // console.log(err)
|
|
|
+ // // });
|
|
|
+ // }
|
|
|
state = {
|
|
|
- text: '123123123123'
|
|
|
+ text: '',
|
|
|
+ list: [],
|
|
|
+ ifCourseMenuShow: false,
|
|
|
+ currentCourseSwitch: { title: '课程', param: 'course' },
|
|
|
+ switchCourseList: [
|
|
|
+ // { title: '幼儿园', param: 'KINDERGARTEN' },
|
|
|
+ { title: '课程', param: 'course' },
|
|
|
+ { title: '课件', param: 'ware' }
|
|
|
+ ],
|
|
|
+ fadeCourseAnim: new Animated.Value(0),
|
|
|
};
|
|
|
+ search (text) {
|
|
|
+ if (!text) {
|
|
|
+ alert('请输入关键字搜索');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ const param = this.state.currentCourseSwitch.param;
|
|
|
+ if (param == 'course') {
|
|
|
+ search.getSearchCourseList(text).then( res => {
|
|
|
+ console.log('搜索', res.data)
|
|
|
+ const list = res.data.list;
|
|
|
+ if(list.length == 0) {
|
|
|
+ alert('请换个关键字搜索')
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.setState({
|
|
|
+ list
|
|
|
+ })
|
|
|
+ }).catch( err => {
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ search.getSearchWareList(text).then( res => {
|
|
|
+ console.log('搜索', res.data)
|
|
|
+ const list = res.data.list;
|
|
|
+ if(list.length == 0) {
|
|
|
+ alert('请换个关键字搜索')
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.setState({
|
|
|
+ list
|
|
|
+ })
|
|
|
+ }).catch( err => {
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
searchBox = () => {
|
|
|
return (
|
|
|
<View style={styles.searchBox}>
|
|
|
@@ -35,23 +105,147 @@ export default class SearchResult extends BasePage {
|
|
|
style={styles.searchInput}
|
|
|
onChangeText={(text) => this.setState({ text })}
|
|
|
value={this.state.text}
|
|
|
- renderItem={item => this.renderItem(item)}
|
|
|
/>
|
|
|
+ <TouchableOpacity onPress={this.courseCallOutHandler} style={{position: 'absolute', left: 14, top: 10,width: '30%',height: 40}}>
|
|
|
+ <View style={styles.rightBtn}>
|
|
|
+ <Image source={require('./images/common/switch.png')} style={styles.rightBtnIcon} />
|
|
|
+ <Text style={styles.rightBtnText}>{this.state.currentCourseSwitch.title}</Text>
|
|
|
+ <View style={{ width:2, height:19, backgroundColor: '#63AEFF'}}></View>
|
|
|
+ </View>
|
|
|
+ </TouchableOpacity>
|
|
|
+ <TouchableOpacity onPress={() => this.search(this.state.text)} style={{position: 'absolute', right: 20, top: 15}}>
|
|
|
+ <Image style={styles.search} source={require('./images/common/search.png')}></Image>
|
|
|
+ </TouchableOpacity>
|
|
|
+ </View>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ searchHead = () => {
|
|
|
+ return (
|
|
|
+ this.state.list.length == 0 ?
|
|
|
+ null:
|
|
|
+ <View style={styles.head}>
|
|
|
+ <Text style={{ fontSize: 16 }}>以下课程包含：</Text>
|
|
|
+ <Text style={{ color: '#63AEFF', fontSize: 16 }}>{this.state.text}</Text>
|
|
|
</View>
|
|
|
)
|
|
|
}
|
|
|
renderItem = (item) =>{
|
|
|
+ const param = this.state.currentCourseSwitch.param;
|
|
|
return (
|
|
|
- <View>
|
|
|
-
|
|
|
+ param == 'course' ?
|
|
|
+ <View style={styles.course} key={item.id}>
|
|
|
+ <View style={styles.img}>
|
|
|
+ <Image source={{
|
|
|
+ uri: item.iconImg
|
|
|
+ }} style={styles.iconImg} />
|
|
|
+ </View>
|
|
|
+ <Text>{item.title}</Text>
|
|
|
+ </View>
|
|
|
+ :
|
|
|
+ <View style={[ styles.padding, styles.title, styles.border ]} key={item.id}>
|
|
|
+ <Text style={styles.courseFont}>{item.title}</Text>
|
|
|
+ <Text style={styles.courseFont}>></Text>
|
|
|
</View>
|
|
|
)
|
|
|
+
|
|
|
+ {/* <View style={styles.ware}>
|
|
|
+
|
|
|
+ </View> */}
|
|
|
}
|
|
|
+ // 点击选择
|
|
|
+ courseCallOutHandler = () => {
|
|
|
+ this.setState(
|
|
|
+ {
|
|
|
+ ifCourseMenuShow: !this.state.ifCourseMenuShow
|
|
|
+ },
|
|
|
+ () => {
|
|
|
+ Animated.timing(this.state.fadeCourseAnim, {
|
|
|
+ toValue: this.state.ifCourseMenuShow ? 1 : 0,
|
|
|
+ duration: 300
|
|
|
+ }).start();
|
|
|
+ }
|
|
|
+ );
|
|
|
+ };
|
|
|
+ // 如果切换课程在显示状态，那么在它失去焦点时将它隐藏
|
|
|
+ hideCourseMenu = () => {
|
|
|
+ if (this.state.ifCourseMenuShow) {
|
|
|
+ this.setState({
|
|
|
+ ifCourseMenuShow: false
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
+ //渲染按钮
|
|
|
+ renderCourseBtn = (item, index) => {
|
|
|
+ return (
|
|
|
+ <TouchableOpacity
|
|
|
+ onPress={() => this.switchCourseGrade(index)}
|
|
|
+ key={index}
|
|
|
+ style={styles.gradeItemMid}
|
|
|
+ >
|
|
|
+ <Text style={styles.gradeText}>{item.title}</Text>
|
|
|
+ </TouchableOpacity>
|
|
|
+ );
|
|
|
+ };
|
|
|
+ // 点击按钮
|
|
|
+ switchCourseGrade = (index) => {
|
|
|
+ const obj = this.state.switchCourseList[index];
|
|
|
+ this.setState({
|
|
|
+ currentCourseSwitch: obj
|
|
|
+ });
|
|
|
+ this.hideCourseMenu();
|
|
|
+ // if (obj.param === this.state.currentCourseSwitch.param) return
|
|
|
+ //这里更新个人信息学龄选项
|
|
|
+ // var bool = this.updateUserInfo(obj.param);
|
|
|
+ // this.updateRender(obj.param);
|
|
|
+ };
|
|
|
render() {
|
|
|
return (
|
|
|
- <FlatList
|
|
|
- ListHeaderComponent={() => this.searchBox()}
|
|
|
- />
|
|
|
+ <View style={{backgroundColor: '#f6f7f8'}}>
|
|
|
+ <View style={{
|
|
|
+ height: 30,
|
|
|
+ backgroundColor: 'white'
|
|
|
+ }}>
|
|
|
+ <CourseTitle
|
|
|
+ width={Dimensions.width}
|
|
|
+ title="搜索"
|
|
|
+ lefttype={1}
|
|
|
+ textcolor={'#231F20'}
|
|
|
+ backPress={() => this.goBack()}
|
|
|
+ // backPress={() => alert("左侧按钮")}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ {
|
|
|
+ this.searchBox()
|
|
|
+ }
|
|
|
+ {
|
|
|
+ this.searchHead()
|
|
|
+ }
|
|
|
+ <ScrollView style={{paddingBottom: 100, backgroundColor: '#fff'}}>
|
|
|
+ <View style={ this.state.currentCourseSwitch.param == 'coerse' ? styles.list : null}>
|
|
|
+ {
|
|
|
+ this.state.list.map(item =>
|
|
|
+ this.renderItem(item)
|
|
|
+ )
|
|
|
+ }
|
|
|
+ </View>
|
|
|
+ </ScrollView>
|
|
|
+ {/* <FlatList
|
|
|
+ style={styles.list}
|
|
|
+ data={this.state.list}
|
|
|
+ ListHeaderComponent={() => this.searchHead()}
|
|
|
+ renderItem={({item}) => this.renderItem(item)}
|
|
|
+ /> */}
|
|
|
+ {this.state.ifCourseMenuShow ? (
|
|
|
+ <Animated.View
|
|
|
+ style={{
|
|
|
+ ...styles.callUpGrade,
|
|
|
+ opacity: this.state.fadeCourseAnim
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {this.state.switchCourseList.map((item, index) => this.renderCourseBtn(item, index))}
|
|
|
+ </Animated.View>
|
|
|
+ ) : null}
|
|
|
+ </View>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
@@ -59,16 +253,114 @@ export default class SearchResult extends BasePage {
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
searchBox: {
|
|
|
- width: Dimensions.width,
|
|
|
+ width: '100%',
|
|
|
height: 60,
|
|
|
+ paddingLeft: 14,
|
|
|
+ paddingRight: 14,
|
|
|
+ position: 'relative',
|
|
|
alignItems: 'center',
|
|
|
- justifyContent: 'center',
|
|
|
- backgroundColor: '#f6f7f8'
|
|
|
+ justifyContent: 'center'
|
|
|
},
|
|
|
searchInput: {
|
|
|
- width: '88.5%',
|
|
|
+ width: '100%',
|
|
|
height: 40,
|
|
|
borderRadius: 20,
|
|
|
- backgroundColor: '#fff'
|
|
|
- }
|
|
|
+ backgroundColor: '#fff',
|
|
|
+ paddingLeft: '31%'
|
|
|
+ },
|
|
|
+ list: {
|
|
|
+ width: '100%',
|
|
|
+ display: 'flex',
|
|
|
+ flexDirection: 'row',
|
|
|
+ justifyContent: 'space-between',
|
|
|
+ flexWrap: 'wrap',
|
|
|
+ paddingLeft: 14,
|
|
|
+ paddingRight: 14
|
|
|
+ },
|
|
|
+ head: {
|
|
|
+ display: 'flex',
|
|
|
+ flexDirection: 'row',
|
|
|
+ backgroundColor: '#fff',
|
|
|
+ paddingTop: 16,
|
|
|
+ paddingBottom: 16,
|
|
|
+ paddingLeft: 14,
|
|
|
+ paddingRight: 14
|
|
|
+ },
|
|
|
+ course: {
|
|
|
+ width: '30%',
|
|
|
+ display: 'flex',
|
|
|
+ flexDirection: 'column',
|
|
|
+ alignItems: 'center'
|
|
|
+ },
|
|
|
+ img: {
|
|
|
+ width: '100%',
|
|
|
+ height: 155
|
|
|
+ },
|
|
|
+ iconImg: {
|
|
|
+ width: '100%',
|
|
|
+ height: '100%'
|
|
|
+ },
|
|
|
+ callUpGrade: {
|
|
|
+ width: 113,
|
|
|
+ height: 120,
|
|
|
+ borderRadius: 20,
|
|
|
+ position: 'absolute',
|
|
|
+ left: 9,
|
|
|
+ top: 75,
|
|
|
+ zIndex: 999,
|
|
|
+ backgroundColor: '#fff',
|
|
|
+ flexDirection: 'column',
|
|
|
+ borderStyle: 'solid',
|
|
|
+ borderWidth: 1,
|
|
|
+ borderColor: '#F0F1F5'
|
|
|
+ },
|
|
|
+ rightBtn: {
|
|
|
+ width: '100%',
|
|
|
+ height: 40,
|
|
|
+ backgroundColor: '#fff',
|
|
|
+ borderRadius: 20,
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'space-around',
|
|
|
+ flexDirection: 'row',
|
|
|
+ paddingLeft: 20,
|
|
|
+ paddingRight: 10,
|
|
|
+ },
|
|
|
+ rightBtnIcon: {
|
|
|
+ width: Dimensions.getWidth(23),
|
|
|
+ height: Dimensions.getHeight(23)
|
|
|
+ },
|
|
|
+ rightBtnText: {
|
|
|
+ color: '#151515',
|
|
|
+ fontSize: 18
|
|
|
+ },
|
|
|
+ gradeItemMid: {
|
|
|
+ zIndex: 999,
|
|
|
+ flex: 1,
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'center',
|
|
|
+ borderTopWidth: 1,
|
|
|
+ borderBottomWidth: 1,
|
|
|
+ borderColor: '#f0f1f5'
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ display: 'flex',
|
|
|
+ flexDirection: 'row',
|
|
|
+ justifyContent: 'space-between',
|
|
|
+ alignItems: 'center',
|
|
|
+ },
|
|
|
+ courseFont: {
|
|
|
+ color: '#373737',
|
|
|
+ fontSize: 16
|
|
|
+ },
|
|
|
+ border: {
|
|
|
+ borderStyle: 'solid',
|
|
|
+ borderBottomWidth: 1,
|
|
|
+ borderColor: '#F0F1F5'
|
|
|
+ },
|
|
|
+ padding: {
|
|
|
+ paddingLeft: 20,
|
|
|
+ paddingRight: 20,
|
|
|
+ paddingTop: 10,
|
|
|
+ paddingBottom: 10,
|
|
|
+ },
|
|
|
})
|
