Oak-Team
/
oak-general-business
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 38 Wiki Activity

小调整

This commit is contained in:
Wang Kejun 2022-07-28 19:25:26 +08:00
parent 26cd2831a6
commit 778c78b2ee
8 changed files with 101 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
app/components/message/index.tsx
View File

@ -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 }} />;
// }

30
app/pages/mobile/login/index.less
View File

@ -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;
}

3
app/pages/mobile/login/index.ts
View File

@ -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;
}
}

118
app/pages/mobile/login/index.tsx
View File

@ -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>

7
app/pages/mobile/login/locales/zh_CN.json Normal file
View File

@ -0,0 +1,7 @@
{
"Log in": "登录",
"Remember me": "记住账号",
"in Password": "账号登录",
"in Captcha": "手机号登录",
"Send": "发送验证码"
}

29
app/utils/dialog/index.web.ts
View File

@ -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;

29
app/utils/message/index.web.ts
View File

@ -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;

5
package.json
View File

@ -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"