user sign start

src/components/blessingPreheat/collectBlessing/index.js

 import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
 import ListFrame from './../listFrame/index';
 import ListHeader from './../listHeader';
 import './index.scss';
@@ -48,62 +49,72 @@ class CollectBlessing extends Component {
   }
   
   render() {
-    const { handleToShowNotice, handleToShowList, handleToShowInvite } = this.props;
+    const { 
+      isSign,
+      userInfo: { isLogin = false, blessingVal = 0 }, 
+      handleToShowNotice, 
+      handleToShowList, 
+      handleToShowInvite 
+    } = this.props;
     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>
-          ) : (
+          isLogin 
+          ? (
+            <ListHeader text={`我的福气值： ${blessingVal}分`} size="middle" styles={{margin: '20px 0 0 0'}} />
+          ) 
+          : (
             <ListHeader size="middle" styles={{margin: '20px 0 0 0'}} >
               <span className="text_nologin">我的福气值：</span> 
-              <div className="login__btn" onClick={this.props.toLogin}>登录</div>
-        </ListHeader>
+              <Link to='/passport' className="login__btn">登录</Link>
+            </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>
-                      )
-                    })
-                  }
+        {
+          welfareRuleList.map((item, index) => (
+            <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>
-      </div>
-      <div className="collect-blessing">
-        <ListHeader text="福气值积攒规则" size="middle" styles={{}} />
+              <div className="item__right">
+                {
+                  item.rules.map(item => {
+                    return (
+                      <p>
+                        {item.text} 
+                        <span>{item.des}</span>
+                      </p>
+                    )
+                  })
+                }
+              </div>
+            </div>
+          ))
+        }
+        <ListHeader text="福气值积攒规则" size="middle" styles={{margin: '30px 0 0'}} />
         {
           rules.map((item, index) => (
             <div className="collect-blessing__item" key={index}>
               <i className="collect-blessing__num">{index+1}</i>
               <p className="collect-blessing__title">{item}</p>
               {
-                index === 0 &&
-                <a className="collect-blessing__content" onClick={handleToShowNotice}>
-                  点击<br/>签到
-                </a>
+                (index === 0 && isLogin && isSign)
+                ? (
+                  <a className="collect-blessing__content" onClick={handleToShowNotice}>
+                    +5点<br/>福气值
+                  </a>
+                )
+                : (
+                  <Link to='/passport' className="collect-blessing__content">
+                    点击<br/>签到
+                  </Link>
+                )
               }
               {
                 index === 1 &&
@@ -141,7 +152,6 @@ class CollectBlessing extends Component {
           ))
         }
       </div>
-      </>
     )
   }
 }

src/components/blessingPreheat/collectBlessing/index.scss

@@ -82,6 +82,7 @@
 
   &[data-type="wechat"] {
     background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/wechat-icon.png');
+  }
 }
 
 .activity__over {
@@ -91,6 +92,7 @@
   margin: 10px auto;
   text-align: center;
 }
+
 .login__btn {
   width:34px;
   height:18px;
@@ -102,6 +104,7 @@
   text-align: center;
   margin-right: 12px;
 }
+
 .text_nologin {
   font-size:16px;
   font-weight:600;
@@ -114,7 +117,8 @@
   background-size: 100% 100%;
   width: 336px;
   padding: 18px 18px 10px 18px;
-  margin: 10px auto;
+  margin: 10px auto 0;
+  box-sizing: border-box;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -174,6 +178,8 @@
 
     p {
       margin-bottom: 10px;
+      line-height: 1;
+      
       &:last-child {
         margin-bottom: 0; 
       }

src/components/blessingPreheat/index.js

@@ -30,6 +30,8 @@ class BlessingPreheat extends Component {
       isFormal: false, // 1正式 0 预热
       isServer: false,
       serverUrl: '',
+      userInfo: {},
+      isSign: false,
     }
   }
 
@@ -38,12 +40,35 @@ class BlessingPreheat extends Component {
   }
 
   fetchUserBlessing() {
+    const { userInfo } = this.state;
     http.get(`${API.home}/sys/user/blessing`).then(res => {
       const { code, data } = res.data;
       if(code === 200) {
         this.setState({
-          isFormal: data.is_activity
+          isFormal: data.is_activity,
+          userInfo: Object.assign({}, userInfo, {
+            isLogin: !!data.is_login,
+            blessingVal: data.user_blessing_value,
+          })
         });
+        if(data.is_login === 1) {
+          this.handleToSign();
+        }
+      }
+    });
+  }
+
+  handleToSign = () => {
+    console.log(2,2);
+    http.post(`${API.home}/sys/add/blessing`, {
+      type: 1 // 1：签到；3：分享；4：浏览课程；
+    }).then(res => {
+      const {code } = res.data;
+      if (code === 200) {
+        this.setState({
+          isSign: true,
+        });
+        Toast.info('+5点福气值~', 2, null, false);
       }
     });
   }
@@ -56,12 +81,17 @@ class BlessingPreheat extends Component {
     })
   }
 
-  handleToShow = (key) => {
-    let obj = {};
-    obj[key] = true;
-    this.setState({
-      ...obj
-    });
+  handleToShow = (key, isLogin = false) => {
+    const { history } = this.props;
+    if(isLogin) {
+      history.push('/passport')
+    }else {
+      let obj = {};
+      obj[key] = true;
+      this.setState({
+        ...obj
+      });
+    }
   }
 
   handleToShowInvite = () => {
@@ -110,12 +140,14 @@ class BlessingPreheat extends Component {
   }
 
   render() {
-    const {isRule, isCourse, inviteUrl, inviteVisible, isFormal, isServer, serverUrl} = this.state
+    const { userInfo, isRule, isCourse, inviteUrl, inviteVisible, isFormal, isServer, serverUrl, isSign } = this.state
     return (
       <div id={'blessing-preheat'}>
         {/* 积福气 */}
         <ListHeader text="积福气，享受更多福利" styles={{margin: '0 0 15px'}} />
         <CollectBlessing 
+          isSign={isSign}
+          userInfo={userInfo}
           handleToShowList={() => this.handleToShow('isCourse')} 
           handleToShowInvite={this.handleToShowInvite}
           handleToShowNotice={this.handleToShowNotice}