uniIM/pages/mine/zhpassword.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
  <view>
    <cu-custom bgImage="/static/bg.png" :isBack="true">
      <template v-slot:content>
        <text class="text-black">重置密码</text>
      </template>
    </cu-custom>
    <view class="padding">
      <uni-forms ref="pwdFormX" :model="pwdForm" :label-width="130" :rules="rules">
        <uni-forms-item class="text-bold text-black" label="用户名" name="username">
          <uni-easyinput type="username" v-model="pwdForm.username"/>
        </uni-forms-item>
        <uni-forms-item class="text-bold text-black" label="新密码" name="password">
          <uni-easyinput type="password" v-model="pwdForm.password"/>
        </uni-forms-item>
        <uni-forms-item class="text-bold text-black" label="确认密码" name="confirmPassword">
          <uni-easyinput type="password" v-model="pwdForm.confirmPassword"/>
        </uni-forms-item>
		<uni-forms-item class="text-bold text-black" label="验证码" name="code">
		  <uni-easyinput type="text" v-model="pwdForm.code" placeholder="请输入验证码" :clearable="false"/>
		  <view class="yzmbt" @click="getEmailcodeSele">
			<text>{{huoquyzm}}</text>
		  </view>
		  <view class="contentInRowL" style="margin-top: 20rpx;">
			<text class="text-grey">验证码将发至注册时填写的邮箱</text>
		  </view>
		</uni-forms-item>
        <view class="margin-top text-center">
          <button class="cu-btn bg-zblue border lg margin-top" style="width: 100%;" @tap="submit">保存</button>
        </view>
      </uni-forms>
    </view>

  </view>
</template>

<script setup lang="ts">
import CuCustom from '@/colorui/components/cu-custom.vue'
import {ref} from "vue";
import UniForms from "@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue";
import UniFormsItem from "@/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";
import UniEasyinput from "@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
import Auth from "@/api/Auth";
import {resetPassword,getcodeByUsername} from "@/api/Login";
import MessageUtils from "@/utils/MessageUtils";
const fontValue=ref(Auth.getfontSize());

const pwdFormX = ref();

const huoquyzm=ref('获取验证码');
const timeCall=ref(0);
const timer=ref();

const pwdForm = ref({
  username: '',
  password: '',
  confirmPassword: '',
  code:''
})

const equalToPassword = (rule:any, value:any,data:any, callback:(err?:string)=>{}) => {
  if (pwdForm.value.password !== value) {
    callback('两次输入的密码不一致')
  } else {
   return true
  }
}
const rules = {
  username: {
    rules: [
      { required: true, errorMessage: '用户名不能为空', trigger: 'blur' }
    ]
  },
  password: {
    rules: [
      { required: true, errorMessage: '新密码不能为空', trigger: 'blur' },
      {
        minLength: 5,
        maxLength: 10,
        errorMessage: '长度在 {minLength} 到 {maxLength} 个字符',
      }
    ]
  },
  confirmPassword: {
    rules: [
      { required: true, errorMessage: '确认密码不能为空', trigger: 'blur' },
      { required: true, validateFunction: equalToPassword, trigger: 'blur' }
    ]
  }
}


//邮箱验证码
const getEmailcodeSele = () =>{
	if(timeCall.value==0){
		getEmailcodeact();
	}
	else{
		return;
	}
}

const getEmailcodeact = () =>{
	console.log('getEmailcode',pwdForm.value.username);
	getcodeByUsername(pwdForm.value.username).then((res : any) => {
	  console.log('getEmailcode',res);
	  if(res.code==200){
		  MessageUtils.success(res.msg);
		  timeCall.value=60;
		  timer.value = setInterval(() => {
		  	timeCall.value=timeCall.value-1;
		  	if(timeCall.value==0){
		  		clearInterval(timer.value);
		  		huoquyzm.value='获取验证码';
		  	}
		  	else{
				huoquyzm.value='重新获取'+'('+timeCall.value+')';
		  	}
		  }, 1000);
	  }
	  else{
		  MessageUtils.success(res.msg);
	  }
	});
}

/** 提交按钮 */
function submit() {
  pwdFormX.value.validate().then(() => {
    resetPassword(pwdForm.value)
        .then(() => {
          MessageUtils.success('重置成功');
		  Auth.logout();
          // uni.reLaunch({
          //   url: "/pages/login/login"
          // })
        })
        .catch((err) => {
          MessageUtils.error(err.msg);
        })
  })
}
</script>

<style scoped>

.yzmbt{
	margin-top: 16rpx;
	color: white;
	font-size: 26upx;
	width: 170rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	margin-left: auto;
	margin-right: 10rpx;
	border-radius: 2rpx;
	background-color:#60BA63;
}
</style>