<template>
  <div>
    <yd-popup v-model="rgShow" position="center" width="90%margin:0;">
      <div class="reg-box">
        <div class="reg-top row allAlignment item-center">
          <span>修改支付密码</span>
          <img :src="url1" alt @click="closeRg()">
        </div>
        <div class="reg-mian">
          <div>
            <span>原密码</span>
            <br>
            <input
              type="password"
              maxlength="15"
              v-model="password"
              onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
              @blur="pwd()"
              placeholder="请输入你的原密码"
            >
            <br>
            <i :class="pwdInfo?'infoRed':''">*使用6-15位数字或字母，不能使用特殊字符</i>
          </div>
          <div>
            <span>新密码</span>
            <br>
            <input
              type="password"
              v-model="again_password"
              maxlength="15"
              onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"
              placeholder="请输入你的新密码"
            >
            <br>
            <i :class="suerPwdInfo?'infoRed':''">*使用6-15位数字或字母，不能使用特殊字符</i>
          </div>
        </div>

        <div class="row vertical-center">
          <yd-button @click.native="reg()">修改密码</yd-button>
        </div>
      </div>
    </yd-popup>
  </div>
</template>

<script>
import "@/css/index.css";
export default {
  name: "register",
  data() {
    return {
      pwdInfo: false, //密码提醒
      suerPwdInfo: false, //确认密码
      userInfo: false, //用户信息提醒
      password: "",
      again_password: "",
      rgShow:true,//this.$store.state.rgShow,
      url1: require("@/assets/st-imges/guanbi.png"),
      docmHeight: '0',  //默认屏幕高度
      showHeight:  '0',  //实时屏幕高度
      hidshow:true,  //显示或者隐藏footer,
      isResize:false, //默认屏幕高度是否已获取
    };
  },
  methods: {
    closeRg(){
      	this.$store.dispatch('GETRGSHOW', false);
    },
    reg() {
            if (
        this.password != "" &&
        this.again_password != ""
      ) {
        this.$http.post(this.$ports.login.ChangePayPassword,{oldPassword:this.password,newPassword:this.again_password,token:localStorage.getItem('token')}).then(res =>{
            console.log(res)
             if(res.data){
                 this.$dialog.alert({mes:res.data.msg});
                (res.data)
                 if(res.data.status!=1){
                    this.password='';
                    this.again_password='';
                 }else{
                     this.password='';
                     this.again_password='';
                     this.$router.push('/')
                 }
                
             }
        })
      }else{
         this.$dialog.alert({mes: '请完善您的信息！' });
      }
    },
    pwd() {
      if (/^[a-zA-Z0-9]{6,15}$/.test(this.password)) {
        this.pwdInfo = false;
      }
      else {
        this.password = "";
        this.pwdInfo = true;
      }
    },
  },
  computed:{
   Isshow:function(){
     
        this.$store.dispatch('GETRGSHOW',this.rgShow)
			return {
				isshow_code:this.$store.state.rgShow
			}
		},
  },
  watch:{
    Isshow(obj){
      this.rgShow=obj.isshow_code
    },
    isshow:{
        istrue(val){
         
        }
    }
  },
  mounted(){
 
  }
};
</script>
<style scoped>
.reg-box {
  width: 6.75rem;
  /* height: 8.26rem; */
  background: #f8f8f8;
  border-radius: 0.52rem;
  padding: 0 0.54rem;
}
.reg-top {
  font-size: 0.32rem;
  padding-top: 0.58rem;
  padding-bottom: 0.6rem;
  color: #f76649;
}
.reg-top img {
  width: 0.26rem;
  height: 0.26rem;
}
.reg-mian {
  /* height: 5.46rem; */
}
.reg-mian div {
  padding-bottom: 0.27rem;
}
.reg-mian span {
  font-size: 0.28rem;
}
.reg-mian i {
  font-size: 0.22rem;
  color: #aaaaaa;
}
.reg-mian input {
  width: 90%;
  height: 0.46rem;
  border: none;
  outline: none;
  border-bottom: 1px solid #aaaaaa;
  margin: 0.14rem auto 0.1rem;
  font-size: 0.24rem;
}
button {
  width: 1.9rem;
  height: 0.7rem;
  border-radius: 0.35rem;
  border: none;
  background: #aaaaaa;
  color: #f8f8f8;
  margin-bottom: 0.5rem;
}
input {
  font-size: 0.2rem;
}
.reg-mian .infoRed {
  color: #f76649;
}
div.row .btnCor {
  background: #f76649;
}
.yd-btn-primary:not(.yd-btn-loading) {
  background: #aaaaaa;
}
div /deep/ .yd-popup-center {
  margin: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  position: absolute;
}
</style>
