Skip to content

M
mr-julyedu
Commit 40315e34 by zhanghaozhe
Options

搜索结果

parent a5c96251
Showing with 77 additions and 72 deletions
public/api.js
var API = { var API = {
'www': 'http://www-test.julyedu.com', 'www': 'http://www-test.julyedu.com',
'home': 'http://fast-test.julyedu.com', 'home': 'http://fast-test.julyedu.com',
'search-api': 'https://search.julyedu.com', 'search-api': 'http://search-test.julyedu.com',
'passport-api': 'http://passport-test.julyedu.com', 'passport-api': 'http://passport-test.julyedu.com',
'base-api': 'http://api-test.julyedu.com', 'base-api': 'http://api-test.julyedu.com',
'record': 'record.julyedu.com:8001', 'record': 'record.julyedu.com:8001',
......
src/components/search/search-result.js
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react'
import SearchHeader from './searchHead' import SearchHeader from './searchHead'
import VList from 'src/common/VList' import VList from 'src/common/VList'
import { http, getParam } from 'src/utils' import { http, getParam } from 'src/utils'
...@@ -6,16 +6,15 @@ import './search-result.scss' ...@@ -6,16 +6,15 @@ import './search-result.scss'
import Recommendation from './recommendation' import Recommendation from './recommendation'
import throttle from 'lodash/throttle' import throttle from 'lodash/throttle'
const ForwardRefSearchHead = React.forwardRef((props, ref) => { const ForwardRefSearchHead = React.forwardRef((props, ref) => {
return <SearchHeader {...props} forwardedRef={ref}/> return <SearchHeader {...props} forwardedRef={ref} />
}) })
const Bottom = ({item}) => { const Bottom = ({ item }) => {
return ( return (
<div className='bottom'> <div className="bottom">
<span className='price'>¥{item.price1}</span> <span className="price">¥{item.price1}</span>
<span className='stale-price'>¥{item.price0}</span> <span className="stale-price">¥{item.price0}</span>
</div> </div>
) )
} }
...@@ -31,10 +30,11 @@ class SearchResult extends PureComponent { ...@@ -31,10 +30,11 @@ class SearchResult extends PureComponent {
value: decodeURIComponent(getParam('word')) || '', value: decodeURIComponent(getParam('word')) || '',
searchHistory: JSON.parse(localStorage.getItem('searchHistory')) || [], searchHistory: JSON.parse(localStorage.getItem('searchHistory')) || [],
fixedHeader: false, fixedHeader: false,
searchHeadStyle: {top: 0}, searchHeadStyle: { top: 0 },
swipeDirection: this.swipeUp, swipeDirection: this.swipeUp,
isHide: false, isHide: false,
basicTop: 0 basicTop: 0,
resultCount: 0,
} }
componentDidMount() { componentDidMount() {
...@@ -46,16 +46,15 @@ class SearchResult extends PureComponent { ...@@ -46,16 +46,15 @@ class SearchResult extends PureComponent {
document.removeEventListener('scroll', this.handleScroll) document.removeEventListener('scroll', this.handleScroll)
} }
getCourses = word => {
getCourses = (word) => { http.get(`${API['search-api']}/search/${word}?type=v2-course&page=1`).then(res => {
http.get(`${API['search-api']}/search/${word}?type=course&page=1`)
.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,
}); resultCount: data.data.info['search_data'].num,
})
} }
}) })
} }
...@@ -69,31 +68,31 @@ class SearchResult extends PureComponent { ...@@ -69,31 +68,31 @@ class SearchResult extends PureComponent {
} }
handleChange = value => { handleChange = value => {
this.setState({value}) this.setState({ value })
} }
toCourseDetail = (id) => { toCourseDetail = id => {
const {history} = this.props; const { history } = this.props
history.push(`/detail?id=${id}`) history.push(`/detail?id=${id}`)
} }
handleScroll = throttle(() => { handleScroll = throttle(() => {
let y = window.scrollY < 0? 0 : window.scrollY, let y = window.scrollY < 0 ? 0 : window.scrollY,
headY = this.searchHead.current.offsetTop, headY = this.searchHead.current.offsetTop,
h = this.searchHead.current.offsetHeight; h = this.searchHead.current.offsetHeight
if(y > this.prevScrollY) { if (y > this.prevScrollY) {
this.setState({ this.setState({
searchHeadStyle: { searchHeadStyle: {
top : `${-h}px` top: `${-h}px`,
} },
}); })
} }
if(y < this.prevScrollY) { if (y < this.prevScrollY) {
this.setState({ this.setState({
searchHeadStyle: { searchHeadStyle: {
top: 0 top: 0,
} },
}); })
} }
// if (y < this.prevScrollY) { // if (y < this.prevScrollY) {
// if (this.state.swipeDirection === this.swipeDown) { // if (this.state.swipeDirection === this.swipeDown) {
...@@ -118,7 +117,6 @@ class SearchResult extends PureComponent { ...@@ -118,7 +117,6 @@ class SearchResult extends PureComponent {
// } // }
// }) // })
// } // }
// }) // })
// } // }
...@@ -132,15 +130,14 @@ class SearchResult extends PureComponent { ...@@ -132,15 +130,14 @@ class SearchResult extends PureComponent {
// } // }
// }) // })
// } // }
this.prevScrollY = y; this.prevScrollY = y
}, 0) }, 0)
render() { render() {
const { courseList, isHide } = this.state; const { courseList, isHide, resultCount } = this.state
return ( return (
<div <div className={'search-result'}>
className={'search-result'}>
<ForwardRefSearchHead <ForwardRefSearchHead
handleSearch={this.handleSearch} handleSearch={this.handleSearch}
value={this.state.value} value={this.state.value}
...@@ -150,55 +147,51 @@ class SearchResult extends PureComponent { ...@@ -150,55 +147,51 @@ class SearchResult extends PureComponent {
ref={this.searchHead} ref={this.searchHead}
isHide={isHide} isHide={isHide}
/> />
{ {resultCount > 0 && <div className="result-count">共{resultCount}个结果</div>}
{courseList && courseList.length > 0 ? (
courseList && courseList.length > 0 ?
<ul> <ul>
{ {courseList.map((item, index) => {
courseList.map(item => {
const Info = ( const Info = (
<div className="info"> <div className="info">
<p className='title text-overflow-2'>{item.course_title}</p> <p
<p className='des text-overflow-1'>{item.simpledescription}</p> className="title text-overflow-2"
<Bottom dangerouslySetInnerHTML={{
item={item} __html:
/> item.highlight?.course_title?.length > 0 ? item.highlight.course_title[0] : item.course_title,
}}
></p>
<p className="des text-overflow-1">{item.simpledescription}</p>
<Bottom item={item} />
</div> </div>
) )
const status = ( const status =
(item['bargain_num'] || item['groupon_num']) ? item['bargain_num'] || item['groupon_num'] ? (
<div <div className="status">
className='status'> {item['bargain_num'] === 0 ? `砍价减${item['groupon_num']}元` : `拼团减${item['bargain_num']}元`}
{
item['bargain_num'] === 0 ? `砍价减${item['groupon_num']}元` : `拼团减${item['bargain_num']}元`
}
</div> </div>
: null ) : null
)
return ( return (
<VList <VList
img={item.image_name} img={item.image_name}
toDetail={this.toCourseDetail} toDetail={this.toCourseDetail}
key={item.course_id} key={index}
info={Info} info={Info}
id={item['course_id']} id={item['course_id']}
status={status} status={status}
/> />
) )
}) })}
}
</ul> </ul>
: <div className="empty"> ) : (
<img src={require('./image/ss_empty.png')} alt=""/> <div className="empty">
<img src={require('./image/ss_empty.png')} alt="" />
抱歉，没有搜到相关内容！ 抱歉，没有搜到相关内容！
</div> </div>
} )}
<Recommendation/> <Recommendation />
</div> </div>
); )
} }
} }
export default SearchResult
export default SearchResult;
\ No newline at end of file
src/components/search/search-result.scss
@import "src/assets/css/variable"; @import 'src/assets/css/variable';
.search-result { .search-result {
padding-top: 44px; padding-top: 44px;
...@@ -16,13 +16,23 @@ ...@@ -16,13 +16,23 @@
} }
} }
.result-count {
width: 375px;
height: 30px;
background: #f7f7fb;
border-top: 1px solid #ddd;
color: #333;
font-size: 12px;
text-align: center;
line-height: 30px;
}
ul { ul {
list-style: none; list-style: none;
border-top:1px solid #ddd;
} }
.v-list-item{ .v-list-item {
.content{ .content {
width: 100%; width: 100%;
} }
} }
...@@ -31,14 +41,17 @@ ...@@ -31,14 +41,17 @@
width: 50%; width: 50%;
position: relative; position: relative;
display: block; display: block;
.title{ .title {
font-size: $font_16; font-size: $font_16;
color:#525C65; color: #525c65;
em {
color: #09f;
}
} }
.des { .des {
font-size: $font_14; font-size: $font_14;
color:#777; color: #777;
margin-top: 10px; margin-top: 10px;
} }
......
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