Skip to content

B
bigDataSystem
Commit 0aeff2bc authored by liangjingpeng's avatar liangjingpeng
Browse files
Options

登录&&注册

parent 79051e49
Hide whitespace changes
Inline Side-by-side
Showing with 541 additions and 41 deletions
src/assets/svg/mallHome/login_mima.svg 0 → 100644
View file @ 0aeff2bc
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.2498 9.18649H3.74984C3.2896 9.18649 2.9165 9.55959 2.9165 10.0198V17.5198C2.9165 17.9801 3.2896 18.3532 3.74984 18.3532H16.2498C16.7101 18.3532 17.0832 17.9801 17.0832 17.5198V10.0198C17.0832 9.55959 16.7101 9.18649 16.2498 9.18649Z" stroke="#3F3F3F" stroke-width="2" stroke-linejoin="round"/>
<path d="M5.8335 9.16666V5.83528C5.83133 3.69591 7.46796 1.90298 9.61929 1.68798C11.7706 1.47297 13.7365 2.90586 14.1668 5.00245" stroke="#3F3F3F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 12.5V15" stroke="#3F3F3F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
src/assets/svg/mallHome/login_yonghu.svg 0 → 100644
View file @ 0aeff2bc
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 7.99997C11.6569 7.99997 13 6.65683 13 4.99997C13 3.34312 11.6569 1.99997 10 1.99997C8.34314 1.99997 7 3.34312 7 4.99997C7 6.65683 8.34314 7.99997 10 7.99997Z" stroke="#3F3F3F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 16.9143V17.4286H17V16.9143C17 14.9941 17 14.034 16.5931 13.3006C16.2352 12.6555 15.664 12.1309 14.9616 11.8022C14.1629 11.4286 13.1175 11.4286 11.0267 11.4286H8.97333C6.88248 11.4286 5.83705 11.4286 5.03844 11.8022C4.33596 12.1309 3.76483 12.6555 3.40691 13.3006C3 14.034 3 14.9941 3 16.9143Z" stroke="#3F3F3F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
src/locales/lang/zh-CN/sys.json
View file @ 0aeff2bc
......@@ -71,7 +71,7 @@
"scanSign": "扫码后点击\"确认\"，即可完成登录",
"loginButton": "登录",
"registerButton": "注册",
"rememberMe": "记住我",
"rememberMe": "记住密码",
"forgetPassword": "忘记密码?",
"otherSignIn": "其他登录方式",
"loginSuccessTitle": "登录成功",
......
src/router/routes/index.ts
View file @ 0aeff2bc
......@@ -45,6 +45,14 @@ export const aaaFontLoginRoute: AppRouteRecordRaw = {
title: '登录',
},
};
export const aaaFontRegisterRoute: AppRouteRecordRaw = {
path: '/aaaFont/register',
name: 'aaaFontRegister',
component: () => import('@/views/AAAFont/register/index.vue'),
meta: {
title: '注册',
},
};
export const PCFontRoute: AppRouteRecordRaw = {
path: '/aaaFont',
name: 'AAAFont',
......@@ -1483,6 +1491,7 @@ export const basicRoutes = [
BenchmarkRoute,
PCFontRoute,
aaaFontLoginRoute,
aaaFontRegisterRoute,
ServicePlatformRoute,
PersonalCenterRoute,
];
src/views/AAAFont/Login/LoginForm.vue 0 → 100644
View file @ 0aeff2bc
<template>
<!-- <LoginFormTitle v-show="getShow" class="enter-x" />-->
<Form
class="p-4 enter-x"
:model="formData"
:rules="getFormRules"
ref="formRef"
v-show="getShow"
@keypress.enter="handleLogin"
>
<FormItem name="account" class="enter-x">
<Input
size="large"
v-model:value="formData.account"
placeholder="请输入手机号或者用户名"
:placeholder="t('sys.login.userName')"
class="fix-auto-fill"
>
<template #prefix>
<img src="@/assets/svg/mallHome/login_yonghu.svg">
</template>
</Input>
</FormItem>
<FormItem name="password" class="enter-x">
<InputPassword
size="large"
visibilityToggle
v-model:value="formData.password"
placeholder="请输入密码"
:placeholder="t('sys.login.password')"
>
<template #prefix>
<img src="@/assets/svg/mallHome/login_mima.svg">
</template>
</InputPassword>
</FormItem>
<ARow class="enter-x">
<ACol :span="12">
<FormItem>
<!-- No logic, you need to deal with it yourself -->
<Checkbox v-model:checked="rememberMe" size="small">
{{ t('sys.login.rememberMe') }}
</Checkbox>
</FormItem>
</ACol>
<!-- <ACol :span="12">-->
<!-- <FormItem :style="{ 'text-align': 'right' }">-->
<!-- &lt;!&ndash; No logic, you need to deal with it yourself &ndash;&gt;-->
<!-- <Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">-->
<!-- {{ t('sys.login.forgetPassword') }}-->
<!-- </Button>-->
<!-- </FormItem>-->
<!-- </ACol>-->
</ARow>
<FormItem class="enter-x">
<Button type="primary" size="large" block @click="handleLogin" :loading="loading">
{{ t('sys.login.loginButton') }}
</Button>
<!-- <Button size="large" class="mt-4 enter-x" block @click="handleRegister">
{{ t('sys.login.registerButton') }}
</Button> -->
</FormItem>
<ARow class="enter-x">
<ACol :span="12">
<!-- <FormItem :style="{ 'text-align': 'left' }">-->
<!-- &lt;!&ndash; No logic, you need to deal with it yourself &ndash;&gt;-->
<!-- <Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">-->
<!-- {{ t('sys.login.forgetPassword') }}-->
<!-- </Button>-->
<!-- </FormItem>-->
<slot name="forgetmm"></slot>
</ACol>
<!-- <ACol :span="12">-->
<!-- <FormItem>-->
<!-- &lt;!&ndash; No logic, you need to deal with it yourself &ndash;&gt;-->
<!-- <Checkbox v-model:checked="rememberMe" size="small">-->
<!-- {{ t('sys.login.rememberMe') }}-->
<!-- </Checkbox>-->
<!-- </FormItem>-->
<!-- </ACol>-->
</ARow>
<!-- <ARow class="enter-x" :gutter="[16, 16]">-->
<!-- <ACol :md="8" :xs="24">-->
<!-- <Button block @click="setLoginState(LoginStateEnum.MOBILE)">-->
<!-- {{ t('sys.login.mobileSignInFormTitle') }}-->
<!-- </Button>-->
<!-- </ACol>-->
<!-- <ACol :md="8" :xs="24">-->
<!-- <Button block @click="setLoginState(LoginStateEnum.QR_CODE)">-->
<!-- {{ t('sys.login.qrSignInFormTitle') }}-->
<!-- </Button>-->
<!-- </ACol>-->
<!-- <ACol :md="8" :xs="24">-->
<!-- <Button block @click="setLoginState(LoginStateEnum.REGISTER)">-->
<!-- {{ t('sys.login.registerButton') }}-->
<!-- </Button>-->
<!-- </ACol>-->
<!-- </ARow>-->
<!-- <Divider class="enter-x">{{ t('sys.login.otherSignIn') }}</Divider>-->
<!-- <div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`">-->
<!-- <GithubFilled />-->
<!-- <WechatFilled />-->
<!-- <AlipayCircleFilled />-->
<!-- <GoogleCircleFilled />-->
<!-- <TwitterCircleFilled />-->
<!-- </div>-->
</Form>
</template>
<script lang="ts" setup>
import { reactive, ref, unref, computed } from 'vue';
import { Checkbox, Form, Input, Row, Col, Button, Divider } from 'ant-design-vue';
import {
GithubFilled,
WechatFilled,
AlipayCircleFilled,
GoogleCircleFilled,
TwitterCircleFilled,
} from '@ant-design/icons-vue';
import LoginFormTitle from './LoginFormTitle.vue';
import { useI18n } from '@/hooks/web/useI18n';
import { useMessage } from '@/hooks/web/useMessage';
import { useUserStore } from '@/store/modules/user';
import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
import { useDesign } from '@/hooks/web/useDesign';
import Icon from "@/components/Icon/Icon.vue";
//import { onKeyStroke } from '@vueuse/core';
const ACol = Col;
const ARow = Row;
const FormItem = Form.Item;
const InputPassword = Input.Password;
const { t } = useI18n();
const { notification, createErrorModal } = useMessage();
const { prefixCls } = useDesign('login');
const userStore = useUserStore();
const { setLoginState, getLoginState } = useLoginState();
const { getFormRules } = useFormRules();
const formRef = ref();
const loading = ref(false);
const rememberMe = ref(false);
const formData = reactive({
account: 'guanliyuan',
password: '123456',
});
const { validForm } = useFormValid(formRef);
//onKeyStroke('Enter', handleLogin);
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);
async function handleLogin() {
const data = await validForm();
if (!data) return;
try {
loading.value = true;
const userInfo = await userStore.login({
password: data.password,
username: data.account,
mode: 'none', //不要默认的错误提示
});
console.log('userInfo',userInfo)
if (userInfo) {
notification.success({
message: t('sys.login.loginSuccessTitle'),
description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.user.name}`,
duration: 3,
});
}
} catch (error) {
console.log('error',error)
createErrorModal({
title: t('sys.api.errorTip'),
content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'),
getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body,
});
} finally {
loading.value = false;
}
}
</script>
src/views/AAAFont/Login/index.vue
View file @ 0aeff2bc
......@@ -12,6 +12,10 @@
<span class="login-title-text">用户登录</span>
</div>
<LoginForm />
<div style="display: flex;justify-content: space-between">
<a-button type="link">忘记密码</a-button>
<a-button type="link" @click="handleRegister">没有账号, 立即注册</a-button>
</div>
</div>
</div>
</el-container>
......@@ -20,7 +24,7 @@
<script>
import Icon from '@/components/Icon/Icon.vue';
import LoginForm from '@/views/sys/login/LoginForm.vue';
import LoginForm from './LoginForm.vue';
export default {
name: 'Login',
......@@ -35,6 +39,10 @@
handleTitle() {
this.$router.replace('/aaaFont/font');
},
handleRegister() {
this.$router.push('/aaaFont/register');
// window.open('https://admin.fastice-tech.com/registe')
},
},
};
</script>
......
src/views/AAAFont/Login/useLogin.ts 0 → 100644
View file @ 0aeff2bc
import type { FormInstance } from 'ant-design-vue/lib/form/Form';
import type {
RuleObject,
NamePath,
Rule as ValidationRule,
} from 'ant-design-vue/lib/form/interface';
import { ref, computed, unref, Ref } from 'vue';
import { useI18n } from '@/hooks/web/useI18n';
export enum LoginStateEnum {
LOGIN,
REGISTER,
RESET_PASSWORD,
MOBILE,
QR_CODE,
}
const currentState = ref(LoginStateEnum.LOGIN);
// 这里也可以优化
// import { createGlobalState } from '@vueuse/core'
export function useLoginState() {
function setLoginState(state: LoginStateEnum) {
currentState.value = state;
}
const getLoginState = computed(() => currentState.value);
function handleBackLogin() {
setLoginState(LoginStateEnum.LOGIN);
}
return { setLoginState, getLoginState, handleBackLogin };
}
export function useFormValid<T extends Object = any>(formRef: Ref<FormInstance>) {
const validate = computed(() => {
const form = unref(formRef);
return form?.validate ?? ((_nameList?: NamePath) => Promise.resolve());
});
async function validForm() {
const form = unref(formRef);
if (!form) return;
const data = await form.validate();
return data as T;
}
return { validate, validForm };
}
export function useFormRules(formData?: Recordable) {
const { t } = useI18n();
const getAccountFormRule = computed(() => createRule(t('sys.login.accountPlaceholder')));
const getPasswordFormRule = computed(() => createRule(t('sys.login.passwordPlaceholder')));
const getSmsFormRule = computed(() => createRule(t('sys.login.smsPlaceholder')));
const getMobileFormRule = computed(() => createRule(t('sys.login.mobilePlaceholder')));
const validatePolicy = async (_: RuleObject, value: boolean) => {
return !value ? Promise.reject(t('sys.login.policyPlaceholder')) : Promise.resolve();
};
const validateConfirmPassword = (password: string) => {
return async (_: RuleObject, value: string) => {
if (!value) {
return Promise.reject(t('sys.login.passwordPlaceholder'));
}
if (value !== password) {
return Promise.reject(t('sys.login.diffPwd'));
}
return Promise.resolve();
};
};
const getFormRules = computed((): { [k: string]: ValidationRule | ValidationRule[] } => {
const accountFormRule = unref(getAccountFormRule);
const passwordFormRule = unref(getPasswordFormRule);
const smsFormRule = unref(getSmsFormRule);
const mobileFormRule = unref(getMobileFormRule);
const mobileRule = {
sms: smsFormRule,
mobile: mobileFormRule,
};
switch (unref(currentState)) {
// register form rules
case LoginStateEnum.REGISTER:
return {
account: accountFormRule,
password: passwordFormRule,
confirmPassword: [
{ validator: validateConfirmPassword(formData?.password), trigger: 'change' },
],
policy: [{ validator: validatePolicy, trigger: 'change' }],
...mobileRule,
};
// reset password form rules
case LoginStateEnum.RESET_PASSWORD:
return {
account: accountFormRule,
...mobileRule,
};
// mobile form rules
case LoginStateEnum.MOBILE:
return mobileRule;
// login form rules
default:
return {
account: accountFormRule,
password: passwordFormRule,
};
}
});
return { getFormRules };
}
function createRule(message: string): ValidationRule[] {
return [
{
required: true,
message,
trigger: 'change',
},
];
}
src/views/AAAFont/front/index.vue
View file @ 0aeff2bc
......@@ -11,14 +11,14 @@
</el-carousel>
</div>
<h3 class="content-item-h3">登记公式</h3>
<span class="title_bottom">共1114条数据，公示期为10个工作日</span>
<h3 class="content-item-h3">登记公示</h3>
<span class="title_bottom">共114条数据，公示期为10个工作日</span>
<div class="tab-pane">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane name="first">
<template #label>
<span class="mb-4" style="font-size: 24px; font-weight: 700; color: #1962e2"
>登记平台(1112)</span
>登记平台(112)</span
>
</template>
<el-row class="mt-5" :gutter="20">
......@@ -51,7 +51,7 @@
</div>
</div>
<div class="card_bottom">
<span style="color: #ec7520">公式中</span>
<span style="color: #ec7520">公示中</span>
<el-button class="button" round>提交异议</el-button>
</div>
</el-card>
......@@ -85,7 +85,7 @@
</div>
</div>
<div class="card_bottom">
<span style="color: #ec7520">公式中</span>
<span style="color: #ec7520">公示中</span>
<el-button class="button" round>提交异议</el-button>
</div>
</el-card>
......@@ -119,7 +119,7 @@
</div>
</div>
<div class="card_bottom">
<span style="color: #ec7520">公式中</span>
<span style="color: #ec7520">公示中</span>
<el-button class="button" round>提交异议</el-button>
</div>
</el-card>
......@@ -158,7 +158,7 @@
<el-tabs v-model="activeName1" @tab-click="handleClick">
<el-tab-pane name="first">
<template #label>
<span class="mb-4 tab-label">用户管理</span>
<span class="mb-4 tab-label">全部动态</span>
</template>
<div class="right-li">
<div class="li-left">
......@@ -340,7 +340,7 @@
</el-tab-pane>
<el-tab-pane name="fourth">
<template #label>
<span class="mb-4 tab-label">（用户登记）产品</span>
<span class="mb-4 tab-label">登记产品</span>
</template>
<el-table
class="mt-5"
......@@ -371,13 +371,26 @@
</el-button>
</el-button-group>
</div>
</div>
<div class="row-footer">
<div class="footer-title">
<span>大数据服务平台上线啦~</span>
</div>
<el-button plain class="footer-button" type="text" @click="toBackstage()">
立即前往<Icon class="ml-3" :size="20" icon="icon-park-solid:right-c"></Icon>
</el-button>
</div>
</div>
</div>
</template>
<script>
import Icon from '@/components/Icon/Icon.vue';
import { getToken } from '@/utils/auth';
export default {
name: 'Front',
......@@ -431,6 +444,21 @@
handleClick(tab, event) {
console.log(tab, event);
},
// 进入后台方法
toBackstage() {
console.log('activeIndex', this.activeIndex);
if (getToken()) {
this.$router.push({ path: '/homePage/index' });
} else {
this.$router.push({ path: '/login' });
}
// if (getToken()){
// this.$router.push({path: "/admin"});
// }else {
// this.$router.push({path: "/login"});
// }
},
},
};
</script>
......@@ -600,4 +628,31 @@
.table-span-label {
margin-left: 80px;
}
.row-footer{
height: 242px;
opacity: 0.8;
background-color: #1962E2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
.footer-title{
height: 48px;
color: #ffffff;
font-size: 32px;
font-weight: 500;
}
.footer-button{
width: 160px;
height: 51px;
font-size: 18px;
background-color: #FFFFFF;
color: #1962E2;
}
}
</style>
src/views/AAAFont/index.vue
View file @ 0aeff2bc
......@@ -42,6 +42,7 @@
class="long_btn"
style="color: #486fe1; background-color: #dce5f9"
type="primary"
@click="register"
>注册</el-button
>
</div>
......@@ -52,14 +53,6 @@
<router-view />
</div>
<div class="row-footer">
<div class="footer-title">
<span>大数据服务平台上线啦~</span>
</div>
<el-button plain class="footer-button" type="text" @click="toBackstage()">
立即前往<Icon class="ml-3" :size="20" icon="icon-park-solid:right-c"></Icon>
</el-button>
</div>
<div class="footer-item-por">
<div>版权所有:<span>天津市融创软通科技股份有限公司</span></div>
<div class="right-div">
......@@ -160,11 +153,12 @@
},
login() {
// this.$router.push({ path: '/aaaFont/Login' });
this.$router.replace('/aaaFont/Login');
this.$router.push('/aaaFont/Login');
// window.open('https://admin.fastice-tech.com/login')
},
register() {
this.$router.push('/aaaFont/register');
// window.open('https://admin.fastice-tech.com/registe')
},
......@@ -443,30 +437,8 @@
font-weight: 500;
}
.row-footer {
height: 242px;
opacity: 0.8;
background-color: #1962e2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
.footer-title {
height: 48px;
color: #ffffff;
font-size: 32px;
font-weight: 500;
}
.footer-button {
width: 160px;
height: 51px;
font-size: 18px;
background-color: #ffffff;
color: #1962e2;
}
}
/*底部版权所有样式*/
.footer-item-por {
......
src/views/AAAFont/register/index.vue 0 → 100644
View file @ 0aeff2bc
<template>
<div id="login">
<el-container>
<el-header class="header">
<div @click="handleTitle" class="official-title"> 数据要素交易服务平台 </div>
<div class="分割线"></div>
<div class="title-right">注册</div>
</el-header>
<div class="login-box">
<div class="login-win">
<div class="login-title">
<span class="login-title-text">用户登录</span>
</div>
<LoginForm/>
</div>
</div>
</el-container>
</div>
</template>
<script>
import Icon from '@/components/Icon/Icon.vue';
import LoginForm from '.././Login/LoginForm.vue';
export default {
name: 'register',
components: { LoginForm, Icon },
data() {
return {};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
handleTitle() {
this.$router.replace('/aaaFont/font');
},
},
};
</script>
<style scoped lang="scss">
body {
margin: 0;
}
#login {
min-width: 1366px;
width: auto;
position: relative;
/*transform: translate(0, 0);*/
background-color: #EFF3FA;
}
.header {
/*position: fixed;*/
z-index: 999;
width: 100%;
margin: auto;
height: 90px;
display: flex;
align-items: center;
top: 0;
background-color: #ffffff;
.title-right {
width: 36px;
height: 27px;
line-height: 27px;
color: #707070;
font-size: 18px;
margin-left: 40px;
}
}
/*标题样式*/
.official-title {
font-size: 24px;
font-weight: 600;
line-height: 28px;
padding: 0 40px;
margin-left: 22px;
/*display: flex;*/
/*justify-content: center;*/
position: relative;
}
.official-title::before {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 1px;
background-color: #dce7fb;
}
.login-box {
width: 100%;
aspect-ratio: 1920 / 863; /* 或者其他的宽高比 */
position: relative;
.login-win {
width: 427px;
height: 479px;
background: #fdfdfd;
outline: 10px solid rgba(255, 255, 255, 0.25);
border-radius: 8px;
position: absolute;
left: 60%;
top: 50%;
transform: translateY(-50%);
.login-title {
margin: 50px 0 30px 16px;
.login-title-text{
width: 128px;
height: 48px;
color: #3f3f3f;
font-size: 32px;
font-weight: 700;
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment