tem

src/common/Course/course.scss

@@ -7,6 +7,7 @@
   img {
     width: 100%;
     height: 119px;
+    min-height: 119px;
   }
 
   .course-title {

src/components/study/freeCourses/index.js

-import React from 'react'
+import React, { PureComponent } from 'react'
 import { Course, Tag } from '../../../common'
+import { api } from '@/utils'
 
 
 import './free-courses.scss'
 
-const mockData = [
-    {
-        tagText: '机器学习',
-        tagType: 1,
-        title: '16年度最火课程TOP10',
-        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
-    },
-    {
-        tagText: '机器学习',
-        tagType: 1,
-        title: '16年度最火课程TOP10',
-        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
-    },
-    {
-        tagText: '机器学习',
-        tagType: 1,
-        title: '16年度最火课程TOP10',
-        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
-    },
-    {
-        tagText: '机器学习',
-        tagType: 1,
-        title: '16年度最火课程TOP10',
-        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
-    },
-    {
-        tagText: '机器学习',
-        tagType: 1,
-        title: '16年度最火课程TOP10',
-        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
-    },
-    {
-        tagText: '机器学习',
-        tagType: 1,
-        title: '16年度最火课程TOP10',
-        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
-    },
-    {
-        tagText: '机器学习',
-        tagType: 1,
-        title: '16年度最火课程TOP10',
-        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
-    },
-    {
-        tagText: '机器学习',
-        tagType: 1,
-        title: '16年度最火课程TOP10',
-        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
-    },
-    {
-        tagText: '机器学习',
-        tagType: 1,
-        title: '16年度最火课程TOP10',
-        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
-    },
-    {
-        tagText: '机器学习',
-        tagType: 1,
-        title: '16年度最火课程TOP10',
-        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
-    },
-    {
-        tagText: '机器学习',
-        tagType: 1,
-        title: '16年度最火课程TOP10',
-        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
-    },
-    {
-        tagText: '机器学习',
-        tagType: 1,
-        title: '16年度最火课程TOP10',
-        src: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
-    },
-]
-
 const Bottom = (props) => (
     <div className='bottom'>
-        <Tag className={props.className}>{props.tagText}</Tag>
+        <Tag className={props.className}>{props.text}</Tag>
         <span>{props.audience}人观看</span>
     </div>
 )
 
+class FreeCourse extends PureComponent {
+    state = {
+        courses: [],
+        live: [],
+    }
+
+    async componentDidMount() {
+        api.get('/m/free_course/1/10')
+            .then(res => {
+                if (res.data.code == 200) {
+                    this.setState({
+                        courses: res.data.data,
+                    })
+                } else {
+                    console.log(res.data.msg)
+                }
+            })
+        api.get('/m/live/free_list')
+            .then(res => {
+                if(res.data.code == 200){
+                    this.setState({
+                        live: res.data.data
+                    })
+                }
+            })
+    }
 
-const FreeCourse = (props) => {
-    return (
-        <ul className='free-courses'>
-            {
-                mockData.map((item, index) => (
-                    <Course
-                        data={item}
-                        top={
-                            <Tag className={'tag-starting top'}>即将开始</Tag>
-                        }
-                        bottom={
-                            <Bottom audience={232} className={'tag-category'} tagText={item.tagText}></Bottom>
-                        }
-                        key={index}
-                    >
-                    </Course>
-                ))
-            }
-        </ul>
-    )
+    render() {
+        return (
+            <ul className='free-courses'>
+                {
+                    this.state.courses.map((item, index) => (
+                        <Course
+                            data={{
+                                src: item.logo,
+                                title: item.video_course_name
+                            }}
+                            top={
+                                <Tag className={'tag-starting top'}>即将开始</Tag>
+                            }
+                            bottom={
+                                <Bottom audience={item.lessons} className={'tag-category'} text={item.category}/>
+                            }
+                            key={index}
+                        >
+                        </Course>
+                    ))
+                }
+                {
+                    /*this.state.live.map((item,index) => (
+                        <Course
+                            data={{
+                                src: item.logo,
+                                title: item.video_course_name
+                            }}
+                            top={
+                                <Tag className={'tag-starting top'}>即将开始</Tag>
+                            }
+                            bottom={
+                                <Bottom audience={item.lessons} className={'tag-category'} text={item.category}/>
+                            }
+                            key={index}
+                        />
+                    ))*/
+                }
+            </ul>
+        )
+    }
 }
 
 export default FreeCourse
\ No newline at end of file

src/components/study/myCourses/index.js

@@ -58,13 +58,6 @@ export default class MyCourses extends PureComponent {
         console.log(2);
     }
 
-    componentDidMount() {
-        api.get('/m/free_course/1/10')
-            .then(res => {
-                console.log(res)
-            })
-    }
-
     render() {
 
         if (mockData.length !== 0) {