增加搜索页

pages/components/MainPage.js

@@ -80,7 +80,6 @@ export default class MainPage extends BasePage {
 
 	state = {
 		grade: '大学',
-		text: '小伙子',
 		ifGradeMenuShow: false,
 		fadeAnim: new Animated.Value(0),
 		schedule: [],
@@ -194,13 +193,8 @@ export default class MainPage extends BasePage {
 				/>
 				{/* 搜索区域 */}
 				<View style={styles.searchSection}>
-					<View style={{position: 'relative'}}>
-						<TextInput
-							style={styles.searchBox}
-							onChangeText={(text) => this.setState({ text })}
-							value={this.state.text}
-						/>
-						<TouchableOpacity onPress={() => this.search(this)} style={{position: 'absolute', right: 10, top: 10}}>
+					<View style={styles.searchBox}>
+						<TouchableOpacity onPress={() => this.search(this)} style={{position: 'absolute', left: '45%', top: 10}}>
 							<Image style={styles.search} source={require('../images/common/search.png')}></Image>
 						</TouchableOpacity>
 					</View>
@@ -527,8 +521,7 @@ export default class MainPage extends BasePage {
 	}
 	// 搜索
 	search() {
-		const searchText = this.state.text;
-		this.toNextPage('SearchResult', {searchText})
+		this.toNextPage('SearchResult')
 	}
 }
 
@@ -554,6 +547,7 @@ const styles = StyleSheet.create({
 		position: 'relative'
 	},
 	searchBox: {
+		position: 'relative',
 		width: Dimensions.getWidth(232),
 		height: Dimensions.getHeight(40),
 		backgroundColor: '#fff',

pages/searchResult.js

@@ -16,7 +16,9 @@ import {
     TouchableHighlight,
     DeviceEventEmitter,
     FlatList,
-    TextInput
+    TextInput,
+    ScrollView,
+    Animated
 } from "react-native";
 import BasePage from "./BasePage";
 import Dimensions from './utils/dimensions';
@@ -24,30 +26,78 @@ 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
-        })
-        // 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)
-        // });
-    }
+    // 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: ''
+        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}>
@@ -55,32 +105,146 @@ 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 (
-            <View>
-                <CourseTitle
-                    width={Dimensions.width}
-                    title="搜索"
-                    lefttype={1}
-                    textcolor={'#231F20'}
-                    backPress={() => this.goBack()}
-                    // backPress={() => alert("左侧按钮")}
-                />
+            <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
-                    ListHeaderComponent={() => this.searchBox()}
+                    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>
         )
     }
@@ -89,17 +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',
-        paddingLeft: 15
-    }
+        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,
+    },    
 })

pages/services/search.js

@@ -0,0 +1,20 @@
+import APIConfig from './api.js';
+// import efunRequest from '../utils/efunRequest'
+import request from '../utils/request'
+
+export default class search {
+  // 获取搜索课程列表
+  static getSearchCourseList(keyword) {
+    console.log(keyword)
+    return request(`http://ott80testlibrary.yifangjiaoyu.cn/mobile/course?keyword=${keyword}`, {
+      method: "get",
+    })
+  }
+  // 获取搜索课件列表
+  static getSearchWareList(keyword) {
+    console.log(keyword)
+    return request(`http://ott80testlibrary.yifangjiaoyu.cn/mobile/course/ware?keyword=${keyword}`, {
+      method: "get",
+    })
+  }
+}