Result 结果页

规则

• 用作非常重要的操作反馈，eg：支付成功，无网络状态。

• 个性化且优美的插画，可以提升品牌形象。

• 对于错误类型的结果页，页面中需要提供明确的行动点，eg：重新加载。

代码演示

示例

import { Result } from 'antd-mobile';
const ResultExample = () => (<div>
  <p style={{ margin: 10, color: '#999' }}>支付成功</p>
  <Result
    imgUrl="https://zos.alipayobjects.com/rmsportal/yRUDxcBPvzZTDHK.png"
    title="支付成功"
    message={<div><div style={{ fontSize: '0.72rem', color: '#000', lineHeight: 1 }}>998.00</div><del>1098元</del></div>}
  />
  <p style={{ margin: 10, color: '#999' }}>验证成功</p>
  <Result
    imgUrl="https://zos.alipayobjects.com/rmsportal/hbTlcWTgMzkBEiU.png"
    title="验证成功"
    message="所提交内容已成功完成验证"
  />
  <p style={{ margin: 10, color: '#999' }}>支付失败</p>
  <Result
    imgUrl="https://zos.alipayobjects.com/rmsportal/LUIUWjyMDWctQTf.png"
    title="支付失败"
    message="所选银行卡余额不足"
  />
  <p style={{ margin: 10, color: '#999' }}>等待处理</p>
  <Result
    imgUrl="https://zos.alipayobjects.com/rmsportal/gIGluyutXOpJmqx.png"
    title="等待处理"
    message="已提交申请，等待银行处理"
  />
  <p style={{ margin: 10, color: '#999' }}>操作失败</p>
  <Result
    imgUrl="https://zos.alipayobjects.com/rmsportal/NRzOqylcxEstLGf.png"
    title="无法完成操作"
    message="由于你的支付宝账户还未绑定淘宝账户请登请登录www.taobao.com"
  />
</div>);
ReactDOM.render(<ResultExample />, mountNode);

API ( 适用平台：WEB )