react-app-shell/activity/src/views/bargain/address/addressView.js

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

import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import message from '../../../utils/message';
import {bargainService} from '../../../service';
import styles from './address.less';
import tImg from '../../../public/images/bargain/ads-item-title.png';

/**
 * 查看收货地址
 */
class ShowAddress extends Component {
    constructor(props) {
        super(props);
        const activeId = this.props.match.params.id;
        this.state = {
            activeId,
            name: '',
            phoneNum: '',
            areaName: [],
            address: '',
        };
        this.loadAdsData();
    }

    /**
     * 获取收货地址数据
     */
    loadAdsData = () => {
        const {activeId} = this.state;
        // 获取地址数据
        bargainService.getBargainAddress(activeId).then(({address, areaName, name, phoneNum}) => {
            this.setState({
                address,
                areaName,
                name,
                phoneNum
            });

        }).catch(error => {
            message.error(error && error.msg || '数据获取失败');
        });
    }

    render() {
        const {
            address,
            areaName,
            name,
            phoneNum
        } = this.state;
        return (
            <div className={styles['address-form']}>
                <div className={styles['form-title']}>
                    <img src={tImg}/>
                    <p>我的地址</p>
                </div>
                <div className={styles['form-content']}>
                    <p className={styles['form-item']}>
                        <span className={styles['form-item-title']}>收货人：</span>
                        <span className={styles['form-item-value']}>{name}</span>
                    </p>
                    <p className={styles['form-item']}>
                        <span className={styles['form-item-title']}>联系方式：</span>
                        <span className={styles['form-item-value']}>{phoneNum}</span>
                    </p>
                    <p className={styles['form-item']}>
                        <span className={styles['form-item-title']}>所在区域：</span>
                        <span className={styles['form-item-value']}>{areaName}</span>
                    </p>
                    <p className={styles['form-item']}>
                        <span className={styles['form-item-title']}>详细地址：</span>
                        <span className={styles['form-item-value']}>{address}</span>
                    </p>
                </div>

            </div>
        );
    }
}

export default withRouter(ShowAddress);