Skip to content

X
xiaomai-cloud-class-web
Commit 3742cffc by zhangleyuan
Options

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

parent 02024187
Showing with 275 additions and 49 deletions
src/modules/personalInfo/ChangePhoneModal.less 0 → 100644
.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 0 → 100644
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 0 → 100644
.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 0 → 100644
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 React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import {Form,Button,Input} from "antd"; import {Form,Button,Input} from "antd";
...@@ -7,6 +17,8 @@ import _ from 'underscore'; ...@@ -7,6 +17,8 @@ import _ from 'underscore';
import $ from 'jquery'; import $ from 'jquery';
import baseImg from '@/common/images/xiaomai-IMG.png'; import baseImg from '@/common/images/xiaomai-IMG.png';
import {CropperModal} from '@/components/'; import {CropperModal} from '@/components/';
import IdentificationModal from './IdentificationModal';
import ChangePhoneModal from './ChangePhoneModal';
import './index.less'; import './index.less';
const FormItem = Form.Item; const FormItem = Form.Item;
...@@ -14,6 +26,11 @@ function PersonalInfoPage() { ...@@ -14,6 +26,11 @@ function PersonalInfoPage() {
const [avatar,setAvatar] = useState(baseImg); const [avatar,setAvatar] = useState(baseImg);
const [imgUrl, setImgUrl] = useState(avatar); const [imgUrl, setImgUrl] = useState(avatar);
const [cropperModalVisible, setCropperModalVisible] = useState(false); 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 { function _handleUpdateAvatar(e: any): any {
const avatar = e.target.files[0]; const avatar = e.target.files[0];
...@@ -35,6 +52,14 @@ function PersonalInfoPage() { ...@@ -35,6 +52,14 @@ function PersonalInfoPage() {
function closeCropperModal():any{ function closeCropperModal():any{
setCropperModalVisible(false); setCropperModalVisible(false);
} }
function identificationConfirm():any{
setIdentificationModalVisible(false);
console.log('111');
setChangePhoneModalVisible(true);
}
function changePhoneModalConfirm():any{
}
return ( return (
<div className="page personal-info-page"> <div className="page personal-info-page">
<div className="page-content"> <div className="page-content">
...@@ -72,62 +97,23 @@ function PersonalInfoPage() { ...@@ -72,62 +97,23 @@ function PersonalInfoPage() {
</div> </div>
<div className="phone-item"> <div className="phone-item">
<span className="label">手机号：</span> <span className="label">手机号：</span>
<span>1822692727</span> <span>{phone}</span>
<Button className="changePhoneBtn">更换手机号</Button> <Button className="changePhoneBtn" onClick={()=>{setIdentificationModalVisible(true)}}>更换手机号</Button>
</div> </div>
<div> <div>
<Button type="primary">保存</Button> <Button type="primary">保存</Button>
</div> </div>
</Form> </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> </div>
{
IdentificationModalVisible && <IdentificationModal phone={phone} onClose={()=>{setIdentificationModalVisible(false)}} onConfirm={()=>{identificationConfirm()}}/>
}
{
changePhoneModalVisible && <ChangePhoneModal onClose={()=>{setChangePhoneModalVisible(false)}} onConfirm={()=>{changePhoneModalConfirm()}}/>
}
</div> </div>
</div> </div>
); );
} }
......
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