''

src/models/usersetting.js

@@ -10,6 +10,7 @@ import {
   getRandomFilename,
 } from '../utils/index';
 import * as usersettingajax from '../services/usersetting';
+import * as register from '../services/register';
 import errorcode from '../common/errorcode';
 export default {
   namespace: 'usersetting',
@@ -18,6 +19,16 @@ export default {
     inviateList: [],
     inviateTeacherList: [],
     stronghold: null,
+    countdown: 60,
+    counting: false,
+    registering: false,
+    resolves: [],
+    modalVisible: false,
+    protocolData: '',
+    timer: null,
+    gettingVerifyCoding: false, // 防止获取验证码重复提交
+    resetPsdDiaShow: false,
+    resetPsdSubmitting: false,
   },
   subscriptions: {
     setup({ dispatch, history }) {  // eslint-disable-line
@@ -25,6 +36,109 @@ export default {
   },
 
   effects: {
+    * getverifycode({ payload }, { call, put, select }) {
+      const { countdown, counting, gettingVerifyCoding } = yield select(state => state.register);
+      const { timer } = yield select(state => state.usersetting);
+      const { mobile, type } = payload;
+      let newCountdowm = countdown;
+      let newCounting = counting;
+      yield put({
+        type: 'updateState',
+        payload: {
+          gettingVerifyCoding: true,
+          counting: false,
+        },
+      });
+      const verifycodehide = message.loading('正在获取验证码....', 0);
+      const data = yield call(register.getVerifyCode, { mobile, type });
+      if (!data.code) {
+        setTimeout(verifycodehide);
+        message.success('验证码获取成功', 1);
+        yield put({
+          type: 'updateState',
+          payload: {
+            gettingVerifyCoding: false,
+          },
+        });
+        newCounting = true;
+        yield put({
+          type: 'updateState',
+          payload: {
+            counting: newCounting,
+          },
+        });
+        const setTimer = setInterval(() => {
+          newCountdowm--;
+          if (newCountdowm <= 0) {
+            newCountdowm = 60;
+            newCounting = false;
+            clearInterval(setTimer);
+          }
+          payload.dispatch({
+            type: 'updateState',
+            payload: {
+              countdown: newCountdowm,
+              counting: newCounting,
+              timer: setTimer,
+            },
+          });
+        }, 1000);
+      } else {
+        setTimeout(verifycodehide);
+        yield put({
+          type: 'updateState',
+          payload: {
+            gettingVerifyCoding: false,
+            counting: false,
+            countdown: 60,
+          },
+        });
+        message.error(errorcode[data.code] && errorcode[data.code].cn, 1);
+      }
+    },
+    * resetpsd({ payload }, { call, put, select }) {
+      const { values, callBack } = payload;
+      const { resetPsdSubmitting } = yield select(state => state.usersetting);
+      if (resetPsdSubmitting) {
+        return;
+      }
+      yield put({
+        type: 'updateState',
+        payload: {
+          resetPsdSubmitting: true,
+        },
+      });
+      const resethide = message.loading('正在重置密码...');
+      const data = yield call(register.resetPsd, { info: values });
+      yield put({
+        type: 'updateState',
+        payload: {
+          resetPsdSubmitting: false,
+        },
+      });
+      if (!data.code) {
+        setTimeout(resethide);
+        message.success('密码重置成功', 1);
+        yield put({
+          type: 'updateState',
+          payload: {
+            resetPsdDiaShow: false,
+          },
+        });
+        // yield put({
+        //   type: 'register/gologin',
+        //   payload: {
+        //     mobile: info.mobile,
+        //   },
+        // });
+        if (callBack && (typeof callBack == 'function')) {
+          callBack();
+        }
+      } else {
+        setTimeout(resethide);
+        message.error(errorcode[data.code].cn, 1);
+      }
+    },
     * updateUserAvatar({ payload }, { call, put, select }) {
       const { userInfo } = yield select(state => state.webapp);
       const { avatar } = payload;

src/pages/usersetting/index.js

 import React from 'react';
 import { connect } from 'dva';
-import { Row, Col, Form, Input, Button } from 'antd';
+import { Row, Col, Modal, Form, Input, Button, message } from 'antd';
 import pageStyles from './index.less';
 import Cropper from '../../components/Cropper';
 import { pageIn, imagify } from '../../utils/index';
 const { Search } = Input;
 const FormItem = Form.Item;
-class UserSetting extends React.Component {
+class UserSettingForm extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -81,13 +81,81 @@ class UserSetting extends React.Component {
       type: 'usersetting/goback',
     });
   }
+  sendVerifyCode = () => {
+    const {
+      dispatch, form, gettingVerifyCoding, counting,
+    } = this.props;
+    if (gettingVerifyCoding || counting) {
+      return;
+    }
+    const mobile = form.getFieldValue('mobile');
+    if (mobile === undefined) {
+      message.error('请输入手机号', 1);
+      return;
+    }
+    if (!/^1[3456789]{1}[0-9]{9}$/.test(mobile)) {
+      message.error('请输入正确的手机号', 1);
+      return;
+    }
+    dispatch({
+      type: 'usersetting/getverifycode',
+      payload: {
+        type: 2,
+        mobile: 13095705152,
+        dispatch,
+      },
+    });
+  }
+  toResetPsd = (visible) => {
+    const {
+      dispatch, form,
+    } = this.props;
+    if (!visible) {
+      form.setFields({
+        verifycode: '',
+        confirmpassword: '',
+        password: '',
+      });
+    }
+    dispatch({
+      type: 'usersetting/updateState',
+      payload: {
+        resetPsdDiaShow: visible,
+      },
+    });
+  }
+  resetPsd = () => {
+    const { dispatch, form } = this.props;
+    form.validateFields((err, values) => {
+      if (!err) {
+        dispatch({
+          type: 'usersetting/resetpsd',
+          payload: {
+            values,
+            callBack: () => {
+              form.setFields({
+                verifycode: '',
+                confirmpassword: '',
+                password: '',
+              });
+            },
+          },
+        });
+      }
+    });
+  }
   render() {
     const {
       cropperboxShow,
       uploadImgUrl,
       avatorUploader,
       userInfo,
+      counting,
+      countdown,
+      resetPsdDiaShow,
+      resetPsdSubmitting,
     } = this.props;
+    const { getFieldDecorator } = this.props.form;
     return (
       <Row className={`${pageStyles.container} schoollistcontainer`}>
         <div className={pageStyles.header}>
@@ -111,11 +179,11 @@ class UserSetting extends React.Component {
                 </div>
               </div>
               <div className={pageStyles.infoline}>
-                <div className={pageStyles.infodetail}>手机号:{userInfo.mobile}</div>
-                <div className={pageStyles.infooperate}>修改密码</div>
+                <div className={pageStyles.infodetail}>手&nbsp;&nbsp;机&nbsp;&nbsp;号:&nbsp;&nbsp;{userInfo.mobile}</div>
+                <div className={pageStyles.infooperate} onClick={() => this.toResetPsd(true)}>修改密码</div>
               </div>
               <div className={pageStyles.infoline}>
-                <div className={pageStyles.infodetail}>绑定微信:未绑定</div>
+                <div className={pageStyles.infodetail}>绑定微信:&nbsp;&nbsp;未绑定</div>
                 <div className={pageStyles.infooperate}>立即绑定</div>
               </div>
             </Row>
@@ -128,18 +196,118 @@ class UserSetting extends React.Component {
           sureCropper={this.sureCropper}
           uploadImgUrl={uploadImgUrl}
         />}
+        <Modal
+          visible={resetPsdDiaShow}
+          title="重置密码"
+          okText="保存"
+          zIndex={110}
+          onOk={this.resetPsd}
+          confirmLoading={resetPsdSubmitting}
+          onCancel={() => this.toResetPsd(false)}
+          maskClosable={false}
+        >
+          <Form className="modalform" labelAlign="left">
+            <Form.Item
+              label={<span>&nbsp;&nbsp;&nbsp;手机号</span>}
+              required
+              labelCol={{
+                xs: { span: 24 },
+                sm: { span: 5 },
+              }}
+              wrapperCol={{
+                xs: { span: 24 },
+                sm: { span: 19 },
+              }}
+            >
+              {getFieldDecorator('mobile', {
+                initialValue: userInfo.mobile,
+              })(<span>{userInfo.mobile}</span>)}
+            </Form.Item>
+            <Form.Item
+              label={<span>&nbsp;&nbsp;&nbsp;验证码</span>}
+              labelCol={{
+                xs: { span: 24 },
+                sm: { span: 5 },
+              }}
+              wrapperCol={{
+                xs: { span: 24 },
+                sm: { span: 19 },
+              }}
+            >
+              <Row gutter={8}>
+                <Col span={15}>
+                  {getFieldDecorator('verify_code', {
+                    rules: [
+                      { required: true, message: '请输入四位数字验证码' },
+                      { pattern: /^[0-9]{4}$/, message: '验证码是4位数字验证码' },
+                    ],
+                  })(<Input type="text" maxLength={4} placeholder="请输入验证码" />)}
+                </Col>
+                <Col span={9} style={{ color: '#1890FF', cursor: 'pointer', fontSize: '14px' }}>
+                  <div className={`${pageStyles.verycodebtn} ${counting ? pageStyles.verycodebtndisable : ''}`} onClick={this.sendVerifyCode}>{counting ? `${countdown}秒后重新获取` : '发送验证码'}</div>
+                </Col>
+              </Row>
+            </Form.Item>
+            <Form.Item
+              label="设置密码"
+              hasFeedback
+              labelCol={{
+                xs: { span: 24 },
+                sm: { span: 5 },
+              }}
+              wrapperCol={{
+                xs: { span: 24 },
+                sm: { span: 19 },
+              }}
+            >
+              {getFieldDecorator('password', {
+                rules: [
+                  { required: true, message: '设置密码（6-16位）!' },
+                  { pattern: /^[a-zA-Z0-9]{6,20}$/, message: '密码格式不正确(6-20位字母和数字组合)!' },
+                ],
+              })(<Input type="text" maxLength={20} placeholder="请输入密码" />)}
+            </Form.Item>
+            <Form.Item
+              hasFeedback
+              label="确认密码"
+              labelCol={{
+                xs: { span: 24 },
+                sm: { span: 5 },
+              }}
+              wrapperCol={{
+                xs: { span: 24 },
+                sm: { span: 19 },
+              }}
+            >
+              {getFieldDecorator('confirm_password', {
+                rules: [
+                  { required: true, message: '设置密码（6-16位）!' },
+                  {
+                    validator: (rule, value, callback) => {
+                      const { form } = this.props;
+                      if (value && value !== form.getFieldValue('password')) {
+                        callback('两次输入的密码不一致!');
+                      } else {
+                        callback();
+                      }
+                    },
+                  },
+                ],
+              })(<Input type="text" maxLength={20} placeholder="请输入确认密码" />)}
+            </Form.Item>
+          </Form>
+        </Modal>
       </Row>
     );
   }
 }
 
-UserSetting.propTypes = {
+UserSettingForm.propTypes = {
 
 
 };
+const UserSetting = Form.create()(UserSettingForm);
 function mapStateToProps(state) {
-  // const {
-  // } = state.usersetting;
   const {
     cropperboxShow,
     uploadImgUrl,
@@ -148,11 +316,23 @@ function mapStateToProps(state) {
   const {
     userInfo,
   } = state.webapp;
+  const {
+    counting,
+    countdown,
+    gettingVerifyCoding,
+    resetPsdDiaShow,
+    resetPsdSubmitting,
+  } = state.usersetting;
   return {
     cropperboxShow,
+    resetPsdDiaShow,
     uploadImgUrl,
     avatorUploader,
     userInfo,
+    gettingVerifyCoding,
+    counting,
+    countdown,
+    resetPsdSubmitting,
   };
 }
 export default connect(mapStateToProps)(UserSetting);

src/pages/usersetting/index.less

@@ -68,6 +68,7 @@
     text-align: right;
     color: #108EE9;
     font-size: 14px;
+    cursor: pointer;
 }
 .infodetail {
     text-align: left;

src/services/register.js

@@ -14,6 +14,7 @@ export function getVerifyCode(params) {
     url: `${api.getVerifyCode}`,
     method: 'GET',
     params,
+    needAuth: false,
   });
 }
 export function resetPsd(payload) {
@@ -22,6 +23,7 @@ export function resetPsd(payload) {
     url: `${api.resetPassword}`,
     method: 'PUT',
     data,
+    needAuth: false,
   });
 }
 export function getResolves() {

src/utils/request.js

@@ -61,16 +61,19 @@ export default function request(options) {
   const user = LocalStorage.getItem('user');
   const teacher = LocalStorage.getItem('teacher') || {};
   const dakarole = LocalStorage.getItem('dakarole') || 1;
+  const needAuth = options.needAuth === undefined ? true : false;
   if (dakarole == 2) {
     options.url = options.url.replace(/\/member\//,'/teacher/');
   }
-  if (user && user.token && dakarole == 1) {
-    options.headers = {
-      Authorization: `bearer ${user.token}`
-    }
-  } else if (teacher && teacher.token && dakarole == 2) {
-    options.headers = {
-      Authorization: `bearer ${teacher.token}`
+  if (needAuth) {
+    if (user && user.token && dakarole == 1) {
+      options.headers = {
+        Authorization: `bearer ${user.token}`
+      }
+    } else if (teacher && teacher.token && dakarole == 2) {
+      options.headers = {
+        Authorization: `bearer ${teacher.token}`
+      }
     }
   }
   return axios(options)