split treasure basic complete

src/common/addressPopup/index.js

@@ -40,11 +40,14 @@ class AddressPopup extends Component {
   }
 
   handleToSubmit = (params = {}) => {
-    const { handleToHide } = this.props;
-    http.post(`${API.home}/sys/collect_info`, params).then(res => {
+    const { successBindAddress } = this.props;
+    http.post(`${API.home}/sys/update_address`, {
+      act_type: 'treasure',
+      ...params
+    }).then(res => {
       const {code, msg} = res.data;
       if (code === 200) {
-        handleToHide();
+        successBindAddress();
       } else {
         Toast.info(msg, 2, null, false);
       }
@@ -84,6 +87,7 @@ class AddressPopup extends Component {
             }}
             render={({errors}) => (
               <Form className="address-form" data-skip={skip}>
+                <h2 className="address-form__title">收货信息</h2>
                 {
                   prize ? (
                     <p className='address__prize'>您抽中了{prize}<span style={{'color': '#FF4000'}}>实物奖品</span></p>

src/common/addressPopup/index.scss

@@ -22,6 +22,14 @@
 
 [data-skip="year"] {
 
+  .address-form__title {
+    margin: 10px 0 0;
+    font-size: 18px;
+    color: #111;
+    text-align: center;
+    line-height: 1;
+  }
+
   .address-form__subtitle {
     margin: 0 15px;
   }

src/common/bindPhone/index.js

@@ -39,7 +39,7 @@ class BindPhone extends Component {
   toFetchCountryNum = () => {
     const { history, hideBindPhone } = this.props;
     hideBindPhone();
-    history.push('/country');
+    history.push('/country?from=bind');
   }
 
   getCaptchaInstance = instance => {
@@ -135,8 +135,8 @@ class BindPhone extends Component {
         is_valid: 1, // is_valid	是否验证 1:验证（默认）,0不验证
       }
     ).then(res => {
-      const { errno, data, msg } = res.data;
-      if(errno === 200 ) {
+      const { code, data, msg } = res.data;
+      if(code === 200 ) {
         if(data.tip_info) {
           handleToConfirmPhone(params, data.tip_info);
         }else {
@@ -180,6 +180,7 @@ class BindPhone extends Component {
           }}
           render={({values: {tel, code}, errors}) => (
             <Form className="popup-form" data-skip={skip}>
+              <h2 className="popup-form__title">绑定手机号</h2>
               {
                 desc &&
                 <div className="poup-form__desc">{desc}</div>

src/common/bindPhone/index.scss

@@ -41,10 +41,17 @@
 }
 
 [data-skip="year"] {
+  .popup-form__title {
+    margin: 10px 0 0;
+    font-size: 18px;
+    color: #111;
+    text-align: center;
+    line-height: 1;
+  }
+
   .popup-form__item {
     width: 269px;
     height: 40px;
-    
   }
 
   .popup-form__button--num {
@@ -60,6 +67,7 @@
   .popup-form__button--bundle {
     width: 270px;
     height: 44px;
+    margin-bottom: 14px;
     border-radius: 5px;
     font-size: 16px;
   }
@@ -77,6 +85,7 @@
 
 .captcha-container {
   width: 269px;
+  height: 40px;
   margin: 0 auto 15px;
 }
 

src/common/confirmPhone/index.js

 import React, { Component } from 'react';
+import { Toast } from 'antd-mobile';
+import { http } from '@/utils';
 import './index.scss';
 
 class ConfirmPhone extends Component {
@@ -12,8 +14,8 @@ class ConfirmPhone extends Component {
         is_valid: 0, // is_valid	是否验证 1:验证（默认）,0不验证
       }
     ).then(res => {
-      const { errno, msg } = res.data;
-      if(errno === 200 ) {
+      const { code, msg } = res.data;
+      if(code === 200 ) {
         successBindPhone();
       }else {
         Toast.info(msg, 2, null, false);
@@ -22,9 +24,15 @@ class ConfirmPhone extends Component {
   }
 
   render() {
-    const { bindInfo = { }, desc, skip = 'year' } = this.props;
+    const { 
+      bindInfo = { }, 
+      desc, 
+      skip = 'year', 
+      handleToCancle 
+    } = this.props;
     return (
       <div className="popup-bind" data-skip={skip}>
+        <h2 className="popup-bind__title">绑定手机号</h2>
         {
           desc
           ? <div className="popup-bind__desc">{desc}</div>
@@ -71,7 +79,7 @@ class ConfirmPhone extends Component {
         <div className="popup-bind__footer">
           <button
           className="popup-bind__button popup-bind__button--cancle"
-          onClick={() => this.handleToClose(false)}>取消</button>
+          onClick={handleToCancle}>取消</button>
           <button
           className="popup-bind__button popup-bind__button--confirm"
           onClick={this.continueBindPhone}>继续绑定</button>

src/common/confirmPhone/index.scss

@@ -45,6 +45,14 @@
 }
 
 [data-skip="year"] {
+  .popup-bind__title {
+    margin: 10px 0 0;
+    font-size: 18px;
+    color: #111;
+    line-height: 1;
+    text-align: center;
+  }
+
   .popup-bind__desc {
     width: 269px;
     font-size: 12px;
@@ -69,6 +77,7 @@
 
   .popup-bind__footer {
     padding: 0 15px;
+    margin-bottom: 14px;
   }
   
   .popup-bind__button {

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

+import React from 'react';
+import './index.scss';
+
+export default (props) => {
+  console.log(props);
+  const { 
+    data: {
+      team_num = 1,
+      lack_member = 4,
+      member = [],
+    },
+    handleToInvite
+  } = props;
+  const members = new Array(5).fill({});
+  return (
+    <div className="team-success">
+      <h2 className="team-success__title">创建成功</h2>
+      <p className="team-success__tip">
+        {<span>{team_num}</span>}号队伍 还差{<span>{lack_member}</span>}名队员即可获得宝箱哦~
+      </p>
+      <i className="team-success__icon"></i>
+      <ul className='team-success__member members'>
+        {
+          members.map((item, index) => {
+            const _member = member[index]
+            return (
+              <li className="member-item" key={index}>
+                {
+                  _member && _member['is_captain'] && <sup className="member-item__captain">队长</sup>
+                }
+                <img
+                  className="member-item__avatar"
+                  src={
+                    _member
+                      ? _member['head_img']
+                      : "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/not-joined-placeholder.png"
+                  }
+                  alt=""/>
+              </li>
+            );
+          })
+        }
+      </ul>
+      <button type={'button'} className="team-success__button" onClick={handleToInvite}>邀请好友加入队伍</button>
+    </div>
+  )
+}
\ No newline at end of file

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

+.team-success__title {
+  margin: 10px 0 0;
+  font-size: 18px;
+  color: #111;
+  text-align: center;
+  line-height: 1;
+}
+
+.team-success__tip {
+  margin: 12px 0 0;
+  font-size: 15px;
+  color: #666;
+  text-align: center;
+  line-height: 1;
+
+  span {
+    color: #FF2121;
+  }
+}
+
+.team-success__icon {
+  display: block;
+  width: 120px;
+  height: 72px;
+  margin: 20px auto;
+  background-size: cover;
+  background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/treasure-box-icon.png');
+}
+
+.team-success__member {
+  display: flex;
+  padding: 0 12px;
+
+  .member-item {
+    position: relative;
+    margin: 0 8px;
+  }
+
+  .member-item__captain {
+    position: absolute;
+    top: -13px;
+    right: -10px;
+    width: 30px;
+    height: 16px;
+    border: 1px solid rgba(255, 255, 255, 1);
+    border-radius: 8px 8px 8px 0;
+    color: #0E7442;
+    font-size: 10px;
+    text-align: center;
+    line-height: 16px;
+    background: rgba(255, 227, 0, 1);
+  }
+
+  .member-item__avatar {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+  }
+}
+
+.team-success__button {
+  display: block;
+  width: 270px;
+  height: 44px;
+  margin: 20px auto;
+  padding: 0;
+  border: 1px solid #090909;
+  border-radius: 5px;
+  box-sizing: border-box;
+  font-size: 16px;
+  color: #090909;
+  line-height: 44px;
+  background-color: #FFE319;
+}
\ No newline at end of file

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

 import React, { Component } from 'react';
+import { http } from '@/utils';
 import './index.scss';
 
 class SplitSuccess extends Component {
@@ -15,7 +16,17 @@ class SplitSuccess extends Component {
     http.post(`${API.home}/sys/split_treasure`, params).then(res => {
       const { code, data } = res.data;
       if(code === 200) {
-        successSplitTreasure();
+        debugger;
+        successSplitTreasure(data);
+        if(data.bind_phone) {
+          setTimeout(() => {
+            handleToBindPhone(data.id);
+          }, 500);
+        }else if(data.bind_address) {
+          setTimeout(() => {
+            handleToBindAddress(data.id);
+          }, 500);
+        }
       }else if(code === 12000) {
         // 请先绑定手机号再拆宝箱
         handleToBindPhone();
@@ -23,7 +34,7 @@ class SplitSuccess extends Component {
         // 请先填写收货地址再拆宝箱
         handleToBindAddress();
       }
-    })
+    });
   }
 
   render() {
@@ -39,6 +50,7 @@ class SplitSuccess extends Component {
     } = this.props;
     return (
       <div data-skip="split">
+        <h2 className="split-success__title">恭喜你获得</h2>
         <div className="split-success__image">
           <img src={prize_img} alt=""/>
         </div>

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

 [data-skip="split"] {
   text-align: center;
 
+  .split-success__title {
+    margin: 10px 0 0;
+    font-size: 18px;
+    color: #111;
+    line-height: 1;
+  }
+
   .split-success__image {
     width: 130px;
     height: 103px;
-    margin: 10px auto 0;
+    margin: 12px auto 0;
     border: 2px solid #CDCDCD;
     box-sizing: border-box;
+    overflow: hidden;
 
     img {
       display: block;
@@ -37,7 +45,7 @@
   }
 
   .split-success__member {
-    margin: 18px 0 0;
+    margin: 18px 18px 0;
     padding: 4px 12px;
     border-radius: 6px;
     background-color: #EFEFEF;
@@ -82,7 +90,7 @@
   .split-success__jump {
     width: 270px;
     height: 44px;
-    margin: 18px 0 0;
+    margin: 18px 25px 8px;
     border: 1px solid #090909;
     border-radius: 5px;
     box-sizing: border-box;

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

 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { HeaderBar, Popup } from '@common';
+import { HeaderBar } from '@common';
 import AddressPopup from '@common/addressPopup/index';
 import BindPhone from '@common/bindPhone/index';
 import ConfirmPhone from '@common/confirmPhone/index';
+import CreateSuccess from './../common/createSuccess/index';
 import TreasureTeam from './team';
 import PrizeStatus from './prize';
 import SplitSuccess from './../common/splitSuccess/index';
 import { http, getParam } from '@/utils';
+import Mask from './mask';
 import './index.scss';
+import { split } from 'react-ace';
 
 @connect(({country, user}) => ({
   country,
@@ -26,11 +29,19 @@ class MyTreasure extends Component {
       teams: [],
       ids: [], // 未拆宝箱统计
       bindInfo: {}, // 绑定手机号冲突信息
+      isPhone: false,
+      isAddress: false,
+      isConfirm: false,
+      confirmInfo: {},
+      isSplit: false,
+      isCreate: false,
+      createInfo: {},
+      prizeName: '', // 当前商品的名字
     };
   }
 
   componentDidMount() {
-    const { isEnd, bindInfo } = this.state;
+    const { isEnd } = this.state;
     if (isEnd) {
       this.startCountDown();
     }
@@ -38,6 +49,17 @@ class MyTreasure extends Component {
     this.fetchActivityStatus();
   }
 
+  // 页面加载时，初始化当前需要绑定手机号的奖品名字
+  initPrizeName = (params) => {
+    const key = this.fetchCurrentTeamId(params);
+    const data = params.filter(item => item.id == key);
+    if(data.length > 0) {
+      this.setState({
+        prizeName: data[0]['prize_name']
+      });
+    }
+  }
+
   // 页面加载时，是否需要拆宝箱
   judgeIsHaveId = (data) => {
     const id = getParam('id');
@@ -53,51 +75,55 @@ class MyTreasure extends Component {
     }
   }
 
-  // 绑定手机号--展示
-  handleToBindPhone = (id) => {
-    const { history, country } = this.props;
-    this.phoneInstance = Popup({
-      title: '绑定手机号',
-      content: <BindPhone
-        history={history}
-        country={country}
-        hideBindPhone={this.hideBindPhone.bind(this)}
-        handleToConfirmPhone={this.handleToConfirmPhone}
-        successBindPhone={() => this.successBindPhone(id)}
-        desc={
-          <>
-            <p className="phone-treasure__desc">恭喜您获得 奖品名称（现金）</p>
-            <p className="phone-treasure__notice">为了您的账户安全，请于2019年12月31日前绑定手机号，过期将失效</p>
-          </>
-        }
-      />
-    });
+  // 获取当前需要绑定手机的队伍id，当拆到需要绑定手机号/地址的宝箱时，如果不进行绑定则无法拆下一个
+  fetchCurrentTeamId = (data = []) => {
+    const arr = data.filter(item => item.is_open && (item.bind_address || item.bind_address));
+    if(arr.length > 0) {
+      return arr[0]['id'];
+    }else {
+      return '';
+    }
   }
 
-  // 绑定手机号--隐藏
-  hideBindPhone() {
-    if (this.phoneInstance) {
-      this.phoneInstance.close();
+  // 页面加载时，是否是从选择区号页面过来的
+  // TODO,当同时展示拆宝箱成功弹窗和绑定手机号弹窗时，选择区号返回时未展示拆宝箱成功弹窗（和产品确认，后续优化）
+  isShowBindPhone = (data) => {
+    const { country } = this.props;
+    if(country.from) {
+      const id = this.fetchCurrentTeamId(data);
+      this.handleToBindPhone(id);
     }
   }
 
+  // 绑定手机号--展示
+  handleToBindPhone = (id) => {
+    this.setState({
+      isPhone: true,
+    });
+  }
+
   // 绑定手机号--确认
   handleToConfirmPhone = (params, bindInfo) => {
-    this.confrimInstance = Popup({
-      title: '绑定确认',
-      content: <ConfirmPhone 
-        data={params} 
-        bindInfo={bindInfo} 
-        successBindPhone={this.successBindPhone}
-      />
+    this.handleToHideWindow('isPhone');
+    this.setState({
+      confirmInfo: {
+        params,
+        bindInfo,
+      },
+      isConfirm: true,
     });
   }
 
   // 绑定手机号--成功
-  successBindPhone = (id) => {
-    const { teams } = this.state;
+  successBindPhone = () => {
+    this.setState({
+      isPhone: false,
+      isConfirm: false,
+    });
+    const{ teams, splitInfo } = this.state;
+    const teamId = this.fetchCurrentTeamId(teams);
     const data = teams.map(item => {
-      if(item.id == id) {
+      if(item.id == teamId) {
         if(item.bind_address) {
           this.handleToBindAddress();
         }
@@ -108,47 +134,31 @@ class MyTreasure extends Component {
       return item;
     })
     this.setState({
-      teams: data
+      teams: data,
+      splitInfo: Object.assign({}, splitInfo, {
+        bind_phone: false
+      })
     });
   }
 
   // 拆宝箱--拆
   toSplitTreasure = (params) => {
-    const { ids } = this.state;
     http.post(`${API.home}/sys/split_treasure`, params).then(res => {
       const { code, data } = res.data;
       if(code === 200) {
+
         // 拆宝箱弹窗--成功
-        this.splitInstance = Popup({
-          title: '恭喜你获得',
-          skip: 'year',
-          content: <SplitSuccess 
-            ids={ids}
-            data={data}
-            handleToInvite={this.handleToInvite}
-            successSplitTreasure={() => this.successSplitTreasure(data)}
-          >
-            <PrizeStatus 
-              data={data}
-              handleToBindPhone={this.handleToBindPhone}
-              handleToBindAddress={this.handleToBindAddress}
-              toComposeCoupon={this.toComposeCoupon}
-              toUseCoupon={this.toUseCoupon}
-              toCourseList={this.toCourseList}
-              toFecthMoney={this.toFecthMoney}
-            />
-          </SplitSuccess>
-        });
+        this.showSuccessSplit(data);
 
-        // 跟新队伍状态
+        // 更新队伍状态
         this.successSplitTreasure(data);
         if(data.bind_phone) {
           setTimeout(() => {
-            this.handleToBindPhone();
+            this.handleToBindPhone(data.id);
           }, 500);
         }else if(data.bind_address) {
           setTimeout(() => {
-            this.handleToBindAddress();
+            this.handleToBindAddress(data.id);
           }, 500);
         }
       }else if(code === 12000) {
@@ -161,7 +171,7 @@ class MyTreasure extends Component {
     });
   }
 
-  // 拆宝箱--成功
+  // 拆宝箱--成功，更新数据
   successSplitTreasure = (params) => {
     const { userInfo } = this.props;
     const { teams } = this.state;
@@ -171,6 +181,8 @@ class MyTreasure extends Component {
           bind_phone: params.bind_phone,
           bind_address: params.bind_address,
           is_open: true,
+          prize_type: params.prize_type,
+          prize_data: params.prize_data,
           member: item.member.map(val => {
             if(val.uid == userInfo.uid) {
               return Object.assign({}, val, {
@@ -187,25 +199,47 @@ class MyTreasure extends Component {
     });
     this.initNoSplitInfo(data);
     this.setState({
-      teams: data
+      teams: data,
+      splitInfo: params,
+      prizeName: params.prize_name
+    });
+  }
+
+  // 拆宝箱--成功，展示弹窗
+  showSuccessSplit = (data) => {
+    this.setState({
+      isSplit: true,
+      splitInfo: data
     });
   }
 
   // 绑定地址--展示
-  handleToBindAddress = () => {
-    this.addressInstance = Popup({
-      title: '收货信息',
-      skip: 'year',
-      content: <AddressPopup
-        skip="year"
-        tip={
-          <>
-            <p className="address-treasure__desc">恭喜您获得 奖品名称奖品名称奖品名称</p>
-            <p className="address-treasure__notice">请及时填写/确认收货信息，活动结束后统一邮寄</p>
-          </>
-        }
-        handleToHide={() => this.addressInstance.close()}
-      />
+  handleToBindAddress = (id) => {
+    this.setState({
+      isAddress: true
+    });
+  }
+
+  // 绑定地址--成功
+  successBindAddress = () => {
+    this.setState({
+      isAddress: false,
+    });
+    const{ teams, splitInfo } = this.state;
+    const teamId = this.fetchCurrentTeamId(teams);
+    const data = teams.map(item => {
+      if(item.id == teamId) {
+        return Object.assign({}, item, {
+          bind_address: false,
+        });
+      }
+      return item;
+    })
+    this.setState({
+      teams: data,
+      splitInfo: Object.assign({}, splitInfo, {
+        bind_address: false
+      })
     });
   }
 
@@ -218,6 +252,8 @@ class MyTreasure extends Component {
         if (Array.isArray(data.team) && data.team.length > 0) {
           this.initNoSplitInfo(data.team);
           this.judgeIsHaveId(data.team);
+          this.isShowBindPhone(data.team);
+          this.initPrizeName(data.team);
           this.setState({
             isEmpty: false,
             teams: data.team,
@@ -263,6 +299,7 @@ class MyTreasure extends Component {
     });
   }
 
+  // 活动结束--倒计时
   startCountDown = () => {
     const { history } = this.props;
     let { seconds } = this.state;
@@ -286,17 +323,31 @@ class MyTreasure extends Component {
     }, 1000);
   }
 
-  updatedTreasureStatus = (id) => {
-    console.log(id);
-  }
-
   // 邀请好友
-  handleToInvite = () => {
+  handleToInvite = (treasure_code) => {
     const { history } = this.props;
-    const { team } = this.state;
-    history.push(`/activity/newyear-2019/landing?treasure_code=${team.treasure_code}&origin=1`);
-    if(this.splitInstance) {
-      this.splitInstance.close();
+    history.push(`/activity/newyear-2019/landing?treasure_code=${treasure_code}&origin=1`);
+  }
+
+  // 组队开宝箱
+  toOrganizeTeam = () => {
+    const { history, userInfo: { uid = '' } } = this.props;
+    if(uid === '') {
+      history.push('/passport')
+    }else {
+      http.get(`${API.home}/sys/treasure/createMyTeam`).then(res => {
+        const { code, data } = res.data;
+        if(code === 200) {
+          const teams = [];
+          teams[0] = data;
+          this.setState({
+            isEmpty: false,
+            teams,
+            isCreate: true,
+            createInfo: data
+          });
+        }
+      });
     }
   }
 
@@ -307,9 +358,9 @@ class MyTreasure extends Component {
   }
 
   // 奖品，指定课程代金券--使用
-  toUseCoupon = () => {
+  toUseCoupon = (id) => {
     const { history } = this.props;
-    history.push(`/detail?id=${coupon['limit_course']}`);
+    history.push(`/detail?id=${id}`);
   }
 
   // 第三：奖品，通用课程代金券--使用
@@ -324,9 +375,34 @@ class MyTreasure extends Component {
     history.push('/scholarship');
   }
 
+  // 弹窗--隐藏
+  handleToHideWindow = (key) => {
+    const param = {};
+    param[key] = false;
+    this.setState(param);
+  }
+
   render() {
-    const { history, userInfo } = this.props;
-    const { isEnd, isEmpty, seconds, teams, ids } = this.state;
+    const { history, userInfo, country } = this.props;
+    const { 
+      isEnd, 
+      isEmpty, 
+      seconds, 
+      teams, 
+      ids, 
+      isPhone,
+      isAddress,
+      isConfirm, 
+      isSplit,
+      splitInfo = {},
+      confirmInfo: {
+        params = {},
+        bindInfo = {}
+      },
+      isCreate,
+      createInfo,
+      prizeName,
+    } = this.state;
     return (
       <div data-skip="treasure">
         <HeaderBar title="我的宝箱" arrow={true} />
@@ -343,11 +419,11 @@ class MyTreasure extends Component {
             <i className="team-empty__icon"></i>
             <p className="team-empty__desc">您当前还没有宝箱哦~</p>
             <p className="team-empty__desc">快去组队邀请好友一起开宝箱吧！</p>
-            <button className="team-empty__button">组队开宝箱</button>
+            <button className="team-empty__button" onClick={this.toOrganizeTeam}>组队开宝箱</button>
           </>
         }
         {
-          (!isEnd && !isEmpty) &&
+          (!isEnd && !isEmpty && userInfo.uid) &&
           <div className="treasure-content">
             {
               teams.map((item, index) => (
@@ -371,13 +447,87 @@ class MyTreasure extends Component {
                     handleToBindPhone={this.handleToBindPhone}
                     handleToBindAddress={this.handleToBindAddress}
                     toComposeCoupon={this.toComposeCoupon}
-                    toUseCoupon={this.toUseCoupon}
+                    toUseCoupon={() => this.toUseCoupon(item.prize_data)}
                     toCourseList={this.toCourseList}
                     toFecthMoney={this.toFecthMoney}
                   />
                 </TreasureTeam>
               ))
             }
+
+            {/* 拆宝箱--弹窗，成功 */}
+            <Mask visible={isSplit} handleToHide={() => this.handleToHideWindow('isSplit')}>
+              <SplitSuccess 
+                ids={ids}
+                data={splitInfo}
+                handleToInvite={this.handleToInvite}
+                handleToBindPhone={this.handleToBindPhone}
+                handleToBindAddress={this.handleToBindAddress}
+                successSplitTreasure={this.successSplitTreasure}
+              >
+                <PrizeStatus 
+                  data={splitInfo}
+                  handleToBindPhone={this.handleToBindPhone}
+                  handleToBindAddress={this.handleToBindAddress}
+                  toComposeCoupon={this.toComposeCoupon}
+                  toUseCoupon={() => this.toUseCoupon(splitInfo.prize_data)}
+                  toCourseList={this.toCourseList}
+                  toFecthMoney={this.toFecthMoney}
+                />
+              </SplitSuccess>
+            </Mask>
+
+            {/*绑定手机号--弹窗 */}
+            <Mask visible={isPhone} handleToHide={() => this.handleToHideWindow('isPhone')}>
+              <BindPhone
+                history={history}
+                country={country}
+                hideBindPhone={() => this.handleToHideWindow('isPhone')}
+                handleToConfirmPhone={this.handleToConfirmPhone}
+                successBindPhone={this.successBindPhone}
+                desc={
+                  <>
+                <p className="phone-treasure__desc">恭喜您获得 奖品名称（{prizeName}）</p>
+                    <p className="phone-treasure__notice">为了您的账户安全，请于2019年12月31日前绑定手机号，过期将失效</p>
+                  </>
+                }
+              />
+            </Mask>
+
+            {/* 绑定手机号--弹窗，确认 */}
+            <Mask visible={isConfirm} handleToHide={() => this.handleToHideWindow('isConfirm')}>
+              <ConfirmPhone 
+                data={params} 
+                bindInfo={bindInfo} 
+                handleToCancle={() => this.handleToHideWindow('isConfirm')}
+                successBindPhone={this.successBindPhone}
+              />
+            </Mask>
+            
+            {/* 绑定地址--弹窗 */}
+            <Mask visible={isAddress} handleToHide={() => this.handleToHideWindow('isAddress')}>
+              <AddressPopup
+                skip="year"
+                tip={
+                  <>
+                    <p className="address-treasure__desc">恭喜您获得 奖品名称奖品名称奖品名称</p>
+                    <p className="address-treasure__notice">请及时填写/确认收货信息，活动结束后统一邮寄</p>
+                  </>
+                }
+                successBindAddress={this.successBindAddress}
+              />
+            </Mask>
+
+            {/* 组队成功 */}
+            <Mask visible={isCreate} handleToHide={() => this.handleToHideWindow('isCreate')}>
+              <CreateSuccess 
+                data={createInfo} 
+                handleToInvite={() => {
+                  this.handleToInvite(createInfo.treasure_code);
+                  this.handleToHideWindow('isCreate');
+                }}
+              />
+            </Mask>
           </div>
         }
       </div>

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

@@ -49,9 +49,24 @@
   }
 }
 
+// 所有弹窗
+.popup-container {
+
+  &.year {
+
+    .close-icon {
+      position: absolute;
+      bottom: 80px;
+      left: 0;
+      right: 0;
+      margin: 0 auto;
+    }
+  }
+}
+
 // 地址弹窗--宝箱
 .address-treasure__desc {
-  margin: 10px 0 0;
+  margin: 12px 0 0;
   font-size: 14px;
   color: #666;
   line-height: 1;
@@ -67,7 +82,7 @@
 // 绑定手机弹窗--宝箱
 .phone-treasure__desc {
   width: 269px;
-  margin: 10px 15px 0;
+  margin: 10px 25px 0;
   font-size: 14px;
   color: #666;
   line-height: 1;
@@ -75,7 +90,7 @@
 
 .phone-treasure__notice {
   width: 269px;
-  margin: 9px 15px 15px;
+  margin: 9px 25px 15px;
   font-size: 12px;
   color: #FF2121;
   line-height: 18px;

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

+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import './mask.scss';
+
+const Root = document.querySelector('body');
+
+class Mask extends Component {
+
+  constructor(props) {
+    super(props);
+    if(!this.el) {
+      this.el = document.createElement('div');
+    }
+  }
+
+  componentDidMount() {
+    Root.appendChild(this.el);
+  }
+
+  componentWillUnmount() {
+    Root.removeChild(this.el);
+  }
+
+  render() {
+    const { visible, handleToHide } = this.props;
+    if(visible) {
+      return ReactDOM.createPortal(
+        (
+          <div className="mask">
+            <div className="mask-content">
+              {this.props.children}
+            </div>
+            <div className="mask-footer">
+              <i className="mask-button__close" onClick={handleToHide}></i>
+            </div>
+          </div>
+        ),
+        this.el
+      );
+    }else {
+      return null;
+    }
+  }
+}
+
+export default Mask;
\ No newline at end of file

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

+.mask {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color:#fff;
+  background-color: rgba(0, 0, 0, .5);
+}
+
+.mask-content {
+  min-width: 200px;
+  min-height: 100px;
+  padding: 10px 0;
+  border-radius: 5px;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+
+.mask-footer {
+  margin-top: 33px;
+}
+
+.mask-button__close {
+  display: inline-block;
+  width: 33px;
+  height: 33px;
+  background-size: cover;
+  background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/close-btn.png');
+}
\ No newline at end of file

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

@@ -33,6 +33,14 @@ export default (props) => {
         </a>
       }
 
+      {/* 第三：奖品，实物 */}
+      {
+        (!bind_phone && !bind_address && prize_type === 1) &&
+        <a className="team-result" onClick={handleToBindAddress}>
+          <span>查看/修改收货信息</span>
+        </a>
+      }
+
       {/* 第三：奖品，代金券碎片 */}
       {
         (!bind_phone && !bind_address && prize_type === 6) &&

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

@@ -36,7 +36,7 @@ class TreasureTeam extends Component {
       team: Object.assign({}, arr, {
         member
       }),
-      currentMember: member.filter(item => item.uid == userInfo.uid)[0]
+      currentMember: userInfo.uid? member.filter(item => item.uid == userInfo.uid)[0] : {}
     });
   }
 
@@ -83,6 +83,7 @@ class TreasureTeam extends Component {
     } = this.state;
     const { 
       toSplitTreasure,
+      userInfo,
       children
     } = this.props;
     return (
@@ -157,8 +158,16 @@ class TreasureTeam extends Component {
           {
             (status === 2 && is_open) &&
             <>
-              <p className="team-prize">{currentMember.prize_name}</p>
-              {children}
+              {
+                currentMember.prize_name
+                ? <p className="team-prize">{currentMember.prize_name}</p>
+                : <p className="team-prize">尚未拆开宝箱</p>
+              }
+              {
+                currentMember.uid == userInfo.uid
+                ? children
+                : null
+              }
             </>
           }
         </div>