Result 结果页

规则

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

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

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

代码演示

基本

/* eslint global-require: 0 */
import { Result, Icon, WhiteSpace } from 'antd-mobile';
const ResultExample = () => (<div className="result-example">
  <div className="sub-title">支付成功</div>
  <Result
    img={<Icon type={require('./alipay.svg')} className="icon" />}
    title="支付成功"
    message={<div>998.00元 <del>1098元</del></div>}
  />
  <WhiteSpace />
  <div className="sub-title">验证成功</div>
  <Result
    img={<Icon type="check-circle" className="icon" style={{ fill: '#1F90E6' }} />}
    title="验证成功"
    message="所提交内容已成功完成验证"
  />
  <WhiteSpace />
  <div className="sub-title">支付失败</div>
  <Result
    img={<Icon type="cross-circle-o" className="icon" style={{ fill: '#F13642' }} />}
    title="支付失败"
    message="所选银行卡余额不足"
  />
  <WhiteSpace />
  <div className="sub-title">等待处理</div>
  <Result
    img={<Icon type={require('./waiting.svg')} className="icon" />}
    title="等待处理"
    message="已提交申请，等待银行处理"
  />
  <WhiteSpace />
  <div className="sub-title">操作失败</div>
  <Result
    img={<Icon type={require('./notice.svg')} className="icon" />}
    title="无法完成操作"
    message="由于你的支付宝账户还未绑定淘宝账户请登请登录www.taobao.com"
  />
</div>);
ReactDOM.render(<ResultExample />, mountNode);

.sub-title {
  margin-left: 0.3rem;
}
.result-example .icon {
  width: 1.2rem;
  height: 1.2rem;
}
.sub-title {
  color: #888;
  font-size: .28rem;
  padding: 30px 0 18px 0;
}

API