jyy-smart-canteen-h5/pages/amendPassword.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
  <view class="password-page">
    <view class="title">找回密码</view>
    <view class="subtitle">输入手机号获取验证码设置新密码</view>

    <u--form labelPosition="top" :model="form" ref="uForm">
      <u-form-item label="手机号" prop="phone" leftIconStyle="font-size: 22px" labelWidth="80">
        <u--input
          v-model="form.phone"
          placeholder="请输入手机号"
          border="none" :maxlength="11"
          clearable
        ></u--input>
      </u-form-item>

      <u-form-item label="验证码" prop="code" leftIconStyle="font-size: 22px" labelWidth="80">
        <u-input
          v-model="form.code"
          placeholder="请输入验证码"
          border="none"
          clearable
        >
          <template slot="suffix">
            <span
              class="verify-code"
              :class="{ disabled: counting }"
              @click="getVerifyCode"
            >
              {{ counting ? `${counter}s后重新获取` : '获取验证码' }}
            </span>
          </template>
        </u-input>
      </u-form-item>
	  
	  <u-form-item label="新密码" prop="newPassWord" leftIconStyle="font-size: 22px" labelWidth="80">
	    <u--input
	      v-model="form.newPassWord"
	      placeholder="请输入新密码"
	      border="none" :maxlength="20"
	      clearable
	    ></u--input>
	  </u-form-item>
	  
	  <u-form-item label="确认密码" prop="confirmPassWord" leftIconStyle="font-size: 22px" labelWidth="80">
	    <u--input
	      v-model="form.confirmPassWord"
	      placeholder="请再次输入新密码"
	      border="none" :maxlength="20"
	      clearable
	    ></u--input>
	  </u-form-item>
	  
	  
	  
    </u--form>

    <view class="button-wrap">
      <u-button
        type="warning"
        text="完成"
        shape="circle"
        @click="handleResetPwd"
        :customStyle="{
          width: '100%',
          height: '90rpx',
          background: '#ff6b00',
          border: 'none'
        }"
      ></u-button>
    </view>
  </view>
</template>

<script>

import { getTextCode,resetForgetPwdApi } from '@/api/login';
import AES from '@/utils/aes';
export default {
  data() {
    return {
		fontValue:uni.getStorageSync('fontSize') || 8,
      form: {
        phone: '',
        code: '',
		newPassWord:'',
		confirmPassWord:''
      },
      counter: 60,
      counting: false
    }
  },
  methods: {
    getVerifyCode() {
      if (this.counting) return
      // 验证手机号
      if (!this.form.phone) {
        uni.$u.toast('请输入手机号')
        return
      }
	  const regex = /^1[3-9]\d{9}$/;
	  if(!regex.test(this.form.phone)){
		  uni.$u.toast('请输入正确手机号')
		return ;
	  } 
      this.counting = true
      this.counter = 60
      const timer = setInterval(() => {
        if (this.counter > 0) {
          this.counter--
        } else {
          this.counting = false
          clearInterval(timer)
        }
      }, 1000)
	  let param = {
		"username": this.form.phone,
		"verificationCodeType": "LOGIN"
	  }
	  getTextCode(param).then(res => {
	    if(res.code==200){
			 uni.$u.toast('验证码已发送')
		}
	  })
      // 发送验证码请求
      // uni.$u.toast('验证码已发送')
    },
	//重置密码
    handleResetPwd() {
		const regex = /^1[3-9]\d{9}$/;
		if(!regex.test(this.form.phone)){
			uni.$u.toast('请输入正确手机号')
			return ;
		} 
		if (!this.form.phone || !this.form.code || !this.form.newPassWord || !this.form.confirmPassWord) {
			uni.$u.toast('请填写完整信息')
			return
		}
		if(this.form.newPassWord!=this.form.confirmPassWord){
			uni.$u.toast('两次密码输入不一致！')
			return
		}
	  
		// 验证通过
		let param = {
	  		"mobile": this.form.phone,
	  		"code": this.form.code,
			"newPassword":AES.encrypt(this.form.newPassWord)
		}
		resetForgetPwdApi(param).then(res => {
			if(res.code==200){
				uni.$u.toast('密码重置成功！')
				uni.navigateTo({
				url: '/pages/login'
				})
			}
		})
    }
  }
}
</script>

<style lang="scss" scoped>
.password-page {
  padding: 40rpx;
  background-color: #ffffff;
  min-height: 100vh;

  .title {
    font-size: 40rpx;
    font-weight: 550;
    color: #333;
    margin-bottom: 20rpx;
  }

  .subtitle {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 60rpx;
  }

  .verify-code {
    color: #3c9cff;
    font-size: 28rpx;
    padding-left: 24rpx;

    &.disabled {
      color: #999;
    }
  }

  .button-wrap {
    margin-top: 80rpx;
  }
}

::v-deep .u-form-item {
  margin-bottom: 30rpx;

  &__body {
    padding: 24rpx 0;
    border-bottom: 1px solid #eee;
  }
}

::v-deep .u-input {
  &__content__prefix-icon {
    margin-right: 10rpx;
  }
}
</style>