Result 结果页

规则

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

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

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

代码演示

支付成功

import { Result } from 'antd-mobile';
const ResultExample = () => (
  <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>}
  />
);
ReactDOM.render(<ResultExample />, mountNode);

验证成功

import { Result } from 'antd-mobile';
const ResultExample = () => (
  <Result
    imgUrl="https://zos.alipayobjects.com/rmsportal/hbTlcWTgMzkBEiU.png"
    title="验证成功"
    message="所提交内容已成功完成验证"
  />
);
ReactDOM.render(<ResultExample />, mountNode);

支付失败

import { Result } from 'antd-mobile';
const ResultExample = () => (
  <Result
    imgUrl="https://zos.alipayobjects.com/rmsportal/LUIUWjyMDWctQTf.png"
    title="支付失败"
    message="所选银行卡余额不足"
    buttonText="点击重试"
    buttonType="primary"
    buttonClick={() => alert('点击了按钮')}
  />
);
ReactDOM.render(<ResultExample />, mountNode);

等待处理

import { Result } from 'antd-mobile';
const ResultExample = () => (
  <Result
    imgUrl="https://zos.alipayobjects.com/rmsportal/gIGluyutXOpJmqx.png"
    title="等待处理"
    message="已提交申请，等待银行处理"
  />
);
ReactDOM.render(<ResultExample />, mountNode);

操作失败

import { Result } from 'antd-mobile';
const ResultExample = () => (
  <Result
    imgUrl="https://zos.alipayobjects.com/rmsportal/NRzOqylcxEstLGf.png"
    title="无法完成操作"
    message="由于你的支付宝账户还未绑定淘宝账户请登请登录www.taobao.com"
  />
);
ReactDOM.render(<ResultExample />, mountNode);

断线

import { Result } from 'antd-mobile';
const ResultExample = () => (
  <Result
    imgUrl="https://os.alipayobjects.com/rmsportal/XMUAssczvVftDHX.png"
    title="网络无法连接"
    brief="请查看网络连接或稍后重试"
    buttonText="刷新"
    buttonType="primary"
    buttonClick={() => alert('点击了按钮')}
  />
);
ReactDOM.render(<ResultExample />, mountNode);

其他自定义样式

import { Result } from 'antd-mobile';
const ResultExample = () => (
  <div className="other">
    <Result
      imgUrl="https://os.alipayobjects.com/rmsportal/MKXqtwNOLFmYmrY.png"
      title="内容为空"
      message="可各业务自定义文案"
      buttonText="重新尝试"
      buttonType="primary"
      buttonClick={() => alert('点击了按钮')}
    />
    <Result
      imgUrl="https://os.alipayobjects.com/rmsportal/hcEPreZxgZWxhVw.png"
      title="警示"
      message="可各业务自定义文案"
      buttonText="重新加载"
      buttonType="primary"
      buttonClick={() => alert('点击了按钮')}
    />
    <Result
      imgUrl="https://os.alipayobjects.com/rmsportal/QGxGZRxaqMRKnjS.png"
      title="网络不给力"
      message="请查看网络连接或稍后重试"
      buttonText="重新尝试"
      buttonType="primary"
      buttonClick={() => alert('点击了按钮')}
    />
  </div>
);
ReactDOM.render(<ResultExample />, mountNode);

.other .am-result {
  border-bottom: 8px solid #e9e9e9;
}

API

Result