index.js

import React, { Component } from 'react';
import classnames from 'classnames';
import { http , getParam, SendMessageToApp} from '@/utils';
import { Toast } from "antd-mobile";
import ListFrame from './../listFrame/index';
import CourseItem from './../courseItem/index';
import ListHeader from './../listHeader';
import './index.scss';
import cookie from "js-cookie";

class CourseList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      basic: {
        course: [],
        courseList: [],
        isMore: false,
      },
      advanced: {
        course: [],
        courseList: [],
        isMore: false,
      },
      higher: {
        course: [],
        courseList: [],
        isMore: false,
      },
      expand: {
        course: [],
        courseList: [],
        isMore: false,
      },
      group: {
        course: [],
        courseList: [],
        isMore: false,
      },
      training: {
        course: [],
        courseList: [],
        isMore: false,
      }
    };
  }

  componentDidMount() {

    // 精品课程-集训营、就业班/AI特训营
    this.fetchCourseData();

    // AI之路-基础
    this.fetchAICourse('one');

    // AI之路-进阶
    this.fetchAICourse('two');

    // AI之路-高阶
    this.fetchAICourse('three');

    // AI之路-拓展
    this.fetchAICourse('four');
  }

  shouldComponentUpdate(nextProps, nextState, nextContext) {
    if(this.props.isApp !== nextProps.isApp) {
      // 精品课程-集训营、就业班/AI特训营
      this.fetchCourseData();

      // AI之路-基础
      this.fetchAICourse('one');

      // AI之路-进阶
      this.fetchAICourse('two');

      // AI之路-高阶
      this.fetchAICourse('three');

      // AI之路-拓展
      this.fetchAICourse('four');
      return false;
    }
    return true;
  }

  fetchAICourse = (key) => {
    const { basic, advanced, higher, expand } = this.state;
    http.get(`${API.home}/sys/ai_grow_up_courses/${key}`).then(res => {
      const {code, data} = res.data;
      if (code === 200) {
        if (data.length > 4) {
          if (key === 'one') {
            this.setState({
              basic: Object.assign({}, basic, {
                isMore: true,
                course: data.filter((item, index) => index < 4),
                courseList: data,
              })
            });
          }
          if (key === 'two') {
            this.setState({
              advanced: Object.assign({}, advanced, {
                isMore: true,
                course: data.filter((item, index) => index < 4),
                courseList: data,
              })
            });
          }
          if (key === 'three') {
            this.setState({
              higher: Object.assign({}, higher, {
                isMore: true,
                course: data.filter((item, index) => index < 4),
                courseList: data,
              })
            });
          }
          if (key === 'four') {
            this.setState({
              expand: Object.assign({}, expand, {
                isMore: true,
                course: data.filter((item, index) => index < 4),
                courseList: data,
              })
            });
          }
        } else {
          if (key === 'one') {
            this.setState({
              basic: Object.assign({}, basic, {
                isMore: false,
                course: data,
                courseList: data,
              })
            });
          }
          if (key === 'two') {
            this.setState({
              advanced: Object.assign({}, advanced, {
                isMore: false,
                course: data,
                courseList: data,
              })
            });
          }
          if (key === 'three') {
            this.setState({
              higher: Object.assign({}, higher, {
                isMore: false,
                course: data,
                courseList: data,
              })
            });
          }
          if (key === 'four') {
            this.setState({
              expand: Object.assign({}, expand, {
                isMore: false,
                course: data,
                courseList: data,
              })
            });
          }
        }
      }
    });
  }

  fetchCourseData = () => {
    const { group, training } = this.state;
    http.get(`${API.home}/sys/preheat_data`).then(res => {
      const {code, data} = res.data;
      if (code === 200) {
        if (data.excellent_course.length > 2) {
          this.setState({
            group: Object.assign({}, group, {
              isMore: true,
              course: data.excellent_course.filter((item, index) => index < 2),
              courseList: data.excellent_course,
            })
          });
        } else {
          this.setState({
            group: Object.assign({}, group, {
              isMore: false,
              course: data.excellent_course,
              courseList: data.excellent_course,
            })
          });
        }
        if (data.ai_elite_courses.length > 2) {
          this.setState({
            training: Object.assign({}, training, {
              isMore: true,
              course: data.ai_elite_courses.filter((item, index) => index < 2),
              courseList: data.ai_elite_courses,
            })
          });
        } else {
          this.setState({
            training: Object.assign({}, training, {
              isMore: false,
              course: data.ai_elite_courses,
              courseList: data.ai_elite_courses,
            })
          });
        }
      }
    });
  }

  handleToMore = (key) => {
    let data = {};
    if(this.state[key]['isMore']) {
      data[key] = {
        isMore: !this.state[key]['isMore'],
        course: this.state[key]['courseList'],
        courseList: this.state[key]['courseList']
      };
      this.setState({
        ...data
      });
    }else {
      if(key === 'group' || key === 'training') {
        data[key] = {
          isMore: !this.state[key]['isMore'],
          course: this.state[key]['courseList'].filter((item, index) => index < 2),
          courseList: this.state[key]['courseList']
        };
      }else {
        data[key] = {
          isMore: !this.state[key]['isMore'],
          course: this.state[key]['courseList'].filter((item, index) => index < 4),
          courseList: this.state[key]['courseList']
        };
      }
      this.setState({
        ...data
      });
    }
  }

  toReceiveCoupon(id, key = '') {
    const {isLogin, toLogin} = this.props;


    if(isLogin) {
      var _czc = _czc || [];
      var name = '课程id=' + id;
      _czc.push(["_trackEvent", name, 'm端双十一立即领券']);

      http.post(`${API.home}/sys/activity/coupon/receive`, {
        course_id: id
      }).then(res => {
        const { code, msg } = res.data;
        if(code === 200) {
          Toast.info('领取成功～', 2, null, false);
          let obj = {};
          obj[key] = {
            isMore: this.state[key]['isMore'],
            course: this.state[key]['course'].map(item => {
              if(item.course_id === id) {
                return Object.assign({}, item, {
                  course_status: 2
                });
              }
              return item;
            }),
            courseList: this.state[key]['courseList'].map(item => {
              if(item.course_id === id) {
                return Object.assign({}, item, {
                  course_status: 2
                });
              }
              return item;
            }),
          }
          this.setState({
            ...obj
          });
        } else {
          Toast.info(msg, 2, null, false);
        }
      });
    }else{
      toLogin();
    }

  }


  toQQque=()=>{
    if (!getParam('version')) {
      location.href='https://q.url.cn/AB8aue?_type=wpa&qidian=true'
    } else {
      SendMessageToApp("toQQ", 'https://q.url.cn/AB8aue?_type=wpa&qidian=true')
    }
  }

  // 去课程详情页
  toCourse = (courseId) => {
    const { history } = this.props;
    if (!getParam('version')) {
      history.push(`/detail?id=${courseId}`);
    } else {
      SendMessageToApp("toCourse", courseId);
    }
  }

  // 开始使用
  toCourse2 = (courseId) => {
    const { history } = this.props;
    var _czc = _czc || [];
    var name = '课程id=' + courseId;
    _czc.push(["_trackEvent", name, 'm端双十一开始使用优惠券']);

    if (!getParam('version')) {
      history.push(`/detail?id=${courseId}`);
    } else {
      SendMessageToApp("toCourse", courseId);
    }
  }


  render() {
    const { isFormal } = this.props;
    const { basic, advanced, higher, expand, group, training } = this.state;
    return (
        <div className="boutique-course">
          <ListHeader text="集训营、就业班" size="middle" styles={{margin: '20px 0 15px'}} />
          {/* 集训营、就业班 */}
          {
            (group.course && group.course.length > 0) &&
            <>
              <div data-layout="row">
                {
                  group.course.map(item => (
                      <CourseItem image={item.image_name} key={item.course_id} id={item.course_id} toCourse={this.toCourse}>
                        <div className="coupon-course__footer">
                          <a onClick={() => this.toQQque()} className="course-button">立抢超低团购价</a>
                        </div>
                      </CourseItem>
                  ))
                }
              </div>
              {
                (group.courseList && group.courseList.length > 2) &&
                <button className="more-button" onClick={() => this.handleToMore('group')}>
                  {group.isMore? '展开更多' : '收起'}
                </button>
              }
            </>
          }

          <ListHeader text="AI特训营" size="middle" styles={{margin: '0 0 15px'}} />
          {/* AI特训营 */}
          {
            (training.course && training.course.length > 0) &&
            <>
              <div data-layout="row">
                {
                  training.course.map(item => (
                      <CourseItem image={item.image_name} key={item.course_id} id={item.course_id} toCourse={this.toCourse}>
                        <div className="coupon-course__footer">
                          {
                            item.course_status === 1 &&
                            <a
                                className={classnames("coupon-course__button", "coupon-course__button--receive")}
                                onClick={() => this.toReceiveCoupon(item.course_id, 'training')}
                            >
                          <span className="coupon-course__button-price">
                            <em>¥{item.coupon}</em>
                            <i>代金券</i>
                          </span>
                              <span className="coupon-course__button-label">立即领券</span>
                            </a>
                          }

                          {
                            (isFormal === 0 && item.course_status === 2) &&
                            <a className="coupon-course__button">
                          <span className="coupon-course__button-price">
                            <em>¥{item.coupon}</em>
                            <i>代金券</i>
                          </span>
                              <span className="coupon-course__button-label">11.11开始使用</span>
                            </a>
                          }
                          {
                            (isFormal === 1 && item.course_status === 2) &&
                            <a
                                onClick={() => this.toCourse2(item.course_id)}
                                className="coupon-course__button">
                          <span className="coupon-course__button-price">
                            <em>¥{item.coupon}</em>
                            <i>代金券</i>
                          </span>
                              <span className="coupon-course__button-label">开始使用</span>
                            </a>
                          }
                          {
                            item.course_status === 3 &&
                            <a onClick={() => this.toCourse(item.course_id)}
                               className="course-button"
                               data-type="study"
                            >开始学习</a>
                          }
                        </div>
                      </CourseItem>
                  ))
                }
              </div>
              {
                (training.courseList && training.courseList.length > 2) &&
                <button className="more-button" onClick={() => this.handleToMore('training')}>
                  {training.isMore? '展开更多' : '收起'}
                </button>
              }
            </>
          }

          {/* AI成长之路--基础 */}
          <ListHeader text="AI成长之路" size="middle" styles={{margin: '0 0 15px'}} />
          {
            (basic.course && basic.course.length > 0) &&
            <>
              <h4 className="ai-course__subtitle">基础</h4>
              <div data-layout="row">
                {
                  basic.course.map(item => (
                      <CourseItem image={item.image_name} key={item.course_id} id={item.course_id} toCourse={this.toCourse}>
                        {
                          item.type === 0 &&
                          <div className="coupon-course__footer">
                            {
                              item.course_status === 1 &&
                              <a
                                  className={classnames("coupon-course__button", "coupon-course__button--receive")}
                                  onClick={() => this.toReceiveCoupon(item.course_id, 'basic')}
                              >
                                <span className="coupon-course__button-price">
                                  <em>¥{item.coupon}</em>
                                  <i>代金券</i>
                                </span>
                                <span className="coupon-course__button-label">立即领券</span>
                              </a>
                            }

                            {
                              (isFormal === 0 && item.course_status === 2) &&
                              <a className="coupon-course__button">
                                <span className="coupon-course__button-price">
                                  <em>¥{item.coupon}</em>
                                  <i>代金券</i>
                                </span>
                                <span className="coupon-course__button-label">11.11开始使用</span>
                              </a>
                            }
                            {
                              (isFormal === 1 && item.course_status === 2) &&
                              <a onClick={() => this.toCourse2(item.course_id)} className="coupon-course__button">
                                <span className="coupon-course__button-price">
                                  <em>¥{item.coupon}</em>
                                  <i>代金券</i>
                                </span>
                                <span className="coupon-course__button-label">开始使用</span>
                              </a>
                            }
                            {
                              item.course_status === 3 &&
                              <a onClick={() => this.toCourse(item.course_id)}
                                 className="course-button"
                                 data-type="study"
                              >开始学习</a>
                            }
                          </div>
                        }
                        {
                          item.type === 1 &&
                          <div className="cent-course__footer">
                            {
                              (item.course_status === 1 || item.course_status === 2) &&
                              <a onClick={() => this.toCourse(item.course_id)} className="course-button">1分钱开团</a>
                            }
                            {
                              item.course_status === 3 &&
                              <a onClick={() => this.toCourse(item.course_id)} className="course-button" data-type="study">开始学习</a>
                            }
                          </div>
                        }
                      </CourseItem>
                  ))
                }
              </div>
              {
                (basic.courseList && basic.courseList.length > 4) &&
                <button className="more-button" onClick={() => this.handleToMore('basic')}>
                  {basic.isMore? '展开更多' : '收起'}
                </button>
              }
            </>
          }

          {/* AI成长之路--进阶 */}
          {
            (advanced.course && advanced.course.length > 0) &&
            <>
              <h4 className="ai-course__subtitle">进阶</h4>
              <div data-layout="row">
                {
                  advanced.course.map(item => (
                      <CourseItem image={item.image_name} key={item.course_id} id={item.course_id} toCourse={this.toCourse}>
                        {
                          item.type === 0 &&
                          <div className="coupon-course__footer">
                            {
                              item.course_status === 1 &&
                              <a
                                  className={classnames("coupon-course__button", "coupon-course__button--receive")}
                                  onClick={() => this.toReceiveCoupon(item.course_id, 'advanced')}
                              >
                            <span className="coupon-course__button-price">
                              <em>¥{item.coupon}</em>
                              <i>代金券</i>
                            </span>
                                <span className="coupon-course__button-label">立即领券</span>
                              </a>
                            }
                            {
                              (isFormal === 0 && item.course_status === 2) &&
                              <a className="coupon-course__button">
                            <span className="coupon-course__button-price">
                              <em>¥{item.coupon}</em>
                              <i>代金券</i>
                            </span>
                                <span className="coupon-course__button-label">11.11开始使用</span>
                              </a>
                            }
                            {
                              (isFormal === 1 && item.course_status === 2) &&
                              <a onClick={() => this.toCourse2(item.course_id)} className="coupon-course__button">
                            <span className="coupon-course__button-price">
                              <em>¥{item.coupon}</em>
                              <i>代金券</i>
                            </span>
                                <span className="coupon-course__button-label">开始使用</span>
                              </a>
                            }
                            {
                              item.course_status === 3 &&
                              <a onClick={() => this.toCourse(item.course_id)}
                                 className="course-button"
                                 data-type="study"
                              >开始学习</a>
                            }
                          </div>
                        }
                        {
                          item.type === 1 &&
                          <div className="cent-course__footer">
                            {
                              (item.course_status === 1 || item.course_status === 2) &&
                              <a onClick={() => this.toCourse(item.course_id)} className="course-button">1分钱开团</a>
                            }
                            {
                              item.course_status === 3 &&
                              <a onClick={() => this.toCourse(item.course_id)} className="course-button" data-type="study">开始学习</a>
                            }
                          </div>
                        }
                      </CourseItem>
                  ))
                }
              </div>
              {
                (advanced.courseList && advanced.courseList.length > 4) &&
                <button className="more-button" onClick={() => this.handleToMore('advanced')}>
                  {advanced.isMore? '展开更多' : '收起'}
                </button>
              }
            </>
          }

          {/* AI成长之路--高阶 */}
          {
            (higher.course && higher.course.length > 0) &&
            <>
              <h4 className="ai-course__subtitle">高阶</h4>
              <div data-layout="row">
                {
                  higher.course.map(item => (
                      <CourseItem image={item.image_name} key={item.course_id} id={item.course_id} toCourse={this.toCourse}>
                        {
                          item.type === 0 &&
                          <div className="coupon-course__footer">
                            {
                              item.course_status === 1 &&
                              <a
                                  className={classnames("coupon-course__button", "coupon-course__button--receive")}
                                  onClick={() => this.toReceiveCoupon(item.course_id, 'higher')}
                              >
                            <span className="coupon-course__button-price">
                              <em>¥{item.coupon}</em>
                              <i>代金券</i>
                            </span>
                                <span className="coupon-course__button-label">立即领券</span>
                              </a>
                            }
                            {
                              (isFormal === 0 && item.course_status === 2) &&
                              <a className="coupon-course__button">
                            <span className="coupon-course__button-price">
                              <em>¥{item.coupon}</em>
                              <i>代金券</i>
                            </span>
                                <span className="coupon-course__button-label">11.11开始使用</span>
                              </a>
                            }
                            {
                              (isFormal === 1 && item.course_status === 2) &&
                              <a onClick={() => this.toCourse2(item.course_id)} className="coupon-course__button">
                            <span className="coupon-course__button-price">
                              <em>¥{item.coupon}</em>
                              <i>代金券</i>
                            </span>
                                <span className="coupon-course__button-label">开始使用</span>
                              </a>
                            }
                            {
                              item.course_status === 3 &&
                              <a onClick={() => this.toCourse(item.course_id)}
                                 className="course-button"
                                 data-type="study"
                              >开始学习</a>
                            }
                          </div>
                        }
                        {
                          item.type === 1 &&
                          <div className="cent-course__footer">
                            {
                              (item.course_status === 1 || item.course_status === 2) &&
                              <a onClick={() => this.toCourse(item.course_id)} className="course-button">1分钱开团</a>
                            }
                            {
                              item.course_status === 3 &&
                              <a onClick={() => this.toCourse(item.course_id)} className="course-button" data-type="study">开始学习</a>
                            }
                          </div>
                        }
                      </CourseItem>
                  ))
                }
              </div>
              {
                (higher.courseList && higher.courseList.length > 4) &&
                <button className="more-button" onClick={() => this.handleToMore('higher')}>
                  {higher.isMore? '展开更多' : '收起'}
                </button>
              }
            </>
          }

          {/* AI成长之路--扩展 */}
          {
            (expand.course && expand.course.length > 0) &&
            <>
              <h4 className="ai-course__subtitle">扩展</h4>
              <div data-layout="row">
                {
                  expand.course.map(item => (
                      <CourseItem image={item.image_name} key={item.course_id} id={item.course_id} toCourse={this.toCourse}>
                        {
                          item.type === 0 &&
                          <div className="coupon-course__footer">
                            {
                              item.course_status === 1 &&
                              <a
                                  className={classnames("coupon-course__button", "coupon-course__button--receive")}
                                  onClick={() => this.toReceiveCoupon(item.course_id, 'expand')}
                              >
                            <span className="coupon-course__button-price">
                              <em>¥{item.coupon}</em>
                              <i>代金券</i>
                            </span>
                                <span className="coupon-course__button-label">立即领券</span>
                              </a>
                            }

                            {
                              (isFormal === 0 && item.course_status === 2) &&
                              <a className="coupon-course__button">
                            <span className="coupon-course__button-price">
                              <em>¥{item.coupon}</em>
                              <i>代金券</i>
                            </span>
                                <span className="coupon-course__button-label">11.11开始使用</span>
                              </a>
                            }
                            {
                              (isFormal === 1 && item.course_status === 2) &&
                              <a onClick={() => this.toCourse2(item.course_id)} className="coupon-course__button">
                            <span className="coupon-course__button-price">
                              <em>¥{item.coupon}</em>
                              <i>代金券</i>
                            </span>
                                <span className="coupon-course__button-label">开始使用</span>
                              </a>
                            }
                            {
                              item.course_status === 3 &&
                              <a onClick={() => this.toCourse(item.course_id)}
                                 className="course-button"
                                 data-type="study"
                              >开始学习</a>
                            }
                          </div>
                        }
                        {
                          item.type === 1 &&
                          <div className="cent-course__footer">
                            {
                              (item.course_status === 1 || item.course_status === 2) &&
                              <a onClick={() => this.toCourse(item.course_id)} className="course-button">1分钱开团</a>
                            }
                            {
                              item.course_status === 3 &&
                              <a onClick={() => this.toCourse(item.course_id)} className="course-button" data-type="study">开始学习</a>
                            }
                          </div>
                        }
                      </CourseItem>
                  ))
                }
              </div>
              {
                (expand.courseList && expand.courseList.length > 4) &&
                <button className="more-button" onClick={() => this.handleToMore('expand')}>
                  {expand.isMore? '展开更多' : '收起'}
                </button>
              }
            </>
          }
        </div>
    )
  }
}

export default ListFrame(CourseList);