jimu-mobile/src/components/driver/driver.js

积木组件库助力移动端开发

/**
 * zhangjingwei 03/20/2017
 */
import React from 'react';
import PropTypes from 'prop-types';

const headpic = require('../../styles/image/img_driver_nor.png');

class Driver extends React.Component {
  static propTypes = {
    avatarUrl: PropTypes.string,
    name: PropTypes.string,
    card: PropTypes.string,
    carType: PropTypes.string,
    carColor: PropTypes.string,
    cntOrder: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
    ]),
    company: PropTypes.string,
    phone: PropTypes.string,
    isMaster: PropTypes.bool,
    phoneShow: PropTypes.bool,
    messageShow: PropTypes.bool,
    newMessageShow: PropTypes.bool,
    messageBack : PropTypes.func
  }

  static defaultProps = {
    isMaster: false,
    star: '',
    phoneShow : true,
    messageShow : false,
    newMessageShow : false,
    newMessageShow : null,
  }
  messageClick(){
    const {messageBack} = this.props
    messageBack && messageBack()
  }

  render() {
    const {
      name, avatarUrl, carType, carColor, cntOrder, card, company, phone,
      isMaster, star, children,messageShow,phoneShow,newMessageShow, ...others
    } = this.props;
    return (
      <div className="jimu_driver" {...others}>
        <div className="jimu_driver_avatar">
          <img src={avatarUrl || headpic} width="50" height="50" alt="司机头像" />
        </div>
        <div className="jimu_driver_info">
          <p className="jimu_driver_info_name fz14">
            {name}
            {star && <b className="jimu_driver_star fz12"><span className="icon-trip_icon_star" />{star}</b>}
            <span className="jimu_driver_orders fz12">{cntOrder}单</span>
          </p>
          <p className="jimu_driver_info_platenumber fz12">
            <span className="jimu-driver-platenumber">{card}</span> <b className="jimu-car-color">{carColor}色</b> <b className="jimu-car-type">{carType}</b>
          </p>
        </div>
        {isMaster && (
          <div className='jimu_driver_icon'>
            {messageShow && <div className="jimu_driver_message" onClick={this.messageClick.bind(this)}><span className="trip_icon_message" />{newMessageShow && <span className='new-message'></span>}</div>}
            {phoneShow && <div className="jimu_driver_telphone"><a href={`tel:${phone}`}><span className="trip_icon_phone" /></a></div>}
          </div>
        )}
        {children && (
        <div className="brd">
          {children}
        </div>
         )}
      </div>
    );
  }
}

export default Driver;