Skip to content

M
mr-julyedu
Commit 3425c7ed by xuzhenghua
Options

detail

parent dc388e28
Showing with 165 additions and 439 deletions
src/common/HeaderSearch/index.scss 0 → 100644
.search-nav {
height: 44px;
line-height: 44px;
padding: 0 15px;
background-color: $bg_f7f9fc;
display: flex;
justify-content: space-between;
.am-search {
width: 81%;
background-color: $bg_f7f9fc;
}
.am-search-input, .am-search-synthetic-ph, .am-search-value {
text-align: left;
padding-left: 15px;
height: 26px;
line-height: 26px;
}
.am-search-input {
background-color: $bg_EBEFF5;
border-radius: 13px;
}
.shopping-cart, .return {
font-size: 18px !important;
}
}
\ No newline at end of file
src/common/VList/index.js
...@@ -2,7 +2,6 @@ import React from 'react'; ...@@ -2,7 +2,6 @@ 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' onClick={e=>props.handleClick(props.id)}> <li className='v-list-item' onClick={e=>props.handleClick(props.id)}>
<div className="content"> <div className="content">
......
src/components/classify/courselist.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} from 'antd-mobile';
import './courselist.scss'; import './courselist.scss';
import HeaderSearch from '../../common/HeaderSearch/index'
import {api} from "@/utils";
class Classify extends Component { class Classify extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.handleClick = this.handleClick.bind(this) this.state = {
this.ontabclick = this.ontabclick.bind(this) ispull: false,
display: 'none',
arr: [{basics: []}, {advanced: []}],
allClass: [],
data: []
}
} }
handleClick() { componentDidMount() {
console.log(1); this.getTabs()
this.getList('20')
console.log(this.props)
}
// 获取tabs接口
getTabs = () => {
let data = 0
api.get(`/m/course/classify/${data}`,).then((res) => {
const _this = this
if (res.data.code === 200) {
if (res.data.data.common.length > 0) {
let arr = ['basics', 'advanced']
let arr2 = [{basics: []}, {advanced: []}]
let arr3 = []
arr.forEach(function (item, index) {
arr2[item] = res.data.data.common[index]
res.data.data.common[index].list.forEach(function (item, index) {
arr3.push({'title':item.c_name,'id':item.c_id})
})
})
_this.setState({
arr: arr2,
allClass: arr3
})
}
}
})
} }
ontabclick(tab, index) { // 获取课程接口
console.log(tab, index) getList = (id) => {
this.setState(status => ({ api.get(`/m/course/list/${id}`,).then((res) => {
data: status.dataList, if (res.data.code === 200) {
})); this.setState(status => ({
data: res.data.data,
}));
}
})
}
// 点击课程
handleClick = (courseId) => {
console.log(courseId)
} }
pulldown() { // 点击横向滚动tab查询
ontabclick = (tab) => {
this.getList(tab.id)
}
// 上下展示
pulldown = () => {
this.setState(status => ({ this.setState(status => ({
ispull: !status.ispull, ispull: !status.ispull,
display: status.ispull ? 'none' : 'block' display: status.ispull ? 'none' : 'block'
})); }));
} }
labelclick(name) { // 弹窗里面tab点击查询
console.log(name) labelclick = (id) => {
this.getList(id)
this.setState(status => ({ this.setState(status => ({
ispull: !status.ispull, ispull: !status.ispull,
display: status.ispull ? 'none' : 'block' display: status.ispull ? 'none' : 'block'
})); }));
} }
toSearch() {
window.location.href = '/search'
}
return() {
window.location.href = '/classify'
}
state = {
ispull: false,
display: 'none',
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 = [
{title: '机器学习'},
{title: '数学'},
{title: 'Linux'},
{title: '深度学习'},
{title: '数据结构'},
{title: 'Linux'},
{title: '数据结构'},
{title: '数学'},
];
const bottom = ( const bottom = (
<i className={'iconfont iconiconfront-69 pull-down'}></i> <i className={'iconfont iconiconfront-69 pull-down'}></i>
) )
...@@ -352,42 +98,31 @@ class Classify extends Component { ...@@ -352,42 +98,31 @@ class Classify extends Component {
return ( return (
<div className='class-child'> <div className='class-child'>
<div className="search-nav"> <HeaderSearch></HeaderSearch>
<i className={'iconfont iconiconfront-68 return'} onClick={this.return.bind(this)}></i>
<SearchBar
placeholder="搜索课程"
cancelText={" "}
onFocus={this.toSearch.bind(this)}
showCancelButton={false}
/>
<i className={'iconfont icongouwuche shopping-cart'}></i>
</div>
<div className='class-content'> <div className='class-content'>
<WhiteSpace/> <WhiteSpace/>
<div onClick={this.pulldown.bind(this)}> <div onClick={this.pulldown.bind(this)}>
{this.state.ispull ? top : bottom} {this.state.ispull ? top : bottom}
</div> </div>
<Tabs <Tabs
tabs={tabs} tabs={this.state.allClass}
animated={false} animated={false}
onChange={(tab, index) => this.ontabclick(tab, index)} onChange={(tab) => this.ontabclick(tab)}
onTabClick={(tab, index) => this.ontabclick(tab, index)}
> >
<div className='tabs'> <div className='tabs'>
<ul> <ul>
{this.state.data.map((item, index) => { {this.state.data && this.state.data.length>0 && this.state.data.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.desc}</p>
<div className='des'> <div className='des'>
{item.isbuy === 0 && <p className="course-price"> {item.is_buy === 0 && <p className="course-price">
<span className="new">¥{item.price0}</span> <span className="new">¥{item.price0}</span>
<span className="old">¥{item.price1}</span> <span className="old">¥{item.price1}</span>
</p> </p>
} }
{item.isbuy === 1 && {item.is_buy === 1 &&
<a href="/#" className="isbuy">已购买</a> <a href="/#" className="isbuy">已购买</a>
} }
</div> </div>
...@@ -395,14 +130,17 @@ class Classify extends Component { ...@@ -395,14 +130,17 @@ class Classify extends Component {
) )
const status = ( const status = (
<div> <div>
{item.isbuy === 1 && {item.bargain_num === 0 && item.groupon_num !== 0 &&
<p className='course-status'>拼团减100元</p> <p className='course-status'>拼团减{item.price}元</p>
}
{item.bargain_num !== 0 && item.groupon_num === 0 &&
<p className='course-status'>砍价减{item.price2}元</p>
} }
</div> </div>
) )
return ( return (
<VList handleClick={this.handleClick} key={index} status={status} <VList handleClick={this.handleClick} key={index} status={status}
img={item.image_name} id={item.course_id}
info={Info}></VList> info={Info}></VList>
) )
})} })}
...@@ -412,10 +150,15 @@ class Classify extends Component { ...@@ -412,10 +150,15 @@ class Classify extends Component {
<WhiteSpace/> <WhiteSpace/>
</div> </div>
<div className='mbc-box' style={{display: this.state.display}}> <div className='mbc-box' style={{display: this.state.display}}>
<div className="tabcontent"> {
<ClassCourse data={this.state.dataList} title={'基础入门'} onclick={this.labelclick.bind(this)}/> this.state.arr.basics &&
<ClassCourse data={this.state.dataList} title={'进阶提高'} onclick={this.labelclick.bind(this)}/> <div className="tabcontent">
</div> <ClassCourse data={this.state.arr.basics.list} title={this.state.arr.basics.name}
labelclick={this.labelclick}/>
<ClassCourse data={this.state.arr.advanced.list} title={this.state.arr.advanced.name}
labelclick={this.labelclick}/>
</div>
}
</div> </div>
</div> </div>
...@@ -424,16 +167,16 @@ class Classify extends Component { ...@@ -424,16 +167,16 @@ class Classify extends Component {
} }
function ClassCourse({data, title, onclick}) { function ClassCourse(props) {
return ( return (
<div className="class-course"> <div className="class-course">
<p className='course-items-title'>{title}</p> <p className='course-items-title'>{props.title}</p>
<div className='items-box'> <div className='items-box'>
{ {
data.map((item, index) => { props.data && props.data.length > 0 && props.data.map((item, index) => {
return ( return (
<span key={index} onClick={onclick} <span key={index} onClick={e => props.labelclick(item.c_id)}
className='item-label'>{item.title}</span> className='item-label'>{item.c_name}</span>
) )
}) })
} }
......
src/components/classify/courselist.scss
.class-child { .class-child {
.search-nav {
height: 44px;
line-height: 44px;
padding: 0 15px;
background-color: $bg_f7f9fc;
display: flex;
justify-content: space-between;
.am-search {
width: 81%;
background-color: $bg_f7f9fc;
}
.am-search-input,.am-search-synthetic-ph,.am-search-value{
text-align: left;
padding-left: 15px;
height: 26px;
line-height: 26px;
}
.am-search-input {
background-color: $bg_EBEFF5;
border-radius: 13px;
}
.shopping-cart,.return {
font-size: 18px !important;
}
}
.class-content { .class-content {
padding: 0 12px; padding: 0 12px;
...@@ -111,6 +82,9 @@ ...@@ -111,6 +82,9 @@
display: flex; display: flex;
margin-top: 10px; margin-top: 10px;
margin-bottom: 50px; margin-bottom: 50px;
ul {
width: 100%;
}
} }
.pull-down { .pull-down {
......
src/components/classify/index.js
...@@ -17,18 +17,20 @@ class Classify extends Component { ...@@ -17,18 +17,20 @@ class Classify extends Component {
componentDidMount() { componentDidMount() {
let data = 1 let data = 1
api.get(`/m/course/classify/${data}`,).then((res) => { api.get(`/m/course/classify/${data}`,).then((res) => {
if (res.data.code === 200) { if (res.data.code === 200) {
if(res.data.data.special.length > 0){ if (res.data.data.common.length > 0) {
this.setState({ this.setState({
basics: res.data.data.common[0], basics: res.data.data.common[0],
advanced: res.data.data.common[1], advanced: res.data.data.common[1],
}) })
} }
if(res.data.data.common.length > 0){ if (res.data.data.special.length > 0) {
this.setState({ this.setState({
basics: res.data.data.common[0], camp: res.data.data.special[0],
advanced: res.data.data.common[1], employment: res.data.data.special[1],
special: res.data.data.special[2],
}) })
} }
...@@ -36,18 +38,23 @@ class Classify extends Component { ...@@ -36,18 +38,23 @@ class Classify extends Component {
}) })
} }
toClassList =(id)=>{
console.log(id)
// this.props.history.push({pathname: `/courselist?id=${id}`})
}
render() { render() {
return ( return (
<div className='class-box'> <div className='class-box'>
<div className="class-title">分类</div> <div className="class-title">分类</div>
<ClassCourseBox data={this.state.camp.list} title={this.state.camp.name} type={1}/> <ClassCourseBox data={this.state.camp.list} title={this.state.camp.name} type={1} />
<ClassCourseBox data={this.state.employment.list} title={this.state.employment.name} type={1}/> <ClassCourseBox data={this.state.employment.list} title={this.state.employment.name} type={1}/>
<ClassCourseBox data={this.state.basics.list} title={this.state.basics.name} type={2}/> <ClassCourseBox data={this.state.basics.list} title={this.state.basics.name} type={2} toClassList={this.toClassList}/>
<ClassCourseBox data={this.state.advanced.list} title={this.state.advanced.name} type={2}/> <ClassCourseBox data={this.state.advanced.list} title={this.state.advanced.name} type={2} toClassList={this.toClassList}/>
<div className="vip"> <div className="vip">
{this.state.special.list && this.state.special.list.length > 0 && this.state.special.list.map((item,index)=>{ {this.state.special.list && this.state.special.list.length > 0 && this.state.special.list.map((item, index) => {
return( return (
<a key={index} href={item.course_img}> <a key={index} href='/detail'>
<img src={item.course_img} alt=""/> <img src={item.course_img} alt=""/>
</a> </a>
) )
...@@ -66,7 +73,7 @@ function ClassCourseA({data}) { ...@@ -66,7 +73,7 @@ function ClassCourseA({data}) {
{ {
data && data.length > 0 && data.map((item, index) => { data && data.length > 0 && data.map((item, index) => {
return ( return (
<a href={item.course_id} key={index} className='item-banner'><img src={item.course_img} alt=""/></a> <a href={`/detail?id=${item.course_id}`} key={index} className='item-banner'><img src={item.course_img} alt=""/></a>
) )
}) })
} }
...@@ -74,13 +81,13 @@ function ClassCourseA({data}) { ...@@ -74,13 +81,13 @@ function ClassCourseA({data}) {
) )
} }
function ClassCourseB({data}) { function ClassCourseB(props) {
return ( return (
<div className='items-box'> <div className='items-box'>
{ {
data && data.length > 0 && data.map((item, index) => { props.data && props.data.length > 0 && props.data.map((item, index) => {
return ( return (
<a href={item.c_id} key={index} className='item-label'>{item.c_name}</a> <span onClick={e => props.toClassList(item.c_id)} key={index} className='item-label'>{item.c_name}</span>
) )
}) })
} }
...@@ -88,18 +95,18 @@ function ClassCourseB({data}) { ...@@ -88,18 +95,18 @@ function ClassCourseB({data}) {
) )
} }
function ClassCourseBox({data, title, type}) { function ClassCourseBox(props) {
return ( return (
<div className="class-course"> <div className="class-course">
<p className='course-items-title'> <p className='course-items-title'>
<img src={require('./image/tips.png')} alt=""/> <img src={require('./image/tips.png')} alt=""/>
{title} {props.title}
</p> </p>
{type === 1 && {props.type === 1 &&
<ClassCourseA data={data}/> <ClassCourseA data={props.data} toClassList={props.toClassList}/>
} }
{type === 2 && {props.type === 2 &&
<ClassCourseB data={data}/> <ClassCourseB data={props.data} toClassList={props.toClassList}/>
} }
</div> </div>
) )
......
src/components/preferential/index.js
...@@ -2,7 +2,7 @@ import React, {Component} from 'react' ...@@ -2,7 +2,7 @@ import React, {Component} from 'react'
import {VList} from '../../common' import {VList} from '../../common'
import {Tabs, WhiteSpace} from 'antd-mobile' import {Tabs, WhiteSpace} from 'antd-mobile'
import './index.scss' import './index.scss'
import HeaderBar from './headerBar' import HeaderSearch from '../../common/HeaderSearch/index'
import {api} from "@/utils" import {api} from "@/utils"
class Preferential extends Component { class Preferential extends Component {
...@@ -19,7 +19,7 @@ class Preferential extends Component { ...@@ -19,7 +19,7 @@ class Preferential extends Component {
} }
// 限时特惠 // 限时特惠
specialSale=()=>{ specialSale = () => {
api.get('/m/home/weekDiscounts').then((res) => { api.get('/m/home/weekDiscounts').then((res) => {
if (res.data.code === 200) { if (res.data.code === 200) {
this.setState({ this.setState({
...@@ -29,7 +29,7 @@ class Preferential extends Component { ...@@ -29,7 +29,7 @@ class Preferential extends Component {
}) })
} }
// 砍价专区 // 砍价专区
bargain=()=>{ bargain = () => {
api.get('/m/home/bargainZone').then((res) => { api.get('/m/home/bargainZone').then((res) => {
if (res.data.code === 200) { if (res.data.code === 200) {
this.setState({ this.setState({
...@@ -39,7 +39,7 @@ class Preferential extends Component { ...@@ -39,7 +39,7 @@ class Preferential extends Component {
}) })
} }
// 一键拼团 // 一键拼团
group=()=>{ group = () => {
api.get('/m/home/grouponList').then((res) => { api.get('/m/home/grouponList').then((res) => {
if (res.data.code === 200) { if (res.data.code === 200) {
this.setState({ this.setState({
...@@ -49,10 +49,10 @@ class Preferential extends Component { ...@@ -49,10 +49,10 @@ class Preferential extends Component {
}) })
} }
// tab 切换 // tab 切换
ontabclick=(tab, index)=> { ontabclick = (tab, index) => {
console.log(tab, index) console.log(tab, index)
this.state.courseStatus = index this.state.courseStatus = index
switch(index) { switch (index) {
case 0: case 0:
this.specialSale() this.specialSale()
break break
...@@ -64,7 +64,7 @@ class Preferential extends Component { ...@@ -64,7 +64,7 @@ class Preferential extends Component {
} }
} }
handleClick=(courseId)=>{ handleClick = (courseId) => {
console.log(courseId) console.log(courseId)
} }
...@@ -76,7 +76,7 @@ class Preferential extends Component { ...@@ -76,7 +76,7 @@ class Preferential extends Component {
] ]
return ( return (
<div className='preferential'> <div className='preferential'>
<HeaderBar></HeaderBar> <HeaderSearch></HeaderSearch>
<div className='class-content'> <div className='class-content'>
<WhiteSpace/> <WhiteSpace/>
...@@ -91,12 +91,12 @@ class Preferential extends Component { ...@@ -91,12 +91,12 @@ class Preferential extends Component {
const Info = ( const Info = (
<div className="info"> <div className="info">
<p className='title'>{item.course_title}</p> <p className='title'>{item.course_title}</p>
<p className='contact text-overflow-2'>{item. course_desc}</p> <p className='contact text-overflow-2'>{item.course_desc}</p>
<div className='des'> <div className='des'>
{item.is_buy && {item.is_buy &&
<p className="course-price"> <p className="course-price">
{this.state.courseStatus === 0 && {this.state.courseStatus === 0 &&
<span className='price'>特惠价：</span> <span className='price'>特惠价：</span>
} }
<span className="new">¥{item.price2}</span> <span className="new">¥{item.price2}</span>
<span className="old">¥{item.price1}</span> <span className="old">¥{item.price1}</span>
...@@ -119,7 +119,8 @@ class Preferential extends Component { ...@@ -119,7 +119,8 @@ class Preferential extends Component {
</div> </div>
) )
return ( return (
<VList handleClick={this.handleClick} key={index} img={item.image_name} id={item.course_id} status={status} <VList handleClick={this.handleClick} key={index} img={item.image_name}
id={item.course_id} status={status}
info={Info}></VList> info={Info}></VList>
) )
})} })}
......
src/components/preferential/index.scss
.preferential { .preferential {
.search-nav {
height: 44px;
line-height: 44px;
padding: 0 15px;
background-color: $bg_f7f9fc;
display: flex;
justify-content: space-between;
.am-search {
width: 81%;
background-color: $bg_f7f9fc;
}
.am-search-input, .am-search-synthetic-ph, .am-search-value {
text-align: left;
padding-left: 15px;
height: 26px;
line-height: 26px;
}
.am-search-input {
background-color: $bg_EBEFF5;
border-radius: 13px;
}
.shopping-cart, .return {
font-size: 18px !important;
}
}
.class-content { .class-content {
padding: 0 12px; padding: 0 12px;
......
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