rongzidanbao-ui/pages/mine/pwd/forgetpwd.vue

<template>
  <view class="pwd-retrieve-container pwd">
    <uni-forms ref="form" :value="user" >
      <uni-forms-item name="phonenumber" label="手机号码">
        <uni-easyinput :inputBorder="false" type="number"  v-model="phonenumber" placeholder="请输入您的手机号码" />
      </uni-forms-item>
      <uni-forms-item name="code" label="验证码">
        <uni-easyinput :inputBorder="false" v-model="code" placeholder="请输入验证码" />
		<view class="line flex0"></view>
		<view v-if="timefalg" class="code act">{{time}}秒</view>
		<view v-else @click="getCode" class="code">发送验证码</view>
	  </uni-forms-item>
      <view class="rbtn" @click="submit">下一步</view>
    </uni-forms>
  </view>
</template>

<script>
  import { getappForgetPW } from "@/api/system/user"

  export default {
    data() {
      return {
		timefalg:false,
		time:'',
		phonenumber:'',
		code:'',
		newcode:'',//验证码
		user:{},
      }
    },
    onReady() {
    },
    methods: {
		getCode(){
			var that=this;
			if (!this.phonenumber ) {
				that.$toast("请输入手机号")
				return
			}
			let regphone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
			if (this.phonenumber && !regphone.test(this.phonenumber)) {
				that.$toast("请输入正确的手机号")
				return
			}
			getappForgetPW(this.phonenumber).then(res=>{
				if (res.code == 200) {
					// 发送验证码
					that.$toast("发送成功")
					that.newcode=res.msg
					that.time=60;
					that.timefalg=true;
					that.setTimein()
				} else {
					that.$toast(res.msg)
				}
				// 判断是不是对等的
				// that.getCodesend(that.phonenumber)
			})
		},
		// 验证码倒计时
		setTimein(){
			var that=this;
			clearInterval(that.timer)
			that.timer=setInterval(()=>{
				if(that.time<=1){
					that.timefalg=false;
					that.time=60;
					clearInterval(that.timer)
				}
				that.time=that.time-1;
			},1000)
		},
      submit() {
		var that = this;
		if (!this.phonenumber ) {
			that.$toast("请输入手机号")
			return
		}
		if (!this.code ) {
			that.$toast("请输入验证码")
			return
		}
		if(this.code!=this.newcode){
			that.$toast("验证码错误，请重新输入")
			return
		}
		let regphone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
		if (this.phonenumber && !regphone.test(this.phonenumber)) {
			that.$toast("请输入正确的手机号")
			return
		}
		this.$tab.navigateTo(`/pages/mine/pwd/resetpwd?phone=`+this.phonenumber+'&code='+this.code)
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #f5f5f5;
  }
  .line{width: 2rpx;height: 24rpx;background: #CDCDCD;margin: 0 24rpx;}
	.code{font-size: 30rpx;color: $com-cd3;
		&.act{color: #666666;}
	}
  .pwd-retrieve-container {
    padding: 10rpx 36rpx;
  }
  .pwd .rbtn{width: 100%;height: 98rpx;background: $com-cd3;border-radius: 49rpx;text-align: center;line-height: 98rpx;font-size: 32rpx;font-weight: bold;color: #FFFEFE;margin-top: 68rpx;}
  .pwd /deep/ .uni-forms-item{height: 126rpx;background: #FFFFFF;border-radius: 18rpx;margin-top: 30rpx;padding: 0 40rpx;box-sizing: border-box;display: flex;align-items: center;margin-bottom: 0;}
  .pwd /deep/ .uni-forms-item__label{font-size: 32rpx;font-weight: 500;
color: #161616;flex: 0 0 auto;width: auto !important;}
  .pwd /deep/ .uni-easyinput{flex: 1;text-align: right;font-size: 32rpx;color: #161616;}
  .pwd /deep/ .uni-forms-item__content{display: flex;align-items: center;flex-direction: row;}
  .pwd /deep/ .uni-easyinput__placeholder-class{font-size: 30rpx;}
  .pwd /deep/ .uni-easyinput__content-input{font-size: 30rpx;}
   .pwd /deep/ .uni-forms-item__error{margin-top:20rpx;left: auto;right: 0;}
  

</style>