Skip to content

M
mr-julyedu
Commit ba4e38a5 by zhanghaozhe
Options

search recommendation

parent 2c5d5fe4
Showing with 191 additions and 31 deletions
src/common/Course/index.js
...@@ -3,12 +3,12 @@ import './course.scss' ...@@ -3,12 +3,12 @@ import './course.scss'
const Course = (props) => { const Course = (props) => {
return ( return (
<li className='course-item'> <li className='course-item' onClick={props.handleClick.bind(this, props.id)}>
{props.top} {props.top}
<a href="/#"> <div>
<img src={props.img} alt=""/> <img src={props.img} alt=""/>
<p className="course-title text-overflow-2">{props.title}</p> <p className="course-title text-overflow-2">{props.title}</p>
</a> </div>
{props.bottom} {props.bottom}
</li> </li>
); );
......
src/components/detail/bargain/bargain.scss
.bargain { .bargain-func {
padding: 8px; padding: 8px;
border-top: 8px solid $bg_f5f5f5; border-top: 8px solid $bg_f5f5f5;
......
src/components/detail/bargain/index.js
...@@ -14,7 +14,7 @@ class Bargain extends Component { ...@@ -14,7 +14,7 @@ class Bargain extends Component {
render() { render() {
return ( return (
<div className={'bargain'}> <div className={'bargain-func'}>
<BargainIntro <BargainIntro
onClick={this.toggleCover} onClick={this.toggleCover}
/> />
......
src/components/search/index.js
...@@ -24,10 +24,6 @@ class Search extends PureComponent { ...@@ -24,10 +24,6 @@ class Search extends PureComponent {
} }
} }
search = text => {
}
clearHistory = () => { clearHistory = () => {
localStorage.setItem('searchHistory', null) localStorage.setItem('searchHistory', null)
this.setState({ this.setState({
...@@ -40,7 +36,11 @@ class Search extends PureComponent { ...@@ -40,7 +36,11 @@ class Search extends PureComponent {
} }
handleSearch = () => { handleSearch = () => {
this.props.history.push(`/search-result?word=${encodeURIComponent(this.state.value)}`) this.state.value && this.props.history.push(`/search-result?word=${encodeURIComponent(this.state.value)}`)
}
storeHistory = keyword => {
localStorage.setItem('searchHistory', JSON.stringify([...this.state.searchHistory, keyword]))
} }
...@@ -50,7 +50,6 @@ class Search extends PureComponent { ...@@ -50,7 +50,6 @@ class Search extends PureComponent {
<div className="search-page"> <div className="search-page">
<SearchHead <SearchHead
searchHistory={this.state.searchHistory} searchHistory={this.state.searchHistory}
clearHistory={this.clearHistory}
value={this.state.value} value={this.state.value}
handleChange={this.handleChange} handleChange={this.handleChange}
handleSearch={this.handleSearch} handleSearch={this.handleSearch}
...@@ -65,7 +64,14 @@ class Search extends PureComponent { ...@@ -65,7 +64,14 @@ class Search extends PureComponent {
{ {
searchHistory.length > 0 ? searchHistory.length > 0 ?
searchHistory.map((v, i) => { searchHistory.map((v, i) => {
return (<Tag key={i}>{v}</Tag>) return (
<Link
key={i}
to={`/search-result?word=${encodeURIComponent(v)}`}
>
<Tag>{v}</Tag>
</Link>
)
}) })
: <div style={{textAlign: 'center', padding: '20px'}}>暂无历史</div> : <div style={{textAlign: 'center', padding: '20px'}}>暂无历史</div>
} }
...@@ -79,9 +85,11 @@ class Search extends PureComponent { ...@@ -79,9 +85,11 @@ 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=${encodeURIComponent(v)}`}> <Link key={i}
to={`/search-result?word=${encodeURIComponent(v)}`}
onClick={this.storeHistory.bind(this, v)}
>
<Tag>{v}</Tag> <Tag>{v}</Tag>
</Link> </Link>
) )
......
src/components/search/recommendation/index.js 0 → 100644
import React, { Component } from "react";
import './recommendation.scss'
import { Course } from "@/common";
import { api, http } from "@/utils";
import { Toast } from 'antd-mobile'
import {withRouter} from 'react-router-dom'
class Recommendation extends Component {
state = {
courses: []
}
componentDidMount() {
http.get(`${api['search-api']}/search_hot_word`)
.then(res => {
if (res.data.errno === 0) {
this.setState({
courses: res.data.data.info.courses
})
} else {
Toast.info(res.data.msg)
}
})
}
handleClick = (id) => {
this.props.history.push(`/detail?id=${id}`)
}
render() {
const {courses} = this.state
return (
<div className="recommendation">
<div className="title">推荐课程</div>
<div className="courses">
{
courses.length > 0 &&
courses.map((item, index) => {
const Bottom = (
<div className='bottom'>
<span className='price'>{item['price1']}</span>
<span className='old-price'>{item['price0']}</span>
</div>
)
return (
<Course
key={item['course_id']}
id={item['course_id']}
img={item['image_name']}
title={item['course_title']}
bottom={Bottom}
handleClick={this.handleClick}
/>
)
})
}
</div>
</div>
)
}
}
export default withRouter(Recommendation)
src/components/search/recommendation/recommendation.scss 0 → 100644
.search-result {
padding: 0 15px;
.recommendation {
.title {
width: 100%;
font-size: 15px;
padding: 20px 0 5px;
text-align: center;
}
.courses {
display: flex;
flex-flow: wrap;
justify-content: space-between;
}
.bottom{
margin-top: 12px;
}
.price {
color: #FF2121;
font-size: 15px;
margin-right: 15px;
}
.old-price {
color: $color_999;
font-size: 11px;
text-decoration: line-through;
}
}
}
src/components/search/search-result.js
...@@ -3,7 +3,8 @@ import SearchHeader from './searchHead' ...@@ -3,7 +3,8 @@ import SearchHeader from './searchHead'
import VList from '@/common/VList' import VList from '@/common/VList'
import { http, api, getParam } from '@/utils' import { http, api, getParam } from '@/utils'
import './search-result.scss' import './search-result.scss'
import classnames from 'classnames'
import Recommendation from './recommendation'
const Bottom = ({item}) => { const Bottom = ({item}) => {
return ( return (
...@@ -45,7 +46,7 @@ class SearchResult extends PureComponent { ...@@ -45,7 +46,7 @@ class SearchResult extends PureComponent {
} }
handleSearch = () => { handleSearch = () => {
this.getCourses(this.state.value) this.state.value && this.getCourses(this.state.value)
} }
handleChange = value => { handleChange = value => {
...@@ -53,13 +54,6 @@ class SearchResult extends PureComponent { ...@@ -53,13 +54,6 @@ class SearchResult extends PureComponent {
} }
clearHistory = () => {
localStorage.setItem('searchHistory', null)
this.setState({
searchHistory: []
})
}
render() { render() {
const {courseList} = this.state const {courseList} = this.state
...@@ -70,12 +64,12 @@ class SearchResult extends PureComponent { ...@@ -70,12 +64,12 @@ class SearchResult extends PureComponent {
value={this.state.value} value={this.state.value}
handleChange={this.handleChange} handleChange={this.handleChange}
searchHistory={this.state.searchHistory} searchHistory={this.state.searchHistory}
clearHistory={this.clearHistory}
/> />
<ul>
{ {
courseList && courseList.length > 0 ? courseList && courseList.length > 0 ?
<ul>
{
courseList.map(item => { courseList.map(item => {
const Info = ( const Info = (
<div className="info"> <div className="info">
...@@ -86,21 +80,38 @@ class SearchResult extends PureComponent { ...@@ -86,21 +80,38 @@ class SearchResult extends PureComponent {
/> />
</div> </div>
) )
const status = (
(item['bargain_num'] || item['groupon_num']) ?
<div
className={classnames('status', [item['bargain_num'] ? 'bargain' : 'group'])}>
{
item['bargain_num'] === 0 ? `砍价减${item['groupon_num']}元` : `拼团减${item['bargain_num']}元`
}
</div>
: null
)
return ( return (
<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']} id={item['course_id']}
status={status}
/> />
) )
}) : null })
} }
</ul> </ul>
: <div className="empty">
抱歉！没有搜到相关内容
</div>
}
<Recommendation/>
</div> </div>
); );
} }
} }
export default SearchResult; export default SearchResult;
\ No newline at end of file
src/components/search/search-result.scss
...@@ -7,6 +7,12 @@ ...@@ -7,6 +7,12 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.title{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.des { .des {
font-size: $font_14; font-size: $font_14;
line-height: 16px; line-height: 16px;
...@@ -25,8 +31,37 @@ ...@@ -25,8 +31,37 @@
color: $color_999; color: $color_999;
font-size: $font_12; font-size: $font_12;
} }
.bottom{
.bottom {
align-self: flex-end; align-self: flex-end;
} }
} }
.empty {
font-size: 12px;
color: $color_666;
padding: 30px 0;
text-align: center;
background-color: $bg_ccc;
}
.status {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 24px;
text-align: center;
line-height: 24px;
font-size: 13px;
color: $white;
&.group {
background-color: rgba(224, 46, 36, 0.6);
}
&.bargain {
background-color: rgba(224, 46, 36, 0.6);
}
}
} }
\ No newline at end of file
src/components/search/searchHead.js
...@@ -20,8 +20,8 @@ class SearchHead extends PureComponent { ...@@ -20,8 +20,8 @@ class SearchHead extends PureComponent {
} }
storeKeyword = () => { storeKeyword = () => {
let searchHistory = this.props.searchHistory || [] let {searchHistory = [], value} = this.props
localStorage.setItem('searchHistory', JSON.stringify([...searchHistory, this.props.value])) value && localStorage.setItem('searchHistory', JSON.stringify([...searchHistory, value]))
} }
...@@ -30,7 +30,7 @@ class SearchHead extends PureComponent { ...@@ -30,7 +30,7 @@ class SearchHead extends PureComponent {
<div className="search-head"> <div className="search-head">
<div className="left" onClick={this.returnPage}> <div className="left" onClick={this.returnPage}>
<i className="iconfont iconiconfront-68" onClick={this.props.clearHistory}/> <i className="iconfont iconiconfront-68"/>
</div> </div>
<div className="center"> <div className="center">
......
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