college header separate

src/components/college/courseList.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { http } from '@/utils';
 import { HeaderBar } from "@/common";
 import CollegeBanner from './banner';
+import CollegeHeader from './header';
 import './courseList.scss';
 import { Toast } from 'antd-mobile';
 
@@ -10,6 +11,7 @@ class CollegeCourse extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      header: '',
       courseList: []
     };
   }
@@ -25,7 +27,8 @@ class CollegeCourse extends Component {
       const { code, data } = res.data;
       if(code === 200) {
         this.setState({
-          courseList: data
+          header: data.name,
+          courseList: data.data
         });
       }
     });
@@ -50,15 +53,18 @@ class CollegeCourse extends Component {
   }
 
   render() {
-    const { courseList = [] } = this.state;
+    const { courseList = [], header } = this.state;
     return (
       <>
         <HeaderBar title={'助学计划'} arrow={true}/>
         <CollegeBanner />
-        <div className="college-course__header">
-          <i className="header__decorate"></i>
-          <p className="header__desc">点击需要学习的课程封面，在课程详情页进入购买流程凭免单券免费兑换课程。</p>
-        </div>
+        <CollegeHeader 
+          headerStyle={{
+            marginTop: '20px'
+          }}
+          title={header}
+        />
+        <p className="college-course__desc">点击需要学习的课程封面，在课程详情页进入购买流程凭免单券免费兑换课程。</p>
         <div className="college-course__body">
           {
             courseList.map(item => (

src/components/college/courseList.scss

-.college-course__header {
-  margin-top: 20px;
-  
-  .header__decorate {
-    display: block;
-    width: 39px;
-    height: 3px;
-    margin: 0 auto;
-    border-radius: 2px;
-    background: linear-gradient(90deg,rgba(0,153,255,1) 0%,rgba(55,117,239,1) 100%);
-  }
-
-  .header__desc {
+.college-course__desc {
   margin: 8px 19px 12px;
   font-size: 12px;
   color: #0099FF;
   text-align: center;
   line-height: 15px;
-  }
 }
 
 .college-course__body {

src/components/college/header.js

+import React from 'react';
+import './header.scss';
+
+export default (props) => {
+  const { title, isDecorate = true, headerStyle = {} } = props;
+  return (
+    <>
+      <div className="college-header" style={headerStyle}>
+        <i className="college-header__icon" data-direction="left"></i>
+        <h2 className="college-header__text">{title}</h2>
+        <i className="college-header__icon" data-direction="right"></i>
+      </div>
+      {
+        isDecorate &&
+        <i className="college-header__decorate"></i>
+      }
+    </>
+  );
+};

src/components/college/header.scss

+.college-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 34px;
+}
+
+.college-header__icon {
+  width: 44px;
+  height: 8px;
+  background-size: cover;
+
+  &[data-direction="left"] {
+    background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/college-plan/icon-left.png');
+    background-position: right;
+  }
+
+  &[data-direction="right"] {
+    background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/college-plan/icon-right.png');
+    background-position: left;
+  }
+}
+
+.college-header__text {
+  margin: 0;
+  padding: 0 10px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #525C65;
+  line-height: 1;
+}
+
+.college-header__decorate {
+  display: block;
+  width: 39px;
+  height: 3px;
+  margin: 0 auto;
+  border-radius: 2px;
+  background: linear-gradient(90deg,rgba(0,153,255,1) 0%,rgba(55,117,239,1) 100%);
+}
\ No newline at end of file

src/components/college/index.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { http } from '@/utils';
 import { HeaderBar } from "@/common";
 import CollegeBanner from './banner';
+import CollegeHeader from './header';
 import './index.scss';
 
 class CollegePage extends Component {
@@ -30,7 +31,6 @@ class CollegePage extends Component {
 
   fetchSchoolList = () => {
     http.get(`${API['home']}/sys/school/list`).then(res => {
-      console.log(res);
       const { code, data } = res.data;
       if(code === 200) {
         this.setState({
@@ -96,21 +96,4 @@ class CollegePage extends Component {
   }
 }
 
-const CollegeHeader = (props) => {
-  const { title, isDecorate = true, headerStyle = {} } = props;
-  return (
-    <>
-      <div className="college-header" style={headerStyle}>
-        <i className="college-header__icon" data-direction="left"></i>
-        <h2 className="college-header__text">{title}</h2>
-        <i className="college-header__icon" data-direction="right"></i>
-      </div>
-      {
-        isDecorate &&
-        <i className="college-header__decorate"></i>
-      }
-    </>
-  );
-}
-
 export default CollegePage;
\ No newline at end of file

src/components/college/index.scss

@@ -82,44 +82,3 @@
     line-height: 16px;
   }
 }
\ No newline at end of file
-
-.college-header {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 34px;
-}
-
-.college-header__icon {
-  width: 44px;
-  height: 8px;
-  background-size: cover;
-
-  &[data-direction="left"] {
-    background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/college-plan/icon-left.png');
-    background-position: right;
-  }
-
-  &[data-direction="right"] {
-    background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/college-plan/icon-right.png');
-    background-position: left;
-  }
-}
-
-.college-header__text {
-  margin: 0;
-  padding: 0 10px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #525C65;
-  line-height: 1;
-}
-
-.college-header__decorate {
-  display: block;
-  width: 39px;
-  height: 3px;
-  margin: 0 auto;
-  border-radius: 2px;
-  background: linear-gradient(90deg,rgba(0,153,255,1) 0%,rgba(55,117,239,1) 100%);
-}
\ No newline at end of file