Skip to content

M
mr-julyedu
Commit 7e4f2842 by xuzhenghua
Options

精品课程

parent 2d772622
Showing with 549 additions and 3 deletions
src/components/classify/courselist.js
......@@ -370,6 +370,7 @@ class Classify extends Component {
<Tabs
tabs={tabs}
animated={false}
onChange={(tab, index) => this.ontabclick(tab, index)}
onTabClick={(tab, index) => this.ontabclick(tab, index)}
>
<div className='tabs'>
......
src/components/classify/courselist.scss
......@@ -206,8 +206,8 @@
}
}
}
.am-tabs-default-bar-top .am-tabs-default-bar-tab::after {
background-color: $bg_fff!important;
}
}
html:not([data-scale]) .am-tabs-default-bar-top .am-tabs-default-bar-tab::after {
background-color: $bg_fff;
}
src/components/preferential/index.js 0 → 100644
import React, {Component} from 'react';
import {VList} from '../../common';
import {Tabs, WhiteSpace, SearchBar} from 'antd-mobile';
import './index.scss';
class Preferential extends Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
this.ontabclick = this.ontabclick.bind(this)
}
handleClick() {
console.log(1);
}
ontabclick(tab, index) {
console.log(tab, index)
this.setState(status => ({
data: status.dataList,
}));
}
toSearch() {
window.location.href ='/search'
}
return() {
window.location.href ='/classify'
}
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: '一键拼团'}
];
const bottom = (
<i className={'iconfont iconiconfront-69 pull-down'}></i>
)
const top = (
<i className={'iconfont iconiconfront-71 pull-down'}></i>
)
return (
<div className='preferential'>
<div className="search-nav">
<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'>
<WhiteSpace/>
<Tabs
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) => {
const Info = (
<div className="info">
<p className='title'>{item.title}</p>
<p className='contact text-overflow-2'>{item.contact}</p>
<div className='des'>
{item.isbuy === 0 && <p className="course-price">
<span className='price'>特惠价：</span>
<span className="new">¥{item.price0}</span>
<span className="old">¥{item.price1}</span>
</p>
}
{item.isbuy === 1 &&
<a href="/#" className="isbuy">已购买</a>
}
</div>
</div>
)
const status = (
<div>
{item.isbuy === 1 &&
<p className='course-status'>拼团减100元</p>
}
</div>
)
return (
<VList handleClick={this.handleClick} key={index} status={status}
info={Info}></VList>
)
})}
</ul>
</div>
</Tabs>
<WhiteSpace/>
</div>
</div>
)
}
}
export default Preferential;
src/components/preferential/index.scss 0 → 100644
.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 {
padding: 0 12px;
position: relative;
margin-top: 15px;
.v-list-item {
padding: 10px 0 0;
.content {
border: none;
.cover {
flex: inherit;
width: 42.2%;
img {
width: 100%;
}
.course-status {
background-color: rgba(224, 46, 36, 0.6);
}
}
}
.info {
width: 52.3%;
position: relative;
display: block;
.title {
font-size: 16px;
color: $color_333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.contact {
font-size: 14px;
color: $color_666;
margin-top: 14px;
}
.des {
position: absolute;
bottom: 0;
.course-price {
.price {
color: $red;
font-size: 12px;
}
.new {
color: $red;
font-size: 16px;
}
.old {
color: $color_999;
font-size: 12px;
display: inline-block;
margin-left: 15px;
text-decoration: line-through;
}
}
.isbuy {
display: inline-block;
width: 61px;
height: 18px;
background-color: $bg_active;
border-radius: 9px;
color: $white;
font-size: 12px;
text-align: center;
line-height: 18px;
}
}
}
}
.tabs {
display: flex;
margin-top: 5px;
margin-bottom: 50px;
}
.am-tabs-default-bar-tab {
width: 82px !important;
height: 24px;
color: $bg_active;
border: 1px solid $bg_active!important;
border-radius: 12px;
margin-right: 20px;
font-size: 12px;
}
.am-tabs-default-bar-tab-active {
background: linear-gradient(90deg, $bg_active 0%, #5077F3 100%);
color: $white;
}
.am-tabs-default-bar-underline {
display: none;
}
.am-whitespace.am-whitespace-md {
height: 0 !important;
}
.am-tabs-default-bar-top .am-tabs-default-bar-tab::after {
background-color: rgba(0,0,0,0);
}
}
}
src/router.js
......@@ -7,6 +7,7 @@ import Classify from './components/classify';
import Study from './components/study';
import My from './components/my';
import CourseList from './components/classify/courselist';
import Preferential from './components/preferential/index';
import Search from './components/search/index'
......@@ -20,6 +21,7 @@ const router = () => (
<Route path='/study' component={Study}></Route>
<Route path='/my' component={My}></Route>
<Route path='/courselist' component={CourseList}></Route>
<Route path='/preferential' component={Preferential}></Route>
<Route path='/search' component={Search}></Route>
</Switch>
<Menu />
......
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