115 lines
4.2 KiB
Vue
115 lines
4.2 KiB
Vue
<template>
|
|
<div class="box-border w-913px border border-[#EEEEEE] rounded-6px border-solid bg-[#FFFFFF] px-30px py-21px">
|
|
<el-tabs v-model="activeName" class="demo-tabs">
|
|
<el-tab-pane label="修改密码" name="修改密码">
|
|
<el-form ref="formRef" :model="form" label-width="120px" class="profile-form" autocomplete="off">
|
|
<el-form-item
|
|
label="手机号"
|
|
prop="phone"
|
|
class="mt-15px!"
|
|
:rules="[
|
|
{ required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
|
|
{
|
|
pattern: /^1[3456789]\d{9}$/,
|
|
message: '请输入正确的手机号',
|
|
trigger: ['blur', 'change'],
|
|
},
|
|
]"
|
|
>
|
|
<el-input v-model="form.phone" type="text" placeholder="请输入手机号" class="h-37px" />
|
|
</el-form-item>
|
|
<el-form-item label="验证码" prop="code" class="mt-15px!" :rules="{ required: true, message: '请输入验证码', trigger: ['blur', 'change'] }">
|
|
<div class="flex items-center gap10">
|
|
<el-input v-model="form.code" type="text" placeholder="请输入验证码" class="h-37px" />
|
|
<el-button
|
|
type="primary"
|
|
class="w-110px rd-4px bg-[#1A65FF] px-6px text-center color-#fff line-height-37px h-37px!"
|
|
:disabled="counting > 0"
|
|
@click="handleCode"
|
|
>
|
|
{{ counting > 0 ? `${counting}s后重新获取` : '获取验证码' }}</el-button
|
|
>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="新密码" prop="password" class="mt-20px!" :rules="{ required: true, message: '请输入新密码', trigger: ['blur', 'change'] }">
|
|
<el-input v-model="form.password" autocomplete="new-password" type="password" placeholder="请输入新密码" class="h-37px" />
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="确认密码"
|
|
prop="passwordV2"
|
|
class="mt-20px!"
|
|
:rules="{ required: true, message: '请再次输入新密码', trigger: ['blur', 'change'] }"
|
|
>
|
|
<el-input v-model="form.passwordV2" autocomplete="new-password" type="passwordV2" placeholder="请再次输入新密码" class="h-37px" />
|
|
</el-form-item>
|
|
<el-form-item class="mt-20px!">
|
|
<el-button type="primary" class="h-37px w-121px line-height-37px" @click="handleSave">保存</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-tab-pane>
|
|
<!-- <el-tab-pane label="登录设备管理" name="登录设备管理"> </el-tab-pane> -->
|
|
</el-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive, ref } from 'vue'
|
|
import { resetPassoword } from '@/api/login/index'
|
|
import { sendSms } from '@/api/common/index'
|
|
import useUserStore from '@/store/user'
|
|
const userStore = useUserStore()
|
|
|
|
const activeName = ref('修改密码')
|
|
|
|
/** 请求入参 */
|
|
const form = reactive({
|
|
phone: '',
|
|
password: '',
|
|
passwordV2: '',
|
|
code: '',
|
|
})
|
|
|
|
/** 提交 */
|
|
const formRef = ref()
|
|
const handleSave = async () => {
|
|
await formRef.value.validate()
|
|
if (form.password !== form.passwordV2) return ElMessage.error('两次密码不一致')
|
|
try {
|
|
const res = await resetPassoword(form)
|
|
const { code } = res
|
|
if (code === 0) {
|
|
ElMessage.success(`修改密码成功，请重新登录`)
|
|
setTimeout(() => {
|
|
userStore.logout()
|
|
userStore.$reset()
|
|
}, 500)
|
|
}
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
}
|
|
|
|
/** 获取验证码 */
|
|
const counting = ref(0)
|
|
const handleCode = async () => {
|
|
await formRef.value.validateField('phone')
|
|
try {
|
|
const res = await sendSms({ mobile: form.phone, scene: 3 })
|
|
const { code } = res
|
|
if (code === 0) {
|
|
ElMessage.success('验证码已发送')
|
|
counting.value = 60
|
|
const timer = setInterval(() => {
|
|
counting.value--
|
|
if (counting.value === 0) {
|
|
clearInterval(timer)
|
|
}
|
|
}, 1000)
|
|
}
|
|
} catch (error) {
|
|
counting.value = 0
|
|
console.log(error)
|
|
}
|
|
}
|
|
</script>
|