Home Explore Help
Register Sign In
front
/
site-front
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Merge branch 'feature-1.2' of front/site-front into master

richard 3 years ago
parent
cb212aa8a0 49b07114cf
commit
2e7793560a
3 changed files with 81 additions and 23 deletions
Unified View Show Diff Stats
  1. 1 1
      dist/index.html
  2. 55 0
      src/compontens/button/sendcode.tsx
  3. 25 22
      src/pages/setup/index.tsx

+ 1 - 1
dist/index.html
View File 

@@ -1 +1 @@
 
-<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="author" content="RichardSpace369"/><meta name="description" content="工地前台项目"/><title></title><link href="/assest/css/vendors.ffb7b485.css" rel="stylesheet"><link href="/assest/css/main.3bcd62e0.css" rel="stylesheet"></head><body><div id="root"></div><script src="/assest/js/runtime~main.72a0c72d.js"></script><script src="/assest/js/vendors.10f0b134.js"></script><script src="/assest/js/main.e2641e9a.js"></script></body></html>
 
+<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="author" content="RichardSpace369"/><meta name="description" content="工地前台项目"/><title></title><link href="/assest/css/vendors.ffb7b485.css" rel="stylesheet"><link href="/assest/css/main.3bcd62e0.css" rel="stylesheet"></head><body><div id="root"></div><script src="/assest/js/runtime~main.fa4d818c.js"></script><script src="/assest/js/vendors.10f0b134.js"></script><script src="/assest/js/main.3809d94a.js"></script></body></html>

+ 55 - 0
src/compontens/button/sendcode.tsx
View File 

@@ -0,0 +1,55 @@
 
+import React, { useState, useRef, useEffect } from 'react';
 
+import { Button } from 'antd';
 
+import { ButtonProps } from 'antd/lib/button';
 
+type Iprops = {
 
+	handleSend: () => Promise<void>;
 
+};
 
+const button: React.FC<ButtonProps & Iprops> = ({ ...props }) => {
 
+	const [disabled, changeDisbaled] = useState(false);
 
+	const ref = useRef<HTMLButtonElement>(null);
 
+	const timeref = useRef<{
 
+		freeTime: number;
 
+		timeInstance: NodeJS.Timeout | null;
 
+	}>({
 
+		timeInstance: null,
 
+		freeTime: 60,
 
+	});
 
+	const handleClickSendButton = () => {
 
+		if (props.handleSend) {
 
+			props.handleSend().then(() => {
 
+				changeDisbaled(true);
 
+				timeref.current.timeInstance = setInterval(() => {
 
+					if (timeref.current.freeTime === 0) {
 
+						return resetFn();
 
+					}
 
+					if (ref.current) {
 
+						ref.current.innerText = `倒计时${timeref.current.freeTime--}s`;
 
+					}
 
+				}, 1000);
 
+			});
 
+		}
 
+	};
 
+	const resetFn = () => {
 
+		if (timeref.current.timeInstance) {
 
+			clearInterval(timeref.current.timeInstance);
 
+		}
 
+		if (ref.current) {
 
+			ref.current.innerText = '发送验证码';
 
+		}
 
+		changeDisbaled(false);
 
+		timeref.current.freeTime = 60;
 
+	};
 
+
 
+	return (
 
+		<Button
 
+			style={{ width: '100%' }}
 
+			{...props}
 
+			type='primary'
 
+			ref={ref}
 
+			onClick={handleClickSendButton}
 
+			disabled={disabled}>
 
+			发送验证码
 
+		</Button>
 
+	);
 
+};
 
+export default button;

+ 25 - 22
src/pages/setup/index.tsx
View File 

@@ -20,7 +20,7 @@ import {
 
 	useChangePassword,
 
 	useChangePassword,
 
 } from '../../hooks/user';
 
 } from '../../hooks/user';
 
 const { Panel } = Collapse;
 
 const { Panel } = Collapse;
 
-const { Search } = Input;
 
+import SendCode from '../../compontens/button/sendcode';
 
 
 
 const layout = {
 
 const layout = {
 
 	labelCol: { span: 3, xl: 4 },
 
 	labelCol: { span: 3, xl: 4 },
 
@@ -32,10 +32,7 @@ const setUp: React.FC = (props) => {
 
 		state: changeEmailState,
 
 		state: changeEmailState,
 
 		request: requestChangeEmail,
 
 		request: requestChangeEmail,
 
 	} = useChangeEmail();
 
 	} = useChangeEmail();
 
-	const {
 
-		state: changePassWordState,
 
-		request: requtesChangePassWord,
 
-	} = useChangePassword();
 
+	const { request: requtesChangePassWord } = useChangePassword();
 
 	const {
 
 	const {
 
 		state: sendCodeState,
 
 		state: sendCodeState,
 
 		request: requestPhoneCode,
 
 		request: requestPhoneCode,
 
@@ -77,15 +74,22 @@ const setUp: React.FC = (props) => {
 
 	/**
 
 	/**
 
 	 * @description 发送验证码
 
 	 * @description 发送验证码
 
 	 */
 
 	 */
 
-	const handleSendCode = (phone: string) => {
 
-		requestPhoneCode({ phone })
 
-			.then(() => {})
 
-			.catch((error) => {
 
-				notification.error({
 
-					message: '验证码发送错误',
 
-					description: error.message,
 
-				});
 
+	const handleSendCode = () => {
 
+		return new Promise<void>((resolve, reject) => {
 
+			phoneForm.validateFields(['phone']).then((data) => {
 
+				requestPhoneCode({ phone: data.phone })
 
+					.then(() => {
 
+						resolve();
 
+					})
 
+					.catch((error) => {
 
+						reject(error.message);
 
+						notification.error({
 
+							message: '验证码发送错误',
 
+							description: error.message,
 
+						});
 
+					});
 
 			});
 
 			});
 
+		});
 
 	};
 
 	};
 
 	/**
 
 	/**
 
 	 * @description 修改手机号码
 
 	 * @description 修改手机号码
 
@@ -196,15 +200,14 @@ const setUp: React.FC = (props) => {
 
 								},
 
 								},
 
 							]}
 
 							]}
 
 							children={
 
 							children={
 
-								<Search
 
-									loading={sendCodeState.loading}
 
-									placeholder='验证码'
 
-									enterButton='获取验证码'
 
-									onSearch={() => {
 
-										phoneForm.validateFields(['phone']).then((data) => {
 
-											handleSendCode(data.phone);
 
-										});
 
-									}}></Search>
 
+								<Row gutter={0} justify='space-between'>
 
+									<Col span={16}>
 
+										<Input placeholder='请输入验证码'></Input>
 
+									</Col>
 
+									<Col span={8}>
 
+										<SendCode handleSend={handleSendCode}></SendCode>
 
+									</Col>
 
+								</Row>
 
 							}></Form.Item>
 
 							}></Form.Item>
 
 						<Row align='middle'>
 
 						<Row align='middle'>
 
 							<Col offset={3}>
 
 							<Col offset={3}>