efunbox-mobile-8/pages/searchResult.js

/* 
 * 搜索结果页面
*/
import React, { Component } from "react";
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    ImageBackground,
    Button,
    StatusBar,
    Modal,
    TouchableHighlight,
    DeviceEventEmitter,
    FlatList,
    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: '',
        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}>
                <TextInput
                    style={styles.searchInput}
                    onChangeText={(text) => this.setState({ text })}
                    value={this.state.text}
                />
                <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 (
            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 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>
        )
    }

}

const styles = StyleSheet.create({
    searchBox: {
        width: '100%',
        height: 60,
        paddingLeft: 14,
        paddingRight: 14,
        position: 'relative',
        alignItems: 'center',
        justifyContent: 'center'
    },
    searchInput: {
        width: '100%',
        height: 40,
        borderRadius: 20,
        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,
    },    
})