Skip to content

X
xiaomai-cloud-class-web
Commit 0487f2d6 by zhangleyuan
Options

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

parent 91815420
Showing with 51 additions and 21 deletions
src/modules/personalInfo/ChangePhoneModal.tsx
...@@ -20,8 +20,7 @@ function ChangePhoneModal(props: changePhoneModalProps) { ...@@ -20,8 +20,7 @@ function ChangePhoneModal(props: changePhoneModalProps) {
const [phoneVerifyError,setPhoneVerifyError] = useState(false); const [phoneVerifyError,setPhoneVerifyError] = useState(false);
const [errorMessageText,setErrorMessageText] = useState(''); const [errorMessageText,setErrorMessageText] = useState('');
const [openCheck, setOpenCheck] = useState(false); //滑块验证是否是打开状态 const [openCheck, setOpenCheck] = useState(false); //滑块验证是否是打开状态
const [checking, setChecking] = useState(false); const [checkObject, setCheckObject] = useState({});
useEffect(() => { useEffect(() => {
}) })
...@@ -29,6 +28,7 @@ function ChangePhoneModal(props: changePhoneModalProps) { ...@@ -29,6 +28,7 @@ function ChangePhoneModal(props: changePhoneModalProps) {
callback(); callback();
} }
function checkSendPhone(){ function checkSendPhone(){
if (waitStatus) return;
if(!newPhone){ if(!newPhone){
setErrorMessageText('请输入手机号'); setErrorMessageText('请输入手机号');
setNewPhoneError(true); setNewPhoneError(true);
...@@ -39,11 +39,11 @@ function ChangePhoneModal(props: changePhoneModalProps) { ...@@ -39,11 +39,11 @@ function ChangePhoneModal(props: changePhoneModalProps) {
setNewPhoneError(true); setNewPhoneError(true);
return; return;
} }
!_.isEmpty(checkObject) && checkObject.reset();
setOpenCheck(true); setOpenCheck(true);
} }
function handleSendSMSCode(checkData:any){ function handleSendSMSCode(checkData:any){
if (waitStatus) return; if (waitStatus) return;
let timer:any; let timer:any;
const param ={ const param ={
phone:newPhone, phone:newPhone,
...@@ -62,7 +62,7 @@ function ChangePhoneModal(props: changePhoneModalProps) { ...@@ -62,7 +62,7 @@ function ChangePhoneModal(props: changePhoneModalProps) {
timer = setTimeout(function () { timer = setTimeout(function () {
if (waitTime === 0) { if (waitTime === 0) {
setCodeText('发送验证码') setCodeText('发送验证码')
setWaitStatus(false) setWaitStatus(false);
clearTimeout(timer); clearTimeout(timer);
} else { } else {
setCodeText(`${waitTime}秒后重发`) setCodeText(`${waitTime}秒后重发`)
...@@ -165,6 +165,7 @@ function ChangePhoneModal(props: changePhoneModalProps) { ...@@ -165,6 +165,7 @@ function ChangePhoneModal(props: changePhoneModalProps) {
<span style={{ fontSize: '12px', color: '#999', marginBottom: 8, display: 'block' }}>请完成安全验证</span> <span style={{ fontSize: '12px', color: '#999', marginBottom: 8, display: 'block' }}>请完成安全验证</span>
<CheckBeforeSendCode <CheckBeforeSendCode
callback={(data:any, nc:any) => { callback={(data:any, nc:any) => {
setCheckObject(nc);
checkAccount(1, () => { checkAccount(1, () => {
handleSendSMSCode(data); handleSendSMSCode(data);
setTimeout(() => { setTimeout(() => {
...@@ -185,9 +186,6 @@ function ChangePhoneModal(props: changePhoneModalProps) { ...@@ -185,9 +186,6 @@ function ChangePhoneModal(props: changePhoneModalProps) {
className="send-code" className="send-code"
id="sendVerifyCode" id="sendVerifyCode"
onClick={() => { onClick={() => {
if(checking){
return false;
}
checkSendPhone() checkSendPhone()
}} }}
>{codeText}</div> >{codeText}</div>
......
src/modules/personalInfo/IdentificationModal.tsx
...@@ -19,8 +19,7 @@ function IdentificationModal(props: IdentificationModalProps) { ...@@ -19,8 +19,7 @@ function IdentificationModal(props: IdentificationModalProps) {
const [errorMessageText,setErrorMessageText] = useState(''); const [errorMessageText,setErrorMessageText] = useState('');
const [openCheck, setOpenCheck] = useState(false); //滑块验证是否是打开状态 const [openCheck, setOpenCheck] = useState(false); //滑块验证是否是打开状态
const [checking, setChecking] = useState(false); const [checkObject, setCheckObject] = useState({});
useEffect(() => { useEffect(() => {
}) })
...@@ -75,6 +74,11 @@ function IdentificationModal(props: IdentificationModalProps) { ...@@ -75,6 +74,11 @@ function IdentificationModal(props: IdentificationModalProps) {
}, unit || 0); }, unit || 0);
} }
} }
function checkSend() {
if (waitStatus) return;
!_.isEmpty(checkObject) && checkObject.reset();
setOpenCheck(true);
}
return ( return (
<Modal <Modal
visible={true} visible={true}
...@@ -123,6 +127,7 @@ function IdentificationModal(props: IdentificationModalProps) { ...@@ -123,6 +127,7 @@ function IdentificationModal(props: IdentificationModalProps) {
<span style={{ fontSize: '12px', color: '#999', marginBottom: 8, display: 'block' }}>请完成安全验证</span> <span style={{ fontSize: '12px', color: '#999', marginBottom: 8, display: 'block' }}>请完成安全验证</span>
<CheckBeforeSendCode <CheckBeforeSendCode
callback={(data:any, nc:any) => { callback={(data:any, nc:any) => {
setCheckObject(nc);
checkAccount(1, () => { checkAccount(1, () => {
handleSendSMSCode(data); handleSendSMSCode(data);
setTimeout(() => { setTimeout(() => {
...@@ -143,10 +148,7 @@ function IdentificationModal(props: IdentificationModalProps) { ...@@ -143,10 +148,7 @@ function IdentificationModal(props: IdentificationModalProps) {
className="send-code" className="send-code"
id="sendVerifyCode" id="sendVerifyCode"
onClick={() => { onClick={() => {
if(checking){ checkSend()
return false;
}
setOpenCheck(true);
}} }}
>{codeText}</div> >{codeText}</div>
</Popover> </Popover>
......
src/modules/personalInfo/index.less
...@@ -3,12 +3,7 @@ ...@@ -3,12 +3,7 @@
.box{ .box{
padding:60px !important; padding:60px !important;
} }
.avatar{
width:60px;
height:60px;
cursor: pointer;
border-radius: 50%;
}
.label{ .label{
width:56px; width:56px;
text-align:right; text-align:right;
...@@ -19,7 +14,36 @@ ...@@ -19,7 +14,36 @@
margin-right:8px; margin-right:8px;
} }
.avatat-item{ .avatat-item{
position: relative;
margin-bottom:12px; 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{ .name-item{
margin-bottom:16px; margin-bottom:16px;
......
src/modules/personalInfo/index.tsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zhangleyuan * @Author: zhangleyuan
* @Date: 2020-11-27 15:06:31 * @Date: 2020-11-27 15:06:31
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-12 14:49:13 * @LastEditTime: 2020-12-22 15:22:47
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -115,7 +115,12 @@ function PersonalInfoPage() { ...@@ -115,7 +115,12 @@ function PersonalInfoPage() {
id="CrpperAvatarPic" id="CrpperAvatarPic"
style={{ display: 'none' }} style={{ display: 'none' }}
onChange={_handleUpdateAvatar} /> 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 && { cropperModalVisible &&
<CropperModal <CropperModal
imgUrl={imgUrl} imgUrl={imgUrl}
...@@ -129,6 +134,7 @@ function PersonalInfoPage() { ...@@ -129,6 +134,7 @@ function PersonalInfoPage() {
<Input <Input
placeholder="请输入姓名" placeholder="请输入姓名"
style={{ width:300,height:32}} value={nickName} style={{ width:300,height:32}} value={nickName}
maxLength={10}
onChange={(e) => { onChange={(e) => {
setNickName(e.target.value); setNickName(e.target.value);
}} }}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment