Skip to content

M
mr-julyedu
Commit 2b4d789c by FE
Options

add function that judge request ranklist api and solve question that into … 

add function that judge request ranklist api and solve question that into  mycourse page not request my_course api
parent 98181fab
Showing with 356 additions and 123 deletions
package.json
......@@ -4,6 +4,7 @@
"private": true,
"dependencies": {
"@babel/core": "7.2.2",
"@babel/plugin-proposal-decorators": "^7.4.4",
"@loadable/component": "^5.10.1",
"@svgr/webpack": "4.1.0",
"antd-mobile": "^2.2.13",
......@@ -67,6 +68,7 @@
"redux": "^4.0.1",
"redux-immutable": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.3.0",
"resolve": "1.10.0",
"sass-loader": "^7.1.0",
......@@ -146,6 +148,12 @@
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"import",
{
"libraryName": "antd-mobile",
......
src/common/Course/index.js
......@@ -6,10 +6,12 @@ const Course = (props) => {
return (
<li className={`course-item ${props.className}`}>
{props.top}
<Link to={`/detail?id=${props.id}`}>
<a onClick={() => props.toDetail(props.id)}>
{/* <Link to={`/detail?id=${props.id}`}> */}
<img src={props.img} alt=""/>
<p className={`course-title ${props.className}`}>{props.title}</p>
</Link>
{/* </Link> */}
</a>
{props.bottom}
</li>
);
......
src/common/OrderList/index.js
......@@ -14,15 +14,15 @@ import {Link} from "react-router-dom";
*/
const OrderItem = ({ info, tab, children, src,id, isaist, ...restProps }) => {
const OrderItem = ({ info, tab, children, src,id, isaist, toDetail, ...restProps }) => {
return (
<div className='public-list-item'>
<div className="public-content">
{tab}
<div className="public-cover" >
<Link to={`/detail?id=${id}`}>
<img src={src} alt="" />
</Link>
{/* <Link to={`/detail?id=${id}`}> */}
<img src={src} alt="" onClick={() => toDetail(id)} />
{/* </Link> */}
{
(isaist &&
<span className='return_cash'></span>
......
src/common/VList/index.js
......@@ -8,9 +8,9 @@ const VList = (props) => {
<div className="content">
<div className="cover">
{props.status}
<Link to={`/detail?id=${props.id}`}>
<img src={props.img} alt=""/>
</Link>
{/* <Link to={`/detail?id=${props.id}`}> */}
<img src={props.img} alt="" onClick={() => props.toDetail(props.id)} />
{/* </Link> */}
</div>
{props.info}
</div>
......
src/components/classify/courselist.js
......@@ -3,12 +3,14 @@ import {VList} from '../../common'
import {Tabs, WhiteSpace} from 'antd-mobile'
import './courselist.scss'
import HeaderSearch from '../../common/HeaderSearch/index'
import {http, api, 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 {connect} from 'react-redux';
import {getCourses} from './../detail/actions';
@connect()
class Classify extends Component {
constructor(props) {
super(props)
......@@ -102,6 +104,13 @@ class Classify extends Component {
}))
}
toCourseDetail = (id) => {
const { dispatch, history } = this.props;
dispatch(getCourses(id, () => {
history.push(`/detail?id=${id}`)
}));
}
render() {
const bottom = (
<i className={'iconfont iconiconfront-69 pull-down'}></i>
......@@ -132,10 +141,10 @@ class Classify extends Component {
{this.state.data && this.state.data.length > 0 && this.state.data.map((item, index) => {
const Info = (
<div className="info">
<p className='title'>
<Link to={`/detail?id=${item.course_id}`}>
<p className='title' onClick={() => this.toCourseDetail(item.course_id)}>
{/* <Link to={`/detail?id=${item.course_id}`}> */}
{item.course_title}
</Link>
{/* </Link> */}
</p>
<p className='contact text-overflow-2'>{item.desc}</p>
<div className='des'>
......@@ -164,9 +173,14 @@ class Classify extends Component {
</div>
)
return (
<VList key={index} status={status}
img={item.image_name} id={item.course_id}
info={Info}></VList>
<VList
key={index}
status={status}
img={item.image_name}
id={item.course_id}
info={Info}
toDetail={this.toCourseDetail}
/>
)
})}
</ul>
......
src/components/detail/actions.js
......@@ -19,12 +19,14 @@ export const fetchCoursesListIfNeeded = () => (dispatch, getState) => {
courseInfo: getState().detailInfo
}))
}
export const getCourses = payload => dispatch => {
return http.get(`${API.home}/m/course/detail/${getParam('id')}`,).then((res) => {
export const getCourses = (id, cb) => dispatch => {
const courseId = id? id : getParam('id');
return http.get(`${API.home}/m/course/detail/${courseId}`,).then((res) => {
if (res.data.code === 200) {
dispatch(receiveCourseDetail({
...res.data.data
}))
}));
typeof cb === 'function' && cb();
}
})
}
src/components/detail/group/index.js
......@@ -2,7 +2,6 @@ import React, { Component } from 'react'
import './index.scss'
import { getParam } from "@/utils"
import { connect } from "react-redux"
import { Link } from "react-router-dom"
import { Flex } from 'antd-mobile'
......
src/components/detail/group/togroup.js
......@@ -33,7 +33,8 @@ class ToGroup extends Component {
let shareData = {
title: `【仅剩${number}个名额】我${pdd_price}元拼了《${data.course_title}》`,
desc: data.course_title, // 分享描述
link: location.origin + `/detail??id=${data.course_id}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// 直接进入课程详情页，isIn: 1
link: location.origin + `/detail?id=${data.course_id}&isIn=1`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: data.image_name, // 分享图标
};
http.post(`${API['base-api']}/m/sale/signature`).then(res => {
......@@ -120,14 +121,22 @@ class ToGroup extends Component {
});
}
toCourseDetail = (id) => {
const { dispatch, history } = this.props;
dispatch(getCourses(id, () => {
history.push(`/detail?id=${id}`);
return false;
}));
}
render() {
const { data: { course_id, course_title, simpledescription, price0, price1 }, pdd_price, is_success, person_num, groupon_member, course_list } = this.state;
const Info = (
<div className="info">
<p className='title'>
<Link to={`/detail?id=${course_id}`}>
<p className='title' onClick={() => this.toCourseDetail(course_id)}>
{/* <Link to={`/detail?id=${course_id}`}> */}
{course_title}
</Link>
{/* </Link> */}
</p>
<p className='contact text-overflow-2'>{simpledescription}</p>
<div className='des'>
......@@ -142,7 +151,13 @@ class ToGroup extends Component {
<div className='to-group-box'>
<HeaderBar title='拼团' arrow={true} cart={false}></HeaderBar>
{
!is_success && <VList img={this.state.data.image_name} id={this.state.data.course_id} info={Info}></VList>
!is_success &&
<VList
img={this.state.data.image_name}
id={this.state.data.course_id}
info={Info}
toDetail={this.toCourseDetail}
/>
}
<GorupContent data={this.state} invitedFriends={this.invitedFriends} />
......@@ -157,10 +172,10 @@ class ToGroup extends Component {
(course_list && course_list.length > 0) && (course_list[0].course && course_list[0].course.length > 0) && course_list[0].course.slice(0, 4).map(item => {
let weekInfo = <div className="info">
<p className='title'>
<Link to={`/detail?id=${item.course_id}`}>
<p className='title' onClick={() => this.toCourseDetail(item.course_id)}>
{/* <Link to={`/detail?id=${item.course_id}`}> */}
{item.course_title}
</Link>
{/* </Link> */}
</p>
<p className='contact text-overflow-2'>{item.simpledescription}</p>
<div className='des'>
......@@ -170,7 +185,15 @@ class ToGroup extends Component {
</p>
</div>
</div>
return (<VList img={item.image_name} key={item.uid} id={item.course_id} info={weekInfo}></VList>)
return (
<VList
img={item.image_name}
key={item.uid}
id={item.course_id}
info={weekInfo}
toDetail={this.toCourseDetail}
/>
)
})
}
......
src/components/detail/index.js
......@@ -33,7 +33,10 @@ class Detail extends Component {
}
componentDidMount() {
this.props.getCourses();
// 直接进入课程详情页，isIn: 1
if(getParam('isIn')) {
this.props.getCourses();
}
}
// 点击子组件试听按钮
......@@ -247,7 +250,7 @@ class Detail extends Component {
{/*分享赚钱*/}
{
courseInfo.is_dist &&
<ShareRank/>
<ShareRank courseInfo={courseInfo}/>
}
{/*拼团*/}
......
src/components/detail/shareRank/index.js
......@@ -18,6 +18,7 @@ class ShareRank extends Component {
}
componentDidMount() {
console.log(this.props);
this.getRankList()
this.getCode()
}
......
src/components/myOrders/index.js
......@@ -2,16 +2,18 @@ import React, {Component} from 'react'
import './index.scss'
import {HeaderBar} from '../../common'
import OrderList from '@/common/OrderList'
import {http, api} from "@/utils"
import {http} from "@/utils"
import {Link} from 'react-router-dom'
import {Modal, Toast} from 'antd-mobile'
import Loading from '@/common/Loading'
import InfiniteScroll from 'react-infinite-scroller'
import {debounce} from 'lodash'
import {getCourses} from './../detail/actions';
import {connect} from 'react-redux';
const alert = Modal.alert
@connect()
class MyOrders extends Component {
page = 1
constructor(props) {
......@@ -71,6 +73,14 @@ class MyOrders extends Component {
])
}
toCourseDetail = (id) => {
const { dispatch, history } = this.props;
dispatch(getCourses(id, () => {
history.push(`/detail?id=${id}`);
return false;
}));
}
render() {
......@@ -95,9 +105,10 @@ class MyOrders extends Component {
item.course && item.course.length > 0 && item.course.map((item, index) => {
const Info = (
<div className="order-info">
<p className='order-title text-overflow-one'>
<Link
to={`/detail?id=${item.course_id}`}>{item.course_title}</Link>
<p className='order-title text-overflow-one' onClick={() => this.toCourseDetail(item.course_id)}>
{/* <Link to={`/detail?id=${item.course_id}`}> */}
{item.course_title}
{/* </Link> */}
</p>
<p className='order-content text-overflow-2'>{item.description}</p>
<p className='order-des'>
......@@ -110,9 +121,13 @@ class MyOrders extends Component {
)
return (
<div className="order-wrap" key={index}>
<OrderList info={Info} src={item.image_name}
isSign={item.is_aist}
id={item.course_id}></OrderList>
<OrderList
info={Info}
src={item.image_name}
isSign={item.is_aist}
id={item.course_id}
toDetail={this.toCourseDetail}
/>
</div>
)
})
......
src/components/order/index.js
import React, { Component } from 'react';
import { Flex, NavBar, List, WingBlank, Toast } from 'antd-mobile';
import { Flex, List, WingBlank, Toast } from 'antd-mobile';
import { OrderItem } from '@/common/index';
import { Link } from 'react-router-dom';
import { http, getParam } from "@/utils";
import { throttle } from 'lodash';
import {HeaderBar} from '../../common';
import {connect} from 'react-redux';
import {getCourses} from './../detail/actions';
import "./order.scss"
......@@ -24,7 +26,19 @@ function OrderList(props) {
}
const Info = (
<div className="order-info">
<Link to={`/detail?id=${course_id}`}><p className='order-title' style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{course_title}</p></Link>
{/* <Link to={`/detail?id=${course_id}`}> */}
<p
className='order-title'
style={{
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
}}
onClick={() => props.toDetail(course_id)}
>
{course_title}
</p>
{/* </Link> */}
<p className='order-content' style={{ WebkitBoxOrient: 'vertical', WebkitLineClamp: '2', wordBreak: 'break-all', overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box' }}>{simpledescription}</p>
<p className='order-des'>
{/*// 这里根据类型判断 来显示什么价格 拼团还是砍价 还是特训营*/ }
......@@ -38,7 +52,15 @@ function OrderList(props) {
);
return (
<OrderItem {...item} src={image_name} id={course_id} key={index} info={Info} isaist={props.isaist}>
<OrderItem
{...item}
src={image_name}
id={course_id}
key={index}
info={Info}
isaist={props.isaist}
toDetail={props.toDetail}
>
{
(props.locationState && (props.locationState.type || props.locationState.simple)) ? (
<div className="order-prefer">
......@@ -73,6 +95,7 @@ function OrderList(props) {
);
}
@connect()
class Order extends Component {
constructor(props) {
super(props);
......@@ -306,6 +329,14 @@ class Order extends Component {
// }
}
};
toCourseDetail = (id) => {
const { dispatch, history } = this.props;
dispatch(getCourses(id, () => {
history.push(`/detail?id=${id}`)
}));
}
render() {
const {
perfect,
......@@ -366,7 +397,14 @@ class Order extends Component {
</div>
}
<div className="order-list">
<OrderList list={orderList} compute={this.computedMoney} courseId={getParam('id')} locationState={this.props.location.state} groupPrice={this.groupPrice}/>
<OrderList
list={orderList}
compute={this.computedMoney}
courseId={getParam('id')}
locationState={this.props.location.state}
groupPrice={this.groupPrice}
toDetail={this.toCourseDetail}
/>
</div>
<div className="order-balance">
<List>
......
src/components/preferential/index.js
......@@ -6,7 +6,11 @@ import HeaderSearch from '../../common/HeaderSearch/index'
import {http} from "@/utils"
import {Link} from 'react-router-dom'
import Loading from '@/common/Loading'
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {getCourses} from './../detail/actions';
@connect()
class Preferential extends Component {
constructor(props) {
super(props)
......@@ -74,6 +78,12 @@ class Preferential extends Component {
}
}
toCourseDetail = (id) => {
const { dispatch, history } = this.props;
dispatch(getCourses(id, () => {
history.push(`/detail?id=${id}`)
}));
}
render() {
const tabs = [
......@@ -98,10 +108,10 @@ class Preferential extends Component {
{this.state.dataList.map((item, index) => {
const Info = (
<div className="info">
<p className='title'>
<Link to={`/detail?id=${item.course_id}`}>
<p className='title' onClick={() => this.toCourseDetail(item.course_id)}>
{/* <Link to={`/detail?id=${item.course_id}`}> */}
{item.course_title}
</Link>
{/* </Link> */}
</p>
<p className='contact text-overflow-2'>{item.course_desc}</p>
<div className='des'>
......@@ -134,9 +144,14 @@ class Preferential extends Component {
</div>
)
return (
<VList key={index} img={item.image_name}
id={item.course_id} status={status}
info={Info}></VList>
<VList
key={index}
img={item.image_name}
id={item.course_id}
status={status}
info={Info}
toDetail={this.toCourseDetail}
/>
)
})}
</ul>
......@@ -152,4 +167,4 @@ class Preferential extends Component {
}
export default Preferential
export default Preferential;
src/components/purchased/index.js
......@@ -5,6 +5,7 @@ import { http } from "@/utils";
import {Link} from 'react-router-dom'
import {Toast} from 'antd-mobile'
import {connect} from "react-redux"
import {getCourses} from './../detail/actions';
import Loading from '@/common/Loading'
class Purchased extends Component {
......@@ -34,6 +35,13 @@ class Purchased extends Component {
})
}
toCourseDetail = (id) => {
const { dispatch, history } = this.props;
dispatch(getCourses(id, () => {
history.push(`/detail?id=${id}`)
}));
}
render() {
const {user} = this.props
......@@ -50,10 +58,10 @@ class Purchased extends Component {
this.state.data.map((item, index) => {
const Info = (
<div className="info">
<p className='title'>
<Link to={`/detail?id=${item.course_id}`}>
<p className='title' onClick={() => this.toCourseDetail(item.course_id)}>
{/* <Link to={`/detail?id=${item.course_id}`}> */}
{item.course_title}
</Link>
{/* </Link> */}
</p>
<p className='contact text-overflow-2'>{item.simpledescription}</p>
{
......@@ -67,11 +75,13 @@ class Purchased extends Component {
item.is_aist && <span className='status'>返现</span>
)
return (
<VList key={index}
img={item.image_name}
id={item.course_id}
info={Info}
status={status}
<VList
key={index}
img={item.image_name}
id={item.course_id}
info={Info}
status={status}
toDetail={this.toCourseDetail}
/>
)
})
......
src/components/scholarship/CategoryItem/CategoryItem.js
......@@ -8,12 +8,12 @@ export default class CategoryItem extends Component {
super(props);
}
render() {
const {course_title, price1, price0, first_level_tip, image_name, upgrade, upgradeImg, course_id, share} = this.props;
const {course_title, price1, price0, first_level_tip, image_name, upgrade, upgradeImg, course_id, share, toDetail} = this.props;
return (
<WingBlank>
<div className={'scholarship-category'}>
<Link to={`/detail?id=${course_id}`} >
<div className={'imageContainer'}>
{/* <Link to={`/detail?id=${course_id}`} > */}
<div className={'imageContainer'} onClick={() => toDetail(course_id)}>
<img className={'image'} src={image_name}></img>
{
upgrade ? (
......@@ -21,10 +21,17 @@ export default class CategoryItem extends Component {
) : (null)
}
</div>
</Link>
{/* </Link> */}
<div className={'content'}>
<Flex direction='column' justify='around' align='start' style={{height: '90px'}}>
<Link to={`/detail?id=${course_id}`} ><p className={'text-overflow-one'}>{course_title}</p></Link>
{/* <Link to={`/detail?id=${course_id}`} > */}
<p
className={'text-overflow-one'}
onClick={() => toDetail(course_id)}
>
{course_title}
</p>
{/* </Link> */}
<p><span className={'priceNow'}>{`￥${price1}`}</span><span className={'pricePrimary'}>{`￥${price0}`}</span></p>
<div className={'shareMoney'} onClick={()=>{share(course_id, first_level_tip)}}>{`分享赚${first_level_tip}元`}</div>
</Flex>
......
src/components/scholarship/index.js
import React, { Component } from 'react';
import { Tabs, WhiteSpace, List, Flex, WingBlank, Modal, ListView, Toast } from 'antd-mobile';
import './scholarship.scss';
import { is_weixin, http, api } from "@/utils";
import { is_weixin, http } from "@/utils";
import CategoryItem from './CategoryItem/CategoryItem.js';
import SortItem from './SortItem/SortItem.js';
import { connect } from 'react-redux';
import OpenApp from '@/common/CallApp';
import {getCourses} from './../detail/actions';
const Item = List.Item;
@connect(state => ({
user: state.user
}))
class _Scholarship extends Component {
constructor(props) {
super(props);
......@@ -156,12 +160,27 @@ class _Scholarship extends Component {
});
this.onEndReached();
}
toCourseDetail = (id) => {
const { dispatch, history } = this.props;
dispatch(getCourses(id, () => {
history.push(`/detail?id=${id}`)
}));
}
render() {
const row = (
rowData,
rowID
) => {
return <CategoryItem {...rowData} key={rowID} share={this.shareCategory}/>;
return (
<CategoryItem
{...rowData}
key={rowID}
share={this.shareCategory}
toDetail={this.toCourseDetail}
/>
);
};
const row1 = (
......@@ -396,19 +415,21 @@ class _Scholarship extends Component {
)
}
}
const mapStateToProps = (state) => {
return {
user: {
...state.user
},
};
};
// const mapStateToProps = (state) => {
// return {
// user: {
// ...state.user
// },
// };
// };
// const mapDispatchToProps = (dispatch) => {
// return {};
// };
const mapDispatchToProps = (dispatch) => {
return {};
};
// export const Scholarship = connect(
// mapStateToProps,
// mapDispatchToProps
// )(_Scholarship);
export const Scholarship = connect(
mapStateToProps,
mapDispatchToProps
)(_Scholarship);
export default _Scholarship;
src/components/search/recommendation/index.js
import React, { Component } from "react";
import {connect} from 'react-redux';
import './recommendation.scss'
import { Course } from "@/common";
import { api, http } from "@/utils";
import { http } from "@/utils";
import { Toast } from 'antd-mobile'
import {withRouter} from 'react-router-dom'
import {getCourses} from './../../detail/actions';
@connect()
class Recommendation extends Component {
state = {
......@@ -26,11 +29,16 @@ class Recommendation extends Component {
}
handleClick = (id) => {
this.props.history.push(`/detail?id=${id}`)
}
// handleClick = (id) => {
// this.props.history.push(`/detail?id=${id}`)
// }
toCourseDetail = (id) => {
const { dispatch, history } = this.props;
dispatch(getCourses(id, () => {
history.push(`/detail?id=${id}`)
}));
}
render() {
const {courses} = this.state
......@@ -40,12 +48,11 @@ class Recommendation extends Component {
<div className="courses">
{
courses.length > 0 &&
courses.map((item, index) => {
courses.map((item) => {
const Bottom = (
<div className='bottom'>
<span className='price'>{item['price1']}</span>
<span className='old-price'>{item['price0']}</span>
</div>
)
return (
......@@ -55,7 +62,7 @@ class Recommendation extends Component {
img={item['image_name']}
title={item['course_title']}
bottom={Bottom}
handleClick={this.handleClick}
toDetail={this.toCourseDetail}
/>
)
})
......
src/components/search/search-result.js
import React, { PureComponent } from 'react';
import {connect} from 'react-redux';
import SearchHeader from './searchHead'
import VList from '@/common/VList'
import { http, getParam } from '@/utils'
import './search-result.scss'
import Recommendation from './recommendation'
import {getCourses} from './../detail/actions';
const Bottom = ({item}) => {
return (
......@@ -14,6 +16,7 @@ const Bottom = ({item}) => {
)
}
@connect()
class SearchResult extends PureComponent {
state = {
......@@ -52,6 +55,12 @@ class SearchResult extends PureComponent {
this.setState({value})
}
toCourseDetail = (id) => {
const { dispatch, history } = this.props;
dispatch(getCourses(id, () => {
history.push(`/detail?id=${id}`)
}));
}
render() {
const {courseList} = this.state
......@@ -90,12 +99,13 @@ class SearchResult extends PureComponent {
: null
)
return (
<VList img={item.image_name}
handleClick={this.handleClick}
key={item.course_id}
info={Info}
id={item['course_id']}
status={status}
<VList
img={item.image_name}
toDetail={this.toCourseDetail}
key={item.course_id}
info={Info}
id={item['course_id']}
status={status}
/>
)
})
......@@ -104,9 +114,8 @@ class SearchResult extends PureComponent {
: <div className="empty">
抱歉！没有搜到相关内容
</div>
}
<Recommendation/>
<Recommendation />
</div>
);
}
......
src/components/shopCart/cartItem.js
......@@ -22,8 +22,10 @@ class CartItem extends Component {
let item = this.props.item
const Info = (
<div className="order-info">
<p className='order-title text-overflow-one'>
<Link to={`/detail?id=${item.course_id}`}>{item.course_title}</Link>
<p className='order-title text-overflow-one' onClick={()=>this.props.toDetail(item.course_id)}>
{/* <Link to={`/detail?id=${item.course_id}`}> */}
{item.course_title}
{/* </Link> */}
</p>
<p className='order-content text-overflow-2'>{item.simpledescription}</p>
<p className='order-des'>
......@@ -42,7 +44,12 @@ class CartItem extends Component {
</div>
<div className="card-wrap">
<OrderList info={Info} src={item.image_name} id={item.course_id}></OrderList>
<OrderList
info={Info}
src={item.image_name}
id={item.course_id}
toDetail={this.props.toDetail}
></OrderList>
</div>
</div>
......
src/components/shopCart/cartList.js
import React, {Component} from 'react'
import {Link} from 'react-router-dom'
import CartItem from './cartItem'
class cartList extends Component {
render() {
return (
......@@ -19,7 +20,10 @@ class cartList extends Component {
checkChange={(id, val) => {
this.props.checkChange(id, val)
}}
key={index} item={item}/>
key={index}
item={item}
toDetail={this.props.toDetail}
/>
)
})
: <div className="cart-tip">
......
src/components/shopCart/index.js
......@@ -7,6 +7,7 @@ import ShopCart from './cartList.js'
import './card.scss'
import classnames from 'classnames'
import {http} from "@/utils";
import {getCourses} from './../detail/actions';
const alert = Modal.alert;
......@@ -164,6 +165,14 @@ class Cart extends Component {
}
toCourseDetail = (id) => {
console.log(id);
const { dispatch, history } = this.props;
dispatch(getCourses(id, () => {
history.push(`/detail?id=${id}`)
}));
}
render() {
return (
......@@ -172,7 +181,11 @@ class Cart extends Component {
<Loading isLoading={this.state.isLoading}>
<div className="cart-body">
<ShopCart checkChange={this.checkChange.bind(this)} data={this.state.data}/>
<ShopCart
checkChange={this.checkChange.bind(this)}
data={this.state.data}
toDetail={this.toCourseDetail}
/>
<div className="cart-footer">
<div className="cart-label">
......
src/components/study/myCourses/actions.js
......@@ -12,6 +12,7 @@ const PAGE_INTERVAL = 1
export const NUM_INTERVAL = 10
export const fetchCoursesListIfNeeded = () => (dispatch, getState) => {
const myCourses = getState().myCourses
console.log(myCourses);
const {switchTab, page, noMore} = myCourses
if (!switchTab && !noMore) {
dispatch(getMyCourses({
......@@ -21,17 +22,28 @@ export const fetchCoursesListIfNeeded = () => (dispatch, getState) => {
}
}
// 首次加载，初始化noMore状态
export const initIsMore = () => (dispatch) => {
dispatch(nomoreCourse({
noMore: false
}));
}
export const getMyCourses = payload => dispatch => {
dispatch(startFetchingCourses)
return http.get(`${API.home}/m/my_course/${payload.page}/${payload.num}`)
.then(res => {
const {data, code, msg} = res.data
if (data.length === 0) {
dispatch(nomoreCourse())
dispatch(nomoreCourse({
noMore: true
}))
return
}
if (data.length % 10 !== 0) {
dispatch(nomoreCourse())
dispatch(nomoreCourse({
noMore: true
}))
}
dispatch(receiveMyCourses({
courseList: data,
......@@ -50,8 +62,9 @@ export const switchTab = payload => ({
})
export const NOMORE_COURSE = 'NOMORE_COURSES'
export const nomoreCourse = () => ({
type: NOMORE_COURSE
export const nomoreCourse = (payload) => ({
type: NOMORE_COURSE,
payload
})
export const START_FETCHING_COURSES = 'START_FETCHING_COURSES'
......
src/components/study/myCourses/index.js
......@@ -3,7 +3,7 @@ import VList from '@/common/v-list-base'
import './my-courses.scss'
import { isToday, format } from "date-fns"
import { connect } from "react-redux"
import { fetchCoursesListIfNeeded, switchTab } from "./actions"
import { fetchCoursesListIfNeeded, switchTab, initIsMore } from "./actions"
import InfiniteScroll from 'react-infinite-scroller'
import { debounce } from 'lodash'
import { Link } from 'react-router-dom'
......@@ -84,6 +84,8 @@ class MyCourses extends PureComponent {
}
componentDidMount() {
console.log(this.props);
this.props.initIsMore();
this.props.switchTab(false)
this.props.fetchCoursesListIfNeeded()
}
......@@ -186,5 +188,6 @@ export default connect(
}),
{
fetchCoursesListIfNeeded,
switchTab
switchTab,
initIsMore
})(MyCourses)
\ No newline at end of file
src/components/study/myCourses/reducers.js
......@@ -17,20 +17,21 @@ const initialState = {
export default function myCourses(state = initialState, action) {
switch (action.type) {
const { type, payload=null } = action;
switch (type) {
case RECEIVE_MY_COURSES:
let {courseList, ...rest} = action.payload
let {courseList, ...rest} = payload
return {
...state, ...rest,
courseList: Object.keys(courseList).length === 0 ? state.courseList : state.courseList.concat(courseList),
isLoading: false
}
case START_FETCHING_COURSES:
return {...state, ...action.payload}
return {...state, ...payload}
case SWITCH_TAB:
return {...state, switchTab: action.payload}
return {...state, switchTab: payload}
case NOMORE_COURSE:
return {...state, noMore: true}
return Object.assign({}, state, payload);
default:
return state
}
......
src/components/video/index.js
......@@ -2,7 +2,7 @@ import React, { Component } from 'react'
import HeaderBar from '@/common/HeaderBar'
import './video.scss'
import { NavLink, Route, Redirect, Switch } from 'react-router-dom'
import { http, api, getParam } from '@/utils'
import { http, getParam } from '@/utils'
import Recommendation from './recommendation'
import VideoCatalog from './video-catalog'
import DatumCatalog from './datum-catalog'
......
src/components/video/recommendation/index.js
import React, { PureComponent } from 'react';
import {connect} from 'react-redux';
import {getCourses} from './../../detail/actions';
import './recommendation.scss'
import { http } from '@/utils'
import { Toast } from "antd-mobile";
import VList from '@/common/v-list-base';
const Bottom = ({item}) => {
return (
<div className='bottom'>
......@@ -15,8 +16,7 @@ const Bottom = ({item}) => {
)
}
@connect()
class Recommendation extends PureComponent {
state = {
num: 10,
......@@ -24,7 +24,6 @@ class Recommendation extends PureComponent {
courseId: null
}
componentDidMount() {
this.getRecommendation()
}
......@@ -45,9 +44,11 @@ class Recommendation extends PureComponent {
})
}
handleClick = id => {
this.props.history.push(`/detail?id=${id}`)
toCourseDetail = (id) => {
const { dispatch, history } = this.props;
dispatch(getCourses(id, () => {
history.push(`/detail?id=${id}`)
}));
}
render() {
......@@ -71,7 +72,7 @@ class Recommendation extends PureComponent {
<VList
key={item.course_id}
img={item.image_name}
handleClick={this.handleClick}
handleClick={this.toCourseDetail}
info={Info}
id={item.course_id}
/>
......
src/index.js
......@@ -7,6 +7,18 @@ import thunk from 'redux-thunk'
import logger from 'redux-logger'
import rootReducers from './store'
import App from './App'
import {persistStore, persistReducer} from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
import {PersistGate} from 'redux-persist/lib/integration/react';
const persistConfig = {
key: 'root',
storage,
stateReconciler: autoMergeLevel2 // 查看 'Merge Process' 部分的具体情况
};
const myPersistReducer = persistReducer(persistConfig, rootReducers)
const reduxDevToolOptions = process.env.REACT_APP_BUILD_ENV === 'production' ? {} : { trace: true, traceLimit: 25 }
......@@ -15,17 +27,20 @@ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__(reduxDevToolOptions) || compose;
const store = createStore(
rootReducers,
myPersistReducer,
composeEnhancers(
applyMiddleware(thunk, logger)
)
)
const persistor = persistStore(store)
ReactDOM.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Router>
<App/>
</Router>
</PersistGate>
</Provider>,
document.getElementById('root'));
\ No newline at end of file
src/router/router-config.js
......@@ -4,7 +4,7 @@ import loadable from '@loadable/component'
import Index from '@/components/Index';
import My from '@/components/my';
import Passport from '@/components/passport';
import { Scholarship } from '@/components/scholarship/index';
import Scholarship from '@/components/scholarship';
const Coupons = loadable(() => import(/* webpackChunkName: 'coupons'*/ '@/components/coupons'))
const Study = loadable(() => import(/* webpackChunkName: 'study'*/'@/components/study'))
......
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