web 绑定手机号

This commit is contained in:
Wang Kejun 2023-02-08 18:13:27 +08:00
parent 56b6132dc2
commit 5b9b493421
5 changed files with 61 additions and 137 deletions

View File

@ -17,6 +17,7 @@ export default OakComponent({
onlyCaptcha: Boolean,
onlyPassword: Boolean,
eventLoggedIn: String,
callback: Function,
},
formData({ features }) {
const lastSendAt = features.localStorage.load(SEND_KEY);
@ -68,7 +69,7 @@ export default OakComponent({
}
},
async loginByMobile() {
const { eventLoggedIn } = this.props;
const { eventLoggedIn, callback } = this.props;
const { mobile, password, captcha } = this.state;
try {
await this.features.token.loginByMobile(
@ -76,7 +77,9 @@ export default OakComponent({
password,
captcha
);
if (eventLoggedIn) {
if (typeof callback === 'function') {
callback();
} else if (eventLoggedIn) {
this.pub(eventLoggedIn);
} else {
this.navigateBack();

View File

@ -29,73 +29,7 @@
height: 200px;
}
.loginbox-only {
padding-top: 32px !important;
}
.loginbox-mobile {
position: relative;
padding: 0 32px;
}
.loginbox-password {
position: relative;
padding: 0 32px;
}
.loginbox-qrcode {
padding: 0 32px;
font-size: 14px;
&__sociallogin {
margin-bottom: 15px;
text-align: center;
color: #999;
}
&__refresh {
color: var(--oak-text-color-brand);
margin-left: 10px;
cursor: pointer;
&-icon {
color: var(--oak-text-color-brand)
}
}
&__iframe {
position: relative;
width: 160px;
height: 160px;
margin: 0 auto;
border: #999 solid 1px;
}
}
.current {
color: var(--oak-text-color-brand) !important;
cursor: default;
background-color: #fff;
border-radius: 4px;
}
.loginbox-input {
.t-input {
background-color: rgba(0, 0, 0, .04) !important;
}
}
.loginbox-ft {
height: 54px;
border-top: 1px solid #f2f3f5;
font-size: 14px;
&__btn {}
}
.loginbox-protocal {
padding: 20px 32px;
}

View File

@ -1,7 +1,6 @@
.loginbox-main {
height: 100vh;
display: flex;
flex: 1;
align-items: center;
@ -26,11 +25,7 @@
}
.loginbox-bd {
height: 310px;
}
.loginbox-only {
padding-top: 32px !important;
height: 200px;
}
.loginbox-mobile {
@ -38,64 +33,5 @@
padding: 0 32px;
}
.loginbox-password {
position: relative;
padding: 0 32px;
}
.loginbox-qrcode {
padding: 0 32px;
font-size: 14px;
&__sociallogin {
margin-bottom: 15px;
text-align: center;
color: #999;
}
&__refresh {
color: var(--oak-text-color-brand);
margin-left: 10px;
cursor: pointer;
&-icon {
color: var(--oak-text-color-brand)
}
}
&__iframe {
position: relative;
width: 160px;
height: 160px;
margin: 0 auto;
border: #999 solid 1px;
}
}
.current {
color: var(--oak-text-color-brand) !important;
cursor: default;
background-color: #fff;
border-radius: 4px;
}
.loginbox-input {
.t-input {
background-color: rgba(0, 0, 0, .04) !important;
}
}
.loginbox-ft {
height: 54px;
border-top: 1px solid #f2f3f5;
font-size: 14px;
&__btn {}
}
.loginbox-protocal {
padding: 20px 32px;
}

View File

@ -5,6 +5,7 @@ import Style from './web.module.less';
import { WebComponentProps } from 'oak-frontend-base';
import { EntityDict } from '../../../general-app-domain';
import PageHeader from '../../../components/common/pageHeader';
import MobileLogin from '../../../pages/mobile/login';
export default function render(
@ -23,11 +24,19 @@ export default function render(
>
) {
const { mobiles, allowRemove, showBack = false } = props.data;
const { goAddMobile, removeItem, execute } = props.methods;
const { goAddMobile, removeItem, execute, sub } = props.methods;
const [open, setOpen] = useState(false);
const eventLoggedIn = `user:info:login:${Date.now()}`;
return (
<PageHeader showBack={showBack} title="我的手机号">
<div className={Style.container}>
<Button type="primary" onClick={() => goAddMobile()}>
<Button
type="primary"
onClick={() => {
setOpen(true);
}}
>
</Button>
<List bordered className={Style.list}>
@ -66,6 +75,23 @@ export default function render(
))}
</List>
</div>
<Modal
title="绑定手机号"
open={open}
destroyOnClose={true}
footer={null}
onCancel={() => {
setOpen(false);
}}
>
<MobileLogin
callback={() => {
setOpen(false);
}}
oakPath="$mobile/me-mobile/login"
oakAutoUnmount={true}
/>
</Modal>
</PageHeader>
);
}

View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import {
Avatar,
Space,
@ -8,12 +8,15 @@ import {
DatePicker,
Form,
Typography,
Modal,
} from 'antd';
import dayjs from 'dayjs';
import { WebComponentProps } from 'oak-frontend-base';
import { EntityDict } from '../../../general-app-domain';
import PageHeader from '../../../components/common/pageHeader';
import OakAvatar from '../../../components/extraFile/avatar';
import MobileLogin from '../../../pages/mobile/login';
import Style from './web.module.less';
@ -55,6 +58,7 @@ export default function Render(
oakFullpath,
oakDirty,
} = data;
const [open, setOpen] = useState(false);
return (
<PageHeader title="个人信息" showBack={showBack}>
@ -176,7 +180,11 @@ export default function Render(
<Button
size="small"
onClick={() => {
goAddMobile();
if (mobile) {
goAddMobile();
return;
}
setOpen(true);
}}
>
{mobile ? t('manage') : t('bind')}
@ -204,6 +212,23 @@ export default function Render(
</Form.Item>
</Form>
</div>
<Modal
title="绑定手机号"
open={open}
destroyOnClose={true}
footer={null}
onCancel={() => {
setOpen(false);
}}
>
<MobileLogin
callback={() => {
setOpen(false);
}}
oakPath="$user/info-mobile/login"
oakAutoUnmount={true}
/>
</Modal>
</PageHeader>
);
}