Skip to content

M
mr-julyedu
Commit 3425c7ed by xuzhenghua
Options

detail

parent dc388e28
Showing with 72 additions and 89 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.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,12 +91,12 @@ 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">
{this.state.courseStatus === 0 &&
<span className='price'>特惠价：</span>
<span className='price'>特惠价：</span>
}
<span className="new">¥{item.price2}</span>
<span className="old">¥{item.price1}</span>
......@@ -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