course popup basic complete

src/components/blessingPrehead/coursePopup/index.js

+import React, { Component } from 'react';
+import { http } from "@/utils";
+import './index.scss';
+
+class CoursePopup extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      courseList: []
+    };
+  }
+
+  componentDidMount() {
+    this.fetchCourseData();
+  }
+  
+  fetchCourseData = () => {
+    Promise.all([
+      http.get(`${API.home}/sys/browse/blessing/courses`),
+      http.get(`${API.home}/sys/user/blessing`)
+    ]).then(res => {
+      const { code, data } = res[0].data;
+      const doneCourse = res[1].data.data.today_browsed_courses || [];
+      if(code === 200) {
+        this.setState({
+          courseList: data.map(item => {
+            if(doneCourse.some(id => id == item.course_id)) {
+              return Object.assign({}, item, {
+                blessing: 2
+              });
+            }
+            return item;
+          })
+        });
+      }
+    });
+  }
+
+  render() {
+    const { courseList } = this.state;
+    const { handleToHide } = this.props;
+    return (
+      <div className="course-popup__container">
+        <div className="course-popup">
+          <h2 className="course-popup__title">指定课程</h2>
+          <div className="course-popup__list">
+            {
+              courseList.map(item => (
+                <a href="" className="course-popup__item" key={item.course_id}>
+                  <span className="course-popup__name">{item.course_title}</span>
+                  {
+                    item.blessing && 
+                    <span>+2点</span>
+                  }
+                </a>
+              ))
+            }
+          </div>
+        </div>
+        <i className="iconfont iconiconfront-2" onClick={handleToHide}></i>
+      </div>
+    );
+  }
+}
+
+export default CoursePopup;
\ No newline at end of file

src/components/blessingPrehead/coursePopup/index.scss

+.course-popup__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, .5);
+
+  .iconfont {
+    margin: 16px 0 0;
+    font-size: 24px;
+    color: #fff;
+    cursor: pointer;
+  }
+}
+
+.course-popup {
+  width: 300px;
+  height: 275px;
+  padding: 20px 0 0;
+  border-radius: 10px;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+
+.course-popup__title {
+  margin: 0 0 20px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #525C65;
+  text-align: center;
+  line-height: 1;
+}
+
+.course-popup__list {
+  height: 190px;
+  padding: 0 15px;
+  overflow-y: auto;
+}
+
+.course-popup__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 30px;
+  padding: 0 10px;
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: rgba(82, 92, 101, .6);
+  background-color: #E7EDF2;
+
+  &:nth-child(n+2) {
+    margin-top: 10px;
+  }
+
+  &:hover {
+    color: #fff;
+    background-color: rgba(0, 153, 255, .6);;
+  }
+}
+
+.course-popup__name {
+  width: 200px;
+  font-size: 12px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
\ No newline at end of file

src/components/blessingPrehead/index.js

 import React, { Component } from 'react';
 import RulePopup from './rulePopup/index';
+import CoursePopup from './coursePopup/index';
 import './index.scss';
 
 class BlessingPrehead extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      isRule: true
+      isRule: false,
+      isCourse: true
     };
   }
 
-  handleToHide = () => {
+  handleToHide = (key) => {
+    let obj = {};
+    obj[key] = false;
     this.setState({
-      isRule: false
+      ...obj
     });
   }
 
   render() {
-    const { isRule } = this.state;
+    const { isRule, isCourse } = this.state;
     return (
       <div>
         22222
         {
           isRule && 
-          <RulePopup handleToHide={this.handleToHide} />
+          <RulePopup handleToHide={() => this.handleToHide('isRule')} />
+        }
+        {
+          isCourse &&
+          <CoursePopup handleToHide={() => this.handleToHide('isCourse')} />
         }
-        
       </div>
     );
   }