Welink React-ui基础组件xceptionTip

举报
云会议运营喵大人 发表于 2020/02/20 19:48:35 2020/02/20
【摘要】 xceptionTip缺省页,主要用于错误提示。 ExceptionTip UI 提供与WeLink规范一致的视图。参数说明参数类型默认值说明flagnumber1缺省页类型1:没有数据,2:无权限,3:模块建设中,4:网络连接失败,5:PC上查看文件,6:系统繁忙,7:找不到页面callbackfunc-缺省页点击回调事件msgstring-文本内容submsgstring-副文本/** ...

xceptionTip


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

参数说明

参数类型默认值说明
flagnumber1缺省页类型
1:没有数据,2:无权限,3:模块建设中,4:网络连接失败,5:PC上查看文件,6:系统繁忙,7:找不到页面
callbackfunc-缺省页点击回调事件
msgstring-文本内容
submsgstring-副文本

/** 操作页面 **/
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
};


【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。