Skip to content

M
mr-julyedu
Commit 903baf13 by zhanghaozhe
Options

限时免费

parent 98f84208
Showing with 133 additions and 73 deletions
src/components/limit-free/index.js
......@@ -2,17 +2,30 @@ import React, { Component } from 'react'
import { http } from "@/utils"
import './index.scss'
import { HeaderBar } from "@common/index"
import { WhiteSpace } from "antd-mobile";
import { WhiteSpace, Toast } from "antd-mobile";
import VList from '@/common/v-list-base'
import WithFullSize from "@/HOCs/WithFullSize"
function showToast(msg) {
Toast.info(msg, 2, null, false)
}
class LimitFree extends Component {
nav
state = {
tabs: new Array(10).fill('a').map((item, i) => ({
title: `${i + 1}th Tab`
})),
tab: {
0: 'tab0',
1: 'tab1',
2: 'tab2',
3: 'tab3',
4: 'tab4',
5: 'tab5',
6: 'tab6',
7: 'tab7',
8: 'tab8',
9: 'tab9',
},
courses: [
{
img: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/20a86c1353.jpg',
......@@ -39,44 +52,68 @@ class LimitFree extends Component {
price1: 199,
},
],
navItemStyle: {}
navItemStyle: {},
tabActiveIndex: 0
}
componentDidMount() {
this.initializeNav()
this.getData()
}
getData = () => {
Promise.all([http.get(`${API.home}/sys/category`), http.get(`${API.home}/sys/course`)])
.then(res => {
const [tab, courses] = res
const {data: tabData, code: tabCode, msg: tabMsg} = tab.data
const {data: coursesData, code: coursesCode, msg: coursesMsg} = courses.data
if (tabCode == 200) {
this.setState({
tab: tabData
})
} else {
showToast(tabMsg)
}
if (coursesCode === 200) {
this.setState({
courses: coursesData
})
} else {
showToast(coursesMsg)
}
})
}
handleClick = id => {
}
initializeNav = () => {
const {tabs} = this.state
const navItemNum = 5
const navItemLen = tabs.length
console.log(getComputedStyle(this.nav).paddingLeft)
if(navItemLen <= navItemNum){
return
changeTab = (e, index) => {
const {tabActiveIndex} = this.state
if (tabActiveIndex !== index) {
this.setState({
tabActiveIndex: index
}
)
}
}
render() {
const {tabs, courses, navItemStyle} = this.state
const {tab, courses, navItemStyle, tabActiveIndex} = this.state
return (
<div className='limit-free'>
<HeaderBar arrow={true} title={'限时免费'}></HeaderBar>
<div className="banner">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/time_limited_free/M/banner.png" alt=""/>
</div>
<nav ref={el => this.nav = el}>
<nav>
<div className="prev-cover"></div>
<ul>
<ul ref={el => this.nav = el}>
{
tabs && !!tabs.length && tabs.map((item, index) => {
tab && !!Object.keys(tab).length && Object.keys(tab).map((item, index) => {
return (
<li key={index} className={index === 0 ? 'active' : ''} style={navItemStyle}>
{item.title}
<li key={index} className={index === tabActiveIndex ? 'active' : ''} style={navItemStyle}
onClick={e => this.changeTab(e, index)}>
<a href={`#category${item}`} target={'_self'}>{tab[item]}</a>
</li>
)
})
......@@ -87,56 +124,63 @@ class LimitFree extends Component {
<WhiteSpace/>
<div className="course-list">
<ul>
<li>
<h2>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/time_limited_free/M/category-icon.png"
alt=""/>
<span>分类1</span>
</h2>
<ul className={'courses'}>
{
courses && courses.length && courses.map((item, index) => {
let des, bottom
switch (item.status) {
case 1:
des = <div className={'learner'}>
<i className='iconfont iconRectangleCopy4'/>
<span>{item.count}人学习</span>
</div>
bottom = <div className={'bottom'}>
<span className={'red'}>限时免费</span>
<span className={'origin-price'}>¥{item.price1}</span>
<button>免费领取</button>
</div>
break
case 2:
des = <div className={'remain-time'}>
<i className={'iconfont iconiconfront-21'}/>
<span>12天55时55分后过期</span>
</div>
break
case 3:
{
tab && !!Object.keys(tab).length && Object.keys(tab).map(key => {
return (
<li key={key}>
<h2 id={`category${key}`}>
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/time_limited_free/M/category-icon.png"
alt=""/>
<span>{tab[key]}</span>
</h2>
<ul className={'courses'}>
{
courses && courses.length && courses.map((item, index) => {
let des, bottom
switch (item.status) {
case 1:
des = <div className={'learner'}>
<i className='iconfont iconRectangleCopy4'/>
<span>{item.play_times}人学习</span>
</div>
bottom = <div className={'bottom'}>
<span className={'red'}>限时免费</span>
<span className={'origin-price'}>¥{item.price1}</span>
<button>免费领取</button>
</div>
break
case 2:
des = <div className={'remain-time'}>
<i className={'iconfont iconiconfront-21'}/>
<span>12天55时55分后过期</span>
</div>
break
case 3:
}
}
const info = (
<div className='info'>
<div className='title'>{item.course_title}</div>
{des}
{bottom}
</div>
)
return (
<VList img={item.image_name}
handleClick={this.handleClick}
info={info}
key={index}
/>
)
})
}
</ul>
</li>
const info = (
<div className='info'>
<div className='title'>{item.title}</div>
{des}
{bottom}
</div>
)
return (
<VList img={item.img}
handleClick={this.handleClick}
info={info}
key={index}
/>
)
})
}
</ul>
</li>
)
})
}
</ul>
</div>
<div className="no-more">
......@@ -147,4 +191,4 @@ class LimitFree extends Component {
}
}
export default LimitFree
\ No newline at end of file
export default WithFullSize(LimitFree)
\ No newline at end of file
src/components/limit-free/index.scss
.limit-free {
background: #F9F9FB;
min-height: 100%;
.banner {
font-size: 0;
......@@ -10,18 +11,22 @@
}
nav {
position: relative;
position: sticky;
top: 0;
left: 0;
display: flex;
align-items: center;
height: 39px;
padding: 0 18px;
background: #fff;
overflow: hidden;
z-index: 999;
.prev-cover, .next-cover {
position: absolute;
top: 0;
width: 44px;
height: 39px;
pointer-events: none;
}
.prev-cover {
......@@ -38,15 +43,22 @@
ul {
width: 100%;
height: 100%;
padding: 0 18px;
display: flex;
align-items: center;
overflow-x: auto;
&::-webkit-scrollbar {
display: none;
}
}
li {
margin-right: 23px;
width: 20%;
text-align: center;
height: 100%;
line-height: 39px;
flex-shrink: 0;
&.active {
color: #09f;
......@@ -62,6 +74,10 @@
}
.course-list li{
scroll-margin-top: 100px;
}
.courses li:nth-last-child(1) {
margin-bottom: 0;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment