feat:修改个人中心用户名的字数的限制的问题

src/modules/personalInfo/ChangePhoneModal.tsx

@@ -20,8 +20,7 @@ function ChangePhoneModal(props: changePhoneModalProps) {
     const [phoneVerifyError,setPhoneVerifyError] =  useState(false);
     const [errorMessageText,setErrorMessageText] =  useState('');
     const [openCheck, setOpenCheck] = useState(false); //滑块验证是否是打开状态
-    const [checking, setChecking] = useState(false);
-
+    const [checkObject, setCheckObject] = useState({});
     useEffect(() => {
      
     })
@@ -29,6 +28,7 @@ function ChangePhoneModal(props: changePhoneModalProps) {
         callback();
     }
     function checkSendPhone(){
+        if (waitStatus) return;
         if(!newPhone){
             setErrorMessageText('请输入手机号'); 
             setNewPhoneError(true);
@@ -39,11 +39,11 @@ function ChangePhoneModal(props: changePhoneModalProps) {
             setNewPhoneError(true);  
             return; 
         }
+        !_.isEmpty(checkObject) && checkObject.reset();
         setOpenCheck(true);
     }
     function handleSendSMSCode(checkData:any){
         if (waitStatus) return;
-       
         let timer:any;
         const param ={
             phone:newPhone,
@@ -62,7 +62,7 @@ function ChangePhoneModal(props: changePhoneModalProps) {
              timer = setTimeout(function () {
                  if (waitTime === 0) {
                  setCodeText('发送验证码')
-                 setWaitStatus(false)
+                 setWaitStatus(false);
                  clearTimeout(timer);
                  } else {
                      setCodeText(`${waitTime}秒后重发`)
@@ -165,6 +165,7 @@ function ChangePhoneModal(props: changePhoneModalProps) {
                 <span style={{ fontSize: '12px', color: '#999', marginBottom: 8, display: 'block' }}>请完成安全验证</span>
                 <CheckBeforeSendCode
                     callback={(data:any, nc:any) => {
+                    setCheckObject(nc);
                     checkAccount(1, () => {
                         handleSendSMSCode(data);
                         setTimeout(() => {
@@ -185,9 +186,6 @@ function ChangePhoneModal(props: changePhoneModalProps) {
                 className="send-code"
                 id="sendVerifyCode"
                 onClick={() => {
-                    if(checking){
-                      return false;
-                    }
                     checkSendPhone()
                 }}
                 >{codeText}</div>

src/modules/personalInfo/IdentificationModal.tsx

@@ -19,8 +19,7 @@ function IdentificationModal(props: IdentificationModalProps) {
 
     const [errorMessageText,setErrorMessageText] =  useState('');
     const [openCheck, setOpenCheck] = useState(false); //滑块验证是否是打开状态
-    const [checking, setChecking] = useState(false);
-
+    const [checkObject, setCheckObject] = useState({});
     useEffect(() => {
      
     })
@@ -75,6 +74,11 @@ function IdentificationModal(props: IdentificationModalProps) {
             }, unit || 0);
         }
     }
+    function checkSend() {
+        if (waitStatus) return;
+        !_.isEmpty(checkObject) && checkObject.reset();
+        setOpenCheck(true);
+    }
     return (
         <Modal
             visible={true}
@@ -123,6 +127,7 @@ function IdentificationModal(props: IdentificationModalProps) {
                 <span style={{ fontSize: '12px', color: '#999', marginBottom: 8, display: 'block' }}>请完成安全验证</span>
                 <CheckBeforeSendCode
                     callback={(data:any, nc:any) => {
+                    setCheckObject(nc);
                     checkAccount(1, () => {
                         handleSendSMSCode(data);
                         setTimeout(() => {
@@ -143,10 +148,7 @@ function IdentificationModal(props: IdentificationModalProps) {
                 className="send-code"
                 id="sendVerifyCode"
                 onClick={() => {
-                    if(checking){
-                      return false;
-                    }
-                  setOpenCheck(true);
+                    checkSend()
                 }}
                 >{codeText}</div>
             </Popover>

src/modules/personalInfo/index.less

@@ -3,12 +3,7 @@
         .box{
             padding:60px !important;
         }
-        .avatar{
-            width:60px;
-            height:60px;
-            cursor: pointer;
-            border-radius: 50%;
-        }
+      
         .label{
             width:56px;
             text-align:right;
@@ -19,7 +14,36 @@
             margin-right:8px;
         }
         .avatat-item{
+            position: relative;
             margin-bottom:12px;
+            .avatar{
+                width:60px;
+                height:60px;
+                cursor: pointer;
+                border-radius: 50%;
+            }
+
+            .avatar-cover{
+                width:60px;
+                height:60px;
+                cursor: pointer;
+                border-radius: 50%;
+                background: #000;
+                opacity:0;
+                position: absolute;
+                left:63px;
+                text-align:center;
+                line-height:60px;
+                .pen{
+                    display:inline-block;
+                    color:#FFF;
+                    font-size:22px;
+                }
+                &:hover{
+                    display: inline-block;
+                    opacity:0.5;
+                }
+            }
         }
         .name-item{
             margin-bottom:16px;

src/modules/personalInfo/index.tsx

@@ -2,7 +2,7 @@
  * @Author: zhangleyuan
  * @Date: 2020-11-27 15:06:31
  * @LastEditors: zhangleyuan
- * @LastEditTime: 2020-12-09 11:23:52
+ * @LastEditTime: 2020-12-09 18:28:58
  * @Description: 描述一下
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
@@ -115,7 +115,12 @@ function PersonalInfoPage() {
               id="CrpperAvatarPic"
               style={{ display: 'none' }}
               onChange={_handleUpdateAvatar} />
-            <img className="avatar" src={avatar} onClick={_onUpload}></img>
+              <img className="avatar" src={avatar}></img>
+              <span className="avatar-cover" onClick={_onUpload}>
+                  <span className="icon iconfont pen">
+                    &#xe82c;
+                  </span>
+              </span>
             { cropperModalVisible &&
               <CropperModal 
                 imgUrl={imgUrl}
@@ -129,6 +134,7 @@ function PersonalInfoPage() {
             <Input
               placeholder="请输入姓名" 
               style={{ width:300,height:32}} value={nickName}  
+              maxLength={10}
               onChange={(e) => { 
                 setNickName(e.target.value);
               }}