Merge branch 'dev' of codeup.aliyun.com:61c14a7efa282c88e103c23f/oak-general-business into dev
This commit is contained in:
梁朝伟
commit
2d98934aaa
|
|
@ -1,71 +1,6 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export default function render() {
|
||||
// console.log('message render');
|
||||
// const {
|
||||
// messages,
|
||||
// } = this.state;
|
||||
// if (messages.length > 0) {
|
||||
// return (
|
||||
// <div>
|
||||
// {
|
||||
// messages.map(
|
||||
// (ele, index) => {
|
||||
// const {
|
||||
// type,
|
||||
// content,
|
||||
// icon,
|
||||
// iconColor = '#fff',
|
||||
// iconSize = 16
|
||||
// } = ele;
|
||||
// return (
|
||||
// <div
|
||||
// key={index}
|
||||
// className={classNames(
|
||||
// 'o-message',
|
||||
// 'o-message-show',
|
||||
// {
|
||||
// [`o-message-${type}`]: type,
|
||||
// }
|
||||
// )}
|
||||
// style={{
|
||||
// zIndex: 777,
|
||||
// top: 31 * index,
|
||||
// }}
|
||||
// >
|
||||
// <React.Fragment>
|
||||
// <div
|
||||
// style={{
|
||||
// marginRight: '15rpx',
|
||||
// }}
|
||||
// >
|
||||
// <Icon
|
||||
// name={type}
|
||||
// size={iconSize}
|
||||
// color={
|
||||
// type === 'warning'
|
||||
// ? '#333'
|
||||
// : iconColor
|
||||
// }
|
||||
// />
|
||||
// </div>
|
||||
// {content}
|
||||
// </React.Fragment>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
// )
|
||||
// }
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
return null;
|
||||
}
|
||||
|
||||
// function Icon({ name, size, color }) {
|
||||
// const I = typeToIcon[name]
|
||||
|
||||
// return <I style={{ fontSize: `${size}px`, color }} />;
|
||||
// }
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
/** index.wxss **/
|
||||
@import "../../../config/styles/_base.less";
|
||||
@import "../../../config/styles/_mixins.less";
|
||||
|
||||
.page-body {
|
||||
|
|
@ -10,22 +9,23 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
background-color: @background-color-base;
|
||||
background-color: #fff;
|
||||
.safe-area-inset-bottom();
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 90%;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.login-form-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ant-tabs-nav-list {
|
||||
width: 100%;
|
||||
.ant-tabs-tab {
|
||||
width: 50%;
|
||||
.t-tabs {
|
||||
&__nav {
|
||||
width: 100%;
|
||||
}
|
||||
&__nav-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
&__nav-item {
|
||||
width: 50%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.tabPanel {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
import { composeFileUrl } from '../../../../src/utils/extraFile';
|
||||
|
||||
const SEND_KEY = 'captcha:sendAt';
|
||||
export default OakPage({
|
||||
|
|
@ -29,7 +28,7 @@ export default OakPage({
|
|||
this.counterHandler = setTimeout(() => this.reRender(), 1000);
|
||||
}
|
||||
else if (this.counterHandler) {
|
||||
clearTimeout(this.couuterHandler);
|
||||
clearTimeout(this.counterHandler);
|
||||
this.counterHandler = undefined;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,18 @@
|
|||
import React from 'react';
|
||||
import { isMobile, isPassword, isCaptcha } from 'oak-domain/lib/utils/validator';
|
||||
import { DesktopIcon, LockOnIcon, MobileIcon } from 'tdesign-icons-react';
|
||||
import {
|
||||
Form,
|
||||
Input,
|
||||
Button,
|
||||
MessagePlugin,
|
||||
Checkbox,
|
||||
Tabs,
|
||||
} from 'tdesign-react';
|
||||
|
||||
isMobile,
|
||||
isPassword,
|
||||
isCaptcha,
|
||||
} from 'oak-domain/lib/utils/validator';
|
||||
import { DesktopIcon, LockOnIcon, MobileIcon } from 'tdesign-icons-react';
|
||||
import { Form, Input, Button, Checkbox, Tabs } from 'tdesign-react';
|
||||
|
||||
const { TabPanel } = Tabs;
|
||||
const { FormItem } = Form;
|
||||
|
||||
export default function render() {
|
||||
const { onlyCaptcha, onlyPassword } = this.props;
|
||||
const { t } = this;
|
||||
const { onlyCaptcha, onlyPassword, width } = this.props;
|
||||
const { mobile, captcha, password, counter } = this.state;
|
||||
const validMobile = isMobile(mobile);
|
||||
const validCaptcha = isCaptcha(captcha);
|
||||
|
|
@ -31,8 +28,9 @@ export default function render() {
|
|||
type="tel"
|
||||
data-attr="mobile"
|
||||
maxlength={11}
|
||||
prefixIcon={<MobileIcon className="site-form-item-icon" />}
|
||||
prefixIcon={<MobileIcon />}
|
||||
placeholder="Mobile"
|
||||
size="large"
|
||||
onChange={(value, context) => {
|
||||
this.setState({
|
||||
mobile: value,
|
||||
|
|
@ -45,9 +43,10 @@ export default function render() {
|
|||
clearable
|
||||
value={password}
|
||||
data-attr="password"
|
||||
prefixIcon={<LockOnIcon className="site-form-item-icon" />}
|
||||
prefixIcon={<LockOnIcon />}
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
size="large"
|
||||
onChange={(value, context) => {
|
||||
this.setState({
|
||||
password: value,
|
||||
|
|
@ -56,19 +55,19 @@ export default function render() {
|
|||
/>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Checkbox>Remember me</Checkbox>
|
||||
<Checkbox>{t('Remember me')}</Checkbox>
|
||||
</FormItem>
|
||||
|
||||
<FormItem>
|
||||
<Button
|
||||
block
|
||||
size="large"
|
||||
theme="primary"
|
||||
type="submit"
|
||||
className="login-form-button"
|
||||
disabled={!allowSubmit}
|
||||
onClick={() => this.loginByMobile()}
|
||||
>
|
||||
Log in
|
||||
{t('Log in')}
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
|
|
@ -82,9 +81,9 @@ export default function render() {
|
|||
data-attr="mobile"
|
||||
type="tel"
|
||||
maxlength={11}
|
||||
prefixIcon={<MobileIcon className="site-form-item-icon" />}
|
||||
prefixIcon={<MobileIcon />}
|
||||
placeholder="Mobile"
|
||||
style={{ width: 'calc(100% - 65px)' }}
|
||||
size="large"
|
||||
onChange={(value, context) => {
|
||||
this.setState({
|
||||
mobile: value,
|
||||
|
|
@ -100,6 +99,7 @@ export default function render() {
|
|||
type="number"
|
||||
maxlength={4}
|
||||
placeholder="Captcha"
|
||||
size="large"
|
||||
onChange={(value, context) => {
|
||||
this.setState({
|
||||
captcha: value,
|
||||
|
|
@ -107,52 +107,59 @@ export default function render() {
|
|||
}}
|
||||
/>
|
||||
<Button
|
||||
size="large"
|
||||
theme="primary"
|
||||
disabled={!validMobile || counter > 0}
|
||||
onClick={() => this.sendCaptcha()}
|
||||
>
|
||||
{counter > 0 ? counter : 'Send'}
|
||||
{counter > 0 ? counter : t('Send')}
|
||||
</Button>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Checkbox>Remember me</Checkbox>
|
||||
</FormItem>
|
||||
|
||||
<FormItem>
|
||||
<Button
|
||||
block
|
||||
size="large"
|
||||
theme="primary"
|
||||
className="login-form-button"
|
||||
type="submit"
|
||||
disabled={!allowSubmit}
|
||||
onClick={() => this.loginByMobile()}
|
||||
>
|
||||
Log in
|
||||
{t('Log in')}
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
);
|
||||
if (onlyCaptcha) {
|
||||
return (
|
||||
<div className='page-body'>
|
||||
<div style={{
|
||||
flex: 2,
|
||||
}} />
|
||||
<div className="page-body">
|
||||
<div
|
||||
style={{
|
||||
flex: 2,
|
||||
}}
|
||||
/>
|
||||
{LoginCaptcha}
|
||||
<div style={{
|
||||
flex: 3,
|
||||
}} />
|
||||
<div
|
||||
style={{
|
||||
flex: 3,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
else if (onlyPassword) {
|
||||
} else if (onlyPassword) {
|
||||
return (
|
||||
<div className='page-body'>
|
||||
<div style={{
|
||||
flex: 2,
|
||||
}} />
|
||||
<div className="page-body">
|
||||
<div
|
||||
style={{
|
||||
flex: 2,
|
||||
}}
|
||||
/>
|
||||
{LoginPassword}
|
||||
<div style={{
|
||||
flex: 3,
|
||||
}} />
|
||||
<div
|
||||
style={{
|
||||
flex: 3,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -163,21 +170,38 @@ export default function render() {
|
|||
flex: 2,
|
||||
}}
|
||||
/>
|
||||
<div style={{
|
||||
minHeight: 500,
|
||||
lineHeight: 22,
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
minHeight: 500,
|
||||
lineHeight: 22,
|
||||
width: width === 'xs' ? 320 : 400,
|
||||
}}
|
||||
>
|
||||
<Tabs
|
||||
theme="normal"
|
||||
placement="top"
|
||||
defaultValue="1"
|
||||
size="medium"
|
||||
style={{ width: '100%' }}
|
||||
onChange={(value) => {
|
||||
this.setState({
|
||||
tabValue: value,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<TabPanel label="in Password" value="1">
|
||||
<TabPanel
|
||||
className="tabPanel"
|
||||
key="tab_1"
|
||||
label={t('in Password')}
|
||||
value="1"
|
||||
>
|
||||
{LoginPassword}
|
||||
</TabPanel>
|
||||
<TabPanel label="in Captcha" key="2">
|
||||
<TabPanel
|
||||
className="tabPanel"
|
||||
key="tab_2"
|
||||
label={t('in Captcha')}
|
||||
value="2"
|
||||
>
|
||||
{LoginCaptcha}
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"Log in": "登录",
|
||||
"Remember me": "记住账号",
|
||||
"in Password": "账号登录",
|
||||
"in Captcha": "手机号登录",
|
||||
"Send": "发送验证码"
|
||||
}
|
||||
|
|
@ -1,30 +1,5 @@
|
|||
|
||||
|
||||
|
||||
/**
|
||||
* xs: 0,
|
||||
sm: 576,
|
||||
md: 768,
|
||||
lg: 992,
|
||||
xl: 1200,
|
||||
xxl: 1600,
|
||||
* @returns
|
||||
*/
|
||||
const getBrowserWidth = function () {
|
||||
if (window.innerWidth < 576) {
|
||||
return 'xs';
|
||||
} else if (window.innerWidth < 768) {
|
||||
return 'sm';
|
||||
} else if (window.innerWidth < 992) {
|
||||
return 'md';
|
||||
} else if (window.innerWidth < 1200) {
|
||||
return 'lg';
|
||||
} else if (window.innerWidth < 1600) {
|
||||
return 'xl';
|
||||
} else {
|
||||
return 'xxl';
|
||||
}
|
||||
};
|
||||
//@ts-ignore
|
||||
const { getBrowserWidth } = require('oak-frontend-base/lib/platforms/web/utils/width');
|
||||
|
||||
if (getBrowserWidth() === 'xs') {
|
||||
const Dialog = require('tdesign-mobile-react').Dialog;
|
||||
|
|
|
|||
|
|
@ -1,30 +1,5 @@
|
|||
|
||||
|
||||
|
||||
/**
|
||||
* xs: 0,
|
||||
sm: 576,
|
||||
md: 768,
|
||||
lg: 992,
|
||||
xl: 1200,
|
||||
xxl: 1600,
|
||||
* @returns
|
||||
*/
|
||||
const getBrowserWidth = function () {
|
||||
if (window.innerWidth < 576) {
|
||||
return 'xs';
|
||||
} else if (window.innerWidth < 768) {
|
||||
return 'sm';
|
||||
} else if (window.innerWidth < 992) {
|
||||
return 'md';
|
||||
} else if (window.innerWidth < 1200) {
|
||||
return 'lg';
|
||||
} else if (window.innerWidth < 1600) {
|
||||
return 'xl';
|
||||
} else {
|
||||
return 'xxl';
|
||||
}
|
||||
};
|
||||
//@ts-ignore
|
||||
const { getBrowserWidth } = require('oak-frontend-base/lib/platforms/web/utils/width');
|
||||
|
||||
if (getBrowserWidth() === 'xs') {
|
||||
const Message = require('tdesign-mobile-react').Message;
|
||||
|
|
|
|||
|
|
@ -50,12 +50,13 @@
|
|||
"typescript": "^4.7.4"
|
||||
},
|
||||
"scripts": {
|
||||
"prebuild": "ts-node ./scripts/make.ts",
|
||||
"make:domain": "ts-node ./scripts/make.ts",
|
||||
"prebuild": "npm run make:domain",
|
||||
"build": "tsc",
|
||||
"get:area": "ts-node ./scripts/getAmapArea.ts",
|
||||
"clean:dir": "ts-node ./scripts/cleanDtsAndJs",
|
||||
"test": "ts-node ./test/test.ts",
|
||||
"postinstall": "npm run prebuild",
|
||||
"postinstall": "npm run make:domain",
|
||||
"prepare": "rimraf node_modules/react & rimraf node_modules/react-dom & rimraf node_modules/react-router"
|
||||
},
|
||||
"main": "lib/index"
|
||||
|
|
|
|||
Loading…
Reference in New Issue