index.js

import React, {Component} from 'react';
import {InputItem, List} from "antd-mobile";
import './bargain-info.scss'
import {validateTel} from "@/utils";
import {Toast} from 'antd-mobile'
import { http } from "@/utils";
import {Link} from "react-router-dom";


class BargainInfo extends Component {

    state = {
        mobile: '',
        code: '',
        isBargain: true
    }

    handleChange = e => {

        let {name, value} = e.target

        this.setState({
            [name]: value
        })
    }

    sendCode = () => {

        console.log(validateTel(this.state.mobile));

        if (!validateTel(this.state.mobile)) {
            Toast.info('请输入正确的手机号')
            return
        }


        http.post(`${API['base-api']}/sys/bind_send_sms`, {
            phone_num: this.state.mobile
        }).then(res => {
            if (res.data.code == 200) {
                Toast.info('验证码发送成功', 2, null, false)
            } else if (res.data.errno === 410) {
                Toast.info('该手机号已注册，请使用该手机号登录，发起砍价。', 3, null, false)
                this.setState({
                    isBargain: false
                })
            } else {
                Toast.info(res.data.msg)
            }
        })
    }

    handleClick = () => {
        if (!this.state.code) {
            Toast.info('请填写验证码')
            return
        }

        http.post(`${API.home}/m/user/bindMobile`, {
            ...this.state
        }).then(res => {
            if (res.data.code == 200) {
                Toast.info('绑定手机号成功', 2, null, false)
                this.props.iWantBargain()
            } else {
                Toast.info(res.data.msg)
            }
        })

    }


    render() {
        let {mobile, code} = this.state
        return (
            <div className={'bargain-bind-phone'}>
                <div className="title">绑定手机，先砍一刀</div>
                <List className={'list'}>
                    <input type="tel" onChange={this.handleChange} name='mobile' placeholder='手机号' maxLength={11}/>
                    <label htmlFor="code">
                        <input type="tel" id='code' onChange={this.handleChange} name='code' placeholder='验证码'
                               maxLength={6}/>
                        <div className={'send-code'} onClick={this.sendCode}>发送验证码</div>
                    </label>
                </List>
                {
                    this.state.isBargain &&
                    <button onClick={this.handleClick}
                            className={validateTel(mobile) && code ? 'active' : ''}>先砍一刀</button>
                }
                {
                    !this.state.isBargain &&
                    <Link className='button active' to={`/passport/login`}>去登录</Link>
                }
            </div>
        );
    }
}

export default BargainInfo