Taro项目实现手机号绑定，发送验证码倒计时

一、效果图

二、代码示例

UpdatePhone.jsx

import Taro, { Component, PureComponent } from '@tarojs/taro'
import { View, Button, Text, Picker  } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import { AtForm, AtInput, AtButton, AtToast } from "taro-ui"

import ArrowRight from '@/assets/image/mine/direction.png'
import './UpdatePhone.less'


// 自定义组件, 校验登录
import ForceUserAuthModal from '@/lwComponents/components/ForceUserAuthModal/ForceUserAuthModal';

// 自定义工具库、工具函数
import * as utils from '@/utils/toolbox/utils';
// 全局管理工具， 可以使用taro设置缓存的接口代替
import { set as setGlobalData, get as getGlobalData } from '@/utils/toolbox/globalData';

// dva状态机注入
@connect(({ mine, loading }) => ({
  mine,
  isPageLoading: loading.effects['mine/fetchSendPhoneCode'] || loading.effects['mine/fetchUpdatePhone'],
  isLocalLoading: loading.effects['mine/fetchSendPhoneCode'] || loading.effects['mine/fetchUpdatePhone']
}))
class UpdatePhone extends Component {

  constructor(props) {
    super(props)
    this.isLogin = utils.isLogin();
  }

  config = {
    navigationBarTitleText: '绑定手机'
  }

  state = {
    newphone: '', // 输入的新手机号
    code: '', // 验证码
    phoneNum: '', // 从全局变量中获取
    loading: false,
    yztime: 59
  }

  componentDidMount() {
    const userInfo = getGlobalData('userInfo');
    this.setState({
      phoneNum: userInfo.phoneNum,
  })
  }


  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  // 输入电话的回调
  handleChangeNewphone = (newphone) => {
    this.setState({
      newphone
    })
  }

  // 输入验证码的回调
  handleChangeCode = (code) => {
    this.setState({
      code
    })
  }

  // 点击获取验证码，根据电话号码获取验证码
  getPhoneCode = (e) => {
   
    e.preventDefault();
    const { newphone } = this.state;
    if (newphone == '') {
      utils.showToastMsg('请输入手机号');
      return false;
    }
    if (!utils.isValidPhone(newphone)) {
      utils.showToastMsg('手机号不正确');
      return false;
    }
    if (utils.isValidPhone(newphone)) {
      this.props.dispatch({
        type: 'mine/fetchSendPhoneCode', 
        payload: {
          mobileNum: newphone
        }
      }).then(res => {
        // 为了校验已绑定的手机号再次输入
        if (!this.state.yztime == 0 && res.resultCode === 200) {
          utils.showToastMsg(res.resultMsg)
          this.codetimer();
          this.setState({ loading: true });
        }
      })
      
    }
   
  }
  
  // 点击获取验证码，60s倒计时
  codetimer = () => {
    let { yztime } = this.state;
    let siv = setInterval(() => {
      this.setState({ 
        yztime: ( yztime-- )
      }, () => {
        if (yztime <= -1) {
          clearInterval(siv);
          this.setState({
            loading: false,
            yztime: 59
          })
        }
      })
    }, 1000);
  }

  // 提交电话号码和验证码，更换手机
  saveName = () => {
    const { newphone, code } = this.state;
    console.warn("code", code);
    if (newphone == '') {
      utils.showToastMsg('请输入电话');
      return false;
    }
    if (!utils.isValidPhone(newphone)) {
      utils.showToastMsg('手机号不正确');
      return false;
    }
    if (code == '') {
      utils.showToastMsg('请输入验证码');
      return false;
    }
    this.props.dispatch({
      type: 'mine/fetchUpdatePhone',
      payload: {
        mobileNum: newphone,
        mobileCode: code
      }
    }).then(res => {
      if (res.resultCode === 200) {
        utils.showToastMsg("更换电话成功");
        const userInfo = getGlobalData('userInfo');
        userInfo.phoneNum = newphone;
        setGlobalData('userInfo', userInfo);
        // Taro.navigateTo({
        //   url: '/subMinePages/MyUserInfo/MyUserInfo'
        // })
        this.componentDidMount();
      }
      
    })
  }

  render() {
    const { newphone, phoneNum, code, loading, yztime } = this.state;
    return (
      <View className='update-phone'>
        <AtToast isOpened={this.props.isPageLoading} text="正在加载..." status="loading" duration={0} hasMask={true}></AtToast>
        <View className="update-phone-header">更换手机后，下次登录可使用新手机号登录。当前手机号：{phoneNum}</View>
        <AtInput 
          name='mobileNum'
          title="+86"
          type='phone'
          placeholder="手机号"
          value={newphone}
          onChange={this.handleChangeNewphone}
        />
        <AtInput
          clear
          type='text'
          maxLength='6'
          placeholder='验证码'
          value={code}
          onChange={this.handleChangeCode}
        >
          <View className="update-phone-code" onClick={this.getPhoneCode}>
          {loading ? yztime + '秒' : '获取验证码'}
          </View>
        </AtInput>
        <View className='update-phone-btns'>
          <View className='update-phone-btns-save' onClick={this.saveName}>确认更换</View>
        </View>
      </View>
    )
  }
}

export default UpdatePhone

UpdatePhone.less

page {
  background-color: #FAFAFA;
}

.update-phone {
  &-header {
    width:658px;
    height:77px;
    margin-top: 40px;
    margin-left: 51px;
    margin-bottom: 30px;

    font-size:30px;
    
    color:rgba(153,153,153,1);
    line-height:48px;
  }

  &-btns {
    overflow: hidden;
    display: obsolution;
   
    width:710px;
    height:90px;
    background:rgba(255,90,82,1);
    justify-content: center;
    align-items: center;
    margin-top: 75px;
    margin-left: 3%;
    margin-bottom: 20px;
    
    &-save {
      flex: 1;
      height: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 28px;
      color: #fff;
      border: none;
      border-radius: 0;
    }
  }

  &-code {
    width:159px;
    height:32px;
    font-size:32px;
   
    color:rgba(130,154,188,1) !important;
    line-height:22px;
  } 

  .at-input {
    margin-right: 32px;
  }

  .at-input__title {
    margin-left: 20px !important;
    width:56px;
    height:26px;
    font-size:32px;
   
    color:rgba(0,0,0,1);
    line-height:22px;
  }

  .at-input input {
    margin-left: 26px !important;
  }
}