react-app-shell
Version:
react打包脚本和example, 这里的版本请忽略
261 lines (244 loc) • 8.8 kB
JavaScript
import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import queryString from 'query-string';
import {observer, inject} from 'mobx-react';
import {Button, InputItem, Picker, List} from 'antd-mobile';
import {InfoModal} from '../../../components';
import {message, tools} from '../../../utils';
import {appConfig} from '../../../config';
import {bargainService, authService} from '../../../service';
import styles from './address.less';
/**
* 砍价活动, 填写收货地址
*/
(({bargainStore}, props) => {
return {
activeId: props.match.params.id,
loadBargainLogic: bargainStore.loadBargainLogic
};
})
class AddAddress extends Component {
constructor(props) {
super(props);
const {recordId} = queryString.parse(window.location.search);
this.state = {
activeId: this.props.activeId,
recordId,
district: [],
name: '',
phone: '',
areaCode: [],
addressDetail: '',
modalKey: '',
};
this.allow = true;
this.throttleAddAds = tools.throttle(this.handelAddAds, 1500);
this.getDistrictData();
}
componentDidMount() {
this.checkLogin();
}
checkLogin = async () => {
const userInfo = await authService.checkLogin();
if (!userInfo) {
// 未登录
const url = `${appConfig.basename}/bargain/${this.props.activeId}`;
window.location.replace(url);
}
};
/**
* 获取地区数据
*/
getDistrictData = () => {
// 获取地区数据
bargainService.getAreaData().then(res => {
this.setState({district: res});
message.closeLoading();
}).catch(error => {
message.closeLoading();
message.error(error && error.msg || '信息获取失败');
});
};
handleChangeValue = (key, value) => {
this.setState({
[key]: value
});
};
/**
* 显示弹窗
* @returns {*}
*/
renderModal = () => {
const {modalKey, activeId, recordId} = this.state;
const {loadBargainLogic} = this.props;
switch (modalKey) {
case 'infoConfirm': {
// 添加地址二次确认
return (
<InfoModal onCancel={this.handleHideModal}
okText={'确认提交'}
onOk={this.throttleAddAds}
okBtnStyle={{
background: 'linear-gradient(90deg,rgba(255,132,44,1) 0%,rgba(255,107,44,1) 100%)',
color: '#fff'
}}
cancelBtnStyle={{
background: '#F5F5F5',
color: '#999',
border: '1px solid #DDD'
}}>
<div className={styles['info-notes']}>收货地址提交后不可修改，确定要提交吗?</div>
</InfoModal>
);
}
case 'infoSuccess': {
// 成功添加地址
return (
<InfoModal cancelVisible={false}
okBtnStyle={{
background: 'linear-gradient(90deg,rgba(255,132,44,1) 0%,rgba(255,107,44,1) 100%)',
color: '#fff'
}}
onCancel={loadBargainLogic.bind(null, activeId, recordId)}>
<div className={styles['info-notes']}>收货地址提交成功~</div>
</InfoModal>
);
}
}
return null;
};
/**
* 关闭modal
*/
handleHideModal = (perform) => {
this.setState({
modalKey: ''
});
};
/**
* 提交收货地址
*/
handelAddAds = async () => {
if (!this.allow) return;
let {activeId, name, phone, areaCode, addressDetail} = this.state;
this.allow = false;
await bargainService.addBargainAddress(activeId, name, phone, areaCode, addressDetail).then(res => {
this.setState({
modalKey: 'infoSuccess',
});
this.allow = true;
}).catch(error => {
message.error(error && error.msg || '地址提交失败');
this.allow = true;
});
};
/**
* 新增地址确认
*/
handelAddConfirm = () => {
let {name, phone, areaCode, addressDetail} = this.state;
let reg = new RegExp('^1\\d{10}$');
if (!name.trim()) {
message.info('请填写联系人！');
return;
}
if (!phone) {
message.info('请填写手机号！');
return;
}
let proPhone = phone.replace(/\s+/g, '');
if (proPhone && !reg.test(proPhone)) {
message.info('手机号格式不正确！');
return;
}
if (areaCode.length === 0) {
message.info('请填写区域城市！');
return;
}
if (!addressDetail.trim()) {
message.info('请填写详细地址！');
return;
}
this.setState({
modalKey: 'infoConfirm',
});
};
render() {
const {
district,
name,
phone,
areaCode,
addressDetail
} = this.state;
return (
<div className={styles['input-section']}>
<div className={styles['input-row']}>
<label>收货人:</label>
<div className={styles['input-row-box']}>
<InputItem
placeholder="请输入收货人姓名"
maxLength={15}
clear
moneyKeyboardAlign="left"
onChange={this.handleChangeValue.bind(this, 'name')}
value={name}
/>
</div>
</div>
<div className={styles['input-row']}>
<label>联系方式:</label>
<div className={styles['input-row-box']}>
<InputItem
type="number"
placeholder="请输入手机号"
clear
moneyKeyboardAlign="left"
onChange={this.handleChangeValue.bind(this, 'phone')}
value={phone}
/>
</div>
</div>
<div className={styles['input-row']}>
<label>所在区域:</label>
<div className={styles['input-row-box']}>
<Picker
visible={this.state.visible}
data={district}
value={areaCode}
onChange={this.handleChangeValue.bind(this, 'areaCode')}
onOk={() => this.setState({visible: false})}
onDismiss={() => this.setState({visible: false})}
title="请选择区域"
extra="请选择省份和城市"
format={label => label.join(' ')}
>
<List.Item onClick={() => this.setState({visible: true})}/>
</Picker>
</div>
</div>
<div className={styles['input-row']}>
<label>详细地址:</label>
<div className={styles['input-row-box']}>
<InputItem
placeholder="请输入详细地址"
maxLength={100}
clear
moneyKeyboardAlign="left"
onChange={this.handleChangeValue.bind(this, 'addressDetail')}
value={addressDetail}
/>
</div>
</div>
<div className={styles['address-form-btn']}>
<Button
className={styles['button-address']}
onClick={this.handelAddConfirm}>确认</Button>
</div>
{this.renderModal()}
</div>
);
}
}
export default withRouter(AddAddress);