github_mirrors/gf-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/gf-vben-admin.git synced 2025-02-03 03:32:59 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

同步vben

Browse Source
This commit is contained in:
JinMao 2021-09-20 11:22:14 +08:00
parent 170c42d3ab
commit d3120cbfc0
4 changed files with 291 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/api/sys/user.ts
View File

@ -6,10 +6,12 @@ import { ErrorMessageMode } from '/#/axios';
enum Api { enum Api {
Login = '/login', Login = '/login',
Logout = '/logout', Logout = '/logout',
Register = '/register',
GetPermCode = '/getPermCode', GetPermCode = '/getPermCode',
GetUserInfo = '/user/info', GetUserInfo = '/user/info',
GetPermCodeByUserId = '/getPermCodeByUserId', GetPermCodeByUserId = '/getPermCodeByUserId',
} }
const url=`http://` + window.location.hostname + `:10088`
/** /**
* @description: user login api * @description: user login api
@ -22,7 +24,19 @@ export function loginApi(params: LoginParams, mode: ErrorMessageMode = 'modal')
}, },
{ {
errorMessageMode: mode, errorMessageMode: mode,
apiUrl: 'http://localhost:10088', apiUrl: url,
},
);
}
export function registerApi(params: LoginParams, mode: ErrorMessageMode = 'modal') {
return defHttp.post(
{
url: Api.Register,
params,
},
{
errorMessageMode: mode,
apiUrl: url,
}, },
); );
} }

6
src/views/sys/login/Login.vue
View File

@ -51,10 +51,10 @@
" "
> >
<LoginForm /> <LoginForm />
<ForgetPasswordForm /> <!-- <ForgetPasswordForm />-->
<RegisterForm /> <RegisterForm />
<MobileForm /> <!-- <MobileForm />-->
<QrCodeForm /> <!-- <QrCodeForm />-->
</div> </div>
</div> </div>
</div> </div>

40
src/views/sys/login/LoginForm.vue
View File

@ -53,16 +53,16 @@
</Button> --> </Button> -->
</FormItem> </FormItem>
<ARow class="enter-x"> <ARow class="enter-x">
<ACol :md="8" :xs="24"> <!-- <ACol :md="8" :xs="24">-->
<Button block @click="setLoginState(LoginStateEnum.MOBILE)"> <!-- <Button block @click="setLoginState(LoginStateEnum.MOBILE)">-->
{{ t('sys.login.mobileSignInFormTitle') }} <!-- {{ t('sys.login.mobileSignInFormTitle') }}-->
</Button> <!-- </Button>-->
</ACol> <!-- </ACol>-->
<ACol :md="8" :xs="24" class="!my-2 !md:my-0 xs:mx-0 md:mx-2"> <!-- <ACol :md="8" :xs="24" class="!my-2 !md:my-0 xs:mx-0 md:mx-2">-->
<Button block @click="setLoginState(LoginStateEnum.QR_CODE)"> <!-- <Button block @click="setLoginState(LoginStateEnum.QR_CODE)">-->
{{ t('sys.login.qrSignInFormTitle') }} <!-- {{ t('sys.login.qrSignInFormTitle') }}-->
</Button> <!-- </Button>-->
</ACol> <!-- </ACol>-->
<ACol :md="7" :xs="24"> <ACol :md="7" :xs="24">
<Button block @click="setLoginState(LoginStateEnum.REGISTER)"> <Button block @click="setLoginState(LoginStateEnum.REGISTER)">
{{ t('sys.login.registerButton') }} {{ t('sys.login.registerButton') }}
@ -70,15 +70,15 @@
</ACol> </ACol>
</ARow> </ARow>
<Divider class="enter-x">{{ t('sys.login.otherSignIn') }}</Divider> <!-- <Divider class="enter-x">{{ t('sys.login.otherSignIn') }}</Divider>-->
<div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`"> <!-- <div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`">-->
<GithubFilled /> <!-- <GithubFilled />-->
<WechatFilled /> <!-- <WechatFilled />-->
<AlipayCircleFilled /> <!-- <AlipayCircleFilled />-->
<GoogleCircleFilled /> <!-- <GoogleCircleFilled />-->
<TwitterCircleFilled /> <!-- <TwitterCircleFilled />-->
</div> <!-- </div>-->
</Form> </Form>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -119,8 +119,8 @@
const rememberMe = ref(false); const rememberMe = ref(false);
const formData = reactive({ const formData = reactive({
account: 'admin', account: '',
password: '123456', password: '',
}); });
const { validForm } = useFormValid(formRef); const { validForm } = useFormValid(formRef);

66
src/views/sys/login/RegisterForm.vue
View File

@ -1,31 +1,32 @@
<template> <template>
<template v-if="getShow"> <template v-if="getShow">
<LoginFormTitle class="enter-x" /> <LoginFormTitle class="enter-x" />
<Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
<Form class="p-4 enter-x" :model="formData" ref="formRef">
<FormItem name="account" class="enter-x"> <FormItem name="account" class="enter-x">
<Input <Input
class="fix-auto-fill" class="fix-auto-fill"
size="large" size="large"
v-model:value="formData.account" v-model:value="formData.username"
:placeholder="t('sys.login.userName')" :placeholder="t('sys.login.userName')"
/> />
</FormItem> </FormItem>
<FormItem name="mobile" class="enter-x"> <!-- <FormItem name="mobile" class="enter-x">-->
<Input <!-- <Input-->
size="large" <!-- size="large"-->
v-model:value="formData.mobile" <!-- v-model:value="formData.mobile"-->
:placeholder="t('sys.login.mobile')" <!-- :placeholder="t('sys.login.mobile')"-->
class="fix-auto-fill" <!-- class="fix-auto-fill"-->
/> <!-- />-->
</FormItem> <!-- </FormItem>-->
<FormItem name="sms" class="enter-x"> <!-- <FormItem name="sms" class="enter-x">-->
<CountdownInput <!-- <CountdownInput-->
size="large" <!-- size="large"-->
class="fix-auto-fill" <!-- class="fix-auto-fill"-->
v-model:value="formData.sms" <!-- v-model:value="formData.sms"-->
:placeholder="t('sys.login.smsCode')" <!-- :placeholder="t('sys.login.smsCode')"-->
/> <!-- />-->
</FormItem> <!-- </FormItem>-->
<FormItem name="password" class="enter-x"> <FormItem name="password" class="enter-x">
<StrengthMeter <StrengthMeter
size="large" size="large"
@ -37,17 +38,17 @@
<InputPassword <InputPassword
size="large" size="large"
visibilityToggle visibilityToggle
v-model:value="formData.confirmPassword" v-model:value="formData.password2"
:placeholder="t('sys.login.confirmPassword')" :placeholder="t('sys.login.confirmPassword')"
/> />
</FormItem> </FormItem>
<FormItem class="enter-x" name="policy"> <!-- <FormItem class="enter-x" name="policy">-->
<!-- No logic, you need to deal with it yourself --> <!-- &lt;!&ndash; No logic, you need to deal with it yourself &ndash;&gt;-->
<Checkbox v-model:checked="formData.policy" size="small"> <!-- <Checkbox v-model:checked="formData.policy" size="small">-->
{{ t('sys.login.policy') }} <!-- {{ t('sys.login.policy') }}-->
</Checkbox> <!-- </Checkbox>-->
</FormItem> <!-- </FormItem>-->
<Button <Button
type="primary" type="primary"
@ -73,6 +74,7 @@
import { CountdownInput } from '/@/components/CountDown'; import { CountdownInput } from '/@/components/CountDown';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '/@/hooks/web/useI18n';
import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin'; import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
import { registerApi } from '/@/api/sys/user';
const FormItem = Form.Item; const FormItem = Form.Item;
const InputPassword = Input.Password; const InputPassword = Input.Password;
@ -83,12 +85,9 @@
const loading = ref(false); const loading = ref(false);
const formData = reactive({ const formData = reactive({
account: '', username: '',
password: '', password: '',
confirmPassword: '', password2: '',
mobile: '',
sms: '',
policy: false,
}); });
const { getFormRules } = useFormRules(formData); const { getFormRules } = useFormRules(formData);
@ -97,8 +96,9 @@
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER); const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);
async function handleRegister() { async function handleRegister() {
const data = await validForm(); // const data = await validForm();
if (!data) return; // if (!data) return;
console.log(data); console.log(formData);
await registerApi(formData);
} }
</script> </script>