assistance活动标题修改

build/mrstaticjs/67.0753bd4b.chunk.js

-(this["webpackJsonpmr-julyedu"]=this["webpackJsonpmr-julyedu"]||[]).push([[67],{1059:function(e,t,a){},1170:function(e,t,a){"use strict";a.r(t);var n=a(74),l=a(4),c=a(5),s=a(7),i=a(6),r=(a(36),a(10)),m=a.n(r),u=a(0),o=a.n(u),d=(a(1059),a(1)),E=a(15);function g(e){m.a.info(e,2,null,!1)}var p=function(e){Object(s.a)(a,e);var t=Object(i.a)(a);function a(){var e;Object(l.a)(this,a);for(var c=arguments.length,s=new Array(c),i=0;i<c;i++)s[i]=arguments[i];return(e=t.call.apply(t,[this].concat(s))).state={banner:"",courses:[],rule:"",awardstext:"",rankList:{},isShow:!1,animate:!1,marqueeList:[]},e.getRankList=function(){d.f.get("".concat(API["base-api"],"/assistance/ranking_list/50")).then((function(t){var a=t.data,n=a.data,l=a.errno,c=a.msg;200===l?e.setState({rankList:{list:n.list,first:n.list[0],second:n.list[1],third:n.list[2],other:n.list.slice(3,50),isMyList:n.nickname,myList:n.nickname&&n}}):g(c)}))},e.getMarqueeList=function(){d.f.get("".concat(API["base-api"],"/assistance/roll_tip")).then((function(t){var a=t.data,n=a.errno,l=a.msg,c=a.data;200===n?e.setState({marqueeList:c}):g(l)}))},e.showMarquee=function(){e.setState({animate:!0},(function(){setTimeout((function(){var t=Object(n.a)(e.state.marqueeList,2),a=t[0],l=t[1];e.setState({animate:!1,marqueeList:[l,a]})}),500)}))},e.isRouter=function(t){decodeURIComponent(Object(d.c)("activename"))!==t&&e.props.history.push("/")},e}return Object(c.a)(a,[{key:"componentDidMount",value:function(){var e=this;document.title="AI\u653b\u57ce\u72ee\u8d85\u8f66\u5b63\uff0c\u547c\u670b\u5524\u53cb\u514d\u8d39\u5b66\u7206\u6b3eAI\u597d\u8bfe\uff01VIP\u4f1a\u5458\u3001\u673a\u68b0\u952e\u76d8\u3001AI\u7ecf\u5178\u7eb8\u8d28\u4e66\u7b49\u514d\u8d39\u9001\uff01--\u4e03\u6708\u5728\u7ebf",d.f.get("".concat(API["base-api"],"/assistance/detail")).then((function(t){var a=t.data,n=a.data,l=a.errno,c=a.msg;200===l?(e.setState({banner:n.active_info.m_banner,courses:n.course_info,rule:n.active_info.rule,awardstext:n.active_info.awards_text.split("\n\n"),query:n.active_info.activity_name}),e.isRouter(n.active_info.activity_name)):g(c)})),this.getRankList(),this.getMarqueeList(),setInterval(this.showMarquee,5e3),setInterval(this.getMarqueeList,6e4)}},{key:"render",value:function(){var e=this,t=this.state,a=t.banner,n=t.courses,l=t.rule,c=t.awardstext,s=t.rankList,i=t.isShow,r=t.animate,m=t.marqueeList,u=window._czc||[];return o.a.createElement("div",{id:"give-courses"},o.a.createElement("div",{className:"banner"},o.a.createElement("img",{src:a,alt:""})),o.a.createElement("div",{className:"give-box"},n.map((function(t){return o.a.createElement("div",{className:"give-course",key:t.id},o.a.createElement(E.b,{className:"give-course-img",to:"/detail?id=".concat(t.course_id)},o.a.createElement("img",{src:t.image_name,alt:""})),o.a.createElement("ul",{className:"give-course-mess"},o.a.createElement("li",{className:"course-title"},o.a.createElement("a",{href:"javascript:"},t.course_title)),o.a.createElement("li",{className:"course-teacher"},o.a.createElement("span",{className:"tag"},"\u8bb2\u5e08"),t.teachers),o.a.createElement("li",{className:"course-time"},o.a.createElement("span",{className:"tag"},"\u5f00\u8bfe\u65f6\u95f4"),t.start_time),o.a.createElement("li",{className:"toreceive",onClick:function(){u&&u.push(["_trackEvent","\u8bfe\u7a0bid=".concat(t.course_id),"\u514d\u8d39\u9886\u53d6\u8bfe\u7a0b"]),console.log(t.course_id),e.setState({isShow:!0})}},"\u514d\u8d39\u9886\u53d6\u8bfe\u7a0b")))})),o.a.createElement("p",{className:"rule-title"},"\u6d3b\u52a8\u89c4\u5219"),o.a.createElement("div",{className:"rule-list",dangerouslySetInnerHTML:{__html:l}}),o.a.createElement("div",{className:"marquee_box"},o.a.createElement("ul",{className:"marquee_list ".concat(r?"marquee_top":"")},m.length?m.map((function(e,t){return o.a.createElement("li",{key:t},o.a.createElement("img",{src:e.head_img,alt:""}),o.a.createElement("span",null,e.nickname),e.word)})):null))),o.a.createElement("div",{className:"set-prize"},o.a.createElement("p",{className:"set-prize-title"},o.a.createElement("img",{src:"//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/jpsz_icon.png",alt:""}),"\u5956\u54c1\u8bbe\u7f6e"),o.a.createElement("div",{className:"set-prize-content"},c&&c.length&&c.map((function(e,t){return o.a.createElement("p",{key:t},e)})))),o.a.createElement("div",{className:"ranking-list"},o.a.createElement("div",{className:"ranking_title"},o.a.createElement("img",{src:"//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/jbei_icon.png",alt:""}),o.a.createElement("span",null,"\u6392\u884c\u699c"),o.a.createElement("p",null,"\u6570\u636e\u5b9e\u65f6\u66f4\u65b0 \u53ea\u663e\u793aTop50")),o.a.createElement("table",{border:"0",cellPadding:"0",cellSpacing:"0"},o.a.createElement("thead",null,o.a.createElement("tr",null,o.a.createElement("td",null,"\u6392\u540d"),o.a.createElement("td",null,"\u7528\u6237"),o.a.createElement("td",null,"\u9080\u8bf7\u4eba\u6570"))),o.a.createElement("tbody",null,s.list&&s.list.length>0?o.a.createElement("tr",null,o.a.createElement("td",null,o.a.createElement("img",{src:"//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/jin1_icon.png",alt:""})),o.a.createElement("td",null,o.a.createElement("img",{src:s.first.head_img,alt:""}),o.a.createElement("span",null,s.first.name)),o.a.createElement("td",null,s.first.num)):null,s.list&&s.list.length>1?o.a.createElement("tr",null,o.a.createElement("td",null,o.a.createElement("img",{src:"//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/yin2_icon.png",alt:""})),o.a.createElement("td",null,o.a.createElement("img",{src:s.second.head_img,alt:""}),o.a.createElement("span",null,s.second.name)),o.a.createElement("td",null,s.second.num)):null,s.list&&s.list.length>2?o.a.createElement("tr",null,o.a.createElement("td",null,o.a.createElement("img",{src:"//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/tong_icon.png",alt:""})),o.a.createElement("td",null,o.a.createElement("img",{src:s.third.head_img,alt:""}),o.a.createElement("span",null,s.third.name)),o.a.createElement("td",null,s.third.num)):null,s.list&&s.list.length&&s.list.length>3?s.other.map((function(e,t){return o.a.createElement("tr",{key:t},o.a.createElement("td",null,t+4),o.a.createElement("td",null,o.a.createElement("img",{src:e.head_img,alt:""}),o.a.createElement("span",null,e.name)),o.a.createElement("td",null,e.num))})):null,s.isMyList&&o.a.createElement("tr",{className:"ismylist"},o.a.createElement("td",null,s.myList.ranking),o.a.createElement("td",null,o.a.createElement("img",{src:s.myList.head_img,alt:""}),o.a.createElement("span",null,s.myList.nickname)),o.a.createElement("td",null,s.myList.inviter_num)))),o.a.createElement("p",{className:"btm"})),o.a.createElement("p",{className:"julynotice"},"*\u672c\u6d3b\u52a8\u6700\u7ec8\u89e3\u91ca\u6743\u5f52\u4e03\u6708\u5728\u7ebf\u6240\u6709*"),i&&o.a.createElement("div",{className:"code-mbc"},o.a.createElement("div",{className:"code-box"},o.a.createElement("p",{className:"code-title"},"\u8fdb\u5165\u670d\u52a1\u53f7\u56de\u590d",o.a.createElement("i",null,"77"),"\u514d\u8d39\u9886\u53d6\u8bfe\u7a0b"),o.a.createElement("img",{id:"qrCodeWpay",src:"//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018christyear/h5/qrcode.jpg",alt:""}),o.a.createElement("p",{className:"btmmess"},"\u957f\u6309\u626b\u7801\u8fdb\u5165\u670d\u52a1\u53f7")),o.a.createElement("i",{className:"close iconfont iconiconfront-2",onClick:function(){e.setState({isShow:!1})}})))}}]),a}(u.Component);t.default=p}}]);
+(this["webpackJsonpmr-julyedu"]=this["webpackJsonpmr-julyedu"]||[]).push([[67],{1059:function(e,t,a){},1170:function(e,t,a){"use strict";a.r(t);var n=a(74),l=a(4),c=a(5),s=a(7),i=a(6),r=(a(36),a(10)),m=a.n(r),u=a(0),o=a.n(u),d=(a(1059),a(1)),E=a(15);function g(e){m.a.info(e,2,null,!1)}var p=function(e){Object(s.a)(a,e);var t=Object(i.a)(a);function a(){var e;Object(l.a)(this,a);for(var c=arguments.length,s=new Array(c),i=0;i<c;i++)s[i]=arguments[i];return(e=t.call.apply(t,[this].concat(s))).state={banner:"",courses:[],rule:"",awardstext:"",rankList:{},isShow:!1,animate:!1,marqueeList:[]},e.getRankList=function(){d.f.get("".concat(API["base-api"],"/assistance/ranking_list/50")).then((function(t){var a=t.data,n=a.data,l=a.errno,c=a.msg;200===l?e.setState({rankList:{list:n.list,first:n.list[0],second:n.list[1],third:n.list[2],other:n.list.slice(3,50),isMyList:n.nickname,myList:n.nickname&&n}}):g(c)}))},e.getMarqueeList=function(){d.f.get("".concat(API["base-api"],"/assistance/roll_tip")).then((function(t){var a=t.data,n=a.errno,l=a.msg,c=a.data;200===n?e.setState({marqueeList:c}):g(l)}))},e.showMarquee=function(){e.setState({animate:!0},(function(){setTimeout((function(){var t=Object(n.a)(e.state.marqueeList,2),a=t[0],l=t[1];e.setState({animate:!1,marqueeList:[l,a]})}),500)}))},e.isRouter=function(t){decodeURIComponent(Object(d.c)("activename"))!==t&&e.props.history.push("/")},e}return Object(c.a)(a,[{key:"componentDidMount",value:function(){var e=this;document.title="\u5145\u7535\u5b63\uff0c\u0041\u0049\u597d\u8bfe\u514d\u8d39\u5b66\uff01\u6298\u53e0\u952e\u76d8\u3001\u84dd\u7259\u8033\u673a\u3001\u7eb8\u8d28\u4e66\u7b49\u5305\u90ae\u9001\uff01",d.f.get("".concat(API["base-api"],"/assistance/detail")).then((function(t){var a=t.data,n=a.data,l=a.errno,c=a.msg;200===l?(e.setState({banner:n.active_info.m_banner,courses:n.course_info,rule:n.active_info.rule,awardstext:n.active_info.awards_text.split("\n\n"),query:n.active_info.activity_name}),e.isRouter(n.active_info.activity_name)):g(c)})),this.getRankList(),this.getMarqueeList(),setInterval(this.showMarquee,5e3),setInterval(this.getMarqueeList,6e4)}},{key:"render",value:function(){var e=this,t=this.state,a=t.banner,n=t.courses,l=t.rule,c=t.awardstext,s=t.rankList,i=t.isShow,r=t.animate,m=t.marqueeList,u=window._czc||[];return o.a.createElement("div",{id:"give-courses"},o.a.createElement("div",{className:"banner"},o.a.createElement("img",{src:a,alt:""})),o.a.createElement("div",{className:"give-box"},n.map((function(t){return o.a.createElement("div",{className:"give-course",key:t.id},o.a.createElement(E.b,{className:"give-course-img",to:"/detail?id=".concat(t.course_id)},o.a.createElement("img",{src:t.image_name,alt:""})),o.a.createElement("ul",{className:"give-course-mess"},o.a.createElement("li",{className:"course-title"},o.a.createElement("a",{href:"javascript:"},t.course_title)),o.a.createElement("li",{className:"course-teacher"},o.a.createElement("span",{className:"tag"},"\u8bb2\u5e08"),t.teachers),o.a.createElement("li",{className:"course-time"},o.a.createElement("span",{className:"tag"},"\u5f00\u8bfe\u65f6\u95f4"),t.start_time),o.a.createElement("li",{className:"toreceive",onClick:function(){u&&u.push(["_trackEvent","\u8bfe\u7a0bid=".concat(t.course_id),"\u514d\u8d39\u9886\u53d6\u8bfe\u7a0b"]),console.log(t.course_id),e.setState({isShow:!0})}},"\u514d\u8d39\u9886\u53d6\u8bfe\u7a0b")))})),o.a.createElement("p",{className:"rule-title"},"\u6d3b\u52a8\u89c4\u5219"),o.a.createElement("div",{className:"rule-list",dangerouslySetInnerHTML:{__html:l}}),o.a.createElement("div",{className:"marquee_box"},o.a.createElement("ul",{className:"marquee_list ".concat(r?"marquee_top":"")},m.length?m.map((function(e,t){return o.a.createElement("li",{key:t},o.a.createElement("img",{src:e.head_img,alt:""}),o.a.createElement("span",null,e.nickname),e.word)})):null))),o.a.createElement("div",{className:"set-prize"},o.a.createElement("p",{className:"set-prize-title"},o.a.createElement("img",{src:"//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/jpsz_icon.png",alt:""}),"\u5956\u54c1\u8bbe\u7f6e"),o.a.createElement("div",{className:"set-prize-content"},c&&c.length&&c.map((function(e,t){return o.a.createElement("p",{key:t},e)})))),o.a.createElement("div",{className:"ranking-list"},o.a.createElement("div",{className:"ranking_title"},o.a.createElement("img",{src:"//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/jbei_icon.png",alt:""}),o.a.createElement("span",null,"\u6392\u884c\u699c"),o.a.createElement("p",null,"\u6570\u636e\u5b9e\u65f6\u66f4\u65b0 \u53ea\u663e\u793aTop50")),o.a.createElement("table",{border:"0",cellPadding:"0",cellSpacing:"0"},o.a.createElement("thead",null,o.a.createElement("tr",null,o.a.createElement("td",null,"\u6392\u540d"),o.a.createElement("td",null,"\u7528\u6237"),o.a.createElement("td",null,"\u9080\u8bf7\u4eba\u6570"))),o.a.createElement("tbody",null,s.list&&s.list.length>0?o.a.createElement("tr",null,o.a.createElement("td",null,o.a.createElement("img",{src:"//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/jin1_icon.png",alt:""})),o.a.createElement("td",null,o.a.createElement("img",{src:s.first.head_img,alt:""}),o.a.createElement("span",null,s.first.name)),o.a.createElement("td",null,s.first.num)):null,s.list&&s.list.length>1?o.a.createElement("tr",null,o.a.createElement("td",null,o.a.createElement("img",{src:"//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/yin2_icon.png",alt:""})),o.a.createElement("td",null,o.a.createElement("img",{src:s.second.head_img,alt:""}),o.a.createElement("span",null,s.second.name)),o.a.createElement("td",null,s.second.num)):null,s.list&&s.list.length>2?o.a.createElement("tr",null,o.a.createElement("td",null,o.a.createElement("img",{src:"//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/tong_icon.png",alt:""})),o.a.createElement("td",null,o.a.createElement("img",{src:s.third.head_img,alt:""}),o.a.createElement("span",null,s.third.name)),o.a.createElement("td",null,s.third.num)):null,s.list&&s.list.length&&s.list.length>3?s.other.map((function(e,t){return o.a.createElement("tr",{key:t},o.a.createElement("td",null,t+4),o.a.createElement("td",null,o.a.createElement("img",{src:e.head_img,alt:""}),o.a.createElement("span",null,e.name)),o.a.createElement("td",null,e.num))})):null,s.isMyList&&o.a.createElement("tr",{className:"ismylist"},o.a.createElement("td",null,s.myList.ranking),o.a.createElement("td",null,o.a.createElement("img",{src:s.myList.head_img,alt:""}),o.a.createElement("span",null,s.myList.nickname)),o.a.createElement("td",null,s.myList.inviter_num)))),o.a.createElement("p",{className:"btm"})),o.a.createElement("p",{className:"julynotice"},"*\u672c\u6d3b\u52a8\u6700\u7ec8\u89e3\u91ca\u6743\u5f52\u4e03\u6708\u5728\u7ebf\u6240\u6709*"),i&&o.a.createElement("div",{className:"code-mbc"},o.a.createElement("div",{className:"code-box"},o.a.createElement("p",{className:"code-title"},"\u8fdb\u5165\u670d\u52a1\u53f7\u56de\u590d",o.a.createElement("i",null,"77"),"\u514d\u8d39\u9886\u53d6\u8bfe\u7a0b"),o.a.createElement("img",{id:"qrCodeWpay",src:"//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018christyear/h5/qrcode.jpg",alt:""}),o.a.createElement("p",{className:"btmmess"},"\u957f\u6309\u626b\u7801\u8fdb\u5165\u670d\u52a1\u53f7")),o.a.createElement("i",{className:"close iconfont iconiconfront-2",onClick:function(){e.setState({isShow:!1})}})))}}]),a}(u.Component);t.default=p}}]);
 //# sourceMappingURL=67.0753bd4b.chunk.js.map
\ No newline at end of file

src/components/activity/give-courses/index.js

+/* eslint-disable jsx-a11y/anchor-is-valid, no-script-url */
+import React, { Component } from "react"
+import "./give-courses.scss"
+import { getParam, http } from "src/utils"
+import { Toast } from "antd-mobile"
+import { Link } from "react-router-dom"
+
+function showToast(text) {
+  Toast.info(text, 2, null, false)
+}
+
+class GiveCourses extends Component {
+  state = {
+    banner: "",
+    courses: [],
+    rule: "",
+    awardstext: "",
+    rankList: {},
+    isShow: false,
+    animate: false,
+    marqueeList: [],
+  }
+
+  componentDidMount() {
+    document.title =
+      "充电季，AI好课免费学！折叠键盘、蓝牙耳机、纸质书等包邮送！"
+
+    http.get(`${API["base-api"]}/assistance/detail`).then((res) => {
+      const { data, errno, msg } = res.data
+      if (errno === 200) {
+        this.setState({
+          banner: data["active_info"]["m_banner"],
+          courses: data.course_info,
+          rule: data["active_info"]["rule"],
+          awardstext: data["active_info"]["awards_text"].split("\n\n"),
+          query: data["active_info"]["activity_name"],
+        })
+
+        this.isRouter(data["active_info"]["activity_name"])
+      } else {
+        showToast(msg)
+      }
+    })
+
+    this.getRankList()
+    this.getMarqueeList()
+    setInterval(this.showMarquee, 5000)
+    setInterval(this.getMarqueeList, 60000)
+  }
+
+  getRankList = () => {
+    http.get(`${API["base-api"]}/assistance/ranking_list/50`).then((res) => {
+      const { data, errno, msg } = res.data
+      if (errno === 200) {
+        this.setState({
+          rankList: {
+            list: data.list,
+            first: data.list[0],
+            second: data.list[1],
+            third: data.list[2],
+            other: data.list.slice(3, 50),
+            isMyList: data["nickname"],
+            myList: data["nickname"] && data,
+          },
+        })
+      } else {
+        showToast(msg)
+      }
+    })
+  }
+
+  getMarqueeList = () => {
+    http.get(`${API["base-api"]}/assistance/roll_tip`).then((res) => {
+      const { errno, msg, data } = res.data
+      if (errno === 200) {
+        this.setState({
+          marqueeList: data,
+        })
+      } else {
+        showToast(msg)
+      }
+    })
+  }
+
+  showMarquee = () => {
+    this.setState(
+      {
+        animate: true,
+      },
+      () => {
+        setTimeout(() => {
+          const [first, second] = this.state.marqueeList
+          this.setState({
+            animate: false,
+            marqueeList: [second, first],
+          })
+        }, 500)
+      }
+    )
+  }
+
+  isRouter = (param) => {
+    if (decodeURIComponent(getParam("activename")) !== param) {
+      this.props.history.push("/")
+    }
+  }
+
+  render() {
+    const {
+      banner,
+      courses,
+      rule,
+      awardstext,
+      rankList,
+      isShow,
+      animate,
+      marqueeList,
+    } = this.state
+    var _czc = window._czc || []
+    return (
+      <div id={"give-courses"}>
+        <div className="banner">
+          <img src={banner} alt="" />
+        </div>
+        <div className="give-box">
+          {courses.map((course) => {
+            return (
+              <div className="give-course" key={course.id}>
+                <Link
+                  className="give-course-img"
+                  to={`/detail?id=${course.course_id}`}
+                >
+                  <img src={course.image_name} alt="" />
+                </Link>
+                <ul className="give-course-mess">
+                  <li className="course-title">
+                    <a href="javascript:">{course.course_title}</a>
+                  </li>
+                  <li className="course-teacher">
+                    <span className="tag">讲师</span>
+                    {course["teachers"]}
+                  </li>
+                  <li className="course-time">
+                    <span className="tag">开课时间</span>
+                    {course["start_time"]}
+                  </li>
+                  <li
+                    className="toreceive"
+                    onClick={() => {
+                      _czc &&
+                        _czc.push([
+                          "_trackEvent",
+                          `课程id=${course.course_id}`,
+                          "免费领取课程",
+                        ])
+                      console.log(course.course_id)
+                      this.setState({ isShow: true })
+                    }}
+                  >
+                    免费领取课程
+                  </li>
+                </ul>
+              </div>
+            )
+          })}
+          <p className="rule-title">活动规则</p>
+          <div
+            className="rule-list"
+            dangerouslySetInnerHTML={{ __html: rule }}
+          />
+
+          <div className="marquee_box">
+            <ul className={`marquee_list ${animate ? "marquee_top" : ""}`}>
+              {marqueeList.length
+                ? marqueeList.map((item, index) => {
+                    return (
+                      <li key={index}>
+                        <img src={item.head_img} alt="" />
+                        <span>{item["nickname"]}</span>
+                        {item["word"]}
+                      </li>
+                    )
+                  })
+                : null}
+            </ul>
+          </div>
+        </div>
+
+        <div className="set-prize">
+          <p className="set-prize-title">
+            <img
+              src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/jpsz_icon.png"
+              alt=""
+            />
+            奖品设置
+          </p>
+          <div className="set-prize-content">
+            {awardstext &&
+              awardstext.length &&
+              awardstext.map((item, index) => <p key={index}>{item}</p>)}
+          </div>
+        </div>
+
+        <div className="ranking-list">
+          <div className="ranking_title">
+            <img
+              src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/jbei_icon.png"
+              alt=""
+            />
+            <span>排行榜</span>
+            <p>数据实时更新 只显示Top50</p>
+          </div>
+          <table border="0" cellPadding="0" cellSpacing="0">
+            <thead>
+              <tr>
+                <td>排名</td>
+                <td>用户</td>
+                <td>邀请人数</td>
+              </tr>
+            </thead>
+            <tbody>
+              {rankList.list && rankList.list.length > 0 ? (
+                <tr>
+                  <td>
+                    <img
+                      src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/jin1_icon.png"
+                      alt=""
+                    />
+                  </td>
+                  <td>
+                    <img src={rankList.first.head_img} alt="" />
+                    <span>{rankList.first.name}</span>
+                  </td>
+                  <td>{rankList.first.num}</td>
+                </tr>
+              ) : null}
+
+              {rankList.list && rankList.list.length > 1 ? (
+                <tr>
+                  <td>
+                    <img
+                      src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/yin2_icon.png"
+                      alt=""
+                    />
+                  </td>
+                  <td>
+                    <img src={rankList.second.head_img} alt="" />
+                    <span>{rankList.second.name}</span>
+                  </td>
+                  <td>{rankList.second.num}</td>
+                </tr>
+              ) : null}
+
+              {rankList.list && rankList.list.length > 2 ? (
+                <tr>
+                  <td>
+                    <img
+                      src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018_1111/tong_icon.png"
+                      alt=""
+                    />
+                  </td>
+                  <td>
+                    <img src={rankList.third.head_img} alt="" />
+                    <span>{rankList.third.name}</span>
+                  </td>
+                  <td>{rankList.third.num}</td>
+                </tr>
+              ) : null}
+
+              {rankList.list && rankList.list.length && rankList.list.length > 3
+                ? rankList.other.map((item, index) => {
+                    return (
+                      <tr key={index}>
+                        <td>{index + 4}</td>
+                        <td>
+                          <img src={item.head_img} alt="" />
+                          <span>{item.name}</span>
+                        </td>
+                        <td>{item.num}</td>
+                      </tr>
+                    )
+                  })
+                : null}
+
+              {rankList.isMyList && (
+                <tr className="ismylist">
+                  <td>{rankList.myList["ranking"]}</td>
+                  <td>
+                    <img src={rankList.myList.head_img} alt="" />
+                    <span>{rankList.myList["nickname"]}</span>
+                  </td>
+                  <td>{rankList.myList["inviter_num"]}</td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+          <p className="btm" />
+        </div>
+
+        <p className="julynotice">*本活动最终解释权归七月在线所有*</p>
+
+        {isShow && (
+          <div className="code-mbc">
+            <div className="code-box">
+              <p className="code-title">
+                进入服务号回复<i>77</i>免费领取课程
+              </p>
+              <img
+                id="qrCodeWpay"
+                src="//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018christyear/h5/qrcode.jpg"
+                alt=""
+              />
+              <p className="btmmess">长按扫码进入服务号</p>
+            </div>
+            <i
+              className="close iconfont iconiconfront-2"
+              onClick={() => {
+                this.setState({ isShow: false })
+              }}
+            />
+          </div>
+        )}
+      </div>
+    )
+  }
+}
+
+export default GiveCourses