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'
const VList = (props) => {
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="cover">
{props.status}
......
src/components/search/index.js
......@@ -7,13 +7,12 @@ import { Link } from 'react-router-dom'
class Search extends PureComponent {
constructor(props) {
super(props);
this.state = {
history: JSON.parse(localStorage.getItem('history')) || [],
state = {
searchHistory: JSON.parse(localStorage.getItem('searchHistory')) || [],
hot_words: [],
searchList: []
}
searchList: [],
value: ''
}
async componentDidMount() {
......@@ -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() {
let querystring = this.props.location.query ? this.props.location.query.s : '';
const {searchHistory} = this.state
return (
<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-land search-history">
<label>
<div className="search-land">
<div className='search-history'>
<span>最近搜索</span>
<i className="iconfont iconiconfront-56"/>
</label>
<i className="iconfont iconiconfront-56" onClick={this.clearHistory}/>
</div>
<div className="search-tag">
{
this.state.history.length > 0 ?
this.state.history.map((v, i) => {
searchHistory.length > 0 ?
searchHistory.map((v, i) => {
return (<Tag key={i}>{v}</Tag>)
})
: <div style={{textAlign: 'center', padding: '20px'}}>暂无历史</div>
......@@ -58,8 +79,9 @@ class Search extends PureComponent {
{
this.state['hot_words'].length > 0 ?
this.state['hot_words'].map((v, i) => {
console.log(encodeURIComponent(v));
return (
<Link key={i} to={`/search-result?word=${v}`}>
<Link key={i} to={`/search-result?word=${encodeURIComponent(v)}`}>
<Tag>{v}</Tag>
</Link>
)
......
src/components/search/index.scss
.search-page{
.search-main{
.search-page {
.search-main {
background-color: #fff;
padding:10px;
.search-land{
label{
margin-bottom:10px;
padding: 10px;
.search-land {
.search-history {
margin-bottom: 10px;
display: flex;
justify-content: space-between;
span{
font-size:16px;
}
img{
width:16px;
height:16px;
span {
font-size: 16px;
}
img {
width: 16px;
height: 16px;
display: block;
}
}
.search-tag{
.search-tag {
overflow: hidden;
}
}
.search-hot{
margin-top:10px;
.search-hot {
margin-top: 10px;
}
ul,li{
ul, li {
list-style: none;
padding:0;
margin:0;
padding: 0;
margin: 0;
}
.list{
padding:10px 0;
border-bottom:1px solid #eee;
.list {
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}) => {
class SearchResult extends PureComponent {
state = {
courseList: []
courseList: [],
value: '',
searchHistory: JSON.parse(localStorage.getItem('searchHistory')) || []
}
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 => {
const data = res.data
if (data.errno === 0) {
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() {
const {courseList} = this.state
return (
<div className='search-result'>
<SearchHeader/>
<SearchHeader
handleSearch={this.handleSearch}
value={this.state.value}
handleChange={this.handleChange}
searchHistory={this.state.searchHistory}
clearHistory={this.clearHistory}
/>
<ul>
{
......@@ -57,7 +90,9 @@ class SearchResult extends PureComponent {
<VList img={item.image_name}
handleClick={this.handleClick}
key={item.course_id}
info={Info}/>
info={Info}
id={item['course_id']}
/>
)
}) : null
}
......
src/components/search/searchHead.js
......@@ -5,53 +5,46 @@ import { withRouter } from 'react-router-dom'
import './search_header.scss'
class SearchHead extends PureComponent {
constructor(props) {
super(props);
this.state = {
visible: false,
selected: '',
val: this.props.value || ''
}
}
// 返回某个页面
returnPage() {
returnPage = () => {
this.props.history.go(-1)
}
//组件装载完毕
componentDidMount() {
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() {
return (
<div className="search-head">
<div className="left" onClick={() => {
// 返回某个页面
this.returnPage()
}}>
<i className="iconfont iconiconfront-68"/>
<div className="left" onClick={this.returnPage}>
<i className="iconfont iconiconfront-68" onClick={this.props.clearHistory}/>
</div>
<div className="center">
<SearchBar
value={this.state.val}
value={this.props.value}
showCancelButton
cancelText={" "}
ref="search"
focus={true}
onChange={(val) => {
this.setState({val})
this.props.search.changeVal(val)
}}
onChange={this.props.handleChange}
placeholder="搜索课程"/>
</div>
<div className="right right-btn">
<div className="submit-btn"
>搜索
<div className="right right-btn" onClick={this.search}>
<div className="submit-btn">搜索
</div>
</div>
</div>
......
src/utils/index.js
export { default as http } from './http'
export { default as api } from './api'
export { html, initCaptcha }
export { html, initCaptcha, browser }
export const getParam = (key, str) => {
......@@ -69,3 +69,13 @@ export const is_weixin = () => {
}
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