renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 登录页面

Browse Source
This commit is contained in:
renxiaodong
2025-06-20 06:10:15 -04:00
parent 1641320847
commit 54f620d92f
12 changed files with 328 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/views/components/login/PuzzleVerification.vue → src/views/components/login/components/PuzzleVerification.vue
View File

341
src/views/components/login/index.vue
View File

@ -1,108 +1,99 @@
<!-- eslint-disable vue/no-duplicate-attributes -->
<template>
<div class="content">
<img src="@/assets/img/Frame.svg" alt="" style="width: 480px; height: 480px; margin-right: 160px" />
<a-space
direction="vertical"
size="large"
style="width: 400px; height: 480px; background-color: #fff; border-radius: 8px; margin-top: 40px"
align="center"
>
<img src="@/assets/img/LOGO.svg" alt="" style="width: 155px; height: 37px; margin-top: 49px" />
<span style="font-size: 16px; color: #737478">AI营销工具</span>
<a-form
ref="formRef"
:model="loginForm"
:rules="formRules"
auto-label-width
style="width: 320px; margin-top: 20px"
>
<a-form-item field="username" hide-label>
<a-input
v-model="loginForm.username"
placeholder="输入手机号"
class="form-input"
style="margin-top: 48px; border-radius: 8px"
clearable
@blur="validateField('username')"
@input="clearError('username')"
allow-clear
/>
</a-form-item>
<a-form-item field="code" hide-label>
<div
class="form-input"
style="display: flex; justify-content: space-between; align-items: center; border-radius: 8px"
>
<a-input
v-model="loginForm.code"
placeholder="验证码"
style="background-color: #fff; border: none"
@blur="validateField('code')"
@input="clearError('code')"
allow-clear
maxlength="6"
/>
<span
style="
font-size: 16px;
font-weight: 400;
text-align: center;
margin-right: 16px;
width: 120px;
text-align: right;
"
:style="{
color: countdown > 0 || hasGetCode ? '#6D4CFE' : '#211F24',
cursor: countdown > 0 ? 'not-allowed' : 'pointer',
}"
@click="getCode"
>{{ countdown > 0 ? `${countdown}s` : hasGetCode ? '重新发送' : '发送验证码' }}</span
>
</div>
</a-form-item>
<a-form-item hide-label>
<div
type="primary"
style="
width: 480px;
height: 48px;
font-size: 16px;
border-radius: 8px;
color: #fff;
text-align: center;
line-height: 48px;
"
:style="{ backgroundColor: isFormValid && hasCheck ? '#6D4CFE' : '#C5B7FF' }"
@click="handleSubmit"
:disabled="!isFormValid || !hasCheck"
>
{{ isLogin ? '登录' : '注册并开通企业账号' }}
</div>
</a-form-item>
</a-form>
<a-space style="margin-top: 16px; color: #737478; font-size: 12px">
<a-checkbox v-model="hasCheck" style="margin-right: 0px; font-size: 12px"
>{{ isLogin ? '登录' : '注册' }}即代表同意</a-checkbox
<div
class="relative w-100vw h-100vh min-h-175 flex justify-center items-center bg-cover bg-center bg-#f0edff login-wrap"
>
<section class="login-bg"></section>
<section class="relative flex justify-between w-1200 h-100% my-0 mx-auto">
<div class="flex flex-col justify-center flex-column h-100% mt--12.5">
<img src="@/assets/img/Frame.svg" class="w-480 h-480 mr-40" alt="" />
</div>
<div class="flex items-center w-400 h-100%">
<a-space
direction="vertical"
size="large"
align="center"
class="w-400 bg-#fff rounded-8px shadow-[0_4px_10px_0_#6D4CFE33] px-40px py-48px"
>
<a-link href="link" class="form-link" target="_blank">用户协议</a-link>
<span>和</span>
<a-link href="link" class="form-link" target="_blank">隐私政策</a-link>
</a-space>
</a-space>
<img src="@/assets/img/LOGO.svg" alt="" class="w-155 h-37 mb-8px" />
<span class="text-4 color-#737478">AI营销工具</span>
<a-form ref="formRef" :model="loginForm" :rules="formRules" auto-label-width class="w-320 mt-48px form-wrap">
<a-form-item field="mobile" hide-label>
<a-input
v-model="loginForm.mobile"
placeholder="输入手机号"
class="form-input border border-solid border-#d7d7d9 rounded-8px w-100% h-48px text-14 rounded-4px color-#333 bg-#fff"
clearable
allow-clear
@blur="validateField('mobile')"
@input="clearError('mobile')"
/>
</a-form-item>
<a-form-item field="captcha" hide-label>
<div
class="form-input border border-solid border-#d7d7d9 rounded-8px w-100% h-48px text-14 rounded-4px color-#333 bg-#fff flex justify-between items-center rounded-8px"
>
<a-input
v-model="loginForm.captcha"
placeholder="验证码"
style="background-color: #fff; border: none"
allow-clear
maxlength="6"
@blur="validateField('captcha')"
@input="clearError('captcha')"
/>
<span
class="w-120 font-400 text-right mr-4 text-16px"
:style="{
color: countdown > 0 || hasGetCode ? '#6D4CFE' : '#211F24',
cursor: countdown > 0 ? 'not-allowed' : 'pointer',
}"
@click="getCode"
>{{ countdown > 0 ? `${countdown}s` : hasGetCode ? '重新发送' : '发送验证码' }}</span
>
</div>
</a-form-item>
<a-form-item hide-label class="mt-68px mb-16px">
<div
type="primary"
class="w-480 h-48 text-16px rounded-8px text-center text-white leading-48px"
:class="disabledSubmitBtn ? 'cursor-no-drop' : 'cursor-pointer'"
:style="{ backgroundColor: disabledSubmitBtn ? '#C5B7FF' : '#6D4CFE' }"
:disabled="disabledSubmitBtn"
@click="handleSubmit"
>
{{ isLogin ? '登录' : '注册并开通企业账号' }}
</div>
</a-form-item>
</a-form>
<a-space class="text-12px color-#737478 justify-start items-center">
<a-checkbox v-model="hasCheck" class="!text-12px mr-8px"></a-checkbox>
<span class="text-12px color-#737478">{{ isLogin ? '登录' : '注册' }}即代表同意</span>
<a-link href="link" class="form-link color-#211F24" target="_blank">用户协议</a-link>
<span class="text-12px color-#737478">和</span>
<a-link href="link" class="form-link color-#211f24" target="_blank">隐私政策</a-link>
</a-space>
</a-space>
</div>
</section>
<section class="login-footer">
<p class="text">闽公网安备 352018502850842号 闽ICP备20250520582号 © 2025小题科技</p>
</section>
</div>
<PuzzleVerification
:show="isVerificationVisible"
@submit="handleVerificationSubmit"
@cancel="isVerificationVisible = false"
/>
<a-modal :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose hide-cancel>
<a-modal :visible="visible" unmountOnClose hide-cancel @ok="handleOk" @cancel="handleCancel">
<template #title>
<span style="text-align: left; width: 100%">选择账号</span>
</template>
<div class="account-bind-container">
<a-card :bordered="false" class="bind-card">
<div class="bind-header">
<a-typography-text class="phone-number">{{ phoneNumber }} 已在以下企业绑定了账号</a-typography-text>
<a-typography-text class="mobile-number">{{ mobileNumber }} 已在以下企业绑定了账号</a-typography-text>
</div>
<a-list :bordered="false" :split="false" class="account-list">
@ -116,7 +107,7 @@
<a-list-item-meta>
<template #title>
<div style="display: flex; align-items: center; gap: 12px">
<a-checkbox :model-value="selectedAccount == index" />
<a-checkbox :model-value="selectedAccount === index" />
<a-typography-text>{{ account.name }}</a-typography-text>
</div>
</template>
@ -129,35 +120,36 @@
</template>
<script setup lang="ts">
import PuzzleVerification from './PuzzleVerification.vue';
import { fetchLoginCaptCha } from '@/api/all/login';
import PuzzleVerification from './components/PuzzleVerification.vue';
import { fetchLoginCaptCha, fetchAuthorizationsCaptcha } from '@/api/all/login';
import { ref, reactive, onUnmounted, computed } from 'vue';
import { Message } from '@arco-design/web-vue';
import { useUserStore } from '@/stores';
import { handleUserLogin } from '@/utils/user';
import router from '@/router';
const $message = Message;
const formRef = ref();
const userStore = useUserStore();
const countdown = ref(0);
let timer = ref();
const isLogin = ref(false);
const isLogin = ref(true);
const isVerificationVisible = ref(false);
const visible = ref(false);
const hasGetCode = ref(false);
const submitting = ref(false);
const hasCheck = ref(false);
const phoneNumber = ref('13616544933');
const mobileNumber = ref('13616544933');
const selectedAccount = ref(0);
const accounts = ref([{ name: '灵机用户291094' }, { name: '灵机用户291094' }]);
const loginForm = reactive({
username: '',
code: '',
mobile: '',
captcha: '',
});
// 表单校验规则
const formRules = {
username: [
mobile: [
{
required: true,
message: '请填写手机号',
@ -174,7 +166,7 @@ const formRules = {
trigger: ['blur', 'change'],
},
],
code: [
captcha: [
{
required: true,
message: '请填写验证码',
@ -196,13 +188,17 @@ const formRules = {
// 表单是否有效
const isFormValid = computed(() => {
return (
loginForm.username.trim() !== '' &&
/^1[3-9]\d{9}$/.test(loginForm.username) &&
loginForm.code.trim() !== '' &&
/^\d{6}$/.test(loginForm.code)
loginForm.mobile.trim() !== '' &&
/^1[3-9]\d{9}$/.test(loginForm.mobile) &&
loginForm.captcha.trim() !== '' &&
/^\d{6}$/.test(loginForm.captcha)
);
});
const disabledSubmitBtn = computed(() => {
return !isFormValid.value;
});
const selectAccount = (index: any) => {
selectedAccount.value = index;
};
@ -227,11 +223,11 @@ const getCode = async () => {
if (countdown.value > 0) return;
// 先重置验证状态
formRef.value.clearValidate('username');
formRef.value.clearValidate('mobile');
// 验证手机号字段
try {
const result = await formRef.value.validateField('username');
const result = await formRef.value.validateField('mobile');
// 只有当验证通过时才会显示滑块验证
if (result === true || result === undefined) {
isVerificationVisible.value = true;
@ -248,10 +244,10 @@ const handleVerificationSubmit = async () => {
startCountdown();
try {
await fetchLoginCaptCha({ mobile: loginForm.username });
$message.success('验证码发送成功');
await fetchLoginCaptCha({ mobile: loginForm.mobile });
AMessage.success('验证码发送成功');
} catch (error) {
$message.error('验证码发送失败');
AMessage.error('验证码发送失败');
// 重置倒计时
countdown.value = 0;
clearInterval(timer.value);
@ -260,22 +256,28 @@ const handleVerificationSubmit = async () => {
// 提交表单
const handleSubmit = async () => {
if (disabledSubmitBtn.value) return;
try {
// 校验所有字段
await formRef.value.validate();
if (!hasCheck.value) {
$message.error('请先勾选同意用户协议');
AMessage.error('请先勾选同意用户协议');
return;
}
submitting.value = true;
// 调用登录/注册API
await new Promise((resolve) => setTimeout(resolve, 1000));
// 处理登录成功逻辑
$message.success(isLogin.value ? '登录成功' : '注册成功');
router.replace({ path: '/dataEngine', replace: true });
const { code, data } = await fetchAuthorizationsCaptcha(loginForm);
if (code === 200) {
// 处理登录成功逻辑
AMessage.success(isLogin.value ? '登录成功' : '注册成功');
userStore.setToken(data.access_token);
handleUserLogin();
}
} catch (error) {
// 错误信息会显示在输入框下方
} finally {
@ -303,107 +305,6 @@ onUnmounted(() => {
});
</script>
<style scoped>
.content {
background-image: url('@/assets/img/BG.svg');
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-size: cover;
background-position: center;
background-color: #f0edff;
}
.form-input {
border: 1px solid #d7d7d9;
background-color: #fff;
border-radius: 4px;
width: 320px;
height: 48px;
font-size: 14px;
color: #333333;
}
.form-link {
color: #211f24;
font-size: 12px;
margin: 0px;
}
:deep(.arco-space-item) {
margin: 0px !important;
}
.account-bind-container {
width: 100%;
max-width: 400px;
margin: 0 auto;
display: flex;
}
.bind-card {
background-color: var(--color-bg-2);
width: 100%;
flex-direction: column;
align-items: start;
}
.bind-header {
margin-bottom: 8px;
text-align: left;
}
.phone-number {
font-size: 14px;
color: var(--color-text-4);
text-align: left;
}
.account-list {
margin-top: 16px;
}
.account-item {
padding: 12px 16px;
margin-bottom: 8px;
background-color: var(--color-bg-2);
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
}
.account-item {
padding: 12px 16px;
margin-bottom: 8px;
background-color: var(--color-bg-2);
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid var(--color-border-2);
box-shadow: 0 2px 4px 0 #b1b2b5;
}
.account-item.selected {
border-color: #6d4cfe;
background-color: rgba(109, 76, 254, 0.1);
box-shadow: 0 2px 4px 0 rgba(109, 76, 254, 0.5);
}
:deep(.arco-list-item-main) {
padding: 0;
}
:deep(.arco-list-item-actions) {
margin-left: 12px;
}
:deep(.arco-checkbox) {
margin-right: 0;
}
:deep(.arco-checkbox-checked .arco-checkbox-mask) {
background-color: #6d4cfe;
border-color: #6d4cfe;
}
<style scoped lang="scss">
@import './style.scss';
</style>

115
src/views/components/login/style.scss Normal file
View File

@ -0,0 +1,115 @@
.login-wrap {
.login-bg {
position: fixed;
left: 0;
right: 0;
top: 0;
height: 100%;
text-align: center;
background-image: url('@/assets/img/BG.svg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.form-link {
color: #211f24;
font-size: 12px;
margin: 0px;
}
.login-footer {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
.text {
font-family: Alibaba PuHuiTi;
font-weight: 400;
font-size: 14px;
line-height: 22px;
letter-spacing: 0%;
color: #939499;
}
}
:deep(.arco-space-item) {
margin: 0px !important;
}
}
.account-bind-container {
width: 100%;
max-width: 400px;
margin: 0 auto;
display: flex;
.bind-card {
background-color: var(--color-bg-2);
width: 100%;
flex-direction: column;
align-items: start;
}
.bind-header {
margin-bottom: 8px;
text-align: left;
}
.phone-number {
font-size: 14px;
color: var(--color-text-4);
text-align: left;
}
.account-list {
margin-top: 16px;
.account-item {
padding: 12px 16px;
margin-bottom: 8px;
background-color: var(--color-bg-2);
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
}
.account-item {
padding: 12px 16px;
margin-bottom: 8px;
background-color: var(--color-bg-2);
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid var(--color-border-2);
box-shadow: 0 2px 4px 0 #b1b2b5;
&.selected {
border-color: #6d4cfe;
background-color: rgba(109, 76, 254, 0.1);
box-shadow: 0 2px 4px 0 rgba(109, 76, 254, 0.5);
}
}
.account-item:deep(.arco-list-item-main) {
padding: 0;
}
:deep(.arco-list-item-actions) {
margin-left: 12px;
}
:deep(.arco-checkbox) {
margin-right: 0;
}
:deep(.arco-checkbox-checked .arco-checkbox-mask) {
background-color: #6d4cfe;
border-color: #6d4cfe;
}
}
}