Skip to content

M
mr-julyedu
Commit 3d02edc5 by zhanghaozhe
Options

分类页修改

parent cbcf02bc
Showing with 110 additions and 80 deletions
src/common/index.js
...@@ -7,6 +7,6 @@ export { default as CallApp } from './CallApp' ...@@ -7,6 +7,6 @@ export { default as CallApp } from './CallApp'
export { default as Captcha } from './Captcha' export { default as Captcha } from './Captcha'
export { default as ClearableInput } from "./ClearableInput"; export { default as ClearableInput } from "./ClearableInput";
export { default as Loading } from './Loading' export { default as Loading } from './Loading'
export { default as renderTabBar } from './renderTabBar' export { default as RenderTabBar } from './renderTabBar'
src/common/renderTabBar/index.js
import { Sticky } from 'react-sticky' import { Sticky } from 'react-sticky'
import { Tabs } from "antd-mobile"; import { Tabs } from "antd-mobile"
import React from "react"; import React from "react"
export default function renderTabBar({zIndex = 1, ...rest}) { export default function RenderTabBar({topOffset = 0,zIndex = 1, ...rest}) {
return ( return (
<Sticky> <Sticky topOffset={topOffset}>
{({style}) => <div style={{...style, zIndex}}> {({style}) => <div style={{...style, zIndex}}>
<Tabs.DefaultTabBar {...rest}/> <Tabs.DefaultTabBar {...rest}/>
</div>} </div>}
......
src/components/classify/courselist.js
import React, {Component} from 'react' import React, { Component } from 'react'
import {VList} from '../../common' import { VList } from '../../common'
import {Tabs, WhiteSpace} from 'antd-mobile' import { Tabs, WhiteSpace, Toast } from 'antd-mobile'
import './courselist.scss' import './courselist.scss'
import HeaderSearch from '../../common/HeaderSearch/index' import HeaderSearch from '../../common/HeaderSearch/index'
import {http, getParam} from "@/utils" import { http, getParam } from "@/utils"
import {Toast} from 'antd-mobile'
import {Link} from 'react-router-dom'
import Loading from '@/common/Loading' import Loading from '@/common/Loading'
import {connect} from 'react-redux'; import { connect } from 'react-redux';
import {getCourses} from './../detail/actions'; import { StickyContainer } from "react-sticky";
function stopScroll(e) {
e.preventDefault()
}
@connect(({user}) => ({ @connect(({user}) => ({
user user
...@@ -93,7 +96,11 @@ class Classify extends Component { ...@@ -93,7 +96,11 @@ class Classify extends Component {
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, {
passive: false
}) : document.removeEventListener('touchmove', stopScroll)
});
} }
// 弹窗里面tab点击查询 // 弹窗里面tab点击查询
...@@ -108,19 +115,19 @@ class Classify extends Component { ...@@ -108,19 +115,19 @@ class Classify extends Component {
} }
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 = () => {
location.replace('/classify'); location.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>
) )
...@@ -129,10 +136,9 @@ class Classify extends Component { ...@@ -129,10 +136,9 @@ class Classify extends Component {
) )
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}
/> />
...@@ -142,63 +148,68 @@ class Classify extends Component { ...@@ -142,63 +148,68 @@ class Classify extends Component {
<div onClick={this.pulldown.bind(this)}> <div onClick={this.pulldown.bind(this)}>
{this.state.ispull ? top : bottom} {this.state.ispull ? top : bottom}
</div> </div>
<Tabs <StickyContainer>
tabs={this.state.allClass} <Tabs
animated={false} tabs={this.state.allClass}
page={page} animated={false}
onChange={(tab) => this.ontabclick(tab)} page={page}
> onChange={(tab) => this.ontabclick(tab)}
<div className='tabs'> renderTabBar={props => <div className={'custom-render-bar'}>
<ul> <Tabs.DefaultTabBar {...props}/>
{this.state.data && this.state.data.length > 0 && this.state.data.map((item, index) => { </div>}
const Info = ( >
<div className="info"> <div className='tabs'>
<p className='title' onClick={() => this.toCourseDetail(item.course_id)}> <ul>
{/* <Link to={`/detail?id=${item.course_id}`}> */} {this.state.data && this.state.data.length > 0 && this.state.data.map((item, index) => {
const Info = (
<div className="info">
<p className='title'
onClick={() => this.toCourseDetail(item.course_id)}>
{item.course_title} {item.course_title}
{/* </Link> */}
</p>
<p className='contact text-overflow-2'>{item.desc}</p>
<div className='des'>
{!item.is_buy && <p className="course-price">
<span className="new">¥{item.price1}</span>
<span className="old">¥{item.price0}</span>
</p> </p>
<p className='contact text-overflow-2'>{item.desc}</p>
<div className='des'>
{!item.is_buy && <p className="course-price">
<span className="new">¥{item.price1}</span>
<span className="old">¥{item.price0}</span>
</p>
}
{item.is_buy &&
<span className="isbuy">已购买</span>
}
</div>
</div>
)
const status = (
!item.is_buy &&
<div>
{item.bargain_num === 0 && item.groupon_num !== 0 &&
<p className='course-status'>拼团减{item.groupon_num}元</p>
} }
{item.is_buy && {item.bargain_num !== 0 && item.groupon_num === 0 &&
<span className="isbuy">已购买</span> <p className='course-status'>砍价减{item.bargain_num}元</p>
}
{
item.is_aist && <span className='return_cash'></span>
} }
</div> </div>
</div> )
) return (
const status = ( <VList
!item.is_buy && key={index}
<div> status={status}
{item.bargain_num === 0 && item.groupon_num !== 0 && img={item.image_name}
<p className='course-status'>拼团减{item.groupon_num}元</p> id={item.course_id}
} info={Info}
{item.bargain_num !== 0 && item.groupon_num === 0 && toDetail={this.toCourseDetail}
<p className='course-status'>砍价减{item.bargain_num}元</p> />
} )
{ })}
item.is_aist && <span className='return_cash'></span> </ul>
} </div>
</div> </Tabs>
)
return ( </StickyContainer>
<VList
key={index}
status={status}
img={item.image_name}
id={item.course_id}
info={Info}
toDetail={this.toCourseDetail}
/>
)
})}
</ul>
</div>
</Tabs>
<WhiteSpace/> <WhiteSpace/>
</div> </div>
<div className='mbc-box' style={{display: this.state.display}}> <div className='mbc-box' style={{display: this.state.display}}>
......
src/components/classify/courselist.scss
...@@ -5,10 +5,29 @@ html,body,#root { ...@@ -5,10 +5,29 @@ html,body,#root {
position: relative; position: relative;
height: 100%; height: 100%;
.preferential{
width: 100%;
height: 44px;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.class-content { .class-content {
padding: 0 12px; padding: 88px 12px 0;
position: relative; position: relative;
.custom-render-bar{
position: fixed;
top: 43px;
left: 0;
z-index: 10;
padding-left: 11px;
background: #fff;
}
.v-list-item { .v-list-item {
padding: 10px 0 0; padding: 10px 0 0;
...@@ -105,10 +124,10 @@ html,body,#root { ...@@ -105,10 +124,10 @@ html,body,#root {
width: 32px; width: 32px;
height: 35px; height: 35px;
line-height: 35px; line-height: 35px;
position: absolute; position: fixed;
top: 4px; top: 48px;
right: 0; right: 0;
z-index: 2; z-index: 20;
background-color: $bg_fff; background-color: $bg_fff;
color: $color_666; color: $color_666;
} }
...@@ -138,7 +157,7 @@ html,body,#root { ...@@ -138,7 +157,7 @@ html,body,#root {
.mbc-box { .mbc-box {
position: absolute; position: absolute;
left: 0; left: 0;
top: 88px; top: 87px;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: rgba(0, 0, 0, .6); background-color: rgba(0, 0, 0, .6);
......
src/components/detail/outline/index.js
...@@ -5,7 +5,7 @@ import './index.scss' ...@@ -5,7 +5,7 @@ import './index.scss'
import { getParam, http } from "@/utils" import { getParam, http } from "@/utils"
import { Toast } from 'antd-mobile' import { Toast } from 'antd-mobile'
import { StickyContainer } from "react-sticky"; import { StickyContainer } from "react-sticky";
import {renderTabBar} from "@/common"; import {RenderTabBar} from "@/common";
class OutLine extends Component { class OutLine extends Component {
constructor(props) { constructor(props) {
...@@ -60,7 +60,7 @@ class OutLine extends Component { ...@@ -60,7 +60,7 @@ class OutLine extends Component {
<Tabs tabs={tabs} <Tabs tabs={tabs}
initialPage={0} initialPage={0}
swipeable={false} swipeable={false}
renderTabBar={renderTabBar} renderTabBar={RenderTabBar}
> >
{/*介绍*/} {/*介绍*/}
<div className='introduce'> <div className='introduce'>
......
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