Skip to content

M
mr-julyedu
Commit f4a1d98f by zhanghaozhe
Options

限时免费分类页

parent 13150b30
Showing with 237 additions and 238 deletions
src/components/classify/courselist.js
...@@ -10,160 +10,160 @@ import { StickyContainer, Sticky } from "react-sticky"; ...@@ -10,160 +10,160 @@ import { StickyContainer, Sticky } from "react-sticky";
function stopScroll(e) { function stopScroll(e) {
e.preventDefault() e.preventDefault()
} }
@connect(({user}) => ({ @connect(({user}) => ({
user user
})) }))
class Classify extends Component { class Classify extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
ispull: false, ispull: false,
display: 'none', display: 'none',
arr: [{basics: []}, {advanced: []}], arr: [{basics: []}, {advanced: []}],
allClass: [], allClass: [],
data: [], data: [],
activeTab: decodeURIComponent(getParam('name')), activeTab: decodeURIComponent(getParam('name')),
isLoading: true, isLoading: true,
top: 44 top: 44
}
} }
componentDidMount() { }
this.getTabs()
this.getList()
const el = document.querySelector('.search-nav'); componentDidMount() {
this.setState({ this.getTabs()
top: el.offsetHeight this.getList()
});
}
componentWillUnmount() { const el = document.querySelector('.search-nav');
document.removeEventListener('touchmove', stopScroll) this.setState({
} top: el.offsetHeight
});
}
componentWillUnmount() {
document.removeEventListener('touchmove', stopScroll)
}
// 获取tabs接口
getTabs = () => {
let data = 0
http.get(`${API.home}/m/course/classify/${data}`)
.then((res) => {
const _this = this
if (res.data.code === 200) {
if (res.data.data.common.length > 0) {
let arr = ['basics', 'advanced']
let arr2 = [{basics: []}, {advanced: []}]
let arr3 = []
arr.forEach(function (item, index) {
arr2[item] = res.data.data.common[index]
res.data.data.common[index].list.forEach(function (item, index) {
arr3.push({'title': item.c_name, 'id': item.c_id})
})
})
_this.setState({
arr: arr2,
allClass: arr3
})
}
} else {
Toast.info(res.data.msg, 2)
}
// 获取tabs接口
getTabs = () => {
let data = 0
http.get(`${API.home}/m/course/classify/${data}`)
.then((res) => {
const _this = this
if (res.data.code === 200) {
if (res.data.data.common.length > 0) {
let arr = ['basics', 'advanced']
let arr2 = [{basics: []}, {advanced: []}]
let arr3 = []
arr.forEach(function (item, index) {
arr2[item] = res.data.data.common[index]
res.data.data.common[index].list.forEach(function (item, index) {
arr3.push({'title': item.c_name, 'id': item.c_id})
})
}) })
.catch(err => { _this.setState({
console.log(err) arr: arr2,
allClass: arr3
}) })
} }
} else {
Toast.info(res.data.msg, 2)
}
// 获取课程接口 })
getList = () => { .catch(err => {
const _this = this console.log(err)
_this.setState((state, props)=>({ })
isLoading: true }
}));
http.get(`${API.home}/m/course/list/${getParam('id')}`).then((res) => { // 获取课程接口
if (res.data.code === 200) { getList = () => {
_this.setState({ const _this = this
data: res.data.data, _this.setState((state, props) => ({
isLoading: false isLoading: true
}) }));
} http.get(`${API.home}/m/course/list/${getParam('id')}`).then((res) => {
if (res.data.code === 200) {
_this.setState({
data: res.data.data,
isLoading: false
}) })
} }
})
}
// 点击横向滚动tab查询 // 点击横向滚动tab查询
ontabclick = (tab) => { ontabclick = (tab) => {
this.props.history.push(`/courselist?id=${tab.id}&name=${tab.title}`) this.props.history.push(`/courselist?id=${tab.id}&name=${tab.title}`)
this.getList() this.getList()
this.setState({ this.setState({
activeTab: decodeURIComponent(getParam('name')) activeTab: decodeURIComponent(getParam('name'))
}); });
} }
// 上下展示 // 上下展示
pulldown = () => { pulldown = () => {
this.setState(status => ({ this.setState(status => ({
ispull: !status.ispull, ispull: !status.ispull,
display: status.ispull ? 'none' : 'block' display: status.ispull ? 'none' : 'block'
}), () => { }), () => {
this.state.ispull ? document.addEventListener('touchmove', stopScroll, { this.state.ispull ? document.addEventListener('touchmove', stopScroll, {
passive: false passive: false
}) : document.removeEventListener('touchmove', stopScroll) }) : document.removeEventListener('touchmove', stopScroll)
}); });
} }
// 弹窗里面tab点击查询 // 弹窗里面tab点击查询
labelclick = (item) => { labelclick = (item) => {
this.props.history.push(`/courselist?id=${item.c_id}&name=${item.c_name}`) this.props.history.push(`/courselist?id=${item.c_id}&name=${item.c_name}`)
this.getList() this.getList()
this.setState(status => ({ this.setState(status => ({
ispull: !status.ispull, ispull: !status.ispull,
display: status.ispull ? 'none' : 'block', display: status.ispull ? 'none' : 'block',
activeTab: decodeURIComponent(getParam('name')) activeTab: decodeURIComponent(getParam('name'))
})) }))
} }
toCourseDetail = (id) => { toCourseDetail = (id) => {
const {dispatch, history} = this.props; const {dispatch, history} = this.props;
// dispatch(getCourses(id, () => { // dispatch(getCourses(id, () => {
history.push(`/detail?id=${id}`) history.push(`/detail?id=${id}`)
// })); // }));
} }
toClassify = () => { toClassify = () => {
this.props.history.replace('/classify'); this.props.history.replace('/classify');
} }
render() { render() {
const {user = {}} = this.props; const {user = {}} = this.props;
let isLogin = user.data && user.data.uid ? true : false; let isLogin = user.data && user.data.uid ? true : false;
const bottom = ( const bottom = (
<i className={'iconfont iconiconfront-69 pull-down'}></i> <i className={'iconfont iconiconfront-69 pull-down'}></i>
) )
const top = ( const top = (
<i className={'iconfont iconiconfront-71 pull-down'}></i> <i className={'iconfont iconiconfront-71 pull-down'}></i>
) )
let page = this.state.allClass.findIndex((item) => item.title === this.state.activeTab) let page = this.state.allClass.findIndex((item) => item.title === this.state.activeTab)
return ( return (
<div className='class-child'> <div className='class-child'>
<HeaderSearch <HeaderSearch
isLogin={isLogin} isLogin={isLogin}
toHref={this.toClassify} toHref={this.toClassify}
/> />
<Loading isLoading={this.state.isLoading}> <Loading isLoading={this.state.isLoading}>
<div className='class-content'> <div className='class-content'>
{/* <WhiteSpace/> */} {/* <WhiteSpace/> */}
<div onClick={this.pulldown.bind(this)}> <div onClick={this.pulldown.bind(this)}>
{this.state.ispull ? top : bottom} {this.state.ispull ? top : bottom}
</div> </div>
<StickyContainer> <StickyContainer>
{/* <Tabs {/* <Tabs
tabs={this.state.allClass} tabs={this.state.allClass}
animated={false} animated={false}
page={page} page={page}
...@@ -172,119 +172,118 @@ class Classify extends Component { ...@@ -172,119 +172,118 @@ class Classify extends Component {
<Tabs.DefaultTabBar {...props}/> <Tabs.DefaultTabBar {...props}/>
</div>} </div>}
> */} > */}
<Tabs <Tabs
tabs={this.state.allClass} tabs={this.state.allClass}
animated={false} animated={false}
page={page} page={page}
onChange={(tab) => this.ontabclick(tab)} onChange={(tab) => this.ontabclick(tab)}
renderTabBar={props => { renderTabBar={props => {
return ( return (
<Sticky> <Sticky>
{({ style }) => { {({style}) => {
return ( return (
<div style={{ ...style, top: `${this.state.top}px`, zIndex: 1 }}> <div style={{...style, top: `${this.state.top}px`, zIndex: 1}}>
<Tabs.DefaultTabBar {...props} /> <Tabs.DefaultTabBar {...props} />
</div> </div>
) )
}} }}
</Sticky> </Sticky>
) )
}} }}
> >
<div className='tabs'> <div className='tabs'>
<ul> <ul>
{this.state.data && this.state.data.length > 0 && this.state.data.map((item, index) => { {this.state.data && this.state.data.length > 0 && this.state.data.map((item, index) => {
const Info = ( const Info = (
<div className="info"> <div className="info">
<p className='title' <p className='title'
onClick={() => this.toCourseDetail(item.course_id)}> onClick={() => this.toCourseDetail(item.course_id)}>
{item.course_title} {item.course_title}
</p> </p>
<p className='contact text-overflow-2'>{item.desc}</p> <p className='contact text-overflow-2'>{item.desc}</p>
<div className='des'> <div className='des'>
{!item.is_buy && <p className="course-price"> {
<span className="new">¥{item.price1}</span> !item.is_buy ?
<span className="old">¥{item.price0}</span> item.is_restricted ?
</p> <div className="limit-free">
} <span>限时免费</span>
{item.is_buy && <span>¥{item.price0}</span>
<span className="isbuy">已购买</span> </div>
} : <p className="course-price">
{ <span className="new">¥{item.price1}</span>
false && <div className="limit-free"> <span className="old">¥{item.price0}</span>
<span>限时免费</span> </p>
<span>¥{item.price0}</span> : <span className="isbuy">已购买</span>
</div> }
} </div>
</div> </div>
</div> )
) const status = (
const status = ( !item.is_buy &&
!item.is_buy && <div>
<div> {item.bargain_num === 0 && item.groupon_num !== 0 &&
{item.bargain_num === 0 && item.groupon_num !== 0 && <p className='course-status'>拼团减{item.groupon_num}元</p>
<p className='course-status'>拼团减{item.groupon_num}元</p> }
} {item.bargain_num !== 0 && item.groupon_num === 0 &&
{item.bargain_num !== 0 && item.groupon_num === 0 && <p className='course-status'>砍价减{item.bargain_num}元</p>
<p className='course-status'>砍价减{item.bargain_num}元</p> }
} {
{ item.is_aist && <span className='return_cash'></span>
item.is_aist && <span className='return_cash'></span> }
} </div>
</div> )
) return (
return ( <VList
<VList key={index}
key={index} status={status}
status={status} img={item.image_name}
img={item.image_name} id={item.course_id}
id={item.course_id} info={Info}
info={Info} toDetail={this.toCourseDetail}
toDetail={this.toCourseDetail} />
/> )
) })}
})} </ul>
</ul> </div>
</div> </Tabs>
</Tabs>
</StickyContainer> </StickyContainer>
<WhiteSpace/> <WhiteSpace/>
</div> </div>
<div className='mbc-box' style={{display: this.state.display}}> <div className='mbc-box' style={{display: this.state.display}}>
{ {
this.state.arr.basics && this.state.arr.basics &&
<div className="tabcontent"> <div className="tabcontent">
<ClassCourse activeTab={this.state.activeTab} data={this.state.arr.basics.list} <ClassCourse activeTab={this.state.activeTab} data={this.state.arr.basics.list}
title={this.state.arr.basics.name} labelclick={this.labelclick}/> title={this.state.arr.basics.name} labelclick={this.labelclick}/>
<ClassCourse activeTab={this.state.activeTab} data={this.state.arr.advanced.list} <ClassCourse activeTab={this.state.activeTab} data={this.state.arr.advanced.list}
title={this.state.arr.advanced.name} labelclick={this.labelclick}/> title={this.state.arr.advanced.name} labelclick={this.labelclick}/>
</div> </div>
} }
</div> </div>
</Loading> </Loading>
</div> </div>
) )
} }
} }
function ClassCourse(props) { function ClassCourse(props) {
return ( return (
<div className="class-course"> <div className="class-course">
<p className='course-items-title'>{props.title}</p> <p className='course-items-title'>{props.title}</p>
<div className='items-box'> <div className='items-box'>
{ {
props.data && props.data.length > 0 && props.data.map((item, index) => { props.data && props.data.length > 0 && props.data.map((item, index) => {
return ( return (
<span className={props.activeTab === item.c_name ? 'active-label' : 'item-label'} <span className={props.activeTab === item.c_name ? 'active-label' : 'item-label'}
key={index} onClick={e => props.labelclick(item)}>{item.c_name}</span> key={index} onClick={e => props.labelclick(item)}>{item.c_name}</span>
) )
}) })
} }
</div> </div>
</div> </div>
) )
} }
export default Classify; export default Classify;
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