smart-admin/rc-busness/pages/userlogin/userpassword.vue

// <!--  -->
<template>

    <div class="container">
      <!-- <Myheader/> -->

        <p class="header">手机验证</p>
         <div class="content">
             <van-field
                 v-model="tel"
                 placeholder="请输入手机号"
                 :error-message="usertel"
                  clearable
                  
             />
                 <van-field
                 v-model="sms"
                 center
                 clearable                
                 placeholder="请输入验证码"
                 :error-message="test"
              >
             <van-button :disabled="flag" slot="button" size="small"  @click="sendCode" class="rc-use">{{ buttonmsg }}</van-button>
            
             </van-field>

                 <p class="header">新密码</p>
             <van-field
                 v-model="password"
                 type="password"
                 placeholder="请输入新密码"
                 :error-message="pass"
                
                 clearable
             />

                    <van-field
                 v-model="password"
                 type="password"
                 placeholder="请再次输入新密码"
                 :error-message="pass"
                 clearable
             />
           <p class="header">密码需要满足以下条件</p>
                <!-- <input type="radio" id="male" value="Male" v-model="gender"> 至少8个以上字符
               <input type="radio" id="female" value="Female" v-model="gender"> 至少含有字母和数字，不能有空格 -->
             <div class="rc-user">
              <van-button type="primary" :loading="loading" loading-text="登录..." size="large" :disabled="zhud"  class="userbutton" style="border: 2px solid #E1001A;color:#E1001A;background:none;width:155px;height:48px" >取消</van-button>

                <van-button type="primary" :loading="loading" loading-text="登录..." size="large" :disabled="zhud" @click="register()" class="userbutton"  style="width: 155px;
height: 48px;
background: #E2001A;
opacity: 1;
border-radius: 30px;" >确定</van-button>
              <!-- <van-divider @click="toLogin">注册账户</van-divider> -->
              </div>

           
         </div>
      


    </div>
</template>


<script>
import {useredit} from '../../ajax/getData' 
import Myheader from '~/components/header.vue' //引用头部公共组件
export default {
  data () {
    return {
      phone:'',
      layerMSg:'手机格式不对',
       tel:'',
            password:'',
            sms:'',
            buttonmsg:'获取验证码',
            flag:false,
            adminCode:'',
            zhud:false,
            loading:false,
            usertitle:true,
            gender: ''

    };
  },
  components: {
    // Myheader,
  },
   computed: {
        usertel () {
            if (this.tel === ""){
                return ''
            }else if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel)){
                return '手机号格式错误'
            }else {
                return ''
            }
        },
        pass () {
            if (this.password === ""){
                return ''
            }else if(this.password.length<6){
                return '密码不可小于6位'
            }else {
                return ''
            }
        },
        test () {
            if (this.sms === ""){
                return ''
            }else if(this.sms.length !== 5){
                return '验证码格式错误'
            }else {
                return ''
            }
        }
    },

  components: {
   
  },
  mounted(){
  },

  methods: {
     //注册账户
        sendCode () {
            let time = 4
            let timer
            timer = setInterval(()=>{                           
                time --
                if(time === 0){
                    clearInterval(timer)
                    this.flag=false
                    this.buttonmsg = '点击发送验证码'
                    return
                }
                this.flag = true  
                this.buttonmsg = time + '秒后重新发送' 
                              
            },1000)
            this.getCode()
        },
        getCode () {
            if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel) || this.tel===""){
                this.$toast.show('Keeping it simple')('手机号码输入有误')
            }else{
                axios.get('https://www.daxunxun.com/users/sendCode?tel='+this.tel).then(res=>{
                    if(res.data === 1){
                        this.$toast.show('Keeping it simple')('用户名已注册，请更改')
                    }else if(res.data === 0){
                        this.$toast.show('Keeping it simple')('获取验证码失败')
                    }else{
                        this.adminCode = res.data.code
                        console.log(this.adminCode)
                    }
                })
            }
        },
       async register () {

            if (this.tel === '' || this.usertel === '手机号码格式错误') {

              this.$toast.show('手机号码输入有误')
                return
            }
            if (this.password === '' || this.pass === '密码格式错误，最少为6位') {
                this.$toast.show('密码输入有误')
                return
            }
            if (this.sms === '' || this.sms !== this.adminCode) {
                  this.$toast.show('验证码输入有误')
                return
            }
              let data=await userchange(this.tel);
              console.log(data);
        },

        // reallR () {
        //     this.zhud=true
        //     this.loading=true
        //     axios.post('https://www.daxunxun.com/users/register', {
        //     username: this.tel,
        //     password: this.password
        // }).then(res=>{
        //     this.zhud=false
        //     this.loading=false
        //     if (res.data === 2) {
        //         Toast('用户名已注册，请直接登录')
        //     } else if (res.data === 0) {
        //         Toast('注册失败')
        //     } else {
        //     Toast('注册成功')
        //     }
        // })
        // }
     

  }
}

</script>
<style scoped>
i{
    list-style: none;
     font-style: normal;
}
.rc-titel{
    list-style: none;
   font-style: normal;
}
rc-header{
    width: 100%;
}
.rc-use{
  width: 94px;
height: 30px;
opacity: 1;
border-radius: 30px;
outline: none;
border: none;
border: 2px solid #E1001A;
color: #E1001A;
font-size: 14px;
}
.rc-user{
  width: 100%;
  display: flex;
  align-items: center;
}
.userbutton{
 width: 335px;
height: 48px;
background: #E2001A;
opacity: 1;
border-radius: 30px;
outline: none;
border: none;
margin: 0 auto;
}
van-button{
  width: 335px;
height: 48px;
background: #E2001A;
opacity: 1;
border-radius: 30px;
}
.header{
  font-size: 22px;
color: #333333;
text-align: left;
padding: 10px 16px;
}
input{
  border: none;
  outline: none;
}
button{
  outline: none;
  border: none;
  list-style: none;
  background: none;
}
.rc-center{
  font-size: 30px;
  color: #333333;
  text-align: center;
}
.rc-center input{
  color: #999999;
  font-size: 14px;
}
.userlogin{
  width: 92%;
  margin: 0 auto;
}



</style>