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

b71e8148 · zhangleyuan · 3c5b7a07 · b71e8148 · b71e8148 · b71e8148
Commit b71e8148 authored Dec 09, 2020 by zhangleyuan
Showing with 51 additions and 21 deletions

src/modules/personalInfo/ChangePhoneModal.tsx
+5 -7

src/modules/personalInfo/IdentificationModal.tsx
+8 -6

src/modules/personalInfo/index.less
+30 -6

src/modules/personalInfo/index.tsx
+8 -2

No files found.
--- a/src/modules/personalInfo/ChangePhoneModal.tsx
+++ b/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>

--- a/src/modules/personalInfo/IdentificationModal.tsx
+++ b/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){
+                    checkSend()
-                      return false;
-                    }
-                  setOpenCheck(true);
                }}
                >{codeText}</div>
            </Popover>

--- a/src/modules/personalInfo/index.less
+++ b/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;

--- a/src/modules/personalInfo/index.tsx
+++ b/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);
              }}