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 * as React from 'react';
import classNames from 'classnames';
export default function render() { 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; 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 **/ /** index.wxss **/
@import "../../../config/styles/_base.less";
@import "../../../config/styles/_mixins.less"; @import "../../../config/styles/_mixins.less";
.page-body { .page-body {
@ -10,22 +9,23 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
background-color: @background-color-base; background-color: #fff;
.safe-area-inset-bottom(); .safe-area-inset-bottom();
} }
.card { .t-tabs {
width: 90%; &__nav {
align-self: center; width: 100%;
}
.login-form-button {
width: 100%;
}
.ant-tabs-nav-list {
width: 100%;
.ant-tabs-tab {
width: 50%;
} }
&__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'; const SEND_KEY = 'captcha:sendAt';
export default OakPage({ export default OakPage({
@ -29,7 +28,7 @@ export default OakPage({
this.counterHandler = setTimeout(() => this.reRender(), 1000); this.counterHandler = setTimeout(() => this.reRender(), 1000);
} }
else if (this.counterHandler) { else if (this.counterHandler) {
clearTimeout(this.couuterHandler); clearTimeout(this.counterHandler);
this.counterHandler = undefined; this.counterHandler = undefined;
} }
} }

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

@ -1,21 +1,18 @@
import React from 'react'; import React from 'react';
import { isMobile, isPassword, isCaptcha } from 'oak-domain/lib/utils/validator';
import { DesktopIcon, LockOnIcon, MobileIcon } from 'tdesign-icons-react';
import { import {
Form, isMobile,
Input, isPassword,
Button, isCaptcha,
MessagePlugin, } from 'oak-domain/lib/utils/validator';
Checkbox, import { DesktopIcon, LockOnIcon, MobileIcon } from 'tdesign-icons-react';
Tabs, import { Form, Input, Button, Checkbox, Tabs } from 'tdesign-react';
} from 'tdesign-react';
const { TabPanel } = Tabs; const { TabPanel } = Tabs;
const { FormItem } = Form; const { FormItem } = Form;
export default function render() { 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 { mobile, captcha, password, counter } = this.state;
const validMobile = isMobile(mobile); const validMobile = isMobile(mobile);
const validCaptcha = isCaptcha(captcha); const validCaptcha = isCaptcha(captcha);
@ -31,8 +28,9 @@ export default function render() {
type="tel" type="tel"
data-attr="mobile" data-attr="mobile"
maxlength={11} maxlength={11}
prefixIcon={<MobileIcon className="site-form-item-icon" />} prefixIcon={<MobileIcon />}
placeholder="Mobile" placeholder="Mobile"
size="large"
onChange={(value, context) => { onChange={(value, context) => {
this.setState({ this.setState({
mobile: value, mobile: value,
@ -45,9 +43,10 @@ export default function render() {
clearable clearable
value={password} value={password}
data-attr="password" data-attr="password"
prefixIcon={<LockOnIcon className="site-form-item-icon" />} prefixIcon={<LockOnIcon />}
type="password" type="password"
placeholder="Password" placeholder="Password"
size="large"
onChange={(value, context) => { onChange={(value, context) => {
this.setState({ this.setState({
password: value, password: value,
@ -56,19 +55,19 @@ export default function render() {
/> />
</FormItem> </FormItem>
<FormItem> <FormItem>
<Checkbox>Remember me</Checkbox> <Checkbox>{t('Remember me')}</Checkbox>
</FormItem> </FormItem>
<FormItem> <FormItem>
<Button <Button
block block
size="large"
theme="primary" theme="primary"
type="submit" type="submit"
className="login-form-button"
disabled={!allowSubmit} disabled={!allowSubmit}
onClick={() => this.loginByMobile()} onClick={() => this.loginByMobile()}
> >
Log in {t('Log in')}
</Button> </Button>
</FormItem> </FormItem>
</Form> </Form>
@ -82,9 +81,9 @@ export default function render() {
data-attr="mobile" data-attr="mobile"
type="tel" type="tel"
maxlength={11} maxlength={11}
prefixIcon={<MobileIcon className="site-form-item-icon" />} prefixIcon={<MobileIcon />}
placeholder="Mobile" placeholder="Mobile"
style={{ width: 'calc(100% - 65px)' }} size="large"
onChange={(value, context) => { onChange={(value, context) => {
this.setState({ this.setState({
mobile: value, mobile: value,
@ -100,6 +99,7 @@ export default function render() {
type="number" type="number"
maxlength={4} maxlength={4}
placeholder="Captcha" placeholder="Captcha"
size="large"
onChange={(value, context) => { onChange={(value, context) => {
this.setState({ this.setState({
captcha: value, captcha: value,
@ -107,52 +107,59 @@ export default function render() {
}} }}
/> />
<Button <Button
size="large"
theme="primary" theme="primary"
disabled={!validMobile || counter > 0} disabled={!validMobile || counter > 0}
onClick={() => this.sendCaptcha()} onClick={() => this.sendCaptcha()}
> >
{counter > 0 ? counter : 'Send'} {counter > 0 ? counter : t('Send')}
</Button> </Button>
</FormItem> </FormItem>
<FormItem>
<Checkbox>Remember me</Checkbox>
</FormItem>
<FormItem> <FormItem>
<Button <Button
block
size="large"
theme="primary" theme="primary"
className="login-form-button" type="submit"
disabled={!allowSubmit} disabled={!allowSubmit}
onClick={() => this.loginByMobile()} onClick={() => this.loginByMobile()}
> >
Log in {t('Log in')}
</Button> </Button>
</FormItem> </FormItem>
</Form> </Form>
); );
if (onlyCaptcha) { if (onlyCaptcha) {
return ( return (
<div className='page-body'> <div className="page-body">
<div style={{ <div
flex: 2, style={{
}} /> flex: 2,
}}
/>
{LoginCaptcha} {LoginCaptcha}
<div style={{ <div
flex: 3, style={{
}} /> flex: 3,
}}
/>
</div> </div>
); );
} } else if (onlyPassword) {
else if (onlyPassword) {
return ( return (
<div className='page-body'> <div className="page-body">
<div style={{ <div
flex: 2, style={{
}} /> flex: 2,
}}
/>
{LoginPassword} {LoginPassword}
<div style={{ <div
flex: 3, style={{
}} /> flex: 3,
}}
/>
</div> </div>
); );
} }
@ -163,21 +170,38 @@ export default function render() {
flex: 2, flex: 2,
}} }}
/> />
<div style={{ <div
minHeight: 500, style={{
lineHeight: 22, minHeight: 500,
}}> lineHeight: 22,
width: width === 'xs' ? 320 : 400,
}}
>
<Tabs <Tabs
theme="normal" theme="normal"
placement="top" placement="top"
defaultValue="1" defaultValue="1"
size="medium" 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} {LoginPassword}
</TabPanel> </TabPanel>
<TabPanel label="in Captcha" key="2"> <TabPanel
className="tabPanel"
key="tab_2"
label={t('in Captcha')}
value="2"
>
{LoginCaptcha} {LoginCaptcha}
</TabPanel> </TabPanel>
</Tabs> </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 @@
//@ts-ignore
const { getBrowserWidth } = require('oak-frontend-base/lib/platforms/web/utils/width');
/**
* 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';
}
};
if (getBrowserWidth() === 'xs') { if (getBrowserWidth() === 'xs') {
const Dialog = require('tdesign-mobile-react').Dialog; const Dialog = require('tdesign-mobile-react').Dialog;

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

@ -1,30 +1,5 @@
//@ts-ignore
const { getBrowserWidth } = require('oak-frontend-base/lib/platforms/web/utils/width');
/**
* 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';
}
};
if (getBrowserWidth() === 'xs') { if (getBrowserWidth() === 'xs') {
const Message = require('tdesign-mobile-react').Message; const Message = require('tdesign-mobile-react').Message;

5
package.json
View File

@ -50,12 +50,13 @@
"typescript": "^4.7.4" "typescript": "^4.7.4"
}, },
"scripts": { "scripts": {
"prebuild": "ts-node ./scripts/make.ts", "make:domain": "ts-node ./scripts/make.ts",
"prebuild": "npm run make:domain",
"build": "tsc", "build": "tsc",
"get:area": "ts-node ./scripts/getAmapArea.ts", "get:area": "ts-node ./scripts/getAmapArea.ts",
"clean:dir": "ts-node ./scripts/cleanDtsAndJs", "clean:dir": "ts-node ./scripts/cleanDtsAndJs",
"test": "ts-node ./test/test.ts", "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" "prepare": "rimraf node_modules/react & rimraf node_modules/react-dom & rimraf node_modules/react-router"
}, },
"main": "lib/index" "main": "lib/index"