redpacket function

package.json

@@ -57,6 +57,7 @@
     "qs": "^6.7.0",
     "react": "^16.8.6",
     "react-app-polyfill": "^0.2.2",
+    "react-copy-to-clipboard": "^5.0.1",
     "react-dev-utils": "^8.0.0",
     "react-dom": "^16.8.6",
     "react-infinite-scroller": "^1.2.4",

src/components/detail/index.js

@@ -16,6 +16,8 @@ import {getParam, http, browser,wxShare} from "@/utils"
 import {Toast} from 'antd-mobile'
 import {compose, bindActionCreators} from "redux";
 
+import RedPacket from './redPacket';
+
 class Detail extends Component {
 
     courseId
@@ -42,6 +44,7 @@ class Detail extends Component {
             nowPrice: 0,
             laterPrice: 0,
             isPdd: 0, // 是否是拼团课程 控制首次单集购买后的 全集购买 接口： 拼团课程走拼团接口，否则直接走购买接口
+            isRedPacket: true
         }
     }
 
@@ -57,6 +60,27 @@ class Detail extends Component {
         if (browser.isWeixin) {
             this.isweixinPay()
         }
+
+        this.judgeIsRedPacket();
+
+        // 红包链接进入详情也
+        if(getParam('share_code')) {
+            this.setState({
+                isRedPacket: true
+            });
+        }
+    }
+
+    // 判断时候未红包课程
+    judgeIsRedPacket = () => {
+        http.get(`${API.home}/sys/redPacket/showShareActive/${getParam('id')}`).then(res => {
+            const { code, data } = res.data;
+            if(code === 200) {
+                this.setState({
+                    isRedPacket: data.is_show
+                });
+            }
+        })
     }
 
     componentDidUpdate(prevProps) {
@@ -398,7 +422,7 @@ class Detail extends Component {
     }
 
     render() {
-        const { course: { course_info={} }, barInfo, singleBox, singleType } = this.state;
+        const { course: { course_info={} }, barInfo, singleBox, singleType, isRedPacket } = this.state;
         let courseInfo = '',
             service = '',
             number = 0,
@@ -472,6 +496,8 @@ class Detail extends Component {
                     </div>
                 }
 
+                
+
                 {/*vip课程显示*/}
                 {
                     course_info.vip_range &&
@@ -530,6 +556,14 @@ class Detail extends Component {
                 {/*payCallback={this.payCallback}*/}
                 {/*weixinPay = {this.weixinPay}*/}
 
+                {/* 红包 */}
+                {
+                    isRedPacket && 
+                    <RedPacket
+                        history={this.props.history}
+                    />
+                }
+
                 {/*分享赚钱*/}
                 {
                     course_info.is_dist &&

src/components/detail/redPacket/index.js

+import React, { PureComponent } from 'react';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import classnames from 'classnames';
+import { connect } from 'redux';
+import { isEmpty } from 'lodash';
+import { browser } from '@/utils';
+import { http, getParam, validateTel } from "@/utils";
+import { Formik, withFormik, Form, Field } from 'formik';
+import { Toast } from 'antd-mobile';
+import Captcha from '@/common/Captcha';
+import './index.scss';
+
+class RedPacket extends PureComponent {
+
+  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: ''
+      },
+      doneInfo: { //领取后的状态，1:领取成功，2:领取超时
+        status: 2,
+        txt: '手机号绑定超时，红包已失效!',
+        // txt: '今日已领取5.6元代金券碎片！',
+        // txt: '今日已领取5.6元现金！',
+      },
+      money: '', // 红包金额,
+      endTime: 10, // 手机绑定时限
+      countdownTimer: null,
+      countdown: '00分00秒', // 绑定时间
+      accountInfo: {}, 
+      bindInfo: {} 
+    }
+  }
+
+  componentDidMount() {
+    
+    // 分享链接进入
+    const share_code = getParam('share_code');
+    const { shareInfo } = this.state;
+    if(share_code) {
+      this.setState({
+        type: browser.isWeixin? 2 : 3,
+        shareInfo: {
+          ...shareInfo,
+          share_code
+        }
+      });
+    }
+  }
+
+  
+  
+
+  // 绑定时间
+  startCountDown = () => {
+    const { endTime } = this.state;
+    let time = endTime;
+    let minutes = 0;
+    let seconds = 0;
+    this.countdownTimer = window.setInterval(() => {
+      if (time <= 0) {
+        window.clearInterval(this.countdownTimer);
+        this.setState({
+          endTime: 0
+        });
+      }
+      time -= 1;
+      minutes = `${Math.floor(time / 60)}`.padStart(2, 0);
+      seconds = `${(time % 60)}`.padStart(2, 0);
+      this.setState({
+        countdown: `${minutes}分${seconds}秒`
+      });
+    }, 1000)
+  }
+
+  handleToShare = () => {
+    const { history } = this.props;
+
+    // 获取分享信息
+    http.get(`${API.home}/sys/redPacket/shareUrl/${getParam('id')}`).then(res => {
+      const { code, data } = res.data;
+      if(code === 4030) {
+        history.push('/passport/login');
+      }
+      if(code === 200) {
+        this.setState({
+          shareInfo: data,
+          type: browser.isWeixin? 2 : 1
+        });
+      }
+    });
+  }
+
+  handleToOpen = () => {
+    const { history } = this.props;
+    const { shareInfo: { share_code='' } } = this.state;
+    
+    // 拆红包
+    http.post(
+      `${API.home}/sys/redPacket/split`,
+      {
+        action: 'receive',
+        share_code
+      }
+    ).then(res => {
+      const { code, data } = res.data;
+      if(code === 200) {
+
+        // is_overdue 红包是否过期 0-否 1-是
+        if(data.is_overdue) {
+          this.setState({
+            type: 7
+          });
+        }else {
+
+          // is_receive	是否领取过 0-否 1-是
+          if(data.is_receive) {
+
+            // receive_status 领取状态 1-已领取 2-已领取未绑定 3-已失效
+            if(data.receive_status === 1) {
+              let txt = '';
+
+              // receive_type 领取类型 1自己 2别人
+              if(data.receive_type === 1) {
+                txt = data.red_packet_type === 1? `今日已领取${data.amount}元现金！`: `今日已领取${data.amount}元代金券碎片！`;
+              }
+              if(data.receive_type === 2) {
+                txt = data.red_packet_type === 1? `您已经领过该红包 ${data.amount}元现金！`: `您已经领过该红包 ${data.amount}元代金券碎片！`;
+              }
+              this.setState({
+                type: 9,
+                doneInfo: {
+                  status: 1,
+                  txt
+                }
+              });
+            }else if(data.receive_status === 2) {
+              this.setState({
+                type: 4,
+                money: data.amount,
+                endTime: data.end_time
+              });
+              this.startCountDown();
+            }else if(data.receive_status === 3) {
+              this.setState({
+                type: 9,
+                doneInfo: {
+                  status: 2,
+                  txt: '手机号绑定超时，红包已失效!'
+                }
+              });
+            }
+          }else {
+
+            // red_packet_type 红包类型 1-现金 2-代金券
+            if(data.red_packet_type === 2) {
+              this.setState({
+                type: 5,
+                money: data.amount
+              });
+            }else if(data.red_packet_type === 1) {
+
+              // receive_status 领取状态 1-已领取 2-已领取未绑定 3-已失效
+              if(data.receive_status === 1) {
+                if(data.red_packet_type === 1) {
+                  this.setState({
+                    type: 5,
+                    money: data.amount
+                  });
+                }else if(data.red_packet_type === 2 ) {
+                  this.setState({
+                    type: 6,
+                    money: data.amount
+                  });
+                }
+              }else if(data.receive_status === 2) {
+                this.setState({
+                  type: 4,
+                  money: data.amount,
+                  endTime: data.end_time
+                });
+                this.startCountDown();
+              }else if(data.receive_status === 3) {
+                this.setState({
+                  type: 9,
+                  doneInfo: {
+                    status: 2,
+                    txt: '手机号绑定超时，红包已失效!'
+                  }
+                });
+              }
+            }
+          }
+        }
+       
+      }else if(code === 4030) {
+        history.push('/passport/login');
+      }
+    })
+  }
+
+  // 关闭弹出
+  handleToClose = (isOpen, isShare = false) => {
+    if(isOpen) {
+      const { shareInfo: { share_code='' } } = this.state;
+
+      // 检查收否领取过
+      http.post(
+        `${API.home}/sys/redPacket/split`,
+        {
+          action: 'check',
+          share_code
+        }
+      ).then(res => {
+        const { code, data } = res.data;
+        if(code === 200) {
+
+          // is_receive	是否领取过 0-否 1-是
+          if(data.is_receive) {
+
+            // receive_status 领取状态 1-已领取 2-已领取未绑定 3-已失效
+            if(data.receive_status === 1) {
+              this.setState({
+                type: 9,
+                doneInfo: {
+                  status: 1,
+                  txt: data.red_packet_type === 1? `今日已领取${data.amount}元现金！`: `今日已领取${data.amount}元代金券碎片！`
+                }
+              });
+            }else if(data.receive_status === 2) {
+              this.setState({
+                type: 4,
+                money: data.amount,
+                endTime: data.end_time
+              });
+              this.startCountDown();
+            }else if(data.receive_status === 3) {
+              this.setState({
+                type: 9,
+                doneInfo: {
+                  status: 2,
+                  txt: '手机号绑定超时，红包已失效!'
+                }
+              });
+            }
+          }else {
+
+            // is_overdue	红包是否过期 0-否 1-是
+            if(data.is_overdue) {
+              this.setState({
+                type: 7
+              });
+            }else {
+              this.setState({
+                type: 3
+              });
+            }
+          }
+        }
+      });
+    }else {
+      if(isShare) {
+        const { history } = this.props;
+        history.push(`/detail?id=${getParam('id')}`);
+      }
+      this.setState({
+        type: 0
+      });
+    }
+  }
+
+  handleToCopy = () => {
+    this.setState({
+      isCopy: true
+    });
+  }
+
+  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 } = 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 (!validateTel(tel)) {
+          Toast.info('请输入正确格式的手机号码', 2, null, false);
+        }else {
+
+          // 获取验证码
+          http.post(
+            `${API['passport-api']}/m/personal/bindPhoneSendCode`,
+            {
+              area_code: '0086',
+              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;
+  }
+
+  // 绑定后领取
+  receviceAfterBind = () => {
+    http.get(`${API.home}/sys/red_packet/receive`).then(res => {
+      const { code, data, msg } = res.data;
+      if(code === 200) {
+        // receive_status 领取状态 1-已领取 2-已领取未绑定 3-已失效
+        if(data.receive_status === 1) {
+          if(data.red_packet_type === 1) {
+            this.setState({
+              type: 5,
+              money: data.amount
+            });
+          }else if(data.red_packet_type === 2 ) {
+            this.setState({
+              type: 6,
+              money: data.amount
+            });
+          }
+        }else if(data.receive_status === 2) {
+          this.setState({
+            type: 4,
+            money: data.amount,
+            endTime: data.end_time
+          });
+          this.startCountDown();
+        }else if(data.receive_status === 3) {
+          this.setState({
+            type: 9,
+            doneInfo: {
+              status: 2,
+              txt: '手机号绑定超时，红包已失效!'
+            }
+          });
+        }
+      }else {
+        Toast.info(msg, 2, null, false);
+      }
+    })
+  }
+
+  // 绑定手机
+  toContinueBind = (isValid = 1) => {
+    const { accountInfo: { tel, code}  } = this.state;
+    // is_valid	是否验证 1:验证（默认）,0不验证
+    http.post(
+      `${API['passport-api']}/m/personal/bindPhone`, 
+      {
+        area_code: '0086',
+        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() {
+    // console.log(this.props);
+    const { history } = this.props;
+    const { 
+      type, 
+      isCopy, 
+      validate, 
+      isTimer, 
+      seconds, 
+      shareInfo: {
+        command=''
+      }, 
+      money, 
+      doneInfo,
+      countdown,
+      endTime,
+      bindInfo
+    } = this.state;
+    const cls = classnames('popup-mask',{
+      'popup-mask--no': type !== 0
+    });
+    // const isClick = 
+    return (
+      <>
+        <div className="red-packet">
+          <p className="red-packet__title">分享课程给好友，你和好友都可以领红包哦〜</p>
+          <button className="red-packet__button" onClick={this.handleToShare}>分享领红包</button>
+        </div>
+
+        {/* popup */}
+        {
+          type !== 0 &&
+          <div className={cls}>
+
+            {/* wechat */}
+            {
+              type == 2 && 
+              <div className="pupup-wechat">
+                <h4 className="popup-wechat__title">当前环境不支持领红包活动</h4>
+                <p className="popup-wechat__desc">请点击右上角“ ··· ”，选择在浏览器中打开 然后领取红包！</p>
+                <i className="popup-wechat__icon"></i>
+              </div>
+            }
+
+            {/* wechat--no */}
+            {
+              type === 1 &&
+              <div className="popup-password">
+                <div className="popup-password__content">
+                  <h4 className="popup-password__header">复制口令发送给好友</h4>
+                  <div className="popup-password__body">
+                    <p id="password" className="popup-passowrd__info">
+                      {command.length > 16? `${command.substr(0, 16)}...` : command}
+                    </p>
+                    {!isCopy
+                      ? (
+                          <CopyToClipboard text={command} onCopy={this.handleToCopy}>
+                            <button className="popup-password__button--copy">复制口令</button>
+                          </CopyToClipboard>
+                        )
+                      : <p className="popup-password__success">复制成功，快发送给好友吧~</p>
+                    }
+                  </div>
+                  <p className="popup-password__footer">
+                    好友领取红包后，你将获得同样奖励。<br />
+                    自己也可以领取哦~
+                  </p>
+                </div>
+                <i 
+                  className="popup-password__button--close iconfont iconiconfront-2" 
+                  onClick={() => this.handleToClose(true)}
+                />
+              </div>
+            }
+
+            {/* red-packet--close */} 
+            {
+              type === 3 &&
+              <Packet 
+                type={3}
+                packetInfo={{
+                  title: '七月在线给你发了个红包～'
+                  
+                }}
+                handleToClose={() => this.handleToClose(false)}
+                handleToOpen={this.handleToOpen}
+              />
+            }
+
+            {/* red-packet--open */}
+            {
+              type === 4 &&
+              <Packet 
+                type={4}
+                packetInfo={{
+                  money,
+                  tip: ['为了您的资金安全，请于5分钟之内绑定手机号，超时红包将失效'],
+                  btn: {
+                    txt: `立即绑定（${countdown}）`,
+                    onClick: () => {
+                      this.setState({
+                        type: 8
+                      });
+                    }
+                  }
+                }}
+                handleToClose={() => this.handleToClose(false)}
+              />
+            }
+
+            {/* red-packet--money success */}
+            {
+              type === 5 &&
+              <Packet 
+                type={5}
+                packetInfo={{
+                  money,
+                  tip: ['可前往【七月在线】APP','- 账户资金中提现'],
+                  btn: {
+                    txt: '获取更多奖励',
+                    onClick: () => {
+                      history.push('/ShareCourse');
+                    }
+                  }
+                }}
+                handleToClose={() => {
+                  const isShare = getParam('share_code')? true : false;
+                  this.handleToClose(false, isShare);
+                }}
+              />
+            }
+
+            {/* red-packet--fragment success */}
+            {
+              type === 6 &&
+              <Packet 
+                type={6}
+                packetInfo={{
+                  money,
+                  tip: ['可前往【七月在线】APP','- 我的优惠券中合成代金券'],
+                  btn: {
+                    txt: '获取更多奖励',
+                    onClick: () => {
+                      history.push('/ShareCourse');
+                    }
+                  }
+                }}
+                handleToClose={() => {
+                  const isShare = getParam('share_code')? true : false;
+                  this.handleToClose(false, isShare);
+                }}
+              />
+            }
+
+            {/* red-packet--late 来完了 */}
+            {
+              type === 7 &&
+              <Packet 
+                type={7}
+                packetInfo={{
+                  btn: {
+                    txt: '获取更多奖励',
+                    onClick: () => {
+                      history.push('/ShareCourse')
+                    }
+                  }
+                }}
+                handleToClose={() => {
+                  const isShare = getParam('share_code')? true : false;
+                  this.handleToClose(false, isShare);
+                }}
+              />
+            }
+
+            {/* form */}
+            {
+              type === 8 &&
+              <div className="popup-form">
+                <Formik
+                  initialValues={{
+                    tel: '',
+                    code: ''
+                  }}
+                  validate={({tel, code}) => {
+                    const errors = {};
+                
+                    if (!validateTel(tel)) {
+                      errors.tel = '请填写正确格式的手机号';
+                    }
+                    if (!/[0-9]{6}/.test(code)) {
+                      errors.code = '请输入验证码';
+                    }
+                
+                    return errors;
+                  }}
+                  onSubmit={(values, { setStatus, setSubmitting }) => {
+                    this.setState({
+                      accountInfo: {
+                        ...values
+                      }
+                    });
+                    this.toContinueBind();
+                  }}
+                  render={({values: {tel, code}, errors}) => (
+                    <Form className="popup-form__content">
+                      <h4 className="popup-form__title">绑定手机号</h4>
+                      <div className="popup-form__item">
+                        <a className="popup-form__button--num">
+                          +86
+                          <i className="iconfont iconiconfront-69"></i>
+                        </a>
+                        <Field
+                          name="tel"
+                          render={({field}) => {
+                            return (
+                              <input 
+                                {...field}
+                                className="popup-form__ipt" 
+                                data-bdrs="0 6px 6px 0"
+                                data-type="tel"
+                                type="text"
+                                placeholder="请填写手机号"
+                              />
+                            );
+                          }}
+                        />
+                      </div>
+                      <Captcha 
+                        mrBtm={15}
+                        getInstance={this.getCaptchaInstance}
+                        onVerify={this.onVerify}
+                      />
+                      {
+                        endTime === 0? (
+                          <>
+                            <div className="popup-form__item">
+                              <p className="popup-form__tip">
+                                <i className="iconfont icondanseshixintubiao-8"></i>
+                                绑定超时，红包已失效!
+                              </p>
+                            </div>
+                            <button 
+                              className="popup-packet__button--bundle" 
+                              data-status="do"
+                              type="button"
+                              onClick={() => {
+                                history.push('/ShareCourse');
+                              }}
+                            >获取更多奖励</button>
+                          </>
+                        ) : (
+                          <>
+                            <div className="popup-form__item">
+                              <Field
+                                name="code"
+                                render={({field}) => {
+                                  return (
+                                    <input 
+                                      {...field}
+                                      className="popup-form__ipt"
+                                      type="text"
+                                      placeholder="输入验证码"
+                                    />
+                                  );
+                                }}
+                              />
+                              <button 
+                                className="popup-form__button--code"
+                                data-status={(validate && !isTimer)? 'do': ''}
+                                type="button"
+                                onClick={() => this.handleToSend({tel, code})}
+                              >
+                                {
+                                  isTimer? `重新发送${seconds}s` : '发送验证码'
+                                }
+                              </button>
+                            </div>
+                            <button 
+                              className="popup-packet__button--bundle" 
+                              data-status={(tel && code && isEmpty(errors))? 'do': 'done'}
+                              type="submit"
+                            >
+                              {`完成绑定(${countdown})`}
+                            </button>
+                          </>
+                        )
+                      }
+                    </Form>
+                  )}
+                />
+                <i 
+                  className="popup-password__button--close iconfont iconiconfront-2" 
+                  onClick={() => this.handleToClose(false)}
+                />
+              </div>
+            }
+
+            {/* 领取后的状态 */}
+            {
+              type === 9 &&
+              <div className="popup-done">
+                <div className="popup-done__content">
+                  <h4 className={classnames("popup-done__title", {'popup-done__title--overtime': doneInfo.status === 2})}>
+                    {
+                      doneInfo.status === 2 &&
+                      <i className="iconfont icondanseshixintubiao-8"></i>
+                    }
+                    {doneInfo.txt}
+                  </h4>
+                  <p className="popup-done__desc">每天只能帮好友领取一次哦~</p>
+                  <button 
+                    className="popup-packet__button--bundle" 
+                    data-status="do"
+                    type="submit"
+                    onClick={() => {
+                      history.push('/ShareCourse');
+                    }}
+                  >获取更多奖励</button>
+                </div>
+                <i 
+                  className="popup-password__button--close iconfont iconiconfront-2" 
+                  onClick={() => {
+                    const isShare = getParam('share_code')? true : false;
+                    this.handleToClose(false, isShare);
+                  }}
+                />
+              </div>
+            }
+
+            {/* 手机号绑定提示  */}
+            {
+              type === 10 && 
+              <div className="popup-bind">
+                <div className="popup-bind__content">
+                  <h4 className="popup-bind__title">绑定确认</h4>
+                  <p className="popup-bind__desc">该手机号已绑定到以下账号，继续绑定将解除以下绑定状态</p>
+                  <ul className="popup-bind__list">
+                    {
+                      bindInfo['email'] &&
+                      <li className="popup-bind__account">
+                      
+                        {/* 邮箱 */}
+                        <i className="iconfont iconduanxin"></i>
+                        <p className="popup-bind__account--name">{bindInfo['email']}</p>
+                      </li>
+                    }
+                    {
+                      bindInfo['wechat_nickname'] &&
+                      <li className="popup-bind__account">
+
+                        {/* wechat */}
+                        <i className="iconfont iconweixinzhifu"></i>
+                        <p className="popup-bind__account--name">{bindInfo['wechat_nickname']}</p>
+                      </li>
+                    }
+                    {
+                      bindInfo['qq_nickname'] &&
+                      <li className="popup-bind__account">
+
+                      {/* qq */}
+                      <i className="icon-qq"></i>
+                      <p className="popup-bind__account--name">{bindInfo['qq_nickname']}</p>
+                    </li>
+                    }
+                    {
+                      bindInfo['sina_nickname'] &&
+                      <li className="popup-bind__account">
+
+                        {/* 微博 */}
+                        <i className="icon-sina"></i>
+                        <p className="popup-bind__account--name">{bindInfo['sina_nickname']}</p>
+                      </li>
+                    }
+                  </ul>
+                  <div className="popup-bind__button">
+                    <button 
+                    className="popup-bind__button--cancle" 
+                    onClick={() => this.handleToClose(false)}>取消</button>
+                    <button 
+                    className="popup-bind__button--confirm" 
+                    onClick={() => this.toContinueBind(0)}>继续绑定</button>
+                  </div>
+                </div>
+                <i 
+                  className="popup-password__button--close iconfont iconiconfront-2" 
+                  onClick={() => this.handleToClose(false)}
+                />
+              </div>
+            }
+          </div>
+        }
+      </>
+    )
+  }
+}
+
+const Packet = ({type, packetInfo, handleToClose, handleToOpen }) => {
+  const cls_content = classnames(
+    'popup-packet__content',
+    {
+      'popup-packet__content--open': type === 4,
+      'popup-packet__content--money': type === 5,
+      'popup-packet__content--fragment': type === 6,
+      'popup-packet__content--late': type === 7,
+    }
+  );
+  const {money, tip=[], btn} = packetInfo;
+  return (
+    <div className={classnames('popup-packet')}>
+      <div className={cls_content}>
+        {
+          type === 3 &&
+          <>
+            <p className="popup-packet__title">七月在线给你发了个红包～</p>
+            <button className="popup-packet__button--split" onClick={handleToOpen} />
+          </>
+        }
+        {
+          (type === 4 || type === 5 || type === 6)&&
+          <>
+            <h4 className="popup-packet__label">恭喜您获得</h4>
+            <p className="popup-packet__value">
+              {money}
+              <span className="popup-packet__value--unit">元</span>
+            </p>
+            <p className="popup-packet__tip">
+              {
+                tip.map((item, index) => {
+                  if(index !== (tip.lenght - 1)) {
+                    return (
+                      <>
+                        {item}
+                        <br />
+                      </>
+                    )
+                  }
+                  return item;
+                })
+              }
+            </p>
+            <button 
+              className="popup-packet__button--bundle"
+              onClick={btn.onClick}
+            >
+              {btn.txt}
+            </button>
+          </>
+        }
+        {
+          type === 7 &&
+          <>
+            <h4 className="popup-packet__label">您来晚了！</h4>
+            <p className="popup-packet__value">
+              红包仅能当日领取，下次<br />
+              早点来哦~
+            </p>
+            <button 
+              className="popup-packet__button--bundle"
+              onClick={btn.onClick}
+            >
+              {btn.txt}
+            </button>
+          </>
+        }
+      </div>
+      <i 
+        className="popup-password__button--close iconfont iconiconfront-2" 
+        onClick={handleToClose}
+      />
+    </div>
+  );
+}
+
+export default RedPacket;

src/components/detail/redPacket/index.scss

+.red-packet {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 52px;
+  padding: 0 12px;
+  border-top: 8px solid #f5f5f5;
+}
+
+.red-packet__title {
+  font-size: 13px;
+  color: #333;
+}
+
+.red-packet__button {
+  height: 22px;
+  padding: 0 9px;
+  border: 1px solid #FF4000;
+  border-radius: 11px;
+  box-sizing: border-box;
+  font-size: 12px;
+  color: #FF4000;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+// popup
+.popup-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, .6);
+  z-index: 999;
+}
+
+.popup-mask--no {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// wechat
+.pupup-wechat {
+  position: relative;
+  width: 290px;
+  height: 102px;
+  margin: 65px auto;
+  padding: 20px 17px 0;
+  border-radius: 10px;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+
+.popup-wechat__title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 400;
+  color: #333;
+  text-align: center;
+  line-height: 1;
+}
+
+.popup-wechat__desc {
+  margin: 12px 0 0;
+  font-size: 13px;
+  color: #555;
+  text-align: center;
+  line-height: 20px;
+}
+
+.popup-wechat__icon {
+  position: absolute;
+  top: -55px;
+  right: -28px;
+  width: 60px;
+  height: 44px;
+  background-image: url('./throw_icon.png');
+  background-size: cover;
+}
+
+// wechat--no
+.popup-password {
+  text-align: center;
+}
+
+.popup-password__content {
+  width: 290px;
+  height: 220px;
+  margin: 0 auto;
+  padding: 20px 20px 0;
+  border-radius: 10px;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+
+.popup-password__header {
+  font-size: 15px;
+  font-weight: 400;
+  color: #333;
+  text-align: center;
+  line-height: 1;
+}
+
+.popup-password__body {
+  height: 110px;
+  margin-top: 15px;
+  margin-bottom: 13px;
+  padding-top: 20px;
+  border-radius: 6px;
+  text-align: center;
+  background-color: #F5FBFF;
+}
+
+.popup-passowrd__info {
+  width: 210px;
+  height: 30px;
+  margin: 0 auto 15px;
+  border: 1px solid #99D6FF;
+  border-radius: 15px;
+  box-sizing: border-box;
+  font-size: 12px;
+  color: #333;
+  line-height: 30px;
+  background-color: #fff;
+}
+
+.popup-password__success {
+  margin: 0;
+  padding-top: 9px;
+  font-size: 13px;
+  color: #0099FF;
+  line-height: 1;
+}
+
+.popup-password__button--copy {
+  width: 111px;
+  height: 30px;
+  padding: 0;
+  border-style: none;
+  border-radius: 15px;
+  font-size: 13px;
+  color: #fff;
+  text-align: center;
+  line-height: 30px;
+  background-color: #0099FF;
+  cursor: pointer;
+}
+
+.popup-password__footer {
+  font-size: 12px;
+  color: #999;
+  text-align: center;
+  line-height: 16px;
+}
+
+.popup-password__button--close {
+  display: block;
+  margin-top: 25px;
+  font-size: 26px;
+  color: #fff;
+}
+
+// 拆 
+.popup-packet {
+  text-align: center;
+
+  .popup-packet__title {
+    padding-top: 196px;
+  }  
+}
+.popup-packet__content {
+  position: relative;
+  width: 240px;
+  height: 300px;
+  background-image: url('./redb_chai_bj.png');
+  background-size: cover;
+}
+
+.popup-packet__content--open, 
+.popup-packet__content--money {
+  background-image: url('./redb_money_bj.png');
+}
+
+.popup-packet__content--fragment {
+  background-image: url('./redb_sp_bj.png');
+}
+
+.popup-packet__content--late {
+  padding-top: 40px;
+  background-image: url('./hb_bj.png');
+
+  .popup-packet__label {
+    font-size: 18px;
+    color: #E67600;
+  }
+
+  .popup-packet__value {
+    margin-top: 7px;
+    font-size: 14px;
+    color: #666;
+    line-height: 19px;
+  }
+
+  .popup-packet__button--bundle {
+    margin-top: 138px;
+  }
+}
+
+.popup-packet__content--open, 
+.popup-packet__content--money, 
+.popup-packet__content--fragment {
+
+  .popup-packet__label {
+    padding-top: 20px;
+  }
+
+  .popup-packet__value {
+    padding-top: 10px;
+  }
+
+  .popup-packet__tip {
+    margin-top: 107px;
+  }
+  
+  .popup-packet__button--bundle {
+    margin-top: 28px;
+  }
+}
+
+.popup-packet__title {
+  margin: 0;
+  font-size: 15px;
+  color: #F9F8F1;
+  text-align: center;
+  line-height: 1;
+}
+
+.popup-packet__label {
+  font-size: 15px;
+  font-weight: 400;
+  color: #EAA40B;
+  text-align: center;
+  line-height: 1;
+}
+
+.popup-packet__value {
+  font-size: 28px;
+  color: #FF3131;
+  line-height: 1;
+}
+
+.popup-packet__value--unit {
+  padding-left: 1px;
+  font-size: 12px;
+  color: #FF3131;
+}
+
+.popup-packet__tip {
+  margin: 0;
+  padding: 0 25px;
+  font-size: 12px;
+  color: #F9F8F1;
+  text-align: center;
+  line-height: 17px;
+}
+
+.popup-packet__button--split {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border-style: none;
+  box-sizing: border-box;
+  background-color: transparent;
+  cursor: pointer;
+  outline: none;
+}
+
+.popup-packet__button--bundle {
+  padding: 0;
+  width: 161px;
+  height: 30px;
+  border-style: none;
+  border-radius: 15px;
+  font-size: 13px;
+  color: #2B2B2B;
+  background-color: #F9DB4A;
+  cursor: pointer;
+
+  &[data-status="done"] {
+    color: #fff;
+    background-color: #ABABAB;
+  }
+
+  &[data-status='do'] {
+    color: #fff;
+    background-color: #0099FF;
+  }
+}
+
+// form 
+.popup-form {
+  text-align: center;
+
+  .popup-form__title {
+    margin-bottom: 15px;
+  }
+
+  .popup-packet__button--bundle {
+    margin-top: 5px;
+  }
+}
+
+.popup-form__content {
+  width: 290px;
+  height: 257px;
+  padding: 20px 20px 0;
+  border-radius: 10px;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+
+.popup-form__title {
+  font-size: 15px;
+  font-weight: 400;
+  color: #333;
+  line-height: 1;
+}
+
+.popup-form__item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  margin-bottom: 15px;
+  
+  .popup-form__ipt {
+    flex: 1;
+  }
+
+  .popup-form__button--code {
+    margin-left: 10px;
+  }
+}
+
+.popup-form__button--num {
+  display: block;
+  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;
+  line-height: 36px;
+
+  &::after {
+    display: block;
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 1px;
+    height: 14px;
+    margin: auto 0;
+    background-color: #AAAAAA;
+  }
+
+  .iconfont {
+    font-size: 12px;
+    color: #333;
+  }
+}
+
+.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;
+  }
+}
+
+.popup-form__tip {
+  margin: 0;
+  font-size: 12px;
+  color: #FF3131;
+
+  .iconfont {
+    font-size: 15px;
+    color: #FF3131;
+  }
+}
+
+.popup-form__button--code {
+  width: 110px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid #E5E5E5;
+  border-radius: 6px;
+  box-sizing: border-box;
+  font-size: 13px;
+  color: #999;
+  text-align: center;
+  line-height: 36px;
+  background-color: transparent;
+
+  &[data-status='do'] {
+    border-color: #0099FF;
+    color: #0099FF;
+  }
+}
+
+// 已领
+.popup-done {
+  text-align: center;
+
+  .popup-done__desc {
+    margin-top: 30px;
+  }
+
+  .popup-packet__button--bundle {
+    margin-top: 15px;
+  }
+}
+
+.popup-done__content {
+  width: 290px;
+  height: 162px;
+  padding-top: 30px;
+  border-radius: 10px;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+
+.popup-done__title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 400;
+  color: #333;
+  text-align: center;
+  line-height: 1;
+}
+
+.popup-done__title--overtime {
+  font-size: 15px;
+  color: #FF3131;
+
+  .iconfont {
+    color: #FF3131;
+  }
+}
+
+.popup-done__desc {
+  margin: 0;
+  font-size: 12px;
+  color: #999;
+  text-align: center;
+  line-height: 1;
+}
+
+// bind
+.popup-bind {
+  text-align: center;
+}
+
+.popup-bind__content {
+  width: 290px;
+  padding-top: 20px;
+  padding-bottom: 18px;
+  border-radius: 10px;
+  background-color: #fff;
+
+  .popup-bind__desc {
+    margin-top: 10px;
+  }
+}
+
+.popup-bind__title {
+  margin: 0;
+  font-size: 14px;
+  color: #333;
+  text-align: center;
+  line-height: 1;
+}
+
+.popup-bind__desc {
+  margin: 0;
+  padding: 0 20px;
+  font-size: 12px;
+  color: #666;
+  text-align: left;
+}
+
+.popup-bind__list {
+  padding: 0 0 10px;
+}
+
+.popup-bind__account {
+  display: flex;
+  align-items: center;
+  height: 30px;
+  margin: 0 52px;
+  text-align: left;
+
+  &:nth-child(n+2) {
+    border-top: 1px solid #E5E5E5;
+  }
+}
+
+.popup-bind__account--name {
+  margin: 0;
+  font-size: 12px;
+  color: #999;
+}
+
+.icon-sina {
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  background-image: url('./sina.png');
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.icon-qq {
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  background-image: url('./qq.png');
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.popup-bind__button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 28px;
+}
+
+.popup-bind__button--cancle {
+  width: 105px;
+  height: 30px;
+  border: 1px solid #0099FF;
+  box-sizing: border-box;
+  border-radius: 15px;
+  font-size: 14px;
+  color: #0099FF;
+  background-color: transparent;
+  cursor: pointer;
+  outline: none;
+}
+
+.popup-bind__button--confirm {
+  width: 105px;
+  height: 30px;
+  border-style: none;
+  border-radius: 15px;
+  box-sizing: border-box;
+  font-size: 14px;
+  color: #fff;
+  background-color: #0099FF;
+  cursor: pointer;
+  outline: none;
+}
\ No newline at end of file

src/components/passport/common/veriCodeInput/index.js

 import React, { Component } from 'react';
 import './veri-code-input.scss'
-import { http, api, validateEmail, validateTel } from '@/utils';
+import { http, validateEmail, validateTel } from '@/utils';
 import { Toast } from "antd-mobile";
 import { has } from 'lodash'
 

yarn.lock

@@ -3056,6 +3056,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@^3:
+  version "3.2.0"
+  resolved "https://registry.npm.taobao.org/copy-to-clipboard/download/copy-to-clipboard-3.2.0.tgz#d2724a3ccbfed89706fac8a894872c979ac74467"
+  integrity sha1-0nJKPMv+2JcG+siolIcsl5rHRGc=
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.0.1.tgz#bff73ba31ca8687431b9c88f78d3362646fb76f0"
@@ -9246,6 +9253,14 @@ react-app-polyfill@^0.2.2:
     raf "3.4.1"
     whatwg-fetch "3.0.0"
 
+react-copy-to-clipboard@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npm.taobao.org/react-copy-to-clipboard/download/react-copy-to-clipboard-5.0.1.tgz#8eae107bb400be73132ed3b6a7b4fb156090208e"
+  integrity sha1-jq4Qe7QAvnMTLtO2p7T7FWCQII4=
+  dependencies:
+    copy-to-clipboard "^3"
+    prop-types "^15.5.8"
+
 react-dev-utils@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-8.0.0.tgz#7c5b227a45a32ea8ff7fbc318f336cf9e2c6e34c"
@@ -9519,11 +9534,6 @@ redux-logger@^3.0.6:
   dependencies:
     deep-diff "^0.3.5"
 
-redux-persist@^5.10.0:
-  version "5.10.0"
-  resolved "https://registry.npm.taobao.org/redux-persist/download/redux-persist-5.10.0.tgz#5d8d802c5571e55924efc1c3a9b23575283be62b"
-  integrity sha1-XY2ALFVx5Vkk78HDqbI1dSg75is=
-
 redux-thunk@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
@@ -11043,6 +11053,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.npm.taobao.org/toggle-selection/download/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 topo@2.x.x:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/topo/-/topo-2.0.2.tgz#cd5615752539057c0dc0491a621c3bc6fbe1d182"