搜索结果列表页面开发
This commit is contained in:
付民康
49
src/views/Mobile/Account/BindPhone/index.vue
Normal file
49
src/views/Mobile/Account/BindPhone/index.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import BindHw from '@/components/LoginModal/bind.vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { computed } from 'vue';
|
||||
import { useAccount } from '@/utils/hooks/useAccount';
|
||||
import { Message } from 'vue-devui/message';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { RecordInfo } = useAccount();
|
||||
|
||||
const formProps = computed(() => route.query as {
|
||||
mobile: string,
|
||||
user_id: string,
|
||||
mask: string
|
||||
});
|
||||
|
||||
const handleSubmit = (conf: any) => {
|
||||
const { username, email } = conf;
|
||||
RecordInfo(conf);
|
||||
Message.success({
|
||||
message: '欢迎来到Gitcode!'
|
||||
});
|
||||
if (`${username}@gitcode.com` === email) { // 需要修改默认邮箱的弹窗
|
||||
localStorage.setItem('validator_email', 'invalid');
|
||||
} else {
|
||||
localStorage.setItem('validator_email', 'valid');
|
||||
}
|
||||
router.replace('/');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-white h-[100%]">
|
||||
<div class="gm-login-bind-hw">
|
||||
<BindHw v-bind="formProps" :show-close="false" @submit="handleSubmit" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.gm-login-bind-hw {
|
||||
.devui-input,.devui-button{
|
||||
height: 38px!important;
|
||||
}
|
||||
@apply box-border p-[32px] m-auto
|
||||
sm:w-[414px] w-[100%];
|
||||
}
|
||||
</style>
|
||||
237
src/views/Mobile/Account/Login/Password/index.vue
Normal file
237
src/views/Mobile/Account/Login/Password/index.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<script setup lang="ts">
|
||||
import GForm, { type FormListProps } from '@/components/Form';
|
||||
import type { GLogoProps } from '@/components/LoginModal/types';
|
||||
import GAuth from '@/components/LoginModal/widget/auth.vue';
|
||||
import GAgreement from '@/components/LoginModal/widget/agreement.vue';
|
||||
import { TransAssetsUrl } from '@/utils/asset';
|
||||
import { ref, reactive } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { Button } from 'vue-devui/button';
|
||||
import { useFormInteraction } from '@/utils/hooks/useForm';
|
||||
import { toLogin } from '@/api/user';
|
||||
|
||||
const IconSource = (import.meta as any).glob('@/assets/imgs/icon/login-modal/*svg', { eager: true });
|
||||
const IconH = TransAssetsUrl(IconSource, 'logo-gitee');
|
||||
const IconC = TransAssetsUrl(IconSource, 'logo-csdn');
|
||||
const IconG = TransAssetsUrl(IconSource, 'logo-github');
|
||||
const IconM = TransAssetsUrl(IconSource, 'logo-mobile');
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const Form = ref<FormListProps[]>([
|
||||
{
|
||||
type: 'input',
|
||||
key: 'username',
|
||||
label: '用户名/邮箱',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
key: 'password',
|
||||
label: '密码',
|
||||
required: true,
|
||||
props: {
|
||||
'show-password': true,
|
||||
'autocomplete': true,
|
||||
'maxlength': 30
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
const logos = reactive<GLogoProps[]>([
|
||||
{
|
||||
src: IconM,
|
||||
alt: 'mobile'
|
||||
},
|
||||
{
|
||||
src: IconC,
|
||||
alt: 'csdn'
|
||||
},
|
||||
{
|
||||
src: IconH,
|
||||
alt: 'gitee'
|
||||
},
|
||||
{
|
||||
src: IconG,
|
||||
alt: 'github'
|
||||
}
|
||||
]);
|
||||
|
||||
const {
|
||||
errorMsg,
|
||||
disabled,
|
||||
extraErrors,
|
||||
status,
|
||||
FormRef,
|
||||
AgreementWarn,
|
||||
PasswordInputSpacing,
|
||||
loading,
|
||||
handleSubmit,
|
||||
handleFormChange,
|
||||
handleFormInput,
|
||||
handleAuthLogin,
|
||||
handleDisplay,
|
||||
saveUserInfo
|
||||
} = useFormInteraction(Form);
|
||||
|
||||
const handleConfirm = async() => {
|
||||
handleSubmit(async(res: any) => {
|
||||
const result = await toLogin(res);
|
||||
if (!result.error) {
|
||||
// const { user_id, mask, mobile, iam_id } = result.data.data;
|
||||
extraErrors.requestInfo = '';
|
||||
// if (!iam_id) {
|
||||
// redirectBind({
|
||||
// user_id,
|
||||
// mask,
|
||||
// mobile: mobile || res?.mobile
|
||||
// });
|
||||
// } else {
|
||||
saveUserInfo(result.data.data, route.query.returnUrl);
|
||||
// }
|
||||
} else {
|
||||
extraErrors.requestInfo = result.error.error_message;
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-white h-[100%]">
|
||||
<div class="gm-login-password">
|
||||
<div class="text-G900 text-[17px] tracking-[.5px] font-bold leading-[20px] my-[20px]">
|
||||
欢迎登录Gitcode
|
||||
</div>
|
||||
<GForm
|
||||
:DataList="Form"
|
||||
ref="FormRef"
|
||||
:show-label="false"
|
||||
@change="handleFormChange"
|
||||
@complete="handleFormInput"
|
||||
layout="vertical"
|
||||
size="lg"
|
||||
message-type="none"
|
||||
>
|
||||
<template #submit>
|
||||
<div class="gm-login-password-info h-[21px]">
|
||||
<div class="gm-login-password-info-left">
|
||||
{{ errorMsg }}
|
||||
</div>
|
||||
<div
|
||||
class="gm-login-password-info-right"
|
||||
@click.stop="router.replace('/resetPassword')"
|
||||
>
|
||||
忘记密码?
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
color="primary"
|
||||
variant="solid"
|
||||
@click="handleConfirm"
|
||||
:disabled="disabled"
|
||||
:loading="loading"
|
||||
size="lg"
|
||||
class="w-[100%] mt-[24px]"
|
||||
>
|
||||
登 录
|
||||
</Button>
|
||||
<Button
|
||||
@click="router.replace('/register')"
|
||||
size="lg"
|
||||
class="w-[100%] my-[14px]"
|
||||
>
|
||||
注 册
|
||||
</Button>
|
||||
</template>
|
||||
</GForm>
|
||||
<div class="mt-[36px]">
|
||||
<GAuth :logos="logos" @auth="type => handleAuthLogin(type, () => {}, route.query.returnUrl as string )" />
|
||||
<div :class="['gm-login-password-args', AgreementWarn ? 'shaking-box' : '']">
|
||||
<GAgreement v-model="status" @declares="handleDisplay" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.gm-login-password {
|
||||
.devui-input--error {
|
||||
// border-color: inherit;
|
||||
background-color: inherit;
|
||||
}
|
||||
.devui-input__inner {
|
||||
font-size: 14px;
|
||||
}
|
||||
.devui-form__label {
|
||||
height: 0;
|
||||
}
|
||||
.devui-form__label--vertical {
|
||||
padding: 0;
|
||||
}
|
||||
input[type="password"] {
|
||||
letter-spacing: v-bind(PasswordInputSpacing);
|
||||
}
|
||||
.devui-form__item--vertical {
|
||||
margin-bottom: 12px;
|
||||
&:nth-of-type(2) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
.devui-checkbox--sm {
|
||||
margin: auto;
|
||||
}
|
||||
&-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 2px;
|
||||
div {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
&-left {
|
||||
color: #F2050D;
|
||||
max-width: 230px;
|
||||
min-width: 230px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&-right {
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
color: var(--color-G700);
|
||||
}
|
||||
}
|
||||
&-args {
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.shaking-box {
|
||||
animation: shaking 0.25s ease-in-out;
|
||||
}
|
||||
@keyframes shaking {
|
||||
0%, 100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
}
|
||||
@apply box-border p-[32px] m-auto
|
||||
sm:w-[414px] w-[100%];
|
||||
}
|
||||
.g-footer-box {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
249
src/views/Mobile/Account/Login/Phone/index.vue
Normal file
249
src/views/Mobile/Account/Login/Phone/index.vue
Normal file
@@ -0,0 +1,249 @@
|
||||
<script setup lang="ts">
|
||||
import GForm, { type FormListProps } from '@/components/Form';
|
||||
import type { GLogoProps } from '@/components/LoginModal/types';
|
||||
import GAuth from '@/components/LoginModal/widget/auth.vue';
|
||||
import GAgreement from '@/components/LoginModal/widget/agreement.vue';
|
||||
import { TransAssetsUrl } from '@/utils/asset';
|
||||
import { ref, reactive } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { Button } from 'vue-devui/button';
|
||||
import { useFormInteraction } from '@/utils/hooks/useForm';
|
||||
import { FormRules } from '@/components/LoginModal/form';
|
||||
import { getQuickLoginMsg, loginByMobile } from '@/api/user';
|
||||
import { Message } from 'vue-devui/message';
|
||||
|
||||
const IconSource = (import.meta as any).glob('@/assets/imgs/icon/login-modal/*svg', { eager: true });
|
||||
const IconH = TransAssetsUrl(IconSource, 'logo-gitee');
|
||||
const IconC = TransAssetsUrl(IconSource, 'logo-csdn');
|
||||
const IconG = TransAssetsUrl(IconSource, 'logo-github');
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const Form = ref<FormListProps[]>([
|
||||
{
|
||||
type: 'input',
|
||||
key: 'mobile',
|
||||
label: '手机号',
|
||||
required: true,
|
||||
rules: FormRules.mobile
|
||||
},
|
||||
{
|
||||
type: 'inputButton',
|
||||
key: 'code',
|
||||
label: '手机验证码',
|
||||
required: true,
|
||||
rules: FormRules.codes,
|
||||
props: {
|
||||
'autocomplete': true,
|
||||
countdown: false,
|
||||
second: 59,
|
||||
aliasKey: 'mobile'
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
const logos = reactive<GLogoProps[]>([
|
||||
{
|
||||
src: IconC,
|
||||
alt: 'csdn'
|
||||
},
|
||||
{
|
||||
src: IconH,
|
||||
alt: 'gitee'
|
||||
},
|
||||
{
|
||||
src: IconG,
|
||||
alt: 'github'
|
||||
}
|
||||
]);
|
||||
|
||||
const {
|
||||
errorMsg,
|
||||
extraErrors,
|
||||
disabled,
|
||||
status,
|
||||
FormRef,
|
||||
cacheForm,
|
||||
AgreementWarn,
|
||||
loading,
|
||||
handleCountDown,
|
||||
handleSubmit,
|
||||
handleFormChange,
|
||||
handleFormInput,
|
||||
handleAuthLogin,
|
||||
handleDisplay,
|
||||
saveUserInfo
|
||||
} = useFormInteraction(Form);
|
||||
|
||||
const handleSendMsg = (conf: any) => {
|
||||
handleCountDown(conf, async() => {
|
||||
const res = await getQuickLoginMsg({ mobile: conf.value });
|
||||
if (!res.error) {
|
||||
cacheForm.mobile = conf.value;
|
||||
if (Number(res?.data.data.type === 1)) {
|
||||
disabled.value = true;
|
||||
Message.success('该手机号尚未注册, 即将为你自动跳转到注册页面');
|
||||
setTimeout(() => {
|
||||
localStorage.setItem('cache_countdown', JSON.stringify({
|
||||
mobile: cacheForm.mobile,
|
||||
second: cacheForm.countdownSecond
|
||||
}));
|
||||
router.replace('/register');
|
||||
}, 3000);
|
||||
} else {
|
||||
Message.success('验证码已发送到你的手机, 请注意查收');
|
||||
}
|
||||
}
|
||||
return Boolean(!res.error);
|
||||
});
|
||||
};
|
||||
|
||||
const handleConfirm = async() => {
|
||||
handleSubmit(async(res: any) => {
|
||||
const result = await loginByMobile(res);
|
||||
if (!result.error) {
|
||||
// const { user_id, mask, mobile, iam_id } = result.data.data;
|
||||
extraErrors.requestInfo = '';
|
||||
// if (!iam_id) {
|
||||
// redirectBind({
|
||||
// user_id,
|
||||
// mask,
|
||||
// mobile: mobile || res?.mobile
|
||||
// });
|
||||
// } else {
|
||||
saveUserInfo(result.data.data, route.query.returnUrl);
|
||||
// }
|
||||
} else {
|
||||
extraErrors.requestInfo = result.error.error_message;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-white h-[100%]">
|
||||
<div class="gm-login-mobile">
|
||||
<div class="text-G900 text-[17px] tracking-[.5px] font-bold leading-[20px] my-[20px]">
|
||||
欢迎登录Gitcode
|
||||
</div>
|
||||
<GForm
|
||||
:DataList="Form"
|
||||
ref="FormRef"
|
||||
:show-label="false"
|
||||
@count-down="handleSendMsg"
|
||||
@change="handleFormChange"
|
||||
@complete="handleFormInput"
|
||||
layout="vertical"
|
||||
size="lg"
|
||||
message-type="none"
|
||||
>
|
||||
<template #submit>
|
||||
<div class="gm-login-mobile-info h-[21px]">
|
||||
<div class="gm-login-mobile-info-left">
|
||||
{{ errorMsg }}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
color="primary"
|
||||
variant="solid"
|
||||
@click="handleConfirm"
|
||||
:disabled="disabled"
|
||||
:loading="loading"
|
||||
size="lg"
|
||||
class="w-[100%] mt-[24px]"
|
||||
>
|
||||
登 录
|
||||
</Button>
|
||||
<Button
|
||||
@click="router.push('/register')"
|
||||
size="lg"
|
||||
class="w-[100%] my-[14px]"
|
||||
>
|
||||
注 册
|
||||
</Button>
|
||||
</template>
|
||||
</GForm>
|
||||
<div class="mt-[36px]">
|
||||
<GAuth :logos="logos" @auth="handleAuthLogin" />
|
||||
<div :class="['gm-login-mobile-args', AgreementWarn ? 'shaking-box' : '']">
|
||||
<GAgreement v-model="status" @declares="handleDisplay" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.gm-login-mobile {
|
||||
.devui-input--error {
|
||||
// border-color: inherit;
|
||||
background-color: inherit;
|
||||
}
|
||||
.devui-input__inner {
|
||||
font-size: 14px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.devui-form__label {
|
||||
height: 0;
|
||||
}
|
||||
.devui-form__label--vertical {
|
||||
padding: 0;
|
||||
}
|
||||
.devui-form__item--vertical {
|
||||
margin-bottom: 12px;
|
||||
&:nth-of-type(2) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
.devui-checkbox--sm {
|
||||
margin: auto;
|
||||
}
|
||||
&-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 2px;
|
||||
div {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
&-left {
|
||||
color: #F2050D;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
&-args {
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.shaking-box {
|
||||
animation: shaking 0.25s ease-in-out;
|
||||
}
|
||||
@keyframes shaking {
|
||||
0%, 100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
}
|
||||
@apply box-border p-[32px] m-auto
|
||||
sm:w-[414px] w-[100%];
|
||||
}
|
||||
.g-footer-box {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
314
src/views/Mobile/Account/Register/index.vue
Normal file
314
src/views/Mobile/Account/Register/index.vue
Normal file
@@ -0,0 +1,314 @@
|
||||
<script setup lang="ts">
|
||||
import GForm, { type FormListProps } from '@/components/Form';
|
||||
import GAgreement from '@/components/LoginModal/widget/agreements.vue';
|
||||
import { ref } from 'vue';
|
||||
import { Button } from 'vue-devui/button';
|
||||
import { Message } from 'vue-devui/message';
|
||||
import { useFormInteraction } from '@/utils/hooks/useForm';
|
||||
import { checkUsername, verifyRegisterCode, registerByMobile } from '@/api/user';
|
||||
import { FormRules } from '@/components/LoginModal/form';
|
||||
import { useGlobalInfoStore } from '@/stores/Global';
|
||||
|
||||
const globalStore = useGlobalInfoStore();
|
||||
globalStore.setShowTools(false);
|
||||
|
||||
const cache_countdown = JSON.parse(localStorage.getItem('cache_countdown') as string);
|
||||
|
||||
const VerifyPassword:FormListProps[] = [
|
||||
{
|
||||
type: 'input',
|
||||
key: 'password',
|
||||
label: '密码',
|
||||
required: true,
|
||||
rules: FormRules.password,
|
||||
props: {
|
||||
'show-password': true,
|
||||
'autocomplete': true
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
key: 'pwd',
|
||||
label: '确认密码',
|
||||
required: true,
|
||||
rules: [
|
||||
{
|
||||
trigger: 'change',
|
||||
message: '验证密码与密码不一致',
|
||||
validator: (_rule: any, value: string, cb: Function) => {
|
||||
FormRef.value.ValidateFormKeys(['password']).then((fromData: any) => {
|
||||
if (fromData.type === 'success') {
|
||||
clearFormError('password');
|
||||
if (FormRef.value.Data.password === value) {
|
||||
clearFormError('pwd');
|
||||
return cb();
|
||||
} else {
|
||||
setFormErrorKey({
|
||||
pwd: '验证密码与密码不一致'
|
||||
});
|
||||
return cb(new Error('验证密码与密码不一致'));
|
||||
}
|
||||
} else {
|
||||
setFormErrorKey({
|
||||
password: '密码最少包含一个大写字母、一个小写字母、一个数字'
|
||||
});
|
||||
return cb(new Error('密码最少包含一个大写字母、一个小写字母、一个数字'));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
],
|
||||
props: {
|
||||
'show-password': true,
|
||||
'autocomplete': true
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const requestCheck = {
|
||||
trigger: 'change',
|
||||
validator: async(_: any, val: string, cb: Function) => {
|
||||
const res = await checkUsername(val);
|
||||
if (!res.error) {
|
||||
if (res.data.data.result) {
|
||||
setFormErrorKey({ name: '用户名已存在' });
|
||||
return cb(new Error('用户名已存在'));
|
||||
}
|
||||
}
|
||||
return cb();
|
||||
}
|
||||
};
|
||||
|
||||
const Form = ref<FormListProps[]>([
|
||||
{
|
||||
type: 'input',
|
||||
key: 'username',
|
||||
label: '用户名',
|
||||
required: true,
|
||||
rules: [...FormRules.name, requestCheck]
|
||||
},
|
||||
// {
|
||||
// type: 'input',
|
||||
// key: 'nickname',
|
||||
// label: '昵称'
|
||||
// },
|
||||
{
|
||||
type: 'input',
|
||||
key: 'mobile',
|
||||
label: '手机号码',
|
||||
required: true,
|
||||
rules: FormRules.mobile,
|
||||
defaultValue: cache_countdown?.mobile || ''
|
||||
},
|
||||
{
|
||||
type: 'inputButton',
|
||||
key: 'verificationcode',
|
||||
label: '验证码',
|
||||
required: true,
|
||||
rules: FormRules.codes,
|
||||
props: {
|
||||
autocomplete: true,
|
||||
countdown: Boolean(cache_countdown),
|
||||
second: cache_countdown?.second || 59,
|
||||
aliasKey: 'mobile'
|
||||
}
|
||||
}
|
||||
// ...VerifyPassword
|
||||
]);
|
||||
|
||||
const hwStatus = ref(false);
|
||||
|
||||
const {
|
||||
errorMsg,
|
||||
disabled,
|
||||
extraErrors,
|
||||
status,
|
||||
FormRef,
|
||||
cacheForm,
|
||||
loading,
|
||||
setFormErrorKey,
|
||||
clearFormError,
|
||||
AgreementWarn,
|
||||
PasswordInputSpacing,
|
||||
handleSubmit,
|
||||
handleCountDown,
|
||||
toCountDown,
|
||||
handleFormChange,
|
||||
handleFormInput,
|
||||
handleDisplay,
|
||||
saveUserInfo
|
||||
} = useFormInteraction(Form, false, hwStatus);
|
||||
|
||||
if (cache_countdown) {
|
||||
cacheForm.countdownSecond = cache_countdown?.second || 59;
|
||||
toCountDown('verificationcode');
|
||||
}
|
||||
|
||||
const handleSendMsg = (conf: any) => {
|
||||
handleCountDown(conf, async() => {
|
||||
const res = await verifyRegisterCode({ mobile: conf.value, type: 'REGISTER' });
|
||||
if (!res.error) {
|
||||
cacheForm.mobile = conf.value;
|
||||
Message.success('验证码已发送到你的手机, 请注意查收');
|
||||
}
|
||||
return Boolean(!res.error);
|
||||
});
|
||||
};
|
||||
|
||||
const handleConfirm = async() => {
|
||||
if (!hwStatus.value) {
|
||||
extraErrors.agreement = '请阅读并同意华为云用户协议以及隐私政策声明';
|
||||
AgreementWarn.value = true;
|
||||
setTimeout(() => {
|
||||
AgreementWarn.value = false;
|
||||
}, 500);
|
||||
return;
|
||||
}
|
||||
handleSubmit(async(res: any) => {
|
||||
const data = {
|
||||
username: res.username,
|
||||
password: res.password,
|
||||
nickname: res.nickname || res.username,
|
||||
mobile: res.mobile,
|
||||
verificationcode: res.verificationcode,
|
||||
signup_type: sessionStorage.getItem('loginType')
|
||||
};
|
||||
const result = await registerByMobile(data);
|
||||
if (!result.error) {
|
||||
extraErrors.requestInfo = '';
|
||||
// const { user_id, mask } = result.data.data;
|
||||
// redirectBind({
|
||||
// user_id,
|
||||
// mask,
|
||||
// mobile: res.mobile
|
||||
// });
|
||||
saveUserInfo(result.data.data);
|
||||
} else {
|
||||
extraErrors.requestInfo = result.error.error_message;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-white h-[100%]">
|
||||
<div class="gm-login-register">
|
||||
<div class="text-G900 text-[17px] tracking-[.5px] font-bold leading-[20px] my-[20px]">
|
||||
欢迎注册
|
||||
</div>
|
||||
<div class="my-[20px] text-[14px] text-G900 leading-[20px]">
|
||||
GitCode 与华为云共同为用户提供代码托管服务，在使用代码托管相关服务时，将同步授权并开通华为云服务，并与重庆开源共创科技有限公司（GitCode的运营主体）关联及共享。
|
||||
</div>
|
||||
<GForm
|
||||
:DataList="Form"
|
||||
ref="FormRef"
|
||||
show-label
|
||||
@count-down="handleSendMsg"
|
||||
@change="handleFormChange"
|
||||
@complete="handleFormInput"
|
||||
layout="horizontal"
|
||||
size="lg"
|
||||
message-type="none"
|
||||
>
|
||||
<template #submit>
|
||||
<div class="gm-login-register-info gm-login-register-ellipsis">
|
||||
{{ errorMsg }}
|
||||
</div>
|
||||
<div class="mb-[24px]">
|
||||
<div :class="['gm-login-register-args', AgreementWarn ? 'shaking-box' : '']">
|
||||
<GAgreement v-model="hwStatus" agreement-text="《华为云用户协议》" privacy-text="《华为云隐私政策声明》" @declares="(conf) => handleDisplay(conf.type, 'hw')" />
|
||||
<GAgreement v-model="status" agreement-text="《GitCode用户协议》" privacy-text="《GitCode隐私政策》" @declares="(conf) => handleDisplay(conf.type)" />
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
color="primary"
|
||||
variant="solid"
|
||||
@click="handleConfirm"
|
||||
:disabled="disabled"
|
||||
:loading="loading"
|
||||
size="lg"
|
||||
class="w-[100%]"
|
||||
>
|
||||
确认
|
||||
</Button>
|
||||
</template>
|
||||
</GForm>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.gm-login-register {
|
||||
.devui-input--error {
|
||||
// border-color: inherit;
|
||||
background-color: inherit;
|
||||
}
|
||||
.devui-input__inner {
|
||||
font-size: 14px;
|
||||
}
|
||||
.devui-form__label-span {
|
||||
padding-left: 10px;
|
||||
}
|
||||
.devui-form__label--required {
|
||||
padding-left: 0;
|
||||
}
|
||||
.devui-form__label--required:before {
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.devui-form__control--horizontal {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.devui-form__label {
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
input[type="password"] {
|
||||
letter-spacing: v-bind(PasswordInputSpacing);
|
||||
}
|
||||
.devui-form__item--horizontal {
|
||||
margin-bottom: 12px;
|
||||
&:nth-last-child(3) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
&-info {
|
||||
@apply text-[#F2050D] text-[14px] break-all box-border leading-[20px] pl-[90px] h-[40px];
|
||||
}
|
||||
&-ellipsis {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2; /* 设置文本最大行数为2行 */
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal; /* 在Safari中需要添加这一行来处理部分情况 */
|
||||
}
|
||||
&-args {
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.shaking-box {
|
||||
animation: shaking 0.25s ease-in-out;
|
||||
}
|
||||
@keyframes shaking {
|
||||
0%, 100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
}
|
||||
@apply box-border p-[32px] m-auto
|
||||
sm:w-[414px] w-[100%];
|
||||
}
|
||||
.g-footer-box {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
217
src/views/Mobile/Account/ResetPassword/index.vue
Normal file
217
src/views/Mobile/Account/ResetPassword/index.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<script setup lang="ts">
|
||||
import GForm, { type FormListProps } from '@/components/Form';
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { Button } from 'vue-devui/button';
|
||||
import { Message } from 'vue-devui/message';
|
||||
import { useFormInteraction } from '@/utils/hooks/useForm';
|
||||
import { getMobileEmailCode, resetUserPassword } from '@/api/user';
|
||||
import { FormRules, isMobileEmail } from '@/components/LoginModal/form';
|
||||
import { useGlobalInfoStore } from '@/stores/Global';
|
||||
|
||||
const globalStore = useGlobalInfoStore();
|
||||
globalStore.setShowTools(false); // 隐藏工具栏，以防遮挡表单
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const VerifyPassword:FormListProps[] = [
|
||||
{
|
||||
type: 'input',
|
||||
key: 'password',
|
||||
label: '密码',
|
||||
required: true,
|
||||
rules: FormRules.password,
|
||||
// help: '密码最少包含一个大写字母、一个小写字母、一个数字, 长度为8~20之间',
|
||||
props: {
|
||||
'show-password': true,
|
||||
'autocomplete': true,
|
||||
'maxlength': 30
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
key: 'pwd',
|
||||
label: '确认密码',
|
||||
required: true,
|
||||
rules: [
|
||||
{
|
||||
trigger: 'change',
|
||||
message: '验证密码与密码不一致',
|
||||
validator: (_rule: any, value: string, cb: Function) => {
|
||||
FormRef.value.ValidateFormKeys(['password']).then((fromData: any) => {
|
||||
if (fromData.type === 'success') {
|
||||
clearFormError('password');
|
||||
if (FormRef.value.Data.password === value) {
|
||||
clearFormError('pwd');
|
||||
return cb();
|
||||
} else {
|
||||
setFormErrorKey({
|
||||
pwd: '验证密码与密码不一致'
|
||||
});
|
||||
return cb(new Error('验证密码与密码不一致'));
|
||||
}
|
||||
} else {
|
||||
setFormErrorKey({
|
||||
password: '密码最少包含一个大写字母、一个小写字母、一个数字'
|
||||
});
|
||||
return cb(new Error('密码最少包含一个大写字母、一个小写字母、一个数字'));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
],
|
||||
props: {
|
||||
'show-password': true,
|
||||
'autocomplete': true,
|
||||
'maxlength': 30
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const Form = ref<FormListProps[]>([
|
||||
{
|
||||
type: 'input',
|
||||
key: 'mobile_email',
|
||||
label: '手机/邮箱',
|
||||
required: true,
|
||||
rules: FormRules.mobile_email
|
||||
},
|
||||
{
|
||||
type: 'inputButton',
|
||||
key: 'code',
|
||||
label: '验证码',
|
||||
required: true,
|
||||
rules: FormRules.codes,
|
||||
props: {
|
||||
countdown: false,
|
||||
second: 59,
|
||||
autocomplete: true,
|
||||
aliasKey: 'mobile_email'
|
||||
}
|
||||
},
|
||||
...VerifyPassword
|
||||
]);
|
||||
|
||||
const {
|
||||
errorMsg,
|
||||
extraErrors,
|
||||
disabled,
|
||||
FormRef,
|
||||
cacheForm,
|
||||
PasswordInputSpacing,
|
||||
loading,
|
||||
setFormErrorKey,
|
||||
clearFormError,
|
||||
handleSubmit,
|
||||
handleCountDown,
|
||||
handleFormChange,
|
||||
handleFormInput
|
||||
} = useFormInteraction(Form, true);
|
||||
|
||||
const handleSendMsg = (conf: any) => {
|
||||
handleCountDown(conf, async() => {
|
||||
const res = await getMobileEmailCode(conf.value);
|
||||
if (!res.error) {
|
||||
cacheForm.mobile = conf.value;
|
||||
const msg = isMobileEmail(conf.value);
|
||||
Message.success(`验证码已发送到你的${msg}, 请注意查收`);
|
||||
}
|
||||
return Boolean(!res.error);
|
||||
});
|
||||
};
|
||||
|
||||
const handleConfirm = async() => {
|
||||
handleSubmit(async(res: any) => {
|
||||
const result = await resetUserPassword(res);
|
||||
if (!result.error) {
|
||||
extraErrors.requestInfo = '';
|
||||
Message.success('修改密码成功, 正在为你跳转登录');
|
||||
setTimeout(() => {
|
||||
router.replace('/login');
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-white h-[100%]">
|
||||
<div class="gm-login-forget">
|
||||
<div class="text-G900 text-[17px] tracking-[.5px] font-bold leading-[20px] my-[20px]">
|
||||
重置密码
|
||||
</div>
|
||||
<GForm
|
||||
:DataList="Form"
|
||||
ref="FormRef"
|
||||
:show-label="false"
|
||||
@count-down="handleSendMsg"
|
||||
@change="handleFormChange"
|
||||
@complete="handleFormInput"
|
||||
layout="vertical"
|
||||
size="lg"
|
||||
message-type="none"
|
||||
>
|
||||
<template #submit>
|
||||
<div class="gm-login-forget-info gm-login-forget-ellipsis">
|
||||
{{ errorMsg }}
|
||||
</div>
|
||||
<Button
|
||||
color="primary"
|
||||
variant="solid"
|
||||
@click="handleConfirm"
|
||||
:disabled="disabled"
|
||||
:loading="loading"
|
||||
size="lg"
|
||||
class="w-[100%] my-[12px]"
|
||||
>
|
||||
确认
|
||||
</Button>
|
||||
</template>
|
||||
</GForm>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.gm-login-forget {
|
||||
.devui-input--error {
|
||||
// border-color: inherit;
|
||||
background-color: inherit;
|
||||
}
|
||||
.devui-input__inner {
|
||||
font-size: 14px;
|
||||
}
|
||||
.devui-form__label {
|
||||
height: 0;
|
||||
}
|
||||
input[type="password"] {
|
||||
letter-spacing: v-bind(PasswordInputSpacing);
|
||||
}
|
||||
.devui-form__label--vertical {
|
||||
padding: 0;
|
||||
}
|
||||
.devui-form__item--vertical {
|
||||
margin-bottom: 12px;
|
||||
&:nth-last-child(3) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
&-info {
|
||||
@apply text-[#F2050D] text-[14px] break-all box-border leading-[20px] pl-[2px] h-[40px];
|
||||
}
|
||||
&-ellipsis {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2; /* 设置文本最大行数为2行 */
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal; /* 在Safari中需要添加这一行来处理部分情况 */
|
||||
}
|
||||
@apply box-border p-[32px] m-auto
|
||||
sm:w-[414px] w-[100%];
|
||||
}
|
||||
.g-footer-box {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user