XtfResult

组件说明

xtf-result 是提交、审核、异常等流程完成后的结果展示组件，内置八类状态的图标、主题和默认文案。它基于 xtf-empty 承载视觉状态，并提供默认或插槽化操作区。

---

基础用法

1. 成功状态

用于提交成功后的默认反馈。

<template><xtf-result status="success" /></template>
<script>
export default {}
</script>

2. 带操作按钮

为结果提供后续操作入口。

<template>
  <xtf-result
    status="pending"
    primary-text="查看进度"
    secondary-text="返回列表"
    @primary-click="goDetail"
    @secondary-click="goList"
  />
</template>
<script>
export default {
  methods: {
    goDetail() {
      uni.showToast({ title: '查看进度', icon: 'none' })
    },
    goList() {
      console.log('back to list')
    }
  }
}
</script>

3. 自定义操作与补充信息

使用 actions、extra 插槽承载复杂业务内容。

<template>
  <xtf-result status="error" title="支付失败" description="请更换支付方式。">
    <template #actions><xtf-button label="重新支付" @click="retry" /></template>
    <template #extra><xtf-tag theme="warning" variant="soft" label="订单保留 30 分钟" /></template>
  </xtf-result>
</template>
<script>
export default {
  methods: {
    retry() {
      uni.showToast({ title: '发起重试', icon: 'none' })
    }
  }
}
</script>

---

全部属性

属性	类型	默认值	作用描述	适用范围
status	String	'info'	success/error/warning/info/pending/403/404/500 状态	选择内置结果类型
title	String	''	标题，空时使用状态默认或国际化文案	自定义结果标题
description	String	''	说明，空时使用状态默认或国际化文案	补充业务说明
icon	String	''	覆盖状态默认图标	自定义图标
theme	String	''	覆盖状态默认主题	自定义语义色
primaryText	String	''	主操作按钮文字	有主操作时
secondaryText	String	''	次操作按钮文字	有次操作时
extra	String	''	底部辅助文字	简短补充说明
float	Boolean	true	传递给 xtf-empty 的浮动视觉开关	调整空状态视觉
customClass	String	''	根节点类名	局部定制
customStyle	String | Object	''	根节点样式	局部定制

---

事件

事件名称	触发时机	回调参数	参数说明
primary-click	点击默认主按钮时	(event: Event)	按钮点击事件
secondary-click	点击默认次按钮时	(event: Event)	按钮点击事件

事件使用示例

<template>
  <xtf-result
    primary-text="查看"
    secondary-text="返回"
    @primary-click="handlePrimary"
    @secondary-click="handleSecondary"
  />
</template>
<script>
export default {
  methods: {
    handlePrimary(event) {
      console.log('primary', event)
    },
    handleSecondary(event) {
      uni.showToast({ title: '返回列表', icon: 'none' })
    }
  }
}
</script>

---

主题说明

• 状态默认主题依次使用 success、danger、warning、primary 等语义主题。
• 内容文字继承 xtf-empty 与 xtf-button 的主题变量。
• 在 xtf-config-provider 中覆盖语义色变量，或使用 theme 直接覆盖当前结果主题。