Skip to content

M
mr-julyedu
Commit 420a47da by xuzhenghua
Options

index

parent 11cc2c08
Showing with 92 additions and 325 deletions
src/common/VList/index.js
...@@ -2,12 +2,13 @@ import React from 'react'; ...@@ -2,12 +2,13 @@ import React from 'react';
import './index.scss' import './index.scss'
const VList = (props) => { const VList = (props) => {
console.log(props)
return ( return (
<li className='v-list-item'> <li className='v-list-item' onClick={e=>props.handleClick(props.courseInfo.course_id)}>
<div className="content"> <div className="content">
<div className="cover" onClick={props.handleClick}> <div className="cover">
{props.status} {props.status}
<img src='https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg' alt=""/> <img src={props.courseInfo.image_name} alt=""/>
</div> </div>
{props.info} {props.info}
</div> </div>
......
src/components/Index/index.js
import React, {Component} from 'react'; import React, {Component} from 'react'
import {Course} from '../../common' import {Course} from '../../common'
import './index.scss'; import './index.scss'
import {WithTab} from '@/HOCs' import {WithTab} from '@/HOCs'
import Swiper from 'react-mobile-swiper' import Swiper from 'react-mobile-swiper'
import createStyle from './createStyle' import createStyle from './createStyle'
import LazyLoad from 'react-lazy-load'; import LazyLoad from 'react-lazy-load'
import {api} from '@/utils' import {api} from '@/utils'
import LiveRoom from './liveRoom' import LiveRoom from './liveRoom'
...@@ -13,7 +13,7 @@ const animateTypes = Swiper.animateTypes ...@@ -13,7 +13,7 @@ const animateTypes = Swiper.animateTypes
class Index extends Component { class Index extends Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = { this.state = {
banner: [], banner: [],
lives: [], lives: [],
...@@ -71,11 +71,11 @@ class Index extends Component { ...@@ -71,11 +71,11 @@ class Index extends Component {
isShow: true, isShow: true,
islive: true, islive: true,
roomId roomId
})); }))
} }
// 自组件传给父组件的isshow // 自组件传给父组件的isshow
colseBox = (val) => { colseBox = (val) => {
this.setState({isShow: val}); this.setState({isShow: val})
} }
toSearch() { toSearch() {
...@@ -145,7 +145,7 @@ class Index extends Component { ...@@ -145,7 +145,7 @@ class Index extends Component {
} }
</div> </div>
); )
} }
} }
...@@ -166,8 +166,8 @@ function TopSwiper({bannerList}) { ...@@ -166,8 +166,8 @@ function TopSwiper({bannerList}) {
) )
} }
function CourseList({modules}) { function CourseList({modules}) {
let isOdd = modules.list.length % 2 === 0; let isOdd = modules.list.length % 2 === 0
let filterList = isOdd ? modules.list : modules.list.slice(1); let filterList = isOdd ? modules.list : modules.list.slice(1)
return ( return (
<div className='category'> <div className='category'>
<h2 className="title">{modules.name}</h2> <h2 className="title">{modules.name}</h2>
...@@ -247,4 +247,4 @@ function ScrollBox(props) { ...@@ -247,4 +247,4 @@ function ScrollBox(props) {
) )
} }
export default WithTab(Index); export default WithTab(Index)
src/components/preferential/index.js
import React, {Component} from 'react'; import React, {Component} from 'react'
import {VList} from '../../common'; import {VList} from '../../common'
import {Tabs, WhiteSpace, SearchBar} from 'antd-mobile'; import {Tabs, WhiteSpace, SearchBar} from 'antd-mobile'
import './index.scss'; import './index.scss'
import {api} from "@/utils"
class Preferential extends Component { class Preferential extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.handleClick = this.handleClick.bind(this) this.state = {
this.ontabclick = this.ontabclick.bind(this) dataList: [],
courseStatus: 0,
}
} }
handleClick() { componentDidMount() {
console.log(1); this.specialSale()
} }
ontabclick(tab, index) { // 限时特惠
specialSale=()=>{
api.get('/m/home/weekDiscounts').then((res) => {
if (res.data.code === 200) {
this.setState({
dataList: res.data.data
})
}
})
}
// 砍价专区
bargain=()=>{
api.get('/m/home/bargainZone').then((res) => {
if (res.data.code === 200) {
this.setState({
dataList: res.data.data
})
}
})
}
// 一键拼团
group=()=>{
api.get('/m/home/grouponList').then((res) => {
if (res.data.code === 200) {
this.setState({
dataList: res.data.data
})
}
})
}
// tab 切换
ontabclick=(tab, index)=> {
console.log(tab, index) console.log(tab, index)
this.setState(status => ({ this.state.courseStatus = index
data: status.dataList, switch(index) {
})); case 0:
this.specialSale()
break
case 1:
this.bargain()
break
default:
this.group()
}
}
handleClick=(courseId)=>{
console.log(courseId)
} }
toSearch() { toSearch() {
...@@ -28,297 +74,12 @@ class Preferential extends Component { ...@@ -28,297 +74,12 @@ class Preferential extends Component {
window.location.href ='/index' window.location.href ='/index'
} }
state = {
mockData: [
{
title: '三月面试求职三月面试求职三月面试求职',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒6',
time: '03月12日',
record: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒',
isbuy: 1,
price0: 100,
price1: 100
},
{
title: '三月面试求职三月面试求职三月面试求职',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒6',
time: '03月12日',
record: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒',
isbuy: 1,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
],
data: [
{
title: '三月面试求职三月面试求职三月面试求职',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒6',
time: '03月12日',
record: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒',
isbuy: 1,
price0: 100,
price1: 100
},
{
title: '三月面试求职三月面试求职三月面试求职',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒6',
time: '03月12日',
record: '学习到第2课2三月面试求职班三月面试求职班三月面试求职班分33秒',
isbuy: 1,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
{
title: '三月面试求职班',
imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
contact: 'QQ群：449141326',
time: '03月12日',
record: '学习到第2课2分33秒',
isbuy: 0,
price0: 100,
price1: 100
},
],
dataList: [
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': 'Spark大数据',
'teacher': 'wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '机器学习',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': 'Linux',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 0,
'price0': 100,
'price1': 1000
},
{
'src': 'http://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/5afe433d01.png',
'title': '数学',
'teacher': 'wwwwww',
'time': '2343234',
'isbuy': 1,
'price0': 200,
'price1': 2000
}
]
}
render() { render() {
const tabs = [ const tabs = [
{title: '限时特惠'}, {title: '限时特惠'},
{title: '砍价专区'}, {title: '砍价专区'},
{title: '一键拼团'} {title: '一键拼团'}
]; ]
return ( return (
<div className='preferential'> <div className='preferential'>
<div className="search-nav"> <div className="search-nav">
...@@ -338,23 +99,25 @@ class Preferential extends Component { ...@@ -338,23 +99,25 @@ class Preferential extends Component {
tabs={tabs} tabs={tabs}
animated={false} animated={false}
onChange={(tab, index) => this.ontabclick(tab, index)} onChange={(tab, index) => this.ontabclick(tab, index)}
onTabClick={(tab, index) => this.ontabclick(tab, index)}
> >
<div className='tabs'> <div className='tabs'>
<ul> <ul>
{this.state.data.map((item, index) => { {this.state.dataList.map((item, index) => {
const Info = ( const Info = (
<div className="info"> <div className="info">
<p className='title'>{item.title}</p> <p className='title'>{item.course_title}</p>
<p className='contact text-overflow-2'>{item.contact}</p> <p className='contact text-overflow-2'>{item. course_desc}</p>
<div className='des'> <div className='des'>
{item.isbuy === 0 && <p className="course-price"> {item.is_buy &&
<span className='price'>特惠价：</span> <p className="course-price">
<span className="new">¥{item.price0}</span> {this.state.courseStatus === 0 &&
<span className='price'>特惠价：</span>
}
<span className="new">¥{item.price2}</span>
<span className="old">¥{item.price1}</span> <span className="old">¥{item.price1}</span>
</p> </p>
} }
{item.isbuy === 1 && {!item.is_buy &&
<a href="/#" className="isbuy">已购买</a> <a href="/#" className="isbuy">已购买</a>
} }
</div> </div>
...@@ -362,16 +125,16 @@ class Preferential extends Component { ...@@ -362,16 +125,16 @@ class Preferential extends Component {
) )
const status = ( const status = (
<div> <div>
{item.isbuy === 1 && {this.state.courseStatus === 1 &&
<p className='course-status'>拼团减100元</p> <p className='course-status'>砍价减{item.price2}元</p>
} }
{item.isbuy === 2 && {this.state.courseStatus === 2 &&
<p className='course-status'>砍价减100元</p> <p className='course-status'>拼团减{item.price}元</p>
} }
</div> </div>
) )
return ( return (
<VList handleClick={this.handleClick} key={index} status={status} <VList handleClick={this.handleClick} key={index} courseInfo={item} status={status}
info={Info}></VList> info={Info}></VList>
) )
})} })}
...@@ -386,4 +149,4 @@ class Preferential extends Component { ...@@ -386,4 +149,4 @@ class Preferential extends Component {
} }
export default Preferential; export default Preferential
src/components/preferential/index.scss
...@@ -117,6 +117,9 @@ ...@@ -117,6 +117,9 @@
display: flex; display: flex;
margin-top: 5px; margin-top: 5px;
margin-bottom: 50px; margin-bottom: 50px;
ul {
width: 100%;
}
} }
.am-tabs-default-bar-tab { .am-tabs-default-bar-tab {
......
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