|
|
@@ -0,0 +1,149 @@
|
|
|
+<template>
|
|
|
+ <el-form ref="formRef" :model="formData" :rules="formRules" @submit="formSubmit">
|
|
|
+ <el-form-item prop="mobile">
|
|
|
+ <el-input name="mobile" placeholder="请输入手机号码" type="tel" v-model="formData.mobile" :rules="formRules.mobile"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="vcode">
|
|
|
+ <el-input name="vcode" placeholder="请输入短信验证码" type="digit" v-model="formData.vcode" :rules="formRules.vcode">
|
|
|
+ </el-input>
|
|
|
+ <el-button size="small" type="primary" :disabled="isCountdown" @click="sendVerifyCode">
|
|
|
+ <span v-if="isCountdown">重新发送({{ currentTime.seconds }})</span>
|
|
|
+ <span v-else>获取验证码</span>
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="password">
|
|
|
+ <el-input name="password" placeholder="请输入新密码" type="password" v-model="formData.password" :rules="formRules.password"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="confirmpassword">
|
|
|
+ <el-input name="confirmpassword" placeholder="请输入确认密码" type="confirmpassword" v-model="formData.confirmpassword" :rules="formRules.confirmpassword"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button class="submit" type="primary" @click="formSubmit">重置密码</el-button>
|
|
|
+ <el-button class="cancel" type="primary" plain>取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { reactive, ref, computed } from 'vue'
|
|
|
+import { useCountDown } from '@vant/use'
|
|
|
+import { getEncryptMobile } from '@/filters'
|
|
|
+import { validateRules } from '@/constants/regex'
|
|
|
+import { queryLoginId } from '@/services/api/account'
|
|
|
+import { resetPassword, sendResetVerifyCode } from '@/services/api/common'
|
|
|
+import cryptojs from 'crypto-js'
|
|
|
+import { ElMessage, FormInstance, FormRules } from 'element-plus'
|
|
|
+
|
|
|
+const formRef = ref<FormInstance>()
|
|
|
+const isCountdown = ref(false) // 是否正在倒计时
|
|
|
+
|
|
|
+// 倒计时函数
|
|
|
+const countdown = useCountDown({
|
|
|
+ time: 60 * 1000,
|
|
|
+ onFinish: () => {
|
|
|
+ countdown.reset()
|
|
|
+ isCountdown.value = false
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+// 倒计时剩余时间
|
|
|
+const currentTime = computed(() => countdown.current.value)
|
|
|
+
|
|
|
+// 表单数据
|
|
|
+const formData = reactive<Model.ResetPasswordReq & { confirmpassword: string }>({
|
|
|
+ logincode: '',
|
|
|
+ mobile: '',
|
|
|
+ vcode: '',
|
|
|
+ password: '',
|
|
|
+ confirmpassword: '',
|
|
|
+})
|
|
|
+
|
|
|
+// 表单验证规则
|
|
|
+const formRules: FormRules = {
|
|
|
+ mobile: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入手机号码',
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ if (validateRules.phone.validate(value)) {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ callback(new Error(validateRules.phone.message))
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ password: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入新密码',
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ if (validateRules.password.validate(value)) {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ callback(new Error(validateRules.phone.message))
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ vcode: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入短信验证码',
|
|
|
+ }],
|
|
|
+ confirmpassword: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入确认密码',
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ if (formData.password === value) {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ callback(new Error('新密码和确认密码不一致'))
|
|
|
+ }
|
|
|
+ }],
|
|
|
+}
|
|
|
+
|
|
|
+// 发送手机验证码
|
|
|
+const sendVerifyCode = () => {
|
|
|
+ // formRef.value?.validate('mobile').then(() => {
|
|
|
+ sendResetVerifyCode({
|
|
|
+ data: {
|
|
|
+ mobile: getEncryptMobile(formData.mobile),
|
|
|
+ businessType: 1
|
|
|
+ }
|
|
|
+ }).then(() => {
|
|
|
+ isCountdown.value = true
|
|
|
+ countdown.start()
|
|
|
+ }).catch(() => {
|
|
|
+ ElMessage.error('发送失败')
|
|
|
+ })
|
|
|
+ // })
|
|
|
+}
|
|
|
+
|
|
|
+const formSubmit = () => {
|
|
|
+ // fullloading((hideLoading) => {
|
|
|
+ queryLoginId({
|
|
|
+ data: {
|
|
|
+ username: formData.mobile
|
|
|
+ }
|
|
|
+ }).then((res) => {
|
|
|
+ const { mobile, password, vcode } = formData
|
|
|
+ const logincode = res.data
|
|
|
+ const encryptedData = cryptojs.SHA256(logincode + password).toString()
|
|
|
+ const encryptedHex = cryptojs.enc.Hex.parse(encryptedData).toString().toLocaleLowerCase()
|
|
|
+
|
|
|
+ resetPassword({
|
|
|
+ data: {
|
|
|
+ logincode,
|
|
|
+ mobile: getEncryptMobile(mobile),
|
|
|
+ password: encryptedHex,
|
|
|
+ vcode,
|
|
|
+ }
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code === '0') {
|
|
|
+ ElMessage.success('密码重置成功，请重新登录。')
|
|
|
+ } else {
|
|
|
+ ElMessage.error(res.message)
|
|
|
+ }
|
|
|
+ }).catch((err) => {
|
|
|
+ ElMessage.error(err)
|
|
|
+ })
|
|
|
+ }).catch((err) => {
|
|
|
+ ElMessage.error(err)
|
|
|
+ })
|
|
|
+ // })
|
|
|
+}
|
|
|
+</script>
|
