feat:个人中心添加身份验证和修改手机号

src/modules/personalInfo/ChangePhoneModal.less

+.change-phone-modal{
+    .desc{
+        font-size:14px;
+        color:#666;
+        margin-bottom:4px;
+    }
+    .new-phone-content{
+        margin-bottom:8px;
+    }
+    .send-code{
+        width: 94px;
+        height: 32px;
+        background: #FFFFFF;
+        border: 1px solid #E8E8E8;
+        display:inline-block;
+        line-height:32px;
+        text-align:center;
+        border-radius: 4px;
+        margin-left:8px;
+        color:#666666;
+    }
+    .error-message{
+        font-size:14px;
+        color:#FF4F4F;
+        margin-top:4px;
+    }
+}
\ No newline at end of file

src/modules/personalInfo/ChangePhoneModal.tsx

+import React, { useState, useEffect } from 'react';
+import { Modal, Button, Input} from 'antd';
+import _ from 'underscore';
+import './ChangePhoneModal.less';
+import Form from 'antd/lib/form/Form';
+
+
+interface changePhoneModalProps {
+    onClose:() => void,
+    onConfirm:(e:any) => void
+}
+
+function ChangePhoneModal(props: changePhoneModalProps) {
+    const { onClose,onConfirm } = props;
+    const [newPhone,setNewPhone]  = useState('');
+    const [phoneVerify,setPhoneVerify] = useState('');
+    const [codeText, setCodeText] = useState('发送验证码'); 
+     //Todo
+     const [errorMessageText,setErrorMessageText] =  useState('验证码有误');
+
+    useEffect(() => {
+     
+    })
+    function handleConfirm():any{
+        onClose();
+    }
+    return (
+        <Modal
+            visible={true}
+            title="更换手机号"
+            width={448}
+            onCancel={onClose}
+            className="change-phone-modal"
+            footer={[
+                <Button
+                    id='cancel_allot_btn'
+                    key="back" onClick={onClose}>取消</Button>,
+                <Button
+                    id='confirm_allot_btn'
+                    key="submit"
+                    type="primary"
+                    onClick={() => {
+                        handleConfirm()
+                    }}>
+                    确认
+                </Button>
+            ]}
+        >
+            <div className="desc">请输入新的手机号</div>
+            <div className="new-phone-content"> 
+                <Input
+                    type="text"
+                    name="newPhone"
+                    placeholder="请输入新手机号"
+                    value={newPhone}
+                    onChange={(e) => { setNewPhone(e.target.value) }}
+                    style={{ width:200,height:32}}
+                />
+            </div>
+            <div className="verify-content"> 
+                <Input
+                    type="text"
+                    name="phoneVerify"
+                    placeholder="请输入手机号"
+                    value={newPhone}
+                    onChange={(e) => { setNewPhone(e.target.value) }}
+                    style={{ width:200,height:32}}
+                />
+                <span className="send-code">{codeText}</span>
+            </div>
+            <div className="error-message">{errorMessageText}</div>
+        </Modal>
+    )
+}
+
+export default ChangePhoneModal;
\ No newline at end of file

src/modules/personalInfo/IdentificationModal.less

+.identification-modal{
+    .desc{
+        font-size:14px;
+        color:#666;
+        margin-bottom:4px;
+    }
+    .phone{
+        font-size: 14px;
+        font-weight: 500;
+        color: #333333;
+        line-height: 22px;
+        text-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+        margin-bottom:11px;
+    }
+    .send-code{
+        width: 94px;
+        height: 32px;
+        background: #FFFFFF;
+        border: 1px solid #E8E8E8;
+        display:inline-block;
+        line-height:32px;
+        text-align:center;
+        border-radius: 4px;
+        margin-left:8px;
+        color:#666666;
+    }
+    .error-message{
+        font-size:14px;
+        color:#FF4F4F;
+        margin-top:4px;
+    }
+}
\ No newline at end of file

src/modules/personalInfo/IdentificationModal.tsx

+import React, { useState, useEffect } from 'react';
+import { Modal, Form, Button, Input, Radio, Row, Col } from 'antd';
+import _ from 'underscore';
+import './IdentificationModal.less';
+
+interface IdentificationModalProps {
+    onClose:() => void,
+    phone:String,
+    onConfirm:() => void
+}
+
+function IdentificationModal(props: IdentificationModalProps) {
+    const {onClose, phone ,onConfirm} = props;
+    const [phoneVerify, setPhoneverify] = useState(''); // 验证身份的验证码
+    const [codeText, setCodeText] = useState('发送验证码');
+    const [checking, setChecking] = useState(false);
+    const [waitStatus, setWaitStatus] = useState(false); // 验证码是否在倒计时
+    //Todo
+    const [errorMessageText,setErrorMessageText] =  useState('验证码有误');
+
+    useEffect(() => {
+     
+    })
+    function handleConfirm():any {
+        if(!phoneVerify){
+            setErrorMessageText('请输入验证码');
+           return;
+        }
+        onConfirm();
+    }
+    function handleSendCode() {
+       if (waitStatus) return;
+        let timer:any;
+        timeSub(60,0);
+        setChecking(true)
+        function timeSub(waitTime:number, unit:number):any{
+            clearTimeout(timer);
+            timer = setTimeout(function () {
+                if (waitTime == 0) {
+                setCodeText('发送验证码')
+                setChecking(false)
+                setWaitStatus(false)
+                clearTimeout(timer);
+                } else {
+                setCodeText(`${waitTime}秒后重发`)
+                setWaitStatus(true)
+                timeSub(--waitTime, 1000);
+                }
+            }, unit || 0);
+        }
+    }
+    return (
+        <Modal
+            visible={true}
+            title="身份验证"
+            width={448}
+            onCancel={onClose}
+            className="identification-modal"
+            footer={[
+                <Button
+                  id='cancel_allot_btn'
+                  key="back" onClick={onClose}>取消</Button>,
+                <Button
+                  id='confirm_allot_btn'
+                  key="submit"
+                  type="primary"
+                  onClick={() => {
+                    handleConfirm()
+                  }}>
+                  确认
+                </Button>
+              ]}
+        >
+     
+        <div className="desc">为了你的账户安全，请验证身份。验证成功后进行下一步操作</div>
+        <div className="phone">{phone}</div>
+        <div className="verify-content">
+            <Input
+                type="text"
+                name="phoneverify"
+                placeholder="验证码"
+                value={phoneVerify}
+                onChange={(e) => { setPhoneverify(e.target.value) }}
+                style={{ width:200,height:32}}
+            />
+            <span
+                className="send-code"  
+                onClick={() => {
+                    if (checking) return;
+                    handleSendCode();
+                }}>
+                {codeText}
+            </span>
+        </div>
+        <div className="error-message">{errorMessageText}</div>
+      
+        </Modal>
+    )
+}
+
+export default IdentificationModal;
\ No newline at end of file

src/modules/personalInfo/index.tsx

+/*
+ * @Author: zhangleyuan
+ * @Date: 2020-11-27 15:06:31
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2020-11-30 17:00:39
+ * @Description: 描述一下
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+
+
 import React, { useEffect, useState } from "react";
 import { withRouter } from "react-router-dom";
 import {Form,Button,Input} from "antd";
@@ -7,6 +17,8 @@ import _ from 'underscore';
 import $ from 'jquery';
 import baseImg from '@/common/images/xiaomai-IMG.png';
 import {CropperModal} from '@/components/';
+import IdentificationModal from './IdentificationModal';
+import ChangePhoneModal from './ChangePhoneModal';
 
 import './index.less';
 const FormItem = Form.Item;
@@ -14,6 +26,11 @@ function PersonalInfoPage() {
   const [avatar,setAvatar]  = useState(baseImg);
   const [imgUrl, setImgUrl] = useState(avatar);
   const [cropperModalVisible, setCropperModalVisible] = useState(false);
+  const [IdentificationModalVisible, setIdentificationModalVisible] = useState(false);
+  const [changePhoneModalVisible, setChangePhoneModalVisible] = useState(false);
+
+  //Todo
+  const [phone,setPhone] = useState("18226927277");
 
   function _handleUpdateAvatar(e: any): any {
     const avatar = e.target.files[0];
@@ -35,6 +52,14 @@ function PersonalInfoPage() {
   function closeCropperModal():any{
     setCropperModalVisible(false);
   }
+  function identificationConfirm():any{
+    setIdentificationModalVisible(false);
+    console.log('111');
+    setChangePhoneModalVisible(true);
+  }
+  function changePhoneModalConfirm():any{
+    
+  }
   return (
     <div className="page personal-info-page">
       <div className="page-content">
@@ -72,62 +97,23 @@ function PersonalInfoPage() {
           </div>
           <div className="phone-item">
             <span className="label">手机号：</span>
-            <span>1822692727</span>
-            <Button className="changePhoneBtn">更换手机号</Button>
+            <span>{phone}</span>
+            <Button className="changePhoneBtn" onClick={()=>{setIdentificationModalVisible(true)}}>更换手机号</Button>
           </div>
           <div>
             <Button type="primary">保存</Button>
           </div>
         </Form>
-          {/* <Form>
-            <FormItem
-              label="个人头像"
-              labelCol={{ span: 2 }}
-            >
-              <div id="avatar_edit" className="img-box" style={{ width: 54, height: 54, display: 'inline-block' }}>
-                <UpLoad
-                
-                />
-              </div>
-            </FormItem>
-            <FormItem
-              label="姓名"
-              labelCol={{ span: 2 }}
-            >
-              <span>{window.currentUserInstInfo.adminName}</span>
-            </FormItem>
-            <FormItem
-              label="昵称"
-              labelCol={{ span: 2 }}
-            >
-              <Input
-                id="nick_name_input"
-                value={this.state.nickName}
-                placeholder="昵称不能超过10个字符"
-                style={{ width: 200 }}
-                onChange={(event) => {
-                  let nickName = event.target.value;
-                  this.setState({ nickName });
-                }} />
-              <Row>
-                <Col span={2}></Col>
-                <Col>
-                  <span className="icon iconfont" style={{ color: '#20A1FF', marginRight: 10 }}>&#xe64d;</span>“昵称”将用于家长端中的家校互动展示
-                </Col>
-              </Row>
-            </FormItem>
-            <FormItem>
-              <Col span={2}></Col>
-              <Button
-                id="update_user_info_btn"
-                onClick={this.handleEditNickName}
-                type="primary" >
-                更新信息
-              </Button>
-            </FormItem>
-          </Form> */}
         </div>
+        {
+          IdentificationModalVisible  && <IdentificationModal  phone={phone} onClose={()=>{setIdentificationModalVisible(false)}} onConfirm={()=>{identificationConfirm()}}/>
+        }
+        
+        {
+          changePhoneModalVisible  && <ChangePhoneModal   onClose={()=>{setChangePhoneModalVisible(false)}} onConfirm={()=>{changePhoneModalConfirm()}}/>
+        }
       </div>
+      
     </div>
   );
 }