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;
  }
}