index.js 4.54 KB
Newer Older
1 2
import React from 'react'
import { Link, withRouter } from "react-router-dom";
zhanghaozhe committed
3
import { Course } from "src/common/index"
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
import './index.scss'


// 课程模块儿公共组件
// 课程数量是奇数第一个课程需要横着展示沾满一行,课程数量是偶数一行显示两个

const HomeCourseList = function ({modules, history}) {

  const toDetail = id => {
    history.push(`/detail?id=${id}`)
  }

  return modules.length > 0 && modules.map((module, i) => {
    return <div key={i}>
      <Module module={module}
              toDetail={toDetail}
      />
      <p className="borderTop"/>
    </div>
  })
}

const Module = function CourseList({module, toDetail}) {

  let filterList = []
  let isOdd = module.list.length % 2 === 0

  if (module.name === '限时免费') {
    filterList = module.list
  } else {
    // 数量为奇数时,第一个课程显示大图(如后台未上传,前台显示小图),课程数量为偶数时,均显示小图

    if (isOdd) {
      filterList = module.list
    } else {
      filterList = module.list[0].course_img === module.list[0].course_img_small ? module.list : module.list.slice(1)
    }
  }


  return <div className='category home-course-list'>
    <h2 className="title">
      {module.name}
      {
        module.name === '限时免费' && <span className={'hot'}>hot</span>
      }
    </h2>

    {
      module.show_more === 1 &&
zhanghaozhe committed
54
      <Link className="more" to='/classify'>查看更多 &gt;</Link>
55 56 57 58
    }
    {
      module.show_more === 2 ?
        module.name === '限时免费'
zhanghaozhe committed
59 60
          ? <Link className="more" to={'/free'}>查看更多 &gt;</Link>
          : <Link className="more" to={module.more_page}>查看更多 &gt;</Link>
61 62
        : null
    }
wangshuo committed
63
    {/* <LazyLoad offset={50}> */}
64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
      <ul className='index-course-detail'>
        {
          module.name !== '限时免费' && !isOdd && module.list[0].course_img !== module.list[0].course_img_small &&
          <div className="category-vip" onClick={() => toDetail(module.list[0].course_id)}>
            <img src={module.list[0].course_img} alt=""/>
          </div>
        }
        {
          filterList.map((item, index) => {
            const top = item.is_limit_free ? null : (
              <div>
                {item.is_audition === true &&
                <span className='audition'><i className={'iconfont iconerji'}></i>试听</span>
                }
                {item.is_aist &&
                <span className='return_bash'></span>
                }
              </div>
            )

            const bottom = <Bottom course={item}/>

            const status = item.is_limit_free ? null : <div>
              {item.is_bargain &&
              <p className='course-status'>砍价减{item.bargain_price}</p>
              }
              {item.is_groupon &&
              <p className='course-status'>拼团价{item.groupon_price}</p>
              }
            </div>
            return (
              <Course
                key={index}
                top={top}
                data={item}
                bottom={bottom}
                status={status}
                img={item.course_img_small}
                title={item.course_title}
                id={item.course_id}
                toDetail={toDetail}
                className='text-overflow-2'
              />
            )
          })
        }
      </ul>
wangshuo committed
111
    {/* </LazyLoad> */}
112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158
  </div>
}

//限时免费
function LimitFree({course}) {
  /*
  *
  * limit_free_status: 0-未领取 1-已领取 2-已过期
  *
  * */
  switch (course.limit_free_status) {
    case 0:
      return <Link to={`/detail?id=${course.course_id}`}>
        <p className={'course-price'}>
          <span className={'free'}>免费领取</span>
          <span className={'old'}>¥{course.price}</span>
        </p>
      </Link>
    case 1:
      return <div className={'isbuy'}>已领取</div>
    default:
      return <p className="course-price">
        <span className="new">¥{course.discounts_price}</span>
        <span className="old">¥{course.price}</span>
      </p>
  }
}

//课程底部
function Bottom({course}) {
  if (course.is_buy) {
    if (course.is_limit_free && course.limit_free_status === 1) {
      return <div class={'isbuy'}>已领取</div>
    } else {
      return <div className={'isbuy'}>已购买</div>
    }
  } else {
    return course.is_limit_free
      ? <LimitFree course={course}/>
      : <p className="course-price">
        <span className="new">¥{course.discounts_price}</span>
        <span className="old">¥{course.price}</span>
      </p>
  }
}

export default withRouter(HomeCourseList)