|
|
@@ -1,54 +1,46 @@
|
|
|
<template>
|
|
|
- <el-form ref="formRef" :model="formData" :rules="formRules" @submit="formSubmit">
|
|
|
+ <el-form ref="formRef" :model="formData" :rules="formRules">
|
|
|
<el-form-item prop="mobile">
|
|
|
- <el-input name="mobile" placeholder="请输入手机号码" type="tel" v-model="formData.mobile" :rules="formRules.mobile"></el-input>
|
|
|
+ <el-input placeholder="请输入手机号码" type="number" v-model="formData.mobile" :rules="formRules.mobile" />
|
|
|
</el-form-item>
|
|
|
<el-form-item prop="vcode">
|
|
|
- <el-input name="vcode" placeholder="请输入短信验证码" type="digit" v-model="formData.vcode" :rules="formRules.vcode">
|
|
|
+ <el-input placeholder="请输入短信验证码" type="number" v-model="formData.vcode" :rules="formRules.vcode">
|
|
|
+ <template #append>
|
|
|
+ <el-button size="small" type="primary" :disabled="isCountdown" @click="sendVerifyCode">
|
|
|
+ <span v-if="isCountdown">重新发送({{ seconds }})</span>
|
|
|
+ <span v-else>获取验证码</span>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
</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-input placeholder="请输入新密码" type="password" v-model="formData.password" :rules="formRules.password" />
|
|
|
</el-form-item>
|
|
|
<el-form-item prop="confirmpassword">
|
|
|
- <el-input name="confirmpassword" placeholder="请输入确认密码" type="password" v-model="formData.confirmpassword" :rules="formRules.confirmpassword"></el-input>
|
|
|
+ <el-input placeholder="请输入确认密码" type="password" v-model="formData.confirmpassword"
|
|
|
+ :rules="formRules.confirmpassword" />
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-button class="submit" type="primary" @click="formSubmit">重置密码</el-button>
|
|
|
- <el-button class="cancel" type="primary" @click="$emit('close')" plain>取消</el-button>
|
|
|
+ <el-button type="primary" @click="formSubmit">重置密码</el-button>
|
|
|
+ <el-button @click="$emit('close')" style="margin-left: auto;">返回</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { reactive, ref, computed } from 'vue'
|
|
|
-import { useCountDown } from '@vant/use'
|
|
|
+import { reactive, ref } from 'vue'
|
|
|
+import { ElMessage, FormInstance, FormRules } from 'element-plus'
|
|
|
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'
|
|
|
+import service from '@/services'
|
|
|
|
|
|
const formRef = ref<FormInstance>()
|
|
|
+const seconds = ref(60) //倒计时剩余时间
|
|
|
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: '',
|
|
|
@@ -62,92 +54,100 @@ const formData = reactive<Model.ResetPasswordReq & { confirmpassword: string }>(
|
|
|
const formRules: FormRules = {
|
|
|
mobile: [{
|
|
|
required: true,
|
|
|
- message: '请输入手机号码',
|
|
|
validator: (rule, value, callback) => {
|
|
|
- if (validateRules.phone.validate(value)) {
|
|
|
+ if (value && validateRules.phone.validate(value)) {
|
|
|
callback()
|
|
|
}
|
|
|
- callback(new Error(validateRules.phone.message))
|
|
|
+ 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))
|
|
|
+ callback(new Error('密码必须是任意两种字符组合，长度最少6位'))
|
|
|
}
|
|
|
}],
|
|
|
vcode: [{
|
|
|
required: true,
|
|
|
message: '请输入短信验证码',
|
|
|
- validator: (rule, value, callback) => {
|
|
|
- if (formData.mobile != '') {
|
|
|
- callback()
|
|
|
- }
|
|
|
- callback(new Error('请输入手机号码'))
|
|
|
- }
|
|
|
}],
|
|
|
confirmpassword: [{
|
|
|
required: true,
|
|
|
- message: '请输入确认密码',
|
|
|
validator: (rule, value, callback) => {
|
|
|
if (formData.password === value) {
|
|
|
callback()
|
|
|
}
|
|
|
- callback(new Error('新密码和确认密码不一致'))
|
|
|
+ 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('发送失败')
|
|
|
- })
|
|
|
- // })
|
|
|
+ formRef.value?.validateField('mobile', (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ service.onReady().then(() => {
|
|
|
+ sendResetVerifyCode({
|
|
|
+ data: {
|
|
|
+ mobile: getEncryptMobile(formData.mobile),
|
|
|
+ businessType: 1
|
|
|
+ }
|
|
|
+ }).then(() => {
|
|
|
+ isCountdown.value = true
|
|
|
+ // 开始倒计时
|
|
|
+ const countDown = window.setInterval(() => {
|
|
|
+ seconds.value--
|
|
|
+ if (seconds.value <= 0) {
|
|
|
+ clearInterval(countDown)
|
|
|
+ isCountdown.value = false
|
|
|
+ }
|
|
|
+ }, 1000)
|
|
|
+ }).catch(() => {
|
|
|
+ ElMessage.error('发送失败')
|
|
|
+ })
|
|
|
+ }).catch((err) => {
|
|
|
+ ElMessage.error(err)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
const formSubmit = () => {
|
|
|
- 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()
|
|
|
+ formRef.value?.validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ 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)
|
|
|
+ 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>
|
