quickapp_front/src/views/Phone/index.ux

<template>
  <div class="phone-wrap">
    <div class="input-content">
      <div class="input-item">
        <input class="input-text" type="tel" placeholder="请输入手机号" value="{{mobile}}" style="placeholder-color: #CCC" onchange="updateMobile"></input>
      </div>
      <div class="input-item">
        <input class="input-text" type="number" maxlength="6" placeholder="请输入验证码" value="{{code}}" style="placeholder-color: #CCC" onchange="updateMessage"></input>
        <text class="send-msg" if="{{!hasSend}}" @click="sendMsg">获取验证码</text>
        <text class="send-msg disabled" else>重新获取{{duration}}</text>
      </div>
    </div>
    <input type="button" value="绑定手机号" class="bind-button" @click="bindUser"> </input>
  </div>
</template>
<script>
import { validatePhone ,getSendOrderId } from '../../api/utils';
import { sendCode, userBind } from '../../api/index';
import router from '@system.router';
import prompt from '@system.prompt';
export default {
  private: {
    hasSend: false,
    duration: 120,
    mobile: null,
    code: null

  },
  onInit() {

  },
  async sendMsg() {
    let result = validatePhone(this.mobile);
    if (result) {
      let res = await sendCode({ phone: this.mobile });
      this.countDown();
    } else {
      prompt.showToast({
        message: '手机号格式不正确'
      })
    }
  },
  updateMobile(e) {
    this.mobile = e.value;
  },
  updateMessage(e) {
    this.code = e.value;
  },
  //倒计时
  countDown() {
    this.hasSend = true;
    let time = setInterval(() => {
      this.duration--;
      if (this.duration < 1) {
        clearInterval(time);
        this.duration = 120;
        this.hasSend = false;
      }
    }, 1000);
  },
  //绑定用户
  async bindUser() {
    if (!this.mobile || !this.code) {
      prompt.showToast({
        message: '请输入手机号和验证码'
      })
      return false;
    }
    if (!validatePhone(this.mobile)) {
      prompt.showToast({
        message: '手机号码格式不正确'
      })
      return false;
    }
    let params = {
      phone: this.mobile,
      code: this.code
    }
    let res = await userBind(params);
    prompt.showToast({
      message: '绑定成功！'
    })
    setTimeout(()=>{
      router.back();
    },1500)

  }

}
</script>
<style lang="less">
@import "../../assets/less/phone.less";
</style>