index.js

import React, { Component } from "react"
import { Toast } from "antd-mobile"
import { http } from "src/utils"
import "./index.scss"

class ConfirmPhone extends Component {
  continueBindPhone = () => {
    const { data, successBindPhone } = this.props
    http
      .post(`${API.home}/sys/v2/user/bindMobile`, {
        ...data,
        type: 1, // 1：绑定，2：修改绑定
        is_valid: 0, // is_valid	是否验证 1:验证（默认）,0不验证
      })
      .then((res) => {
        const { code, msg } = res.data
        if (code === 200) {
          successBindPhone()
        } else {
          Toast.info(msg, 2, null, false)
        }
      })
  }

  render() {
    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>
        ) : (
          <p className="popup-bind__desc">
            该手机号已绑定到以下账号，继续绑定将解除以下绑定状态
          </p>
        )}
        <ul className="popup-bind__list">
          {bindInfo["email"] && (
            <li className="popup-bind__account">
              {/* 邮箱 */}
              <i className="popup-bind__icon" data-plat="mail"></i>
              <p className="popup-bind__account--name">{bindInfo["email"]}</p>
            </li>
          )}
          {bindInfo["wechat_nickname"] && (
            <li className="popup-bind__account">
              {/* wechat */}
              <i className="popup-bind__icon" data-plat="wachat"></i>
              <p className="popup-bind__account--name">
                {bindInfo["wechat_nickname"]}
              </p>
            </li>
          )}
          {bindInfo["qq_nickname"] && (
            <li className="popup-bind__account">
              {/* qq */}
              <i className="popup-bind__icon" data-plat="qq"></i>
              <p className="popup-bind__account--name">
                {bindInfo["qq_nickname"]}
              </p>
            </li>
          )}
          {bindInfo["sina_nickname"] && (
            <li className="popup-bind__account">
              {/* 微博 */}
              <i className="popup-bind__icon" data-plat="sina"></i>
              <p className="popup-bind__account--name">
                {bindInfo["sina_nickname"]}
              </p>
            </li>
          )}
        </ul>
        <div className="popup-bind__footer">
          <button
            className="popup-bind__button popup-bind__button--cancle"
            onClick={handleToCancle}
          >
            取消
          </button>
          <button
            className="popup-bind__button popup-bind__button--confirm"
            onClick={this.continueBindPhone}
          >
            继续绑定
          </button>
        </div>
      </div>
    )
  }
}

export default ConfirmPhone