co

src/common/Course/course.scss

@@ -13,6 +13,7 @@
   .course-title {
     font-size: 14px;
     color: $color_333;
+    min-height: 38px;
     line-height: 19px;
     margin-top: 9px;
   }

src/components/classify/index.js

 import React, {Component} from 'react';
 import {WithTab} from '@/HOCs'
 import './index.scss';
-import { http } from "@/utils";
+import {http} from "@/utils";
 import {Link} from 'react-router-dom'
 import {Toast} from 'antd-mobile'
 import {HeaderBar} from "@/common"
@@ -32,14 +32,14 @@ class Classify extends Component {
                 if (res.data.data.common.length > 0) {
                     this.setState({
                         basics: res.data.data.common[0],
-                        advanced: res.data.data.common[1],
+                        advanced: res.data.data.common[1] || [],
                     })
                 }
                 if (res.data.data.special.length > 0) {
                     this.setState({
                         camp: res.data.data.special[0],
-                        employment: res.data.data.special[1],
-                        special: res.data.data.special[2],
+                        employment: res.data.data.special[1] || [],
+                        special: res.data.data.special[2] || [],
                     })
                     
                 }

src/components/myOrders/index.js

@@ -6,35 +6,47 @@ import {http, api} 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'
 
 const alert = Modal.alert
 
 
 class MyOrders extends Component {
+    page = 1
     constructor(props) {
         super(props)
         this.state = {
             data: [],
-            isLoading: true
+            pageNum: 1,
+            isLoading: true,
+            total: 0,
         }
     }
 
     componentDidMount() {
-        this.getList()
+        this.getList(this.page)
     }
 
+    getMore = debounce(() => {
+        if(this.state.data.length % 10 === 0){
+            this.getList(++this.page)
+        }
+    }, 200)
+
     // 获取订单
     getList = () => {
-        http.get(`${API.home}/m/my/orders/1/1`,).then((res) => {
+        http.get(`${API.home}/m/my/orders/${this.page}/10`,).then((res) => {
             if (res.data.code === 200) {
                 this.setState({
-                    data: res.data.data,
+                    data: this.state.data.concat(res.data.data),
                     isLoading: false
                 })
             } else {
                 Toast.info(res.data.msg, 2);
             }
         })
+
     }
 
     // 取消订单
@@ -68,42 +80,54 @@ class MyOrders extends Component {
                 <Loading isLoading={this.state.isLoading}>
                     {
                         this.state.data && this.state.data.length > 0 ?
-                            this.state.data.map((item, index) => {
-                                return (
-                                    <div className="order-body" key={index}>
-                                        <OrderInfo item={item}/>
-                                        {
-                                            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>
-                                                        <p className='order-content text-overflow-2'>{item.description}</p>
-                                                        <p className='order-des'>
-                                                            <span className='order-newprice'>¥{item.pay_amount}</span>
-                                                            <span className='order-price'>¥{item.price0}</span>
-                                                        </p>
-                                                    </div>
-                                                )
-                                                return (
-                                                    <div className="order-wrap" key={index}>
-                                                        <OrderList info={Info} src={item.image_name} isSign={item.is_aist}
-                                                                   id={item.course_id}></OrderList>
-                                                    </div>
-                                                )
-                                            })
-                                        }
-
-                                        <PayInfo item={item} cancel={this.cancel}/>
-                                    </div>
-                                )
-                            }) : <div className="cart-tip">
+                            <InfiniteScroll
+                                pageStart={0}
+                                hasMore={true}
+                                loadMore={this.getMore.bind(this)}
+                                useWindow={true}
+                            >
+                                {
+                                    this.state.data.map((item, index) => {
+                                        return (
+                                            <div className="order-body" key={index}>
+                                                <OrderInfo item={item}/>
+                                                {
+                                                    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>
+                                                                <p className='order-content text-overflow-2'>{item.description}</p>
+                                                                <p className='order-des'>
+                                                                <span
+                                                                    className='order-newprice'>¥{item.pay_amount}</span>
+                                                                    <span
+                                                                        className='order-price'>¥{item.price0}</span>
+                                                                </p>
+                                                            </div>
+                                                        )
+                                                        return (
+                                                            <div className="order-wrap" key={index}>
+                                                                <OrderList info={Info} src={item.image_name}
+                                                                           isSign={item.is_aist}
+                                                                           id={item.course_id}></OrderList>
+                                                            </div>
+                                                        )
+                                                    })
+                                                }
+
+                                                <PayInfo item={item} cancel={this.cancel}/>
+                                            </div>
+                                        )
+                                    })
+                                }  </InfiniteScroll> : <div className="cart-tip">
                                 <p className='cart-mess'>您还没有订单哦，快去逛逛吧~</p>
                                 <Link to='/classify'>去逛逛</Link>
                             </div>
                     }
+
                 </Loading>
             </div>
         )