<template>
  <div class="app-container" :style="{height:height+'px'}">
    <van-nav-bar
      title="手机号修改"
      left-arrow
      fixed
      placeholder
      @click-left="onClickLeft"
    />
    <van-form>
      <van-field value="15314031621" type="tel" label="当前号码" placeholder="请输入手机号" required :rules="[{ required:true }]" />

      <van-field label="新手机号" placeholder="更改后下次请使用新手机号" required :rules="[{ required:true }]"/>
      <van-field label="验证码" placeholder="请输入验证码" required :rules="[{ required:true }]" >
        <template #extra >
          <p style="color: #007e72">免费获取短信验证码</p>
        </template>
      </van-field>
      <div class="submit">
        <van-button round block type="info" color="#007E72" native-type="submit">保存</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
  export default {
    name: "notice",
    data() {
      return {
        height:0,
        tel:'',
        fileList:[]
      };
    },
    created() {
      this.height = document.body.clientHeight
    },
    methods: {
      afterRead(file) {
        // 此时可以自行将文件上传至服务器
        console.log(this.fileList)
        console.log(file);
      },
    },
  };
</script>

<style scoped lang="scss">
  .app-container {
    background-color: #FFF;
  }
  .submit{
    position: absolute;
    bottom: 5%;
    width: 90%;
    left: 5%;
    p{
      text-align: center;
      margin-bottom: 0.2rem;
      span{
        color: #007E72;
      }
    }
  }
</style>
