modify home, because modify question to course detail

src/components/Index/index.js

@@ -10,10 +10,14 @@ import LiveRoom from './liveRoom'
 import {Link} from "react-router-dom"
 import {Toast} from 'antd-mobile'
 import {connect} from "react-redux";
+import {getCourses} from './../detail/actions';
 
 
 const animateTypes = Swiper.animateTypes
 
+@connect(state => ({
+    user: state.user
+}))
 class Index extends Component {
     constructor(props) {
         super(props)
@@ -104,6 +108,14 @@ class Index extends Component {
         this.props.history.push('/search')
     }
 
+    toCourseDetail = (id) => {
+        const { dispatch, history } = this.props;
+        dispatch(getCourses(id, () => {
+            history.push(`/detail?id=${id}`);
+            return false;
+        }));
+    }
+
     render() {
         return (
             <div className='index-box'>
@@ -154,7 +166,7 @@ class Index extends Component {
                     (this.state.modules && this.state.modules.length > 0) ? this.state.modules.map((item, index) => {
                         return (
                             <div key={index}>
-                                <CourseList modules={item}/>
+                                <CourseList modules={item} toDetail={this.toCourseDetail}/>
                                 <p className="borderTop"></p>
                             </div>
                         )
@@ -199,7 +211,7 @@ function TopSwiper({bannerList}) {
 
 // 课程模块儿公共组件
 // 课程数量是奇数第一个课程需要横着展示沾满一行，课程数量是偶数一行显示两个
-function CourseList({modules}) {
+function CourseList({modules, toDetail}) {
     let isOdd = modules.list.length % 2 === 0
     // 数量为奇数时，第一个课程显示大图（如后台未上传，前台显示小图），课程数量为偶数时，均显示小图
     let filterList = ''
@@ -223,10 +235,10 @@ function CourseList({modules}) {
                 <ul className='index-course-detail'>
                     {
                         !isOdd && modules.list[0].course_img!=='' &&
-                        <div className="category-vip">
-                            <Link to={`/detail?id=${modules.list[0].course_id}`}>
+                        <div className="category-vip" onClick={() => toDetail(modules.list[0].course_id)}>
+                            {/* <Link to={`/detail?id=${modules.list[0].course_id}`}> */}
                                 <img src={modules.list[0].course_img_small} alt=""/>
-                            </Link>
+                            {/* </Link> */}
                         </div>
                     }
                     {
@@ -255,9 +267,17 @@ function CourseList({modules}) {
                                 </div>
                             )
                             return (
-                                <Course key={index} top={top} data={item} bottom={bottom} img={item.course_img_small}
-                                        title={item.course_title} id={item.course_id}
-                                        className='text-overflow-2'></Course>
+                                <Course
+                                    key={index} 
+                                    top={top} 
+                                    data={item} 
+                                    bottom={bottom} 
+                                    img={item.course_img_small}
+                                    title={item.course_title} 
+                                    id={item.course_id}
+                                    toDetail={toDetail}
+                                    className='text-overflow-2'
+                                />
                             )
                         })
                     }
@@ -314,7 +334,4 @@ function ScrollBox(props) {
 }
 
 
-export default connect(
-    state => ({user: state.user}),
-    null
-)(WithTab(Index))
+export default WithTab(Index);