BizAfterSale 售后退款单

电商售后状态机组件：仅退款 / 退货退款双类型 —— 买家申请（类型 / 订单 / 数量 / 金额 / 原因候选 / 问题说明 / 凭证图复用 BizUploadImage）→ 商家审核（同意 / 驳回原因必填 ≥5 字）→ 退货寄回单号回填 → 商家收货 → 退款完成；买家可撤销。退货物流轨迹（logistics 数据源内嵌 BizExpressTrack，签收自动联动确认收货）。状态机驱动的迷你时间线 + 买卖双视角操作位（perspective）；可退上限按运费口径校验（shipping-fee-refundable）。适用于电商 / 本地生活售后后台、客服退款处理、供应商退换货、服务类订单违约退款等场景。

商家处理台

售后退款

视角：商家处理台

商

无线降噪耳机 Pro ×1订单 SO20261020001 · 李星 · 2026-10-26 09:12

仅退款质量问题 · 左耳偶发电流声

退款金额 ¥887.00实付 ¥899.00（含运费 ¥12.00） · 可退上限 ¥887.00

提交申请商家审核退款成功

待审核

商

男士休闲衬衫（白 L 码） ×2订单 SO20261018007 · 王芳 · 2026-10-25 15:40

退货退款尺码不合

退款金额 ¥316.00实付 ¥316.00 · 可退上限 ¥316.00

退货物流：SF1324567890000

提交申请商家审核买家寄回商家收货退款成功

待商家收货

商

车载充电器 65W ×1订单 SO20261012003 · 陈晨 · 2026-10-23 11:20

仅退款发错货

退款金额 ¥123.00实付 ¥129.00（含运费 ¥6.00） · 可退上限 ¥123.00

提交申请商家审核退款成功

待退款

商

儿童积木桌 ×1订单 SO20260930009 · 刘洋 · 2026-10-18 20:05

退货退款包装破损

退款金额 ¥479.00实付 ¥499.00（含运费 ¥20.00） · 可退上限 ¥479.00

提交申请商家审核买家寄回商家收货退款成功

退款成功

多状态售后单：待审核可同意 / 驳回，待收货可确认，待退款可标记完成；时间线随状态推进。

<script setup lang="ts">
/** 商家处理台：多状态售后单一览，待审核可同意/驳回、待收货可确认、待退款可标记完成 */
import { ref } from 'vue'
import { BizAfterSale } from 'vue3-ep-biz-lib'
import type { BizAfterSaleRecord } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number, hm = '10:00') => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hm}`
}

const records = ref<BizAfterSaleRecord[]>([
  { id: 'a1', type: 'refund', orderNo: 'SO20261020001', goodsName: '无线降噪耳机 Pro', quantity: 1, paidAmount: 899, shippingFee: 12, refundAmount: 887, reason: '质量问题', description: '左耳偶发电流声', buyer: '李星', createdAt: dayAt(0, '09:12'), status: 'pending' },
  { id: 'a2', type: 'return', orderNo: 'SO20261018007', goodsName: '男士休闲衬衫（白 L 码）', quantity: 2, paidAmount: 316, shippingFee: 0, refundAmount: 316, reason: '尺码不合', buyer: '王芳', createdAt: dayAt(-1, '15:40'), status: 'shipping', logisticsNo: 'SF1324567890000' },
  { id: 'a3', type: 'refund', orderNo: 'SO20261012003', goodsName: '车载充电器 65W', quantity: 1, paidAmount: 129, shippingFee: 6, refundAmount: 123, reason: '发错货', buyer: '陈晨', createdAt: dayAt(-3, '11:20'), status: 'received' },
  { id: 'a4', type: 'return', orderNo: 'SO20260930009', goodsName: '儿童积木桌', quantity: 1, paidAmount: 499, shippingFee: 20, refundAmount: 479, reason: '包装破损', buyer: '刘洋', createdAt: dayAt(-8, '20:05'), status: 'refunded' },
])
</script>

<template>
  <div style="max-width: 980px">
    <BizAfterSale perspective="seller" :records="records" />
  </div>
</template>

显示代码

买家视角

售后退款

视角：买家进度

商

空气炸锅 5L ×1订单 SO20261019005 · 当前买家 · 2026-10-26 08:30

退货退款七天无理由

退款金额 ¥384.00实付 ¥399.00（含运费 ¥15.00） · 可退上限 ¥384.00

提交申请商家审核买家寄回商家收货退款成功

待买家寄回

perspective: 'buyer'：申请售后弹窗 + 撤销申请 / 填写退货单号操作位。

<script setup lang="ts">
/** 买家视角：申请售后（类型/订单/金额/原因/说明）→ 撤销与退货单号回填 */
import { ref } from 'vue'
import { BizAfterSale } from 'vue3-ep-biz-lib'
import type { BizAfterSaleRecord } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number, hm = '10:00') => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hm}`
}

const records = ref<BizAfterSaleRecord[]>([
  { id: 'b1', type: 'return', orderNo: 'SO20261019005', goodsName: '空气炸锅 5L', quantity: 1, paidAmount: 399, shippingFee: 15, refundAmount: 384, reason: '七天无理由', buyer: '当前买家', createdAt: dayAt(0, '08:30'), status: 'approved' },
])
</script>

<template>
  <div style="max-width: 980px">
    <BizAfterSale perspective="buyer" :records="records" />
  </div>
</template>

显示代码

仅退款链路

售后退款

视角：商家处理台

商

保温杯 500ml ×1订单 SO-REFUND-1 · 赵磊 · 2026-10-26 09:00

仅退款商品与描述不符

退款金额 ¥84.00实付 ¥89.00（含运费 ¥5.00） · 可退上限 ¥84.00

提交申请商家审核退款成功

待审核

refund 类型三步链：提交申请 → 商家审核 → 退款成功（同意后直达「待退款」）。

<script setup lang="ts">
/** 仅退款全链路：待审核 → 同意 → 待退款 → 标记已退款，迷你时间线同步推进 */
import { ref } from 'vue'
import { BizAfterSale } from 'vue3-ep-biz-lib'
import type { BizAfterSaleRecord } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number, hm = '10:00') => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hm}`
}

const records = ref<BizAfterSaleRecord[]>([
  { id: 'f1', type: 'refund', orderNo: 'SO-REFUND-1', goodsName: '保温杯 500ml', quantity: 1, paidAmount: 89, shippingFee: 5, refundAmount: 84, reason: '商品与描述不符', buyer: '赵磊', createdAt: dayAt(0, '09:00'), status: 'pending' },
])
</script>

<template>
  <div style="max-width: 860px">
    <BizAfterSale perspective="seller" :records="records" />
  </div>
</template>

显示代码

退货退款链路（双视角同单）

退货退款 · 商家处理台

视角：商家处理台

商

智能手环 8 ×1订单 SO-RETURN-1 · 当前买家 · 2026-10-26 09:00

退货退款七天无理由

退款金额 ¥261.00实付 ¥269.00（含运费 ¥8.00） · 可退上限 ¥261.00

提交申请商家审核买家寄回商家收货退款成功

待审核

退货退款 · 买家进度（双端同单演示）

视角：买家进度

商

智能手环 8 ×1订单 SO-RETURN-1 · 当前买家 · 2026-10-26 09:00

退货退款七天无理由

退款金额 ¥261.00实付 ¥269.00（含运费 ¥8.00） · 可退上限 ¥261.00

提交申请商家审核买家寄回商家收货退款成功

待审核

双视角各自操作：商家「同意」后买家侧出现「填写退货单号」，回填后商家侧「确认收货」→「标记已退款」闭环。

return 类型五步链：双视角各自操作——商家同意 → 买家填单号 → 商家收货 → 标记已退款闭环。

<script setup lang="ts">
/** 退货退款全链路：待审核 → 同意（待买家寄回）→ 买家填单号（待商家收货）→ 确认收货 → 标记已退款 */
import { ref } from 'vue'
import { BizAfterSale } from 'vue3-ep-biz-lib'
import type { BizAfterSaleRecord } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number, hm = '10:00') => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hm}`
}

const mk = (): BizAfterSaleRecord => ({
  id: 't1',
  type: 'return',
  orderNo: 'SO-RETURN-1',
  goodsName: '智能手环 8',
  quantity: 1,
  paidAmount: 269,
  shippingFee: 8,
  refundAmount: 261,
  reason: '七天无理由',
  buyer: '当前买家',
  createdAt: dayAt(0, '09:00'),
  status: 'pending',
})

const sellerView = ref<BizAfterSaleRecord[]>([mk()])
const buyerView = ref<BizAfterSaleRecord[]>([mk()])
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 24px; max-width: 980px">
    <BizAfterSale title="退货退款 · 商家处理台" perspective="seller" :records="sellerView" />
    <BizAfterSale title="退货退款 · 买家进度（双端同单演示）" perspective="buyer" :records="buyerView" />
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      双视角各自操作：商家「同意」后买家侧出现「填写退货单号」，回填后商家侧「确认收货」→「标记已退款」闭环。
    </p>
  </div>
</template>

显示代码

退货物流轨迹

售后退款

视角：商家处理台

商

手机壳（仅退款不退货） ×1订单 SO-20261025-014 · 王芳 · 2026-10-25 15:40

仅退款少件/漏发

退款金额 ¥39.00实付 ¥39.00 · 可退上限 ¥39.00

提交申请商家审核退款成功

待审核

商

降噪耳机 Pro ×1订单 SO-20261024-001 · 李云 · 2026-10-24 09:12

退货退款七天无理由

退款金额 ¥887.00实付 ¥899.00（含运费 ¥12.00） · 可退上限 ¥887.00

退货物流：SF1358246790001

顺顺丰速运SF

运单号SF1358246790001

2026-10-25 18:02

快件已从杭州滨江集散中心发出

2026-10-25 09:44

快件到达杭州滨江集散中心

2026-10-24 20:15

商家已揽收，运单号 SF1358246790001

提交申请商家审核买家寄回商家收货退款成功

待商家收货

logistics 数据源注入后退货单内嵌物流时间线（待商家收货态自动展开）；仅退款单不渲染物流区。

<script setup lang="ts">
/** 退货物流基础：退货退款单（待商家收货）自动展开轨迹；仅退款单不渲染物流区 */
import { ref } from 'vue'
import { BizAfterSale } from 'vue3-ep-biz-lib'
import type { BizAfterSaleRecord } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number, hm = '10:00') => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hm}`
}

const records = ref<BizAfterSaleRecord[]>([
  {
    id: 'lg1',
    type: 'return',
    orderNo: 'SO-20261024-001',
    goodsName: '降噪耳机 Pro',
    quantity: 1,
    paidAmount: 899,
    shippingFee: 12,
    refundAmount: 887,
    reason: '七天无理由',
    buyer: '李云',
    createdAt: dayAt(-2, '09:12'),
    status: 'shipping',
    logisticsNo: 'SF1358246790001',
  },
  {
    id: 'lg2',
    type: 'refund',
    orderNo: 'SO-20261025-014',
    goodsName: '手机壳（仅退款不退货）',
    quantity: 1,
    paidAmount: 39,
    refundAmount: 39,
    reason: '少件/漏发',
    buyer: '王芳',
    createdAt: dayAt(-1, '15:40'),
    status: 'pending',
  },
])

const logistics = (r: BizAfterSaleRecord) =>
  r.type === 'return'
    ? {
        company: { name: '顺丰速运', code: 'SF', icon: '顺' },
        trackingNo: r.logisticsNo,
        records: [
          { time: dayAt(-1, '18:02'), context: '快件已从杭州滨江集散中心发出', location: '杭州市' },
          { time: dayAt(-1, '09:44'), context: '快件到达杭州滨江集散中心', location: '杭州市' },
          { time: dayAt(-2, '20:15'), context: '商家已揽收，运单号 SF1358246790001', location: '苏州市' },
        ],
      }
    : undefined
</script>

<template>
  <BizAfterSale :records="records" :logistics="logistics" />
</template>

显示代码

签收自动确认收货

售后退款

视角：商家处理台

商

儿童安全座椅 ×1订单 SO-20261020-077 · 陈晓 · 2026-10-22 11:20

退货退款商品与描述不符

退款金额 ¥1255.00实付 ¥1280.00（含运费 ¥25.00） · 可退上限 ¥1255.00

退货物流：YT7789456120031

圆圆通速递

运单号YT7789456120031

2026-10-26 08:10

快件正在派送中，请保持电话畅通

2026-10-25 21:47

快件已到达南京玄武网点

提交申请商家审核买家寄回商家收货退款成功

待商家收货

物流更新为「已签收」后，shipping 状态自动推进为待退款（auto-receive 默认开启）。

<script setup lang="ts">
/** 签收自动联动：物流更新为「已签收」后，待商家收货自动推进为待退款（无需人工点击） */
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizAfterSale } from 'vue3-ep-biz-lib'
import type { BizAfterSaleRecord } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number, hm = '10:00') => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hm}`
}

const signed = ref(false)

const records = ref<BizAfterSaleRecord[]>([
  {
    id: 'lg-auto',
    type: 'return',
    orderNo: 'SO-20261020-077',
    goodsName: '儿童安全座椅',
    quantity: 1,
    paidAmount: 1280,
    shippingFee: 25,
    refundAmount: 1255,
    reason: '商品与描述不符',
    buyer: '陈晓',
    createdAt: dayAt(-4, '11:20'),
    status: 'shipping',
    logisticsNo: 'YT7789456120031',
  },
])

const logistics = (r: BizAfterSaleRecord) => ({
  company: { name: '圆通速递', icon: '圆' },
  trackingNo: r.logisticsNo,
  signed: signed.value,
  records: [
    ...(signed.value ? [{ time: dayAt(0, '09:36'), context: '已签收，感谢使用圆通速运', location: '南京市' }] : []),
    { time: dayAt(0, '08:10'), context: '快件正在派送中，请保持电话畅通', location: '南京市' },
    { time: dayAt(-1, '21:47'), context: '快件已到达南京玄武网点', location: '南京市' },
  ],
})

const markSigned = (): void => {
  signed.value = true
  ElMessage.info('已模拟快递平台推送「已签收」事件')
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 10px">
    <ElButton size="small" type="primary" plain style="align-self: flex-start" @click="markSigned">
      模拟物流签收（signed → true）
    </ElButton>
    <BizAfterSale :records="records" :logistics="logistics" />
  </div>
</template>

显示代码

关闭自动联动

售后退款

视角：商家处理台

商

空气炸锅 5L ×1订单 SO-20261022-045 · 赵磊 · 2026-10-23 10:05

退货退款质量问题

退款金额 ¥389.00实付 ¥399.00（含运费 ¥10.00） · 可退上限 ¥389.00

退货物流：ZT0098765432108

中中通快递

运单号ZT0098765432108

2026-10-26 07:52

派送中，快递员电话 138****0021

提交申请商家审核买家寄回商家收货退款成功

待商家收货

auto-receive=false 时签收只转轨迹终态，收货仍由商家人工点击确认。

<script setup lang="ts">
/** 关闭自动联动：auto-receive=false 时签收只转轨迹终态，收货仍由商家人工确认 */
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import { BizAfterSale } from 'vue3-ep-biz-lib'
import type { BizAfterSaleRecord } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number, hm = '10:00') => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hm}`
}

const signed = ref(false)

const records = ref<BizAfterSaleRecord[]>([
  {
    id: 'lg-manual',
    type: 'return',
    orderNo: 'SO-20261022-045',
    goodsName: '空气炸锅 5L',
    quantity: 1,
    paidAmount: 399,
    shippingFee: 10,
    refundAmount: 389,
    reason: '质量问题',
    buyer: '赵磊',
    createdAt: dayAt(-3, '10:05'),
    status: 'shipping',
    logisticsNo: 'ZT0098765432108',
  },
])

const logistics = (r: BizAfterSaleRecord) => ({
  company: { name: '中通快递', icon: '中' },
  trackingNo: r.logisticsNo,
  signed: signed.value,
  records: [
    ...(signed.value ? [{ time: dayAt(0, '10:18'), context: '已签收，签收人：前台代收', location: '武汉市' }] : []),
    { time: dayAt(0, '07:52'), context: '派送中，快递员电话 138****0021', location: '武汉市' },
  ],
})
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 10px">
    <ElButton size="small" plain style="align-self: flex-start" @click="signed = true">
      模拟物流签收（自动联动已关闭）
    </ElButton>
    <BizAfterSale :records="records" :logistics="logistics" :auto-receive="false" />
  </div>
</template>

显示代码

轨迹刷新

售后退款

视角：商家处理台

商

电动牙刷套装 ×2订单 SO-20261023-052 · 孙倩 · 2026-10-24 16:22

退货退款不喜欢/不想要

退款金额 ¥316.00实付 ¥316.00 · 可退上限 ¥316.00

退货物流：JDVD00871234567

京京东物流

运单号JDVD00871234567

2026-10-25 22:08

车辆运输中，距目的地 320 公里

2026-10-24 19:30

揽收完成，货物已入分拣中心

提交申请商家审核买家寄回商家收货退款成功

待商家收货

refreshable 开启轨迹刷新按钮，logistics-refresh 回抛单据，父级更新数据即时重渲染。

<script setup lang="ts">
/** 轨迹刷新：refreshable 开启刷新按钮，logistics-refresh 回抛单据，父级更新数据后轨迹即时重渲染 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizAfterSale } from 'vue3-ep-biz-lib'
import type { BizAfterSaleRecord } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number, hm = '10:00') => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hm}`
}

const extraCount = ref(0)

const records = ref<BizAfterSaleRecord[]>([
  {
    id: 'lg-ref',
    type: 'return',
    orderNo: 'SO-20261023-052',
    goodsName: '电动牙刷套装',
    quantity: 2,
    paidAmount: 316,
    shippingFee: 0,
    refundAmount: 316,
    reason: '不喜欢/不想要',
    buyer: '孙倩',
    createdAt: dayAt(-2, '16:22'),
    status: 'shipping',
    logisticsNo: 'JDVD00871234567',
  },
])

const logistics = (r: BizAfterSaleRecord) => ({
  company: { name: '京东物流', icon: '京' },
  trackingNo: r.logisticsNo,
  refreshable: true,
  records: [
    { time: dayAt(-1, '22:08'), context: '车辆运输中，距目的地 320 公里', location: '济南市' },
    { time: dayAt(-2, '19:30'), context: '揽收完成，货物已入分拣中心', location: '北京市' },
    ...Array.from({ length: extraCount.value }, (_, i) => ({
      time: dayAt(0, `${8 + i}`.padStart(2, '0') + ':05'),
      context: `刷新拉取到的第 ${i + 1} 条新轨迹`,
      location: '郑州市',
    })),
  ],
})

const onRefresh = (): void => {
  extraCount.value += 1
  ElMessage.success('已向快递平台拉取最新轨迹')
}
</script>

<template>
  <BizAfterSale :records="records" :logistics="logistics" @logistics-refresh="onRefresh" />
</template>

显示代码

轨迹方向

售后退款

视角：商家处理台

商

蓝牙音箱 Mini ×1订单 SO-20261021-033 · 周舟 · 2026-10-23 09:45

退货退款包装/商品破损

退款金额 ¥193.00实付 ¥199.00（含运费 ¥6.00） · 可退上限 ¥193.00

退货物流：EMS9988776655443

邮邮政 EMS

运单号EMS9988776655443

2026-10-23 17:10

商家已交寄

2026-10-24 23:55

离开上海市处理中心

2026-10-25 11:26

到达成都处理中心

2026-10-26 08:40

正在派送途中

提交申请商家审核买家寄回商家收货退款成功

待商家收货

direction: 'asc' 最早在前，从寄出到派送顺读退货全程。

<script setup lang="ts">
/** 轨迹方向：direction=asc 最早在前，从寄出到派送顺读退货全程 */
import { ref } from 'vue'
import { BizAfterSale } from 'vue3-ep-biz-lib'
import type { BizAfterSaleRecord } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number, hm = '10:00') => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hm}`
}

const records = ref<BizAfterSaleRecord[]>([
  {
    id: 'lg-asc',
    type: 'return',
    orderNo: 'SO-20261021-033',
    goodsName: '蓝牙音箱 Mini',
    quantity: 1,
    paidAmount: 199,
    shippingFee: 6,
    refundAmount: 193,
    reason: '包装/商品破损',
    buyer: '周舟',
    createdAt: dayAt(-3, '09:45'),
    status: 'shipping',
    logisticsNo: 'EMS9988776655443',
  },
])

const logistics = (r: BizAfterSaleRecord) => ({
  company: { name: '邮政 EMS', icon: '邮' },
  trackingNo: r.logisticsNo,
  direction: 'asc' as const,
  records: [
    { time: dayAt(0, '08:40'), context: '正在派送途中', location: '成都市' },
    { time: dayAt(-1, '11:26'), context: '到达成都处理中心', location: '成都市' },
    { time: dayAt(-2, '23:55'), context: '离开上海市处理中心', location: '上海市' },
    { time: dayAt(-3, '17:10'), context: '商家已交寄', location: '上海市' },
  ],
})
</script>

<template>
  <BizAfterSale :records="records" :logistics="logistics" />
</template>

显示代码

轨迹状态兜底

loading 骨架error 失败重试empty 暂无轨迹

售后退款

视角：商家处理台

商

显示器支架 ×1订单 SO-20261024-061 · 吴娜 · 2026-10-25 14:30

退货退款发错货

退款金额 ¥251.00实付 ¥259.00（含运费 ¥8.00） · 可退上限 ¥251.00

退货物流：YD5566778899001

韵韵达快递

运单号YD5566778899001

提交申请商家审核买家寄回商家收货退款成功

待商家收货

loading 骨架 / error 失败重试 / empty 暂无轨迹三种非正常态切换。

<script setup lang="ts">
/** 轨迹状态兜底：loading 骨架 / error 失败重试 / empty 暂无轨迹，三种非正常态切换 */
import { ref } from 'vue'
import { ElButton, ElRadio, ElRadioGroup } from 'element-plus'
import { BizAfterSale } from 'vue3-ep-biz-lib'
import type { BizAfterSaleRecord } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number, hm = '10:00') => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hm}`
}

const trackStatus = ref<'loading' | 'error' | 'empty'>('loading')

const records = ref<BizAfterSaleRecord[]>([
  {
    id: 'lg-st',
    type: 'return',
    orderNo: 'SO-20261024-061',
    goodsName: '显示器支架',
    quantity: 1,
    paidAmount: 259,
    shippingFee: 8,
    refundAmount: 251,
    reason: '发错货',
    buyer: '吴娜',
    createdAt: dayAt(-1, '14:30'),
    status: 'shipping',
    logisticsNo: 'YD5566778899001',
  },
])

const logistics = (r: BizAfterSaleRecord) => ({
  company: { name: '韵达快递', icon: '韵' },
  trackingNo: r.logisticsNo,
  status: trackStatus.value,
  records: [],
})
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 10px">
    <ElRadioGroup v-model="trackStatus" size="small">
      <ElRadio value="loading">loading 骨架</ElRadio>
      <ElRadio value="error">error 失败重试</ElRadio>
      <ElRadio value="empty">empty 暂无轨迹</ElRadio>
    </ElRadioGroup>
    <ElButton v-if="trackStatus === 'error'" size="small" plain style="align-self: flex-start" @click="trackStatus = 'loading'">
      点轨迹区「点击重试」回到 loading
    </ElButton>
    <BizAfterSale :records="records" :logistics="logistics" :auto-receive="false" />
  </div>
</template>

显示代码

驳回流程

售后退款

视角：商家处理台

商

蓝牙音箱 mini ×1订单 SO-REJECT-1 · 孙悦 · 2026-10-25 16:00

仅退款质量问题

退款金额 ¥159.00实付 ¥159.00 · 可退上限 ¥159.00

提交申请商家审核退款成功

待审核

驳回原因必填（≥5 字），驳回后时间线定格灰化并展示红底驳回原因条。

<script setup lang="ts">
/** 驳回流程：原因必填（≥5 字），驳回后时间线定格灰化并展示驳回原因条 */
import { ref } from 'vue'
import { BizAfterSale } from 'vue3-ep-biz-lib'
import type { BizAfterSaleRecord } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number, hm = '10:00') => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hm}`
}

const records = ref<BizAfterSaleRecord[]>([
  { id: 'r1', type: 'refund', orderNo: 'SO-REJECT-1', goodsName: '蓝牙音箱 mini', quantity: 1, paidAmount: 159, shippingFee: 0, refundAmount: 159, reason: '质量问题', buyer: '孙悦', createdAt: dayAt(-1, '16:00'), status: 'pending' },
])
</script>

<template>
  <div style="max-width: 860px">
    <BizAfterSale perspective="seller" :records="records" />
  </div>
</template>

显示代码

运费口径

运费不退

运费可退

售后退款

视角：商家处理台

商

台灯护眼版（运费 ¥15） ×1订单 SO-FEE-1 · 周奇 · 2026-10-26 10:30

仅退款质量问题

退款金额 ¥200.00实付 ¥215.00（含运费 ¥15.00） · 可退上限 ¥200.00

提交申请商家审核退款成功

待审核

shipping-fee-refundable 开关切换可退上限（实付 − 运费 vs 实付全额），卡片与申请表单同步提示。

<script setup lang="ts">
/** 运费口径：shipping-fee-refundable 切换可退上限（实付 − 运费 vs 实付全额），申请表单同步提示 */
import { ref } from 'vue'
import { BizAfterSale } from 'vue3-ep-biz-lib'
import type { BizAfterSaleRecord } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number, hm = '10:00') => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hm}`
}

const refundable = ref(false)

const records = ref<BizAfterSaleRecord[]>([
  { id: 's1', type: 'refund', orderNo: 'SO-FEE-1', goodsName: '台灯护眼版（运费 ¥15）', quantity: 1, paidAmount: 215, shippingFee: 15, refundAmount: 200, reason: '质量问题', buyer: '周奇', createdAt: dayAt(0, '10:30'), status: 'pending' },
])
</script>

<template>
  <div style="max-width: 860px">
    <el-switch v-model="refundable" active-text="运费可退" inactive-text="运费不退" style="margin-bottom: 12px" />
    <BizAfterSale perspective="seller" :records="records" :shipping-fee-refundable="refundable" />
  </div>
</template>

显示代码

金额上限校验

售后退款

视角：买家进度

暂无售后单

打开申请弹窗：实付 200 / 运费 12 时，退款金额输入 200 会被拦截（上限 188.00 = 实付 − 运费）。

申请表单退款金额超上限被拦截；实付变化时上限联动收窄。

<script setup lang="ts">
/** 金额上限校验：申请表单退款金额超过可退上限被拦截（运费口径联动提示） */
import { BizAfterSale } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 860px">
    <BizAfterSale perspective="buyer" :records="[]" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      打开申请弹窗：实付 200 / 运费 12 时，退款金额输入 200 会被拦截（上限 188.00 = 实付 − 运费）。
    </p>
  </div>
</template>

显示代码

远程模式

售后退款

视角：商家处理台

商

云端商品 A ×1订单 SO-REMOTE-1 · 李星 · 2026-10-26 09:00

仅退款质量问题

退款金额 ¥290.00实付 ¥300.00（含运费 ¥10.00） · 可退上限 ¥290.00

提交申请商家审核退款成功

待审核

submit-request 提交申请、action-request 商家动作（服务端可二次拒绝，如超限额退款）。

<script setup lang="ts">
/** 远程模式：submitRequest 提交申请 / actionRequest 商家动作，事件流水回显（服务端驳回二次校验演示） */
import { ref } from 'vue'
import { BizAfterSale } from 'vue3-ep-biz-lib'
import type { BizAfterSaleAction, BizAfterSalePayload, BizAfterSaleRecord } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number, hm = '10:00') => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hm}`
}

const records = ref<BizAfterSaleRecord[]>([
  { id: 'rm1', type: 'refund', orderNo: 'SO-REMOTE-1', goodsName: '云端商品 A', quantity: 1, paidAmount: 300, shippingFee: 10, refundAmount: 290, reason: '质量问题', buyer: '李星', createdAt: dayAt(0, '09:00'), status: 'pending' },
])

const log = ref<string[]>([])

const submitRequest = (p: BizAfterSalePayload) =>
  new Promise<void>((resolve) => setTimeout(() => { log.value.push(`apply ${p.orderNo} ¥${p.refundAmount}`); resolve() }, 500))

const actionRequest = (r: BizAfterSaleRecord, action: BizAfterSaleAction) =>
  new Promise<void>((resolve, reject) => {
    setTimeout(() => {
      if (action === 'approve' && r.refundAmount > 500) {
        reject(new Error('over limit'))
        return
      }
      log.value.push(`${action} ${r.orderNo}`)
      resolve()
    }, 500)
  })
</script>

<template>
  <div style="max-width: 900px">
    <BizAfterSale
      perspective="seller"
      :records="records"
      :submit-request="submitRequest"
      :action-request="actionRequest"
      @action="(r, a) => log.push(`event ${a} @${r.orderNo}`)"
    />
    <p v-if="log.length" style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      流水：{{ log.join(' ｜ ') }}
    </p>
  </div>
</template>

显示代码

凭证图上传

售后退款

视角：买家进度

商

已带凭证的售后单 ×1订单 SO-PROOF-1 · 当前买家 · 2026-10-26 11:00

仅退款包装/商品破损1 张凭证

退款金额 ¥199.00实付 ¥199.00 · 可退上限 ¥199.00

提交申请商家审核退款成功

待审核

upload-request 注入后申请表单出现凭证上传区（复用 BizUploadImage）；已传凭证的单据显示张数。

<script setup lang="ts">
/** 凭证图上传：uploadRequest 注入后申请表单出现上传区（复用 BizUploadImage，本地 dataURL 演示） */
import { ref } from 'vue'
import { BizAfterSale } from 'vue3-ep-biz-lib'
import type { BizAfterSaleRecord } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number, hm = '10:00') => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hm}`
}

const records = ref<BizAfterSaleRecord[]>([
  { id: 'u1', type: 'refund', orderNo: 'SO-PROOF-1', goodsName: '已带凭证的售后单', quantity: 1, paidAmount: 199, shippingFee: 0, refundAmount: 199, reason: '包装/商品破损', buyer: '当前买家', createdAt: dayAt(0, '11:00'), status: 'pending', proofImages: ['data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCI+PHJlY3Qgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBmaWxsPSIjZjVhNmZmIi8+PHRleHQgeD0iNDAiIHk9IjQ4IiBmb250LXNpemU9IjEyIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjZmZmIj7np6/liLY8L3RleHQ+PC9zdmc+'] },
])

const uploadRequest = (file: File) =>
  new Promise<string>((resolve) => {
    const reader = new FileReader()
    reader.onload = () => resolve(String(reader.result))
    reader.readAsDataURL(file)
  })
</script>

<template>
  <div style="max-width: 860px">
    <BizAfterSale perspective="buyer" :records="records" :upload-request="uploadRequest" />
  </div>
</template>

显示代码

插槽

售后退款

视角：商家处理台

商

插槽演示商品 ×1订单 SO-SLOT-1 · 吴彤 · 2026-10-26 10:00

仅退款质量问题

退款金额 ¥99.00实付 ¥99.00 · 可退上限 ¥99.00

提交申请商家审核退款成功

待审核

客服 IM 联系买家

header-extra 商家侧批量入口、record-extra 每单追加客服 IM 联系。

<script setup lang="ts">
/** 插槽：header-extra 商家侧批量入口 + record-extra 每单追加客服备注与 IM 联系按钮 */
import { ref } from 'vue'
import { BizAfterSale } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'
import type { BizAfterSaleRecord } from 'vue3-ep-biz-lib'

const pad = (n: number) => String(n).padStart(2, '0')
const dayAt = (offset: number, hm = '10:00') => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hm}`
}

const records = ref<BizAfterSaleRecord[]>([
  { id: 'x1', type: 'refund', orderNo: 'SO-SLOT-1', goodsName: '插槽演示商品', quantity: 1, paidAmount: 99, refundAmount: 99, reason: '质量问题', buyer: '吴彤', createdAt: dayAt(0, '10:00'), status: 'pending' },
])
</script>

<template>
  <div style="max-width: 860px">
    <BizAfterSale perspective="seller" :records="records">
      <template #header-extra>
        <el-button size="small" plain @click="ElMessage.success('已导出待审核清单')">批量导出</el-button>
      </template>
      <template #record-extra="{ record }">
        <a style="font-size: 12px; color: var(--el-color-primary); cursor: pointer" @click="ElMessage.success(`已发起与 ${record.buyer} 的会话`)">
          客服 IM 联系买家
        </a>
      </template>
    </BizAfterSale>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
title	string	'售后退款'	面板标题
records	BizAfterSaleRecord[]	[]	售后单列表：{ id, type, orderNo, goodsName, goodsImage?, quantity, paidAmount, shippingFee?, refundAmount, reason, description?, proofImages?, logisticsNo?, buyer, createdAt, status, rejectReason? }
perspective	'buyer' | 'seller'	'seller'	视角：buyer 可申请 / 撤销 / 填单号；seller 可审核 / 收货 / 退款
reasons	string[]	7 项常用	申请原因候选
shipping-fee-refundable	boolean	false	运费可退（可退上限 = 实付；否则 = 实付 − 运费）
upload-request	(file: File) => Promise<string>	—	凭证图上传实现（不传则隐藏上传区）
upload-limit	number	3	凭证图数量上限
submit-request	(payload) => Promise<void>	—	新建售后提交（远程模式）
action-request	(record, action, extra?) => Promise<void>	—	商家 / 买家动作（远程模式）
logistics	(record) => BizAfterSaleLogistics | undefined	—	退货物流轨迹数据源（仅退货退款单渲染；返回 undefined 则不展示）
auto-receive	boolean	true	物流签收后自动确认收货（shipping → received）

Events

事件名	参数	说明
apply	(payload: BizAfterSalePayload)	售后申请提交（先于 submitRequest 外抛）
action	(record, action, extra?)	动作外抛：approve / reject / receive / refund-done / cancel / ship
logistics-refresh	(record: BizAfterSaleRecord)	轨迹刷新按钮点击（父级拉取最新数据后回填重渲染）

Slots

插槽名	说明
header-extra	{ records } 商家侧标题区追加（批量入口）
record-extra	{ record } 每单操作区追加（客服 IM 等）

Expose

属性/方法	说明
openApply	() => void 打开新建售后弹窗（买家视角程序化入口）
refresh	() => Promise<void> 刷新（预留远程模式扩展位）

口径说明

• 状态机：pending → rejected / canceled（终态）；pending → approved（仅 return）→ shipping → received → refunded；refund 类型同意后直达 received（待退款）。
• 可退上限：shipping-fee-refundable ? paidAmount : paidAmount − shippingFee，按分取整；申请表单与卡片同口径展示。
• 时间线：return 五步（提交 / 审核 / 寄回 / 收货 / 退款成功）、refund 三步；rejected / canceled 定格灰化。
• 动作确认：同意 / 收货 / 退款 / 撤销均二次确认；驳回与填单号走弹窗输入并校验长度。
• 退货物流：logistics(record) 返回轨迹数据即渲染（仅 return 类型）；轨迹默认折叠，shipping 态自动展开，用户操作过则记忆开合。签收联动 = signed === true 且状态 shipping 时按 auto-receive 自动执行 receive 动作（远程模式同样走 actionRequest）。