bind_customer_phone​

  {{#form 'bind_customer_phone' id="bind-customer-phone"}}
    {{#if form.register_config.check_tag}}
      <div class="step1-form">
        <div class="verifycode">
          <input type="text" name="customer[verifycode1]" placeholder="verifycode" />
          <button class="verifycode-button">send</button>
        </div>
        <div>
          <button class="next-step-button">next</button>
        </div>
      </div>
      <div class="step2-form" style="display: none;">
        <div>
          <label for="phone">new phone</label>
          <input id="code" type="text" name="customer[code]" />
          <input id="phone" type="text" name="customer[phone]" />
        </div>
        <div class="verifycode">
          <input type="text" name="customer[verifycode]" placeholder="verifycode" />
          <button class="verifycode-button">send</button>
        </div>
        <div class="submit">
          <input class="submit-button" type="submit" value="change phone">
        </div>
      </div>
    {{else}}
      <div>
        <label for="phone">new phone</label>
        <input id="code" type="text" name="customer[code]" placeholder="code" />
        <input id="phone" type="text" name="customer[phone]" />
      </div>
      <div class="submit">
        <input class="submit-button" type="submit" value="change phone">
      </div>
    {{/if}}
  {{/form}}

  class BindCustomerPhone {
    constructor() {
      this.form = document.querySelector('#bind-customer-phone');
      this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
      const checkTag = this.form.getAttribute('data-check');
      if (checkTag === 'true') { // need verifyCode
        // init step1 event
        this.formStep1 = this.form.querySelector('.step1-form')
        this.verifyCodeButtonStep1 = this.formStep1.querySelector('.verifycode-button');
        this.verifyCodeButtonStep1.addEventListener(
          'click', this.onSendVerifyCodeHandlerSetp1.bind(this)
        );
        this.nextStepButton = this.form.querySelector('.next-step-button')
        this.nextStepButton.addEventListener(
          'click', this.onNextStepHandler.bind(this)
        );
        // init step2 event
        this.formStep2 = this.form.querySelector('.step2-form')
        this.verifyCodeButtonStep2 = this.formStep2.querySelector('.verifycode-button');
        this.verifyCodeButtonStep2.addEventListener(
          'click', this.onSendVerifyCodeHandlerSetp2.bind(this)
        );
      }
      this.bindCustomerPhone = new window.Shopline.customerAccount.BindCustomerPhone(this.form);
    }
    onSendVerifyCodeHandlerSetp1(e) { // send verifyCode in setp1
      e.preventDefault();
      if (this.verifyCodeButtonStep1.getAttribute('aria-disabled') === 'true') return;
      this.verifyCodeButtonStep1.setAttribute('aria-disabled', true);
      
      this.bindCustomerPhone.sendVerifyCodeStep1()
        .then(response => {
          // you can get the current encrypted email/phone by response.data.emailMask/mobileMask. e.g. m****ail@gmail.com
          console.log('send verfiyCode to:', response.data.emailMask || response.data.mobileMask);
        })
        .catch((error) => {
          console.log(error)
          this.verifyCodeButtonStep1.removeAttribute('aria-disabled');
        })
    }
    onNextStepHandler(e) { // go to next step
      e.preventDefault();
      this.bindCustomerPhone.nextStep()
        .then(response => {
          // show next step form when succeed
          this.formStep1.style.display = 'none';
          this.formStep2.style.display = 'block';
        })
        .catch((error) => {
          console.log(error)
        })
    }
    onSendVerifyCodeHandlerSetp2(e) { // send verifyCode in setp2
      e.preventDefault();
      if (this.verifyCodeButtonStep2.getAttribute('aria-disabled') === 'true') return;
      this.verifyCodeButtonStep2.setAttribute('aria-disabled', true);
      
      this.bindCustomerPhone.sendVerifyCodeStep2()
        .then(response => {
          console.log(response);
        })
        .catch((error) => {
          console.log(error)
          this.verifyCodeButtonStep2.removeAttribute('aria-disabled');
        })
    }
    onSubmitHandler(e) { // submit form
      e.preventDefault();
      this.bindCustomerPhone.submit()
        .then(response => {
          window.location.href = '/user/center';
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
  window.Shopline.loadFeatures(
    [
      {
        name: 'customer-account-api',
        version: '0.3'
      }
    ],
    function(error) {
      if (error) {
        throw error;
      }
      new BindCustomerPhone();
    }
  );