117 lines
3.2 KiB
Vue
117 lines
3.2 KiB
Vue
<template>
|
|
<div class="flex flex-col gap-6 text-base text-black md:text-2xl">
|
|
<div class="overflow-hidden rounded-[20px] bg-[#78788029] px-4">
|
|
<div class="relative">
|
|
<Input
|
|
v-model="email"
|
|
type="email"
|
|
placeholder="Email"
|
|
class="h-[50px] border-none bg-transparent text-base focus-visible:ring-0 md:text-2xl"
|
|
/>
|
|
<div class="absolute bottom-0 left-0 h-[1px] w-full bg-gray-400/30"></div>
|
|
</div>
|
|
|
|
<div class="relative flex items-center">
|
|
<div class="flex-1">
|
|
<Input
|
|
v-model="code"
|
|
type="text"
|
|
placeholder="验证码"
|
|
class="h-[50px] border-none bg-transparent text-base focus-visible:ring-0 md:text-2xl"
|
|
/>
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
@click="handleGetCode"
|
|
:disabled="countdown > 0"
|
|
class="h-10 rounded-full bg-[#4B94E6] px-[32px] text-base font-bold text-white hover:bg-[#4B94E6]/90 md:px-[45px] md:text-[18px]"
|
|
>
|
|
{{ countdown > 0 ? `${countdown}s` : '获取' }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-4 pt-2">
|
|
<Button
|
|
variant="secondary"
|
|
@click="emit('close')"
|
|
class="h-[48px] flex-1 cursor-pointer rounded-[25px] bg-[#D1D1D1] text-lg font-medium text-[#757575] hover:bg-[#C1C1C1]"
|
|
>
|
|
取消
|
|
</Button>
|
|
<Button
|
|
@click="handleLogin"
|
|
class="h-[48px] flex-1 cursor-pointer rounded-[25px] bg-[#A8FF53] text-lg font-medium text-black hover:bg-[#96E64A]"
|
|
>
|
|
登录/注册
|
|
</Button>
|
|
</div>
|
|
<CodeSentTip ref="CodeSentTipRef" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { toast } from 'vue-sonner'
|
|
import CodeSentTip from '@/pages/Home/components/CodeSentTip.vue'
|
|
import request from '@/utils/request'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const CodeSentTipRef = ref(null)
|
|
const email = ref('')
|
|
const code = ref('')
|
|
const countdown = ref(0)
|
|
|
|
const emit = defineEmits(['close'])
|
|
const handleGetCode = () => {
|
|
if (!email.value) {
|
|
toast('请输入邮箱')
|
|
return
|
|
}
|
|
CodeSentTipRef.value.show()
|
|
|
|
request
|
|
.get('/api/v1/auth/check', {
|
|
email: email.value,
|
|
})
|
|
.then(({ exist }) => {
|
|
console.log(exist)
|
|
request
|
|
.post('/api/v1/common/send_code', {
|
|
// 1=登录, 2=注册,
|
|
email: email.value,
|
|
type: exist ? 2 : 1,
|
|
})
|
|
.then(() => {
|
|
countdown.value = 60
|
|
const timer = setInterval(() => {
|
|
countdown.value--
|
|
if (countdown.value <= 0) clearInterval(timer)
|
|
}, 1000)
|
|
})
|
|
})
|
|
}
|
|
const router = useRouter()
|
|
const handleLogin = () => {
|
|
request
|
|
.post('/api/v1/auth/login/email', {
|
|
email: email.value,
|
|
code: code.value,
|
|
})
|
|
.then((res) => {
|
|
localStorage.setItem('Authorization', res.token)
|
|
localStorage.setItem('UserEmail', email.value)
|
|
router.push({ path: '/user-center' })
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 移除 Shadcn Input 的默认边框阴影，保持纯净感 */
|
|
input:focus {
|
|
outline: none;
|
|
}
|
|
</style>
|