BizDetailPage 详情页壳

详情页四段一体壳：页头（返回 / 标题 / 副标题 / 状态标签 / extra 操作位）+ 吸顶锚点导航（BizDetailSection 挂载自动注册，滚动高亮跟随）+ 分区卡片 + 吸底操作条。订单 / 工单 / 客户详情等「页头 + 分区 + 吸底操作」标准布局一个组件拼完，与 BizCrudPage（列表侧）对称。

基础用法

SO20260921000382线上商城-微信支付待付款

基本信息

买家王小明（138****5678）

实付金额待支付 ¥1,299.00

下单时间2026-09-21 14:32:11

商品清单

商品照片打印机 Pro	数量1
单价¥1,399.00	优惠-¥100.00

履约进度

0

下单

09-21 14:32

0

支付

待付款

0

发货

0

签收

订单详情：基本信息 / 商品清单 / 履约进度三分区 + 吸底「取消订单 / 通知付款」。

<script setup lang="ts">
/** 基础用法：订单详情——页头 + 三分区 + 吸底操作条一步到位 */
import { ElButton, ElDescriptions, ElDescriptionsItem, ElMessage, ElSteps, ElStep } from 'element-plus'
import { BizDetailPage, BizDetailSection } from 'vue3-ep-biz-lib'

const onBack = (): void => {
  ElMessage.info('返回列表')
}
const onCancel = (): void => {
  ElMessage.warning('取消订单（二次确认后执行）')
}
</script>

<template>
  <BizDetailPage
    title="SO20260921000382"
    sub-title="线上商城-微信支付"
    status-text="待付款"
    status-type="warning"
    @back="onBack"
  >
    <BizDetailSection title="基本信息">
      <ElDescriptions :column="3" size="small">
        <ElDescriptionsItem label="买家">王小明（138****5678）</ElDescriptionsItem>
        <ElDescriptionsItem label="实付金额">待支付 ¥1,299.00</ElDescriptionsItem>
        <ElDescriptionsItem label="下单时间">2026-09-21 14:32:11</ElDescriptionsItem>
      </ElDescriptions>
    </BizDetailSection>

    <BizDetailSection title="商品清单">
      <ElDescriptions :column="2" size="small">
        <ElDescriptionsItem label="商品">照片打印机 Pro</ElDescriptionsItem>
        <ElDescriptionsItem label="数量">1</ElDescriptionsItem>
        <ElDescriptionsItem label="单价">¥1,399.00</ElDescriptionsItem>
        <ElDescriptionsItem label="优惠">-¥100.00</ElDescriptionsItem>
      </ElDescriptions>
    </BizDetailSection>

    <BizDetailSection title="履约进度">
      <ElSteps :active="2" align-center style="padding: 8px 0">
        <ElStep title="下单" description="09-21 14:32" />
        <ElStep title="支付" description="待付款" />
        <ElStep title="发货" />
        <ElStep title="签收" />
      </ElSteps>
    </BizDetailSection>

    <template #footer>
      <ElButton @click="onCancel">取消订单</ElButton>
      <ElButton type="primary" @click="ElMessage.success('已通知买家付款')">通知付款</ElButton>
    </template>
  </BizDetailPage>
</template>

显示代码

吸顶锚点

工单 GD-20260921-001处理中

问题描述

第 1 段内容：滚动页面观察顶部锚点高亮跟随。

第 2 段内容：滚动页面观察顶部锚点高亮跟随。

第 3 段内容：滚动页面观察顶部锚点高亮跟随。

第 4 段内容：滚动页面观察顶部锚点高亮跟随。

第 5 段内容：滚动页面观察顶部锚点高亮跟随。

第 6 段内容：滚动页面观察顶部锚点高亮跟随。

处理记录

第 1 段内容：滚动页面观察顶部锚点高亮跟随。

第 2 段内容：滚动页面观察顶部锚点高亮跟随。

第 3 段内容：滚动页面观察顶部锚点高亮跟随。

第 4 段内容：滚动页面观察顶部锚点高亮跟随。

第 5 段内容：滚动页面观察顶部锚点高亮跟随。

第 6 段内容：滚动页面观察顶部锚点高亮跟随。

第 7 段内容：滚动页面观察顶部锚点高亮跟随。

第 8 段内容：滚动页面观察顶部锚点高亮跟随。

附件

第 1 段内容：滚动页面观察顶部锚点高亮跟随。

第 2 段内容：滚动页面观察顶部锚点高亮跟随。

第 3 段内容：滚动页面观察顶部锚点高亮跟随。

第 4 段内容：滚动页面观察顶部锚点高亮跟随。

分区自动注册为锚点，滚动时顶部导航高亮跟随、点击平滑滚动；anchor-key 自定义锚点标识；分区 extra 放行内操作。

<script setup lang="ts">
/** 吸顶锚点：分区自动注册，滚动高亮跟随；分区 extra 放操作位 */
import { ElButton, ElMessage } from 'element-plus'
import { BizDetailPage, BizDetailSection } from 'vue3-ep-biz-lib'

const paragraphs = (n: number): string[] => Array.from({ length: n }, (_, i) => `第 ${i + 1} 段内容：滚动页面观察顶部锚点高亮跟随。`)
</script>

<template>
  <BizDetailPage title="工单 GD-20260921-001" status-text="处理中" status-type="primary">
    <BizDetailSection title="问题描述">
      <p v-for="(p, i) in paragraphs(6)" :key="i" style="margin: 0 0 8px">{{ p }}</p>
    </BizDetailSection>

    <BizDetailSection title="处理记录">
      <template #extra>
        <ElButton text type="primary" size="small" @click="ElMessage.info('新增记录')">新增记录</ElButton>
      </template>
      <p v-for="(p, i) in paragraphs(8)" :key="i" style="margin: 0 0 8px">{{ p }}</p>
    </BizDetailSection>

    <BizDetailSection title="附件" anchor-key="attachment">
      <p v-for="(p, i) in paragraphs(4)" :key="i" style="margin: 0 0 8px">{{ p }}</p>
    </BizDetailSection>
  </BizDetailPage>
</template>

显示代码

页头操作位与加载态

客户 CU-10086VIP

联系信息

联系人：王女士；电话 138****5678（脱敏展示）

消费概览

近 30 天消费 ¥12,800.00，订单 17 笔

extra 插槽放刷新 / 编辑等主操作；loading 遮罩内容区（详情接口拉取中）。

<script setup lang="ts">
/** 页头操作位与加载态：extra 放主操作；loading 遮罩内容区（详情接口拉取中） */
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizDetailPage, BizDetailSection } from 'vue3-ep-biz-lib'

const loading = ref(true)

const reload = (): void => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 1200)
}

setTimeout(() => {
  loading.value = false
}, 1200)
</script>

<template>
  <BizDetailPage title="客户 CU-10086" status-text="VIP" status-type="success" :loading="loading" @back="ElMessage.info('返回')">
    <template #extra>
      <ElButton size="small" @click="reload">刷新</ElButton>
      <ElButton size="small" type="primary" @click="ElMessage.success('进入编辑')">编辑资料</ElButton>
    </template>

    <BizDetailSection title="联系信息">
      <div>联系人：王女士；电话 138****5678（脱敏展示）</div>
    </BizDetailSection>
    <BizDetailSection title="消费概览">
      <div>近 30 天消费 ¥12,800.00，订单 17 笔</div>
    </BizDetailSection>
  </BizDetailPage>
</template>

显示代码

页头插槽

客户档案 CUST-88231VIP

基本信息

深圳市星辰制造有限公司 · 统一社会信用代码 91440300MA5DA1234X · 行业：智能制造

联系人

王小明（采购总监）138****5678 / 李芳（财务）139****2211

back=false 隐藏返回（侧栏内嵌 / 首屏详情）；title 插槽混排标签，extra 放主操作。

<script setup lang="ts">
/** 页头自定义：back=false 隐藏返回（侧栏内嵌 / 首屏详情）；title 插槽混排标签、extra 放主操作 */
import { ElButton, ElMessage, ElTag } from 'element-plus'
import { BizDetailPage, BizDetailSection } from 'vue3-ep-biz-lib'
</script>

<template>
  <BizDetailPage title="客户档案 CUST-88231" sub-title="华南大区 · 2026-03-12 建档" status-text="合作中" status-type="success" :back="false">
    <template #title>
      <span style="margin-right: 8px">客户档案 CUST-88231</span>
      <ElTag size="small" type="warning" effect="plain">VIP</ElTag>
    </template>

    <template #extra>
      <ElButton size="small" @click="ElMessage.info('转移客户经理')">转移</ElButton>
      <ElButton size="small" type="primary" @click="ElMessage.success('已发起回访计划')">发起回访</ElButton>
    </template>

    <BizDetailSection title="基本信息">
      <div style="color: var(--el-text-color-regular); font-size: 13px; padding: 4px 0">
        深圳市星辰制造有限公司 · 统一社会信用代码 91440300MA5DA1234X · 行业：智能制造
      </div>
    </BizDetailSection>

    <BizDetailSection title="联系人">
      <div style="color: var(--el-text-color-regular); font-size: 13px; padding: 4px 0">
        王小明（采购总监）138****5678 / 李芳（财务）139****2211
      </div>
    </BizDetailSection>
  </BizDetailPage>
</template>

显示代码

编程式定位

合同 HT-2026-0912履约中

合同条款

第 1 段内容，用于撑高分区观察滚动定位。

第 2 段内容，用于撑高分区观察滚动定位。

第 3 段内容，用于撑高分区观察滚动定位。

第 4 段内容，用于撑高分区观察滚动定位。

第 5 段内容，用于撑高分区观察滚动定位。

第 6 段内容，用于撑高分区观察滚动定位。

第 7 段内容，用于撑高分区观察滚动定位。

第 8 段内容，用于撑高分区观察滚动定位。

付款计划

第 1 段内容，用于撑高分区观察滚动定位。

第 2 段内容，用于撑高分区观察滚动定位。

第 3 段内容，用于撑高分区观察滚动定位。

第 4 段内容，用于撑高分区观察滚动定位。

第 5 段内容，用于撑高分区观察滚动定位。

第 6 段内容，用于撑高分区观察滚动定位。

签署记录

第 1 段内容，用于撑高分区观察滚动定位。

第 2 段内容，用于撑高分区观察滚动定位。

第 3 段内容，用于撑高分区观察滚动定位。

第 4 段内容，用于撑高分区观察滚动定位。

getSections() 获取锚点清单，scrollTo(key) 平滑滚动到指定分区（流程引导 / 回到顶部）。

<script setup lang="ts">
/** 编程式定位：getSections() 拿锚点清单，scrollTo(key) 平滑滚到指定分区（「回到顶部」/ 流程引导常用） */
import { onMounted, ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizDetailPage, BizDetailSection } from 'vue3-ep-biz-lib'
import type { BizDetailSectionInfo } from 'vue3-ep-biz-lib'

const pageRef = ref<{ scrollTo: (key: string) => void; getSections: () => BizDetailSectionInfo[] }>()
const sections = ref<BizDetailSectionInfo[]>([])

onMounted(() => {
  sections.value = pageRef.value?.getSections() ?? []
})

const goto = (key: string): void => {
  pageRef.value?.scrollTo(key)
  ElMessage.info(`scrollTo('${key}')`)
}

const paragraphs = (n: number): string[] => Array.from({ length: n }, (_, i) => `第 ${i + 1} 段内容，用于撑高分区观察滚动定位。`)
</script>

<template>
  <BizDetailPage ref="pageRef" title="合同 HT-2026-0912" status-text="履约中" status-type="primary">
    <template #extra>
      <ElButton v-for="s in sections" :key="s.key" size="small" @click="goto(s.key)">
        跳到「{{ s.title }}」
      </ElButton>
    </template>

    <BizDetailSection title="合同条款">
      <p v-for="(p, i) in paragraphs(8)" :key="i" style="margin: 0 0 8px">{{ p }}</p>
    </BizDetailSection>

    <BizDetailSection title="付款计划" anchor-key="payment">
      <p v-for="(p, i) in paragraphs(6)" :key="i" style="margin: 0 0 8px">{{ p }}</p>
    </BizDetailSection>

    <BizDetailSection title="签署记录" anchor-key="sign">
      <p v-for="(p, i) in paragraphs(4)" :key="i" style="margin: 0 0 8px">{{ p }}</p>
    </BizDetailSection>
  </BizDetailPage>
</template>

显示代码

关闭吸顶锚点

消息通知 MSG-20260922-01系统自动发送 · 2026-09-22 09:15

通知内容

您提交的付款单 PAY-20260920-118 已审批通过，财务将在 1 个工作日内完成打款，请留意到账通知。

接收信息

接收人王小明（本人）

渠道站内信 + 企业微信

sticky-anchor=false——分区少的单屏详情不占用顶部导航空间。

<script setup lang="ts">
/** 关闭吸顶锚点：sticky-anchor=false——分区少的单屏详情不占用顶部导航空间 */
import { ElButton, ElDescriptions, ElDescriptionsItem, ElMessage } from 'element-plus'
import { BizDetailPage, BizDetailSection } from 'vue3-ep-biz-lib'

const onBack = (): void => {
  ElMessage.info('返回列表')
}
</script>

<template>
  <BizDetailPage
    title="消息通知 MSG-20260922-01"
    sub-title="系统自动发送 · 2026-09-22 09:15"
    :sticky-anchor="false"
    back-text="返回收件箱"
    @back="onBack"
  >
    <BizDetailSection title="通知内容">
      <div style="color: var(--el-text-color-regular); line-height: 1.8; padding: 4px 0">
        您提交的付款单 PAY-20260920-118 已审批通过，财务将在 1 个工作日内完成打款，请留意到账通知。
      </div>
    </BizDetailSection>

    <BizDetailSection title="接收信息">
      <ElDescriptions :column="2" size="small">
        <ElDescriptionsItem label="接收人">王小明（本人）</ElDescriptionsItem>
        <ElDescriptionsItem label="渠道">站内信 + 企业微信</ElDescriptionsItem>
      </ElDescriptions>
    </BizDetailSection>

    <template #footer>
      <ElButton type="primary" @click="ElMessage.success('已标记为已读')">标记已读</ElButton>
    </template>
  </BizDetailPage>
</template>

显示代码

BizDetailPage Props

属性名	类型	默认值	说明
title	string	—（必填）	页面标题
sub-title	string	—	副标题
back	boolean	true	展示返回按钮（emit back）
back-text	string	返回	返回按钮文案
status-text	string	—	状态标签文案
status-type	'primary' | 'success' | 'info' | 'warning' | 'danger'	info	状态标签类型
loading	boolean	false	内容区加载遮罩
sticky-anchor	boolean	true	吸顶锚点导航（分区 ≥1 时出现）

BizDetailPage Events / Slots / Expose

项	说明
back (event)	点击返回按钮
title / extra / default / footer	标题区 / 页头右侧 / 分区内容 / 吸底操作条插槽
scrollTo(key)	滚动到指定分区
getSections()	已注册分区列表（锚点信息）

BizDetailSection

属性名	类型	默认值	说明
title	string	—（必填）	分区标题（同时作为锚点文案）
anchor-key	string	title	锚点标识

项	说明
title / extra / default	标题 / 标题右侧操作 / 内容插槽
rootRef	分区根元素（ref 转发）