|
@@ -1,34 +1,120 @@
|
|
|
import React, { Component } from 'react';
|
|
|
+import Cropper from 'react-cropper';
|
|
|
+import 'cropperjs/dist/cropper.css';
|
|
|
import './index.less';
|
|
|
import FileUpload from '@src/components/FileUpload';
|
|
|
import Assets from '@src/components/Assets';
|
|
|
+import scale from '@src/services/Scale';
|
|
|
+import { asyncSMessage } from '@src/services/AsyncTools';
|
|
|
import { SelectInput, VerificationInput, Input } from '../Login';
|
|
|
import { MobileArea } from '../../../Constant';
|
|
|
import Invite from '../Invite';
|
|
|
import Modal from '../Modal';
|
|
|
+import { Common } from '../../stores/common';
|
|
|
+import { User } from '../../stores/user';
|
|
|
+import { My } from '../../stores/my';
|
|
|
|
|
|
export class BindPhone extends Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
- this.state = { step: 0, data: {} };
|
|
|
+ this.props.data = this.props.data || {};
|
|
|
+ this.state = this.initState(this.props);
|
|
|
this.stepProp = {
|
|
|
0: {
|
|
|
title: '绑定手机',
|
|
|
- onConfirm: () => this.onNext(),
|
|
|
+ onConfirm: props.onConfirm,
|
|
|
},
|
|
|
1: {
|
|
|
title: '绑定手机',
|
|
|
- onConfirm: props.onConfirm,
|
|
|
+ onConfirm: () => {
|
|
|
+ this.submit();
|
|
|
+ },
|
|
|
onCancel: props.onCancel,
|
|
|
confirmText: '提交',
|
|
|
},
|
|
|
};
|
|
|
}
|
|
|
|
|
|
+ initState(props) {
|
|
|
+ if (this.wait) return {};
|
|
|
+ const data = Object.assign({}, props.data);
|
|
|
+ if (!data.area) data.area = MobileArea[0].value;
|
|
|
+ return { step: props.data.mobile ? 0 : 1, data };
|
|
|
+ }
|
|
|
+
|
|
|
+ componentWillReceiveProps(nextProps) {
|
|
|
+ this.setState(this.initState(nextProps));
|
|
|
+ }
|
|
|
+
|
|
|
onNext() {
|
|
|
this.setState({ step: 1 });
|
|
|
}
|
|
|
|
|
|
+ changeData(field, value) {
|
|
|
+ let { data } = this.state;
|
|
|
+ data = data || {};
|
|
|
+ data[field] = value;
|
|
|
+ this.setState({ data, error: null });
|
|
|
+ }
|
|
|
+
|
|
|
+ validMobile() {
|
|
|
+ const { data } = this.state;
|
|
|
+ const { area, mobile } = data;
|
|
|
+ if (!area || !mobile) return;
|
|
|
+ this.validNumber += 1;
|
|
|
+ const number = this.validNumber;
|
|
|
+ User.validMobile(area, mobile)
|
|
|
+ .then(result => {
|
|
|
+ if (number !== this.validNumber) return Promise.resolve();
|
|
|
+ return result ? Promise.resolve() : Promise.reject(new Error('该手机已绑定其他账号,请更换手机号码'));
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.setState({ mobileError: err.message });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ sendValid() {
|
|
|
+ const { data, error } = this.state;
|
|
|
+ const { area, mobile } = data;
|
|
|
+ if (!area || !mobile || error) return Promise.reject();
|
|
|
+ this.wait = true;
|
|
|
+ return Common.sendSms(area, mobile)
|
|
|
+ .then(result => {
|
|
|
+ this.wait = false;
|
|
|
+ if (result) {
|
|
|
+ asyncSMessage('发送成功');
|
|
|
+ this.setState({ error: '', validError: '' });
|
|
|
+ } else {
|
|
|
+ throw new Error('发送失败');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.wait = false;
|
|
|
+ this.setState({ error: err.message });
|
|
|
+ throw err;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ submit() {
|
|
|
+ const { data, error } = this.state;
|
|
|
+ console.log(data, error);
|
|
|
+ if (!data.mobile || !data.area || error) return;
|
|
|
+ const { area, mobile } = data;
|
|
|
+ this.wait = true;
|
|
|
+ My.bindMobile(area, mobile)
|
|
|
+ .then(() => {
|
|
|
+ asyncSMessage('操作成功');
|
|
|
+ this.setState({ step: 0 });
|
|
|
+ User.infoHandle(Object.assign(this.props.data, { area, mobile }));
|
|
|
+ this.props.onConfirm();
|
|
|
+ this.wait = false;
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.setState({ error: e.message });
|
|
|
+ this.wait = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
render() {
|
|
|
const { show } = this.props;
|
|
|
const { step } = this.state;
|
|
@@ -40,9 +126,10 @@ export class BindPhone extends Component {
|
|
|
}
|
|
|
|
|
|
renderStep0() {
|
|
|
+ const { data } = this.state;
|
|
|
return (
|
|
|
<div className="step-0-layout">
|
|
|
- 已绑定手机 13123123123123
|
|
|
+ 已绑定手机 {data.mobile}
|
|
|
<a onClick={() => this.onNext()}>修改</a>
|
|
|
</div>
|
|
|
);
|
|
@@ -58,14 +145,14 @@ export class BindPhone extends Component {
|
|
|
selectValue={this.state.data.area}
|
|
|
select={MobileArea}
|
|
|
value={this.state.data.mobile}
|
|
|
- error={this.state.mobileError}
|
|
|
+ error={this.state.error}
|
|
|
onSelect={value => {
|
|
|
this.changeData('area', value);
|
|
|
- this.validMobile(true);
|
|
|
+ this.validMobile();
|
|
|
}}
|
|
|
onChange={e => {
|
|
|
this.changeData('mobile', e.target.value);
|
|
|
- this.validMobile(true);
|
|
|
+ this.validMobile();
|
|
|
}}
|
|
|
/>
|
|
|
<VerificationInput
|
|
@@ -88,25 +175,63 @@ export class BindPhone extends Component {
|
|
|
export class BindEmail extends Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
- this.state = { step: 0, data: {} };
|
|
|
+ this.props.data = this.props.data || {};
|
|
|
+ this.state = this.initState(this.props);
|
|
|
this.stepProp = {
|
|
|
0: {
|
|
|
- title: '绑定手机',
|
|
|
- onConfirm: () => this.onNext(),
|
|
|
+ title: '绑定邮箱',
|
|
|
+ onConfirm: props.onConfirm,
|
|
|
},
|
|
|
1: {
|
|
|
- title: '绑定手机',
|
|
|
- onConfirm: props.onConfirm,
|
|
|
+ title: '绑定邮箱',
|
|
|
+ onConfirm: () => {
|
|
|
+ this.submit();
|
|
|
+ },
|
|
|
onCancel: props.onCancel,
|
|
|
confirmText: '提交',
|
|
|
},
|
|
|
};
|
|
|
}
|
|
|
|
|
|
+ initState(props) {
|
|
|
+ if (this.wait) return {};
|
|
|
+ return { step: props.data.email ? 0 : 1, data: Object.assign({}, props.data) };
|
|
|
+ }
|
|
|
+
|
|
|
+ componentWillReceiveProps(nextProps) {
|
|
|
+ this.setState(this.initState(nextProps));
|
|
|
+ }
|
|
|
+
|
|
|
onNext() {
|
|
|
this.setState({ step: 1 });
|
|
|
}
|
|
|
|
|
|
+ changeData(field, value) {
|
|
|
+ let { data } = this.state;
|
|
|
+ data = data || {};
|
|
|
+ data[field] = value;
|
|
|
+ this.setState({ data, error: null });
|
|
|
+ }
|
|
|
+
|
|
|
+ submit() {
|
|
|
+ const { data, error } = this.state;
|
|
|
+ if (!data.email || error) return;
|
|
|
+ const { email } = data;
|
|
|
+ this.wait = true;
|
|
|
+ My.bindEmail(email)
|
|
|
+ .then(() => {
|
|
|
+ asyncSMessage('操作成功');
|
|
|
+ this.setState({ step: 0 });
|
|
|
+ User.infoHandle(Object.assign(this.props.data, { email }));
|
|
|
+ this.props.onConfirm();
|
|
|
+ this.wait = false;
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.setState({ error: e.message });
|
|
|
+ this.wait = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
render() {
|
|
|
const { show } = this.props;
|
|
|
const { step } = this.state;
|
|
@@ -118,9 +243,10 @@ export class BindEmail extends Component {
|
|
|
}
|
|
|
|
|
|
renderStep0() {
|
|
|
+ const { data } = this.state;
|
|
|
return (
|
|
|
<div className="step-0-layout">
|
|
|
- 已绑定邮箱 13123123123123
|
|
|
+ 已绑定邮箱 {data.email}
|
|
|
<a onClick={() => this.onNext()}>修改</a>
|
|
|
</div>
|
|
|
);
|
|
@@ -133,11 +259,10 @@ export class BindEmail extends Component {
|
|
|
<div className="input-layout">
|
|
|
<Input
|
|
|
placeholder="请输入邮箱"
|
|
|
- value={this.state.data.mobile}
|
|
|
- error={this.state.mobileError}
|
|
|
+ value={this.state.data.email}
|
|
|
+ error={this.state.error}
|
|
|
onChange={e => {
|
|
|
- this.changeData('mobile', e.target.value);
|
|
|
- this.validMobile(true);
|
|
|
+ this.changeData('email', e.target.value);
|
|
|
}}
|
|
|
/>
|
|
|
</div>
|
|
@@ -149,11 +274,55 @@ export class BindEmail extends Component {
|
|
|
export class EditInfo extends Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
- this.state = { data: {} };
|
|
|
+ this.props.data = this.props.data || {};
|
|
|
+ this.state = this.initState(this.props);
|
|
|
+ }
|
|
|
+
|
|
|
+ initState(props) {
|
|
|
+ if (props.image && this.waitImage) {
|
|
|
+ const { state } = this;
|
|
|
+ Common.upload(props.image).then(result => {
|
|
|
+ const { data } = this.state;
|
|
|
+ data.avatar = result.url;
|
|
|
+ this.setState({ data, uploading: false });
|
|
|
+ }).catch((e) => {
|
|
|
+ this.setState({ imageError: e.message });
|
|
|
+ });
|
|
|
+ state.uploading = true;
|
|
|
+ this.waitImage = false;
|
|
|
+ return state;
|
|
|
+ }
|
|
|
+ return { data: Object.assign({}, props.data) };
|
|
|
+ }
|
|
|
+
|
|
|
+ componentWillReceiveProps(nextProps) {
|
|
|
+ this.setState(this.initState(nextProps));
|
|
|
+ }
|
|
|
+
|
|
|
+ changeData(field, value) {
|
|
|
+ let { data } = this.state;
|
|
|
+ data = data || {};
|
|
|
+ data[field] = value;
|
|
|
+ this.setState({ data, error: null });
|
|
|
+ }
|
|
|
+
|
|
|
+ submit() {
|
|
|
+ const { data, error } = this.state;
|
|
|
+ if (!data.nickname || error) return;
|
|
|
+ const { nickname, avatar } = data;
|
|
|
+ My.editInfo({ nickname, avatar })
|
|
|
+ .then(() => {
|
|
|
+ asyncSMessage('操作成功');
|
|
|
+ User.infoHandle(Object.assign(this.props.data, { nickname, avatar }));
|
|
|
+ this.props.onConfirm();
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.setState({ error: e.message });
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
- const { show, onCancel, onConfirm } = this.props;
|
|
|
+ const { show, onCancel, onSelectImage } = this.props;
|
|
|
return (
|
|
|
<Modal
|
|
|
className="edit-info-modal"
|
|
@@ -162,7 +331,9 @@ export class EditInfo extends Component {
|
|
|
title="修改资料"
|
|
|
confirmText="保存"
|
|
|
onCancel={onCancel}
|
|
|
- onConfirm={onConfirm}
|
|
|
+ onConfirm={() => {
|
|
|
+ this.submit();
|
|
|
+ }}
|
|
|
>
|
|
|
<div className="edit-info-modal-wrapper">
|
|
|
<div className="edit-info-modal-block">
|
|
@@ -170,11 +341,10 @@ export class EditInfo extends Component {
|
|
|
<div className="input-layout">
|
|
|
<Input
|
|
|
placeholder="2-20位,不可使用特殊字符。"
|
|
|
- value={this.state.data.mobile}
|
|
|
- error={this.state.mobileError}
|
|
|
+ value={this.state.data.nickname || ''}
|
|
|
+ error={this.state.error}
|
|
|
onChange={e => {
|
|
|
- this.changeData('mobile', e.target.value);
|
|
|
- this.validMobile(true);
|
|
|
+ this.changeData('nickname', e.target.value);
|
|
|
}}
|
|
|
/>
|
|
|
</div>
|
|
@@ -182,7 +352,15 @@ export class EditInfo extends Component {
|
|
|
<div className="edit-info-modal-block">
|
|
|
<div className="label">头像</div>
|
|
|
<div className="input-layout">
|
|
|
- <FileUpload />
|
|
|
+ <FileUpload
|
|
|
+ uploading={this.state.uploading}
|
|
|
+ value={this.state.data.avatar}
|
|
|
+ onUpload={({ file }) => {
|
|
|
+ this.waitImage = true;
|
|
|
+ onSelectImage(file);
|
|
|
+ return Promise.reject();
|
|
|
+ }} />
|
|
|
+ {this.state.imageError || ''}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -227,11 +405,71 @@ export class RealAuth extends Component {
|
|
|
export class EditAvatar extends Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
- this.state = { data: {} };
|
|
|
+ this.state = this.initState(props);
|
|
|
+ }
|
|
|
+
|
|
|
+ initState(props) {
|
|
|
+ if (props.image) this.loadImage(props.image);
|
|
|
+ return { data: {} };
|
|
|
+ }
|
|
|
+
|
|
|
+ componentWillReceiveProps(nextProps) {
|
|
|
+ this.setState(this.initState(nextProps));
|
|
|
+ }
|
|
|
+
|
|
|
+ loadImage(file) {
|
|
|
+ this.defaultZoomValue = 1;
|
|
|
+ if (window.FileReader) {
|
|
|
+ const reader = new FileReader();
|
|
|
+ reader.readAsDataURL(file);
|
|
|
+ // 渲染文件
|
|
|
+ reader.onload = (arg) => {
|
|
|
+ this.setState({ image: arg.target.result, fileName: file.name, zoomValue: 1 });
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ const img = new Image();
|
|
|
+ img.onload = function () {
|
|
|
+ const canvas = document.createElement('canvas');
|
|
|
+ canvas.height = img.height;
|
|
|
+ canvas.width = img.width;
|
|
|
+ const ctx = canvas.getContext('2d');
|
|
|
+ ctx.drawImage(img, 0, 0);
|
|
|
+ this.setState({ image: canvas.toDataURL() });
|
|
|
+ };
|
|
|
+ img.src = '1.gif';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ computerZoom() {
|
|
|
+ const data = this.cropRef.getImageData();
|
|
|
+ this.defaultZoomValue = 200 / parseFloat(Math.max(data.naturalWidth, data.naturalHeight));
|
|
|
+ }
|
|
|
+
|
|
|
+ crop() {
|
|
|
+ // image in dataUrl
|
|
|
+ // console.log(this.cropRef.getCroppedCanvas().toDataURL())
|
|
|
+ // const canvas = this.cropRef.getCroppedCanvas();
|
|
|
+ // const avatar = scale(this.props.crop, canvas, 'png-src');
|
|
|
+ // let scaleCanvas = this.cropRef.getCroppedCanvas(this.props.crop)
|
|
|
+ // this.setState({ avatar });
|
|
|
+ }
|
|
|
+
|
|
|
+ select() {
|
|
|
+ const { fileName } = this.state;
|
|
|
+ const { onConfirm } = this.props;
|
|
|
+ const canvas = this.cropRef.getCroppedCanvas();
|
|
|
+ const scaleCanvas = scale(this.props.crop, canvas);
|
|
|
+ // let scaleCanvas = this.cropRef.getCroppedCanvas(this.props.crop)
|
|
|
+
|
|
|
+ scaleCanvas.toBlob((blob) => {
|
|
|
+ const file = new File([blob], fileName);
|
|
|
+ onConfirm(file);
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
- const { show, onConfirm, onCancel } = this.props;
|
|
|
+ const { show, onCancel } = this.props;
|
|
|
+ const { image } = this.state;
|
|
|
return (
|
|
|
<Modal
|
|
|
className="edit-avatar-modal"
|
|
@@ -239,16 +477,44 @@ export class EditAvatar extends Component {
|
|
|
width={630}
|
|
|
title="调整头像"
|
|
|
confirmText="保存头像"
|
|
|
- onConfirm={onConfirm}
|
|
|
+ onConfirm={() => {
|
|
|
+ this.select();
|
|
|
+ }}
|
|
|
onCancel={onCancel}
|
|
|
>
|
|
|
<div className="edit-avatar-modal-wrapper">
|
|
|
<div className="edit-avatar-o">
|
|
|
- <Assets name="qrcode" />
|
|
|
+ <Cropper
|
|
|
+ ref={(ref) => { this.cropRef = ref; }}
|
|
|
+ src={image}
|
|
|
+ ready={() => {
|
|
|
+ this.computerZoom();
|
|
|
+ }}
|
|
|
+ style={{ height: 360, width: 360 }}
|
|
|
+ // Cropper.js options
|
|
|
+ aspectRatio={1}
|
|
|
+ viewMode={0}
|
|
|
+ // autoCropArea={0.8}
|
|
|
+ preview=".img-preview"
|
|
|
+ // dragMode='move'
|
|
|
+ guides={false}
|
|
|
+ movable={false}
|
|
|
+ rotatable={false}
|
|
|
+ scalable={false}
|
|
|
+ // zoom={(value) => {
|
|
|
+ // console.log('zoom', value);
|
|
|
+ // const zoomValue = value * this.defaultZoomValue / 50;
|
|
|
+ // this.cropRef.zoomTo(zoomValue);
|
|
|
+ // }}
|
|
|
+ cropmove={() => {
|
|
|
+ this.crop();
|
|
|
+ }}
|
|
|
+ toggleDragModeOnDblclick={false}
|
|
|
+ cropBoxResizable />
|
|
|
</div>
|
|
|
<div className="edit-avatar-r">
|
|
|
<div className="text">头像预览</div>
|
|
|
- <Assets name="qrcode" />
|
|
|
+ <div className="img-preview" style={{ width: 100, height: 100, overflow: 'hidden' }} />
|
|
|
</div>
|
|
|
</div>
|
|
|
</Modal>
|
|
@@ -263,12 +529,12 @@ export class InviteModal extends Component {
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
- const { show, onClose } = this.props;
|
|
|
+ const { show, onClose, data } = this.props;
|
|
|
return (
|
|
|
<Modal className="invite-modal" show={show} width={630} title="邀请好友" onClose={onClose}>
|
|
|
<div className="invite-modal-wrapper">
|
|
|
<div className="tip">每邀请一位小伙伴加入“千行GMAT”, 您的VIP权限会延长7天,可累加 无上限!赶紧行动吧~</div>
|
|
|
- <Invite />
|
|
|
+ <Invite data={data} />
|
|
|
</div>
|
|
|
</Modal>
|
|
|
);
|