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.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>