pull and solve

src/components/blessingPreheat/collectBlessing/index.js

@@ -15,14 +15,83 @@ class CollectBlessing extends Component {
         '浏览指定课程详情页，一门课程+2点福气值（每天一次）',
         '邀请好友注册，+10点福气值/人（无上限）',
         '活动期间每购买一门课程+20点福气值',
+      ],
+      welfareRuleList: [
+        {
+          range: '50~100',
+          rules: [
+            {id: 1, text: '1.每天一次抽奖机会；'},
+            {id: 2, text: '2.中奖概率翻2倍', des: '（热力值越高，中奖概率越大）；'},
+            {id: 3, text: '3.满111减11、满1111减111。'},
           ]
+        },
+        {
+          range: '101~190',
+          rules: [
+            {id: 1, text: '1.每天两次抽奖机会；'},
+            {id: 2, text: '2.中奖概率翻3倍', des: '（热力值越高，中奖概率越大）；'},
+            {id: 3, text: '3.满111减31、满1111减211；'},
+            {id: 4, text: '4.AI水平测试增加1次。'},
+          ]
+        },
+        {
+          range: '>190',
+          rules: [
+            {id: 1, text: '1.每天三次抽奖机会；'},
+            {id: 2, text: '2.中奖概率翻4倍', des: '（热力值越高，中奖概率越大）；'},
+            {id: 3, text: '3.满111减51、满1111减411；'},
+            {id: 4, text: '4.AI水平测试增加1次。'},
+          ]
+        }
+      ],
     };
   }
   
   render() {
     const { handleToShowNotice, handleToShowList, handleToShowInvite } = this.props;
-    const { rules } = this.state;
+    const { rules, welfareRuleList } = this.state;
     return (
+      <>
+      <div className="collect-blessing">
+        {
+          this.props.userLogin ? (
+            <ListHeader size="middle" styles={{margin: '20px 0 0 0'}} >{`我的福气值： ${this.props.blessingNumber}`}</ListHeader>
+          ) : (
+            <ListHeader size="middle" styles={{margin: '20px 0 0 0'}} >
+              <span className="text_nologin">我的福气值：</span> 
+              <div className="login__btn" onClick={this.props.toLogin}>登录</div>
+        </ListHeader>
+          )
+        }
+        <p className='activity__over'>活动结束 福气榜前20名可获奖品一份</p>
+        <div className='blessing__rules'>
+          {
+            welfareRuleList.map((item, index) => {
+              return <div className="rules__item" key={index}>
+                <div className="item__left">
+                  <div className='tip__bubble'>
+                    <div className="tip__text">福气值</div>
+                    <div className='tip__style'></div>
+                  </div>
+                  <div className='range__number'>{item.range}</div>
+                </div>
+                <div className="item__right">
+                  {
+                    item.rules.map(item => {
+                      return (
+                          <p>
+                            {item.text} 
+                            <span>{item.des}</span>
+                          </p>
+                      )
+                    })
+                  }
+                </div>
+              </div>
+            })
+          }
+        </div>
+      </div>
       <div className="collect-blessing">
         <ListHeader text="福气值积攒规则" size="middle" styles={{}} />
         {
@@ -72,6 +141,7 @@ class CollectBlessing extends Component {
           ))
         }
       </div>
+      </>
     )
   }
 }

src/components/blessingPreheat/collectBlessing/index.scss

@@ -82,5 +82,107 @@
 
   &[data-type="wechat"] {
     background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/wechat-icon.png');
+}
+
+.activity__over {
+  font-size:12px;
+  font-weight:400;
+  color:rgba(255,243,240,1);
+  margin: 10px auto;
+  text-align: center;
+}
+.login__btn {
+  width:34px;
+  height:18px;
+  background:linear-gradient(0deg,rgba(255,67,2,1), rgba(255,132,0,1));
+  border-radius:3px;
+  color: #FFF;
+  font-size: 12px;
+  font-weight: 400;
+  text-align: center;
+  margin-right: 12px;
+}
+.text_nologin {
+  font-size:16px;
+  font-weight:600;
+  color:rgba(255,243,240,1);
+  margin-left: 12px;
+}
+
+.rules__item {
+  background: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/fuqi_bj1.png') center center no-repeat;
+  background-size: 100% 100%;
+  width: 336px;
+  padding: 18px 18px 10px 18px;
+  margin: 10px auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 106px;
+
+  .item__left {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 90px;
+    height: 100%;
+    padding-right: 10px;
+
+    .tip__bubble {
+      position: relative;
+      margin-bottom: 10px;
+      .tip__text {
+        width: 54px;
+        height: 22px;
+        background:linear-gradient(90deg,rgba(245,175,172,1) 0%,rgba(241,226,229,1) 100%);
+        border-radius:3px;
+        font-weight:400;
+        line-height: 22px;
+        text-align: center;
+        color:rgba(255,67,2,1);
+      }
+      .tip__style {
+        width: 0;
+        height: 0;
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        border-top: 6px solid #F3C9C9;
+        position: absolute;
+        bottom: -6px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+
+    .range__number {
+      font-size:16px;
+      font-weight:500;
+      color:rgba(255,67,2,1);
+    }
+  }
+
+  .item__right {
+    border-left: 1px dashed rgba(255,255,255, .5);
+    flex: 1 1 auto;
+    font-size:12px;
+    font-weight:400;
+    color:rgba(242,240,250,1);
+    line-height:15px;
+    padding: 8px 0 8px 20px ;
+
+    p {
+      margin-bottom: 10px;
+      &:last-child {
+        margin-bottom: 0; 
+      }
+      span {
+        font: size 12px;
+        font-weight:400;
+        color:rgba(255,223,4,1);
+        line-height:15px;
+      }
+    }
   }
 }
\ No newline at end of file

src/components/blessingPreheat/index.js

@@ -194,10 +194,7 @@ class BlessingPreheat extends Component {
         </div>
         <LevelTest></LevelTest>
 
-        <ListHeader text="测试排行榜" styles={{margin: '20px 0 10px'}} size='middle' />
-        <div className="sort__rules">
-          仅显示前10名
-        </div>
+        
         <RankList></RankList>
       </div>
     )

src/components/blessingPreheat/levelTest/index.js

 import React, { Component } from 'react'
 import './index.scss'
 import listFrame from './../listFrame/index';
-import {getParam, http, browser, wxShare} from "@/utils"
+import { http} from "@/utils"
 
 class LevelTest extends Component {
   constructor(props) {
@@ -57,6 +57,7 @@ class LevelTest extends Component {
       prizeListUrl,
     } = this.state;
     return (
+      <>
       <div className="level__test_module">
         <div className='start__test' onClick={this.startTest}>
           <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/test_icon.png" />
@@ -98,6 +99,7 @@ class LevelTest extends Component {
           </div>
         </div>
       </div>
+      </>
     )
   }
 }

src/components/blessingPreheat/rankList/index.js

 import React, { Component } from 'react'
 import './index.scss'
-import {getParam, http, browser, wxShare} from "@/utils"
+import {http} from "@/utils"
+import ListHeader from './../listHeader';
 
 export default class RankList extends Component {
   constructor(props) {
@@ -26,6 +27,11 @@ export default class RankList extends Component {
   render() {
     let {rankList} = this.state;
     return (
+      <>
+      <ListHeader text="测试排行榜" styles={{margin: '20px 0 10px'}} size='middle' />
+      <div className="sort__rules">
+        仅显示前10名
+      </div>
       <div className="rank__list_module">
         <div className="rank__table_head">
           <div className="table_head table_head__sort">排名</div>
@@ -59,6 +65,7 @@ export default class RankList extends Component {
           }
         </div>
       </div>
+      </>
     )
   }
 }