<template>
    <div class="changePwd">
      <back  title="修改密码"></back>
      <div class="input">
        <img src="" alt=""><img src="../../../static/imgs/icon_required_red.svg" alt="">
        <label for="input_pwd">请输入密码：</label>
        <input type="password" id="input_pwd" v-model="password">
      </div>
      <div class="input_new">
        <img src="" alt=""><img src="../../../static/imgs/icon_required_red.svg" alt="">
        <label for="input_newpwd">再次输入密码：</label>
        <input type="password" id="input_newpwd" v-model="Repassword">
      </div>
      <ul class="clearfix">
        <li class="active fl" @click="save">确定</li>
        <li class="fr" @click="goback">取消</li>
      </ul>
    </div>
</template>

<script>
  import { Toast } from "mint-ui";
  import Back from "../common/Back.vue";
  import { getStore } from '@/utils/storage'
    export default {
      name: "ChangePwd",
      components: { Back },
      data() {
        return {
            password:"",
            Repassword:""
        }
      },
      mounted(){
      },
      methods:{
        goback(){
          this.$router.go(-1);
        },
        save(){
          if(this.password!=""){
              if(this.checkPwd(this.password)){
                if(this.Repassword!=''){
                  if(this.Repassword==this.password){
                    this.getData("/Member/createPWD", { token:getStore("token"), member_pwd:this.Repassword }).then(
                      data => {
                        if(data.code){
                          Toast(data.msg);
                          this.$router.push('/user')
                        }
                      },
                      err => console.log("err")
                    );
                  }else{
                    Toast("两次输入的密码不一致")
                  }
                }else{
                  Toast("请输入确认密码")
                }
              }else{
                Toast("密码格式错误")
              }

          }else{
            Toast("请输入密码")
          }
        }
      }
    }
</script>

<style lang="scss" scoped>
.changePwd{
  padding-top: 5rem;
  .input {
    display: flex;
    justify-content: center;
    align-content: center;
    padding-top:  1.4rem;
    img{
      flex:0.1;
      width: 0.4rem;
      vertical-align: middle;
    }
    label{
      flex:1.5;
      font-family: PingFangSC-Light;
      font-size: 1.4rem;
      color: #4A4A4A;
      line-height: 3.0rem;
      letter-spacing: 0.35rem;
      text-align: left;
    }
    input{
      flex:3;
      height: 3.0rem;
      border: 0.05rem solid #E4E4E4;
      margin-left: -1rem;
      margin-right: 2rem;
    }
  }
  .input_new{
    display: flex;
    justify-content: center;
    align-content: center;
    padding-top:  1.4rem;
    img{
      flex:0.1;
      width: 0.4rem;
      vertical-align: middle;
    }
    label{
      text-align: left;
      flex:1.5;
      font-family: PingFangSC-Light;
      font-size: 1.4rem;
      color: #4A4A4A;
      line-height: 3.0rem;
      letter-spacing: 0.08rem;
    }
    input{
      flex:3;
      height: 3.0rem;
      border: 0.05rem solid #E4E4E4;
      margin-left: -1rem;
      margin-right: 2rem;
    }
  }
  ul{
    margin: 20rem 3.4rem 0;
    li{
      width:45%;
      height:3rem;
      border:.05rem solid #0083FF;
      border-radius: .02rem;
      color: #0083FF;
      text-align: center;
      line-height: 3rem;
      font-size: 1.5rem;
      letter-spacing: .15rem;
    }
    li.active{
      background: #0083FF;
      color: #fff;
    }
  }
}
</style>
