Skip to content

M
mr-julyedu
Commit 40315e34 by zhanghaozhe
Options

搜索结果

parent a5c96251
Showing with 267 additions and 263 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,199 +6,192 @@ import './search-result.scss' ...@@ -6,199 +6,192 @@ 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>
) )
} }
class SearchResult extends PureComponent { class SearchResult extends PureComponent {
prevScrollY = 0 prevScrollY = 0
searchHead = React.createRef() searchHead = React.createRef()
swipeUp = 'up' swipeUp = 'up'
swipeDown = 'down' swipeDown = 'down'
state = { state = {
courseList: [], courseList: [],
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() {
this.getCourses(getParam('word')) componentDidMount() {
document.addEventListener('scroll', this.handleScroll) this.getCourses(getParam('word'))
} document.addEventListener('scroll', this.handleScroll)
}
componentWillUnmount() {
document.removeEventListener('scroll', this.handleScroll) componentWillUnmount() {
} document.removeEventListener('scroll', this.handleScroll)
}
getCourses = (word) => { getCourses = word => {
http.get(`${API['search-api']}/search/${word}?type=course&page=1`) http.get(`${API['search-api']}/search/${word}?type=v2-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 resultCount: data.data.info['search_data'].num,
}); })
} }
}) })
}
handleClick = id => {
this.props.history.push(`/detail?id=${id}`)
}
handleSearch = () => {
this.state.value && this.getCourses(this.state.value)
}
handleChange = value => {
this.setState({ value })
}
toCourseDetail = id => {
const { history } = this.props
history.push(`/detail?id=${id}`)
}
handleScroll = throttle(() => {
let y = window.scrollY < 0 ? 0 : window.scrollY,
headY = this.searchHead.current.offsetTop,
h = this.searchHead.current.offsetHeight
if (y > this.prevScrollY) {
this.setState({
searchHeadStyle: {
top: `${-h}px`,
},
})
} }
if (y < this.prevScrollY) {
handleClick = id => { this.setState({
this.props.history.push(`/detail?id=${id}`) searchHeadStyle: {
} top: 0,
},
handleSearch = () => { })
this.state.value && this.getCourses(this.state.value)
} }
// if (y < this.prevScrollY) {
// if (this.state.swipeDirection === this.swipeDown) {
// y <= headY && this.state.searchHeadStyle.position !== 'fixed' &&
// this.setState({
// searchHeadStyle: {
// top: `0`,
// position: 'fixed'
// }
// })
// } else {
// this.setState({
// swipeDirection: this.swipeDown
// }, () => {
// if (this.state.swipeDirection === this.swipeDown) {
// let h = y > document.querySelector('body').offsetHeight? document.querySelector('body').offsetHeight: y;
// let h1 = this.searchHead.current.offsetHeight
// this.setState({
// searchHeadStyle: {
// // top: `${h > headY ? h - h1 : h}px`
// top: `${y}px`
// }
// })
// }
// })
// }
// } else {
// this.state.swipeDirection !== this.swipeUp &&
// this.setState({
// swipeDirection: this.swipeUp,
// searchHeadStyle: {
// position: 'absolute',
// top: `${y}px`
// }
// })
// }
this.prevScrollY = y
}, 0)
render() {
const { courseList, isHide, resultCount } = this.state
handleChange = value => { return (
this.setState({value}) <div className={'search-result'}>
} <ForwardRefSearchHead
handleSearch={this.handleSearch}
toCourseDetail = (id) => { value={this.state.value}
const {history} = this.props; handleChange={this.handleChange}
history.push(`/detail?id=${id}`) searchHistory={this.state.searchHistory}
} style={this.state.searchHeadStyle}
ref={this.searchHead}
handleScroll = throttle(() => { isHide={isHide}
let y = window.scrollY < 0? 0 : window.scrollY, />
headY = this.searchHead.current.offsetTop, {resultCount > 0 && <div className="result-count">共{resultCount}个结果</div>}
h = this.searchHead.current.offsetHeight; {courseList && courseList.length > 0 ? (
if(y > this.prevScrollY) { <ul>
this.setState({ {courseList.map((item, index) => {
searchHeadStyle: { const Info = (
top : `${-h}px` <div className="info">
} <p
}); className="title text-overflow-2"
} dangerouslySetInnerHTML={{
if(y < this.prevScrollY) { __html:
this.setState({ item.highlight?.course_title?.length > 0 ? item.highlight.course_title[0] : item.course_title,
searchHeadStyle: { }}
top: 0 ></p>
} <p className="des text-overflow-1">{item.simpledescription}</p>
}); <Bottom item={item} />
} </div>
// if (y < this.prevScrollY) { )
// if (this.state.swipeDirection === this.swipeDown) { const status =
// y <= headY && this.state.searchHeadStyle.position !== 'fixed' && item['bargain_num'] || item['groupon_num'] ? (
// this.setState({ <div className="status">
// searchHeadStyle: { {item['bargain_num'] === 0 ? `砍价减${item['groupon_num']}元` : `拼团减${item['bargain_num']}元`}
// top: `0`, </div>
// position: 'fixed' ) : null
// } return (
// }) <VList
// } else { img={item.image_name}
// this.setState({ toDetail={this.toCourseDetail}
// swipeDirection: this.swipeDown key={index}
// }, () => { info={Info}
// if (this.state.swipeDirection === this.swipeDown) { id={item['course_id']}
// let h = y > document.querySelector('body').offsetHeight? document.querySelector('body').offsetHeight: y; status={status}
// let h1 = this.searchHead.current.offsetHeight
// this.setState({
// searchHeadStyle: {
// // top: `${h > headY ? h - h1 : h}px`
// top: `${y}px`
// }
// })
// }
// })
// }
// } else {
// this.state.swipeDirection !== this.swipeUp &&
// this.setState({
// swipeDirection: this.swipeUp,
// searchHeadStyle: {
// position: 'absolute',
// top: `${y}px`
// }
// })
// }
this.prevScrollY = y;
}, 0)
render() {
const { courseList, isHide } = this.state;
return (
<div
className={'search-result'}>
<ForwardRefSearchHead
handleSearch={this.handleSearch}
value={this.state.value}
handleChange={this.handleChange}
searchHistory={this.state.searchHistory}
style={this.state.searchHeadStyle}
ref={this.searchHead}
isHide={isHide}
/> />
{ )
})}
courseList && courseList.length > 0 ? </ul>
<ul> ) : (
{ <div className="empty">
courseList.map(item => { <img src={require('./image/ss_empty.png')} alt="" />
const Info = ( 抱歉，没有搜到相关内容！
<div className="info"> </div>
<p className='title text-overflow-2'>{item.course_title}</p> )}
<p className='des text-overflow-1'>{item.simpledescription}</p> <Recommendation />
<Bottom </div>
item={item} )
/> }
</div>
)
const status = (
(item['bargain_num'] || item['groupon_num']) ?
<div
className='status'>
{
item['bargain_num'] === 0 ? `砍价减${item['groupon_num']}元` : `拼团减${item['bargain_num']}元`
}
</div>
: null
)
return (
<VList
img={item.image_name}
toDetail={this.toCourseDetail}
key={item.course_id}
info={Info}
id={item['course_id']}
status={status}
/>
)
})
}
</ul>
: <div className="empty">
<img src={require('./image/ss_empty.png')} alt=""/>
抱歉，没有搜到相关内容！
</div>
}
<Recommendation/>
</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;
.search-head { .search-head {
// position: absolute; // position: absolute;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 10; z-index: 10;
transition: top 0.5 ease; transition: top 0.5 ease;
&.hide { &.hide {
top: -44px; top: -44px;
}
} }
}
ul { .result-count {
list-style: none; width: 375px;
border-top:1px solid #ddd; height: 30px;
} background: #f7f7fb;
border-top: 1px solid #ddd;
color: #333;
font-size: 12px;
text-align: center;
line-height: 30px;
}
.v-list-item{ ul {
.content{ list-style: none;
width: 100%; }
}
}
.info { .v-list-item {
width: 50%; .content {
position: relative; width: 100%;
display: block; }
.title{ }
font-size: $font_16;
color:#525C65;
}
.des { .info {
font-size: $font_14; width: 50%;
color:#777; position: relative;
margin-top: 10px; display: block;
} .title {
font-size: $font_16;
color: #525c65;
em {
color: #09f;
}
}
.price { .des {
color: $red; font-size: $font_14;
font-size: $font_16; color: #777;
margin-right: 14px; margin-top: 10px;
} }
.stale-price { .price {
text-decoration: line-through; color: $red;
color: $color_999; font-size: $font_16;
font-size: $font_12; margin-right: 14px;
} }
.bottom { .stale-price {
position: absolute; text-decoration: line-through;
bottom: 0; color: $color_999;
} font-size: $font_12;
} }
.empty { .bottom {
font-size: 12px; position: absolute;
color: #777; bottom: 0;
padding: 50px 0 30px 0;
text-align: center;
background-color: #fff;
border-top: 1px solid #ddd;
img {
width: 100px;
height: 81px;
display: block;
margin: 0 auto 15px auto;
}
} }
}
.status { .empty {
width: 100%; font-size: 12px;
position: absolute; color: #777;
bottom: -2px; padding: 50px 0 30px 0;
left: 0; text-align: center;
height: 24px; background-color: #fff;
text-align: center; border-top: 1px solid #ddd;
line-height: 24px; img {
font-size: 13px; width: 100px;
color: $white; height: 81px;
background-color: rgba(224, 46, 36, 0.6); display: block;
border-radius: 0 0 4px 4px; margin: 0 auto 15px auto;
} }
} }
\ No newline at end of file
.status {
width: 100%;
position: absolute;
bottom: -2px;
left: 0;
height: 24px;
text-align: center;
line-height: 24px;
font-size: 13px;
color: $white;
background-color: rgba(224, 46, 36, 0.6);
border-radius: 0 0 4px 4px;
}
}
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