BizGoodsReview 商品评价管理

电商评价后台组件：评分汇总（平均分 + 星级分布条 + 好评率）→ 六向筛选（全部 / 好评 / 中评 / 差评 / 待审核 / 精选，计数实时联动）→ 评价卡（星级 / 标签 / 晒图集 / 追评块 / 商家回复块 / 驳回原因红条 / 渠道元数据）→ 审核与运营动作（通过、驳回原因必填、公开回复、精选置顶高亮）；本地数据或 actionRequest 远程模式；readonly 切换前台评论区形态。适用于电商 / 外卖评价后台、内容社区审核、酒店点评管理，与 BizCommentList（通用评论区）互补——本组件带审核与运营闭环。

基础用法

商品评价

4.0

好评率 75% · 共 4 条

5 星2 · 50%

4 星1 · 25%

3 星0 · 0%

2 星1 · 25%

1 星0 · 0%

爱

爱音乐的蕾 精选已通过无线降噪耳机 Pro · 订单 SO1024 · 2026-10-26 16:38 · 天猫

降噪效果一流，地铁上完全安静，佩戴两小时也不夹头。

音质好佩戴舒适

数

数码测评君 已通过无线降噪耳机 Pro · 订单 SO1025 · 2026-10-26 14:08 · 京东

整体不错，App 里的自定义均衡器还能再优化。

性价比高

商家回复感谢反馈，固件 2.1 已优化均衡器曲线～2026-10-26 15:08

阿

阿呆 待审核无线降噪耳机 Pro · 订单 SO1026 · 2026-10-25 15:08

左耳有轻微电流声，已申请售后换货。

匿

匿名用户 已通过无线降噪耳机 Pro · 订单 SO1027 · 2026-10-24 15:08

回购第三条了，送父母。

追评爸妈也说好用，降噪开了一整天跳舞不吵。2026-10-26 12:08

汇总 + 筛选 + 完整评价卡：精选高亮置顶、回复块、追评、晒图与渠道信息。

<script setup lang="ts">
/** 基础用法：评分汇总 + 六向筛选 + 评价卡（星级/标签/图集/追评/回复块/审核状态） */
import { ref } from 'vue'
import { BizGoodsReview } from 'vue3-ep-biz-lib'
import type { BizReviewRecord } from 'vue3-ep-biz-lib'

const m = (n: number) => Date.now() - n * 60000
const img = (c: string) => `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><rect width="80" height="80" fill="${c}"/><text x="40" y="48" font-size="12" text-anchor="middle" fill="#fff">晒图</text></svg>`)))}`

const reviews = ref<BizReviewRecord[]>([
  { id: 'g1', goodsName: '无线降噪耳机 Pro', orderNo: 'SO1024', user: '爱音乐的蕾', rating: 5, content: '降噪效果一流，地铁上完全安静，佩戴两小时也不夹头。', tags: ['音质好', '佩戴舒适'], images: [img('#409eff'), img('#67c23a')], createdAt: m(30), status: 'passed', featured: true, channel: '天猫' },
  { id: 'g2', goodsName: '无线降噪耳机 Pro', orderNo: 'SO1025', user: '数码测评君', rating: 4, content: '整体不错，App 里的自定义均衡器还能再优化。', tags: ['性价比高'], createdAt: m(60 * 3), status: 'passed', reply: '感谢反馈，固件 2.1 已优化均衡器曲线～', replyAt: m(60 * 2), channel: '京东' },
  { id: 'g3', goodsName: '无线降噪耳机 Pro', orderNo: 'SO1026', user: '阿呆', rating: 2, content: '左耳有轻微电流声，已申请售后换货。', createdAt: m(60 * 26), status: 'pending' },
  { id: 'g4', goodsName: '无线降噪耳机 Pro', orderNo: 'SO1027', user: '匿名用户', rating: 5, content: '回购第三条了，送父母。', append: { content: '爸妈也说好用，降噪开了一整天跳舞不吵。', time: m(60 * 5) }, createdAt: m(60 * 50), status: 'passed' },
])
</script>

<template>
  <div style="max-width: 860px">
    <BizGoodsReview :reviews="reviews" />
  </div>
</template>

显示代码

审核动作

商品评价

喝

喝茶老王 待审核保温杯 500ml · 订单 SO2001 · 2026-10-26 16:48

保温 12 小时没 problems，就是希望出个大容量版。

路

路人甲 待审核保温杯 500ml · 订单 SO2002 · 2026-10-26 15:38

垃圾东西千万别买（疑似恶意评价，可驳回演示）

待审核通过 / 驳回（原因 ≥5 字）；驳回后卡片展示红底原因条且不计入汇总。

<script setup lang="ts">
/** 审核动作：待审核通过 / 驳回（原因 ≥5 字通知评价人），驳回后红条展示原因 */
import { ref } from 'vue'
import { BizGoodsReview } from 'vue3-ep-biz-lib'
import type { BizReviewRecord } from 'vue3-ep-biz-lib'

const m = (n: number) => Date.now() - n * 60000

const reviews = ref<BizReviewRecord[]>([
  { id: 'a1', goodsName: '保温杯 500ml', orderNo: 'SO2001', user: '喝茶老王', rating: 5, content: '保温 12 小时没 problems，就是希望出个大容量版。', createdAt: m(20), status: 'pending' },
  { id: 'a2', goodsName: '保温杯 500ml', orderNo: 'SO2002', user: '路人甲', rating: 1, content: '垃圾东西千万别买（疑似恶意评价，可驳回演示）', createdAt: m(90), status: 'pending' },
])
</script>

<template>
  <div style="max-width: 760px">
    <BizGoodsReview :show-summary="false" :reviews="reviews" />
  </div>
</template>

显示代码

商家回复

商品评价

厨

厨房新手 已通过空气炸锅 5L · 订单 SO3001 · 2026-10-26 15:08

炸薯条很棒，就是说明书的菜谱太少了。

prompt 输入公开回复（≥2 字），已回复可修改；回复块蓝底展示。

<script setup lang="ts">
/** 商家回复：prompt 输入公开回复（≥2 字），已回复可修改；回复块蓝底展示 */
import { ref } from 'vue'
import { BizGoodsReview } from 'vue3-ep-biz-lib'
import type { BizReviewRecord } from 'vue3-ep-biz-lib'

const m = (n: number) => Date.now() - n * 60000

const reviews = ref<BizReviewRecord[]>([
  { id: 'r1', goodsName: '空气炸锅 5L', orderNo: 'SO3001', user: '厨房新手', rating: 4, content: '炸薯条很棒，就是说明书的菜谱太少了。', createdAt: m(60 * 2), status: 'passed' },
])
</script>

<template>
  <div style="max-width: 760px">
    <BizGoodsReview :show-summary="false" :reviews="reviews" />
  </div>
</template>

显示代码

精选置顶

商品评价

4.5

好评率 100% · 共 2 条

5 星1 · 50%

4 星1 · 50%

3 星0 · 0%

2 星0 · 0%

1 星0 · 0%

跑

跑步达人 精选已通过智能手环 8 · 订单 SO4001 · 2026-10-26 16:08

续航 14 天名副其实，睡眠监测很准。

续航长

日

日常用户 已通过智能手环 8 · 订单 SO4002 · 2026-10-26 16:38

屏幕在阳光下清晰，表带略硬。

featured 卡片黄底描边并排序前置；筛选栏「精选」单独查看；一键取消精选。

<script setup lang="ts">
/** 精选置顶：featured 卡片黄底描边并排序前置，筛选栏「精选」可单独查看，一键取消 */
import { ref } from 'vue'
import { BizGoodsReview } from 'vue3-ep-biz-lib'
import type { BizReviewRecord } from 'vue3-ep-biz-lib'

const m = (n: number) => Date.now() - n * 60000

const reviews = ref<BizReviewRecord[]>([
  { id: 'f1', goodsName: '智能手环 8', orderNo: 'SO4001', user: '跑步达人', rating: 5, content: '续航 14 天名副其实，睡眠监测很准。', tags: ['续航长'], createdAt: m(60), status: 'passed', featured: true },
  { id: 'f2', goodsName: '智能手环 8', orderNo: 'SO4002', user: '日常用户', rating: 4, content: '屏幕在阳光下清晰，表带略硬。', createdAt: m(30), status: 'passed' },
])
</script>

<template>
  <div style="max-width: 760px">
    <BizGoodsReview :reviews="reviews" />
  </div>
</template>

显示代码

筛选联动

商品评价

3.0

好评率 40% · 共 5 条

5 星1 · 20%

4 星1 · 20%

3 星1 · 20%

2 星1 · 20%

1 星1 · 20%

五

五星用户 已通过蓝牙音箱 mini · 订单 SO5001 · 2026-10-26 16:58

好！

四

四星用户 已通过蓝牙音箱 mini · 订单 SO5002 · 2026-10-26 16:48

不错。

三

三星用户 已通过蓝牙音箱 mini · 订单 SO5003 · 2026-10-26 16:38

一般般。

二

二星用户 已通过蓝牙音箱 mini · 订单 SO5004 · 2026-10-26 16:28

有杂音。

一

一星用户 待审核蓝牙音箱 mini · 订单 SO5005 · 2026-10-26 16:18

失望。

好评（≥4）/ 中评（=3）/ 差评（≤2）/ 待审核 / 精选计数随数据与操作实时变化。

<script setup lang="ts">
/** 筛选联动：好评（≥4）/ 中评（=3）/ 差评（≤2）/ 待审核 / 精选计数随数据与操作实时变化 */
import { ref } from 'vue'
import { BizGoodsReview } from 'vue3-ep-biz-lib'
import type { BizReviewRecord } from 'vue3-ep-biz-lib'

const m = (n: number) => Date.now() - n * 60000

const reviews = ref<BizReviewRecord[]>([
  { id: 'x1', goodsName: '蓝牙音箱 mini', orderNo: 'SO5001', user: '五星用户', rating: 5, content: '好！', createdAt: m(10), status: 'passed' },
  { id: 'x2', goodsName: '蓝牙音箱 mini', orderNo: 'SO5002', user: '四星用户', rating: 4, content: '不错。', createdAt: m(20), status: 'passed' },
  { id: 'x3', goodsName: '蓝牙音箱 mini', orderNo: 'SO5003', user: '三星用户', rating: 3, content: '一般般。', createdAt: m(30), status: 'passed' },
  { id: 'x4', goodsName: '蓝牙音箱 mini', orderNo: 'SO5004', user: '二星用户', rating: 2, content: '有杂音。', createdAt: m(40), status: 'passed' },
  { id: 'x5', goodsName: '蓝牙音箱 mini', orderNo: 'SO5005', user: '一星用户', rating: 1, content: '失望。', createdAt: m(50), status: 'pending' },
])
</script>

<template>
  <div style="max-width: 760px">
    <BizGoodsReview :reviews="reviews" />
  </div>
</template>

显示代码

追评与渠道

商品评价

二

二胎奶爸 已通过儿童安全座椅 · 订单 SO6001 · 2026-10-16 17:08 · 抖音商城

安装简单，ISOFIX 卡扣很稳。

追评用了半个月，宝宝坐着不哭闹，透气性也好，追评推荐！2026-10-25 17:08

append 追评块（灰底，内容 + 追评时间）；channel 渠道（抖音 / 天猫 / 京东）随元数据展示。

<script setup lang="ts">
/** 追评与渠道：append 追评块灰底展示（内容+时间），channel 渠道信息随元数据展示 */
import { ref } from 'vue'
import { BizGoodsReview } from 'vue3-ep-biz-lib'
import type { BizReviewRecord } from 'vue3-ep-biz-lib'

const m = (n: number) => Date.now() - n * 60000

const reviews = ref<BizReviewRecord[]>([
  {
    id: 'ap1',
    goodsName: '儿童安全座椅',
    orderNo: 'SO6001',
    user: '二胎奶爸',
    rating: 5,
    content: '安装简单，ISOFIX 卡扣很稳。',
    createdAt: m(60 * 24 * 10),
    status: 'passed',
    append: { content: '用了半个月，宝宝坐着不哭闹，透气性也好，追评推荐！', time: m(60 * 24) },
    channel: '抖音商城',
  },
])
</script>

<template>
  <div style="max-width: 760px">
    <BizGoodsReview :show-summary="false" :reviews="reviews" />
  </div>
</template>

显示代码

图集展示

商品评价

户

户外控 已通过露营帐篷 3-4 人 · 订单 SO7001 · 2026-10-26 16:08

周末露营实测：防雨过关，搭起来 10 分钟。多图预警～

晒图缩略网格（64px，多图换行），可扩展点击放大（业务侧接图片查看器）。

<script setup lang="ts">
/** 图集展示：评价晒图网格（64px 缩略），多图横向换行 */
import { ref } from 'vue'
import { BizGoodsReview } from 'vue3-ep-biz-lib'
import type { BizReviewRecord } from 'vue3-ep-biz-lib'

const img = (c: string, t: string) =>
  `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><rect width="80" height="80" fill="${c}"/><text x="40" y="48" font-size="12" text-anchor="middle" fill="#fff">${t}</text></svg>`)))}`

const reviews = ref<BizReviewRecord[]>([
  {
    id: 'im1',
    goodsName: '露营帐篷 3-4 人',
    orderNo: 'SO7001',
    user: '户外控',
    rating: 5,
    content: '周末露营实测：防雨过关，搭起来 10 分钟。多图预警～',
    images: [img('#409eff', '外观'), img('#67c23a', '内帐'), img('#e6a23c', '防雨'), img('#f56c6c', '夜景')],
    createdAt: Date.now() - 3600_000,
    status: 'passed',
  },
])
</script>

<template>
  <div style="max-width: 760px">
    <BizGoodsReview :show-summary="false" :reviews="reviews" />
  </div>
</template>

显示代码

远程模式

商品评价

云

云端用户 待审核云端商品 · 订单 SO8001 · 2026-10-26 16:53

中评待处理（服务端确认演示）

action-request 四类动作服务端确认后本地生效，事件流水实时回显。

<script setup lang="ts">
/** 远程模式：actionRequest 四类动作（通过/驳回/回复/精选）服务端确认后本地生效，事件流水回显 */
import { ref } from 'vue'
import { BizGoodsReview } from 'vue3-ep-biz-lib'
import type { BizReviewAction, BizReviewRecord } from 'vue3-ep-biz-lib'

const m = (n: number) => Date.now() - n * 60000

const reviews = ref<BizReviewRecord[]>([
  { id: 'rm1', goodsName: '云端商品', orderNo: 'SO8001', user: '云端用户', rating: 3, content: '中评待处理（服务端确认演示）', createdAt: m(15), status: 'pending' },
])

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

const actionRequest = (r: BizReviewRecord, action: BizReviewAction) =>
  new Promise<void>((resolve) => setTimeout(() => { log.value.push(`${action}@${r.orderNo}`); resolve() }, 500))
</script>

<template>
  <div style="max-width: 760px">
    <BizGoodsReview
      :show-summary="false"
      :reviews="reviews"
      :action-request="actionRequest"
      @action="(r, a) => log.push(`event ${a} 状态→${r.status}`)"
    />
    <p v-if="log.length" style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">流水：{{ log.join(' ｜ ') }}</p>
  </div>
</template>

显示代码

前台评论区

用户评价（前台展示）

4.5

好评率 100% · 共 2 条

5 星1 · 50%

4 星1 · 50%

3 星0 · 0%

2 星0 · 0%

1 星0 · 0%

已

已购用户 A 已通过本商品 · 订单 — · 2026-10-26 16:08

品质很好，物流也快！

质量好物流快

已

已购用户 B 已通过本商品 · 订单 — · 2026-10-26 09:08

整体满意，就是包装可以再环保一点。

商家回复谢谢建议，下批改用可降解包装～2026-10-26 11:08

readonly 隐藏审核动作，仅汇总 + 内容展示（商品详情页嵌入形态）。

<script setup lang="ts">
/** 前台评论区形态：readonly 隐藏审核动作，仅汇总 + 评价内容展示（商品详情页嵌入） */
import { ref } from 'vue'
import { BizGoodsReview } from 'vue3-ep-biz-lib'
import type { BizReviewRecord } from 'vue3-ep-biz-lib'

const m = (n: number) => Date.now() - n * 60000

const reviews = ref<BizReviewRecord[]>([
  { id: 'ro1', goodsName: '本商品', orderNo: '—', user: '已购用户 A', rating: 5, content: '品质很好，物流也快！', tags: ['质量好', '物流快'], createdAt: m(60), status: 'passed' },
  { id: 'ro2', goodsName: '本商品', orderNo: '—', user: '已购用户 B', rating: 4, content: '整体满意，就是包装可以再环保一点。', createdAt: m(60 * 8), status: 'passed', reply: '谢谢建议，下批改用可降解包装～', replyAt: m(60 * 6) },
])
</script>

<template>
  <div style="max-width: 760px">
    <BizGoodsReview title="用户评价（前台展示）" readonly :reviews="reviews" />
  </div>
</template>

显示代码

仅汇总形态

评分洞察

4.0

好评率 75% · 共 4 条

5 星2 · 50%

4 星1 · 25%

3 星0 · 0%

2 星1 · 25%

1 星0 · 0%

A

A 已通过汇总商品 · 订单 — · 2026-10-26 16:58

五星

B

B 已通过汇总商品 · 订单 — · 2026-10-26 16:48

五星

C

C 已通过汇总商品 · 订单 — · 2026-10-26 16:38

四星

D

D 已通过汇总商品 · 订单 — · 2026-10-26 16:28

二星

expose.getSummary() 取汇总数据（总数 / 均分 / 好评率 / 分布）供业务侧埋点。

<script setup lang="ts">
/** 仅汇总形态：show-summary 独立使用（filterable 关闭），expose.getSummary 取汇总数据外抛到业务侧 */
import { ref } from 'vue'
import { BizGoodsReview } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'
import type { BizReviewRecord } from 'vue3-ep-biz-lib'

const m = (n: number) => Date.now() - n * 60000

const gr = ref<InstanceType<typeof BizGoodsReview>>()

const reviews = ref<BizReviewRecord[]>([
  { id: 's1', goodsName: '汇总商品', orderNo: '—', user: 'A', rating: 5, content: '五星', createdAt: m(10), status: 'passed' },
  { id: 's2', goodsName: '汇总商品', orderNo: '—', user: 'B', rating: 5, content: '五星', createdAt: m(20), status: 'passed' },
  { id: 's3', goodsName: '汇总商品', orderNo: '—', user: 'C', rating: 4, content: '四星', createdAt: m(30), status: 'passed' },
  { id: 's4', goodsName: '汇总商品', orderNo: '—', user: 'D', rating: 2, content: '二星', createdAt: m(40), status: 'passed' },
])
</script>

<template>
  <div style="max-width: 760px">
    <BizGoodsReview
      ref="gr"
      title="评分洞察"
      :reviews="reviews"
      :filterable="false"
      :readonly="true"
    />
    <el-button size="small" style="margin-top: 10px" @click="ElMessage.success(JSON.stringify(gr?.getSummary()))">
      读取汇总（getSummary）
    </el-button>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
title	string	'商品评价'	面板标题
reviews	BizReviewRecord[]	[]	评价列表：{ id, goodsName, goodsImage?, orderNo, user, avatar?, rating, content, images?, tags?, append?, reply?, replyAt?, createdAt, status, rejectReason?, featured?, channel? }
action-request	(review, action, extra?) => Promise<void>	—	审核与运营动作（pass / reject / reply / feature，远程模式）
show-summary	boolean	true	评分汇总卡
filterable	boolean	true	筛选栏
readonly	boolean	false	前台评论区形态（隐藏审核动作）

Events

事件名	参数	说明
action	(review, action, extra?)	动作外抛：pass / reject（含 reason）/ reply（含 reply）/ feature

Slots

插槽名	说明
header-extra	{ reviews } 标题区追加（导出 / 批量操作）
review-extra	{ review } 单卡操作区追加（加黑 / 举报处理等）

Expose

属性/方法	说明
getList	() => BizReviewRecord[] 当前筛选后的列表（排序：精选优先 + 时间倒序）
getSummary	() => BizReviewSummary 评分汇总（total / average / goodRate / distribution）

口径说明

• 汇总口径：驳回（rejected）评价不计入平均分与分布；好评率 =（4~5 星 ÷ 有效总数）%。
• 筛选口径：好评 ≥4 星、中评 =3 星、差评 ≤2 星；待审核按 status；筛选不剔除驳回记录（供追溯）。
• 排序口径：精选置顶，其后按创建时间倒序。
• 动作口径：通过 / 驳回仅对 pending 生效；回复随时可改；精选为开关切换（再次点击取消）。