detail

src/common/HeaderSearch/index.scss

+.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;