Result 结果页

QR

扫二维码查看演示效果

在整张页面中组织插画、图标、文字等内容，向用户反馈操作结果。

规则

• 用作非常重要的操作反馈，如支付成功，无网络状态
• 个性化且优美的插画，可以提升品牌形象。
• 对于错误类型的结果页，页面中需要提供明确的行动点，eg：重新加载。

Code Example

<template>
  <div class="result-example">
    <WingBlank size="lg">
      <h3>基本</h3>
      <h4 style="color: #888;">支付成功</h4>
      <WhiteSpace></WhiteSpace>
    </WingBlank>
    <Result
      title="支付成功"
    >
      <img
        slot="img"
        class="spe um-icon um-icon-md"
        src="https://gw.alipayobjects.com/zos/rmsportal/pdFARIqkrKEGVVEwotFe.svg" />
      <div slot="message">998.00元 <del>1098元</del></div>
    </Result>
    <WhiteSpace></WhiteSpace>
    <WingBlank size="lg">
    <h4 style="color: #888;">验证成功</h4>
    </WingBlank>
    <Result
      message="所提交内容已成功完成验证"
      title="验证成功"
    >
      <Icon slot="img" type="check-circle" class="spe" :style="{ fill: '#1F90E6' }" />
    </Result>
    <WhiteSpace></WhiteSpace>
    <WingBlank size="lg">
      <h4 style="color: #888;">支付失败</h4>
    </WingBlank>
    <Result
      message="所选银行卡余额不足"
      title="支付失败"
    >
      <Icon slot="img" type="cross-circle-o" class="spe" :style="{ fill: '#F13642' }" />
    </Result>
    <WhiteSpace></WhiteSpace>
    <WingBlank size="lg">
      <h4 style="color: #888;">等待处理</h4>
    </WingBlank>
    <Result
      message="已提交申请，等待银行处理"
      title="等待处理"
      imgUrl="https://gw.alipayobjects.com/zos/rmsportal/HWuSTipkjJRfTWekgTUG.svg"></Result>
    <WhiteSpace></WhiteSpace>
    <WingBlank size="lg">
      <h4 style="color: #888;">操作失败</h4>
    </WingBlank>
    <Result
      message="由于你的支付宝账户还未绑定淘宝账户请登请登录www.taobao.com"
      title="无法完成操作"
      imgUrl="https://gw.alipayobjects.com/zos/rmsportal/GIyMDJnuqmcqPLpHCSkj.svg"></Result>
  </div>
</template>

<script>
  import Result from '@/components/result'
  import Icon from '@/components/icon'
  import WhiteSpace from '@/components/white-space'
  import WingBlank from '@/components/wing-blank'

  export default {
    components: {
      Result,
      WhiteSpace,
      WingBlank,
      Icon
    }
  }
</script>
<style>
.result-example .spe {
  width: 60px;
  height: 60px;
}
</style>

props

属性	说明	类型	默认值
img	插图	Slot name="img"	-
imgUrl	插图 url	String	-
iconClass	icon类型	String	-
iconColor	icon颜色	String	-
title	title 文案	String / Slot name="title"	-
message	message 文案	String / Slot name="message"	-
buttonText	按钮文案	String	-
buttonType	请参考 button 的配置	String	-
onButtonClick	按钮回调函数	(e: Object): void

events

事件名	说明	返回值
click	按钮被单击时触发	-

https://ladybirddev.github.io/ui-nuclear-mobile-demo/#/result