detail

src/common/HeaderSearch/index.js

@@ -4,12 +4,18 @@ import './index.scss'
 
 class HeaderBar extends Component {
     toSearch() {
-        window.location.href ='/search'
+        window.location.href = '/search'
     }
+
     return() {
-        window.location.href ='/'
+        window.location.href = '/'
+    }
+
+    goShop = () => {
+        location.replace('/shopcart');
     }
 
+
     render() {
         return (
             <div className='preferential'>
@@ -21,7 +27,7 @@ class HeaderBar extends Component {
                         onFocus={this.toSearch.bind(this)}
                         showCancelButton={false}
                     />
-                    <i className={'iconfont icongouwuche-xianxing shopping-cart'}></i>
+                    <i className={'iconfont icongouwuche-xianxing shopping-cart'} onClick={this.goShop}></i>
                 </div>
             </div>
         )

src/components/Index/index.js

 import React, {Component} from 'react'
-import {Course} from '../../common'
+import {Course, CallApp} from '../../common'
 import './index.scss'
 import {WithTab} from '@/HOCs'
 import Swiper from 'react-mobile-swiper'
@@ -9,8 +9,7 @@ import {http, api} from '@/utils'
 import LiveRoom from './liveRoom'
 import {Link} from "react-router-dom"
 import {Toast} from 'antd-mobile'
-import {CallApp} from '../../common'
-
+import {connect} from "react-redux";
 
 
 const animateTypes = Swiper.animateTypes
@@ -19,9 +18,9 @@ class Index extends Component {
     constructor(props) {
         super(props)
         this.state = {
-            banner: [],
-            lives: [],
-            modules: [],
+            banner: [],   // 首页banner
+            lives: [],  //近期直播
+            modules: [],  //首页课程模块儿
             isShow: false,
             islive: false,
             roomMess: '',
@@ -56,7 +55,11 @@ class Index extends Component {
     }
 
     componentDidMount() {
+        this.getIndexData()
+    }
+
     // 首页课程
+    getIndexData = () => {
         http.get(`${api.home}/m/home`).then((res) => {
             if (res.data.code === 200) {
                 this.setState({
@@ -74,6 +77,11 @@ class Index extends Component {
 
     // 点击近期直播课程弹出预约提示框
     liveCourse = (item) => {
+        const {user} = this.props
+        const uid = user && user.data && user.data.uid
+        if (!uid) {
+            this.props.history.push('/passport/login')
+        } else {
             if (item.live_status === 0) {
                 this.setState({
                     isShow: true,
@@ -83,15 +91,16 @@ class Index extends Component {
             } else {
                 window.location.href = `http://www-test.julyedu.com/live/m_room/${item.room_id}`
             }
-
+        }
     }
     // 自组件传给父组件的isshow
     colseBox = (val) => {
         this.setState({isShow: val})
     }
 
+    // 点击头部搜索跳转到搜索页面
     toSearch() {
-        window.location.href = '/search'
+        this.props.history.push('/search')
     }
 
     render() {
@@ -131,10 +140,16 @@ class Index extends Component {
                 </div>
 
                 <p className="borderTop"></p>
+
+                {
+
+                    this.state.lives && this.state.lives.length > 0 &&
                     <div className='lives'>
                         <h2 className="title">近期直播</h2>
                         <ScrollBox livesList={this.state.lives} liveCourse={this.liveCourse}/>
                     </div>
+                }
+
 
                 {
                     this.state.modules && this.state.modules.length > 0 && this.state.modules.map((item, index) => {
@@ -183,6 +198,8 @@ function TopSwiper({bannerList}) {
     )
 }
 
+// 课程模块儿公共组件
+// 课程数量是奇数第一个课程需要横着展示沾满一行，课程数量是偶数一行显示两个
 function CourseList({modules}) {
     let isOdd = modules.list.length % 2 === 0
     let filterList = isOdd ? modules.list : modules.list.slice(1)
@@ -198,7 +215,7 @@ function CourseList({modules}) {
                 <a className="more" href={modules.more_page}>更多 ></a>
             }
             <LazyLoad offset={50}>
-                <ul className='course-detail'>
+                <ul className='index-course-detail'>
                     {
                         !isOdd &&
                         <div className="category-vip">
@@ -231,7 +248,8 @@ function CourseList({modules}) {
                             )
                             return (
                                 <Course key={index} top={top} data={item} bottom={bottom} img={item.course_img_small}
-                                        title={item.course_title} id={item.course_id}></Course>
+                                        title={item.course_title} id={item.course_id}
+                                        className='text-overflow-2'></Course>
                             )
                         })
                     }
@@ -241,6 +259,7 @@ function CourseList({modules}) {
     )
 }
 
+//近期直播
 function ScrollBox(props) {
     return (
         <div className='scroll-box'>
@@ -282,4 +301,8 @@ function ScrollBox(props) {
     )
 }
 
-export default WithTab(Index)
+
+export default connect(
+    state => ({user: state.user}),
+    null
+)(WithTab(Index))

src/components/Index/index.scss

@@ -19,6 +19,7 @@
       margin-left: 10px;
       width: 88px;
       height: 22px;
+      line-height: 22px;
       border: 1px solid $bg_active;
       border-radius: 11px;
       background-color: $bg_fff;
@@ -281,7 +282,7 @@
     }
   }
 
-  .course-detail {
+  .index-course-detail {
     width: 100%;
     display: flex;
     justify-content: space-between;

src/components/Index/liveRoom.js

-import React, {Component} from 'react';
-import './index.scss';
+import React, {Component} from 'react'
+import './index.scss'
 import {http, api, browser, validateTel} from '@/utils'
 import {Toast} from 'antd-mobile'
 
@@ -286,7 +286,7 @@ class LiveRoom extends Component {
 }
 
 
-export default LiveRoom;
+export default LiveRoom
 
 
 

src/components/classify/courselist.js

-import React, {Component} from 'react';
-import {VList} from '../../common';
-import {Tabs, WhiteSpace} from 'antd-mobile';
-import './courselist.scss';
+import React, {Component} from 'react'
+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, api, getParam} from "@/utils"
 import {Toast} from 'antd-mobile'
 import {Link} from 'react-router-dom'
+import Loading from '@/common/Loading'
 
 
 class Classify extends Component {
@@ -17,7 +18,8 @@ class Classify extends Component {
             arr: [{basics: []}, {advanced: []}],
             allClass: [],
             data: [],
-            activeTab: decodeURIComponent(getParam('name'))
+            activeTab: decodeURIComponent(getParam('name')),
+            isLoading: true
         }
 
     }
@@ -30,7 +32,7 @@ class Classify extends Component {
     // 获取tabs接口
     getTabs = () => {
         let data = 0
-        http.get(`${api.home}/m/course/classify/${data}`,)
+        http.get(`${api.home}/m/course/classify/${data}`)
             .then((res) => {
                 const _this = this
                 if (res.data.code === 200) {
@@ -61,11 +63,12 @@ class Classify extends Component {
 
     // 获取课程接口
     getList = () => {
-        http.get(`${api.home}/m/course/list/${getParam('id')}`,).then((res) => {
+        http.get(`${api.home}/m/course/list/${getParam('id')}`).then((res) => {
             if (res.data.code === 200) {
-                this.setState(status => ({
+                this.setState({
                     data: res.data.data,
-                }));
+                    isLoading: false
+                })
             }
         })
     }
@@ -112,6 +115,7 @@ class Classify extends Component {
         return (
             <div className='class-child'>
                 <HeaderSearch></HeaderSearch>
+                <Loading isLoading={this.state.isLoading}>
                     <div className='class-content'>
                         <WhiteSpace/>
                         <div onClick={this.pulldown.bind(this)}>
@@ -178,7 +182,7 @@ class Classify extends Component {
                             </div>
                         }
                     </div>
-
+                </Loading>
             </div>
         )
     }

src/components/classify/index.js

@@ -4,7 +4,8 @@ import './index.scss';
 import {http, api} from "@/utils";
 import {Link} from 'react-router-dom'
 import {Toast} from 'antd-mobile'
-import { HeaderBar } from "@/common"
+import {HeaderBar} from "@/common"
+import Loading from '@/common/Loading'
 
 
 class Classify extends Component {
@@ -15,15 +16,19 @@ class Classify extends Component {
             employment: [],
             basics: [],
             advanced: [],
-            special: []
+            special: [],
+            isLoading: true
         }
     }
 
     componentDidMount() {
         let data = 1
-
         http.get(`${api.home}/m/course/classify/${data}`,).then((res) => {
             if (res.data.code === 200) {
+                this.setState({
+                    isLoading: false
+                })
+
                 if (res.data.data.common.length > 0) {
                     this.setState({
                         basics: res.data.data.common[0],
@@ -48,6 +53,7 @@ class Classify extends Component {
         return (
             <div className='class-box'>
                 <HeaderBar title='分类' arrow={false} cart={false}></HeaderBar>
+                <Loading isLoading={this.state.isLoading}>
                     <ClassCourseBox data={this.state.camp.list} title={this.state.camp.name} type={1}/>
                     <ClassCourseBox data={this.state.employment.list} title={this.state.employment.name} type={1}/>
                     <ClassCourseBox data={this.state.basics.list} title={this.state.basics.name} type={2}/>
@@ -60,14 +66,15 @@ class Classify extends Component {
                                 </Link>
                             )
                         })
-
                         }
                     </div>
+                </Loading>
             </div>
         )
     }
 }
 
+// 课程图片形式展示 点击图片直接跳转课程详情页面
 function ClassCourseA({data}) {
     return (
         <div className='items-box'>
@@ -83,6 +90,7 @@ function ClassCourseA({data}) {
     )
 }
 
+// 课程标签的形式展示  点击标签跳转分类详情页面
 function ClassCourseB(props) {
     return (
         <div className='items-box'>

src/components/myOrders/index.js

@@ -5,15 +5,17 @@ import OrderList from '@/common/OrderList'
 import {http, api} from "@/utils"
 import {Link} from 'react-router-dom'
 import {Modal, Toast} from 'antd-mobile'
+import Loading from '@/common/Loading'
 
-const alert = Modal.alert;
+const alert = Modal.alert
 
 
 class MyOrders extends Component {
     constructor(props) {
         super(props)
         this.state = {
-            data: []
+            data: [],
+            isLoading: true
         }
     }
 
@@ -26,7 +28,8 @@ class MyOrders extends Component {
         http.get(`${api.home}/m/my/orders/1/1`,).then((res) => {
             if (res.data.code === 200) {
                 this.setState({
-                    data: res.data.data
+                    data: res.data.data,
+                    isLoading: false
                 })
             } else {
                 Toast.info(res.data.msg, 2);
@@ -62,6 +65,7 @@ class MyOrders extends Component {
         return (
             <div className='myorders-box'>
                 <HeaderBar title='我的订单' arrow={true} cart={false}></HeaderBar>
+                <Loading isLoading={this.state.isLoading}>
                     {
                         this.state.data && this.state.data.length > 0 ?
                             this.state.data.map((item, index) => {
@@ -100,7 +104,7 @@ class MyOrders extends Component {
                                 <Link to='/classify'>去逛逛</Link>
                             </div>
                     }
-
+                </Loading>
             </div>
         )
     }

src/components/preferential/index.js

 import React, {Component} from 'react'
 import {VList} from '../../common'
-import {Tabs, WhiteSpace} from 'antd-mobile'
+import {Tabs, WhiteSpace, Toast} from 'antd-mobile'
 import './index.scss'
 import HeaderSearch from '../../common/HeaderSearch/index'
 import {http, api} from "@/utils"
 import {Link} from 'react-router-dom'
-import {Toast} from 'antd-mobile'
+import Loading from '@/common/Loading'
 
 class Preferential extends Component {
     constructor(props) {
@@ -13,6 +13,7 @@ class Preferential extends Component {
         this.state = {
             dataList: [],
             courseStatus: 0,
+            isLoading: true
         }
     }
 
@@ -25,7 +26,8 @@ class Preferential extends Component {
         http.get(`${api.home}/m/home/weekDiscounts`).then((res) => {
             if (res.data.code === 200) {
                 this.setState({
-                    dataList: res.data.data
+                    dataList: res.data.data,
+                    isLoading: false
                 })
             } else {
                 Toast.info(res.data.msg, 2)
@@ -59,7 +61,6 @@ class Preferential extends Component {
     }
     // tab 切换
     ontabclick = (tab, index) => {
-        console.log(tab, index)
         this.state.courseStatus = index
         switch (index) {
             case 0:
@@ -73,9 +74,6 @@ class Preferential extends Component {
         }
     }
 
-    handleClick = (courseId) => {
-        console.log(courseId)
-    }
 
     render() {
         const tabs = [
@@ -86,6 +84,7 @@ class Preferential extends Component {
         return (
             <div className='preferential'>
                 <HeaderSearch></HeaderSearch>
+                <Loading isLoading={this.state.isLoading}>
                     <div className='class-content'>
                         <WhiteSpace/>
 
@@ -132,16 +131,18 @@ class Preferential extends Component {
                                             </div>
                                         )
                                         return (
-                                        <VList handleClick={this.handleClick} key={index} img={item.image_name}
+                                            <VList key={index} img={item.image_name}
                                                    id={item.course_id} status={status}
                                                    info={Info}></VList>
                                         )
                                     })}
                                 </ul>
+
                             </div>
                         </Tabs>
                         <WhiteSpace/>
                     </div>
+                </Loading>
             </div>
         )
     }

src/components/purchased/index.js

 import React, {Component} from 'react';
 import './index.scss';
-import {HeaderBar} from '../../common'
-import {VList} from '../../common'
+import {HeaderBar, VList} from '../../common'
 import {http, api} from "@/utils";
 import {Link} from 'react-router-dom'
 import {Toast} from 'antd-mobile'
 import {connect} from "react-redux"
+import Loading from '@/common/Loading'
 
 class Purchased extends Component {
     constructor(props) {
         super(props)
         this.state = {
-            data: []
+            data: [],
+            isLoading: true
         }
     }
 
@@ -24,7 +25,8 @@ class Purchased extends Component {
         http.get(`${api.home}/m/my/courses`,).then((res) => {
             if (res.data.code === 200) {
                 this.setState({
-                    data: res.data.data
+                    data: res.data.data,
+                    isLoading: false
                 })
             } else {
                 Toast.info(res.data.msg, 2);
@@ -39,6 +41,7 @@ class Purchased extends Component {
         return (
             <div className='purchased-box'>
                 <HeaderBar title='已购课程' arrow={true} cart={false}></HeaderBar>
+                <Loading isLoading={this.state.isLoading}>
                     {
                         this.state.data && this.state.data.length > 0 ?
                             <div className="purchased-body">
@@ -71,6 +74,7 @@ class Purchased extends Component {
                                 <Link to='/classify'>去逛逛</Link>
                             </div>
                     }
+                </Loading>
 
             </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 (

src/components/shopCart/index.js

@@ -2,11 +2,8 @@ import React, {Component} from 'react'
 import {connect} from 'react-redux'
 import {Checkbox, Modal, Toast} from 'antd-mobile'
 import {HeaderBar} from '../../common'
-
-//组件
+import Loading from '@/common/Loading'
 import ShopCart from './cartList.js'
-
-//css
 import './card.scss'
 import classnames from 'classnames'
 import {api, http} from "@/utils";
@@ -21,7 +18,8 @@ class Cart extends Component {
             checkedNum: 0,
             allPrice: 0,
             cartNmu: 0,
-            courseIdarr: [] // 选中的课程id
+            courseIdarr: [], // 选中的课程id
+            isLoading: true
         }
 
     }
@@ -31,11 +29,13 @@ class Cart extends Component {
         this.getList()
     }
 
+    // 获取课程列表
     getList = () => {
         http.get(`${api.home}/m/cart/list`).then((res) => {
             if (res.data.code === 200) {
                 this.setState({
-                    data: res.data.data.courses
+                    data: res.data.data.courses,
+                    isLoading: false
                 })
             } else {
                 Toast.info(res.data.msg, 2);
@@ -146,7 +146,6 @@ class Cart extends Component {
                 {
                     text: '确认',
                     onPress: () => {
-                        console.log(this.state.courseIdarr)
                         let data = {
                             course_ids: this.state.courseIdarr
                         }
@@ -170,6 +169,7 @@ class Cart extends Component {
             <div className="cart-page" style={{overflow: 'hidden'}}>
                 <HeaderBar title='购物车' arrow={true} cart={false} delete={true} toDelete={this.todelete}></HeaderBar>
 
+                <Loading isLoading={this.state.isLoading}>
                     <div className="cart-body">
                         <ShopCart checkChange={this.checkChange.bind(this)} data={this.state.data}/>
 
@@ -198,6 +198,7 @@ class Cart extends Component {
                         </div>
 
                     </div>
+                </Loading>
 
 
             </div>