OrderCancelPanel 订单取消面板

订单取消原因选择面板，支持提示文案、其它原因输入和勾选确认等业务场景。

演示

9:41

代码示例

<!-- 基本用法 -->
  <re-icon name="chevron-right" size="18px" color="#9ca3af"></re-icon>

<!-- 温馨提示 -->
  <re-icon name="chevron-right" size="18px" color="#9ca3af"></re-icon>

<!-- 其它原因 -->
  <re-icon name="chevron-right" size="18px" color="#9ca3af"></re-icon>

<!-- checkbox 文案场景 -->
  <re-icon name="chevron-right" size="18px" color="#9ca3af"></re-icon>

<!-- 可取消选中原因 -->
  <re-icon name="chevron-right" size="18px" color="#9ca3af"></re-icon>
  <re-order-cancel-panel :visible="showPanel" popupTitle="退款原因" :cancelReason="cancelReason" submitText="确认" @update:visible="onShowPanelChange" @submit="onSubmit" />
  <re-order-cancel-panel :visible="showCancelPanel" popupTitle="退款原因" reasonTitle="请选择取消订单原因" :cancelReason="cancelReason" :warmTips="warmTips" tipsTitle="温馨提示" submitText="确认" @update:visible="onShowCancelPanelChange" @submit="onSubmit" />
  <re-order-cancel-panel :visible="showOtherCancelPanel" popupTitle="退款原因" :cancelReason="otherReasonList" submitText="确认" otherPlaceholder="请输入内容" :maxRemarkLength="100" @update:visible="onShowOtherCancelPanelChange" @submit="onSubmit" />
  <re-order-cancel-panel :visible="showCheckboxCancelPanel" popupTitle="退款原因" :cancelReason="cancelReason" submitText="确认" switchLabel="checkbox框选择在前面" @update:visible="onShowCheckboxCancelPanelChange" @submit="onSubmit" />
  <re-order-cancel-panel :visible="showCanCancelPanel" popupTitle="退款原因" :cancelReason="cancelReason" :canCancelReason="true" submitText="确认" @update:visible="onShowCanCancelPanelChange" @submit="onSubmit" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-order-cancel-panel />。

API

OrderCancelPanel Props

名称	类型	默认值	描述	必传
visible	`boolean`	false	是否显示面板	N
popupTitle	`string`	"取消订单"	弹窗标题	N
reasonTitle	`string`	"请选择取消原因"	原因标题	N
cancelReason	`Array<CancelReasonItem>`		取消原因列表	N
defaultSelectedKey	`string`	""	默认选中原因 key	N
otherPlaceholder	`string`	"请填写补充说明"	其他原因占位文案	N
maxRemarkLength	`number`	80	其他原因字数限制	N
closeOnClickOverlay	`boolean`	true	点击遮罩是否关闭	N
warmTips	`Array<string>`		温馨提示列表	N
tipsTitle	`string`	"温馨提示"	提示标题	N
submitText	`string`	"确认取消"	提交按钮文案	N
switchLabel	`string`	"同时通知仓配取消拣货"	开关文案	N

OrderCancelPanel Events

名称	参数	描述
close	-	关闭时触发
submit	payload: string	提交时触发
reason-change	key: string	-
update:visible	value: boolean	显隐变化时触发

OrderCancelPanel Slots

名称	描述
-	-

OrderRemark 订单备注

用于提交订单前补充备注信息，支持快捷标签、自定义文案和事件回调。

内容锚点

演示
代码示例
引入
API