From 9d16e5f5fc1aeec34128f1aed9652f9ade0ed979 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=82=96=E8=AF=97=E9=9B=85?= Date: Fri, 9 Aug 2019 16:30:23 +0800 Subject: [PATCH] =?UTF-8?q?!383=20=E6=B3=A8=E5=86=8C=E9=A1=B5=E9=9D=A2UI?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Common/HostUrl.ts | 1 + src/Common/Utils.ts | 55 ++++ src/Common/ZIndex.ts | 2 +- .../Components/MainContent/MainContent.less | 84 +++++- src/UI/Components/MainContent/Regist.tsx | 259 ++++++++++-------- src/UI/Components/Modal/ModalStyle/Modal.less | 2 +- 6 files changed, 275 insertions(+), 128 deletions(-) diff --git a/src/Common/HostUrl.ts b/src/Common/HostUrl.ts index 67adf9f76..0a6913734 100644 --- a/src/Common/HostUrl.ts +++ b/src/Common/HostUrl.ts @@ -18,6 +18,7 @@ export const SignUrl = { regist: CURRENT_HOST + "/CAD-reg", SMSCode: CURRENT_HOST + "/CAD-checkCode", LoginStatus: CURRENT_HOST + "/CAD-loginStatus", + checkRegUser: CURRENT_HOST + "/CAD-checkRegUser", } export const ImgsUrl = { get: CURRENT_HOST + "/CAD-imageList", diff --git a/src/Common/Utils.ts b/src/Common/Utils.ts index 84557e611..711b113b7 100644 --- a/src/Common/Utils.ts +++ b/src/Common/Utils.ts @@ -256,3 +256,58 @@ export function getFileSize(size: number) size /= 1024; } } + +//CookieUtils +/** + * 添加 cookie + * @param name 名称 + * @param value 值 + * @param expiresHours 过期时间 + */ +export function addCookie(name, value, expiresHours) +{ + let cookieString = `${name}=${escape(value)}`; + // 判断是否设置过期时间,0代表关闭浏览器时失效 + if (expiresHours > 0) + { + const date = new Date(); + date.setTime(date.getTime() + expiresHours * 1000); + cookieString = `${cookieString};expires=${date.toUTCString()}`; + } + document.cookie = cookieString; +} + +/** + * 修改 cookie + * @param name 名称 + * @param value 值 + * @param expiresHours 过期时间 + */ +export function editCookie(name, value, expiresHours) +{ + let cookieString = `${name}=${escape(value)}`; + if (expiresHours > 0) + { + const date = new Date(); + date.setTime(date.getTime() + expiresHours * 1000); // 单位是毫秒 + // @ts-ignore + cookieString = `${cookieString};expires=${date.toGMTString()}`; + } + document.cookie = cookieString; +} + +/** + * 根据名字获取cookie的值 + * @param name + */ +export function getCookieValue(name) +{ + const strCookie = document.cookie; + const arrCookie = strCookie.split('; '); + for (const cookie of arrCookie) + { + const arr = cookie.split('='); + if (arr[0] === name) + return unescape(arr[1]); + } +} diff --git a/src/Common/ZIndex.ts b/src/Common/ZIndex.ts index a897ecccf..cddf2dadb 100644 --- a/src/Common/ZIndex.ts +++ b/src/Common/ZIndex.ts @@ -7,7 +7,7 @@ export enum ZINDEX MainContent = "35", //主要内容的层级 ToolBar = "2", //工具栏 RightMenu = "31",//右键菜单 - Portal = "34", //model.less + Portal = "37", //Modal.less ToolsBlock_small = "32", CommandInput = "28", TransparentTerminal = "0", diff --git a/src/UI/Components/MainContent/MainContent.less b/src/UI/Components/MainContent/MainContent.less index b224fc40f..679e12b96 100644 --- a/src/UI/Components/MainContent/MainContent.less +++ b/src/UI/Components/MainContent/MainContent.less @@ -138,21 +138,77 @@ } .regist{ overflow: auto; - min-width: 660px; + min-width: 600px; + width: 620px; + height: 100%; + margin: 0 auto; + letter-spacing: 2.5px; .regist-content{ position: relative; - top: 30%; + background: #fff; + padding: 10px; + top: 38%; transform: translateY(-30%); + .regist-header{ + background: #48aff0; + display: flex; + height: 72px; + position: relative; + img{ + position: absolute; + top: 12%; + width: 55px; + height: auto; + vertical-align: middle; + margin-right: 10px; + margin-left: 65px; + } + .regist-slogan{ + text-align: center; + width: 100%; + span{ + color: #fff; + font-size: 26px; + line-height: 72px; + } + } + } + .regist-title{ + text-align: center; + height: 48px; + span{ + color: #48aff0; + font-size: x-large; + line-height: 48px; + } + } + .info-block{ + width: 70%; + margin: 10px auto; + padding: 5px 20px; + min-width: 480px; + >div{ + width: 60%; + min-width: 330px; + margin: 0 auto; + } + .item{ + padding-bottom: 10px; + } + } } .item{ display: flex; - >label{ - display: inline-block; - width: 90px; - text-align: right; - &>span:first-child{ - color: red; - } + .bp3-input-group:not(.check-code){ + width: 330px; + } + .bp3-button{ + width: 150px; + } + } + .regist-footer{ + .bp3-button{ + width: 330px; } } .center{ @@ -161,7 +217,15 @@ } a{ text-decoration: none; - color: #106ba3; + color: #48aff0; + } + .bp3-button{ + background: #48aff0; + color: #fff; + } + .bp3-disabled{ + background: #D1D1D1; + color: #9BA4AC; } } .content{ diff --git a/src/UI/Components/MainContent/Regist.tsx b/src/UI/Components/MainContent/Regist.tsx index 35dd7a06d..3fc38fa9a 100644 --- a/src/UI/Components/MainContent/Regist.tsx +++ b/src/UI/Components/MainContent/Regist.tsx @@ -1,14 +1,15 @@ import * as React from 'react'; import { KeyBoard } from '../../../Common/KeyEnum'; -import { InputGroup, Label, Classes, Button, Checkbox, Dialog, Intent, Tooltip, Position } from '@blueprintjs/core'; +import { InputGroup, Classes, Button, Checkbox, Dialog, Intent, Tooltip, Position } from '@blueprintjs/core'; import { TopPanelStore } from '../../Store/TopPanelStore'; import { inject, observer } from 'mobx-react'; import { IObservableValue, observable } from 'mobx'; import { PostJson, RequestStatus } from '../../../Common/Request'; import { SignUrl, ResourcesCDN_HOST } from '../../../Common/HostUrl'; import { AppToaster } from '../Toaster'; +import { addCookie, editCookie, getCookieValue } from '../../../Common/Utils'; -interface IRegistState +interface IRegistInput { user_phone: string; pass_word: string; @@ -34,18 +35,23 @@ enum InputType @inject("store") @observer -export default class Regist extends React.Component<{ store?: TopPanelStore }, IRegistState> { +export default class Regist extends React.Component<{ store?: TopPanelStore }> { @observable private errMsg: string = ""; @observable private flag: InputType = InputType.OK; @observable private inputIntent: InputIntent; @observable private SMSBtnText: string = "获取短信验证码"; + //防止提示 + @observable private pwdInputType1 = false; + @observable private pwdInputType2 = false; + //输入内容 + @observable private registInput: IRegistInput; private openAgreement = observable.box(false); private phoneRegex = new RegExp(`\^1\\d{10}$`); private pswRegex = new RegExp(`\^[^\\u4e00-\\u9fa5]+$`); constructor(props) { super(props); - this.state = { + this.registInput = { user_phone: "", pass_word: "", check_code: "", @@ -58,6 +64,15 @@ export default class Regist extends React.Component<{ store?: TopPanelStore }, I PHONE: Intent.NONE, }; } + componentWillMount() + { + const countdown = getCookieValue('secondsremained') ? getCookieValue('secondsremained') : 0; // 获取cookie值 + if (countdown !== undefined && countdown > 0) + { + this.SMSBtnText = `${countdown}s后重新获取`; + this.settime(); // 开始倒计时 + } + } handleRegist = async () => { if (this.inputIntent.PSW !== Intent.SUCCESS) @@ -87,7 +102,7 @@ export default class Regist extends React.Component<{ store?: TopPanelStore }, I }); return; } - if (this.state.check_code === "") + if (this.registInput.check_code === "") { AppToaster.show({ message: "验证码不能为空", @@ -96,7 +111,7 @@ export default class Regist extends React.Component<{ store?: TopPanelStore }, I }); return; } - if (!this.state.agreement_checked) + if (!this.registInput.agreement_checked) { AppToaster.show({ message: "需同意注册协议方可注册", @@ -105,7 +120,7 @@ export default class Regist extends React.Component<{ store?: TopPanelStore }, I }); return; } - let data = await PostJson(SignUrl.regist, this.state); + let data = await PostJson(SignUrl.regist, this.registInput); if (data.err_code === RequestStatus.Ok) { //注册成功 跳转到登陆 @@ -117,24 +132,18 @@ export default class Regist extends React.Component<{ store?: TopPanelStore }, I this.props.store.openRegist = false; } } + handleCheckPhoneNum = async (text: string) => + { + let data = await PostJson(SignUrl.checkRegUser, { + user_phone: text, + }); + return data.err_code === RequestStatus.Ok + } handleSMS = async () => { - let num = 120; - this.SMSBtnText = `${num}s后重新获取`; - //120秒倒数 - let tim = setInterval(() => - { - num--; - this.SMSBtnText = `${num}s后重新获取`; - if (num === 1) - { - clearInterval(tim); - this.SMSBtnText = "获取短信验证码"; - } - return ""; - }, 1000); + this.SMSBtnText = `正在请求...`; let data = await PostJson(SignUrl.SMSCode, { - user_phone: this.state.user_phone + user_phone: this.registInput.user_phone }); if (data.err_code === RequestStatus.Ok) { @@ -143,13 +152,42 @@ export default class Regist extends React.Component<{ store?: TopPanelStore }, I message: "短信已发送，请注意查收", timeout: 1000, }); + addCookie('secondsremained', 120, 120); + const countdown = getCookieValue('secondsremained') ? getCookieValue('secondsremained') : 0; // 获取cookie值 + if (countdown !== undefined && countdown > 0) + { + this.settime(); // 开始倒计时 + } } + else + this.SMSBtnText = `获取短信验证码`; + } + private settime = () => + { + let countdown = 120; + // @ts-ignore + countdown = getCookieValue('secondsremained'); + const timer = setInterval(() => + { + if (countdown <= 0) + { + clearInterval(timer); + this.SMSBtnText = '获取短信验证码'; + } else + { + this.SMSBtnText = `${countdown}s后重新获取`; + countdown--; + } + editCookie('secondsremained', countdown, countdown + 1); + }, 1000); } - valueTest = (type: InputType, text: string) => + valueTest = async (type: InputType) => { + let text = ""; switch (type) { case InputType.PSW: + text = this.registInput.pass_word; if (text.length >= 6 && text.length <= 20) { if (this.pswRegex.test(text)) @@ -171,13 +209,14 @@ export default class Regist extends React.Component<{ store?: TopPanelStore }, I this.flag = InputType.PSW; this.inputIntent.PSW = Intent.DANGER; } - if (this.state.pswConfirm === text) + if (this.registInput.pswConfirm === text) this.inputIntent.ComfirmPSW = Intent.SUCCESS; else this.inputIntent.ComfirmPSW = Intent.DANGER; break; case InputType.ComfirmPSW: - if (text === this.state.pass_word) + text = this.registInput.pswConfirm; + if (text === this.registInput.pass_word) { this.flag = InputType.OK; this.errMsg = ""; @@ -191,11 +230,22 @@ export default class Regist extends React.Component<{ store?: TopPanelStore }, I } break; case InputType.PHONE: + text = this.registInput.user_phone; if (this.phoneRegex.test(text)) { - this.flag = InputType.OK; - this.errMsg = ""; - this.inputIntent.PHONE = Intent.SUCCESS; + let checkPhonePass = await this.handleCheckPhoneNum(text); + if (checkPhonePass) + { + this.flag = InputType.OK; + this.errMsg = ""; + this.inputIntent.PHONE = Intent.SUCCESS; + } + else + { + this.errMsg = "该手机号已被注册"; + this.flag = InputType.PHONE; + this.inputIntent.PHONE = Intent.DANGER; + } } else { @@ -208,23 +258,9 @@ export default class Regist extends React.Component<{ store?: TopPanelStore }, I } render() { - const infoBlockStyle: React.CSSProperties = { - background: "#fff", - border: "1px solid lightgrey", - width: "70%", - margin: "10px auto", - padding: "20px", - minWidth: "480px", - }; return (
{ if (e.keyCode === KeyBoard.Enter) @@ -233,127 +269,117 @@ export default class Regist extends React.Component<{ store?: TopPanelStore }, I e.stopPropagation(); } }}> -
-
+
+
-

- 晨丰家具设计软件 - 用户注册 -

+
+ 智能设计从晨丰开始! +
+
+
+ 新用户注册
+ +
+
-
-
- + isOpen={this.flag === InputType.PHONE} + > { - this.setState({ pass_word: e.target.value }); - this.valueTest(InputType.PSW, e.target.value) + this.registInput.user_phone = e.target.value; + this.valueTest(InputType.PHONE) }} onBlur={() => (this.flag = InputType.OK)} />
- + + { + this.registInput.check_code = e.target.value; + }} + /> +
+
+ isOpen={this.flag === InputType.PSW}> this.pwdInputType1 = true} + value={this.registInput.pass_word} + intent={this.inputIntent.PSW} + autoComplete={"new-password"} + placeholder={"密码: 6-20个大小英文字母、符号或数字"} onChange={e => { - this.setState({ pswConfirm: e.target.value }); - this.valueTest(InputType.ComfirmPSW, e.target.value); + this.registInput.pass_word = e.target.value; + this.valueTest(InputType.PSW) }} - onBlur={() => (this.flag = InputType.OK)} + onBlur={() => this.flag = InputType.OK} />
- + isOpen={this.flag === InputType.ComfirmPSW}> this.pwdInputType2 = true} + value={this.registInput.pswConfirm} + intent={this.inputIntent.ComfirmPSW} + autoComplete={"new-password"} + placeholder={"确认密码: 请再次输入您的密码"} onChange={e => { - this.setState({ user_phone: e.target.value }); - this.valueTest(InputType.PHONE, e.target.value) + this.registInput.pswConfirm = e.target.value; + this.valueTest(InputType.ComfirmPSW); }} onBlur={() => (this.flag = InputType.OK)} /> -
-
- - - { - this.setState({ check_code: e.target.value }); - }} - />
+
-
+
{ - this.setState({ agreement_checked: !this.state.agreement_checked }); + this.registInput.agreement_checked = !this.registInput.agreement_checked; }} /> @@ -369,19 +395,20 @@ export default class Regist extends React.Component<{ store?: TopPanelStore }, I
- @@ -411,7 +438,7 @@ class UserAgreement extends React.Component { >

尊敬的用户，欢迎您注册成为本网站用户。在注册前请您仔细阅读如下服务条款：

diff --git a/src/UI/Components/Modal/ModalStyle/Modal.less b/src/UI/Components/Modal/ModalStyle/Modal.less index 1190ef8bd..52586ec66 100644 --- a/src/UI/Components/Modal/ModalStyle/Modal.less +++ b/src/UI/Components/Modal/ModalStyle/Modal.less @@ -10,7 +10,7 @@ @infoSelectWidth:9rem; .bp3-portal{ - z-index: 34; + z-index: 37; } #modal{