Browse Source

refactor(login): 修复样式兼容,重构登录组件

master
wangxiang 2 years ago
parent
commit
3be2fdb1c6
  1. BIN
      src/assets/loginmini/icon/icon_dow.png
  2. BIN
      src/assets/loginmini/icon/jeecg_ad.png
  3. BIN
      src/assets/loginmini/icon/jeecg_logo.png
  4. 0
      src/assets/loginmini/icon/login-bg.png
  5. BIN
      src/assets/loginmini/icon/logo.png
  6. 236
      src/assets/loginmini/style/base.less
  7. 49
      src/assets/loginmini/style/home.less
  8. 7
      src/locales/lang/en/sys.ts
  9. 7
      src/locales/lang/zh-CN/sys.ts
  10. 52
      src/views/core/loginmini/MiniCodelogin.vue
  11. 119
      src/views/core/loginmini/MiniForgotpad.vue
  12. 293
      src/views/core/loginmini/MiniLogin.vue
  13. 105
      src/views/core/loginmini/MiniRegister.vue
  14. 86
      src/views/core/loginmini/OAuth2Login.vue

BIN
src/assets/loginmini/icon/icon_dow.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 536 B

BIN
src/assets/loginmini/icon/jeecg_ad.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

BIN
src/assets/loginmini/icon/jeecg_logo.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

0
src/assets/loginmini/icon/jeecg_bg.png → src/assets/loginmini/icon/login-bg.png

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

BIN
src/assets/loginmini/icon/logo.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 KiB

236
src/assets/loginmini/style/base.less

@ -41,11 +41,6 @@ body { @@ -41,11 +41,6 @@ body {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
}
a,
label,
button,
@ -54,18 +49,6 @@ select { @@ -54,18 +49,6 @@ select {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
img {
max-width: 100%;
height: auto;
display: block;
border: 0;
}
body {
background: #e3f0ff;
color: #666;
}
html,
body,
div,
@ -116,98 +99,6 @@ textarea { @@ -116,98 +99,6 @@ textarea {
outline: none;
}
li {
list-style: none;
}
a {
color: #666;
}
.clearfix::after {
clear: both;
content: '.';
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
}
.divHeight {
width: 100%;
height: 10px;
background: #f5f5f5;
position: relative;
overflow: hidden;
}
.r-line {
position: relative;
}
.r-line:after {
content: '';
position: absolute;
z-index: 0;
top: 0;
right: 0;
height: 100%;
border-right: 1px solid #d9d9d9;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.b-line {
position: relative;
}
.b-line:after {
content: '';
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
border-bottom: 1px solid #dedede;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.aui-arrow {
position: relative;
padding-right: 0.8rem;
}
.aui-arrow span {
font-size: 0.8rem;
color: #9b9b9b;
}
.aui-arrow:after {
content: ' ';
display: inline-block;
height: 6px;
width: 6px;
border-width: 2px 2px 0 0;
border-color: #848484;
border-style: solid;
-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
position: relative;
position: absolute;
top: 50%;
margin-top: -4px;
right: 2px;
border-radius: 1px;
}
.aui-flex {
display: -webkit-box;
display: -webkit-flex;
@ -227,125 +118,6 @@ a { @@ -227,125 +118,6 @@ a {
color: #333;
}
/* 必要布局样式css */
.aui-flexView {
width: 100%;
height: 100%;
margin: 0 auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.aui-scrollView {
width: 100%;
height: 100%;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
position: relative;
padding-bottom: 53px;
}
.aui-navBar {
height: 44px;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
z-index: 102;
background-color: #5064eb;
}
.aui-navBar-item {
height: 44px;
min-width: 15%;
-webkit-box-flex: 0;
-webkit-flex: 0 0 15%;
-ms-flex: 0 0 15%;
flex: 0 0 15%;
padding: 0 0.9rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
font-size: 0.7rem;
white-space: nowrap;
overflow: hidden;
color: #808080;
position: relative;
}
.aui-navBar-item:first-child {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1;
margin-right: -25%;
font-size: 0.9rem;
font-weight: bold;
}
.aui-navBar-item:last-child {
-webkit-box-ordinal-group: 4;
-webkit-order: 3;
-ms-flex-order: 3;
order: 3;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.aui-center {
-webkit-box-ordinal-group: 3;
-webkit-order: 2;
-ms-flex-order: 2;
order: 2;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 44px;
width: 80%;
margin-left: 22%;
}
.aui-center-title {
text-align: center;
width: 100%;
white-space: nowrap;
overflow: hidden;
display: block;
text-overflow: ellipsis;
font-size: 0.95rem;
color: #fff;
font-weight: 500;
}
.icon {
width: 20px;
height: 20px;
@ -358,8 +130,14 @@ a { @@ -358,8 +130,14 @@ a {
}
.login-background-img {
background-image: url(../icon/jeecg_bg.png);
background-image: url(../icon/login-bg.png);
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
}
@mini-login-prefix-cls: ~'@{namespace}-mini-login';
.@{mini-login-prefix-cls} {
width: 100%;
height: 100%;;
}

49
src/assets/loginmini/style/home.less

@ -1,6 +1,5 @@ @@ -1,6 +1,5 @@
.aui-content {
padding: 40px 60px;
min-height: 97vh;
width: 100%;
}
.aui-container {
@ -36,8 +35,23 @@ @@ -36,8 +35,23 @@
background-size: cover;
}
.aui-image-text{
.aui-image-text {
background-image: url(../icon/login-ad-text.png);
background-position: center;
background-repeat: repeat-x;
background-size: auto 530px;
width: 100%;
height: 100%;
&-register {
background-size: auto 630px;
}
&-codelogin {
background-size: auto 600px;
}
&-forgotpad {
background-size: auto 550px;
}
}
.aui-formBox {
@ -281,35 +295,6 @@ @@ -281,35 +295,6 @@
font-size: 14px;
}
.phoneChina {
position: absolute;
bottom: 10px;
left: 0;
font-size: 14px;
color: #040404;
}
.phoneChina::after {
position: absolute;
right: -25px;
bottom: 0;
content: '';
background-image: url(../icon/icon_dow.png);
background-size: 18px;
width: 18px;
height: 18px;
}
.phoneChina:before {
position: absolute;
right: -42px;
bottom: -15px;
content: ' ';
background: #fff;
width: 18px;
height: 18px;
}
.aui-ewm {
width: 280px;
margin: 0 auto;

7
src/locales/lang/en/sys.ts

@ -105,5 +105,12 @@ export default { @@ -105,5 +105,12 @@ export default {
smsCode: 'SMS code',
mobile: 'Mobile',
captcha: 'Captcha',
//重置密码页面英文
authentication:'authentication',
resetLoginPassword:'reset login password',
resetSuccess:'reset succeeded',
nextStep:'next step',
goToLogin:'go to login'
},
};

7
src/locales/lang/zh-CN/sys.ts

@ -100,5 +100,12 @@ export default { @@ -100,5 +100,12 @@ export default {
smsCode: '短信验证码',
mobile: '手机号码',
captcha: '验证码',
//重置密码页面中文
authentication:'验证身份',
resetLoginPassword:'重置登录密码',
resetSuccess:'重置成功',
nextStep:'下一步',
goToLogin:'去登录'
},
};

52
src/views/core/loginmini/MiniCodelogin.vue

@ -3,14 +3,12 @@ @@ -3,14 +3,12 @@
<div class="aui-container">
<div class="aui-form">
<div class="aui-image">
<div class="aui-image-text">
<img :src="adTextImg" alt="">
</div>
<div class="aui-image-text aui-image-text-codelogin"/>
</div>
<div class="aui-formBox aui-formEwm">
<div class="aui-formWell">
<form>
<div class="aui-flex aui-form-nav investment_title" style="padding-bottom: 19px">
<div class="aui-flex aui-form-nav" style="padding-bottom: 19px">
<div class="aui-flex-box activeNav">{{ t('sys.login.qrSignInFormTitle') }}</div>
</div>
<div class="aui-form-box">
@ -38,7 +36,7 @@ @@ -38,7 +36,7 @@
</div>
<div class="aui-flex-box">
<div class="aui-third-login">
<a href="" title="企业微信" @click="onThirdLogin('wechat_enterprise')"><icon-font class="item-icon" type="icon-qiyeweixin3"/></a>
<a title="支付宝" @click="onThirdLogin('alipay')"><AlipayCircleFilled/></a>
</div>
</div>
<div class="aui-flex-box">
@ -56,50 +54,35 @@ @@ -56,50 +54,35 @@
</div>
</div>
</div>
<!-- 第三方登录相关弹框 -->
<!--<ThirdModal ref="thirdModalRef"/>-->
</template>
<script lang="ts" setup name="mini-code-login">
<script lang="ts" setup>
import { ref, onUnmounted } from 'vue';
import { getCaptcha } from '/@/api/platform/core/controller/user';
import { useUserStore } from '/@/store/modules/user';
import { QrCode } from '/@/components/Qrcode/index';
//import ThirdModal from '/@/views/sys/login/ThirdModal.vue';
import logoImg from '/@/assets/images/logo-tag.png';
import adTextImg from '/@/assets/loginmini/icon/login-ad-text.png';
import { useI18n } from '/@/hooks/web/useI18n';
import { useDesign } from '/@/hooks/web/useDesign';
import { GithubFilled, WechatFilled, DingtalkCircleFilled, createFromIconfontCN } from '@ant-design/icons-vue';
import { GithubFilled, WechatFilled, DingtalkCircleFilled, AlipayCircleFilled } from '@ant-design/icons-vue';
import { useMessage } from '/@/hooks/web/useMessage';
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_2316098_umqusozousr.js',
});
const { prefixCls } = useDesign('minilogin');
const { t } = useI18n();
const qrCodeUrl = ref<string>('');
let timer: IntervalHandle;
const state = ref('0');
const thirdModalRef = ref();
const userStore = useUserStore();
const emit = defineEmits(['go-back', 'success', 'register']);
const { notification, createMessage } = useMessage();
//
/** 加载二维码信息 */
function loadQrCode() {
state.value = '0';
qrCodeUrl.value = 'https://github.com/wangxiang4';
/*getLoginQrcode().then((res) => {
qrCodeUrl.value = res.qrcodeId;
if (res.qrcodeId) {
openTimer(res.qrcodeId);
}
});*/
}
//
/** 监控扫码状态 */
function watchQrcodeToken(qrcodeId) {
/*getQrcodeToken({ qrcodeId: qrcodeId }).then((res) => {
let token = res.token;
/*let token = res.token;
if (token == '-2') {
//
loadQrCode();
@ -112,8 +95,7 @@ @@ -112,8 +95,7 @@
setTimeout(() => {
userStore.qrCodeLogin(token);
}, 500);
}
});*/
};**/
}
/** 开启定时器 */
@ -135,8 +117,10 @@ @@ -135,8 +117,10 @@
* @param type
*/
function onThirdLogin(type) {
thirdModalRef.value.onThirdLogin(type);
}
notification.success({
message: '功能待开发中.',
duration: 3,
}); }
/**
* 初始化表单
@ -162,6 +146,6 @@ @@ -162,6 +146,6 @@
});
</script>
<style lang="less" scoped>
@import '/@/assets/loginmini/style/home.less';
@import '/@/assets/loginmini/style/base.less';
@import '../../../assets/loginmini/style/home.less';
@import '../../../assets/loginmini/style/base.less';
</style>

119
src/views/core/loginmini/MiniForgotpad.vue

@ -3,9 +3,7 @@ @@ -3,9 +3,7 @@
<div class="aui-container">
<div class="aui-form">
<div class="aui-image">
<div class="aui-image-text">
<img :src="adTextImg" alt="">
</div>
<div class="aui-image-text aui-image-text-forgotpad"/>
</div>
<div class="aui-formBox">
<div class="aui-formWell">
@ -29,9 +27,8 @@ @@ -29,9 +27,8 @@
</div>
</div>
</div>
<div class="" style="height: 230px; position: relative">
<div style="height: 230px; position: relative">
<a-form v-if="activeKey === 1" ref="formRef" :model="formData">
<!-- 身份验证 begin -->
<div class="aui-account aui-account-line aui-forgot">
<a-form-item>
<div class="aui-input-line">
@ -46,10 +43,8 @@ @@ -46,10 +43,8 @@
<div v-else class="aui-code-line">{{ t('component.countdown.sendText',[unref(timeRuning)]) }}</div>
</div>
</div>
<!-- 身份验证 end -->
</a-form>
<a-form v-else-if="activeKey === 2" ref="pwdFormRef" :model="pwdFormData">
<!-- 重置密码 begin -->
<div class="aui-account aui-account-line aui-forgot">
<a-form-item>
<div class="aui-input-line">
@ -62,16 +57,13 @@ @@ -62,16 +57,13 @@
</div>
</a-form-item>
</div>
<!-- 重置密码 end -->
</a-form>
<!-- 重置成功 begin -->
<div v-else class="aui-success">
<div class="aui-success-icon">
<img :src="successImg">
</div>
<h3>恭喜您重置密码成功</h3>
</div>
<!-- 重置成功 end -->
</div>
<div class="aui-formButton" style="padding-bottom: 40px">
<div v-if="activeKey === 1 || activeKey === 2" class="aui-flex">
@ -90,21 +82,16 @@ @@ -90,21 +82,16 @@
</div>
</div>
</template>
<script lang="ts" name="mini-forgotpad" setup>
import { reactive, ref, toRaw, unref } from 'vue';
<script lang="ts" setup>
import { reactive, ref, unref } from 'vue';
import { useI18n } from '/@/hooks/web/useI18n';
import { LoginStateEnum, useFormRules, useFormValid, useLoginState } from '/@/views/core/login/useLogin';
import { useMessage } from '/@/hooks/web/useMessage';
import { getCaptcha } from '/@/api/platform/core/controller/user';
import logoImg from '/@/assets/images/logo-tag.png';
import adTextImg from '/@/assets/loginmini/icon/login-ad-text.png';
import successImg from '/@/assets/loginmini/icon/icon-success.png';
//
const activeKey = ref<number>(1);
const { t } = useI18n();
const { handleBackLogin } = useLoginState();
const { notification, createMessage, createErrorModal } = useMessage();
const { notification, createMessage } = useMessage();
//
const showInterval = ref<boolean>(true);
//60s
@ -128,47 +115,28 @@ @@ -128,47 +115,28 @@
const emit = defineEmits(['go-back', 'success', 'register']);
/**
* 下一步
* 验证身份下一步
*/
async function handleNext() {
if (!formData.mobile) {
/*if (!formData.mobile) {
createMessage.warn(t('sys.login.mobilePlaceholder'));
return;
}
if (!formData.smscode) {
createMessage.warn(t('sys.login.smsPlaceholder'));
return;
}
/*const resultInfo = await phoneVerify(
toRaw({
phone: formData.mobile,
smscode: formData.smscode,
})
);
if (resultInfo.success) {
Object.assign(accountInfo, {
username: resultInfo.result.username,
phone: formData.mobile,
smscode: formData.smscode,
});
activeKey.value = 2;
setTimeout(()=>{
pwdFormRef.value.resetFields();
},300);
} else {
notification.error({
message: '错误提示',
description: resultInfo.message || t('sys.api.networkExceptionMsg'),
duration: 3,
});
}*/
activeKey.value = 2;
setTimeout(()=>{
pwdFormRef.value.resetFields();
},300);
}
/**
* 完成修改密码
*/
async function finishedPwd() {
if (!pwdFormData.password) {
/*if (!pwdFormData.password) {
createMessage.warn(t('sys.login.passwordPlaceholder'));
return;
}
@ -179,27 +147,10 @@ @@ -179,27 +147,10 @@
if (pwdFormData.password !== pwdFormData.confirmPassword) {
createMessage.warn(t('sys.login.diffPwd'));
return;
}
/* const resultInfo = await passwordChange(
toRaw({
username: accountInfo.username,
password: pwdFormData.password,
smscode: accountInfo.smscode,
phone: accountInfo.phone,
})
);
if (resultInfo.success) {
accountInfo.password = pwdFormData.password;
//
activeKey.value = 3;
} else {
//
createErrorModal({
title: t('sys.api.errorTip'),
content: resultInfo.message || t('sys.api.networkExceptionMsg'),
});
}*/
activeKey.value = 3;
}
/**
* 下一步
*/
@ -231,27 +182,24 @@ @@ -231,27 +182,24 @@
* 获取手机验证码
*/
async function getLoginCode() {
if (!formData.mobile) {
/*if (!formData.mobile) {
createMessage.warn(t('sys.login.mobilePlaceholder'));
return;
}
/*const result = await getCaptcha({ mobile: formData.mobile, smsmode: SmsEnum.FORGET_PASSWORD });
if (result) {
const TIME_COUNT = 60;
if (!unref(timer)) {
timeRuning.value = TIME_COUNT;
showInterval.value = false;
timer.value = setInterval(() => {
if (unref(timeRuning) > 0 && unref(timeRuning) <= TIME_COUNT) {
timeRuning.value = timeRuning.value - 1;
} else {
showInterval.value = true;
clearInterval(unref(timer));
timer.value = null;
}
}, 1000);
}
}*/
const TIME_COUNT = 60;
if (!unref(timer)) {
timeRuning.value = TIME_COUNT;
showInterval.value = false;
timer.value = setInterval(() => {
if (unref(timeRuning) > 0 && unref(timeRuning) <= TIME_COUNT) {
timeRuning.value = timeRuning.value - 1;
} else {
showInterval.value = true;
clearInterval(unref(timer));
timer.value = null;
}
}, 1000);
}
}
/**
@ -261,7 +209,10 @@ @@ -261,7 +209,10 @@
activeKey.value = 1;
Object.assign(formData, { phone: '', smscode: '' });
Object.assign(pwdFormData, { password: '', confirmPassword: '' });
Object.assign(accountInfo, {});
Object.assign(accountInfo, {
username: 'admin',
password: '123456'
});
if(unref(timer)){
clearInterval(unref(timer));
timer.value = null;
@ -277,6 +228,6 @@ @@ -277,6 +228,6 @@
});
</script>
<style lang="less" scoped>
@import '/@/assets/loginmini/style/home.less';
@import '/@/assets/loginmini/style/base.less';
@import '../../../assets/loginmini/style/home.less';
@import '../../../assets/loginmini/style/base.less';
</style>

293
src/views/core/loginmini/MiniLogin.vue

@ -1,6 +1,6 @@ @@ -1,6 +1,6 @@
<template>
<div :class="prefixCls" class="login-background-img">
<AppLocalePicker class="absolute top-4 right-4 enter-x xl:text-gray-600" :showText="false"/>
<AppLocalePicker v-if="showLocale" class="absolute top-4 right-4 enter-x xl:text-gray-600" :showText="false"/>
<AppDarkModeToggle class="absolute top-3 right-10 enter-x"/>
<div v-if="!getIsMobile" class="aui-logo">
<div>
@ -10,32 +10,28 @@ @@ -10,32 +10,28 @@
</div>
</div>
<div v-else class="aui-phone-logo">
<img :src="logoImg">
<img :src="logoPhoneImg">
</div>
<div v-show="type === 'login'">
<div class="aui-content">
<div class="aui-container">
<div class="aui-form">
<div class="aui-image">
<div class="aui-image-text">
<img :src="adTextImg" alt="">
</div>
<div class="aui-image-text"/>
</div>
<div class="aui-formBox">
<div class="aui-formWell">
<div class="aui-flex aui-form-nav investment_title">
<div class="aui-flex aui-form-nav">
<div
class="aui-flex-box"
:class="activeIndex === 'accountLogin' ? 'activeNav on' : ''"
@click="loginClick('accountLogin')"
>{{ t('sys.login.signInFormTitle') }}
</div>
>{{ t('sys.login.signInFormTitle') }}</div>
<div
class="aui-flex-box"
:class="activeIndex === 'phoneLogin' ? 'activeNav on' : ''"
@click="loginClick('phoneLogin')"
>{{ t('sys.login.mobileSignInFormTitle') }}
</div>
>{{ t('sys.login.mobileSignInFormTitle') }}</div>
</div>
<div class="aui-form-box" style="height: 180px">
<a-form
@ -77,7 +73,7 @@ @@ -77,7 +73,7 @@
<img
v-else
style="margin-top: 2px; max-width: initial"
:src="codeImg"
:src="defaultCaptchaImg"
@click="handleChangeCheckCode"
>
</div>
@ -129,8 +125,7 @@ @@ -129,8 +125,7 @@
class="aui-link-login aui-flex-box"
type="primary"
@click="loginHandleClick"
>
{{ t('sys.login.loginButton') }}</a-button>
>{{ t('sys.login.loginButton') }}</a-button>
</div>
<div class="aui-flex">
<a class="aui-linek-code aui-flex-box" @click="codeHandleClick">{{ t('sys.login.qrSignInFormTitle') }}</a>
@ -140,7 +135,7 @@ @@ -140,7 +135,7 @@
</div>-->
</div>
</div>
<a-form @keypress.enter="loginHandleClick">
<a-form>
<div class="aui-flex aui-third-text">
<div class="aui-flex-box aui-third-border">
<span>{{ t('sys.login.otherSignIn') }}</span>
@ -154,7 +149,7 @@ @@ -154,7 +149,7 @@
</div>
<div class="aui-flex-box">
<div class="aui-third-login">
<a title="企业微信" @click="onThirdLogin('wechat_enterprise')"><icon-font class="item-icon" type="icon-qiyeweixin3"/></a>
<a title="支付宝" @click="onThirdLogin('alipay')"><AlipayCircleFilled/></a>
</div>
</div>
<div class="aui-flex-box">
@ -185,31 +180,24 @@ @@ -185,31 +180,24 @@
</div>
</div>
</template>
<script lang="ts" setup name="login-mini">
<script lang="ts" setup>
import { getCaptcha } from '/@/api/platform/core/controller/user';
import { computed, onMounted, reactive, ref, toRaw, unref } from 'vue';
import codeImg from '/@/assets/images/captcha.jpg';
import { Rule } from '/@/components/Form';
import { onMounted, reactive, ref, toRaw, unref } from 'vue';
import defaultCaptchaImg from '/@/assets/images/captcha.jpg';
import { useUserStore } from '/@/store/modules/user';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { LoginStateEnum } from '/@/views/core/login/useLogin';
//import ThirdModal from '/@/views/sys/login/ThirdModal.vue';
import MiniForgotpad from './MiniForgotpad.vue';
import MiniRegister from './MiniRegister.vue';
import MiniCodelogin from './MiniCodelogin.vue';
import adTextImg from '/@/assets/loginmini/icon/login-ad-text.png';
import logoImg from '/@/assets/images/logo-tag.png';
import logoPhoneImg from '/@/assets/images/logo.png';
import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
import { useLocaleStore } from '/@/store/modules/locale';
import { useDesign } from '/@/hooks/web/useDesign';
import { useAppInject } from '/@/hooks/web/useAppInject';
import { GithubFilled, WechatFilled, DingtalkCircleFilled, createFromIconfontCN } from '@ant-design/icons-vue';
import { GithubFilled, WechatFilled, AlipayCircleFilled, DingtalkCircleFilled } from '@ant-design/icons-vue';
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_2316098_umqusozousr.js',
});
const { prefixCls } = useDesign('mini-login');
const { notification, createMessage } = useMessage();
const userStore = useUserStore();
@ -219,48 +207,39 @@ @@ -219,48 +207,39 @@
const randCodeData = reactive<any>({
randCodeImage: '',
requestCodeSuccess: false,
checkKey: null,
});
const rememberMe = ref<string>('0');
//
//
const activeIndex = ref<string>('accountLogin');
const type = ref<string>('login');
//
//
const formData = reactive<any>({
realKey: '',
inputCode: '',
username: 'admin',
password: '123456',
});
//
//
const phoneFormData = reactive<any>({
mobile: '',
smscode: '',
});
const loginRef = ref();
//
const thirdModalRef = ref();
//
//
const codeRef = ref();
//
//
const showInterval = ref<boolean>(true);
//60s
// 60s
const timeRuning = ref<number>(60);
//
//
const timer = ref<any>(null);
//
//
const forgotRef = ref();
//
//
const registerRef = ref();
const loginLoading = ref<boolean>(false);
const { getIsMobile } = useAppInject();
defineProps({
sessionTimeout: {
type: Boolean,
},
});
/**
* 获取验证码
*/
@ -268,7 +247,7 @@ @@ -268,7 +247,7 @@
formData.inputCode = '';
try {
const codeModel = await getCaptcha();
randCodeData.randCodeImage = codeModel.img ?? codeImg;
randCodeData.randCodeImage = codeModel.img;
randCodeData.requestCodeSuccess = true;
formData.realKey = codeModel.realKey;
} catch(error) {
@ -288,10 +267,9 @@ @@ -288,10 +267,9 @@
*/
async function loginHandleClick() {
if (unref(activeIndex) === 'accountLogin') {
accountLogin();
await accountLogin();
} else {
//
phoneLogin();
await phoneLogin();
}
}
@ -326,7 +304,7 @@ @@ -326,7 +304,7 @@
} catch (error){
formData.code='';
formData.realKey='';
handleChangeCheckCode();
await handleChangeCheckCode();
} finally {
loginLoading.value = false;
}
@ -336,37 +314,10 @@ @@ -336,37 +314,10 @@
* 手机号登录
*/
async function phoneLogin() {
/*if (!phoneFormData.mobile) {
createMessage.warn(t('sys.login.mobilePlaceholder'));
return;
}
if (!phoneFormData.smscode) {
createMessage.warn(t('sys.login.smsPlaceholder'));
return;
}
try {
loginLoading.value = true;
const { userInfo }: any = await userStore.phoneLogin({
mobile: phoneFormData.mobile,
captcha: phoneFormData.smscode,
mode: 'none', //
});
if (userInfo) {
notification.success({
message: t('sys.login.loginSuccessTitle'),
description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realname}`,
duration: 3,
});
}
} catch (error) {
notification.error({
message: t('sys.api.errorTip'),
description: error.message || t('sys.login.networkExceptionMsg'),
duration: 3,
});
} finally {
loginLoading.value = false;
}*/
notification.success({
message: '功能待开发中.',
duration: 3,
});
}
/**
@ -376,24 +327,21 @@ @@ -376,24 +327,21 @@
/*if (!phoneFormData.mobile) {
createMessage.warn(t('sys.login.mobilePlaceholder'));
return;
}
const result = await getCaptcha({ mobile: phoneFormData.mobile, smsmode: SmsEnum.FORGET_PASSWORD });
if (result) {
const TIME_COUNT = 60;
if (!unref(timer)) {
timeRuning.value = TIME_COUNT;
showInterval.value = false;
timer.value = setInterval(() => {
if (unref(timeRuning) > 0 && unref(timeRuning) <= TIME_COUNT) {
timeRuning.value = timeRuning.value - 1;
} else {
showInterval.value = true;
clearInterval(unref(timer));
timer.value = null;
}
}, 1000);
}
}*/
const TIME_COUNT = 60;
if (!unref(timer)) {
timeRuning.value = TIME_COUNT;
showInterval.value = false;
timer.value = setInterval(() => {
if (unref(timeRuning) > 0 && unref(timeRuning) <= TIME_COUNT) {
timeRuning.value = timeRuning.value - 1;
} else {
showInterval.value = true;
clearInterval(unref(timer));
timer.value = null;
}
}, 1000);
}
}
/**
@ -401,7 +349,10 @@ @@ -401,7 +349,10 @@
* @param type
*/
function onThirdLogin(type) {
thirdModalRef.value.onThirdLogin(type);
notification.success({
message: '功能待开发中.',
duration: 3,
});
}
/**
@ -445,7 +396,7 @@ @@ -445,7 +396,7 @@
}
/**
* 注册
* 二维码登录
*/
function codeHandleClick() {
type.value = 'codeLogin';
@ -461,8 +412,8 @@ @@ -461,8 +412,8 @@
</script>
<style lang="less" scoped>
@import '/@/assets/loginmini/style/home.less';
@import '/@/assets/loginmini/style/base.less';
@import '../../../assets/loginmini/style/home.less';
@import '../../../assets/loginmini/style/base.less';
:deep(.ant-input:focus) {
box-shadow: none;
@ -489,10 +440,6 @@ @@ -489,10 +440,6 @@
color: #aaa !important;
}
:deep(.jeecg-dark-switch){
position:absolute;
margin-right: 10px;
}
.aui-link-login{
height: 42px;
padding: 10px 15px;
@ -514,85 +461,85 @@ @@ -514,85 +461,85 @@
</style>
<style lang="less">
@prefix-cls: ~'@{namespace}-mini-login';
@dark-bg: #293146;
@prefix-cls: ~'@{namespace}-mini-login';
@dark-bg: #293146;
html[data-theme='dark'] {
.@{prefix-cls} {
background-color: @dark-bg !important;
background-image: none;
html[data-theme='dark'] {
.@{prefix-cls} {
background-color: @dark-bg !important;
background-image: none;
&::before {
background-image: url(/@/assets/images/login-bg-dark.svg);
}
.aui-inputClear{
background-color: #232a3b !important;
}
.ant-input,
.ant-input-password {
background-color: #232a3b !important;
}
&::before {
background-image: url(/@/assets/images/login-bg-dark.svg);
}
.aui-inputClear{
background-color: #232a3b !important;
}
.ant-input,
.ant-input-password {
background-color: #232a3b !important;
}
.ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
border: 1px solid #4a5569 !important;
}
.ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
border: 1px solid #4a5569 !important;
}
&-form {
background: @dark-bg !important;
}
&-form {
background: @dark-bg !important;
}
.app-iconify {
color: #fff !important;
}
.aui-inputClear input,.aui-input-line input,.aui-choice{
color: #c9d1d9 !important;
}
.app-iconify {
color: #fff !important;
}
.aui-inputClear input,.aui-input-line input,.aui-choice{
color: #c9d1d9 !important;
}
.aui-formBox{
background-color: @dark-bg !important;
}
.aui-third-text span{
background-color: @dark-bg !important;
}
.aui-form-nav .aui-flex-box{
color: #c9d1d9 !important;
}
.aui-formBox{
background-color: @dark-bg !important;
}
.aui-third-text span{
background-color: @dark-bg !important;
}
.aui-form-nav .aui-flex-box{
color: #c9d1d9 !important;
}
.aui-formButton .aui-linek-code{
background: @dark-bg !important;
color: white !important;
}
.aui-code-line{
border-left: none !important;
}
.ant-checkbox-inner,.aui-success h3{
border-color: #c9d1d9;
.aui-formButton .aui-linek-code{
background: @dark-bg !important;
color: white !important;
}
.aui-code-line{
border-left: none !important;
}
.ant-checkbox-inner,.aui-success h3{
border-color: #c9d1d9;
}
}
}
input.fix-auto-fill,
.fix-auto-fill input {
-webkit-text-fill-color: #c9d1d9 !important;
box-shadow: inherit !important;
}
input.fix-auto-fill,
.fix-auto-fill input {
-webkit-text-fill-color: #c9d1d9 !important;
box-shadow: inherit !important;
}
&-sign-in-way {
.anticon {
font-size: 22px !important;
color: #888 !important;
cursor: pointer !important;
&-sign-in-way {
.anticon {
font-size: 22px !important;
color: #888 !important;
cursor: pointer !important;
&:hover {
color: @primary-color !important;
&:hover {
color: @primary-color !important;
}
}
}
.ant-divider-inner-text {
font-size: 12px !important;
color: @text-color-secondary !important;
}
.aui-third-login a{
background: transparent;
}
}
.ant-divider-inner-text {
font-size: 12px !important;
color: @text-color-secondary !important;
}
.aui-third-login a{
background: transparent;
}
}
</style>

105
src/views/core/loginmini/MiniRegister.vue

@ -1,11 +1,9 @@ @@ -1,11 +1,9 @@
<template>
<div class="aui-content">
<div class="aui-content ">
<div class="aui-container">
<div class="aui-form">
<div class="aui-image">
<div class="aui-image-text">
<img :src="jeecgAdTextImg" alt="">
</div>
<div class="aui-image-text aui-image-text-register"/>
</div>
<div class="aui-formBox">
<div class="aui-formWell">
@ -128,19 +126,15 @@ @@ -128,19 +126,15 @@
</div>
</template>
<script lang="ts" setup name="mini-register">
import { ref, reactive, unref, toRaw } from 'vue';
import { getCaptcha } from '/@/api/platform/core/controller/user';
import { LoginStateEnum } from '/@/views/core/login/useLogin';
<script lang="ts" setup>
import { ref, reactive, unref } from 'vue';
import { useMessage } from '/@/hooks/web/useMessage';
import logoImg from '/@/assets/images/logo-tag.png';
import jeecgAdTextImg from '/@/assets/loginmini/icon/login-ad-text.png';
import eyeKImg from '/@/assets/loginmini/icon/icon-eye-k.png';
import eyeGImg from '/@/assets/loginmini/icon/icon-eye-g.png';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
const { notification, createErrorModal, createMessage } = useMessage();
const { notification, createMessage } = useMessage();
const emit = defineEmits(['go-back', 'success', 'register']);
const formRef = ref();
const formData = reactive<any>({
@ -174,31 +168,28 @@ @@ -174,31 +168,28 @@
* 获取手机验证码
*/
async function getLoginCode() {
/*if (!formData.mobile) {
if (!formData.mobile) {
createMessage.warn(t('sys.login.mobilePlaceholder'));
return;
}
const result = await getCaptcha({ mobile: formData.mobile, smsmode: LoginStateEnum.REGISTER });
if (result) {
const TIME_COUNT = 60;
if (!unref(timer)) {
timeRuning.value = TIME_COUNT;
showInterval.value = false;
timer.value = setInterval(() => {
if (unref(timeRuning) > 0 && unref(timeRuning) <= TIME_COUNT) {
timeRuning.value = timeRuning.value - 1;
} else {
showInterval.value = true;
clearInterval(unref(timer));
timer.value = null;
}
}, 1000);
}
}*/
const TIME_COUNT = 60;
if (!unref(timer)) {
timeRuning.value = TIME_COUNT;
showInterval.value = false;
timer.value = setInterval(() => {
if (unref(timeRuning) > 0 && unref(timeRuning) <= TIME_COUNT) {
timeRuning.value = timeRuning.value - 1;
} else {
showInterval.value = true;
clearInterval(unref(timer));
timer.value = null;
}
}, 1000);
}
}
function registerHandleClick() {
if (!formData.username) {
/*if (!formData.username) {
createMessage.warn(t('sys.login.accountPlaceholder'));
return;
}
@ -225,7 +216,7 @@ @@ -225,7 +216,7 @@
if(!formData.policy){
createMessage.warn(t('sys.login.policyPlaceholder'));
return;
}
}*/
registerAccount();
}
@ -233,36 +224,10 @@ @@ -233,36 +224,10 @@
* 注册账号
*/
async function registerAccount() {
/*try {
const resultInfo = await register(
toRaw({
username: formData.username,
password: formData.password,
phone: formData.mobile,
smscode: formData.smscode,
})
);
if (resultInfo && resultInfo.data.success) {
notification.success({
description: resultInfo.data.message || t('sys.api.registerMsg'),
duration: 3,
});
emit('success', { username: formData.username, password: formData.password });
initForm();
} else {
notification.warning({
message: t('sys.api.errorTip'),
description: resultInfo.data.message || t('sys.api.networkExceptionMsg'),
duration: 3,
});
}
} catch (error) {
notification.error({
message: t('sys.api.errorTip'),
description: error.message || t('sys.api.networkExceptionMsg'),
duration: 3,
});
}*/
notification.success({
message: '功能待开发中.',
duration: 3,
});
}
/**
@ -299,13 +264,13 @@ @@ -299,13 +264,13 @@
});
</script>
<style lang="less" scoped>
@import '/@/assets/loginmini/style/home.less';
@import '/@/assets/loginmini/style/base.less';
.aui-input-line .aui-icon{
position: absolute;
z-index: 2;
top: 10px;
left: 10px;
font-size: 20px !important;
}
@import '../../../assets/loginmini/style/home.less';
@import '../../../assets/loginmini/style/base.less';
.aui-input-line .aui-icon{
position: absolute;
z-index: 2;
top: 10px;
left: 10px;
font-size: 20px !important;
}
</style>

86
src/views/core/loginmini/OAuth2Login.vue

@ -1,86 +0,0 @@ @@ -1,86 +0,0 @@
<template>
<div/>
</template>
<script setup lang="ts">
/*import { ref } from 'vue';
import { isOAuth2AppEnv, sysOAuth2Login } from '/@/views/sys/login/useLogin';
import { useRouter } from 'vue-router';
import { PageEnum } from '/@/enums/pageEnum';
import { router } from '/@/router';
import { useUserStore } from '/@/store/modules/user';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
const isOAuth = ref<boolean>(isOAuth2AppEnv());
const env = ref<any>({ thirdApp: false, wxWork: false, dingtalk: false });
const { currentRoute } = useRouter();
const route = currentRoute.value;
if (!isOAuth2AppEnv()) {
router.replace({ path: PageEnum.BASE_LOGIN, query: route.query });
}
if (isOAuth.value) {
checkEnv();
}
/!**
* 检测当前的环境
*!/
function checkEnv() {
//
if (/wxwork/i.test(navigator.userAgent)) {
env.value.thirdApp = true;
env.value.wxWork = true;
}
//
if (/dingtalk/i.test(navigator.userAgent)) {
env.value.thirdApp = true;
env.value.dingtalk = true;
}
doOAuth2Login();
}
/!**
* 进行OAuth2登录操作
*!/
function doOAuth2Login() {
if (env.value.thirdApp) {
// Token
if (route.query.oauth2LoginToken) {
let token = route.query.oauth2LoginToken;
//
thirdLogin({ token, thirdType: route.query.thirdType });
} else if (env.value.wxWork) {
sysOAuth2Login('wechat_enterprise');
} else if (env.value.dingtalk) {
sysOAuth2Login('dingtalk');
}
}
}
/!**
* 第三方登录
* @param params
*!/
function thirdLogin(params) {
const userStore = useUserStore();
const { notification } = useMessage();
const { t } = useI18n();
userStore.ThirdLogin(params).then((res) => {
if (res && res.userInfo) {
notification.success({
message: t('sys.login.loginSuccessTitle'),
description: `${t('sys.login.loginSuccessDesc')}: ${res.userInfo.realname}`,
duration: 3,
});
} else {
notification.error({
message: t('sys.login.errorTip'),
description: ((res.response || {}).data || {}).message || res.message || t('sys.login.networkExceptionMsg'),
duration: 4,
});
}
});
}*/
</script>
Loading…
Cancel
Save