index.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580
  1. import React, { Component } from 'react';
  2. import './index.less';
  3. import { Modal, Icon, Button, Tooltip } from 'antd';
  4. import Assets from '@src/components/Assets';
  5. import { asyncSMessage } from '@src/services/AsyncTools';
  6. import { Icon as GIcon } from '../Icon';
  7. import { Button as GButton } from '../Button';
  8. import RadioItem from '../RadioItem';
  9. import { User } from '../../stores/user';
  10. import { Common } from '../../stores/common';
  11. import { Main } from '../../stores/main';
  12. import { MobileArea, WechatPcAppId, PcUrl } from '../../../Constant';
  13. const LOGIN_PHONE = 'LOGIN_PHONE';
  14. const LOGIN_WX = 'LOGIN_WX';
  15. const BIND_PHONE = 'BIND_PHONE';
  16. const BIND_WX = 'BIND_WX';
  17. const BIND_WX_ERROR = 'BIND_WX_ERROR';
  18. export default class Login extends Component {
  19. constructor(props) {
  20. super(props);
  21. this.validNumber = 0;
  22. this.state = { type: LOGIN_WX, error: {}, data: { area: MobileArea[0].value } };
  23. window.addEventListener(
  24. 'message',
  25. event => {
  26. if (typeof event.data === 'string' && event.data.indexOf('code:') === 0) {
  27. const code = event.data.split(':')[1];
  28. if (this.state.type === LOGIN_WX) {
  29. this.scanLogin(code);
  30. } else if (this.state.type === BIND_WX) {
  31. this.scanBind(code);
  32. }
  33. }
  34. },
  35. false,
  36. );
  37. }
  38. componentWillReceiveProps(nextProps) {
  39. if (nextProps.user.needLogin && !this.init) {
  40. this.init = true;
  41. Main.getContract('register').then(result => {
  42. this.setState({ registerContract: result });
  43. });
  44. Main.getContract('privacy').then(result => {
  45. this.setState({ privacyContract: result });
  46. });
  47. }
  48. }
  49. close() {
  50. User.closeLogin();
  51. }
  52. login() {
  53. const { data, needEmail, mobileError, validError, error } = this.state;
  54. const { area, mobile, mobileVerifyCode, email } = data;
  55. if (mobileError || validError) return;
  56. if (!area || !mobile || !mobileVerifyCode || (needEmail && !email)) {
  57. error[LOGIN_PHONE] = { mobile: !mobile, mobileVerifyCode: !mobileVerifyCode, email: !email };
  58. this.setState({ error });
  59. return;
  60. }
  61. error[LOGIN_PHONE] = {};
  62. this.setState({ error });
  63. User.login(area, mobile, mobileVerifyCode, email, null, false)
  64. .then(result => {
  65. if (result.bindWechat) {
  66. this.close();
  67. } else {
  68. this.setState({ type: BIND_WX });
  69. }
  70. })
  71. .catch(err => {
  72. if (err.message.indexOf('验证码') >= 0) {
  73. this.setState({ validError: err.message });
  74. } else {
  75. this.setState({ mobileError: err.message });
  76. }
  77. });
  78. }
  79. bind() {
  80. const { data, needEmail, mobileError, validError, error } = this.state;
  81. const { area, mobile, mobileVerifyCode, email } = data;
  82. if (mobileError || validError) return;
  83. if (!area || !mobile || !mobileVerifyCode || (needEmail && !email)) {
  84. error[BIND_PHONE] = { mobile: !mobile, mobileVerifyCode: !mobileVerifyCode, email: !email };
  85. this.setState({ error });
  86. return;
  87. }
  88. error[BIND_PHONE] = {};
  89. this.setState({ error });
  90. User.bind(area, mobile, mobileVerifyCode, email)
  91. .then(() => {
  92. this.close();
  93. })
  94. .catch(err => {
  95. if (err.message.indexOf('验证码') >= 0) {
  96. this.setState({ validError: err.message });
  97. } else {
  98. this.setState({ mobileError: err.message });
  99. }
  100. });
  101. }
  102. scanLogin(code) {
  103. User.loginWechat(code, false)
  104. .then(result => {
  105. if (result.bindMobile) {
  106. this.close();
  107. } else {
  108. this.setState({ type: BIND_PHONE });
  109. }
  110. })
  111. .catch(err => {
  112. this.setState({ type: BIND_WX_ERROR, wechatError: err.message });
  113. });
  114. }
  115. scanBind(code) {
  116. User.loginWechat(code, false)
  117. .then(() => {
  118. this.close();
  119. })
  120. .catch(err => {
  121. this.setState({ type: BIND_WX_ERROR, wechatError: err.message });
  122. });
  123. }
  124. changeData(field, value) {
  125. let { data } = this.state;
  126. data = data || {};
  127. data[field] = value;
  128. this.setState({ data });
  129. }
  130. validMobile(login) {
  131. const { data } = this.state;
  132. const { area, mobile } = data;
  133. if (!area || !mobile) return;
  134. this.validNumber += 1;
  135. const number = this.validNumber;
  136. User.validWechat(area, mobile)
  137. .then(result => {
  138. if (result) {
  139. this.setState({ mobileError: '' });
  140. return User.validMobile(area, mobile).then(r => {
  141. if (number !== this.validNumber) return;
  142. this.setState({ needEmail: r });
  143. });
  144. }
  145. this.setState({ needEmail: false });
  146. return login ? Promise.resolve() : Promise.reject(new Error('该手机已绑定其他账号,请更换手机号码'));
  147. })
  148. .catch(err => {
  149. this.setState({ mobileError: err.message });
  150. });
  151. }
  152. sendValid() {
  153. const { data, mobileError } = this.state;
  154. const { area, mobile } = data;
  155. if (!area || !mobile || mobileError) return Promise.reject();
  156. return Common.sendSms(area, mobile)
  157. .then(result => {
  158. if (result) {
  159. asyncSMessage('发送成功');
  160. this.setState({ mobileError: '', validError: '' });
  161. } else {
  162. throw new Error('发送失败');
  163. }
  164. })
  165. .catch(err => {
  166. this.setState({ mobileError: err.message });
  167. throw err;
  168. });
  169. }
  170. render() {
  171. const { type } = this.state;
  172. const { user } = this.props;
  173. return (
  174. <Modal
  175. ref={ref => {
  176. this.modalR = ref;
  177. }}
  178. wrapClassName={`login-modal ${type}`}
  179. visible={user.needLogin}
  180. footer={null}
  181. closable={false}
  182. width={470}
  183. >
  184. {this.renderBody(type)}
  185. <GIcon
  186. name="close"
  187. onClick={() => {
  188. User.closeLogin(new Error('no login'));
  189. }}
  190. />
  191. </Modal>
  192. );
  193. }
  194. renderBody(type) {
  195. switch (type) {
  196. case LOGIN_WX:
  197. return this.renderLoginWx();
  198. case BIND_PHONE:
  199. return this.renderBindPhone();
  200. case BIND_WX:
  201. return this.renderBindWx();
  202. case BIND_WX_ERROR:
  203. return this.renderBindWxError();
  204. case LOGIN_PHONE:
  205. default:
  206. return this.renderLoginPhone();
  207. }
  208. }
  209. renderLoginPhone() {
  210. const { needEmail, registerContract = {}, privacyContract, error = {} } = this.state;
  211. const emptyError = error[LOGIN_PHONE] || {};
  212. return (
  213. <div className="body">
  214. <div className="title">手机号登录</div>
  215. <div className="tip" hidden={!needEmail}>
  216. <Assets name="notice" />
  217. 该手机号尚未注册,将自动为您注册账户
  218. </div>
  219. <SelectInput
  220. placeholder="请输入手机号"
  221. selectValue={this.state.data.area}
  222. select={MobileArea}
  223. value={this.state.data.mobile}
  224. error={this.state.mobileError}
  225. empty={emptyError.mobile}
  226. onSelect={value => {
  227. this.changeData('area', value);
  228. this.validMobile(true);
  229. }}
  230. onChange={e => {
  231. this.changeData('mobile', e.target.value);
  232. this.validMobile(true);
  233. }}
  234. />
  235. <VerificationInput
  236. placeholder="请输入验证码"
  237. value={this.state.data.mobileVerifyCode}
  238. error={this.state.validError}
  239. empty={emptyError.mobileVerifyCode}
  240. onSend={() => {
  241. return this.sendValid();
  242. }}
  243. onChange={e => {
  244. this.changeData('mobileVerifyCode', e.target.value);
  245. }}
  246. />
  247. {needEmail && (
  248. <Input
  249. placeholder="请输入邮箱"
  250. value={this.state.data.email}
  251. empty={emptyError.email}
  252. onChange={e => {
  253. this.changeData('email', e.target.value);
  254. }}
  255. />
  256. )}
  257. {needEmail && (
  258. <div>
  259. <RadioItem checked theme="white" className="m-r-5" />
  260. 我已经阅读并同意{' '}
  261. <a href={`/contract/${registerContract.key}`} target="_blank">
  262. {registerContract.title}
  263. </a>{' '}
  264. 与{' '}
  265. <a href={`/contract/${privacyContract.key}`} target="_blank">
  266. {privacyContract.title}
  267. </a>
  268. .
  269. </div>
  270. )}
  271. <Button
  272. type="primary"
  273. size="large"
  274. block
  275. onClick={() => {
  276. this.login();
  277. }}
  278. >
  279. 登录
  280. </Button>
  281. <Tooltip overlayClassName="gray" placement="left" title="微信扫码登录">
  282. <a
  283. className="other"
  284. onClick={() => {
  285. this.setState({ type: LOGIN_WX });
  286. }}
  287. >
  288. <Assets name="code" />
  289. </a>
  290. </Tooltip>
  291. </div>
  292. );
  293. }
  294. renderLoginWx() {
  295. return (
  296. <div className="body">
  297. <div className="title">微信扫码登录</div>
  298. <div className="qr-code">
  299. <iframe
  300. frameBorder="0"
  301. src={`/login.html?appid=${WechatPcAppId}&redirectUri=${encodeURIComponent(PcUrl)}`}
  302. width="300"
  303. height="300"
  304. />
  305. <div className="text">请使用微信扫描二维码登录</div>
  306. </div>
  307. <Tooltip overlayClassName="gray" placement="left" title="手机号登录">
  308. <a
  309. className="other"
  310. onClick={() => {
  311. this.setState({ type: LOGIN_PHONE });
  312. }}
  313. >
  314. <Assets name="phone" />
  315. </a>
  316. </Tooltip>
  317. </div>
  318. );
  319. }
  320. renderBindPhone() {
  321. const { needEmail = true, contract = {}, error = {} } = this.state;
  322. const emptyError = error[BIND_PHONE] || {};
  323. return (
  324. <div className="body">
  325. <div className="title">绑定手机号</div>
  326. <div className="tip">
  327. <Assets name="notice" />
  328. 微信登录成功!为更好的使用服务,请您绑定手机号和邮箱。
  329. </div>
  330. <SelectInput
  331. placeholder="请输入手机号"
  332. selectValue={this.state.data.area}
  333. select={MobileArea}
  334. value={this.state.data.mobile}
  335. error={this.state.mobileError}
  336. empty={emptyError.mobile}
  337. onSelect={value => {
  338. this.changeData('area', value);
  339. this.validMobile(false);
  340. }}
  341. onChange={e => {
  342. this.changeData('mobile', e.target.value);
  343. this.validMobile(false);
  344. }}
  345. />
  346. <VerificationInput
  347. placeholder="请输入验证码"
  348. value={this.state.data.mobileVerifyCode}
  349. error={this.state.validError}
  350. empty={emptyError.mobileVerifyCode}
  351. onSend={() => {
  352. return this.sendValid();
  353. }}
  354. onChange={e => {
  355. this.changeData('mobileVerifyCode', e.target.value);
  356. }}
  357. />
  358. {needEmail && (
  359. <Input
  360. placeholder="请输入邮箱"
  361. value={this.state.data.email}
  362. empty={emptyError.email}
  363. onChange={e => {
  364. this.changeData('email', e.target.value);
  365. }}
  366. />
  367. )}
  368. {needEmail && (
  369. <div className="m-b-2">
  370. <RadioItem checked theme="white" className="m-r-5" />
  371. 我已经阅读并同意{' '}
  372. <a href={`/contract/${contract.key}`} target="_blank">
  373. {contract.title}
  374. </a>{' '}
  375. 与{' '}
  376. <a href={`/contract/${contract.key}`} target="_blank">
  377. 隐私政策
  378. </a>
  379. .
  380. </div>
  381. )}
  382. <Button
  383. type="primary"
  384. size="large"
  385. disabled={this.state.validError || this.state.mobileError}
  386. block
  387. onClick={() => {
  388. this.bind();
  389. }}
  390. >
  391. 绑定
  392. </Button>
  393. </div>
  394. );
  395. }
  396. renderBindWx() {
  397. return (
  398. <div className="body">
  399. <div className="title">绑定微信号</div>
  400. <div className="tip">
  401. <Assets name="notice" />
  402. 手机号注册成功!为更好的使用服务,建议您绑定微信号。
  403. </div>
  404. <div className="qr-code">
  405. <iframe
  406. frameBorder="0"
  407. src={`/login.html?appid=${WechatPcAppId}&redirectUri=${encodeURIComponent(PcUrl)}`}
  408. width="300"
  409. height="300"
  410. />
  411. <div className="text">请使用微信扫描二维码登录</div>
  412. <div
  413. className="jump"
  414. onClick={() => {
  415. this.close();
  416. }}
  417. >
  418. 跳过
  419. </div>
  420. </div>
  421. </div>
  422. );
  423. }
  424. renderBindWxError() {
  425. return (
  426. <div className="body">
  427. <div className="title">绑定失败</div>
  428. <div className="text">该微信账户已绑定其他手机号,您可直接使用微信登入。</div>
  429. <div className="btn">
  430. <GButton
  431. radius
  432. onClick={() => {
  433. this.close();
  434. }}
  435. >
  436. Ok
  437. </GButton>
  438. </div>
  439. </div>
  440. );
  441. }
  442. }
  443. export class Input extends Component {
  444. render() {
  445. const { className = '', onChange, placeholder, value, error, left, right, empty } = this.props;
  446. return (
  447. <div className={`g-input-container ${className}`}>
  448. <div className={`g-input-wrapper ${error ? 'error' : ''}`}>
  449. {left && <div className="g-input-left">{left}</div>}
  450. <input
  451. className={`g-input ${empty ? 'empty' : ''}`}
  452. placeholder={placeholder}
  453. value={value}
  454. onChange={data => onChange && onChange(data)}
  455. />
  456. {right && <div className="g-input-right">{right}</div>}
  457. </div>
  458. <div hidden={!error} className="g-input-error">
  459. {error}
  460. </div>
  461. </div>
  462. );
  463. }
  464. }
  465. export class SelectInput extends Component {
  466. constructor(props) {
  467. super(props);
  468. this.state = { showSelect: false };
  469. }
  470. render() {
  471. const { showSelect } = this.state;
  472. const { className = '', onChange, placeholder, value, error, empty, selectValue, select, onSelect } = this.props;
  473. return (
  474. <Input
  475. className={className}
  476. left={
  477. <span className="g-input-left-select" onClick={() => this.setState({ showSelect: !showSelect })}>
  478. {selectValue}
  479. <Icon type={showSelect ? 'up' : 'down'} />
  480. {showSelect && (
  481. <ul className="select-list">
  482. {select.map(row => {
  483. return (
  484. <li
  485. onClick={() => {
  486. this.setState({ showSelect: false });
  487. if (onSelect) onSelect(row.value);
  488. }}
  489. >
  490. {row.label}
  491. </li>
  492. );
  493. })}
  494. </ul>
  495. )}
  496. </span>
  497. }
  498. value={value}
  499. placeholder={placeholder}
  500. onChange={data => onChange && onChange(data)}
  501. error={error}
  502. empty={empty}
  503. />
  504. );
  505. }
  506. }
  507. export class VerificationInput extends Component {
  508. constructor(props) {
  509. super(props);
  510. this.timeKey = null;
  511. this.state = { loading: 0 };
  512. }
  513. componentWillUnmount() {
  514. if (this.timeKey) clearTimeout(this.timeKey);
  515. }
  516. onSend() {
  517. const { onSend, time = 60 } = this.props;
  518. if (onSend) {
  519. onSend().then(() => {
  520. if (this.timeKey) clearTimeout(this.timeKey);
  521. this.setTime(time);
  522. });
  523. }
  524. }
  525. setTime(time) {
  526. this.setState({ loading: time });
  527. this.timeKey = setTimeout(() => {
  528. this.setTime(time - 1);
  529. }, 1000);
  530. }
  531. render() {
  532. const { loading } = this.state;
  533. const { className = '', onChange, placeholder, value, error, empty } = this.props;
  534. return (
  535. <Input
  536. className={className}
  537. right={
  538. loading <= 0 ? (
  539. <span className="g-input-right-verification" onClick={() => this.onSend()}>
  540. 获取验证码
  541. </span>
  542. ) : (
  543. <span className="g-input-right-verification-loading">等待{loading}秒</span>
  544. )
  545. }
  546. value={value}
  547. error={error}
  548. empty={empty}
  549. placeholder={placeholder}
  550. onChange={data => onChange && onChange(data)}
  551. />
  552. );
  553. }
  554. }