From b700f76d27ff0c5e4083b0c67d2e409121a4de9d Mon Sep 17 00:00:00 2001 From: saplf Date: Fri, 6 Sep 2019 15:39:28 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=89=8B=E6=9C=BA=E5=8F=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/locales/en-US.ts | 7 ++ src/locales/zh-CN.ts | 7 ++ src/pages/account/index.tsx | 1 + src/pages/chphone/index.tsx | 114 +++++++++++++++++++++++++++++ src/pages/chphone/model.ts | 138 +++++++++++++++++++++++++++++++++++ src/pages/chphone/service.ts | 26 +++++++ src/pages/chphone/style.less | 30 ++++++++ src/pages/fundpwd/model.ts | 2 +- 8 files changed, 324 insertions(+), 1 deletion(-) create mode 100644 src/pages/chphone/index.tsx create mode 100644 src/pages/chphone/model.ts create mode 100644 src/pages/chphone/service.ts create mode 100644 src/pages/chphone/style.less diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts index a4d4936..047d90c 100644 --- a/src/locales/en-US.ts +++ b/src/locales/en-US.ts @@ -21,6 +21,7 @@ export default { 'common.modify': 'Modify', 'common.copied': '复制成功', 'common.prompt': 'Prompt', + 'common.iknow': 'I know', 'check.login': 'Sign In', 'check.register': 'Sign Up', @@ -124,6 +125,12 @@ export default { 'invite.step2': '注册', 'invite.step3': '领取奖金', + 'chphone.title': '更换手机号', + 'chphone.new': '请输入您的新手机号', + 'chphone.code': '请输入手机验证码', + 'chphone.btn': '更换', + 'chphone.success': '您已成功更换了手机号，下次登录请使用新手机号！', + 'fundpwd.title': '修改资金密码', 'fundpwd.origin': '验证原资金密码', 'fundpwd.new': '设置新的资金密码', diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index 4e14195..592bea2 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -21,6 +21,7 @@ export default { 'common.modify': '修改', 'common.copied': '复制成功', 'common.prompt': '提示', + 'common.iknow': '我知道了', 'check.login': '登录', 'check.register': '注册', @@ -124,6 +125,12 @@ export default { 'invite.step2': '注册', 'invite.step3': '领取奖金', + 'chphone.title': '更换手机号', + 'chphone.new': '请输入您的新手机号', + 'chphone.code': '请输入手机验证码', + 'chphone.btn': '更换', + 'chphone.success': '您已成功更换了手机号，下次登录请使用新手机号！', + 'fundpwd.title': '修改资金密码', 'fundpwd.origin': '验证原资金密码', 'fundpwd.new': '设置新的资金密码', diff --git a/src/pages/account/index.tsx b/src/pages/account/index.tsx index 0e188ae..9ec0c4f 100644 --- a/src/pages/account/index.tsx +++ b/src/pages/account/index.tsx @@ -73,6 +73,7 @@ const AccountPage: React.FC = className="group" title="account.phone" message={user.phone} + onClick={() => dispatch(routerRedux.push('/chphone'))} /> = ({ + dispatch, + pageState, + areacode, + areacodes, + phone, + code, + submitting, + codeTimer, + sendingCode, +}) => { + useEffect(() => { + dispatch({ type: 'chphone/load' }); + }, []); + let body; + if (pageState === PageState.Pending) { + body = ( + + ); + } else if (pageState === PageState.Failure) { + body = ( +
{formatMessage({ id: 'common.loadError' })}
+ ); + } else if (pageState === PageState.Success) { + let btnText; + if (codeTimer < 0) { + btnText = formatMessage({ id: 'check.getCode1' }); + } else if (codeTimer === 0) { + btnText = formatMessage({ id: 'check.getCode3' }); + } else { + btnText = formatMessage({ id: 'check.getCode2' }, { time: codeTimer }) + } + body = ( + <> + dispatch({ type: 'chphone/onUpdateState', areacode })} + size="large" + /> + dispatch({ type: 'chphone/onUpdatePhone', payload: e.target.value })} + placeholder={formatMessage({ id: 'chphone.new' })} + size="large" + type="tel" + /> + + dispatch({ type: 'chphone/onUpdateState', code: e.target.value })} + /> + + + + + + ); + } + + return ( +
+
+ +
+ {body} +
+
+ ); +}; + +export default connect( + ({ chphone }: any) => ({ ...chphone }), +)(ChphonePage); diff --git a/src/pages/chphone/model.ts b/src/pages/chphone/model.ts new file mode 100644 index 0000000..83d41e2 --- /dev/null +++ b/src/pages/chphone/model.ts @@ -0,0 +1,138 @@ +import { Model, routerRedux } from "dva"; +import _ from 'lodash'; +import { delay } from 'dva/saga'; +import { PageState, AreaCode, AreaCodes } from '@/types/common'; +import { getAreaCodes } from '@/services/common'; +import { message, Modal } from 'antd'; +import { formatMessage } from 'umi-plugin-locale'; +import { validPwd, validPhone, validPhoneInput } from '@/utils/validate'; +import { changePhone, sendCode } from './service'; +import { dispatch } from '@/utils/utils'; + +export interface ChphoneModelState { + pageState: PageState; + areacodes: AreaCodes, + areacode: AreaCode | undefined, // 选中的地区 + + phone: string; + code: string; + submitting: boolean; + sendingCode: boolean; + codeTimer: number; +} + +const initState: ChphoneModelState = { + pageState: PageState.Pending, + areacodes: [], + areacode: undefined, + + phone: '', + code: '', + submitting: false, + sendingCode: false, + codeTimer: -1, +}; + +const model: Model = { + namespace: 'chphone', + + state: initState, + + effects: { + *load(_, { put, call }) { + yield put({ type: 'onUpdateState', pageState: PageState.Pending }); + try { + const areacodes = yield call(getAreaCodes); + yield put({ + type: 'onUpdateState', + pageState: PageState.Success, + areacodes, + areacode: areacodes[0], + phone: '', + code: '', + submitting: false, + sendingCode: false, + codeTimer: -1, + }); + } catch (e) { + yield put({ + type: 'onUpdateState', + pageState: PageState.Failure, + }); + } + }, + + *submit(_, { put, call, select }) { + const { + areacode, + phone, + code, + submitting, + } = (yield select((state: any) => state.chphone)) as ChphoneModelState; + if (submitting) return; + if (!areacode) return message.warn(formatMessage({ id: 'check.msgArea' })); + if (!validPhone(phone)) return message.warn(formatMessage({ id: 'check.msgPhone' })); + if (!code) return message.warn(formatMessage({ id: 'check.msgCode' })); + yield put({ type: 'onUpdateState', submitting: true }); + try { + yield call(changePhone, phone, code); + yield put({ type: 'user/updateUser', payload: { phone } }); + Modal.success({ + okText: formatMessage({ id: 'common.iknow' }), + title: formatMessage({ id: 'common.prompt' }), + content: formatMessage({ id: 'chphone.success' }), + onOk: () => dispatch(routerRedux.goBack()), + maskClosable: false, + }); + } catch (e) { + message.error(e.message); + } finally { + yield put({ type: 'onUpdateState', submitting: false }) + } + }, + + *timer({ payload }: any, { put }) { + yield put({ type: 'onUpdateState', codeTimer: payload }); + yield delay(1000); + const next = payload - 1; + if (next >= 0) { + yield put({ type: 'timer', payload: next }); + } + }, + + *sendCode(_, { select, put, call }) { + const { areacode, phone } = yield select((state: any) => state.chphone); + if (!areacode) return message.warn(formatMessage({ id: 'check.msgArea' })); + if (!validPhone(phone)) return message.warn(formatMessage({ id: 'check.msgPhone' })); + + yield put({ type: 'onUpdateState', sendingCode: true }); + try { + yield call(sendCode, areacode, phone); + yield put({ type: 'timer', payload: 60 }); + } catch(e) { + message.error(e.message); + } finally { + yield put({ type: 'onUpdateState', sendingCode: false }); + } + }, + }, + + reducers: { + onUpdateState(state, payload) { + return { + ...state, + ...payload, + }; + }, + + onUpdatePhone(state, { payload } : any) { + const phone = validPhoneInput(payload) ? payload : state.phone; + return { + ...state, + phone, + }; + }, + }, +}; + +export default model; diff --git a/src/pages/chphone/service.ts b/src/pages/chphone/service.ts new file mode 100644 index 0000000..b1453fc --- /dev/null +++ b/src/pages/chphone/service.ts @@ -0,0 +1,26 @@ +import http from '@/utils/http'; +import { encodePhone } from '@/utils/transform'; +import { AreaCode } from '@/types/common'; + +export async function changePhone(phone: string, code: string) { + const { ok, msg } = await http.post('/user/chphone', { + phone, + code, + }); + if (ok) return; + throw Error(msg); +} + +export async function sendCode(areacode: AreaCode, phone: string) { + const { ok, msg } = await http.post( + '/sign/send', + { + phone: encodePhone(areacode, phone), + type: 'signUp', + }, + ); + if (ok) { + return true; + } + throw Error(msg); +} diff --git a/src/pages/chphone/style.less b/src/pages/chphone/style.less new file mode 100644 index 0000000..219bd25 --- /dev/null +++ b/src/pages/chphone/style.less @@ -0,0 +1,30 @@ + +@import '../../global.less'; + +.container { + height: 100%; + background: white; + position: relative; + display: flex; + flex-direction: column; +} + +.body { + flex-grow: 1; + overflow-x: hidden; + overflow-y: auto; + display: flex; + flex-direction: column; + align-items: stretch; +} + +.none { + text-align: center; + width: 100%; + padding-top: 40%; +} + +.input { + margin: 10px 20px; + width: auto; +} diff --git a/src/pages/fundpwd/model.ts b/src/pages/fundpwd/model.ts index 2b2bc67..a413c1c 100644 --- a/src/pages/fundpwd/model.ts +++ b/src/pages/fundpwd/model.ts @@ -68,7 +68,7 @@ const model: Model = { if (confirm !== newPwd) return message.warn(formatMessage({ id: 'check.msgConfirm' })); yield put({ type: 'onUpdateState', submitting: true }); try { - yield call(changeFundPwd, newPwd, origin); + yield call(changeFundPwd, newPwd, originVisible ? undefined : origin); yield put(routerRedux.goBack()); message.success(formatMessage({ id: 'fundpwd.success' })); } catch (e) {