split first step success

src/common/bindPhone/index.js

@@ -7,11 +7,12 @@ import { http, getParam } from '@/utils';
 import './index.scss';
 
 class BindPhone extends Component {
+  captchaInstance = null;
+
   constructor(props) {
     super(props),
     this.state = {
       validate: '',
-      captchaInstance: null,
       seconds: 60,
       isFirst: true,
       timer: null,
@@ -24,12 +25,27 @@ class BindPhone extends Component {
     }
   }
 
-  getCaptchaInstance = instance => {
+  componentDidMount() {
+    this.initCountryInfo();
+  }
+
+  initCountryInfo = () => {
+    const { country } = this.props;
     this.setState({
-      captchaInstance: instance
+      country
     });
   }
 
+  toFetchCountryNum = () => {
+    const { history, hideBindPhone } = this.props;
+    hideBindPhone();
+    history.push('/country');
+  }
+
+  getCaptchaInstance = instance => {
+    this.captchaInstance = instance;
+  }
+
   onVerify = (err, data) => {
     if (err) {
       console.log(err);
@@ -40,12 +56,13 @@ class BindPhone extends Component {
     }
   }
 
+  // 获取手机号验证码
   handleToSend = ({tel, code}) => {
-    let { validate, seconds, isFirst, isTimer, captchaInstance, country: {num = '86'} } = this.state;
+    let { validate, seconds, isFirst, isTimer, country: {num = '86'} } = this.state;
     if(validate) {
       if (!isFirst) {
         Toast.info('请重新进行滑块验证', 2, null, false);
-        captchaInstance.refresh();
+        this.captchaInstance.refresh();
         this.setState({
             isFirst: true
         });
@@ -55,7 +72,6 @@ class BindPhone extends Component {
         if (!tel) {
           Toast.info('手机号码不能为空', 2, null, false);
         }else if(!/^\d+$/.test(tel)) {
-        // }else if (!validateTel(tel)) {
           Toast.info('请输入正确格式的手机号码', 2, null, false);
         }else {
 
@@ -102,32 +118,29 @@ class BindPhone extends Component {
   }
 
   // 绑定手机
-  toContinueBind = (isValid = 1) => {
-    const { accountInfo: { tel, code}, country: {num = '86'}  } = this.state;
-    // is_valid	是否验证 1:验证（默认）,0不验证
-    http.post(
-      `${API['passport-api']}/m/personal/bindPhone`,
-      {
+  toBindPhone = () => {
+    const { accountInfo: { tel, code }, country: {num = '86'}  } = this.state;
+    const { handleToConfirmPhone, successBindPhone } = this.props;
+    const params = {
       area_code: `00${num}`,
-        phone_num: tel,
+      mobile: tel,
       code: code,
-        type: 1,
-        is_valid: isValid
+      act_type: 'treasure', // 宝箱
+    };
+    http.post(
+      `${API.home}/sys/v2/user/bindMobile`,
+      {  
+        ...params,
+        type: 1, // 1：绑定，2：修改绑定
+        is_valid: 1, // is_valid	是否验证 1:验证（默认）,0不验证
       }
     ).then(res => {
       const { errno, data, msg } = res.data;
       if(errno === 200 ) {
-        if(isValid) {
         if(data.tip_info) {
-            this.setState({
-              type: 10,
-              bindInfo: data.tip_info
-            })
-          }else {
-            this.receviceAfterBind();
-          }
+          handleToConfirmPhone(params, data.tip_info);
         }else {
-          this.receviceAfterBind();
+          successBindPhone();
         }
       }else {
         Toast.info(msg, 2, null, false);
@@ -137,7 +150,7 @@ class BindPhone extends Component {
 
   render() {
     const { desc, skip = 'year' } = this.props;
-    const { country, validate, isTimer } = this.state;
+    const { country, validate, isTimer, seconds } = this.state;
     return (
         <Formik
           initialValues={{
@@ -163,7 +176,7 @@ class BindPhone extends Component {
                 ...values
               }
             });
-            this.toContinueBind();
+            this.toBindPhone();
           }}
           render={({values: {tel, code}, errors}) => (
             <Form className="popup-form" data-skip={skip}>
@@ -172,9 +185,7 @@ class BindPhone extends Component {
                 <div className="poup-form__desc">{desc}</div>
               }
               <div className="popup-form__item">
-                <a
-                  className="popup-form__button--num"
-                  to={`/country?id=${getParam('id')}&share_code`}>
+                <a className="popup-form__button--num" onClick={this.toFetchCountryNum}>
                   +{country.num}
                   <i className="iconfont iconiconfront-69"/>
                 </a>

src/common/confirmPhone/index.js

@@ -2,6 +2,25 @@ import React, { Component } from 'react';
 import './index.scss';
 
 class ConfirmPhone extends Component {
+  continueBindPhone = () => {
+    const { data, successBindPhone } = this.props;
+    http.post(
+      `${API.home}/sys/v2/user/bindMobile`,
+      {  
+        ...data,
+        type: 1, // 1：绑定，2：修改绑定
+        is_valid: 0, // is_valid	是否验证 1:验证（默认）,0不验证
+      }
+    ).then(res => {
+      const { errno, msg } = res.data;
+      if(errno === 200 ) {
+        successBindPhone();
+      }else {
+        Toast.info(msg, 2, null, false);
+      }
+    });
+  }
+
   render() {
     const { bindInfo = { }, desc, skip = 'year' } = this.props;
     return (
@@ -55,7 +74,7 @@ class ConfirmPhone extends Component {
           onClick={() => this.handleToClose(false)}>取消</button>
           <button
           className="popup-bind__button popup-bind__button--confirm"
-          onClick={() => this.toContinueBind(0)}>继续绑定</button>
+          onClick={this.continueBindPhone}>继续绑定</button>
         </div>
       </div>
     )

src/components/activity/newyear-2019/common/splitSuccess/index.js

@@ -2,44 +2,73 @@ import React, { Component } from 'react';
 import './index.scss';
 
 class SplitSuccess extends Component {
+
+  computedBg = (val) => {
+    return val? {
+      backgroundImage: `url(${val})`
+    } : {};
+  }
+
+  continueSplitTreasure = () => {
+    const { ids, successSplitTreasure, handleToBindPhone, handleToBindAddress } = this.props;
+    const params = ids[0];
+    http.post(`${API.home}/sys/split_treasure`, params).then(res => {
+      const { code, data } = res.data;
+      if(code === 200) {
+        successSplitTreasure();
+      }else if(code === 12000) {
+        // 请先绑定手机号再拆宝箱
+        handleToBindPhone();
+      }else if(code === 12001) {
+        // 请先填写收货地址再拆宝箱
+        handleToBindAddress();
+      }
+    })
+  }
+
   render() {
-    const { handleToInvite } = this.props;
+    const { 
+      ids,
+      data: {
+        member = [],
+        prize_img,
+        prize_name,
+      },
+      handleToInvite,
+      children,
+    } = this.props;
     return (
       <div data-skip="split">
         <div className="split-success__image">
-          <img src="" alt=""/>
+          <img src={prize_img} alt=""/>
         </div>
-        <p className="split-success__prize">AI100题纸质书</p>
-        <a href="" className="split-success__link">
-          <span>查看/修改收货信息</span>
-        </a>
+        <p className="split-success__prize">{prize_name}</p>
+
+        {children}
+
         <div className="split-success__member">
-          <div className="member-item">
-            <span className="member-item__avatar">
-              <i className="member-item__captain">队长</i>
-            </span>
-            <span className="member-item__prize">AI100题纸质书</span>
-          </div>
-          <div className="member-item">
-            <span className="member-item__avatar">
-              <i className="member-item__captain">队长</i>
-            </span>
-            <span className="member-item__prize">AI100题纸质书</span>
-          </div>
-          <div className="member-item">
-            <span className="member-item__avatar">
-              <i className="member-item__captain">队长</i>
-            </span>
-            <span className="member-item__prize">AI100题纸质书</span>
-          </div>
-          <div className="member-item">
-            <span className="member-item__avatar">
-              <i className="member-item__captain">队长</i>
+          {
+            member.map((item, index) => (
+              <div className="member-item" key={index}>
+                <span className="member-item__avatar" style={this.computedBg(item.avatar)}>
+                  {
+                    item.is_captain && <i className="member-item__captain">队长</i>
+                  }
                 </span>
-            <span className="member-item__prize">AI100题纸质书</span>
+                {
+                  item.prize
+                  ? <span className="member-item__prize">{item.prize}</span>
+                  : <span className="member-item__prize">尚未拆开宝箱</span>
+                }
               </div>
+            ))
+          }
         </div>
-        <button className="split-success__jump" onClick={handleToInvite}>继续组队开宝箱</button>
+        {
+          ids.length > 0
+          ? <button className="split-success__jump" onClick={this.continueSplitTreasure}>继续开宝箱</button>
+          : <button className="split-success__jump" onClick={handleToInvite}>继续组队开宝箱</button>
+        }
       </div>
     );
   }

src/components/activity/newyear-2019/common/splitSuccess/index.scss

@@ -23,7 +23,7 @@
     line-height: 1;
   }
 
-  .split-success__link {
+  .team-result {
     display: inline-block;
     margin: 8px 0 0;
     font-size: 12px;

src/components/activity/newyear-2019/myTreasure/prize.js

+import React from 'react';
+import './prize.scss';
+
+export default (props) => {
+  const { 
+    data: {
+      bind_phone, 
+      bind_address, 
+      prize_type,
+    },
+    handleToBindPhone,
+    handleToBindAddress,
+    toComposeCoupon,
+    toUseCoupon,
+    toCourseList,
+    toFecthMoney,
+  } = props;
+  return (
+    <>
+      {/* 第一：是否需要绑定手机号 */}
+      {
+        bind_phone &&
+        <a className="team-result" onClick={handleToBindPhone}>
+          <span>绑定手机号</span>
+        </a>
+      }
+
+      {/* 第二：是否需要填写地址 */}
+      {
+        (!bind_phone && bind_address) &&
+        <a className="team-result" onClick={handleToBindAddress}>
+          <span>查看/修改收货信息</span>
+        </a>
+      }
+
+      {/* 第三：奖品，代金券碎片 */}
+      {
+        (!bind_phone && !bind_address && prize_type === 6) &&
+        <a className="team-result" onClick={toComposeCoupon}>
+          可合成代金券在购课时使用，
+          <span>去合成</span>
+        </a>
+      }
+
+      {/* 第三：奖品，指定课程代金券 */}
+      {
+        (!bind_phone && !bind_address && prize_type === 3) &&
+        <a className="team-result" onClick={toUseCoupon}>
+          已发放至您的账户，
+          <span>去使用</span>
+        </a>
+      }
+
+      {/* 第三：奖品，通用课程代金券 */}
+      {
+        (!bind_phone && !bind_address && prize_type === 4) &&
+        <a className="team-result" onClick={toCourseList}>
+          已发放至您的账户，
+          <span>去使用</span>
+        </a>
+      }
+
+      {/* 第三：奖品，现金红包 */}
+      {
+        (!bind_phone && !bind_address && prize_type === 7) &&
+        <a className="team-result" onClick={toFecthMoney}>
+          已存入您的账户，
+          <span>去提现</span>
+        </a>
+      }
+
+      {/* 第三：奖品，线上课程 */}
+      {
+        (!bind_phone && !bind_address && prize_type === 2) &&
+        <a className="team-result">已发放至您的账户</a>
+      }
+    </>
+  )
+}
\ No newline at end of file

src/components/activity/newyear-2019/myTreasure/prize.scss

+.team-result {
+  display: inline-block;
+  margin: 8px 0 0;
+  font-size: 12px;
+  color: #666;
+  text-align: center;
+  line-height: 1;
+
+  span {
+    text-decoration: underline;
+  }
+}
\ No newline at end of file

src/components/activity/newyear-2019/myTreasure/team.js

 import React, { Component } from 'react';
 import classnames from 'classnames';
-import { withRouter, Link } from 'react-router-dom';
-import { http } from '@/utils';
-import { Popup } from '@common';
-import SplitSuccess from './../common/splitSuccess/index';
+import { Link } from 'react-router-dom';
 import './team.scss';
 
 class TreasureTeam extends Component {
@@ -19,26 +16,27 @@ class TreasureTeam extends Component {
     this.initMemberInfo();
   }
 
-  handleToInvite = () => {
-    const { history } = this.props;
-    history.push('/activity/newyear-2019/landing');
-    if(this.splitInstance) {
-      this.splitInstance.close();
+  componentWillReceiveProps(nextProps) {
+    const { data: oldData } = this.props;
+    const { data: newData } = nextProps;
+    if(newData.is_open != oldData.is_open) {
+      this.initMemberInfo(newData);
     }
   }
 
-  initMemberInfo = () => {
-    const { data } = this.props;
-    let members = data.members;
-    let len = members.length - 5;
+  initMemberInfo = (params = {}) => {
+    const { data, userInfo } = this.props;
+    const arr = JSON.stringify(params) !== '{}'? params: data;
+    let member = arr.member;
+    let len = member.length - 5;
     for(; len < 0; len++) {
-      members.push({});
+      member.push({});
     }
     this.setState({
-      team: Object.assign({}, data, {
-        members
+      team: Object.assign({}, arr, {
+        member
       }),
-      currentMember: members[0]
+      currentMember: member.filter(item => item.uid == userInfo.uid)[0]
     });
   }
 
@@ -61,58 +59,32 @@ class TreasureTeam extends Component {
 
   // 查看队友的奖品，条件：宝箱已拆
   toCheckPrize = (id) => {
-    const { team: { is_open, members = []} } = this.state;
+    const { team: { is_open, member = []} } = this.state;
     if(is_open) {
-      const data = members.filter(item => item.uid === id);
+      const data = member.filter(item => item.uid === id);
       this.setState({
         currentMember: data[0]
       });
     }
   }
 
-  toSplitTreasure = () => {
-    const { handleToBindPhone, handleToBindAddress } = this.props;
-    const { team: {captain_uid, team_num} } = this.state;
-    http.post(`${API.home}/sys/split_treasure`, {
-      team_num: team_num,
-      owner_uid: captain_uid
-    }).then(res => {
-      const { code, data } = res.data;
-      if(code === 200) {
-        // 拆宝箱弹窗--成功
-        this.splitInstance = Popup({
-          title: '恭喜你获得',
-          skip: 'year',
-          content: <SplitSuccess handleToInvite={this.handleToInvite} />
-        });
-      }else if(code === 12000) {
-        // 绑定手机号
-        handleToBindPhone();
-      }else if(code === 12001) {
-        // 绑定地址
-        handleToBindAddress();
-      }
-    });
-  }
-
   render() {
     const { 
       team: {
-        id,
         is_captain,
         status,
         team_num,
         lack_member,
         is_open,
-        members = [],
-        prize_type,
-        bing_phone,
-        bing_address,
+        treasure_code,
+        member = [],
       },
-      currentMember: {
-        prize_name
-      }
+      currentMember
     } = this.state;
+    const { 
+      toSplitTreasure,
+      children
+    } = this.props;
     return (
       <div className="team-container" data-skip="team">
         {
@@ -143,11 +115,11 @@ class TreasureTeam extends Component {
         }
         <div className="team-member">
           {
-            members.map((item, index) => (
+            member.map((item, index) => (
               <div 
                 className={this.computedClass(item.uid)}
                 onClick={() => this.toCheckPrize(item.uid)}
-                key={item.id}
+                key={index}
                 style={this.computedBg(item.head_img)}
               >
                 {
@@ -165,8 +137,8 @@ class TreasureTeam extends Component {
             <>
               {
                 is_captain
-                ? <Link className="team-button" to="/activity/newyear-2019/landing">继续邀请队友</Link>
-                : <Link className="team-button" to="/activity/newyear-2019/landing">帮好友完成组队</Link>
+                ? <Link className="team-button" to={`/activity/newyear-2019/landing?treasure_code=${treasure_code}&origin=1`}>继续邀请队友</Link>
+                : <Link className="team-button" to={`/activity/newyear-2019/landing?treasure_code=${treasure_code}&origin=2`}>帮好友完成组队</Link>
               }
             </>
           }
@@ -176,7 +148,7 @@ class TreasureTeam extends Component {
             (status === 2 && !is_open) &&
             <>
               <span className="team-icon" data-direction="left"></span>
-              <span className="team-button--split" onClick={this.toSplitTreasure}></span>
+              <span className="team-button--split" onClick={toSplitTreasure}></span>
               <span className="team-icon" data-direction="right"></span>
             </>
           }
@@ -185,85 +157,8 @@ class TreasureTeam extends Component {
           {
             (status === 2 && is_open) &&
             <>
-              <p className="team-prize">{prize_name}</p>
-
-              {/* 第一：是否需要绑定手机号 */}
-              {
-                bing_phone &&
-                <a className="treamsure-team__result" onClick="$emit('to-bind-phone', data.bing_address)">
-                  <span>绑定手机号</span>
-                </a>
-              }
-
-              {/* 第二：是否需要填写地址 */}
-              {
-                (!bing_phone && bing_address) &&
-                <a className="treamsure-team__result" onClick="$emit('to-bind-address')">
-                  <span>查看/修改收货信息</span>
-                </a>
-              }
-
-              {/* 第三：奖品，代金券碎片 */}
-              {
-                (!bing_phone && !bing_address && prize_type === 6) &&
-                <a 
-                  href="/my/coupon" 
-                  target="_blank"
-                  className="treamsure-team__result"
-                >
-                  可合成代金券在购课时使用，
-                  <span>去合成</span>
-                </a>
-              }
-
-              {/* 第三：奖品，指定课程代金券 */}
-              {
-                (!bing_phone && !bing_address && prize_type === 3) &&
-                <a 
-                  href="/my/coupon" 
-                  target="_blank"
-                  className="treamsure-team__result"
-                >
-                  已发放至您的账户，
-                  <span>去使用</span>
-                </a>
-              }
-
-              {/* 第三：奖品，通用课程代金券 */}
-              {
-                (!bing_phone && !bing_address && prize_type === 4) &&
-                <a 
-                  href="/my/coupon" 
-                  target="_blank"
-                  className="treamsure-team__result"
-                >
-                  已发放至您的账户，
-                  <span>去使用</span>
-                </a>
-              }
-
-              {/* 第三：奖品，现金红包 */}
-              {
-                (!bing_phone && !bing_address && prize_type === 7) &&
-                <a 
-                  href="/my/coupon" 
-                  target="_blank"
-                  className="treamsure-team__result"
-                >
-                  已存入您的账户，
-                  <span>去提现</span>
-                </a>
-              }
-
-              {/* 第三：奖品，线上课程 */}
-              {
-                (!bing_phone && !bing_address && prize_type === 2) &&
-                <a 
-                  href="/my/coupon" 
-                  target="_blank"
-                  className="treamsure-team__result"
-                >已发放至您的账户</a>
-              }
+              <p className="team-prize">{currentMember.prize_name}</p>
+              {children}
             </>
           }
         </div>
@@ -272,4 +167,4 @@ class TreasureTeam extends Component {
   }
 }
 
-export default withRouter(TreasureTeam);
+export default TreasureTeam;
\ No newline at end of file

src/components/activity/newyear-2019/myTreasure/team.scss

@@ -179,4 +179,15 @@
     color: #303030;
     line-height: 1;
   }
+
+  .team-result {
+    margin: 8px 0 0;
+    font-size: 12px;
+    color: #666;
+    line-height: 1;
+
+    span {
+      text-decoration: underline;
+    }
+  }
 }
\ No newline at end of file