ExceptionTip

缺省页，主要用于错误提示。 ExceptionTip UI 提供与WeLink规范一致的视图。

参数说明

效果示例

/** 操作页面 **/
import React from 'react';
import {
  Article,
  Cells,
  Input,
  Button
} from '@wecode/react-weui';
import PropTypes from 'prop-types';

export default class Exception extends React.Component {
  state = {
    chatID: '',
    chatName: ''
  };

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

  handleImChat = () => {
    const { chatID, chatName } = this.state;
    window.HWH5.openIMChat({
      chatType: '0',
      chatID,
      chatName
    });
  }

  handleCreateData = () => {
    window.HWH5.toast({ msg: '创建XXX数据事件触发', type: 'w' });
  }

  tipsDemo = () => {
    const { chatName } = this.state;
    return <span>请联系<span className="tip__font-color-blue" onClick={() => this.handleImChat()}>{chatName}</span></span>;
  }

  exceptionTips =()=> [
    {
      flag: 1,
      msg: '没有XXX，休息一下',
      submsg: '',
      tip: '没有XXX，休息一下',
      children: <Button className="weui-btn_exception-nodata" plain onClick={() => this.handleCreateData()}>创建XXX</Button>
    },
    {
      flag: 2,
      msg: '您暂无权限',
      submsg: this.tipsDemo(),
      tip: '您暂无权限(传主次文本)'
    },
    {
      flag: 2,
      msg: '',
      submsg: this.tipsDemo(),
      tip: '您暂无权限(不传主文本)'
    },
    {
      flag: 2,
      msg: '',
      submsg: '',
      tip: '您暂无权限(不传主次文本)'
    },
    {
      flag: 3,
      msg: '模块正在建设中',
      submsg: '',
      tip: '模块正在建设中'
    },
    {
      flag: 4,
      msg: '网络不给力',
      submsg: '',
      tip: '网络不给力'
    },
    {
      flag: 5,
      msg: '请到PC上查看文件',
      submsg: '',
      tip: '请到PC上查看文件'
    },
    {
      flag: 6,
      msg: '系统繁忙，请稍等一下',
      submsg: '',
      tip: '系统繁忙，请稍等一下',
      callback: () => {
        if (process.env.NODE_ENV === 'development') {
          window.history.back();
        } else {
          window.HWH5.goBack();
        }
      }
    },
    {
      flag: 7,
      msg: '茫茫大海，找不到页面',
      submsg: '',
      tip: '茫茫大海，找不到页面'
    }
  ];

  exception(e, params) {
    const { chatID, chatName } = this.state;
    if (params.flag === 2 && (!chatID || !chatName)) {
      window.HWH5.toast({
        msg: '联系人ID或这名称不能为空',
        type: 'n'
      });
      return;
    }
    const { history } = this.props;
    history.push({ pathname: '/exceptionpage', params });
  }

  render() {
    const { chatID, chatName } = this.state;
    const exceptiontips = this.exceptionTips() || [];
    return (
      <section>
        <Cells>
          <Input value={chatID} onChange={e => this.handelChangeValue('chatID', e.target.value)} placeholder="请输入联系人id" />
        </Cells>
        <Cells>
          <Input value={chatName} onChange={e => this.handelChangeValue('chatName', e.target.value)} placeholder="请输入联系人名称" />
        </Cells>
        <Article>
          {
            exceptiontips.map((params, i) => (
              <Button key={i} type={(i + 1) % 2 === 0 ? 'default' : 'primary'} onClick={e => this.exception(e, params)}>
                {params.tip}
              </Button>))
          }
        </Article>
      </section>
    );
  }
}

Exception.propTypes = {
  history: PropTypes.object
};


/** 缺省页面 **/
import React from 'react';
import {
  ExceptionTip
} from '@wecode/react-weui';
import PropTypes from 'prop-types';

export default class ExceptionPage extends React.Component {
  state = {
  };

  render() {
    const { location } = this.props;
    const { params } = location;
    const {
      flag, msg, submsg, callback, children
    } = params;
    return (
      <ExceptionTip
        flag={flag}
        callback={callback}
        msg={msg}
        submsg={submsg}
      >
        {children}
      </ExceptionTip>
    );
  }
}

ExceptionPage.propTypes = {
  location: PropTypes.object
};