<template>
  <sail-page type="loading-view" title="修改手机号" isHead>
    <div slot="content">
        <div class="ModifyTelephone">
            <div class="weui-cells zero-top">
              <div class="weui-cell">
                <div class="weui-cell__bd">
                  <input class="weui-input" type="Password" v-model="phoneInfo.password" placeholder="请输入登录密码">
                </div>
              </div>
            </div>  
            <div class="weui-cells zero-top">
              <div class="weui-cell">
                <div class="weui-cell__bd">
                  <input class="weui-input" v-model="phoneInfo.phone" type="text" placeholder="请输入新的手机号码">
                </div>
              </div>
            </div>
            <div class="weui-cells zero-top">
              <div class="weui-cell">
                <div class="weui-cell__testNum">
                  <span>
                    <input class="weui-cell__testNum-input" v-model="phoneInfo.verificationCode" type="text" placeholder="请输入验证码">
                  </span>
                  <span>
                   <!--  <button @click='sendverificationCode' class="weui-cell__testNum-button">获取验证码</button> -->
                    <van-button size="small" class="color__btn gradient-green" @click="sendverificationCode" >获取验证码</van-button>
                  </span>
                  
                </div>
              </div>
            </div>
        </div>
        <van-button size="large" @click="updatePhone" :loading="registLoading" class="submit-btn">绑定</van-button>
    </div>
  </sail-page>
</template>

<script>

import sailPage from "@/components/sail-page.vue";
import { Toast } from "vant";
export default {
  components: {
    sailPage
  },
  data: function(){
    return {
      registLoading:false,
      phoneInfo:{
        "password": "",
        "phone": "",
        "verificationCode": ""
      }
    }; 
  },
  methods: {
    sendverificationCode(){
      Toast.loading({
        mask: true,
        message: "正在发送验证码..."
      });
      this.$store.dispatch("loginModule/sendVerficationCode", this.phoneInfo.phone).then(res => {
        if(res){
          Toast.clear();
        }
      });
    },
    updatePhone(){
      this.registLoading = true;
      this.$store.dispatch("updatePhoneModule/updatePhone", this.phoneInfo).then(res=>{
        this.registLoading = false;
        if (res) {
          Toast.success({
            duration: 1000,
            message: "修改手机号码成功"
          });
          setTimeout(() => {
            this.$router.push({ path: "/MyPersonalInfor" }); // -> 编程式跳转
          }, 1000);
        }
      });
    }
  }
};
</script>
<style lang="less">
  
</style>
<style lang="less" scoped>
  .ModifyTelephone{
    margin-top: 15px;
    .weui-cell__testNum {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .weui-cell__testNum-button{
      background-color: transparent;
      border-top: 0;
      border-right: 0;
      border-bottom: 0;
      border-left: 0;
      outline: 0;
      color: #4F7BF2; 
    }
    .color__btn {
      
      color:#fff;
    }
  }
</style>