Skip to content

M
mr-julyedu
Commit 3425c7ed by xuzhenghua
Options

detail

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