feat: 登录页面
This commit is contained in:
renxiaodong
@ -1,20 +1,16 @@
|
||||
import Http from '@/api';
|
||||
|
||||
|
||||
// 导出一个函数，用于获取登录验证码
|
||||
export const fetchLoginCaptCha = (params = {}) => {
|
||||
|
||||
return Http.post('/v1/sms/login-captcha', params);
|
||||
};
|
||||
|
||||
|
||||
// 导出一个函数，用于获取验证码
|
||||
export const fetchAuthorizationsCaptcha = (params = {}) => {
|
||||
// 使用Http.post方法，发送POST请求，请求地址为'/v1/authorizations/captcha'，请求参数为params
|
||||
return Http.post('/v1/authorizations/captcha', params);
|
||||
};
|
||||
|
||||
|
||||
// 导出一个函数，用于获取授权信息
|
||||
export const fetchAuthorizations = (params = {}) => {
|
||||
// 使用Http.put方法，向服务器发送PUT请求，获取授权信息
|
||||
@ -27,22 +23,18 @@ export const fetchLogOut = (params = {}) => {
|
||||
return Http.put('/v1/authorizations', params);
|
||||
};
|
||||
|
||||
|
||||
// 导出一个名为fetchProfileInfo的函数，用于获取用户信息
|
||||
export const fetchProfileInfo = (params = {}) => {
|
||||
// 使用Http.put方法，向/v1/me接口发送put请求，并将params作为参数传递
|
||||
return Http.put('/v1/me', params);
|
||||
};
|
||||
|
||||
|
||||
// 导出一个函数，用于获取编辑手机号的验证码
|
||||
export const fetchEditPhoneCaptcha = (params = {}) => {
|
||||
// 使用Http.put方法，向服务器发送PUT请求，获取编辑手机号的验证码
|
||||
return Http.put('/v1/sms/update-mobile-captcha', params);
|
||||
};
|
||||
|
||||
|
||||
export const fetchBindPhone = (params = {}) => {
|
||||
return Http.put('/v1/me/mobile', params);
|
||||
};
|
||||
|
||||
|
||||
@ -1,32 +1,46 @@
|
||||
/*
|
||||
* @Author: 田鑫
|
||||
* @Date: 2023-02-17 11:58:44
|
||||
* @LastEditors: 田鑫
|
||||
* @LastEditTime: 2023-03-05 19:17:29
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2025-06-20 06:00:54
|
||||
* @Description:
|
||||
*/
|
||||
|
||||
import axios from 'axios';
|
||||
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
|
||||
import { handleUserLogout } from '@/utils/user';
|
||||
|
||||
const contentType = 'application/json';
|
||||
const requestTimeout = 30000;
|
||||
|
||||
const HttpStatusCode = {
|
||||
OK: 200,
|
||||
BadRequest: 400, // 请求参数错误
|
||||
Unauthorized: 401, // token 无效或过期
|
||||
NotFound: 404,
|
||||
InternalServerError: 500,
|
||||
};
|
||||
|
||||
//* 导出Request类，可以用来自定义传递配置来创建实例
|
||||
export class Request {
|
||||
//* axios 实例
|
||||
private instance: AxiosInstance;
|
||||
//* 基础配置
|
||||
private baseConfig: AxiosRequestConfig = { baseURL: import.meta.env.EO_API_URL, timeout: 60000 };
|
||||
private baseConfig: AxiosRequestConfig = {
|
||||
baseURL: import.meta.env.EO_API_URL,
|
||||
timeout: requestTimeout,
|
||||
headers: {
|
||||
'Content-Type': contentType,
|
||||
},
|
||||
};
|
||||
|
||||
public constructor(config: AxiosRequestConfig) {
|
||||
this.instance = axios.create(Object.assign(this.baseConfig, config));
|
||||
|
||||
this.instance.interceptors.request.use(
|
||||
(config: AxiosRequestConfig) => {
|
||||
const token = localStorage.getItem('token') as string;
|
||||
if (token) {
|
||||
config.headers!.Authorization = token;
|
||||
} else {
|
||||
config.headers!.satoken = '123';
|
||||
}
|
||||
const token = localStorage.getItem('accessToken') as string;
|
||||
config.headers!.Authorization = token;
|
||||
return config;
|
||||
},
|
||||
(err: any) => {
|
||||
@ -36,21 +50,17 @@ export class Request {
|
||||
|
||||
this.instance.interceptors.response.use(
|
||||
(res: AxiosResponse) => {
|
||||
//* http请求成功
|
||||
//* 存入通用response header
|
||||
let tenanttype = localStorage.getItem('tenanttype') as string;
|
||||
if (!tenanttype) {
|
||||
tenanttype = res.headers!.tenanttype;
|
||||
localStorage.setItem('tenanttype', tenanttype);
|
||||
const { data } = res;
|
||||
switch (data.code) {
|
||||
case HttpStatusCode.OK:
|
||||
return data;
|
||||
default:
|
||||
return Promise.reject(data);
|
||||
}
|
||||
if (res.data.code === 200) {
|
||||
return res.data.data;
|
||||
}
|
||||
AMessage.error(res.data!.msg);
|
||||
return Promise.reject(res.data);
|
||||
},
|
||||
(err: any) => {
|
||||
// AMessage.error(err.message);
|
||||
const message = err.response?.data?.message ?? err.message;
|
||||
AMessage.error(message);
|
||||
// 这里用来处理http常见错误，进行全局提示
|
||||
return Promise.reject(err.response);
|
||||
},
|
||||
|
||||
@ -2,10 +2,11 @@
|
||||
import { useAppStore } from '@/stores';
|
||||
import { IconExport, IconFile, IconCaretDown } from '@arco-design/web-vue/es/icon';
|
||||
import { fetchMenusTree } from '@/api/all';
|
||||
import { handleUserLogout } from '@/utils/user';
|
||||
const lists = ref([]);
|
||||
const router = useRouter();
|
||||
const clickExit = () => {
|
||||
router.replace('/login');
|
||||
handleUserLogout();
|
||||
};
|
||||
const getMenus = async () => {
|
||||
const res = await fetchMenusTree();
|
||||
@ -16,7 +17,6 @@ onMounted(() => {
|
||||
});
|
||||
const appStore = useAppStore();
|
||||
|
||||
|
||||
function setServerMenu() {
|
||||
appStore.fetchServerMenuConfig();
|
||||
console.log(appStore.serverMenu);
|
||||
@ -59,7 +59,7 @@ const handleDopdownClick = (index: any, ind: any) => {
|
||||
<div class="center-side">
|
||||
<div class="menu-demo">
|
||||
<a-menu mode="horizontal" :default-selected-keys="['1']">
|
||||
<a-menu-item :key="'1'" @click="handleSelect(0)">
|
||||
<a-menu-item key="1" @click="handleSelect(0)">
|
||||
<view>工作台</view>
|
||||
</a-menu-item>
|
||||
<a-menu-item v-for="(item, index) in lists" :key="index + 2">
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
/*
|
||||
* @Author: 田鑫
|
||||
* @Date: 2023-03-05 18:14:17
|
||||
* @LastEditors: 田鑫
|
||||
* @LastEditTime: 2023-03-05 19:20:40
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @LastEditTime: 2025-06-20 05:35:27
|
||||
* @Description:
|
||||
*/
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
@ -20,7 +20,7 @@ const router = createRouter({
|
||||
routes: [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
name: 'UserLogin',
|
||||
component: () => import('@/views/components/login'),
|
||||
},
|
||||
{
|
||||
@ -30,7 +30,7 @@ const router = createRouter({
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
name: 'dataEngine',
|
||||
name: 'Home',
|
||||
redirect: '/dataEngine/dataEngine/hotTranslation',
|
||||
children: [...appRoutes, REDIRECT_MAIN, NOT_FOUND_ROUTE],
|
||||
},
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
const pinia = createPinia();
|
||||
/*
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-19 01:45:53
|
||||
*/
|
||||
import { createPinia } from 'pinia';
|
||||
const store = createPinia();
|
||||
|
||||
export default pinia;
|
||||
export default store;
|
||||
|
||||
export * from './modules';
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import type { AppState, RouteRecordNormalized, NotificationReturn } from './types';
|
||||
|
||||
import defaultSettings from '@/config/settings.json';
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
/*
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-19 01:45:53
|
||||
*/
|
||||
import { defineStore } from 'pinia';
|
||||
import type { TabBarState, TagProps, RouteLocationNormalized } from './types';
|
||||
|
||||
import { DEFAULT_ROUTE, DEFAULT_ROUTE_NAME, REDIRECT_ROUTE_NAME } from '@/router/constants';
|
||||
|
||||
@ -1,46 +1,29 @@
|
||||
/*
|
||||
* @Author: 田鑫
|
||||
* @Date: 2023-03-05 14:57:17
|
||||
* @LastEditors: 田鑫
|
||||
* @LastEditTime: 2023-03-05 15:29:15
|
||||
* @Description: 用户相关状态
|
||||
*/
|
||||
|
||||
type Role = 'ENTERPRISE' | 'PERSON';
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
interface UserState {
|
||||
role: Role;
|
||||
isLogin: boolean;
|
||||
token: String;
|
||||
}
|
||||
|
||||
export const useUserStore = defineStore('user', {
|
||||
state: (): UserState => ({
|
||||
role: 'PERSON',
|
||||
isLogin: false,
|
||||
token: localStorage.getItem('accessToken') || '',
|
||||
}),
|
||||
|
||||
getters: {
|
||||
userRole(state) {
|
||||
return state.role;
|
||||
},
|
||||
userIsLogin(state) {
|
||||
return state.isLogin;
|
||||
},
|
||||
},
|
||||
getters: {},
|
||||
|
||||
actions: {
|
||||
setUserRole(role: Role) {
|
||||
this.role = role;
|
||||
setToken(token: String) {
|
||||
const _token = `Bearer ${token}`;
|
||||
this.token = _token;
|
||||
localStorage.setItem('accessToken', _token);
|
||||
},
|
||||
|
||||
setUserLoginStatus(isLogin: boolean) {
|
||||
this.isLogin = isLogin;
|
||||
deleteToken() {
|
||||
this.token = '';
|
||||
localStorage.removeItem('accessToken');
|
||||
},
|
||||
|
||||
async getUserInfo() {
|
||||
// todo 调用获取用户信息接口，当前用mock数据表示
|
||||
AMessage.success(`当前用户角色为：ENTERPRISE`)
|
||||
this.setUserRole('ENTERPRISE');
|
||||
// AMessage.success(`当前用户角色为：ENTERPRISE`);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
29
src/utils/user.ts
Normal file
29
src/utils/user.ts
Normal file
@ -0,0 +1,29 @@
|
||||
/*
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-20 05:32:19
|
||||
*/
|
||||
import router from '@/router';
|
||||
|
||||
import { useUserStore } from '@/stores';
|
||||
|
||||
// 登录
|
||||
export function goUserLogin(query?: any) {
|
||||
router.push({ name: 'UserLogin', query });
|
||||
}
|
||||
|
||||
// 登录处理
|
||||
export async function handleUserLogin() {
|
||||
handleUserHome();
|
||||
}
|
||||
|
||||
// 首页
|
||||
export function handleUserHome() {
|
||||
router.push({ name: 'Home' });
|
||||
}
|
||||
|
||||
export function handleUserLogout() {
|
||||
const userStore = useUserStore();
|
||||
userStore.deleteToken();
|
||||
|
||||
goUserLogin();
|
||||
}
|
||||
@ -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
115
src/views/components/login/style.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user