Pre Merge pull request !639 from 郭晓阳/N/A

src/views/Login/components/ForgetPassword.vue

@@ -0,0 +1,111 @@
+<template>
+  <el-form ref="formRef" :model="password" :rules="rules" label-width="auto" v-show="getShow" size="large">
+      <el-form-item :label="t('profile.password.newPassword')" prop="password">
+        <InputPassword v-model="password.password" strength />
+      </el-form-item>
+      <el-form-item :label="t('profile.password.confirmPassword')" prop="confirmPassword">
+        <InputPassword v-model="password.confirmPassword" strength />
+      </el-form-item>
+      <el-form-item label="手机号" prop="mobile">
+        <el-input v-model="password.mobile" placeholder="输入手机号码" style="max-width: 280px;"/>
+      </el-form-item>
+      <el-form-item label="验证码" prop="code">
+        <el-input v-model="password.code" placeholder="输入验证码" style="max-width: 280px;">
+          <template #append>
+            <el-button @click="getCode(formRef)">获取验证码</el-button>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item>
+        <XButton :title="t('common.save')" type="primary" @click="submit(formRef)" />
+        <XButton :title="t('common.reset')" type="danger" @click="reset(formRef)" />
+      </el-form-item>
+  </el-form>
+</template>
+<script lang="ts" setup>
+import type { FormInstance, FormRules } from 'element-plus'
+import { useUserStore } from '@/store/modules/user'
+import { InputPassword } from '@/components/InputPassword'
+import { updateResetPassword,userGetCode } from '@/api/system/user/profile'
+import { LoginStateEnum,useLoginState } from './useLogin';
+
+defineOptions({ name: 'ForgetPwd' })
+
+const { t } = useI18n()
+const { getLoginState } = useLoginState()
+const userStore = useUserStore()
+const message = useMessage()
+const formRef = ref<FormInstance>()
+const password = reactive({
+  mobile:undefined,
+  code: undefined,
+  id: undefined,
+  password: undefined,
+  confirmPassword:undefined
+})
+const codeParams=reactive({
+  mobile:undefined,
+  scene:4,
+
+})
+const getShow = computed(() => unref(getLoginState) === LoginStateEnum.FORGET)
+// 表单校验
+const equalToPassword = (_rule, value, callback) => {
+  if (password.password !== value) {
+    callback(new Error(t('profile.password.diffPwd')))
+  } else {
+    callback()
+  }
+}
+const pattern = {
+  password: /^\d{4,12}$/
+}
+const rules = reactive<FormRules>({
+  password: [
+    { message: '数字', trigger: 'change', pattern: pattern.password },
+    { required: true, message: '请输入密码', trigger: 'blur' }
+  ],
+  mobile: [
+    { message: '数字', trigger: 'change', pattern: pattern.password },
+    { required: true, message: '请输入手机号', trigger: 'blur' }
+  ],
+  code: [
+    { message: '数字', trigger: 'change', pattern: pattern.password },
+    { required: true, message: '请输入验证码', trigger: 'blur' }
+  ],
+  confirmPassword: [
+    { required: true, message: t('profile.password.cfPwdMsg'), trigger: 'blur' },
+    { required: true, validator: equalToPassword, trigger: 'blur' }
+  ]
+})
+
+const submit = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate(async (valid) => {
+    if (valid) {
+      password.id=userStore.getUser.id as any
+      await updateResetPassword(password)
+      message.success(t('common.submitsuccessful'))
+      await userStore.setUserInfoAction()
+      window.location.reload()
+    }
+  })
+}
+//  获取短信验证码
+const getCode=async(formEl)=>{
+  try {
+    await formEl.validateField('mobile')
+    if(!password.mobile) return message.warning('请填写手机号')
+    codeParams.mobile=password.mobile
+    await userGetCode(codeParams)
+    message.success('发送'+t('common.success'))
+  } catch (error) {
+    return error
+  }
+}
+
+const reset = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+}
+</script>