Commit a2261611 authored by youjie's avatar youjie

no message

parent d45633ef
<template>
<div class="w-full flex flex-col loginForm pt-[144px]">
<div class="flex justify-center">
<div class="w-[463px] h-[620px] ">
<div class="loginForm-bg w-full h-full rounded-[18px] flex flex-col">
<div class="text-center pt-[46px] primary-6">
<div class="text-[32px] font-bold">{{ t('login.forgetPassword') }}</div>
</div>
<a-space direction="vertical" class="px-[72px]">
<a-form :model="loginMsg" :rules="rules" @submit="loginHandler" layout="vertical"
class="mt-[77px]">
<a-form-item field="" :label="t('login.email')">
<a-input class="loginMsg-input"
v-model="loginMsg.account"
:placeholder="t('login.accountPlaceholder')"
:maxLength="16" size="large">
<!-- <template #prefix>
<icon-user size="16" strokeLinejoin="miter" />
</template> -->
</a-input>
</a-form-item>
<a-form-item field="" :label="t('login.verifyCode')" class="">
<a-input class="loginMsg-input"
v-model="loginMsg.password"
size="large"
:placeholder="t('login.verifyCodeRequired')"
:defaultVisibility="false"
:maxLength="50"
:invisible-button="false"
>
<template #suffix>
<a-divider direction="vertical" class="text-[16px] text-[#EEEFEB]"></a-divider>
<div class="cursor-pointer primary1 font-medium text-[16px]">{{ t('login.getVerifyCode') }}</div>
</template>
</a-input>
</a-form-item>
<div class="mt-[54px] flex flex-row items-center">
<a-button
type="primary"
size="large"
:loading="loading"
html-type="submit"
class="microsoft-font flex-1 font-bold text-gray-200 !h-[46px] !rounded-[13px] !text-base"
@click="nextStep"
>
{{ t('login.nextStep') }}
</a-button>
</div>
<div class="mt-[62px] flex justify-center items-center">
<div class="w-[42px] h-[42px] rounded-full bg-[#FFFFFF] flex items-center justify-center
shadow-[0_0_10px_rgba(0,0,0,0.1)] cursor-pointer"
@click="handleClick('/login')">
<icon-left size="24" strokeLinejoin="miter" />
</div>
</div>
</a-form>
</a-space>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, type Ref, computed,inject } from 'vue'
import { useUserStore } from '@/stores/index'
import UserServices from '@/services/ErpUserService'
import { ApiResult } from '@/types/ApiResult'
import { onMounted } from 'vue'
import VueHcaptcha from '@hcaptcha/vue3-hcaptcha'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import f from '@/assets/images/login_f.png'
import G from '@/assets/images/login_G.png'
import tel from '@/assets/images/login_tel.png'
import line from '@/assets/images/login_line.png'
const { t } = useI18n();
const userStore = useUserStore()
const loading = ref(false)
const currentTenantId = ref(0)
const needVerify = ref(false)
const validateToken = ref('')
const router = useRouter()
const invisibleHcaptcha = ref()
const loginMsg = reactive({
account: '17308037817',
password: '123456',
tenantId: null as string | null,
read: true,
})
const loginTypes = ref([
{
label: '',
value: 'f',
url: f,
},
{
label: '',
value: 'G',
url: G,
},
{
label: '',
value: 'tel',
url: tel,
},
{
label: '',
value: 'line',
url: line,
},
])
const currentType = ref('f')
const search = inject('search') as any;
//console.log(search.msg.loginType,'---------')
// 验证规则调整
const rules = computed(() => ({
account: [
{
required: true,
message: t('login.accountRequired'),
},
],
password: [
{
required: true,
message: t('login.passwordRequired'),
},
],
}))
const verifyHandler = (token: string, ekey: string) => {
validateToken.value = token
}
const verifyCheckHandler = async () => {
const response = await UserServices.NeedVerifyStatusAsync()
if (response.data.resultCode == ApiResult.SUCCESS) {
needVerify.value = response.data.data == 1
} else needVerify.value = true
}
const handleClick = (path: string) => {
router.push(path)
}
const nextStep = () => {
search.loginType = 6
}
const loginHandler = async ({ values, errors }: any) => {
if (errors || loading.value) return
loading.value = true
const result = await userStore.setUserPasswordLoginAsync(
loginMsg.account,
loginMsg.password,
validateToken.value,
loginMsg.tenantId?.toString() || '',
)
loading.value = false
currentTenantId.value = 0
if (result.status == 'SUCCESS') {
const forward = localStorage.getItem('forward')
localStorage.removeItem('forward')
router.push({
path: forward ? forward : '/',
})
} else {
if (!needVerify.value) needVerify.value = result.verify
if (invisibleHcaptcha.value && needVerify.value) invisibleHcaptcha.value.reset()
}
}
const initGoogleLogin = () => {
const cb = (data:any) => {
loading.value = true;
//that.onGoogleCredential(data.credential);
userStore.setUserGoogleLoginAsync(data.credential)
};
window.googleCallback = cb;
const s = document.createElement('script');
s.src = 'https://accounts.google.com/gsi/client';
document.body.appendChild(s);
}
onMounted(async () => {
//await verifyCheckHandler()
//initGoogleLogin()
})
</script>
<style scoped lang="scss">
:deep(.arco-form-item-content){
min-height: 46px;
border-radius: 12px;
}
:deep(.arco-input-wrapper){
height: 46px;
border-radius: 12px !important;
background-color: #EEEFEB;
}
:deep(.arco-input-focus){
border-radius: 12px;
box-shadow: rgba(60,85,62,0.18) 0px 5px 15px;
border: 2px solid var(--primary-2);
background-color: #FFFFFF;
}
:deep(.arco-form-item-label){
font-size: 16px;
padding-left: 17px;
}
:deep(.arco-input-wrapper .arco-input.arco-input-size-large){
font-size: 16px;
}
:deep(.arco-btn-primary){
box-shadow: rgba(74,102,77,0.15) 0px 5px 15px;
}
:deep(.arco-divider-text){
/*background: #fff;*/
font-size: 16px;
color: #C2C3C0;
font-weight: 400;
}
:deep(.arco-divider-horizontal){
width: 93px;
min-width: 93px;
border-bottom: 1px solid #EEF0E8;
}
:deep(.arco-input){
text-indent: 4px;
}
.loginForm-bg{
background: url('../../../assets/images/login_formbg.png')no-repeat white;
background-size: 100% 100%;
}
:deep(.arco-btn-primary){
background-color: var(--primary1-7);
}
:deep(.arco-btn-primary:hover){
background-color: var(--primary1-5);
}
.loginForm-item{
border: 1px solid var(--primary1-4);
}
.loginForm-itemActive{
border: 2px solid var(--primary1-1);
}
:deep(.arco-divider-vertical){
border-left: 1px solid var(--primary1-4);
}
</style>
<template>
<div class="w-full flex flex-col loginForm pt-[144px]">
<div class="flex justify-center">
<div class="w-[463px] h-[620px] ">
<div class="loginForm-bg w-full h-full rounded-[18px] flex flex-col">
<div class="text-center pt-[46px] primary-6">
<div class="text-[32px] font-bold">{{ t('login.resetPassword') }}</div>
</div>
<a-space direction="vertical" class="px-[72px]">
<a-form :model="loginMsg" :rules="rules" @submit="loginHandler" layout="vertical"
class="mt-[77px]">
<a-form-item field="" :label="t('login.newPassword')">
<a-input class="loginMsg-input"
v-model="loginMsg.account"
:placeholder="t('login.accountPlaceholder')"
:maxLength="16" size="large">
<!-- <template #prefix>
<icon-user size="16" strokeLinejoin="miter" />
</template> -->
</a-input>
</a-form-item>
<a-form-item field="" :label="t('login.confirmPassword')" class="">
<a-input class="loginMsg-input"
v-model="loginMsg.password"
size="large"
:placeholder="t('login.confirmPasswordRequired')"
:defaultVisibility="false"
:maxLength="50"
:invisible-button="false"
>
<template #suffix>
<a-divider direction="vertical" class="text-[16px] text-[#EEEFEB]"></a-divider>
<div class="cursor-pointer primary1 font-medium text-[16px]">{{ t('login.getVerifyCode') }}</div>
</template>
</a-input>
</a-form-item>
<div class="mt-[54px] flex flex-row items-center">
<a-button
type="primary"
size="large"
:loading="loading"
html-type="submit"
class="microsoft-font flex-1 font-bold text-gray-200 !h-[46px] !rounded-[13px] !text-base"
@click="loginHandler"
>
{{ t('login.confirm') }}
</a-button>
</div>
<div class="mt-[62px] flex justify-center items-center">
<div class="w-[42px] h-[42px] rounded-full bg-[#FFFFFF] flex items-center justify-center
shadow-[0_0_10px_rgba(0,0,0,0.1)] cursor-pointer"
@click="prevStep">
<icon-left size="24" strokeLinejoin="miter" />
</div>
</div>
</a-form>
</a-space>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, type Ref, computed,inject } from 'vue'
import { useUserStore } from '@/stores/index'
import UserServices from '@/services/ErpUserService'
import { ApiResult } from '@/types/ApiResult'
import { onMounted } from 'vue'
import VueHcaptcha from '@hcaptcha/vue3-hcaptcha'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import f from '@/assets/images/login_f.png'
import G from '@/assets/images/login_G.png'
import tel from '@/assets/images/login_tel.png'
import line from '@/assets/images/login_line.png'
const { t } = useI18n();
const userStore = useUserStore()
const loading = ref(false)
const currentTenantId = ref(0)
const needVerify = ref(false)
const validateToken = ref('')
const router = useRouter()
const invisibleHcaptcha = ref()
const loginMsg = reactive({
account: '17308037817',
password: '123456',
tenantId: null as string | null,
read: true,
})
const loginTypes = ref([
{
label: '',
value: 'f',
url: f,
},
{
label: '',
value: 'G',
url: G,
},
{
label: '',
value: 'tel',
url: tel,
},
{
label: '',
value: 'line',
url: line,
},
])
const currentType = ref('f')
const search = inject('search') as any;
//console.log(search.msg.loginType,'---------')
// 验证规则调整
const rules = computed(() => ({
account: [
{
required: true,
message: t('login.accountRequired'),
},
],
password: [
{
required: true,
message: t('login.passwordRequired'),
},
],
}))
const verifyHandler = (token: string, ekey: string) => {
validateToken.value = token
}
const verifyCheckHandler = async () => {
const response = await UserServices.NeedVerifyStatusAsync()
if (response.data.resultCode == ApiResult.SUCCESS) {
needVerify.value = response.data.data == 1
} else needVerify.value = true
}
const prevStep = () => {
search.loginType = 5
}
const loginHandler = async ({ values, errors }: any) => {
if (errors || loading.value) return
loading.value = true
const result = await userStore.setUserPasswordLoginAsync(
loginMsg.account,
loginMsg.password,
validateToken.value,
loginMsg.tenantId?.toString() || '',
)
loading.value = false
currentTenantId.value = 0
if (result.status == 'SUCCESS') {
const forward = localStorage.getItem('forward')
localStorage.removeItem('forward')
router.push({
path: forward ? forward : '/',
})
} else {
if (!needVerify.value) needVerify.value = result.verify
if (invisibleHcaptcha.value && needVerify.value) invisibleHcaptcha.value.reset()
}
}
const initGoogleLogin = () => {
const cb = (data:any) => {
loading.value = true;
//that.onGoogleCredential(data.credential);
userStore.setUserGoogleLoginAsync(data.credential)
};
window.googleCallback = cb;
const s = document.createElement('script');
s.src = 'https://accounts.google.com/gsi/client';
document.body.appendChild(s);
}
onMounted(async () => {
//await verifyCheckHandler()
//initGoogleLogin()
})
</script>
<style scoped lang="scss">
:deep(.arco-form-item-content){
min-height: 46px;
border-radius: 12px;
}
:deep(.arco-input-wrapper){
height: 46px;
border-radius: 12px !important;
background-color: #EEEFEB;
}
:deep(.arco-input-focus){
border-radius: 12px;
box-shadow: rgba(60,85,62,0.18) 0px 5px 15px;
border: 2px solid var(--primary-2);
background-color: #FFFFFF;
}
:deep(.arco-form-item-label){
font-size: 16px;
padding-left: 17px;
}
:deep(.arco-input-wrapper .arco-input.arco-input-size-large){
font-size: 16px;
}
:deep(.arco-btn-primary){
box-shadow: rgba(74,102,77,0.15) 0px 5px 15px;
}
:deep(.arco-divider-text){
/*background: #fff;*/
font-size: 16px;
color: #C2C3C0;
font-weight: 400;
}
:deep(.arco-divider-horizontal){
width: 93px;
min-width: 93px;
border-bottom: 1px solid #EEF0E8;
}
:deep(.arco-input){
text-indent: 4px;
}
.loginForm-bg{
background: url('../../../assets/images/login_formbg.png')no-repeat white;
background-size: 100% 100%;
}
:deep(.arco-btn-primary){
background-color: var(--primary1-7);
}
:deep(.arco-btn-primary:hover){
background-color: var(--primary1-5);
}
.loginForm-item{
border: 1px solid var(--primary1-4);
}
.loginForm-itemActive{
border: 2px solid var(--primary1-1);
}
:deep(.arco-divider-vertical){
border-left: 1px solid var(--primary1-4);
}
</style>
......@@ -30,7 +30,7 @@
<a-form-item field="email" :label="t('login.email')">
<a-input class="formData-input"
v-model="formData.email"
placeholder=""
:placeholder="t('login.emailRequired')"
size="large"
@blur="handleEmailBlur" @input="handleEmailChange">
</a-input>
......
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