Skip to content

M
mr-julyedu
Commit 89912a28 by zhanghaozhe
Options

Merge branch 'formik' into dev

parents 0cb27bb9 4d4316e7
Showing with 282 additions and 193 deletions
.storybook/style.scss
...@@ -16,3 +16,10 @@ ...@@ -16,3 +16,10 @@
outline: 0; outline: 0;
-webkit-appearance: none; -webkit-appearance: none;
} }
.screen {
position: relative;
width: 375px;
height: 667px;
background: #fff;
}
\ No newline at end of file
package.json
...@@ -4,25 +4,25 @@ ...@@ -4,25 +4,25 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"@babel/core": "7.9.0", "@babel/core": "7.9.0",
"@babel/plugin-proposal-decorators": "^7.4.4", "@babel/plugin-proposal-decorators": "^7.10.5",
"@babel/runtime": "^7.7.7", "@loadable/component": "^5.13.1",
"@loadable/component": "^5.10.1",
"@svgr/webpack": "4.3.3", "@svgr/webpack": "4.3.3",
"@testing-library/jest-dom": "^4.2.4", "@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0", "@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1", "@testing-library/user-event": "^7.2.1",
"@types/classnames": "^2.2.10",
"@types/jest": "^24.9.1", "@types/jest": "^24.9.1",
"@types/node": "^12.12.53", "@types/node": "^12.12.54",
"@types/qs": "^6.9.4", "@types/qs": "^6.9.4",
"@types/react": "^16.9.43", "@types/react": "^16.9.44",
"@types/react-dom": "^16.9.8", "@types/react-dom": "^16.9.8",
"@types/react-redux": "^7.1.9", "@types/react-redux": "^7.1.9",
"@types/react-router-dom": "^5.1.5", "@types/react-router-dom": "^5.1.5",
"@types/redux-logger": "^3.0.8", "@types/redux-logger": "^3.0.8",
"@typescript-eslint/eslint-plugin": "^2.10.0", "@typescript-eslint/eslint-plugin": "^2.10.0",
"@typescript-eslint/parser": "^2.10.0", "@typescript-eslint/parser": "^2.10.0",
"antd-mobile": "^2.3.1", "antd-mobile": "^2.3.3",
"autoprefixer": "^9.6.0", "autoprefixer": "^9.8.6",
"axios": "^0.19.2", "axios": "^0.19.2",
"babel-core": "7.0.0-bridge.0", "babel-core": "7.0.0-bridge.0",
"babel-eslint": "10.1.0", "babel-eslint": "10.1.0",
...@@ -34,9 +34,9 @@ ...@@ -34,9 +34,9 @@
"callapp-lib": "^2.1.8", "callapp-lib": "^2.1.8",
"camelcase": "^5.3.1", "camelcase": "^5.3.1",
"case-sensitive-paths-webpack-plugin": "2.3.0", "case-sensitive-paths-webpack-plugin": "2.3.0",
"crypto-js": "^3.1.9-1", "crypto-js": "^3.3.0",
"css-loader": "3.4.2", "css-loader": "3.4.2",
"date-fns": "^2.14.0", "date-fns": "^2.15.0",
"dotenv": "8.2.0", "dotenv": "8.2.0",
"dotenv-expand": "5.1.0", "dotenv-expand": "5.1.0",
"eslint": "^6.6.0", "eslint": "^6.6.0",
...@@ -48,21 +48,21 @@ ...@@ -48,21 +48,21 @@
"eslint-plugin-react": "7.19.0", "eslint-plugin-react": "7.19.0",
"eslint-plugin-react-hooks": "^1.6.1", "eslint-plugin-react-hooks": "^1.6.1",
"file-loader": "4.3.0", "file-loader": "4.3.0",
"formik": "^1.5.8", "formik": "^2.1.5",
"fs-extra": "^8.1.0", "fs-extra": "^8.1.0",
"html-webpack-plugin": "4.0.0-beta.11", "html-webpack-plugin": "4.0.0-beta.11",
"html2canvas": "^1.0.0-rc.5", "html2canvas": "^1.0.0-rc.5",
"http-proxy-middleware": "^0.19.1", "http-proxy-middleware": "^0.19.2",
"identity-obj-proxy": "3.0.0", "identity-obj-proxy": "3.0.0",
"jest": "24.9.0", "jest": "24.9.0",
"jest-environment-jsdom-fourteen": "1.0.1", "jest-environment-jsdom-fourteen": "1.0.1",
"jest-pnp-resolver": "1.0.2", "jest-pnp-resolver": "1.0.2",
"jest-resolve": "24.9.0", "jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.2", "jest-watch-typeahead": "0.4.2",
"js-base64": "^2.5.1", "js-base64": "^2.6.4",
"js-cookie": "^2.2.0", "js-cookie": "^2.2.1",
"json-stringify-safe": "^5.0.1", "json-stringify-safe": "^5.0.1",
"less": "^3.9.0", "less": "^3.12.2",
"less-loader": "^4.1.0", "less-loader": "^4.1.0",
"lodash": "^4.17.19", "lodash": "^4.17.19",
"mini-css-extract-plugin": "0.9.0", "mini-css-extract-plugin": "0.9.0",
...@@ -76,21 +76,21 @@ ...@@ -76,21 +76,21 @@
"postcss-safe-parser": "4.0.1", "postcss-safe-parser": "4.0.1",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"qrcode": "^1.4.4", "qrcode": "^1.4.4",
"qs": "^6.7.0", "qs": "^6.9.4",
"react": "^16.13.1", "react": "^16.13.1",
"react-ace": "^8.0.0", "react-ace": "^8.1.0",
"react-app-polyfill": "^1.0.6", "react-app-polyfill": "^1.0.6",
"react-copy-to-clipboard": "^5.0.1", "react-copy-to-clipboard": "^5.0.2",
"react-dev-utils": "^10.2.1", "react-dev-utils": "^10.2.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-infinite-scroller": "^1.2.4", "react-infinite-scroller": "^1.2.4",
"react-lazy-load": "^3.0.13", "react-lazy-load": "^3.1.13",
"react-mobile-swiper": "^1.1.4", "react-mobile-swiper": "^1.1.4",
"react-redux": "^7.0.2", "react-redux": "^7.2.1",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-spinners": "^0.5.4", "react-spinners": "^0.9.0",
"react-sticky": "^6.0.3", "react-sticky": "^6.0.3",
"redux": "^4.0.1", "redux": "^4.0.5",
"redux-immutable": "^4.0.0", "redux-immutable": "^4.0.0",
"redux-logger": "^3.0.6", "redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0", "redux-thunk": "^2.3.0",
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
"resolve-url-loader": "3.1.1", "resolve-url-loader": "3.1.1",
"sass-loader": "8.0.2", "sass-loader": "8.0.2",
"semver": "6.3.0", "semver": "6.3.0",
"socket.io": "^2.2.0", "socket.io": "^2.3.0",
"store2": "^2.11.2", "store2": "^2.11.2",
"style-loader": "0.23.1", "style-loader": "0.23.1",
"swiper": "^4.5.1", "swiper": "^4.5.1",
...@@ -106,8 +106,8 @@ ...@@ -106,8 +106,8 @@
"ts-pnp": "1.1.6", "ts-pnp": "1.1.6",
"typescript": "^3.7.5", "typescript": "^3.7.5",
"url-loader": "2.3.0", "url-loader": "2.3.0",
"video.js": "^7.6.5", "video.js": "^7.8.4",
"web-launch-app": "^2.1.9", "web-launch-app": "^2.2.4",
"webpack": "4.42.0", "webpack": "4.42.0",
"webpack-dev-server": "^3.11.0", "webpack-dev-server": "^3.11.0",
"webpack-manifest-plugin": "2.2.0", "webpack-manifest-plugin": "2.2.0",
...@@ -123,27 +123,37 @@ ...@@ -123,27 +123,37 @@
"eslintConfig": { "eslintConfig": {
"extends": "react-app" "extends": "react-app"
}, },
"browserslist": [ "browserslist": {
"production": [
">0.2%", ">0.2%",
"not dead", "not dead",
"not ie <= 11",
"not op_mini all" "not op_mini all"
], ],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"jest": { "jest": {
"roots": [
"<rootDir>/src"
],
"collectCoverageFrom": [ "collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}", "src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts" "!src/**/*.d.ts"
], ],
"resolver": "jest-pnp-resolver",
"setupFiles": [ "setupFiles": [
"react-app-polyfill/jsdom" "react-app-polyfill/jsdom"
], ],
"setupFilesAfterEnv": [
"<rootDir>/src/setupTests.ts"
],
"testMatch": [ "testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}", "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}" "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
], ],
"testEnvironment": "jsdom", "testEnvironment": "jest-environment-jsdom-fourteen",
"testURL": "http://localhost",
"transform": { "transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest", "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js", "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
...@@ -153,6 +163,7 @@ ...@@ -153,6 +163,7 @@
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$", "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$" "^.+\\.module\\.(css|sass|scss)$"
], ],
"modulePaths": [],
"moduleNameMapper": { "moduleNameMapper": {
"^react-native$": "react-native-web", "^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy" "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
...@@ -170,8 +181,8 @@ ...@@ -170,8 +181,8 @@
"node" "node"
], ],
"watchPlugins": [ "watchPlugins": [
"/Users/baiguangyao/project/my-julyedu/node_modules/jest-watch-typeahead/filename.js", "jest-watch-typeahead/filename",
"/Users/baiguangyao/project/my-julyedu/node_modules/jest-watch-typeahead/testname.js" "jest-watch-typeahead/testname"
] ]
}, },
"babel": { "babel": {
...@@ -195,20 +206,20 @@ ...@@ -195,20 +206,20 @@
] ]
}, },
"devDependencies": { "devDependencies": {
"@babel/runtime": "^7.7.2", "@babel/runtime": "^7.11.2",
"@storybook/addon-actions": "^5.3.19", "@storybook/addon-actions": "^5.3.19",
"@storybook/addon-knobs": "^5.3.19", "@storybook/addon-knobs": "^5.3.19",
"@storybook/addon-links": "^5.3.19", "@storybook/addon-links": "^5.3.19",
"@storybook/addons": "^5.3.19", "@storybook/addons": "^5.3.19",
"@storybook/preset-typescript": "^3.0.0", "@storybook/preset-typescript": "^3.0.0",
"@storybook/react": "^5.3.19", "@storybook/react": "^5.3.19",
"babel-plugin-import": "^1.11.0", "babel-plugin-import": "^1.13.0",
"browserslist": "^4.6.6", "browserslist": "^4.14.0",
"caniuse-lite": "^1.0.30000989", "caniuse-lite": "^1.0.30001112",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"fork-ts-checker-webpack-plugin": "^5.0.14", "fork-ts-checker-webpack-plugin": "^5.0.14",
"mockjs": "^1.0.1-beta3", "mockjs": "^1.1.0",
"postcss-px-to-viewport": "^1.1.0", "postcss-px-to-viewport": "^1.1.1",
"ts-loader": "^8.0.2" "ts-loader": "^8.0.2"
}, },
"theme": "./src/assets/theme/config.js" "theme": "./src/assets/theme/config.js"
......
src/App.js
...@@ -50,7 +50,8 @@ class App extends Component { ...@@ -50,7 +50,8 @@ class App extends Component {
firstLoad = true firstLoad = true
componentWillMount() { componentDidMount() {
let url = window.location.href let url = window.location.href
if (url.indexOf('ccode') > -1) { if (url.indexOf('ccode') > -1) {
if (!getParam('ccode').includes('%')) { if (!getParam('ccode').includes('%')) {
...@@ -61,9 +62,8 @@ class App extends Component { ...@@ -61,9 +62,8 @@ class App extends Component {
}) })
} }
} }
}
componentDidMount() {
//是否显示宝箱全局入口 //是否显示宝箱全局入口
this.isShowGlobalEntryInTime() this.isShowGlobalEntryInTime()
......
src/common/address/index.tsx 0 → 100644
import React, {Component} from 'react'
import './index.scss'
import MaskCover from "../cover";
interface PersonalInfo {
name: string
phone: string
address: string
}
interface Props extends PersonalInfo {
subtitle: string
title?: string
onSubmit?: () => PersonalInfo
}
class Address extends Component<Props> {
render() {
return <MaskCover>
<div className="address-container">
<div className="title"></div>
<div className="subtitle"></div>
</div>
</MaskCover>
}
}
export default Address
src/common/addressPopup/index.js
...@@ -23,7 +23,7 @@ class AddressPopup extends Component { ...@@ -23,7 +23,7 @@ class AddressPopup extends Component {
// 获取收货信息 // 获取收货信息
fetchUserAddress = () => { fetchUserAddress = () => {
const { addressInfo } = this.state; const {addressInfo} = this.state;
http.get(`${API.home}/sys/user_address_info`).then(res => { http.get(`${API.home}/sys/user_address_info`).then(res => {
const {code, data, msg} = res.data; const {code, data, msg} = res.data;
if (code === 200) { if (code === 200) {
...@@ -40,10 +40,10 @@ class AddressPopup extends Component { ...@@ -40,10 +40,10 @@ class AddressPopup extends Component {
} }
handleToSubmit = (params = {}) => { handleToSubmit = (params = {}) => {
const { successBindAddress } = this.props; const {successBindAddress} = this.props;
http.post(`${API.home}/sys/update_address`, { http.post(`${API.home}/sys/update_address`, {
act_type: 'treasure', act_type: 'treasure',
...params ...params,
}).then(res => { }).then(res => {
const {code, msg} = res.data; const {code, msg} = res.data;
if (code === 200) { if (code === 200) {
...@@ -55,7 +55,7 @@ class AddressPopup extends Component { ...@@ -55,7 +55,7 @@ class AddressPopup extends Component {
} }
render() { render() {
const { isLoading, addressInfo } = this.state; const {isLoading, addressInfo} = this.state;
const {tip, prize, skip = 'default'} = this.props; const {tip, prize, skip = 'default'} = this.props;
return ( return (
<> <>
...@@ -63,7 +63,7 @@ class AddressPopup extends Component { ...@@ -63,7 +63,7 @@ class AddressPopup extends Component {
isLoading && isLoading &&
<Formik <Formik
initialValues={{ initialValues={{
...addressInfo ...addressInfo,
}} }}
validate={({name, phone, address}) => { validate={({name, phone, address}) => {
const errors = {}; const errors = {};
...@@ -71,7 +71,7 @@ class AddressPopup extends Component { ...@@ -71,7 +71,7 @@ class AddressPopup extends Component {
if (!name) { if (!name) {
errors.name = '请输入收件人'; errors.name = '请输入收件人';
} }
if(!/^1[3-9]\d{9}$/.test(phone)) { if (!/^1[3-9]\d{9}$/.test(phone)) {
errors.phone = '请填写正确格式的手机号'; errors.phone = '请填写正确格式的手机号';
} }
if (!address) { if (!address) {
...@@ -85,7 +85,9 @@ class AddressPopup extends Component { ...@@ -85,7 +85,9 @@ class AddressPopup extends Component {
onSubmit={(values) => { onSubmit={(values) => {
this.handleToSubmit(values); this.handleToSubmit(values);
}} }}
render={({errors}) => ( >
{
({errors}) => (
<Form className="address-form" data-skip={skip}> <Form className="address-form" data-skip={skip}>
<h2 className="address-form__title">收货信息</h2> <h2 className="address-form__title">收货信息</h2>
{ {
...@@ -97,11 +99,12 @@ class AddressPopup extends Component { ...@@ -97,11 +99,12 @@ class AddressPopup extends Component {
) : (null) ) : (null)
} }
{ {
tip ? (<div className="address-form__subtitle">{tip}</div>) : (<p className="address-form__desc">请及时填写收货信息，获得实物奖品后将第一时间为您邮寄</p>) tip ? (<div className="address-form__subtitle">{tip}</div>) : (
<p className="address-form__desc">请及时填写收货信息，获得实物奖品后将第一时间为您邮寄</p>)
} }
<Field <Field
name="name" name="name"
render={({ field }) => ( render={({field}) => (
<div className="address-form__item"> <div className="address-form__item">
<input <input
{...field} {...field}
...@@ -118,7 +121,7 @@ class AddressPopup extends Component { ...@@ -118,7 +121,7 @@ class AddressPopup extends Component {
/> />
<Field <Field
name="phone" name="phone"
render={({ field }) => ( render={({field}) => (
<div className="address-form__item"> <div className="address-form__item">
<input <input
{...field} {...field}
...@@ -135,7 +138,7 @@ class AddressPopup extends Component { ...@@ -135,7 +138,7 @@ class AddressPopup extends Component {
/> />
<Field <Field
name="address" name="address"
render={({ field }) => ( render={({field}) => (
<div className="address-form__item"> <div className="address-form__item">
<input <input
{...field} {...field}
...@@ -154,10 +157,12 @@ class AddressPopup extends Component { ...@@ -154,10 +157,12 @@ class AddressPopup extends Component {
className="address-form__submit" className="address-form__submit"
data-status="do" data-status="do"
type="submit" type="submit"
>提交</button> >提交
</button>
</Form> </Form>
)} )
/> }
</Formik>
} }
</> </>
); );
......
src/common/bindPhone/index.js
...@@ -177,7 +177,9 @@ class BindPhone extends Component { ...@@ -177,7 +177,9 @@ class BindPhone extends Component {
}); });
this.toBindPhone(); this.toBindPhone();
}} }}
render={({values: {tel, code}, errors}) => ( >
{
({values: {tel, code}, errors}) => (
<Form className="popup-form" data-skip={skip}> <Form className="popup-form" data-skip={skip}>
<h2 className="popup-form__title">绑定手机号</h2> <h2 className="popup-form__title">绑定手机号</h2>
{ {
...@@ -238,8 +240,9 @@ class BindPhone extends Component { ...@@ -238,8 +240,9 @@ class BindPhone extends Component {
完成绑定 完成绑定
</button> </button>
</Form> </Form>
)} )
/> }
</Formik>
) )
} }
} }
......
src/common/closable-popup/index.js → src/common/closable-popup/index.tsx
...@@ -5,6 +5,18 @@ import classnames from 'classnames' ...@@ -5,6 +5,18 @@ import classnames from 'classnames'
const re = /(https?|ftp):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/ const re = /(https?|ftp):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/
interface Props {
title: string
content: React.ReactNode
className?: string
closable?: boolean
clickMaskClose?: boolean
close?: () => void | Promise<void>
closeIcon?: string
remove?: () => void
afterClose?: () => void
}
function ClosablePopup({ function ClosablePopup({
title, title,
content, content,
...@@ -19,8 +31,7 @@ function ClosablePopup({ ...@@ -19,8 +31,7 @@ function ClosablePopup({
remove = function () { remove = function () {
} }
} = {}) { }: Props) {
function unmountComponent() { function unmountComponent() {
ReactDOM.unmountComponentAtNode(div) ReactDOM.unmountComponentAtNode(div)
...@@ -62,8 +73,8 @@ function ClosablePopup({ ...@@ -62,8 +73,8 @@ function ClosablePopup({
{ {
closable && closable &&
(re.test(closeIcon) (re.test(closeIcon)
? <img src={closeIcon} alt="" className={'close-icon'} onClick={_close}/> ? <img src={closeIcon} alt="" className={'close-icon'} onClick={_close} />
: <i className={`close iconfont ${closeIcon}`} onClick={_close}/>) : <i className={`close iconfont ${closeIcon}`} onClick={_close} />)
} }
</div> </div>
</div> </div>
......
src/common/cover/index.scss 0 → 100644
.mask-cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .6);
z-index: 999;
}
\ No newline at end of file
src/common/cover/index.tsx 0 → 100644
import React from 'react';
import './index.scss'
const MaskCover:React.FC = ({children}) => {
return (
<div className={'mask-cover'}>
{children}
</div>
);
};
export default MaskCover;
\ No newline at end of file
src/components/blessingPreheat/addressPopup/index.js
...@@ -24,7 +24,7 @@ class AddressPopup extends Component { ...@@ -24,7 +24,7 @@ class AddressPopup extends Component {
// 获取收货信息 // 获取收货信息
fetchUserAddress = () => { fetchUserAddress = () => {
const { addressInfo } = this.state; const {addressInfo} = this.state;
http.get(`${API.home}/sys/user_address_info`).then(res => { http.get(`${API.home}/sys/user_address_info`).then(res => {
const {code, data, msg} = res.data; const {code, data, msg} = res.data;
if (code === 200) { if (code === 200) {
...@@ -41,7 +41,7 @@ class AddressPopup extends Component { ...@@ -41,7 +41,7 @@ class AddressPopup extends Component {
} }
handleToSubmit = (params = {}) => { handleToSubmit = (params = {}) => {
const { handleToHide } = this.props; const {handleToHide} = this.props;
http.post(`${API.home}/sys/collect_info`, params).then(res => { http.post(`${API.home}/sys/collect_info`, params).then(res => {
const {code, msg} = res.data; const {code, msg} = res.data;
if (code === 200) { if (code === 200) {
...@@ -53,7 +53,7 @@ class AddressPopup extends Component { ...@@ -53,7 +53,7 @@ class AddressPopup extends Component {
} }
render() { render() {
const { isLoading, addressInfo } = this.state; const {isLoading, addressInfo} = this.state;
const {tip, prize} = this.props; const {tip, prize} = this.props;
return ( return (
<> <>
...@@ -61,7 +61,7 @@ class AddressPopup extends Component { ...@@ -61,7 +61,7 @@ class AddressPopup extends Component {
isLoading && isLoading &&
<Formik <Formik
initialValues={{ initialValues={{
...addressInfo ...addressInfo,
}} }}
validate={({name, phone, address}) => { validate={({name, phone, address}) => {
const errors = {}; const errors = {};
...@@ -69,7 +69,7 @@ class AddressPopup extends Component { ...@@ -69,7 +69,7 @@ class AddressPopup extends Component {
if (!name) { if (!name) {
errors.name = '请输入收件人'; errors.name = '请输入收件人';
} }
if(!/^1[3-9]\d{9}$/.test(phone)) { if (!/^1[3-9]\d{9}$/.test(phone)) {
errors.phone = '请填写正确格式的手机号'; errors.phone = '请填写正确格式的手机号';
} }
if (!address) { if (!address) {
...@@ -83,7 +83,8 @@ class AddressPopup extends Component { ...@@ -83,7 +83,8 @@ class AddressPopup extends Component {
onSubmit={(values) => { onSubmit={(values) => {
this.handleToSubmit(values); this.handleToSubmit(values);
}} }}
render={({errors}) => ( >
{({errors}) => (
<Form className="address-form"> <Form className="address-form">
{ {
prize ? ( prize ? (
...@@ -91,11 +92,13 @@ class AddressPopup extends Component { ...@@ -91,11 +92,13 @@ class AddressPopup extends Component {
) : (null) ) : (null)
} }
{ {
tip ? (<p className="address-form__desc">{tip}</p>) : (<p className="address-form__desc">请及时填写收货信息，获得实物奖品后将第一时间为您邮寄</p>) tip ? (<p className="address-form__desc">{tip}</p>) : (
<p className="address-form__desc">请及时填写收货信息，获得实物奖品后将第一时间为您邮寄</p>)
} }
<Field <Field
name="name" name="name"
render={({ field }) => ( >
{({field}) => (
<div className="address-form__item"> <div className="address-form__item">
<input <input
{...field} {...field}
...@@ -109,10 +112,11 @@ class AddressPopup extends Component { ...@@ -109,10 +112,11 @@ class AddressPopup extends Component {
} }
</div> </div>
)} )}
/> </Field>
<Field <Field
name="phone" name="phone"
render={({ field }) => ( >
{({field}) => (
<div className="address-form__item"> <div className="address-form__item">
<input <input
{...field} {...field}
...@@ -126,10 +130,11 @@ class AddressPopup extends Component { ...@@ -126,10 +130,11 @@ class AddressPopup extends Component {
} }
</div> </div>
)} )}
/> </Field>
<Field <Field
name="address" name="address"
render={({ field }) => ( >
{({field}) => (
<div className="address-form__item"> <div className="address-form__item">
<input <input
{...field} {...field}
...@@ -143,15 +148,16 @@ class AddressPopup extends Component { ...@@ -143,15 +148,16 @@ class AddressPopup extends Component {
} }
</div> </div>
)} )}
/> </Field>
<button <button
className="address-form__submit" className="address-form__submit"
data-status="do" data-status="do"
type="submit" type="submit"
>提交</button> >提交
</button>
</Form> </Form>
)} )}
/> </Formik>
} }
</> </>
); );
......
src/components/detail/bindPhone/index.js
...@@ -20,11 +20,11 @@ class BargainBindPhone extends Component { ...@@ -20,11 +20,11 @@ class BargainBindPhone extends Component {
} }
// 获取短信验证码 // 获取短信验证码
handleToSendCode = ({ mobile }) => { handleToSendCode = ({mobile}) => {
const { country: { num = 86 } } = this.props; const {country: {num = 86}} = this.props;
let { isTimer, seconds } = this.state; let {isTimer, seconds} = this.state;
if(!isTimer) { if (!isTimer) {
if(!/^\d+$/.test(mobile)){ if (!/^\d+$/.test(mobile)) {
Toast.info('请输入正确的手机号'); Toast.info('请输入正确的手机号');
return; return;
} }
...@@ -34,11 +34,11 @@ class BargainBindPhone extends Component { ...@@ -34,11 +34,11 @@ class BargainBindPhone extends Component {
`${API['passport-api']}/m/personal/bindPhoneSendCode`, `${API['passport-api']}/m/personal/bindPhoneSendCode`,
{ {
area_code: `00${num}`, area_code: `00${num}`,
phone_num: mobile phone_num: mobile,
} },
).then(res => { ).then(res => {
const { errno, msg } = res.data; const {errno, msg} = res.data;
if(errno === 200) { if (errno === 200) {
Toast.info('验证码发送成功', 2, null, false); Toast.info('验证码发送成功', 2, null, false);
// 倒计时 // 倒计时
...@@ -47,16 +47,16 @@ class BargainBindPhone extends Component { ...@@ -47,16 +47,16 @@ class BargainBindPhone extends Component {
window.clearInterval(this.timer); window.clearInterval(this.timer);
this.setState({ this.setState({
isTimer: false, isTimer: false,
seconds: 60 seconds: 60,
}); });
}else { } else {
this.setState({ this.setState({
isTimer: true, isTimer: true,
seconds: --seconds seconds: --seconds,
}); });
} }
}, 1000); }, 1000);
}else { } else {
Toast.info(msg); Toast.info(msg);
} }
}); });
...@@ -65,7 +65,7 @@ class BargainBindPhone extends Component { ...@@ -65,7 +65,7 @@ class BargainBindPhone extends Component {
// 绑定手机号 // 绑定手机号
handleToBindPhone = ({code, mobile}) => { handleToBindPhone = ({code, mobile}) => {
const { country: { num = 86}, handleToBargain, confirmBindPhone } = this.props; const {country: {num = 86}, handleToBargain, confirmBindPhone} = this.props;
if (!mobile) { if (!mobile) {
Toast.info('请填手机号码'); Toast.info('请填手机号码');
return; return;
...@@ -87,34 +87,34 @@ class BargainBindPhone extends Component { ...@@ -87,34 +87,34 @@ class BargainBindPhone extends Component {
{ {
...params, ...params,
type: 1, type: 1,
is_valid: 1 is_valid: 1,
} },
).then(res => { ).then(res => {
const { errno, data, msg } = res.data; const {errno, data, msg} = res.data;
if(errno === 200) { if (errno === 200) {
if(data.tip_info) { if (data.tip_info) {
confirmBindPhone(params, data.tip_info); confirmBindPhone(params, data.tip_info);
}else { } else {
handleToBargain(); handleToBargain();
} }
}else { } else {
Toast.info(msg); Toast.info(msg);
} }
}); });
} }
render() { render() {
const { country: { num = '86' } } = this.props; const {country: {num = '86'}} = this.props;
const { isTimer, seconds } = this.state; const {isTimer, seconds} = this.state;
return ( return (
<Formik <Formik
initialValues={{ initialValues={{
mobile: '', mobile: '',
code: '' code: '',
}} }}
validate={({mobile, code}) => { validate={({mobile, code}) => {
const errors = {}; const errors = {};
if(!/^\d+$/.test(mobile)) { if (!/^\d+$/.test(mobile)) {
errors.mobile = '请填写正确格式的手机号'; errors.mobile = '请填写正确格式的手机号';
} }
if (!/[0-9]{6}/.test(code)) { if (!/[0-9]{6}/.test(code)) {
...@@ -122,10 +122,11 @@ class BargainBindPhone extends Component { ...@@ -122,10 +122,11 @@ class BargainBindPhone extends Component {
} }
return errors; return errors;
}} }}
onSubmit={(values, { setStatus, setSubmitting }) => { onSubmit={(values, {setStatus, setSubmitting}) => {
this.handleToBindPhone(values); this.handleToBindPhone(values);
}} }}
render={({values: {mobile, code}, errors}) => ( >
{({values: {mobile, code}, errors}) => (
<Form className="bargain-bind-phone"> <Form className="bargain-bind-phone">
<h2 className="bargain-bind-phone__title">绑定手机，先砍一刀</h2> <h2 className="bargain-bind-phone__title">绑定手机，先砍一刀</h2>
<div className="bargain-bind-phone__item"> <div className="bargain-bind-phone__item">
...@@ -138,7 +139,8 @@ class BargainBindPhone extends Component { ...@@ -138,7 +139,8 @@ class BargainBindPhone extends Component {
</Link> </Link>
<Field <Field
name="mobile" name="mobile"
render={({field}) => ( >
{({field}) => (
<input <input
{...field} {...field}
className="bargain-bind-phone__ipt" className="bargain-bind-phone__ipt"
...@@ -147,12 +149,11 @@ class BargainBindPhone extends Component { ...@@ -147,12 +149,11 @@ class BargainBindPhone extends Component {
maxLength={11} maxLength={11}
/> />
)} )}
/> </Field>
</div> </div>
<div className="bargain-bind-phone__item"> <div className="bargain-bind-phone__item">
<Field <Field name="code">
name="code" {({field}) => (
render={({field}) => (
<input <input
{...field} {...field}
type="tel" type="tel"
...@@ -160,30 +161,31 @@ class BargainBindPhone extends Component { ...@@ -160,30 +161,31 @@ class BargainBindPhone extends Component {
maxLength={6} maxLength={6}
/> />
)} )}
/> </Field>
{errors.mobile} {errors.mobile}
<button <button
type="button" type="button"
className={classnames( className={classnames(
'bargain-bind-phone__button--send', 'bargain-bind-phone__button--send',
{ {
'active': mobile && errors.mobile === undefined 'active': mobile && errors.mobile === undefined,
} },
)} )}
disabled={!(mobile && errors.mobile === undefined)} disabled={!(mobile && errors.mobile === undefined)}
onClick={() => this.handleToSendCode({mobile})} onClick={() => this.handleToSendCode({mobile})}
> >
{isTimer? `重新发送${seconds}s` : '发送验证码'} {isTimer ? `重新发送${seconds}s` : '发送验证码'}
</button> </button>
</div> </div>
<button <button
type="submit" type="submit"
className="bargain-bind-phone__button--bargain" className="bargain-bind-phone__button--bargain"
disabled={!(mobile && code && JSON.stringify(errors) === '{}')} disabled={!(mobile && code && JSON.stringify(errors) === '{}')}
>先砍一刀</button> >先砍一刀
</button>
</Form> </Form>
)} )}
/> </Formik>
) )
} }
} }
......
src/components/order/orderinfo.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Flex, NavBar, List, InputItem, Button, WhiteSpace, WingBlank, Toast } from 'antd-mobile'; import { InputItem, Button, WingBlank, Toast } from 'antd-mobile';
import { Formik, Field, Form, withFormik } from 'formik'; import { withFormik } from 'formik';
import {HeaderBar} from '../../common'; import {HeaderBar} from '../../common';
import { http } from "src/utils"; import { http } from "src/utils";
const InnerForm = ({ const InnerForm = ({
values, values,
errors,
touched,
setFieldValue, setFieldValue,
handleBlur,
handleSubmit, handleSubmit,
isSubmitting,
}) => ( }) => (
<form> <form>
<InputItem <InputItem
......
src/components/passport/accountLogin/index.js
...@@ -27,9 +27,8 @@ class AccountLogin extends PureComponent { ...@@ -27,9 +27,8 @@ class AccountLogin extends PureComponent {
<HeaderBar arrow={true} title={'登录'}/> <HeaderBar arrow={true} title={'登录'}/>
<Header/> <Header/>
<Form className="login-info"> <Form className="login-info">
<FastField <FastField name='account'>
name='account' {({field}) => (
render={({field}) => (
<Input <Input
{...field} {...field}
type={'text'} type={'text'}
...@@ -42,10 +41,9 @@ class AccountLogin extends PureComponent { ...@@ -42,10 +41,9 @@ class AccountLogin extends PureComponent {
} }
/> />
)} )}
/> </FastField>
<FastField <FastField name='password'>
name='password' {({field}) => (
render={({field}) => (
<PasswordInput <PasswordInput
{...field} {...field}
autoComplete={'on'} autoComplete={'on'}
...@@ -55,7 +53,7 @@ class AccountLogin extends PureComponent { ...@@ -55,7 +53,7 @@ class AccountLogin extends PureComponent {
} }
/> />
)} )}
/> </FastField>
<LoginButton active={values.account && values.password && isEmpty(errors)}/> <LoginButton active={values.account && values.password && isEmpty(errors)}/>
<Link className={'forgot-password-btn'} to='/passport/forgot-password'>忘记密码</Link> <Link className={'forgot-password-btn'} to='/passport/forgot-password'>忘记密码</Link>
</Form> </Form>
......
src/components/passport/bindingTel/index.js
...@@ -47,7 +47,8 @@ class BindingTel extends Component { ...@@ -47,7 +47,8 @@ class BindingTel extends Component {
<Form> <Form>
<Field <Field
name='tel' name='tel'
render={({field, form}) => { >
{({field, form}) => {
return ( return (
<ClearableInput <ClearableInput
{...field} {...field}
...@@ -59,10 +60,11 @@ class BindingTel extends Component { ...@@ -59,10 +60,11 @@ class BindingTel extends Component {
) )
}} }}
/> </Field>
<Field <Field
name='veriCode' name='veriCode'
render={({field}) => { >
{({field}) => {
return ( return (
<VeriCodeInput <VeriCodeInput
{...field} {...field}
...@@ -81,7 +83,7 @@ class BindingTel extends Component { ...@@ -81,7 +83,7 @@ class BindingTel extends Component {
) )
}} }}
/> </Field>
<CaptchaAli onVerify={this.onVerify} getInstance={this.getCaptchaInstance} mb={0}/> <CaptchaAli onVerify={this.onVerify} getInstance={this.getCaptchaInstance} mb={0}/>
<Button className={'complete-btn'} <Button className={'complete-btn'}
active={values.tel && values.veriCode && isEmpty(errors)}>完成</Button> active={values.tel && values.veriCode && isEmpty(errors)}>完成</Button>
......
src/components/passport/forgotPassword/index.js
...@@ -52,7 +52,8 @@ class ForgotPassword extends Component { ...@@ -52,7 +52,8 @@ class ForgotPassword extends Component {
<Form className='forgot-password-form'> <Form className='forgot-password-form'>
<Field <Field
name={'tel'} name={'tel'}
render={({field, form}) => { >
{({field, form}) => {
return ( return (
<ClearableInput <ClearableInput
{...field} {...field}
...@@ -63,12 +64,13 @@ class ForgotPassword extends Component { ...@@ -63,12 +64,13 @@ class ForgotPassword extends Component {
country={country} country={country}
/>) />)
}} }}
/> </Field>
{ {
this.state.validate && this.state.validate &&
<Field <Field
name='veriCode' name='veriCode'
render={({field}) => { >
{({field}) => {
return ( return (
<VeriCodeInput <VeriCodeInput
{...field} {...field}
...@@ -86,7 +88,7 @@ class ForgotPassword extends Component { ...@@ -86,7 +88,7 @@ class ForgotPassword extends Component {
/> />
) )
}} }}
/> </Field>
} }
<OnSubmissionError callback={this.onSubmissionError}/> <OnSubmissionError callback={this.onSubmissionError}/>
<CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/> <CaptchaAli getInstance={this.getCaptchaInstance} onVerify={this.onVerify}/>
......
src/components/passport/login/index.js
...@@ -18,7 +18,7 @@ class Login extends Component { ...@@ -18,7 +18,7 @@ class Login extends Component {
state = { state = {
validate: null, validate: null,
captchaInstance: null, captchaInstance: null,
validationData: null validationData: null,
} }
loginWaysClick = method => { loginWaysClick = method => {
...@@ -29,7 +29,7 @@ class Login extends Component { ...@@ -29,7 +29,7 @@ class Login extends Component {
let from = location.state && location.state.from || { let from = location.state && location.state.from || {
pathname: '/', pathname: '/',
search: window.location.search, search: window.location.search,
hash: '' hash: '',
}; };
const referrer = document.referrer const referrer = document.referrer
const redirectURI = (!/^https?:\/\/m.julyedu.com\/?$/.test(referrer) && referrer) ? referrer : window.location.origin + from.pathname + from.search + from.hash; const redirectURI = (!/^https?:\/\/m.julyedu.com\/?$/.test(referrer) && referrer) ? referrer : window.location.origin + from.pathname + from.search + from.hash;
...@@ -52,14 +52,14 @@ class Login extends Component { ...@@ -52,14 +52,14 @@ class Login extends Component {
getCaptchaInstance = instance => { getCaptchaInstance = instance => {
this.setState({ this.setState({
captchaInstance: instance captchaInstance: instance,
}) })
} }
onVerify = (data) => { onVerify = (data) => {
this.setState({ this.setState({
validationData: data, validationData: data,
validate: true validate: true,
}) })
} }
...@@ -86,16 +86,15 @@ class Login extends Component { ...@@ -86,16 +86,15 @@ class Login extends Component {
loginWays, loginWays,
errors, errors,
values, values,
country country,
} = this.props } = this.props
return ( return (
<div className='login'> <div className='login'>
<HeaderBar title={'登录'} arrow={true}/> <HeaderBar title={'登录'} arrow={true}/>
<Header/> <Header/>
<Form className="login-info"> <Form className="login-info">
<Field <Field name='tel'>
name='tel' {({field}) => (
render={({field}) => (
<Input <Input
{...field} {...field}
type={'tel'} type={'tel'}
...@@ -105,14 +104,14 @@ class Login extends Component { ...@@ -105,14 +104,14 @@ class Login extends Component {
id={'tel'} id={'tel'}
/> />
)} )}
>
</Field> </Field>
{ {
this.state.validate && this.state.validate &&
<Field <Field
type='number' type='number'
name='veriCode' name='veriCode'
render={({field}) => ( >
{({field}) => (
<VeriCodeInput <VeriCodeInput
{...field} {...field}
className={'verification'} className={'verification'}
...@@ -127,7 +126,7 @@ class Login extends Component { ...@@ -127,7 +126,7 @@ class Login extends Component {
country={country} country={country}
/> />
)} )}
/> </Field>
} }
<CaptchaAli onVerify={this.onVerify} getInstance={this.getCaptchaInstance}/> <CaptchaAli onVerify={this.onVerify} getInstance={this.getCaptchaInstance}/>
...@@ -147,7 +146,7 @@ class Login extends Component { ...@@ -147,7 +146,7 @@ class Login extends Component {
const FormikConfig = { const FormikConfig = {
mapPropsToValues: () => ({ mapPropsToValues: () => ({
tel: '', tel: '',
veriCode: '' veriCode: '',
}), }),
handleSubmit(values, {props}) { handleSubmit(values, {props}) {
const from = props.location.state && props.location.state.from const from = props.location.state && props.location.state.from
...@@ -155,7 +154,7 @@ const FormikConfig = { ...@@ -155,7 +154,7 @@ const FormikConfig = {
phone_num: values.tel, phone_num: values.tel,
phone_code: values.veriCode, phone_code: values.veriCode,
area_code: '00' + props.country.num, area_code: '00' + props.country.num,
redirect: from && encodeURIComponent(window.location.origin + from.pathname + from.search + from.hash) redirect: from && encodeURIComponent(window.location.origin + from.pathname + from.search + from.hash),
}).then(res => { }).then(res => {
if (res.hasError) { if (res.hasError) {
Toast.info(res.msg); Toast.info(res.msg);
...@@ -176,13 +175,13 @@ const FormikConfig = { ...@@ -176,13 +175,13 @@ const FormikConfig = {
errors.veriCode = '请输入验证码' errors.veriCode = '请输入验证码'
} }
return errors return errors
} },
} }
export default compose( export default compose(
connect( connect(
state => ({country: state.country}), state => ({country: state.country}),
{quickLogin} {quickLogin},
), ),
withFormik(FormikConfig), withFormik(FormikConfig),
)(Login) )(Login)
src/components/passport/setPassword/index.js
...@@ -9,7 +9,6 @@ import { HeaderBar } from "src/common" ...@@ -9,7 +9,6 @@ import { HeaderBar } from "src/common"
import { http } from "src/utils" import { http } from "src/utils"
import { Toast } from "antd-mobile" import { Toast } from "antd-mobile"
import { encrypt } from "src/components/passport/encryption" import { encrypt } from "src/components/passport/encryption"
import { Link } from "react-router-dom"
import { isEmpty } from "lodash" import { isEmpty } from "lodash"
import { connect } from "react-redux" import { connect } from "react-redux"
import { setCurrentUser } from 'src/store/userAction' import { setCurrentUser } from 'src/store/userAction'
...@@ -20,30 +19,9 @@ class SetPassword extends Component { ...@@ -20,30 +19,9 @@ class SetPassword extends Component {
let historyUrl = window.localStorage.getItem('HistoryUrl') let historyUrl = window.localStorage.getItem('HistoryUrl')
const {history} = this.props const {history} = this.props
history.push(historyUrl) history.push(historyUrl)
// window.localStorage.removeItem('HistoryUrl')
return
} }
//
// componentDidMount() {
// const {location} = this.props
// const {action} = this.props.history
// let pathname = location.state && location.state.from && location.state.from.pathname
// let search = location.state && location.state.from && location.state.from.search
//
// console.log(location);
// console.log(location.state);
// console.log(action,pathname,search);
//
// // if(action !== 'PUSH'){
// // let historyUrl = `${pathname}${search}`
// // window.localStorage.setItem('HistoryUrl',historyUrl)
// // }
//
// }
render() { render() {
let {values, errors, location} = this.props let {values, errors, location} = this.props
let {from} = location.state || {from: {pathname: '/'}} let {from} = location.state || {from: {pathname: '/'}}
...@@ -55,7 +33,8 @@ class SetPassword extends Component { ...@@ -55,7 +33,8 @@ class SetPassword extends Component {
<Form> <Form>
<Field <Field
name='password' name='password'
render={({field}) => { >
{({field}) => {
return ( return (
<PasswordInput <PasswordInput
autoComplete={'on'} autoComplete={'on'}
...@@ -65,7 +44,7 @@ class SetPassword extends Component { ...@@ -65,7 +44,7 @@ class SetPassword extends Component {
/> />
) )
}} }}
/> </Field>
<Button className={'btn-active'} <Button className={'btn-active'}
active={values.password && values.agreement && isEmpty(errors)}>完成</Button> active={values.password && values.agreement && isEmpty(errors)}>完成</Button>
<label htmlFor="agreement" className='user-agreement'> <label htmlFor="agreement" className='user-agreement'>
......
src/components/passport/studentRoot/index.js
...@@ -171,9 +171,8 @@ class StudentRoot extends PureComponent { ...@@ -171,9 +171,8 @@ class StudentRoot extends PureComponent {
const isSubmit = Object.values(props.values).join('') !== '' && props.errors.tip === undefined; const isSubmit = Object.values(props.values).join('') !== '' && props.errors.tip === undefined;
return ( return (
<Form className="student-form"> <Form className="student-form">
<Field <Field name='tel'>
name='tel' {({field}) => (
render={({field}) => (
<Input <Input
{...field} {...field}
type={'tel'} type={'tel'}
...@@ -182,7 +181,7 @@ class StudentRoot extends PureComponent { ...@@ -182,7 +181,7 @@ class StudentRoot extends PureComponent {
country={country} country={country}
/> />
)} )}
/> </Field>
<div className="student-form__item"> <div className="student-form__item">
<Field <Field
className="student-form__input" className="student-form__input"
...@@ -199,7 +198,8 @@ class StudentRoot extends PureComponent { ...@@ -199,7 +198,8 @@ class StudentRoot extends PureComponent {
<Field <Field
type='number' type='number'
name='code' name='code'
render={({field}) => ( >
{({field}) => (
<VeriCodeInput <VeriCodeInput
{...field} {...field}
className={'student-form__code'} className={'student-form__code'}
...@@ -212,7 +212,7 @@ class StudentRoot extends PureComponent { ...@@ -212,7 +212,7 @@ class StudentRoot extends PureComponent {
country={country} country={country}
/> />
)} )}
/> </Field>
} }
<div className="student-form__item"> <div className="student-form__item">
<label className="student-form__label">学校</label> <label className="student-form__label">学校</label>
......
src/components/ts-test/index.tsx
import React, {Component} from 'react'; import React, {Component, useState, useEffect, useLayoutEffect, useRef} from 'react';
import {V} from 'src/common/course-card'
import {withRouter, RouteComponentProps} from 'react-router-dom' import {withRouter, RouteComponentProps} from 'react-router-dom'
class TSTest extends Component<RouteComponentProps> { const TSTest: React.FC = () => {
componentDidMount() { const [count, setCount] = useState(0);
function handleAlertClick() {
setTimeout(() => {
alert('You clicked on: ' + count);
}, 3000);
} }
render() {
return ( return (
<div className={'ts-test'}> <div>
TS <p>You clicked {count} times</p>
<V title={'a'} status={2} courseId={2} <button onClick={() => setCount(count + 1)}>
history={this.props.history} Click me
image={'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/20a86c1353.jpg'}></V> </button>
<button onClick={handleAlertClick}>
Show alert
</button>
</div> </div>
); );
} }
function Message({text}: { text: string }) {
const [message, setMessage] = useState<string | null>(null)
useEffect(() => {
setMessage(text)
})
return <span>{message}</span>
} }
export default withRouter(TSTest); export default withRouter(TSTest);
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment