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