react-app-shell/activity/src/views/lottery/address/address-add.js

react打包脚本和example, 这里的版本请忽略

import React, {PureComponent} from 'react';
import {Button, InputItem, TextareaItem, Picker, List} from 'antd-mobile';
import queryString from 'query-string';

import {message} from '../../../utils';
import {DocumentTitle} from '../../../components';
import Modal from '../components/modal';
import ShareWechat from '../components/shareWechat';
import {lotteryService, authService} from '../../../service';
import {ERROR_CODE} from '../../../constants';
import styles from './address.less';
import indexStyle from '../lottery.less';

/**
 * 填写收货地址
 */
class AddressAdd extends PureComponent {
    constructor(props) {
        super(props);
        this.lotteryId = Number(this.props.match.params.id);
        this.paramsUrl = queryString.parse(window.location.search);

        this.state = {
            district: [],
            name: '',
            phone: '',
            areaCode: [],
            addressDetail: '',
            modalKey: '',
        };
        this.allow = true;
        message.showLoading();
    }

    componentDidMount() {
        this.getDistrictData();
    }

    /**
     * 获取地区数据
     */
    getDistrictData = () => {
        // 获取地区数据
        lotteryService.getAreaData().then(res => {
            this.setState({district: res});
            message.closeLoading();
        }).catch(error => {
            message.closeLoading();
            if (error.code === ERROR_CODE.LOGIN_REQUIRED) {
                this.jumpToHomePage();
                return;
            }
            message.error(error && error.msg || '信息获取失败');
        });
    };

    /**
     * 跳转到活动首页
     */
    jumpToHomePage = () => {
        let searchObj = {
            rf: this.paramsUrl.rf,
        };
        // 如果用户没有登录则跳转到活动首页
        this.props.history.replace(`/lottery/${this.lotteryId}?${queryString.stringify(searchObj)}`);
    };

    /**
     * 跳转到中奖记录页面
     */
    jumpToPrizePage = () => {
        let searchObj = {
            rf: this.paramsUrl.rf,
        };
        this.props.history.replace(`/lottery/prize/${this.lotteryId}?${queryString.stringify(searchObj)}`);
    };

    handleChangeValue = (key, value) => {
        this.setState({
            [key]: value
        });
    };

    /**
     * 显示弹窗
     * @returns {*}
     */
    renderModal = () => {
        const {modalKey} = this.state;

        switch (modalKey) {
            case 'infoConfirm': {
                // 添加地址二次确认
                return (
                    <Modal title={'温馨提示'} onClose={this.handleHideModal}>
                        <div className={styles['modal-tip']}>
                            <div className={styles['modal-notes']}>收货地址提交后不可修改，确定要提交吗?</div>
                            <div className={indexStyle['modalFooter']}>
                                <Button className={indexStyle['cancelBtn']} onClick={this.handleHideModal}>再想想</Button>
                                <Button className={indexStyle['confirmBtn']} onClick={this.handelAddAds}>确认提交</Button>
                            </div>
                        </div>
                    </Modal>
                );
            }
            case 'error': {
                // 提醒用户尚未登录，点击跳到活动首页
                return (
                    <Modal title={'温馨提示'} onClose={this.handleHideModal}>
                        <div className={styles['modal-tip']}>
                            <div className={styles['modal-notes']}>操作有误，请重新检查~</div>
                            <div className={indexStyle['modalFooter']}>
                                <div className={indexStyle['confirmBtn']} onClick={this.jumpToHomePage}>我知道了</div>
                            </div>
                        </div>
                    </Modal>
                );
            }
        }
        return null;
    };

    /**
     * 关闭modal
     */
    handleHideModal = () => {
        this.setState({
            modalKey: ''
        });
    };

    /**
     * 提交收货地址
     */
    handelAddAds = () => {
        if (!this.allow) return;
        const {recordId} = this.paramsUrl;
        const {name, phone, areaCode, addressDetail} = this.state;
        this.allow = false;
        lotteryService.addAddress(recordId, name, phone, areaCode, addressDetail)
            .then(res => {
                this.allow = true;
                this.jumpToPrizePage();
            })
            .catch(error => {
                this.allow = true;
                console.error(error);
                if (error.code === ERROR_CODE.LOGIN_REQUIRED) {
                    this.jumpToHomePage();
                    return;
                }
                if (error.code === ERROR_CODE.BIZ_LUCKY_DRAW_PRIZE_TYPE_ERROR ||
                    error.code === ERROR_CODE.BIZ_LUCKY_DRAW_ADDRESS_ALREADY_EXIST) {
                    // 用户未登录、用户提交奖品类型错误，地址已填写
                    this.setState({
                        modalKey: 'error',
                    });
                } else {
                    this.setState({
                        modalKey: '',
                    });
                    message.error(error.msg || '收货地址提交失败');
                }
            });
    };

    /**
     * 地址信息检验
     */
    checkAddress = async () => {
        const isLogin = await authService.checkLogin();
        if (!isLogin) {
            this.jumpToHomePage();
            return;
        }
        let {name, phone, areaCode, addressDetail} = this.state;
        let reg = /1\d{10}/;
        let namereg = /^[\u4e00-\u9fa5a-zA-Z0-9]+$/;
        if (!name.trim()) {
            message.info('请填写收货人！');
            return;
        }
        if (!namereg.test(name)) {
            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',
        });
    };

    handelAddFocus = (ref) => {
        this[ref].focus();
    };

    render() {
        const {
            district,
            name,
            phone,
            areaCode,
            addressDetail
        } = this.state;
        return (
            <div className={styles['add-wrapper']}>
                <DocumentTitle title="填写收货地址"/>
                <div className={styles['address-row']}>
                    <label>收货人:</label>
                    <div className={styles['address-row-box']} onClick={this.handelAddFocus.bind(null, 'nameInput')}>
                        <InputItem
                            placeholder="请输入收货人姓名"
                            ref={ref => {
                                this.nameInput = ref;
                            }}
                            maxLength={30}
                            clear
                            moneyKeyboardAlign="left"
                            onChange={this.handleChangeValue.bind(this, 'name')}
                            value={name}
                        />
                    </div>
                </div>
                <div className={styles['address-row']}>
                    <label>联系方式:</label>
                    <div className={styles['address-row-box']} onClick={this.handelAddFocus.bind(null, 'PhoneInput')}>
                        <InputItem
                            type="number"
                            ref={ref => {
                                this.PhoneInput = ref;
                            }}
                            maxLength={11}
                            placeholder="请输入手机号"
                            clear
                            moneyKeyboardAlign="left"
                            onChange={this.handleChangeValue.bind(this, 'phone')}
                            value={phone}
                        />
                    </div>
                </div>
                <div className={styles['address-row']}>
                    <label>所在区域:</label>
                    <div className={styles['address-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
                                className={areaCode.length ? styles['address-row-box__area'] : styles['address-row-box__tip']}
                                arrow="horizontal"
                                onClick={() => this.setState({visible: true})}
                            >
                            </List.Item>
                        </Picker>
                    </div>
                </div>
                <div className={styles['address-row']} onClick={this.handelAddFocus.bind(null, 'adsTestarea')}>
                    <label>详细地址:</label>
                    <div className={styles['address-row-box']}>
                        <TextareaItem
                            placeholder="街道、楼牌号等"
                            ref={ref => {
                                this.adsTestarea = ref;
                            }}
                            maxLength={100}
                            clear
                            rows={3}
                            onChange={this.handleChangeValue.bind(this, 'addressDetail')}
                            value={addressDetail}
                        />
                    </div>
                </div>

                <div className={styles['address-confirm']}>
                    <Button
                        className={styles['confirm-btn']}
                        onClick={this.checkAddress}>确认</Button>
                </div>
                {this.renderModal()}
                <ShareWechat/>
            </div>
        );
    }
}

export default AddressAdd;