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

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

import React, {PureComponent} from 'react';
import queryString from 'query-string';

import {DocumentTitle} from '../../../components';
import ShareWechat from '../components/shareWechat';
import {message} from '../../../utils';
import {lotteryService} from '../../../service';
import {ERROR_CODE} from '../../../constants';
import styles from './address.less';

/**
 * 查看收货地址
 */
class AddressView extends PureComponent {
    constructor(props) {
        super(props);
        this.lotteryId = Number(this.props.match.params.id);
        this.paramsUrl = queryString.parse(window.location.search);
        this.state = {
            prizeImg: '',
            prizeName: '',
            name: '',
            phoneNum: '',
            areaName: [],
            addressDetail: '',
            trackNo: ''
        };
        message.showLoading();
    }

    componentDidMount() {
        this.loadAddressData();
    }

    /**
     * 加载地址数据
     */
    loadAddressData = () => {
        const {recordId} = this.paramsUrl;
        lotteryService.getAddressData(recordId).then(({prizeImg, prizeName, name, phoneNum, areaName, address, trackNo}) => {
            console.log(prizeImg, prizeName, address, areaName, name, phoneNum);
            this.setState({
                prizeImg,
                prizeName,
                name,
                phoneNum,
                areaName,
                addressDetail: address,
                trackNo
            });
            message.closeLoading();
        }).catch(error => {
            message.closeLoading();
            if (error.code === ERROR_CODE.LOGIN_REQUIRED) {
                this.jumpToHomePage();
                return;
            }
            message.error(error.msg || '获取收货地址失败');
        });
    };

    /**
     * 跳转到活动首页
     */
    jumpToHomePage = () => {
        let searchObj = {
            rf: this.paramsUrl.rf,
        };
        this.props.history.replace(`/lottery/${this.lotteryId}?${queryString.stringify(searchObj)}`);
    };

    render() {
        const {prizeImg, prizeName, name, phoneNum, areaName, addressDetail, trackNo} = this.state;
        return (
            <div className={styles['view-wrapper']}>
                <DocumentTitle title="查看收货地址"/>
                <div className={styles['prize']}>
                    <img src={prizeImg}/>
                    <p>{prizeName}</p>
                </div>
                <div className={styles['address-content']}>
                    <p className={styles['address-item']}>
                        <span className={styles['address-item-title']}>收货人：</span>
                        <span className={styles['address-item-value']}>{name}</span>
                    </p>
                    <p className={styles['address-item']}>
                        <span className={styles['address-item-title']}>联系方式：</span>
                        <span className={styles['address-item-value']}>{phoneNum}</span>
                    </p>
                    <p className={styles['address-item']}>
                        <span className={styles['address-item-title']}>所在区域：</span>
                        <span className={styles['address-item-value']}>{areaName}</span>
                    </p>
                    <p className={styles['address-item']}>
                        <span className={styles['address-item-title']}>详细地址：</span>
                        <span className={styles['address-item-value']}>{addressDetail}</span>
                    </p>
                </div>
                {trackNo ? (
                    <div className={styles['track']}>
                        <span className={styles['track-title']}>物流订单编号：</span>
                        <span className={styles['track-value']}>{trackNo}</span>
                    </div>
                ) : ''}

                <div className={styles['footer']}>我们会尽快为您寄出~</div>
                <ShareWechat/>
            </div>
        );
    }
}

export default AddressView;