修改手机号

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;