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