Welink React-ui基础组件xceptionTip
xceptionTip
缺省页,主要用于错误提示。 ExceptionTip UI 提供与WeLink规范一致的视图。
参数说明
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
flag | number | 1 | 缺省页类型 1:没有数据,2:无权限,3:模块建设中,4:网络连接失败,5:PC上查看文件,6:系统繁忙,7:找不到页面 |
callback | func | - | 缺省页点击回调事件 |
msg | string | - | 文本内容 |
submsg | string | - | 副文本 |
/** 操作页面 **/
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
};
- 点赞
- 收藏
- 关注作者
评论(0)