bind phone popup

8c56fbd9 · FE · dece6848 · 8c56fbd9 · 8c56fbd9 · 8c56fbd9
Commit 8c56fbd9 authored Dec 10, 2019 by FE
7 changed files
--- a/src/common/Captcha/index.scss
+++ b/src/common/Captcha/index.scss
 .captcha-container {
  position: relative;
  width: 100%;
-  height: 40px;
+  // height: 40px;
 }

 .captcha-animation {

--- a/src/common/bindPhone/index.js
+++ b/src/common/bindPhone/index.js
 import React, { Component } from 'react';
 import { Formik, Form, Field } from 'formik';
-import { withRouter, Link } from 'react-router-dom';
+import { Toast } from 'antd-mobile';
+import { isEmpty } from 'lodash';
 import Captcha from '@/common/Captcha';
-import {  getParam } from '@/utils';
+import { http, getParam } from '@/utils';
 import './index.scss';

 class BindPhone extends Component {
  constructor(props) {
    super(props),
    this.state = {
-
-      // 弹窗类型：0: 无弹出，1:非微信，2:微信
-      type: 0,
-      isCopy: false,
      validate: '',
      captchaInstance: null,
      seconds: 60,
      isFirst: true,
      timer: null,
      isTimer: false, // 是否开始倒计时
-      shareInfo: {
-        url: '',
-        share_code: '',
-        command: '【七月在线送你一个红包】https://www.julyedu.com/'
-      },
-      doneInfo: { //领取后的状态，1:领取成功，2:领取超时
-        status: 2,
-        txt: '手机号绑定超时，红包已失效!',
-        desc: ''
-      },
-      money: '', // 红包金额,
-      endTime: 10, // 手机绑定时限
-      countdownTimer: null,
-      countdown: '00分00秒', // 绑定时间
      accountInfo: {},
      bindInfo: {},
      country: {
@@ -41,10 +24,121 @@ class BindPhone extends Component {
    }
  }

+  getCaptchaInstance = instance => {
+    this.setState({
+      captchaInstance: instance
+    });
+  }
+
+  onVerify = (err, data) => {
+    if (err) {
+      console.log(err);
+    } else {
+      this.setState({
+        validate: data.validate
+      });
+    }
+  }
+
+  handleToSend = ({tel, code}) => {
+    let { validate, seconds, isFirst, isTimer, captchaInstance, country: {num = '86'} } = this.state;
+    if(validate) {
+      if (!isFirst) {
+        Toast.info('请重新进行滑块验证', 2, null, false);
+        captchaInstance.refresh();
+        this.setState({
+            isFirst: true
+        });
+        return
+      }
+      if(!isTimer) {
+        if (!tel) {
+          Toast.info('手机号码不能为空', 2, null, false);
+        }else if(!/^\d+$/.test(tel)) {
+        // }else if (!validateTel(tel)) {
+          Toast.info('请输入正确格式的手机号码', 2, null, false);
+        }else {
+
+          // 获取验证码
+          http.post(
+            `${API['passport-api']}/m/personal/bindPhoneSendCode`,
+            {
+              area_code: `00${num}`,
+              phone_num: tel
+            }
+          ).then(res => {
+            const { errno, msg } = res.data;
+            if(errno === 200) {
+              Toast.info('验证码发送成功', 2, null, false);
+
+              // 倒计时
+              this.timer = window.setInterval(() => {
+                if (seconds <= 0) {
+                  window.clearInterval(this.timer);
+                  this.setState({
+                    isTimer: false,
+                    seconds: 60
+                  });
+                }else {
+                  this.setState({
+                    isTimer: true,
+                    seconds: --seconds
+                  });
+                }
+              }, 1000);
+
+              // 滑块
+              this.setState({
+                isFirst: false
+              })
+            }else {
+              Toast.info(msg, 2, null, false);
+            }
+          })
+        }
+      }
+    }
+    return false;
+  }
+
+  // 绑定手机
+  toContinueBind = (isValid = 1) => {
+    const { accountInfo: { tel, code}, country: {num = '86'}  } = this.state;
+    // is_valid	是否验证 1:验证（默认）,0不验证
+    http.post(
+      `${API['passport-api']}/m/personal/bindPhone`,
+      {
+        area_code: `00${num}`,
+        phone_num: tel,
+        code: code,
+        type: 1,
+        is_valid: isValid
+      }
+    ).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();
+          }
+        }else {
+          this.receviceAfterBind();
+        }
+      }else {
+        Toast.info(msg, 2, null, false);
+      }
+    });
+  }
+
  render() {
+    const { desc, skip = 'year' } = this.props;
    const { country, validate, isTimer } = this.state;
    return (
-      <div className="popup-form">
        <Formik
          initialValues={{
            tel: '',
@@ -72,15 +166,18 @@ class BindPhone extends Component {
            this.toContinueBind();
          }}
          render={({values: {tel, code}, errors}) => (
-            <Form className="popup-form__content">
-              <h4 className="popup-form__title">绑定手机号</h4>
+            <Form className="popup-form" data-skip={skip}>
+              {
+                desc &&
+                <div className="poup-form__desc">{desc}</div>
+              }
              <div className="popup-form__item">
-                <Link
+                <a
                  className="popup-form__button--num"
                  to={`/country?id=${getParam('id')}&share_code`}>
                  +{country.num}
                  <i className="iconfont iconiconfront-69"/>
-                </Link>
+                </a>
                <Field
                  name="tel"
                  render={({field}) => {
@@ -88,7 +185,6 @@ class BindPhone extends Component {
                      <input
                        {...field}
                        className="popup-form__ipt"
-                        data-bdrs="0 6px 6px 0"
                        data-type="tel"
                        type="text"
                        placeholder="请填写手机号"
@@ -98,7 +194,6 @@ class BindPhone extends Component {
                />
              </div>
              <Captcha
-                mrBtm={15}
                getInstance={this.getCaptchaInstance}
                onVerify={this.onVerify}
              />
@@ -128,7 +223,7 @@ class BindPhone extends Component {
                </button>
              </div>
              <button
-                className="popup-packet__button--bundle"
+                className="popup-form__button--bundle"
                data-status={(tel && code && isEmpty(errors))? 'do': 'done'}
                type="submit"
              >
@@ -137,13 +232,8 @@ class BindPhone extends Component {
            </Form>
          )}
        />
-        <i
-          className="popup-password__button--close iconfont iconiconfront-2"
-          onClick={() => this.handleToClose(false)}
-        />
-      </div>
    )
  }
 }

-export default withRouter(BindPhone);
\ No newline at end of file
+export default BindPhone;
\ No newline at end of file
--- a/src/common/bindPhone/index.scss
+++ b/src/common/bindPhone/index.scss
 // form 
-.popup-form {
-  text-align: center;
-
-  .popup-form__title {
-    margin-bottom: 15px;
-  }
+// .popup-form {
+//   text-align: center;

  .popup-packet__button--bundle {
    margin-top: 5px;
  }
+// }
+
+[data-skip="default"] {
+  .popup-form__item {
+    height: 36px;
+  }
+
+  .popup-form__button--num {
+    border: 1px solid #99D6FF;
+    border-right-style: none;
+    border-radius: 6px 0 0 6px;
+  }
+  
+  .popup-form__button--code {
+    border-radius: 6px;
+  }
+
+  .popup-form__button--bundle {
+    width: 161px;
+    height: 30px;
+    border-radius: 15px;
+    font-size: 13px;
+  }
+  
+  .popup-form__ipt {
+    border: 1px solid #99D6FF;
+    border-radius: 6px;
+
+    &[data-type="tel"] {
+      border-left-style: none;
+      border-radius: 0 6px 6px 0;
+    }
+  }
 }

-.popup-form__content {
-  width: 290px;
-  height: 257px;
-  padding: 20px 20px 0;
-  border-radius: 10px;
-  box-sizing: border-box;
-  background-color: #fff;
+[data-skip="year"] {
+  .popup-form__item {
+    width: 269px;
+    height: 40px;
+    
+  }
+
+  .popup-form__button--num {
+    border: 1px solid #CDCDCD;
+    border-right-style: none;
+    border-radius: 3px 0 0 3px;
+  }
+
+  .popup-form__button--code {
+    border-radius: 3px;
+  }
+
+  .popup-form__button--bundle {
+    width: 270px;
+    height: 44px;
+    border-radius: 5px;
+    font-size: 16px;
+  }
+
+  .popup-form__ipt {
+    border: 1px solid #CDCDCD;
+    border-radius: 3px;
+
+    &[data-type="tel"] {
+      border-left-style: none;
+      border-radius: 0 3px 3px 0;
+    }
+  }
 }

-.popup-form__title {
-  font-size: 15px;
-  font-weight: 400;
-  color: #333;
-  line-height: 1;
+.captcha-container {
+  width: 269px;
+  margin: 0 auto 15px;
+}
+
+.popup-form {
+  // width: 290px;
+  // height: 257px;
+  // padding: 20px 20px 0;
+  box-sizing: border-box;
 }

 .popup-form__item {
  display: flex;
  align-items: center;
  justify-content: center;
-  height: 36px;
-  margin-bottom: 15px;
+  margin: 0 auto 15px;
  
  .popup-form__ipt {
    flex: 1;
@@ -52,9 +111,6 @@
  position: relative;
  height: 36px;
  padding: 0 8px;
-  border: 1px solid #99D6FF;
-  border-right-style: none;
-  border-radius: 6px 0 0 6px;
  box-sizing: border-box;
  font-size: 14px;
  color: #333;
@@ -82,18 +138,12 @@
 .popup-form__ipt {
  height: 36px;
  padding: 0 8px;
-  border: 1px solid #99D6FF;
-  border-radius: 6px;
  box-sizing: border-box;
  font-size: 12px;
  color: #999;
  line-height: 36px;
  outline: none;

-  &[data-bdrs="0 6px 6px 0"] {
-    border-radius: 0 6px 6px 0;
-  }
-
  &[data-type="tel"] {
    border-left-style: none;
  }
@@ -114,9 +164,8 @@
  width: 110px;
  height: 36px;
  padding: 0;
-  border: 1px solid #E5E5E5;
-  border-radius: 6px;
-  box-sizing: border-box;
+    border: 1px solid #E5E5E5;
+    box-sizing: border-box;
  font-size: 13px;
  color: #999;
  text-align: center;
@@ -127,4 +176,24 @@
    border-color: #0099FF;
    color: #0099FF;
  }
+}
+
+.popup-form__button--bundle {
+  display: block;
+  padding: 0;
+  margin: 0 auto;
+  border-style: none;
+  color: #2B2B2B;
+  background-color: #F9DB4A;
+  cursor: pointer;
+
+  &[data-status="done"] {
+    color: #fff;
+    background-color: #ABABAB;
+  }
+
+  &[data-status='do'] {
+    color: #fff;
+    background-color: #0099FF;
+  }
 }
\ No newline at end of file
--- a/src/common/closable-popup/index.js
+++ b/src/common/closable-popup/index.js
@@ -12,7 +12,6 @@ function ClosablePopup({
  closable = true,
  close = function () {},
  clickMaskClose = true,
-  skip='default',
  closeIcon = 'iconiconfront-2'
 } = {}) {

@@ -46,7 +45,7 @@ function ClosablePopup({
  }

  const closablePopup = (
-    <div className={'closable-popup-mask'} data-skip={skip} onClick={clickMask}>
+    <div className={'closable-popup-mask'} onClick={clickMask}>
      <div className={classnames(['popup-container', className])}>
        <div className="title">{title}</div>
        <div className="content">

--- a/src/common/closable-popup/index.scss
+++ b/src/common/closable-popup/index.scss
@@ -11,22 +11,9 @@
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;

-    &[data-skip="default"] {
-
-        .popup-container {
-            border-radius: 10px;
-        }
-    }
-
-    &[data-skip="year"] {
-        
-        .popup-container {
-            border-radius: 5px;
-        }
-    }
-
    .popup-container {
        padding: 20px 10px;
+        border-radius: 10px;
        background-color: #fff;

        .title {

--- a/src/components/activity/newyear-2019/myTreasure/index.js
+++ b/src/components/activity/newyear-2019/myTreasure/index.js
@@ -34,11 +34,11 @@ class MyTreasure extends Component {
    this.fetchActivityStatus();
    // 绑定地址--宝箱
    Popup({
-      title: '绑定确认',
-      content: <ConfirmPhone 
-        bindInfo={bindInfo} 
-        tip={<p className="confirm-treasure__desc">该手机号已绑定以下账号，继续绑定将解除以下绑定状态</p>} 
-      />
+      title: '绑定手机号',
+      content: <BindPhone desc={<>
+        <p className="phone-treasure__desc">恭喜您获得 奖品名称（现金）</p>
+        <p className="phone-treasure__notice">为了您的账户安全，请于2019年12月31日前绑定手机号，过期将失效</p>
+      </>} />
    });
  }

@@ -46,6 +46,13 @@ class MyTreasure extends Component {

  }

+  handleToConfirmPhone = () => {
+    this.confrimInstance = Popup({
+      title: '绑定确认',
+      content: <ConfirmPhone bindInfo={bindInfo} />
+    });
+  }
+
  handleToBindAddress = () => {
    this.addressInstance = Popup({
      title: '收货信息',
@@ -153,27 +160,6 @@ class MyTreasure extends Component {
                />
              ))
            }
-            {/* <TreasureTeam data={{
-              is_captain: 0,
-              status: 1,
-              is_open: 1,
-              members:[
-                {
-                  uid:1,
-                  head_img:"https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/default/moon_my.jpg",
-                  is_open:1,
-                  is_captain:1,
-                  prize_name:"dfefawefwe"
-                },
-                {
-                  uid:22,
-                  head_img:"https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/app/156274320700059253.png",
-                  is_open:1,
-                  is_captain:0,
-                  prize_name:"带份饭问"
-                }
-              ]
-            }}></TreasureTeam> */}
          </div>
        }
      </div>

--- a/src/components/activity/newyear-2019/myTreasure/index.scss
+++ b/src/components/activity/newyear-2019/myTreasure/index.scss
@@ -62,4 +62,21 @@
  font-size: 12px;
  color: #FF2121;
  line-height: 1;
+}
+
+// 绑定手机弹窗--宝箱
+.phone-treasure__desc {
+  width: 269px;
+  margin: 10px 15px 0;
+  font-size: 14px;
+  color: #666;
+  line-height: 1;
+}
+
+.phone-treasure__notice {
+  width: 269px;
+  margin: 9px 15px 15px;
+  font-size: 12px;
+  color: #FF2121;
+  line-height: 18px;
 }
\ No newline at end of file