first commit
This commit is contained in:
zc
207
src/views/login/components/account/index.vue
Normal file
207
src/views/login/components/account/index.vue
Normal file
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col-style="{ display: 'none' }"
|
||||
:wrapper-col-style="{ flex: 1 }"
|
||||
size="large"
|
||||
@submit="handleLogin"
|
||||
>
|
||||
<a-form-item field="username" hide-label>
|
||||
<a-input v-model="form.username" placeholder="请输入用户名" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item field="password" hide-label>
|
||||
<a-input-password v-model="form.password" placeholder="请输入密码" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="isCaptchaEnabled" field="captcha" hide-label>
|
||||
<a-input v-model="form.captcha" placeholder="请输入验证码" :max-length="4" allow-clear style="flex: 1 1" />
|
||||
<div class="captcha-container" @click="getCaptcha">
|
||||
<img :src="captchaImgBase64" alt="验证码" class="captcha" />
|
||||
<div v-if="form.expired" class="overlay">
|
||||
<p>已过期，请刷新</p>
|
||||
</div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-row justify="space-between" align="center" class="w-full">
|
||||
<a-checkbox v-model="loginConfig.rememberMe">记住我</a-checkbox>
|
||||
<a-link>忘记密码</a-link>
|
||||
</a-row>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space direction="vertical" fill class="w-full">
|
||||
<a-button class="btn" type="primary" :loading="loading" html-type="submit" size="large" long>立即登录</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type FormInstance, Message } from '@arco-design/web-vue'
|
||||
import { useStorage } from '@vueuse/core'
|
||||
import { getImageCaptcha } from '@/apis/common'
|
||||
import { useTabsStore, useUserStore } from '@/stores'
|
||||
import { encryptByRsa } from '@/utils/encrypt'
|
||||
|
||||
const loginConfig = useStorage('login-config', {
|
||||
rememberMe: true,
|
||||
username: 'admin', // 演示默认值
|
||||
password: 'admin123', // 演示默认值
|
||||
// username: debug ? 'admin' : '', // 演示默认值
|
||||
// password: debug ? 'admin123' : '', // 演示默认值
|
||||
})
|
||||
// 是否启用验证码
|
||||
const isCaptchaEnabled = ref(true)
|
||||
// 验证码图片
|
||||
const captchaImgBase64 = ref()
|
||||
|
||||
const formRef = ref<FormInstance>()
|
||||
const form = reactive({
|
||||
username: loginConfig.value.username,
|
||||
password: loginConfig.value.password,
|
||||
captcha: '',
|
||||
uuid: '',
|
||||
expired: false,
|
||||
})
|
||||
const rules: FormInstance['rules'] = {
|
||||
username: [{ required: true, message: '请输入用户名' }],
|
||||
password: [{ required: true, message: '请输入密码' }],
|
||||
captcha: [{ required: isCaptchaEnabled.value, message: '请输入验证码' }],
|
||||
}
|
||||
|
||||
// 验证码过期定时器
|
||||
let timer
|
||||
const startTimer = (expireTime: number, curTime = Date.now()) => {
|
||||
if (timer) {
|
||||
clearTimeout(timer)
|
||||
}
|
||||
const remainingTime = expireTime - curTime
|
||||
if (remainingTime <= 0) {
|
||||
form.expired = true
|
||||
return
|
||||
}
|
||||
timer = setTimeout(() => {
|
||||
form.expired = true
|
||||
}, remainingTime)
|
||||
}
|
||||
// 组件销毁时清理定时器
|
||||
onBeforeUnmount(() => {
|
||||
if (timer) {
|
||||
clearTimeout(timer)
|
||||
}
|
||||
})
|
||||
|
||||
// 获取验证码
|
||||
const getCaptcha = () => {
|
||||
getImageCaptcha().then((res) => {
|
||||
const { uuid, img, expireTime, isEnabled } = res.data
|
||||
isCaptchaEnabled.value = isEnabled
|
||||
captchaImgBase64.value = img
|
||||
form.uuid = uuid
|
||||
form.expired = false
|
||||
startTimer(expireTime, Number(res.timestamp))
|
||||
})
|
||||
}
|
||||
|
||||
const userStore = useUserStore()
|
||||
const tabsStore = useTabsStore()
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
// 登录
|
||||
const handleLogin = async () => {
|
||||
try {
|
||||
const isInvalid = await formRef.value?.validate()
|
||||
if (isInvalid) return
|
||||
loading.value = true
|
||||
await userStore.accountLogin({
|
||||
username: form.username,
|
||||
password: encryptByRsa(form.password) || '',
|
||||
captcha: form.captcha,
|
||||
uuid: form.uuid,
|
||||
})
|
||||
tabsStore.reset()
|
||||
const { redirect, ...othersQuery } = router.currentRoute.value.query
|
||||
const { rememberMe } = loginConfig.value
|
||||
loginConfig.value.username = rememberMe ? form.username : ''
|
||||
await router.push({
|
||||
path: (redirect as string) || '/',
|
||||
query: {
|
||||
...othersQuery,
|
||||
},
|
||||
})
|
||||
Message.success('欢迎使用')
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
getCaptcha()
|
||||
form.captcha = ''
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getCaptcha()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.arco-input-wrapper,
|
||||
:deep(.arco-select-view-single) {
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.arco-input-wrapper.arco-input-error {
|
||||
background-color: rgb(var(--danger-1));
|
||||
border-color: rgb(var(--danger-3));
|
||||
}
|
||||
|
||||
.arco-input-wrapper.arco-input-error:hover {
|
||||
background-color: rgb(var(--danger-1));
|
||||
border-color: rgb(var(--danger-6));
|
||||
}
|
||||
|
||||
.arco-input-wrapper :deep(.arco-input) {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
.arco-input-wrapper:hover {
|
||||
border-color: rgb(var(--arcoblue-6));
|
||||
}
|
||||
|
||||
.captcha {
|
||||
width: 111px;
|
||||
height: 36px;
|
||||
margin: 0 0 0 5px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.captcha-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(51, 51, 51, 0.8);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.overlay p {
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
79
src/views/login/components/background/index.vue
Normal file
79
src/views/login/components/background/index.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="login-bg">
|
||||
<div class="fly bg-fly-circle1"></div>
|
||||
<div class="fly bg-fly-circle2"></div>
|
||||
<div class="fly bg-fly-circle3"></div>
|
||||
<div class="fly bg-fly-circle4"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.fly {
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
}
|
||||
.bg-fly-circle1 {
|
||||
left: 40px;
|
||||
top: 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to right, rgba(var(--primary-6), 0.07) 0%, rgba(var(--primary-6), 0.04) 100%);
|
||||
animation: move 2.5s linear infinite;
|
||||
}
|
||||
|
||||
.bg-fly-circle2 {
|
||||
left: 15%;
|
||||
bottom: 5%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to right, rgba(var(--primary-6), 0.08) 0%, rgba(var(--primary-6), 0.04) 100%);
|
||||
animation: move 3s linear infinite;
|
||||
}
|
||||
|
||||
.bg-fly-circle3 {
|
||||
right: 12%;
|
||||
top: 90px;
|
||||
width: 145px;
|
||||
height: 145px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to right, rgba(var(--primary-6), 0.1) 0%, rgba(var(--primary-6), 0.04) 100%);
|
||||
animation: move 2.5s linear infinite;
|
||||
}
|
||||
|
||||
.bg-fly-circle4 {
|
||||
right: 5%;
|
||||
top: 60%;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to right, rgba(var(--primary-6), 0.02) 0%, rgba(var(--primary-6), 0.04) 100%);
|
||||
animation: move 3.5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes move {
|
||||
0% {
|
||||
transform: translateY(0px) scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateY(25px) scale(1.1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0px) scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
176
src/views/login/components/email/index.vue
Normal file
176
src/views/login/components/email/index.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col-style="{ display: 'none' }"
|
||||
:wrapper-col-style="{ flex: 1 }"
|
||||
size="large"
|
||||
@submit="handleLogin"
|
||||
>
|
||||
<a-form-item field="email" hide-label>
|
||||
<a-input v-model="form.email" placeholder="请输入邮箱" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item field="captcha" hide-label>
|
||||
<a-input v-model="form.captcha" placeholder="请输入验证码" :max-length="6" allow-clear style="flex: 1 1" />
|
||||
<a-button
|
||||
class="captcha-btn"
|
||||
:loading="captchaLoading"
|
||||
:disabled="captchaDisable"
|
||||
size="large"
|
||||
@click="onCaptcha"
|
||||
>
|
||||
{{ captchaBtnName }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space direction="vertical" fill class="w-full">
|
||||
<a-button disabled class="btn" type="primary" :loading="loading" html-type="submit" size="large" long>立即登录</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<Verify
|
||||
ref="VerifyRef"
|
||||
:captcha-type="captchaType"
|
||||
:mode="captchaMode"
|
||||
:img-size="{ width: '330px', height: '155px' }"
|
||||
@success="getCaptcha"
|
||||
/>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type FormInstance, Message } from '@arco-design/web-vue'
|
||||
import type { BehaviorCaptchaReq } from '@/apis'
|
||||
// import { type BehaviorCaptchaReq, getEmailCaptcha } from '@/apis'
|
||||
import { useTabsStore, useUserStore } from '@/stores'
|
||||
import * as Regexp from '@/utils/regexp'
|
||||
|
||||
const formRef = ref<FormInstance>()
|
||||
const form = reactive({
|
||||
email: '',
|
||||
captcha: '',
|
||||
})
|
||||
|
||||
const rules: FormInstance['rules'] = {
|
||||
email: [
|
||||
{ required: true, message: '请输入邮箱' },
|
||||
{ match: Regexp.Email, message: '请输入正确的邮箱' },
|
||||
],
|
||||
captcha: [{ required: true, message: '请输入验证码' }],
|
||||
}
|
||||
|
||||
const userStore = useUserStore()
|
||||
const tabsStore = useTabsStore()
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
// 登录
|
||||
const handleLogin = async () => {
|
||||
try {
|
||||
const isInvalid = await formRef.value?.validate()
|
||||
if (isInvalid) return
|
||||
loading.value = true
|
||||
await userStore.emailLogin(form)
|
||||
tabsStore.reset()
|
||||
const { redirect, ...othersQuery } = router.currentRoute.value.query
|
||||
await router.push({
|
||||
path: (redirect as string) || '/',
|
||||
query: {
|
||||
...othersQuery,
|
||||
},
|
||||
})
|
||||
Message.success('欢迎使用')
|
||||
} catch (error) {
|
||||
form.captcha = ''
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const VerifyRef = ref<InstanceType<any>>()
|
||||
const captchaType = ref('blockPuzzle')
|
||||
const captchaMode = ref('pop')
|
||||
const captchaLoading = ref(false)
|
||||
|
||||
// 弹出行为验证码
|
||||
const onCaptcha = async () => {
|
||||
if (captchaLoading.value) return
|
||||
const isInvalid = await formRef.value?.validateField('email')
|
||||
if (isInvalid) return
|
||||
VerifyRef.value.show()
|
||||
}
|
||||
|
||||
const captchaTimer = ref()
|
||||
const captchaTime = ref(60)
|
||||
const captchaBtnName = ref('获取验证码')
|
||||
const captchaDisable = ref(false)
|
||||
// 重置验证码
|
||||
const resetCaptcha = () => {
|
||||
window.clearInterval(captchaTimer.value)
|
||||
captchaTime.value = 60
|
||||
captchaBtnName.value = '获取验证码'
|
||||
captchaDisable.value = false
|
||||
}
|
||||
|
||||
// 获取验证码
|
||||
// eslint-disable-next-line unused-imports/no-unused-vars
|
||||
const getCaptcha = async (captchaReq: BehaviorCaptchaReq) => {
|
||||
try {
|
||||
captchaLoading.value = true
|
||||
captchaBtnName.value = '发送中...'
|
||||
// await getEmailCaptcha(form.email, captchaReq)
|
||||
captchaLoading.value = false
|
||||
captchaDisable.value = true
|
||||
captchaBtnName.value = `获取验证码(${(captchaTime.value -= 1)}s)`
|
||||
// Message.success('邮件发送成功')
|
||||
Message.success('仅提供效果演示，实际使用请查看代码取消相关注释')
|
||||
captchaTimer.value = window.setInterval(() => {
|
||||
captchaTime.value -= 1
|
||||
captchaBtnName.value = `获取验证码(${captchaTime.value}s)`
|
||||
if (captchaTime.value <= 0) {
|
||||
resetCaptcha()
|
||||
}
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
resetCaptcha()
|
||||
} finally {
|
||||
captchaLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.arco-input-wrapper,
|
||||
:deep(.arco-select-view-single) {
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.arco-input-wrapper.arco-input-error {
|
||||
background-color: rgb(var(--danger-1));
|
||||
border-color: rgb(var(--danger-3));
|
||||
}
|
||||
.arco-input-wrapper.arco-input-error:hover {
|
||||
background-color: rgb(var(--danger-1));
|
||||
border-color: rgb(var(--danger-6));
|
||||
}
|
||||
|
||||
.arco-input-wrapper :deep(.arco-input) {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
.arco-input-wrapper:hover {
|
||||
border-color: rgb(var(--arcoblue-6));
|
||||
}
|
||||
|
||||
.captcha-btn {
|
||||
height: 40px;
|
||||
margin-left: 12px;
|
||||
min-width: 98px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
130
src/views/login/components/modifyPassword/index.vue
Normal file
130
src/views/login/components/modifyPassword/index.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<a-form
|
||||
ref="formRef" :model="form" :rules="rules" layout="vertical" :label-col-style="{ lineHeight: '10px' }"
|
||||
:wrapper-col-style="{ flex: 1 }" size="large" @submit="onModify"
|
||||
>
|
||||
<a-form-item field="oldPassword" label="当前密码">
|
||||
<a-input-password v-model="form.oldPassword" placeholder="请输入当前密码" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item field="newPassword" label="新密码">
|
||||
<a-input-password v-model="form.newPassword" placeholder="请输入新密码" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item field="confirmPassword" label="确认密码">
|
||||
<a-input-password v-model="form.confirmPassword" placeholder="请再次输入新密码" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space direction="vertical" fill class="w-full">
|
||||
<a-button class="btn" type="primary" :loading="loading" html-type="submit" size="large" long>
|
||||
立即修改
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type FormInstance, Message } from '@arco-design/web-vue'
|
||||
import { updateUserPassword } from '@/apis/system'
|
||||
import { encryptByRsa } from '@/utils/encrypt'
|
||||
|
||||
interface Form {
|
||||
oldPassword: string
|
||||
newPassword: string
|
||||
confirmPassword?: string
|
||||
}
|
||||
const formRef = ref<FormInstance>()
|
||||
const form = reactive<Form>({
|
||||
oldPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
})
|
||||
|
||||
const rules: FormInstance['rules'] = {
|
||||
oldPassword: [
|
||||
{ required: true, message: '请输入当前密码' },
|
||||
],
|
||||
newPassword: [{ required: true, message: '请输入新密码' }, {
|
||||
validator: (value, cd) => {
|
||||
return new Promise((resolve) => {
|
||||
if (value === form.oldPassword) {
|
||||
cd('新密码不能与旧密码相同')
|
||||
}
|
||||
resolve(true)
|
||||
})
|
||||
},
|
||||
}],
|
||||
confirmPassword: [{ required: true, message: '请再次输入新密码' }, {
|
||||
validator: (value, cd) => {
|
||||
return new Promise((resolve) => {
|
||||
if (value !== form.newPassword) {
|
||||
cd('两次密码不一致')
|
||||
}
|
||||
resolve(true)
|
||||
})
|
||||
},
|
||||
}],
|
||||
}
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
|
||||
// 登录
|
||||
const onModify = async () => {
|
||||
const isInvalid = await formRef.value?.validate()
|
||||
if (isInvalid) return
|
||||
try {
|
||||
loading.value = true
|
||||
const params = {
|
||||
oldPassword: encryptByRsa(form.oldPassword) || '',
|
||||
newPassword: encryptByRsa(form.newPassword) || '',
|
||||
}
|
||||
await updateUserPassword(params)
|
||||
router.push({
|
||||
path: '/login',
|
||||
})
|
||||
Message.success('修改成功')
|
||||
} catch (error) {
|
||||
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.arco-input-wrapper,
|
||||
:deep(.arco-select-view-single) {
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.arco-input-wrapper.arco-input-error {
|
||||
background-color: rgb(var(--danger-1));
|
||||
border-color: rgb(var(--danger-3));
|
||||
}
|
||||
|
||||
.arco-input-wrapper.arco-input-error:hover {
|
||||
background-color: rgb(var(--danger-1));
|
||||
border-color: rgb(var(--danger-6));
|
||||
}
|
||||
|
||||
.arco-input-wrapper :deep(.arco-input) {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
.arco-input-wrapper:hover {
|
||||
border-color: rgb(var(--arcoblue-6));
|
||||
}
|
||||
|
||||
.captcha-btn {
|
||||
height: 40px;
|
||||
margin-left: 12px;
|
||||
min-width: 98px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
177
src/views/login/components/phone/index.vue
Normal file
177
src/views/login/components/phone/index.vue
Normal file
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col-style="{ display: 'none' }"
|
||||
:wrapper-col-style="{ flex: 1 }"
|
||||
size="large"
|
||||
@submit="handleLogin"
|
||||
>
|
||||
<a-form-item field="phone" hide-label>
|
||||
<a-input v-model="form.phone" placeholder="请输入手机号" :max-length="11" allow-clear />
|
||||
</a-form-item>
|
||||
<a-form-item field="captcha" hide-label>
|
||||
<a-input v-model="form.captcha" placeholder="请输入验证码" :max-length="4" allow-clear style="flex: 1 1" />
|
||||
<a-button
|
||||
class="captcha-btn"
|
||||
:loading="captchaLoading"
|
||||
:disabled="captchaDisable"
|
||||
size="large"
|
||||
@click="onCaptcha"
|
||||
>
|
||||
{{ captchaBtnName }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-space direction="vertical" fill class="w-full">
|
||||
<a-button disabled class="btn" type="primary" :loading="loading" html-type="submit" size="large" long>立即登录</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
<Verify
|
||||
ref="VerifyRef"
|
||||
:captcha-type="captchaType"
|
||||
:mode="captchaMode"
|
||||
:img-size="{ width: '330px', height: '155px' }"
|
||||
@success="getCaptcha"
|
||||
/>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type FormInstance, Message } from '@arco-design/web-vue'
|
||||
import type { BehaviorCaptchaReq } from '@/apis'
|
||||
// import { type BehaviorCaptchaReq, getSmsCaptcha } from '@/apis'
|
||||
import { useTabsStore, useUserStore } from '@/stores'
|
||||
import * as Regexp from '@/utils/regexp'
|
||||
|
||||
const formRef = ref<FormInstance>()
|
||||
const form = reactive({
|
||||
phone: '',
|
||||
captcha: '',
|
||||
})
|
||||
|
||||
const rules: FormInstance['rules'] = {
|
||||
phone: [
|
||||
{ required: true, message: '请输入手机号' },
|
||||
{ match: Regexp.Phone, message: '请输入正确的手机号' },
|
||||
],
|
||||
captcha: [{ required: true, message: '请输入验证码' }],
|
||||
}
|
||||
|
||||
const userStore = useUserStore()
|
||||
const tabsStore = useTabsStore()
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
// 登录
|
||||
const handleLogin = async () => {
|
||||
const isInvalid = await formRef.value?.validate()
|
||||
if (isInvalid) return
|
||||
try {
|
||||
loading.value = true
|
||||
await userStore.phoneLogin(form)
|
||||
tabsStore.reset()
|
||||
const { redirect, ...othersQuery } = router.currentRoute.value.query
|
||||
await router.push({
|
||||
path: (redirect as string) || '/',
|
||||
query: {
|
||||
...othersQuery,
|
||||
},
|
||||
})
|
||||
Message.success('欢迎使用')
|
||||
} catch (error) {
|
||||
form.captcha = ''
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const VerifyRef = ref<InstanceType<any>>()
|
||||
const captchaType = ref('blockPuzzle')
|
||||
const captchaMode = ref('pop')
|
||||
const captchaLoading = ref(false)
|
||||
// 弹出行为验证码
|
||||
const onCaptcha = async () => {
|
||||
if (captchaLoading.value) return
|
||||
const isInvalid = await formRef.value?.validateField('phone')
|
||||
if (isInvalid) return
|
||||
// 重置行为参数
|
||||
VerifyRef.value.instance.refresh()
|
||||
VerifyRef.value.show()
|
||||
}
|
||||
|
||||
const captchaTimer = ref()
|
||||
const captchaTime = ref(60)
|
||||
const captchaBtnName = ref('获取验证码')
|
||||
const captchaDisable = ref(false)
|
||||
// 重置验证码
|
||||
const resetCaptcha = () => {
|
||||
window.clearInterval(captchaTimer.value)
|
||||
captchaTime.value = 60
|
||||
captchaBtnName.value = '获取验证码'
|
||||
captchaDisable.value = false
|
||||
}
|
||||
|
||||
// 获取验证码
|
||||
// eslint-disable-next-line unused-imports/no-unused-vars
|
||||
const getCaptcha = async (captchaReq: BehaviorCaptchaReq) => {
|
||||
try {
|
||||
captchaLoading.value = true
|
||||
captchaBtnName.value = '发送中...'
|
||||
// await getSmsCaptcha(form.phone, captchaReq)
|
||||
captchaLoading.value = false
|
||||
captchaDisable.value = true
|
||||
captchaBtnName.value = `获取验证码(${(captchaTime.value -= 1)}s)`
|
||||
// Message.success('短信发送成功')
|
||||
Message.success('仅提供效果演示，实际使用请查看代码取消相关注释')
|
||||
captchaTimer.value = window.setInterval(() => {
|
||||
captchaTime.value -= 1
|
||||
captchaBtnName.value = `获取验证码(${captchaTime.value}s)`
|
||||
if (captchaTime.value <= 0) {
|
||||
resetCaptcha()
|
||||
}
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
resetCaptcha()
|
||||
} finally {
|
||||
captchaLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.arco-input-wrapper,
|
||||
:deep(.arco-select-view-single) {
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.arco-input-wrapper.arco-input-error {
|
||||
background-color: rgb(var(--danger-1));
|
||||
border-color: rgb(var(--danger-3));
|
||||
}
|
||||
.arco-input-wrapper.arco-input-error:hover {
|
||||
background-color: rgb(var(--danger-1));
|
||||
border-color: rgb(var(--danger-6));
|
||||
}
|
||||
|
||||
.arco-input-wrapper :deep(.arco-input) {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
.arco-input-wrapper:hover {
|
||||
border-color: rgb(var(--arcoblue-6));
|
||||
}
|
||||
|
||||
.captcha-btn {
|
||||
height: 40px;
|
||||
margin-left: 12px;
|
||||
min-width: 98px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user