Skip to content

M
mr-julyedu
Commit 2c5d5fe4 by zhanghaozhe
Options

search

parent fd5a59a5
Showing with 143 additions and 72 deletions
src/common/VList/index.js
...@@ -3,7 +3,7 @@ import './index.scss' ...@@ -3,7 +3,7 @@ import './index.scss'
const VList = (props) => { const VList = (props) => {
return ( return (
<li className='v-list-item' onClick={e=>props.handleClick(props.id)}> <li className='v-list-item' onClick={e => props.handleClick(props.id)}>
<div className="content"> <div className="content">
<div className="cover"> <div className="cover">
{props.status} {props.status}
......
src/components/search/index.js
...@@ -7,13 +7,12 @@ import { Link } from 'react-router-dom' ...@@ -7,13 +7,12 @@ import { Link } from 'react-router-dom'
class Search extends PureComponent { class Search extends PureComponent {
constructor(props) {
super(props); state = {
this.state = { searchHistory: JSON.parse(localStorage.getItem('searchHistory')) || [],
history: JSON.parse(localStorage.getItem('history')) || [], hot_words: [],
hot_words: [], searchList: [],
searchList: [] value: ''
}
} }
async componentDidMount() { async componentDidMount() {
...@@ -29,21 +28,43 @@ class Search extends PureComponent { ...@@ -29,21 +28,43 @@ class Search extends PureComponent {
} }
clearHistory = () => {
localStorage.setItem('searchHistory', null)
this.setState({
searchHistory: []
})
}
handleChange = value => {
this.setState({value})
}
handleSearch = () => {
this.props.history.push(`/search-result?word=${encodeURIComponent(this.state.value)}`)
}
render() { render() {
let querystring = this.props.location.query ? this.props.location.query.s : ''; const {searchHistory} = this.state
return ( return (
<div className="search-page"> <div className="search-page">
<SearchHead value={querystring} returnbtn={true}/> <SearchHead
searchHistory={this.state.searchHistory}
clearHistory={this.clearHistory}
value={this.state.value}
handleChange={this.handleChange}
handleSearch={this.handleSearch}
/>
<div className="search-main"> <div className="search-main">
<div className="search-land search-history"> <div className="search-land">
<label> <div className='search-history'>
<span>最近搜索</span> <span>最近搜索</span>
<i className="iconfont iconiconfront-56"/> <i className="iconfont iconiconfront-56" onClick={this.clearHistory}/>
</label> </div>
<div className="search-tag"> <div className="search-tag">
{ {
this.state.history.length > 0 ? searchHistory.length > 0 ?
this.state.history.map((v, i) => { searchHistory.map((v, i) => {
return (<Tag key={i}>{v}</Tag>) return (<Tag key={i}>{v}</Tag>)
}) })
: <div style={{textAlign: 'center', padding: '20px'}}>暂无历史</div> : <div style={{textAlign: 'center', padding: '20px'}}>暂无历史</div>
...@@ -58,8 +79,9 @@ class Search extends PureComponent { ...@@ -58,8 +79,9 @@ class Search extends PureComponent {
{ {
this.state['hot_words'].length > 0 ? this.state['hot_words'].length > 0 ?
this.state['hot_words'].map((v, i) => { this.state['hot_words'].map((v, i) => {
console.log(encodeURIComponent(v));
return ( return (
<Link key={i} to={`/search-result?word=${v}`}> <Link key={i} to={`/search-result?word=${encodeURIComponent(v)}`}>
<Tag>{v}</Tag> <Tag>{v}</Tag>
</Link> </Link>
) )
......
src/components/search/index.scss
.search-page{ .search-page {
.search-main{ .search-main {
background-color: #fff; background-color: #fff;
padding:10px; padding: 10px;
.search-land{
label{ .search-land {
margin-bottom:10px; .search-history {
margin-bottom: 10px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
span{
font-size:16px; span {
font-size: 16px;
} }
img{
width:16px; img {
height:16px; width: 16px;
height: 16px;
display: block; display: block;
} }
} }
.search-tag{
.search-tag {
overflow: hidden; overflow: hidden;
} }
} }
.search-hot{
margin-top:10px; .search-hot {
margin-top: 10px;
} }
ul,li{
ul, li {
list-style: none; list-style: none;
padding:0; padding: 0;
margin:0; margin: 0;
} }
.list{
padding:10px 0; .list {
border-bottom:1px solid #eee; padding: 10px 0;
border-bottom: 1px solid #eee;
} }
.list:last-child{
border-bottom:0; .list:last-child {
border-bottom: 0;
} }
} }
.searct-lists{
padding:0 10px; .searct-lists {
padding: 0 10px;
} }
} }
\ No newline at end of file
src/components/search/search-result.js
...@@ -17,28 +17,61 @@ const Bottom = ({item}) => { ...@@ -17,28 +17,61 @@ const Bottom = ({item}) => {
class SearchResult extends PureComponent { class SearchResult extends PureComponent {
state = { state = {
courseList: [] courseList: [],
value: '',
searchHistory: JSON.parse(localStorage.getItem('searchHistory')) || []
} }
componentDidMount() { componentDidMount() {
http.get(`${api['search-api']}/search/${encodeURIComponent(getParam('word'))}?type=course&page=1`) this.getCourses(getParam('word'))
}
getCourses = (word) => {
http.get(`${api['search-api']}/search/${word}?type=course&page=1`)
.then(res => { .then(res => {
const data = res.data const data = res.data
if (data.errno === 0) { if (data.errno === 0) {
this.setState({ this.setState({
courseList: data.data.info.search_data.course courseList: data.data.info['search_data'].course
}); });
} }
}) })
} }
handleClick = id => {
this.props.history.push(`/detail?id=${id}`)
}
handleSearch = () => {
this.getCourses(this.state.value)
}
handleChange = value => {
this.setState({value})
}
clearHistory = () => {
localStorage.setItem('searchHistory', null)
this.setState({
searchHistory: []
})
}
render() { render() {
const {courseList} = this.state const {courseList} = this.state
return ( return (
<div className='search-result'> <div className='search-result'>
<SearchHeader/> <SearchHeader
handleSearch={this.handleSearch}
value={this.state.value}
handleChange={this.handleChange}
searchHistory={this.state.searchHistory}
clearHistory={this.clearHistory}
/>
<ul> <ul>
{ {
...@@ -57,7 +90,9 @@ class SearchResult extends PureComponent { ...@@ -57,7 +90,9 @@ class SearchResult extends PureComponent {
<VList img={item.image_name} <VList img={item.image_name}
handleClick={this.handleClick} handleClick={this.handleClick}
key={item.course_id} key={item.course_id}
info={Info}/> info={Info}
id={item['course_id']}
/>
) )
}) : null }) : null
} }
......
src/components/search/searchHead.js
...@@ -5,53 +5,46 @@ import { withRouter } from 'react-router-dom' ...@@ -5,53 +5,46 @@ import { withRouter } from 'react-router-dom'
import './search_header.scss' import './search_header.scss'
class SearchHead extends PureComponent { class SearchHead extends PureComponent {
constructor(props) {
super(props);
this.state = {
visible: false,
selected: '',
val: this.props.value || ''
}
}
// 返回某个页面 returnPage = () => {
returnPage() {
this.props.history.go(-1) this.props.history.go(-1)
} }
//组件装载完毕
componentDidMount() { componentDidMount() {
this.refs.search.focus(); this.refs.search.focus();
} }
search = () => {
this.storeKeyword()
this.props.handleSearch()
}
storeKeyword = () => {
let searchHistory = this.props.searchHistory || []
localStorage.setItem('searchHistory', JSON.stringify([...searchHistory, this.props.value]))
}
render() { render() {
return ( return (
<div className="search-head"> <div className="search-head">
<div className="left" onClick={() => { <div className="left" onClick={this.returnPage}>
// 返回某个页面 <i className="iconfont iconiconfront-68" onClick={this.props.clearHistory}/>
this.returnPage()
}}>
<i className="iconfont iconiconfront-68"/>
</div> </div>
<div className="center"> <div className="center">
<SearchBar <SearchBar
value={this.state.val} value={this.props.value}
showCancelButton showCancelButton
cancelText={" "} cancelText={" "}
ref="search" ref="search"
focus={true} focus={true}
onChange={this.props.handleChange}
onChange={(val) => {
this.setState({val})
this.props.search.changeVal(val)
}}
placeholder="搜索课程"/> placeholder="搜索课程"/>
</div> </div>
<div className="right right-btn"> <div className="right right-btn" onClick={this.search}>
<div className="submit-btn" <div className="submit-btn">搜索
>搜索
</div> </div>
</div> </div>
</div> </div>
......
src/utils/index.js
export { default as http } from './http' export { default as http } from './http'
export { default as api } from './api' export { default as api } from './api'
export { html, initCaptcha } export { html, initCaptcha, browser }
export const getParam = (key, str) => { export const getParam = (key, str) => {
...@@ -69,3 +69,13 @@ export const is_weixin = () => { ...@@ -69,3 +69,13 @@ export const is_weixin = () => {
} }
return false; return false;
} }
const browser = (function () {
const ua = navigator.userAgent
return {
isWeixin: /MicroMessenger/i.test(ua),
isAndroid: /Android/i.test(ua),
isIOS: /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua),
isIPad: /iPad/i.test(ua)
}
})()
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment