Skip to content

M
mr-julyedu
Commit 420a47da by xuzhenghua
Options

index

parent 11cc2c08
Showing with 91 additions and 324 deletions
src/common/VList/index.js
......@@ -2,12 +2,13 @@ import React from 'react';
import './index.scss'
const VList = (props) => {
console.log(props)
return (
<li className='v-list-item'>
<li className='v-list-item' onClick={e=>props.handleClick(props.courseInfo.course_id)}>
<div className="content">
<div className="cover" onClick={props.handleClick}>
<div className="cover">
{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>
{props.info}
</div>
......
src/components/Index/index.js
import React, {Component} from 'react';
import React, {Component} from 'react'
import {Course} from '../../common'
import './index.scss';
import './index.scss'
import {WithTab} from '@/HOCs'
import Swiper from 'react-mobile-swiper'
import createStyle from './createStyle'
import LazyLoad from 'react-lazy-load';
import LazyLoad from 'react-lazy-load'
import {api} from '@/utils'
import LiveRoom from './liveRoom'
......@@ -13,7 +13,7 @@ const animateTypes = Swiper.animateTypes
class Index extends Component {
constructor(props) {
super(props);
super(props)
this.state = {
banner: [],
lives: [],
......@@ -71,11 +71,11 @@ class Index extends Component {
isShow: true,
islive: true,
roomId
}));
}))
}
// 自组件传给父组件的isshow
colseBox = (val) => {
this.setState({isShow: val});
this.setState({isShow: val})
}
toSearch() {
......@@ -145,7 +145,7 @@ class Index extends Component {
}
</div>
);
)
}
}
......@@ -166,8 +166,8 @@ function TopSwiper({bannerList}) {
)
}
function CourseList({modules}) {
let isOdd = modules.list.length % 2 === 0;
let filterList = isOdd ? modules.list : modules.list.slice(1);
let isOdd = modules.list.length % 2 === 0
let filterList = isOdd ? modules.list : modules.list.slice(1)
return (
<div className='category'>
<h2 className="title">{modules.name}</h2>
......@@ -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 {VList} from '../../common';
import {Tabs, WhiteSpace, SearchBar} from 'antd-mobile';
import './index.scss';
import React, {Component} from 'react'
import {VList} from '../../common'
import {Tabs, WhiteSpace, SearchBar} from 'antd-mobile'
import './index.scss'
import {api} from "@/utils"
class Preferential extends Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
this.ontabclick = this.ontabclick.bind(this)
this.state = {
dataList: [],
courseStatus: 0,
}
}
handleClick() {
console.log(1);
componentDidMount() {
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)
this.setState(status => ({
data: status.dataList,
}));
this.state.courseStatus = index
switch(index) {
case 0:
this.specialSale()
break
case 1:
this.bargain()
break
default:
this.group()
}
}
handleClick=(courseId)=>{
console.log(courseId)
}
toSearch() {
......@@ -28,297 +74,12 @@ class Preferential extends Component {
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() {
const tabs = [
{title: '限时特惠'},
{title: '砍价专区'},
{title: '一键拼团'}
];
]
return (
<div className='preferential'>
<div className="search-nav">
......@@ -338,23 +99,25 @@ class Preferential extends Component {
tabs={tabs}
animated={false}
onChange={(tab, index) => this.ontabclick(tab, index)}
onTabClick={(tab, index) => this.ontabclick(tab, index)}
>
<div className='tabs'>
<ul>
{this.state.data.map((item, index) => {
{this.state.dataList.map((item, index) => {
const Info = (
<div className="info">
<p className='title'>{item.title}</p>
<p className='contact text-overflow-2'>{item.contact}</p>
<p className='title'>{item.course_title}</p>
<p className='contact text-overflow-2'>{item. course_desc}</p>
<div className='des'>
{item.isbuy === 0 && <p className="course-price">
{item.is_buy &&
<p className="course-price">
{this.state.courseStatus === 0 &&
<span className='price'>特惠价：</span>
<span className="new">¥{item.price0}</span>
}
<span className="new">¥{item.price2}</span>
<span className="old">¥{item.price1}</span>
</p>
}
{item.isbuy === 1 &&
{!item.is_buy &&
<a href="/#" className="isbuy">已购买</a>
}
</div>
......@@ -362,16 +125,16 @@ class Preferential extends Component {
)
const status = (
<div>
{item.isbuy === 1 &&
<p className='course-status'>拼团减100元</p>
{this.state.courseStatus === 1 &&
<p className='course-status'>砍价减{item.price2}元</p>
}
{item.isbuy === 2 &&
<p className='course-status'>砍价减100元</p>
{this.state.courseStatus === 2 &&
<p className='course-status'>拼团减{item.price}元</p>
}
</div>
)
return (
<VList handleClick={this.handleClick} key={index} status={status}
<VList handleClick={this.handleClick} key={index} courseInfo={item} status={status}
info={Info}></VList>
)
})}
......@@ -386,4 +149,4 @@ class Preferential extends Component {
}
export default Preferential;
export default Preferential
src/components/preferential/index.scss
......@@ -117,6 +117,9 @@
display: flex;
margin-top: 5px;
margin-bottom: 50px;
ul {
width: 100%;
}
}
.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