弹窗

src/components/activity/newyear-2019/preheat/YearCourse/index.js

@@ -3,12 +3,14 @@ import './index.scss'
 import {http, SendMessageToApp, getParam} from '@/utils'
 import CommonContainer from './../../common/commonContainer/index'
 import CourseItem from '../../../../blessingPreheat/courseItem/index'
-import {Link, withRouter} from "react-router-dom"
+import {withRouter} from "react-router-dom"
+import CommonPopup from './../../common/commonPopup/index'
 
-class YarnCourse extends Component {
+class YearCourse extends Component {
     constructor(props) {
         super(props)
         this.state = {
+            tofreeStudy: false,
             basic: {
                 course: [],
                 courseList: [],
@@ -197,9 +199,19 @@ class YarnCourse extends Component {
         }
     }
 
+    // 免费学习
     freeStudy = () => {
-
+        this.setState({
+            tofreeStudy: true,
+        })
+    }
+    // 关闭弹框
+    closePopup = () => {
+        this.setState({
+            tofreeStudy: false,
+        })
     }
+
     // 点击加入心愿单登录验证，在判断是否关注公众号，已关注的话直接加入，未关注弹出二维码弹窗，点击关闭按钮加入心愿单
     addWishList = (id) => {
 
@@ -209,7 +221,7 @@ class YarnCourse extends Component {
         const {bigcourse, freecourse, groupcourse, basic, advanced, higher, expand} = this.state
 
         return (
-            <div>
+            <div className={'year-index-course'}>
                 <CommonContainer title='重磅好课'>
                     <div>
                         {
@@ -722,9 +734,22 @@ class YarnCourse extends Component {
                         }
                     </div>
                 </CommonContainer>
+
+                {
+                    this.state.tofreeStudy &&
+                    <CommonPopup top={100} closePopup={this.closePopup} mark={true}>
+                        <div className='sub__code_container'>
+                            <p className='sub__title'>提醒服务</p>
+                            <p className='sub__tip'>进入服务号回复<i>77</i>免费领取课程</p>
+                            <img className='sub__qr_code' id={'live-qr-code'}
+                                 src='//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018christyear/h5/qrcode.jpg' alt=""/>
+                            <p className='sub__tip'>长按识别/扫码 关注【七月在线】服务号</p>
+                        </div>
+                    </CommonPopup>
+                }
             </div>
         )
     }
 }
 
-export default withRouter(YarnCourse)
+export default withRouter(YearCourse)

src/components/activity/newyear-2019/preheat/YearCourse/index.scss

-.course-box {
+.year-index-course {
+
+  .course-box {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
@@ -199,21 +201,21 @@
         background: linear-gradient(90deg, rgba(235, 22, 18, 1) 0%, rgba(249, 41, 39, 1) 100%);
       }
     }
-}
+  }
 
-.bigcourse .course-container {
+  .bigcourse .course-container {
     height: 156px;
-}
+  }
 
-.freecourse .course-container {
+  .freecourse .course-container {
     height: 177px;
-}
+  }
 
-.groupcourse .course-container {
+  .groupcourse .course-container {
     height: 195px;
-}
+  }
 
-.ai-course__subtitle {
+  .ai-course__subtitle {
     width: 73px;
     height: 24px;
     margin: 15px auto 0;
@@ -226,9 +228,9 @@
     letter-spacing: 2px;
     background-color: #FFE300;
     border: 1px solid #070F08;
-}
+  }
 
-.more-button {
+  .more-button {
     display: block;
     width: 75px;
     height: 26px;
@@ -244,4 +246,9 @@
     background-color: #0F6237;
     border: none;
     letter-spacing: 1px;
+  }
+
+  .sub__code_container {
+    padding: 20px;
+  }
 }
\ No newline at end of file

src/components/activity/newyear-2019/preheat/index.scss

@@ -21,6 +21,12 @@
       font-size: 14px;
       color: #666;
       margin: 13px 0;
+      letter-spacing: 1px;
+      i {
+        font-style: normal;
+        color: #FF0000;
+        font-size: 16px;
+      }
     }
 
     .sub__rule {