|
|
|
@ -1,6 +1,13 @@ |
|
|
|
<template> |
|
|
|
<div v-loading="loading" class="box"> |
|
|
|
<el-form ref="formSmsLogin" :model="loginData" :rules="rules" label-width="130px" label-position="top" size="large"> |
|
|
|
<el-form |
|
|
|
ref="formSmsLogin" |
|
|
|
:model="loginData" |
|
|
|
:rules="rules" |
|
|
|
label-width="130px" |
|
|
|
label-position="top" |
|
|
|
size="large" |
|
|
|
> |
|
|
|
<div class="title">{{ t('ts.忘记密码') }}</div> |
|
|
|
<el-row type="flex" justify="center" align="middle"> |
|
|
|
<el-col> |
|
|
|
@ -16,70 +23,82 @@ |
|
|
|
</el-row> |
|
|
|
</el-form> |
|
|
|
<div class="dialog-footer"> |
|
|
|
<el-button type="primary" @click="submitForm" style="width: 100%;height: 40px;line-height: 40px;">{{t('ts.确 定')}}</el-button> |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
@click="submitForm" |
|
|
|
style="width: 100%; height: 40px; line-height: 40px" |
|
|
|
>{{ t('ts.确 定') }}</el-button |
|
|
|
> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script lang="ts" setup name="forgetPassword"> |
|
|
|
import type { RouteLocationNormalizedLoaded } from 'vue-router' |
|
|
|
import { useIcon } from '@/hooks/web/useIcon' |
|
|
|
import { setTenantId, setToken } from '@/utils/auth' |
|
|
|
import { usePermissionStore } from '@/store/modules/permission' |
|
|
|
import { getTenantIdByName, sendSmsCode, smsLogin } from '@/api/login' |
|
|
|
import * as UserApi from '@/api/system/user' |
|
|
|
import router from '@/router' |
|
|
|
import { useIcon } from '@/hooks/web/useIcon' |
|
|
|
import { setTenantId, setToken } from '@/utils/auth' |
|
|
|
import { usePermissionStore } from '@/store/modules/permission' |
|
|
|
import { getTenantIdByName, sendSmsCode, smsLogin } from '@/api/login' |
|
|
|
import * as UserApi from '@/api/system/user' |
|
|
|
|
|
|
|
const { t } = useI18n() |
|
|
|
const message = useMessage() |
|
|
|
const permissionStore = usePermissionStore() |
|
|
|
const formSmsLogin = ref() |
|
|
|
const loginLoading = ref(false) |
|
|
|
const iconHouse = useIcon({ icon: 'ep:house' }) |
|
|
|
const iconCellphone = useIcon({ icon: 'ep:cellphone' }) |
|
|
|
const iconCircleCheck = useIcon({ icon: 'ep:circle-check' }) |
|
|
|
const rules = { |
|
|
|
username: [required], |
|
|
|
email: [required] |
|
|
|
} |
|
|
|
const loginData = reactive({ |
|
|
|
username: '', |
|
|
|
email: '', |
|
|
|
const { t } = useI18n() |
|
|
|
const message = useMessage() |
|
|
|
const permissionStore = usePermissionStore() |
|
|
|
const formSmsLogin = ref() |
|
|
|
const loginLoading = ref(false) |
|
|
|
const iconHouse = useIcon({ icon: 'ep:house' }) |
|
|
|
const iconCellphone = useIcon({ icon: 'ep:cellphone' }) |
|
|
|
const iconCircleCheck = useIcon({ icon: 'ep:circle-check' }) |
|
|
|
const rules = { |
|
|
|
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], |
|
|
|
email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }] |
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
const loading = ref(false); |
|
|
|
const submitForm = async () => { |
|
|
|
const loginData = reactive({ |
|
|
|
username: '', |
|
|
|
email: '' |
|
|
|
}) |
|
|
|
const loading = ref(false) |
|
|
|
const submitForm = async () => { |
|
|
|
try { |
|
|
|
if (!formSmsLogin.value) return |
|
|
|
await formSmsLogin.value.validate(async (valid, fields) => { |
|
|
|
if (valid) { |
|
|
|
const data = loginData as unknown as UserApi.UserVO |
|
|
|
await UserApi.forgetPassword(data) |
|
|
|
message.success(t('common.emailSentSuccess')) |
|
|
|
// 发送操作成功的事件 |
|
|
|
router.go(-1) |
|
|
|
} else { |
|
|
|
console.log('error submit!', fields) |
|
|
|
} |
|
|
|
}) |
|
|
|
} finally { |
|
|
|
// formLoading.value = false |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
:deep(.anticon) { |
|
|
|
:deep(.anticon) { |
|
|
|
&:hover { |
|
|
|
color: var(--el-color-primary) !important; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.smsbtn { |
|
|
|
.smsbtn { |
|
|
|
margin-top: 33px; |
|
|
|
} |
|
|
|
.box{ |
|
|
|
} |
|
|
|
.box { |
|
|
|
border: 1px solid #dedede; |
|
|
|
width: 500px; |
|
|
|
margin: 100px auto 0px; |
|
|
|
padding: 20px; |
|
|
|
box-shadow: 0px 0px 20px rgba($color: #000000, $alpha: 0.1); |
|
|
|
} |
|
|
|
.title{ |
|
|
|
} |
|
|
|
.title { |
|
|
|
text-align: center; |
|
|
|
font-size: 20px; |
|
|
|
font-weight: bold; |
|
|
|
padding-bottom: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
