Skip to content

J
jinfa-platform
Commit 6ede6c86 authored by Bill's avatar Bill
Browse files
Options

修改账号设置

parent 613ace49
Hide whitespace changes
Inline Side-by-side
Showing with 779 additions and 127 deletions
src/pages/accountSetting/components/EditDataComponent/index.less
View file @ 6ede6c86
.passwordContainer {
position: relative;
.erros {
margin-bottom: 0px;
.errors {
position: absolute;
top: 0;
right: 0;
right: -120px;
.length,
.trim,
.compact {
margin-bottom: 10px;
color: #6B778C;
line-height: 20px;
height: 20px;
font-family: PingFangSC-Regular, PingFang SC;
}
.success {
color: #00B37A;
margin-right: 15px;
}
.icon {
color: rgb(230, 63, 59);
margin-right: 15px;
}
}
}
.captchaBtn {
width: 102px;
}
\ No newline at end of file
src/pages/accountSetting/components/EditDataComponent/index.tsx
View file @ 6ede6c86
import React from 'react';
import React, { useState, useEffect, useCallback } from 'react';
// import { SchemaForm } from '@formily/antd';
import { Form, Input, Row, Col, Button, Select } from 'antd';
import { Form, Input, Row, Col, Button, Select, message } from 'antd';
import styles from './index.less';
import { StepForwardOutlined } from '@ant-design/icons'
import { StepForwardOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
import GetCaptchaCode from '../GetCaptchaCode';
import classNames from 'classnames'
import { PublicApi } from '@/services/api';
import phoneRegExp from './utils';
const Option = Select.Option;
const EditDataComponent = ({type}) => {
const EditDataComponent = (props) => {
const [pwdStatus, setPwdStatus] = useState(null);
const [countryCode, setCountryCode] = useState([]);
const [canSendCode, setCanSandCode] = useState(false);
const passwordValidator = async (rule, value) => {
let temp = {}
let length = value.length >= 8 && value.length <= 20;
let trim = !(/\s\S+|^\s\S+|\s$/.test(value)) //
let compact = /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*)/.test(value); // 必须含有大小写和数字
temp['length'] = length
temp['trim'] = trim
temp['compact'] = compact
setPwdStatus(temp);
if((length && trim && compact) ) {
return Promise.resolve()
} else {
throw new Error(' ');
}
}
// 密码验证
const comfirmPwdValidator = async (rule, value) => {
if(value != props.form.getFieldValue('password')) {
throw new Error("两次密码不一样")
}
}
// 手机号验证
const phoneValidator = async (rule, value) => {
const country = props.form.getFieldValue('country');
const pattern = phoneRegExp[country];
if(!pattern.test(value)) {
throw new Error("请填写正确的手机号")
}
setCanSandCode(true);
}
// 邮箱验证
const emailValidator = async (rule, value) => {
const pattern = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
if(!pattern.test(value)) {
throw new Error("请填写正确的邮箱号")
}
setCanSandCode(true);
}
useEffect(() => {
// 请求 国家前缀
if(props.type == 'phone') {
async function getAllCountryCode() {
const res = await PublicApi.getManageCountryAreaGetTelCode();
setCountryCode(res.data)
}
getAllCountryCode();
}
}, [])
const renderPwd = () => {
return (
......@@ -18,29 +77,61 @@ const EditDataComponent = ({type}) => {
<Col span={18}>
<Form.Item
name="password"
rules={[{ required: true, message: 'Please input the captcha you got!' }]}
rules={
[
{ validator: passwordValidator}
]
}
>
<Input.Password />
<Input.Password />
</Form.Item>
</Col>
<div className={styles.erros}>
<p>密码长度8-20个字符</p>
<p>密码长度8-20个字符</p>
<p>密码长度8-20个字符</p>
</div>
{
pwdStatus
? <div className={styles.errors}>
<p className={styles.length}>
<span className={classNames({
[styles.icon]: !pwdStatus.length,
[styles.success]: pwdStatus.length,
})}>{pwdStatus.length ? <CheckCircleOutlined /> : <CloseCircleOutlined/>}</span>
密码长度8-20个字符</p>
<p className={styles.trim}>
<span className={classNames({
[styles.icon]: !pwdStatus.trim,
[styles.success]: pwdStatus.trim,
})}>
{pwdStatus.trim ? <CheckCircleOutlined /> : <CloseCircleOutlined/>}
</span>
密码不能包含空格
</p>
<p className={styles.compact}>
<span className={classNames({
[styles.icon]: !pwdStatus.compact,
[styles.success]: pwdStatus.compact,
})}>
{pwdStatus.compact ? <CheckCircleOutlined /> : <CloseCircleOutlined/>}
</span>
密码必须包含大小写、小写字母和数字
</p>
</div>
: null
}
</Row>
</Form.Item>
<Form.Item
label="确认密码"
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Row gutter={10}>
<Col span={18}>
<Form.Item
name="captcha"
name="comfirmPwd"
noStyle
rules={[{ required: true, message: 'Please input the captcha you got!' }]}
rules={
[
{ validator: comfirmPwdValidator}
]
}
// rules={[{ required: true, message: 'Please input the captcha you got!' }]}
>
<Input.Password />
</Form.Item>
......@@ -57,15 +148,30 @@ const EditDataComponent = ({type}) => {
<Form.Item label="新的手机号码">
<Row gutter={10}>
<Col span={4}>
<Select>
<Option value="jack"> <StepForwardOutlined />jack</Option>
</Select>
<Form.Item
name="country"
noStyle
rules={[{ required: true, message: '请填写验证码' }]}
>
<Select>
{
countryCode.map((item, key) => {
return (
<Option key={key} value={item}>{item}</Option>
)
})
}
</Select>
</Form.Item>
</Col>
<Col span={14}>
<Form.Item
name="captcha"
name="newPhone"
noStyle
rules={[{ required: true, message: 'Please input the captcha you got!' }]}
rules={[{
validator: phoneValidator
}]}
>
<Input />
</Form.Item>
......@@ -78,14 +184,16 @@ const EditDataComponent = ({type}) => {
<Col span={14}>
<Form.Item
name="phoneCaptcha"
noStyle
rules={[{ required: true, message: 'Please input the captcha you got!' }]}
rules={[{ required: true, message: '请填写验证码' }]}
>
<Input />
</Form.Item>
</Col>
<Col span={6}>
<Button>获取验证码</Button>
{/* <Button>获取验证码</Button> */}
<div className={styles.captchaBtn}>
<GetCaptchaCode getCode={getCode} disable={!canSendCode}/>
</div>
</Col>
</Row>
</Form.Item>
......@@ -102,13 +210,15 @@ const EditDataComponent = ({type}) => {
<Form.Item
name="email"
noStyle
rules={[{ required: true, message: 'Please input the captcha you got!' }]}
rules={[{ validator: emailValidator }]}
>
<Input />
</Form.Item>
</Col>
<Col span={6}>
<Button>获取验证码</Button>
<div className={styles.captchaBtn}>
<GetCaptchaCode getCode={getCode} disable={!canSendCode}/>
</div>
</Col>
</Row>
</Form.Item>
......@@ -118,7 +228,7 @@ const EditDataComponent = ({type}) => {
<Form.Item
name="emailCaptcha"
noStyle
rules={[{ required: true, message: 'Please input the captcha you got!' }]}
rules={[{ required: true, message: '请填写邮箱验证码' }]}
>
<Input />
</Form.Item>
......@@ -129,10 +239,33 @@ const EditDataComponent = ({type}) => {
)
}
const selectedComponent = () => {
const { type } = props;
if(type == 'loginPwd') {
return renderPwd();
} else if(type == 'email') {
return renderEmail();
} else {
return renderPhone();
}
}
// 获取手机验证码
const getCode = useCallback(() => {
const value = props.type == 'phone'
? props.form.getFieldValue('newPhone')
: props.form.getFieldValue('email')
const SERVICE_CHECK = {
'email': PublicApi.postMemberSecurityEmailEmailTonew,
// 'phone': PublicApi.postmembersecur
}
}, [])
return (
<div>
{
renderEmail()
selectedComponent()
}
</div>
)
......
src/pages/accountSetting/components/EditDataComponent/utils.tsx 0 → 100644
View file @ 6ede6c86
const phoneRegExp = {
'86': /^1[345789]\d{9}$/,
}
export default phoneRegExp;
\ No newline at end of file
src/pages/accountSetting/components/GetCaptchaCode/index.tsx 0 → 100644
View file @ 6ede6c86
import React, { useState, useEffect, useRef, useCallback } from 'react';
import { Button } from 'antd';
const GetCaptchaCode = (props) => {
const { disable = false } = props;
const [time, setTime] = useState(0);
const ref = useRef(null)
useEffect(() => {
return () => {
clearInterval(ref.current)
}
}, [])
// 这里不使用, 这里相当于每次修改time，重新设置一个setTimeout
// useEffect(() => {
// setTimeout((prev) => prev - 1, 1000);
// }, [time])
useEffect(() => {
if(time === 59) {
ref.current = setInterval(() => {
setTime((prev) => prev - 1)
}, 1000)
} else if(time == 0) {
clearInterval(ref.current)
}
}, [time])
const handleClick = useCallback(() => {
const hasFn = !!props.getCode;
if(hasFn) {
props.getCode()
setTime(59)
}
}, [])
return (
<Button disabled={disable || !!time} onClick={handleClick} style={{width: '100%'}}>
{
time
? `${time} s`
: '获取验证码'
}
</Button>
)
}
export default GetCaptchaCode
\ No newline at end of file
src/pages/accountSetting/components/SafeVerification/index.tsx
View file @ 6ede6c86
......@@ -5,7 +5,7 @@ import SliderVerify from '../SliderVerify';
const imageUrl = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1689053532,4230915864&fm=26&gp=0.jpg'
const SafeVerification = () => {
const SafeVerification = (props) => {
const [visible, setVisible] = useState(false)
const handleVisible = () => {
setVisible(true)
......@@ -16,6 +16,7 @@ const SafeVerification = () => {
// console.log(visible)
const handleSuccess = () => {
setVisible(false);
!!props.handleVerifySuccess && props.handleVerifySuccess()
}
return (
<div className={styles.box}>
......
src/pages/accountSetting/components/TypeForHeader/index.tsx
View file @ 6ede6c86
import React from 'react';
import styles from './index.less'
interface Iprops {
phone?: string
}
const TypeForHeader = (props) => {
const {type = 'phone'} = props;
const {type = 'phone', phone, email} = props;
const phoneRender = () => {
return (
<>
<div className={styles.title}>当前绑定手机号码</div>
<div className={styles.value}>+86 185 2929 6758</div>
<div className={styles.value}>{phone}</div>
</>
)
}
......@@ -17,7 +21,7 @@ const TypeForHeader = (props) => {
return (
<>
<div className={styles.title}>当前已认证邮箱</div>
<div className={styles.value}>735051883@qq.com</div>
<div className={styles.value}>{email}</div>
</>
)
}
......
src/pages/accountSetting/components/TypeVerify/index.less
View file @ 6ede6c86
......@@ -6,6 +6,7 @@
background-color: #fff;
padding: 36px 24px;
width: 610px;
height: 156px;
.infos {
display: flex;
......
src/pages/accountSetting/components/TypeVerify/index.tsx
View file @ 6ede6c86
......@@ -3,7 +3,6 @@ import styles from './index.less';
import account_tips from '@/assets/imgs/account_tips.png';
import { Link } from 'umi';
const TITLE_NAP = {
'loginPwd': {
title: '登录密码',
......@@ -22,8 +21,16 @@ const TITLE_NAP = {
desc: "您的支付密码已开启，建议您定期更换新的支付密码，提高安全性"
}
}
const TypeVerify = (props) => {
const { type, email, phone } = props;
interface IProps {
email: string,
phone: string,
paycode: number, // 0 | 1
type: string
}
const TypeVerify: React.FC<IProps> = (props) => {
const { type, email, phone, paycode } = props;
const titleRender = () => {
return TITLE_NAP[type].title
}
......@@ -40,7 +47,7 @@ const TypeVerify = (props) => {
const renderLink = () => {
if(type == 'email' && email == '') {
return <a>设置邮箱</a>
} else if(type == 'paycode') {
} else if(type == 'paycode' && paycode == 0) {
return <a>设置支付密码</a>
}
return <Link to={`/memberCenter/systemSetting/editAccount?type=${type}`}>修改</Link>
......
src/pages/accountSetting/components/VerifyPanel/Panel/EmailVerifyPanel.tsx
View file @ 6ede6c86
import React from 'react';
import React, { useState, useCallback } from 'react';
// import { SchemaForm } from '@formily/antd';
import { Form, Input, Button, Row, Col } from 'antd';
import SafeVerification from '../../SafeVerification';
import TypeForHeader from '../../TypeForHeader';
import EditDataComponent from '../../EditDataComponent';
import { PublicApi } from '@/services/api';
import GetCaptchaCode from '../../GetCaptchaCode';
const layout = {
labelCol: { span: 3 },
wrapperCol: { span: 13 },
labelAlign: "left"
};
const tailLayout = {
wrapperCol: { offset: 3, span: 13 },
};
const EmailVerifyPanel = () => {
const EmailVerifyPanel = (props) => {
const [ visible, setVisible ] = useState(false);
const { email, pageType } = props;
const [form] = Form.useForm();
const handleFinish = (values) => {
const { pageType } = props;
///member/security/email/
const UPDATE_SERVICE = {
'loginPwd': PublicApi.postMemberSecurityPswUpdate,
'email': PublicApi.postMemberSecurityEmailUpdate,
'phone': PublicApi.postMemberSecurityPhoneUpdate,
}
const service = UPDATE_SERVICE[pageType];
let params = {};
if(pageType == 'loginPwd') {
params['password'] = values.password
} else if(pageType == 'email') {
params = {
...params,
smsCode: values.emailCaptcha,
email: values.email
}
} else {
params = {
...params,
smsCode: values.emailCaptcha,
countryCode: values.country,
phone: values.newPhone
}
}
console.log(params);
return ;
service(params).then((data) => {
console.log("success")
})
}
// 发送旧的邮箱验证码
const getCode = useCallback(() => {
let SERVICE_MAP = {
'loginPwd': PublicApi.postMemberSecurityPswEmail,
'email': PublicApi.postMemberSecurityEmailEmail,
'phone': PublicApi.postMemberSecurityPhoneEmail
}
const service = SERVICE_MAP[props.pageType];
service();
}, [])
// 验证旧的邮箱验证码
const handleVerifySuccess = () => {
setVisible(true);
return ;
const captcha = form.getFieldValue('captcha');
let SERVICE_CHECK = {
'loginPwd': PublicApi.postMemberSecurityPswEmailCheck,
'email': PublicApi.postMemberSecurityEmailEmailCheck,
'phone': PublicApi.postMemberSecurityPhoneEmailCheck
}
const service = SERVICE_CHECK[props.pageType];
service({smsCode: captcha}).then((data) => {
console.log(data);
if(data.code == 1000) {
setVisible(true);
}
})
}
return (
<div>
<TypeForHeader type="email" />
<TypeForHeader type="email" email={email} />
<Form
{...layout}
labelAlign="left"
name="basic"
onFinish={handleFinish}
form={form}
>
<Form.Item label="验证码">
<Row gutter={10}>
<Col span={14}>
<Form.Item
name="captcha"
noStyle
rules={[{ required: true, message: 'Please input the captcha you got!' }]}
>
<Input />
</Form.Item>
</Col>
<Col span={6}>
<Button>获取验证码</Button>
</Col>
</Row>
</Form.Item>
<SafeVerification />
<EditDataComponent type="password" />
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
提交
</Button>
</Form.Item>
{
!visible
? <>
<Form.Item label="验证码">
<Row gutter={10}>
<Col span={14}>
<Form.Item
name="captcha"
noStyle
rules={[{ required: true, message: '请输入验证码' }]}
>
<Input />
</Form.Item>
</Col>
<Col span={6}>
<div style={{width: '102px'}}>
<GetCaptchaCode getCode={getCode} />
</div>
</Col>
</Row>
</Form.Item>
<div style={{marginBottom: '130px'}}>
<SafeVerification handleVerifySuccess={handleVerifySuccess} />
</div>
</>
: null
}
{
visible
? <>
<EditDataComponent type={pageType} form={form}/>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
提交
</Button>
</Form.Item>
</>
: null
}
</Form>
</div>
)
......
src/pages/accountSetting/components/VerifyPanel/Panel/PaycodeVerifyPanel.tsx
View file @ 6ede6c86
import React from 'react';
import React, {useState} from 'react';
// import { SchemaForm } from '@formily/antd';
import { Form, Input, Button, Row, Col } from 'antd';
import SafeVerification from '../../SafeVerification';
import TypeForHeader from '../../TypeForHeader';
import EditDataComponent from '../../EditDataComponent';
import { PublicApi } from '@/services/api';
const layout = {
labelCol: { span: 3 },
wrapperCol: { span: 13 },
labelAlign: "left"
};
const tailLayout = {
wrapperCol: { offset: 3, span: 13 },
};
const PaycodeVerifyPanel = () => {
interface IProps {
// 当前页面是属于 修改密码还是修改邮箱，还是修改手机
pageType: string,
}
const PaycodeVerifyPanel: React.FC<IProps> = (props) => {
const { pageType } = props;
const [ visible, setVisible ] = useState(false);
const [form] = Form.useForm();
const handleVerifySuccess = () => {
setVisible(true);
console.log(123);
}
const onFinish = (values) => {
const { pageType } = props;
if(pageType == 'loginPwd') {
console.log(values);
PublicApi.postMemberSecurityPswUpdatePay({
payPassword: values.captcha,
password: values.password
})
}
console.log(values);
}
return (
<div>
<TypeForHeader type="payCode" />
{/* <TypeForHeader type="payCode" /> */}
<Form
{...layout}
labelAlign="left"
name="basic"
form={form}
onFinish={onFinish}
>
<Form.Item label="验证码">
<Form.Item label="支付密码">
<Row gutter={10}>
<Col span={14}>
<Col span={18}>
<Form.Item
name="captcha"
name="paycode"
noStyle
rules={[{ required: true, message: 'Please input the captcha you got!' }]}
rules={[{ required: true, message: '请填写支付密码' }]}
>
<Input />
</Form.Item>
</Col>
<Col span={6}>
<Button>获取验证码</Button>
</Col>
</Row>
</Form.Item>
<SafeVerification />
<EditDataComponent type="password" />
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
提交
</Button>
</Form.Item>
{
!visible
? <div style={{marginBottom: '130px'}}>
<SafeVerification handleVerifySuccess={handleVerifySuccess} />
</div>
: null
}
{
visible
? <>
<EditDataComponent type={pageType} form={form} />
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
提交
</Button>
</Form.Item>
</>
: null
}
</Form>
</div>
)
......
src/pages/accountSetting/components/VerifyPanel/Panel/PhoneVerifyPanel.tsx
View file @ 6ede6c86
import React from 'react';
import React, { useCallback, useState } from 'react';
// import { SchemaForm } from '@formily/antd';
import { Form, Input, Button, Row, Col } from 'antd';
import SafeVerification from '../../SafeVerification';
import TypeForHeader from '../../TypeForHeader';
import EditDataComponent from '../../EditDataComponent';
import GetCaptchaCode from '../../GetCaptchaCode';
import { PublicApi } from '@/services/api';
const layout = {
labelCol: { span: 3 },
wrapperCol: { span: 13 },
labelAlign: "left"
};
const tailLayout = {
wrapperCol: { offset: 3, span: 13 },
};
const PhoneVerifyPanel = () => {
interface IProps {
phone: string,
// 当前页面是属于 修改密码还是修改邮箱，还是修改手机
pageType: string,
}
const PhoneVerifyPanel: React.FC<IProps> = (props) => {
const [ visible, setVisible ] = useState(false);
const [form] = Form.useForm();
const { phone, pageType } = props;
const onFinish = (values) => {
const { pageType } = props;
///member/security/email/
const UPDATE_SERVICE = {
'loginPwd': PublicApi.postMemberSecurityPswUpdate,
'email': PublicApi.postMemberSecurityEmailUpdate,
'phone': PublicApi.postMemberSecurityPhoneUpdate,
}
const service = UPDATE_SERVICE[pageType];
let params = {};
if(pageType == 'loginPwd') {
params['password'] = values.password
} else if(pageType == 'email') {
params = {
...params,
smsCode: values.emailCaptcha,
email: values.email
}
} else {
params = {
...params,
smsCode: values.emailCaptcha,
countryCode: values.country,
phone: values.newPhone
}
}
service(params).then((data) => {
console.log("success")
})
console.log(params);
}
// 获取旧手机验证码
const getCode = useCallback(() => {
let SERVICE_MAP = {
'loginPwd': PublicApi.postMemberSecurityPswSms,
'email': PublicApi.postMemberSecurityEmailSms,
'phone': PublicApi.postMemberSecurityPhoneSms
}
const service = SERVICE_MAP[props.pageType];
service();
}, [])
const handleVerifySuccess = () => {
// setVisible(true);
// return ;
const captcha = form.getFieldValue('captcha');
// 验证旧手机短信/member/security/email/sms/
let SERVICE_CHECK = {
'loginPwd': PublicApi.postMemberSecurityPswSmsCheck,
'email': PublicApi.postMemberSecurityPswEmailCheck,
'phone': PublicApi.postMemberSecurityPhoneSmsCheck
}
const service = SERVICE_CHECK[props.pageType];
service({smsCode: captcha}).then((data) => {
console.log(data);
if(data.code == 1000) {
setVisible(true);
}
})
}
return (
<div>
<TypeForHeader type="phone"/>
<TypeForHeader type="phone" phone={phone}/>
<Form
{...layout}
labelAlign="left"
name="basic"
onFinish={onFinish}
form={form}
>
<Form.Item label="验证码">
<Row gutter={10}>
<Col span={14}>
<Form.Item
name="captcha"
noStyle
rules={[{ required: true, message: 'Please input the captcha you got!' }]}
>
<Input />
</Form.Item>
</Col>
<Col span={6}>
<Button>获取验证码</Button>
</Col>
</Row>
</Form.Item>
<SafeVerification />
<EditDataComponent type="password" />
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
提交
</Button>
</Form.Item>
{
!visible
? <Form.Item label="验证码">
<Row gutter={10}>
<Col span={14}>
<Form.Item
name="captcha"
noStyle
rules={[{ required: true, message: '请填写验证码' }]}
>
<Input />
</Form.Item>
</Col>
<Col span={6}>
<div style={{width: '102px'}}>
<GetCaptchaCode getCode={getCode} />
</div>
</Col>
</Row>
</Form.Item>
: null
}
{
!visible
? <div style={{marginBottom: '130px'}}>
<SafeVerification handleVerifySuccess={handleVerifySuccess} />
</div>
: null
}
{
visible
? <>
<EditDataComponent type={pageType} form={form} />
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
提交
</Button>
</Form.Item>
</>
: null
}
</Form>
</div>
)
......
src/pages/accountSetting/components/VerifyPanel/Panel/ResetPayCode.tsx 0 → 100644
View file @ 6ede6c86
import React, { useState, useCallback } from 'react';
import { Form, Input, Button, Row, Col } from 'antd';
import { PublicApi } from '@/services/api';
import GetCaptchaCode from '../../GetCaptchaCode';
import SafeVerification from '../../SafeVerification';
import TypeForHeader from '../../TypeForHeader';
import EditDataComponent from '../../EditDataComponent';
const layout = {
labelCol: { span: 3 },
wrapperCol: { span: 13 },
};
const tailLayout = {
wrapperCol: { offset: 3, span: 13 },
};
interface IProps {
phone: string,
// 当前页面是属于 修改密码还是修改邮箱，还是修改手机
pageType: string,
}
const ResetPayCode: React.FC<IProps> = (props) => {
const [ visible, setVisible ] = useState(false);
const [form] = Form.useForm();
const { phone, pageType } = props;
const onFinish = (values) => {
console.log(values);
}
// 旧手机验证码
const getCode = useCallback(() => {
}, [])
const handleVerifySuccess = () => {
setVisible(true);
// 验证旧手机短信
}
// 密码验证
const comfirmPwdValidator = async (rule, value) => {
if(value != form.getFieldValue('password')) {
throw new Error("两次密码不一样")
}
}
const renderPwd = () => {
return (
<>
<Form.Item
label="登录密码"
>
<Row gutter={10}>
<Col span={18}>
<Form.Item
name="password"
rules={[{ required: true, message: "请填写支付面膜"}]}
>
<Input.Password />
</Form.Item>
</Col>
</Row>
</Form.Item>
<Form.Item
label="确认密码"
>
<Row gutter={10}>
<Col span={18}>
<Form.Item
name="comfirmPwd"
noStyle
rules={
[
{ validator: comfirmPwdValidator}
]
}
>
<Input.Password />
</Form.Item>
</Col>
</Row>
</Form.Item>
</>
)
}
return (
<div>
<TypeForHeader type="phone" phone={phone}/>
<Form
{...layout}
labelAlign="left"
name="basic"
onFinish={onFinish}
form={form}
>
{
!visible
? <Form.Item label="验证码">
<Row gutter={10}>
<Col span={14}>
<Form.Item
name="captcha"
noStyle
rules={[{ required: true, message: '请填写验证码' }]}
>
<Input />
</Form.Item>
</Col>
<Col span={6}>
<div style={{width: '102px'}}>
<GetCaptchaCode getCode={getCode} />
</div>
</Col>
</Row>
</Form.Item>
: null
}
{
!visible
? <div style={{marginBottom: '130px'}}>
<SafeVerification handleVerifySuccess={handleVerifySuccess} />
</div>
: null
}
{
visible
? <>
{
renderPwd()
}
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
提交
</Button>
</Form.Item>
</>
: null
}
</Form>
</div>
)
}
export default ResetPayCode
\ No newline at end of file
src/pages/accountSetting/components/VerifyPanel/Panel/index.tsx
View file @ 6ede6c86
import React from 'react';
import React, { useContext } from 'react';
import { Tabs } from 'antd';
import PhoneVerifyPanel from './PhoneVerifyPanel';
import PaycodeVerifyPanel from './PaycodeVerifyPanel';
import EmailVerifyPanel from './EmailVerifyPanel';
import EditAccountContext from '../../../context/EditAccountContext';
const { TabPane } = Tabs;
const VerifyPanel = () => {
interface Iprops {}
const VerifyPanel: React.FC<Iprops> = (props) => {
const { phone, email, hasPaycode, pageType } = useContext(EditAccountContext);
return (
<Tabs defaultActiveKey="1" >
<TabPane tab="手机校验码验证" key="1">
<PhoneVerifyPanel />
<TabPane tab="手机校验码验证" disabled={phone == ''} key="1">
<PhoneVerifyPanel phone={phone} pageType={pageType} />
</TabPane>
<TabPane tab="邮箱验证" key="2">
<EmailVerifyPanel />
<TabPane tab="邮箱验证" disabled={email == ''} key="2">
<EmailVerifyPanel email={email} pageType={pageType} />
</TabPane>
<TabPane tab="支付密码验证" key="3">
<PaycodeVerifyPanel />
<TabPane tab="支付密码验证" disabled={false} key="3">
<PaycodeVerifyPanel pageType={pageType} />
</TabPane>
</Tabs>
</Tabs>
)
}
......
src/pages/accountSetting/context/EditAccountContext.tsx 0 → 100644
View file @ 6ede6c86
import React from 'react';
interface Iprops {
phone?: string | null,
email?: string | null,
hasPaycode?: boolean,
pageType: string
}
const Context = React.createContext<Iprops>({});
export default Context;
\ No newline at end of file
src/pages/accountSetting/editAccount.tsx
View file @ 6ede6c86
import React from 'react';
import React, { useEffect, useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card } from 'antd';
import ReutrnEle from '@/components/ReturnEle';
import { history } from 'umi';
import VerifyPanel from './components/VerifyPanel';
import { PublicApi } from '@/services/api';
import EditAccountContext from './context/EditAccountContext';
const MAP = {
'loginPwd': '修改登录密码',
......@@ -13,10 +14,29 @@ const MAP = {
'paycode': '重置支付密码'
}
const getData = async () => {
const res = await PublicApi.getMemberSecurityGet();
return res.data
}
interface accountProps {
userId?: number | string | null
phone?: string,
email?: string,
hasPayPassword: number, // 0 | 1
}
const EditAccount = (props) => {
const { type = 'loginPwd' } = props.location.query
// const { type } = props;
console.log(props);
const [account, setAccount] = useState<accountProps>({})
useEffect(() => {
async function init() {
const res = await getData();
setAccount(res);
}
init()
}, [])
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
......@@ -24,7 +44,16 @@ const EditAccount = (props) => {
title={MAP[type]}
>
<Card>
<VerifyPanel />
<EditAccountContext.Provider
value={{
phone: account.phone,
email: "735051883@qq.com",
hasPaycode: !!account.hasPayPassword,
pageType: type
}}
>
<VerifyPanel />
</EditAccountContext.Provider>
</Card>
</PageHeaderWrapper>
)
......
src/pages/accountSetting/index.tsx
View file @ 6ede6c86
......@@ -28,7 +28,12 @@ const AccountSetting = () => {
TYPES.map((item) => {
return (
<div className={styles.item} key={item}>
<TypeVerify type={item} phone={account.phone} email={account.email} />
<TypeVerify
type={item}
phone={account.phone}
email={account.email}
paycode={account.hasPayPassword}
/>
</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