评价

doc/店铺后台/商品管理/评价管理/评价管理前端技术方案.md

@@ -1,9 +1,9 @@
 # 评价管理 — 前端技术方案
 
-> **依据：** 《评价管理功能需求.md》v1.1、《评价管理技术方案.md》v1.1  
+> **依据：** 《评价管理功能需求.md》v1.2、《评价管理技术方案.md》v1.2  
 > **前端规范：** `doc/前端设计/前端设计.md`  
 > **范围：** 仅 **ruoyi-ui 商家端** 当前店铺评价列表、检索、详情查看、商家回复、逻辑删除；**不含** C 端发表评价、平台审核。  
-> **实现状态：** 页面与 API 封装已落地，待菜单配置及 `/agri/seller/review` 联调。
+> **实现状态：** `index.vue`、`detail.vue`、`api/agri/seller/review.js` **已按 v1.2 一行一评落地**；待菜单配置及 `/agri/seller/review` 联调。
 
 ---
 
@@ -15,24 +15,45 @@
 | 请求 | `@/utils/request` + `sellerShopHeaders()` 携带 **`X-Shop-Id`** |
 | 参考页面 | `agri/seller/order/index.vue`（检索+页签+列表）、`agri/seller/goods/detail.vue`（详情抽屉） |
 | 布局 | 检索 `el-card` + `<br/>` + 列表 `el-card` + `border` 表格 |
+| 详情 | 右侧 `el-drawer`（`size="72%"`，`append-to-body`） |
+| 图片 | 全局 `image-preview` 组件（列表缩略、详情多图） |
 | 店铺切换 | **仅 Navbar**；业务页禁止展示店铺选择器 |
 
 ---
 
-## 2. 文件清单
+## 2. v1.2 业务变更（相对 v1.0/v1.1）
+
+| 项 | 旧口径 | v1.2 定稿 |
+|----|--------|-----------|
+| 评价粒度 | 一单一评 | **一行一评**（`order_item_id` / `uk_order_item_review`） |
+| 列表行 | 整单首商品 | **一条评价 = 一个订单商品行** 快照 |
+| 商品名称 | — | 后端 **JOIN `biz_order_item`** 取 `goods_name` |
+| 删除后买家 | 不可再评该订单 | 不可再评该 **商品行**（RM3） |
+| C 端协作 | — | 与《我的订单》v1.2 `items[]` 按行评价一致 |
+
+**前端不改接口路径**；列表/详情仍用 `goodsName`、`goodsSpec`、`goodsMainPic` 展示评价对象。
+
+---
+
+## 3. 文件清单
 
 | 类型 | 路径 | 说明 |
 |------|------|------|
-| 列表页 | `ruoyi-ui/src/views/agri/seller/review/index.vue` | 检索、回复状态页签、列表、回复弹窗 |
-| 详情抽屉 | `ruoyi-ui/src/views/agri/seller/review/detail.vue` | 分区展示、回复/删除 |
+| 列表页 | `ruoyi-ui/src/views/agri/seller/review/index.vue` | 检索、回复状态页签、表格、回复弹窗、详情抽屉宿主 |
+| 详情抽屉 | `ruoyi-ui/src/views/agri/seller/review/detail.vue` | 分区展示、一行一评说明、回复/删除（事件上抛） |
 | 评价 API | `ruoyi-ui/src/api/agri/seller/review.js` | list、detail、reply、remove |
 | 店铺上下文 | `api/agri/seller/context.js` + `utils/sellerShop.js` | X-Shop-Id |
 
-**组件 name（keep-alive）：** `AgriSellerReview`
+**组件 name（keep-alive）：**
+
+| 组件 | name |
+|------|------|
+| 列表页 | `AgriSellerReview` |
+| 详情抽屉 | `SellerReviewDetail` |
 
 ---
 
-## 3. 菜单与路由
+## 4. 菜单与路由
 
 | 菜单名称 | 组件路径 | 路由 path（建议） | 权限标识 |
 |----------|----------|-------------------|----------|
@@ -40,54 +61,190 @@
 
 **上级菜单：** 店铺经营管理端 → **商品管理**
 
-| 按钮权限 | 标识 | 说明 |
-|----------|------|------|
-| 列表 | `agri:seller:review:list` | 分页列表 |
-| 详情 | `agri:seller:review:query` | 查看详情抽屉 |
-| 回复 | `agri:seller:review:reply` | 新增/修改商家回复 |
-| 删除 | `agri:seller:review:remove` | 逻辑删除 |
+| 按钮权限 | 标识 | 页面落点 |
+|----------|------|----------|
+| 列表 | `agri:seller:review:list` | 进入列表页 |
+| 详情 | `agri:seller:review:query` | 操作列「查看」 |
+| 回复 | `agri:seller:review:reply` | 操作列「回复」、详情「回复评价/修改回复」 |
+| 删除 | `agri:seller:review:remove` | 操作列「删除」、详情「删除评价」 |
 
 ---
 
-## 4. 页面结构
+## 5. 页面结构（与代码一致）
 
 ```text
-评价管理
-├── 检索区（el-card）
-│   ├── 会员名称 memberNickName（模糊）
-│   ├── 商品名称 goodsName（模糊，匹配评价对象快照）
-│   ├── 评分 score（1～5 星，可选）
-│   └── 评价时间 beginTime～endTime（daterange）
-├── 列表区（el-card + border 表格）
-│   ├── 回复状态页签：全部 | 未回复 | 已回复
-│   ├── 列：会员名称、评价对象、评价内容、晒图、评分、评价时间、回复状态
-│   └── 操作：查看、回复、删除
-├── 详情抽屉 detail.vue（72% 宽）
-│   ├── 评价信息 / 评价对象 / 买家信息 / 关联订单 / 商家回复
-│   └── 操作：回复（或修改回复）、删除
-└── 回复弹窗
-    └── 回复内容 replyContent（必填，≤500 字）
+评价管理 index.vue
+├── 检索区 search-card（el-card，v-show 受 right-toolbar 控制）
+│   ├── 会员名称 memberNickName（140px，回车搜索）
+│   ├── 商品名称 goodsName（placeholder「评价对象名称」）
+│   ├── 评分 score（el-select 1～5 星，可清空）
+│   ├── 评价时间 dateRange（daterange → beginTime/endTime）
+│   └── 搜索 / 重置
+├── 列表区 table-card（el-card）
+│   ├── 回复状态页签 replyTab：全部(all) | 未回复(UNREPLIED) | 已回复(REPLIED)
+│   ├── right-toolbar（显隐检索、刷新列表）
+│   ├── el-table border（empty-text 动态）
+│   │   ├── 会员名称 width=110
+│   │   ├── 评价对象 min-width=220（图+名+规格+一行一评提示）
+│   │   ├── 评价内容 min-width=180（截断 60 字）
+│   │   ├── 晒图 width=90（首图 +N 角标）
+│   │   ├── 评分 width=130（el-rate disabled）
+│   │   ├── 评价时间 width=160（parseTime）
+│   │   ├── 回复状态 width=90（Tag）
+│   │   └── 操作 width=200 fixed=right：查看 / 回复 / 删除
+│   └── pagination
+├── 详情抽屉 SellerReviewDetail（见 §6）
+└── 回复弹窗 el-dialog width=560px（由 index 统一承载）
+    └── replyContent textarea，maxlength=500，show-word-limit
 ```
 
 **不提供：** 页内店铺选择、修改买家评价、批量回复/删除、导出。
 
 ---
 
-## 5. 回复状态页签与 Query
+## 6. 详情抽屉 detail.vue
+
+### 6.1 对外接口
+
+| 类型 | 名称 | 说明 |
+|------|------|------|
+| props | `visible` | 抽屉显隐（`.sync`） |
+| props | `reviewId` | 当前评价主键 |
+| emit | `update:visible` | 关闭抽屉 |
+| emit | `reply` | 点击回复/修改回复，payload 为详情对象 |
+| emit | `view-order` | 点击订单编号，payload 含 `orderNo` |
+| emit | `success` | 删除成功后通知父页刷新列表 |
+| 方法 | `loadDetail()` | 父页回复成功后可选调用重载详情 |
+
+### 6.2 分区结构
+
+```text
+el-drawer 标题：「评价详情 · {memberNickName}」
+├── 评价信息（el-descriptions 2 列）
+│   ├── 评分：el-rate disabled + show-score
+│   ├── 评价时间
+│   ├── 评价内容（pre-wrap 全文）
+│   └── 晒图（有图时 span=2，72×72 多图 image-preview）
+├── 评价对象
+│   ├── section-tip：一行一评说明文案
+│   └── 灰底卡片：主图 64×64 + 商品名 + 规格（默认「默认」）
+├── 买家信息：会员名称、头像
+├── 关联订单：订单编号（el-button text 可点）
+├── 商家回复
+│   ├── 回复状态 Tag
+│   ├── 回复内容 / 回复人 / 回复时间（有则展示）
+│   └── 未回复时提示：「待回复，买家评价已在 C 端展示」
+└── action-bar：回复评价或修改回复、删除评价
+```
+
+**删除：** 抽屉内二次确认（同列表 RM3 文案）→ `delSellerReview` → 关闭抽屉 → `$emit('success')`。
+
+---
+
+## 7. 父子协作与数据流
+
+### 7.1 页面初始化
+
+```text
+created → initPage()
+    → loadShopContext()（GET /agri/seller/context → setSellerShopContext）
+        ├── 成功 / 失败均继续
+        └── getList()
+```
+
+### 7.2 列表检索与页签
+
+```text
+handleQuery / handleTabClick / pagination
+    → 组装 queryParams + dateRange → beginTime/endTime
+    → listSellerReview(params)
+    → reviewList = rows；total
+
+replyTab 与 queryParams.replyStatus 同步：
+    all → replyStatus 不传
+    UNREPLIED / REPLIED → 原样传参
+
+resetQuery：清空 dateRange、replyTab=all、resetForm、replyStatus=undefined
+```
+
+### 7.3 查看详情
+
+```text
+handleDetail(row) → currentReviewId = row.reviewId → detailOpen = true
+    → detail watch visible → getSellerReview(reviewId)
+```
+
+### 7.4 回复（列表与详情共用弹窗）
+
+```text
+列表 handleReply(row) / 详情 @reply
+    → currentReplyReviewId = reviewId
+    → replyDialogTitle：已回复「修改回复」否则「回复评价」
+    → replyForm.replyContent 回显 row.replyContent
+    → replyOpen = true
+
+submitReply：校验 → trim → replySellerReview(id, { replyContent })
+    → 成功：关闭弹窗、getList()
+    → 若详情抽屉打开且为同一条评价：refs.reviewDetail.loadDetail()
+```
+
+### 7.5 删除
+
+```text
+列表 handleDelete(row) → confirm(RM3) → delSellerReview → getList()
+
+详情 handleDelete → confirm(RM3) → delSellerReview → 关抽屉 → @success → getList()
+```
+
+### 7.6 跳转订单
+
+```text
+详情 @view-order → index handleViewOrder
+    → $router.push({ path: '/seller/order', query: { orderNo } })
+```
+
+---
+
+## 8. 回复状态页签与 Query
 
 | 页签 | `replyTab` | 传参 `replyStatus` |
 |------|------------|-------------------|
-| 全部 | `all` | 不传 |
+| 全部 | `all` | 不传（`undefined`） |
 | 未回复 | `UNREPLIED` | `UNREPLIED` |
 | 已回复 | `REPLIED` | `REPLIED` |
 
-页签与高级检索 **AND** 组合；切换页签重置 `pageNum=1` 并刷新列表。
+页签与高级检索 **AND** 组合；`handleTabClick` 重置 `pageNum=1` 并刷新。
 
 **列表排序：** 后端 `create_time DESC`；前端不再二次排序。
 
+**一行一评展示（列表评价对象列）：**
+
+- `image-preview` 44×44（有 `goodsMainPic` 时）
+- 商品名 + 规格（`goodsSpec` 空则「默认」）
+- 灰色小字：`一行一评 · 单商品行快照`（class `item-tip`）
+
 ---
 
-## 6. 店铺上下文（X-Shop-Id）
+## 9. 展示与空态（页面已实现）
+
+| 场景 | 实现 |
+|------|------|
+| 评价内容列表 | `contentSummary`：空→「—」；超 60 字加「…」 |
+| 晒图列表 | 首图 40×40；多于 1 张右下角 `+N` 角标 |
+| 回复状态 Tag | `UNREPLIED`→warning「未回复」；`REPLIED`→success「已回复」 |
+| 空表格文案 | 计算属性 `hasSearchFilter`：含检索字段、日期区间、**或** `replyTab !== 'all'` |
+| 无筛选空态 | `暂无买家评价` |
+| 有筛选空态 | `未找到符合条件的评价` |
+
+**删除确认文案（RM3，列表与详情一致）：**
+
+```text
+删除后 C 端将不再展示该评价，且买家无法再次评价该商品行（一行一评），是否继续？
+```
+
+---
+
+## 10. 店铺上下文（X-Shop-Id）
 
 | 步骤 | 说明 |
 |------|------|
@@ -97,7 +254,7 @@
 
 ---
 
-## 7. API 封装
+## 11. API 封装
 
 **模块：** `ruoyi-ui/src/api/agri/seller/review.js`  
 **Base URL：** `/agri/seller/review`
@@ -109,41 +266,41 @@
 | `replySellerReview(reviewId, data)` | PUT | `/{reviewId}/reply` | 商家回复 |
 | `delSellerReview(reviewId)` | DELETE | `/{reviewId}` | 逻辑删除 |
 
-### 7.1 列表 Query
+### 11.1 列表 Query（`queryParams`）
 
-| 字段 | 说明 |
-|------|------|
-| pageNum, pageSize | 分页 |
-| replyStatus | 空=全部；`UNREPLIED` / `REPLIED` |
-| score | 1～5 |
-| goodsName, memberNickName | 模糊 |
-| beginTime, endTime | 评价时间区间（`yyyy-MM-dd`） |
+| 字段 | 页面绑定 | 说明 |
+|------|----------|------|
+| pageNum, pageSize | pagination | 默认 1 / 10 |
+| replyStatus | `replyTab` 同步 | 空=全部 |
+| score | 检索表单项 | 1～5 |
+| goodsName, memberNickName | 检索表单项 | 模糊 |
+| beginTime, endTime | `dateRange[0/1]` | `yyyy-MM-dd` |
 
-### 7.2 列表行 VO（SellerReviewListRowVO）
+### 11.2 列表行 VO（SellerReviewListRowVO）
 
 | 字段 | 前端用途 |
 |------|----------|
-| reviewId | 主键、操作入参 |
-| memberNickName | 会员名称列 |
-| goodsId, goodsName, goodsMainPic, goodsSpec | 评价对象列 |
-| content | 评价内容（前端截断 60 字） |
-| reviewPics | 晒图数组；首图缩略 + 数量角标 |
-| score | `el-rate` 只读展示 |
-| createTime | 评价时间 |
-| replyStatus | `UNREPLIED` / `REPLIED` → Tag |
-| replyContent | 回复弹窗回显（已回复时） |
-
-### 7.3 详情 VO（SellerReviewDetailVO）
+| reviewId | 主键、详情/回复/删除入参 |
+| memberNickName | 会员名称列（空→「—」） |
+| goodsName, goodsMainPic, goodsSpec | 评价对象列 |
+| content | `contentSummary` 截断 |
+| reviewPics | 晒图数组；首图 + 角标 |
+| score | `el-rate` 只读 |
+| createTime | `parseTime` |
+| replyStatus | Tag + 回复弹窗标题判断 |
+| replyContent | 已回复时弹窗回显 |
+
+### 11.3 详情 VO（SellerReviewDetailVO）
 
 | 分区 | 字段 |
 |------|------|
-| 评价 | reviewId, score, content, reviewPics[], createTime |
-| 对象 | goodsId, goodsName, goodsMainPic, goodsSpec |
+| 评价 | score, content, reviewPics[], createTime |
+| 对象 | goodsName, goodsMainPic, goodsSpec |
 | 买家 | memberNickName, memberAvatar |
-| 订单 | orderId, orderNo |
-| 回复 | replyContent, replyBy, replyTime, replyStatus |
+| 订单 | orderNo（跳转全部订单） |
+| 回复 | replyStatus, replyContent, replyBy, replyTime |
 
-### 7.4 回复 Body
+### 11.4 回复 Body
 
 ```json
 { "replyContent": "感谢您的认可，欢迎再次光临。" }
@@ -151,45 +308,53 @@
 
 | 规则 | 前端 |
 |------|------|
-| 必填 | 表单校验 |
+| 必填 | `replyRules.replyContent` |
 | 长度 ≤500 | `maxlength` + `show-word-limit` |
+| 提交前 trim | `submitReply` 内 `(replyContent).trim()` |
 | 已回复可修改 | 弹窗标题「修改回复」；PUT 覆盖 |
 
 ---
 
-## 8. 交互要点
+## 12. 样式要点（scoped）
 
-| 场景 | 行为 |
-|------|------|
-| 未回复 | 回复状态 Tag `warning`；页签可快速筛选 |
-| 晒图 | 列表首图 + 角标；详情多图 `image-preview` 可放大 |
-| 回复 | 列表/详情均可打开弹窗；已回复回显 `replyContent` |
-| 删除 | 二次确认；提示 C 端不可见且买家不可再评 |
-| 关联订单 | 详情订单编号点击 → `/seller/order?orderNo=xxx`（预填检索，依赖订单页读取 query） |
-| 空状态 | 后端无数据时表格为空；无额外 mock |
-| 回复成功 | 刷新列表；若详情抽屉打开则 `loadDetail()` 重载 |
+| class | 位置 | 说明 |
+|-------|------|------|
+| `goods-target` | 列表/详情 | flex 横排：图 + 文案 |
+| `sub-text` | 列表/详情 | 规格 12px 灰色 |
+| `item-tip` | 列表评价对象 | 11px 浅灰「一行一评」提示 |
+| `pic-cell` / `pic-count` | 列表晒图 | 相对定位 +N 角标 |
+| `section-header` | 详情 | 左侧蓝色竖线分区标题 |
+| `section-tip` | 详情评价对象 | 一行一评说明 |
+| `goods-target`（详情） | 灰底 `#fafafa` 圆角卡片 |
+| `pending-tip` | 详情未回复 | 橙色提示文案 |
+| `action-bar` | 详情底部 | 上边框 + 回复/删除按钮 |
 
 ---
 
-## 9. 联调检查清单
+## 13. 联调检查清单
 
-- [ ] 菜单组件路径 `agri/seller/review/index` 及按钮权限
+- [ ] 菜单组件路径 `agri/seller/review/index` 及四个按钮权限
 - [ ] Navbar 切换店铺后列表数据隔离
-- [ ] 回复状态页签与高级检索组合正确
-- [ ] 查看详情：评分、晒图、快照商品、订单号、回复区
-- [ ] 首次回复 → 状态变已回复 → C 端商品详情可见回复
-- [ ] 修改回复 → 内容更新
-- [ ] 删除 → 列表移除；C 端不可见
+- [ ] 回复状态页签与高级检索组合；重置清空页签
+- [ ] 空态：无筛选「暂无买家评价」；有筛选「未找到符合条件的评价」
+- [ ] 一单多商品：列表 **多行评价**，评价对象列快照与提示文案正确
+- [ ] 查看详情：五分区、晒图、一行一评说明、未回复橙色提示
+- [ ] 列表/详情均可打开回复弹窗；已回复回显与「修改回复」标题
+- [ ] 回复成功：列表刷新；详情抽屉同 ID 时 `loadDetail` 重载
+- [ ] 删除：RM3 文案；列表移除；详情关抽屉并刷新
+- [ ] 订单编号跳转 `/seller/order?orderNo=xxx`
 - [ ] 未选店铺时后端返回「请先选择当前店铺」
 
 ---
 
-## 10. 修订记录
+## 14. 修订记录
 
 | 版本 | 说明 |
 |------|------|
-| v1.0 | 首版：列表 + 回复状态页签 + 详情抽屉 + 回复弹窗 + 删除 |
+| **v1.3** | **按已落地页面回写**：列表列宽与组件、详情抽屉 props/emit/分区、父子协作数据流、空态计算属性、样式 class、回复弹窗由 index 统一承载 |
+| **v1.2** | 对齐需求 v1.2 **一行一评**：删除文案、评价对象说明、空态分场景、列表行语义 |
+| **v1.0** | 首版：列表 + 回复状态页签 + 详情抽屉 + 回复弹窗 + 删除 |
 
 ---
 
-*文档版本：v1.0 · 关联《评价管理功能需求.md》v1.1、《评价管理技术方案.md》v1.1*
+*文档版本：v1.3 · 关联《评价管理功能需求.md》v1.2、《评价管理技术方案.md》v1.2*

ruoyi-ui/src/views/agri/seller/review/detail.vue

@@ -32,6 +32,7 @@
       </el-descriptions>
 
       <h4 class="section-header">评价对象</h4>
+      <p class="section-tip">一行一评：本条评价对应订单中的一个商品行，展示提交时商品快照（名称来自订单明细）。</p>
       <div class="goods-target mb16">
         <image-preview v-if="detail.goodsMainPic" :src="detail.goodsMainPic" :width="64" :height="64" />
         <div class="goods-text">
@@ -139,7 +140,7 @@ export default {
       this.$emit("reply", this.detail)
     },
     handleDelete() {
-      this.$modal.confirm("删除后 C 端将不再展示该评价，且买家无法再次评价该订单，是否继续？").then(() => {
+      this.$modal.confirm("删除后 C 端将不再展示该评价，且买家无法再次评价该商品行（一行一评），是否继续？").then(() => {
         return delSellerReview(this.reviewId)
       }).then(() => {
         this.$modal.msgSuccess("删除成功")
@@ -165,6 +166,12 @@ export default {
   border-left: 3px solid #409EFF;
   padding-left: 8px;
 }
+.section-tip {
+  margin: 0 0 10px;
+  font-size: 12px;
+  color: #909399;
+  line-height: 1.5;
+}
 .mb16 {
   margin-bottom: 16px;
 }

ruoyi-ui/src/views/agri/seller/review/index.vue

@@ -46,7 +46,7 @@
         <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
       </el-row>
 
-      <el-table border v-loading="loading" :data="reviewList">
+      <el-table border v-loading="loading" :data="reviewList" :empty-text="emptyTableText">
         <el-table-column label="会员名称" align="center" prop="memberNickName" width="110" :show-overflow-tooltip="true">
           <template slot-scope="scope">
             <span>{{ scope.row.memberNickName || '—' }}</span>
@@ -59,6 +59,7 @@
               <div class="goods-text">
                 <div>{{ scope.row.goodsName || '—' }}</div>
                 <div class="sub-text">{{ scope.row.goodsSpec || '默认' }}</div>
+                <div class="item-tip">一行一评 · 单商品行快照</div>
               </div>
             </div>
           </template>
@@ -182,6 +183,22 @@ export default {
       }
     }
   },
+  computed: {
+    /** 是否有检索条件（用于区分空列表文案，对齐需求 §6.3） */
+    hasSearchFilter() {
+      const q = this.queryParams
+      return !!(
+        q.memberNickName ||
+        q.goodsName ||
+        q.score ||
+        (this.dateRange && this.dateRange.length === 2) ||
+        this.replyTab !== "all"
+      )
+    },
+    emptyTableText() {
+      return this.hasSearchFilter ? "未找到符合条件的评价" : "暂无买家评价"
+    }
+  },
   created() {
     this.initPage()
   },
@@ -292,7 +309,7 @@ export default {
       })
     },
     handleDelete(row) {
-      this.$modal.confirm("删除后 C 端将不再展示该评价，且买家无法再次评价该订单，是否继续？").then(() => {
+      this.$modal.confirm("删除后 C 端将不再展示该评价，且买家无法再次评价该商品行（一行一评），是否继续？").then(() => {
         return delSellerReview(row.reviewId)
       }).then(() => {
         this.$modal.msgSuccess("删除成功")
@@ -321,6 +338,11 @@ export default {
   font-size: 12px;
   color: #909399;
 }
+.item-tip {
+  margin-top: 2px;
+  font-size: 11px;
+  color: #c0c4cc;
+}
 .pic-cell {
   position: relative;
   display: inline-block;

shop-app/PAGES.md

@@ -81,6 +81,7 @@ subpackage/
 | `PAGE_ORDER_DETAIL` | `/subpackage/order/detail` |
 | `PAGE_ORDER_REVIEW_LIST` | `/subpackage/order/review-list` |
 | `PAGE_ORDER_REVIEW_EDIT` | `/subpackage/order/review-edit` |
+| `PAGE_ORDER_REVIEW_VIEW` | `/subpackage/order/review-view` |
 | `PAGE_ORDER_AFTERSALE_LIST` | `/subpackage/order/aftersale-list` |
 | `PAGE_ORDER_AFTERSALE_DETAIL` | `/subpackage/order/aftersale-detail` |
 | `PAGE_ORDER_AFTERSALE_SUBMIT` | `/subpackage/order/aftersale-submit` |

shop-app/api/orderReview.js

@@ -9,11 +9,12 @@ export function listReviews(params) {
   })
 }
 
-/** 查看订单评价 */
-export function getOrderReview(orderId) {
+/** 查看订单商品行评价 */
+export function getOrderReview(orderId, orderItemId) {
   return request({
     url: `/api/order/${orderId}/review`,
-    method: 'GET'
+    method: 'GET',
+    params: orderItemId != null && orderItemId !== '' ? { orderItemId } : undefined
   })
 }
 

shop-app/components/order/OrderGoodsRow.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="order-goods-row" @click="emit('click')">
 		<image class="order-goods-row__pic" :src="item.displayPic" mode="aspectFill" />
-		<view class="order-goods-row__main">
+		<view class="order-goods-row__main" :class="{ 'order-goods-row__main--compact': reviewAction }">
 			<text class="order-goods-row__name">{{ item.goodsName }}</text>
 			<view v-if="item.specList && item.specList.length" class="order-goods-row__specs">
 				<text
@@ -20,6 +20,13 @@
 			</text>
 			<text v-if="item.buyerRemark" class="order-goods-row__remark">备注：{{ item.buyerRemark }}</text>
 		</view>
+		<button
+			v-if="reviewAction"
+			class="order-goods-row__review-btn"
+			@click.stop="emit('review', reviewAction.code)"
+		>
+			{{ reviewAction.label }}
+		</button>
 	</view>
 </template>
 
@@ -32,17 +39,26 @@ defineProps({
 	showSubtotal: {
 		type: Boolean,
 		default: false
+	},
+	/** { code, label } 交易成功时商品行评价按钮 */
+	reviewAction: {
+		type: Object,
+		default: null
 	}
 })
 
-const emit = defineEmits(['click'])
+const emit = defineEmits(['click', 'review'])
 </script>
 
 <style lang="scss" scoped>
 .order-goods-row {
 	display: flex;
+	align-items: flex-start;
 	padding: 16rpx 0;
 }
+.order-goods-row__main--compact {
+	padding-right: 8rpx;
+}
 .order-goods-row__pic {
 	width: 140rpx;
 	height: 140rpx;
@@ -104,4 +120,17 @@ const emit = defineEmits(['click'])
 	font-size: 22rpx;
 	color: #999;
 }
+.order-goods-row__review-btn {
+	flex-shrink: 0;
+	margin: 24rpx 0 0 8rpx;
+	min-width: 128rpx;
+	height: 52rpx;
+	line-height: 52rpx;
+	padding: 0 16rpx;
+	font-size: 24rpx;
+	color: #2e7d32;
+	background: #fff;
+	border: 1rpx solid #2e7d32;
+	border-radius: 26rpx;
+}
 </style>

shop-app/components/order/ReviewDoneSummaryCard.vue

@@ -0,0 +1,137 @@
+<template>
+	<view class="review-done-card">
+		<view class="review-done-card__goods">
+			<image class="review-done-card__pic" :src="item.displayPic" mode="aspectFill" />
+			<view class="review-done-card__goods-meta">
+				<text class="review-done-card__name">{{ item.goodsName }}</text>
+				<text v-if="item.specText" class="review-done-card__spec">{{ item.specText }}</text>
+			</view>
+		</view>
+		<view class="review-done-card__review">
+			<view class="review-done-card__stars">
+				<text
+					v-for="n in 5"
+					:key="n"
+					class="review-done-card__star"
+					:class="{ 'review-done-card__star--on': n <= score }"
+				>★</text>
+				<text class="review-done-card__score">{{ score }}分</text>
+			</view>
+			<text class="review-done-card__content">{{ contentBrief }}</text>
+		</view>
+		<view class="review-done-card__foot">
+			<text class="review-done-card__time">{{ reviewTime }}</text>
+			<text class="review-done-card__link">查看详情</text>
+		</view>
+	</view>
+</template>
+
+<script setup>
+defineProps({
+	item: {
+		type: Object,
+		required: true
+	},
+	score: {
+		type: Number,
+		default: 0
+	},
+	contentBrief: {
+		type: String,
+		default: ''
+	},
+	reviewTime: {
+		type: String,
+		default: ''
+	}
+})
+</script>
+
+<style lang="scss" scoped>
+.review-done-card {
+	padding: 20rpx 24rpx;
+	background: #fff;
+	border-radius: 12rpx;
+}
+.review-done-card__goods {
+	display: flex;
+	align-items: center;
+}
+.review-done-card__pic {
+	width: 96rpx;
+	height: 96rpx;
+	border-radius: 8rpx;
+	background: #eee;
+	flex-shrink: 0;
+}
+.review-done-card__goods-meta {
+	flex: 1;
+	min-width: 0;
+	margin-left: 16rpx;
+}
+.review-done-card__name {
+	display: block;
+	font-size: 28rpx;
+	color: #333;
+	line-height: 1.35;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.review-done-card__spec {
+	display: block;
+	margin-top: 4rpx;
+	font-size: 22rpx;
+	color: #999;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.review-done-card__review {
+	margin-top: 12rpx;
+	padding: 12rpx 16rpx;
+	background: #f8f9fa;
+	border-radius: 8rpx;
+}
+.review-done-card__stars {
+	display: flex;
+	align-items: center;
+}
+.review-done-card__star {
+	font-size: 22rpx;
+	color: #ddd;
+	line-height: 1;
+}
+.review-done-card__star--on {
+	color: #ffb400;
+}
+.review-done-card__score {
+	margin-left: 8rpx;
+	font-size: 22rpx;
+	color: #ffb400;
+}
+.review-done-card__content {
+	display: block;
+	margin-top: 6rpx;
+	font-size: 24rpx;
+	color: #666;
+	line-height: 1.45;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.review-done-card__foot {
+	margin-top: 12rpx;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+.review-done-card__time {
+	font-size: 22rpx;
+	color: #bbb;
+}
+.review-done-card__link {
+	font-size: 24rpx;
+	color: #2e7d32;
+}
+</style>

shop-app/constants/order.js

@@ -55,6 +55,13 @@ export const REVIEW_TAB = {
   DONE: 'DONE'
 }
 
+/** 订单商品行评价态（与后端 OrderAppConstants 一致） */
+export const REVIEW_ITEM_STATUS = {
+  NONE: 'NONE',
+  PENDING: 'PENDING',
+  DONE: 'DONE'
+}
+
 export const REVIEW_TABS = [
   { key: REVIEW_TAB.PENDING, label: '待评价' },
   { key: REVIEW_TAB.DONE, label: '已评价' }

shop-app/pages.json

@@ -218,6 +218,12 @@
 						"navigationBarTitleText": "发表评价"
 					}
 				},
+				{
+					"path": "review-view",
+					"style": {
+						"navigationBarTitleText": "查看评价"
+					}
+				},
 				{
 					"path": "aftersale-list",
 					"style": {

shop-app/subpackage/order/detail.vue

@@ -42,6 +42,8 @@
 						:key="item.orderItemId || item.goodsId"
 						:item="item"
 						show-subtotal
+						:review-action="getItemReviewAction(item)"
+						@review="(code) => onItemReview(item, code)"
 					/>
 				</view>
 
@@ -104,10 +106,11 @@
 import { ref, computed } from 'vue'
 import { onLoad, onShow } from '@dcloudio/uni-app'
 import { getOrderDetail } from '@/api/order'
-import { mapOrderDetail } from '@/utils/orderDisplay'
+import { mapOrderDetail, getItemReviewAction } from '@/utils/orderDisplay'
 import { ensureApiToken } from '@/utils/apiAuth'
 import { ORDER_ACTION } from '@/constants/order'
 import { runOrderAction, openPayModal } from '@/utils/orderAction'
+import { goReviewEdit, goReviewView } from '@/utils/orderNav'
 import OrderStatusBar from '@/components/order/OrderStatusBar.vue'
 import OrderGoodsRow from '@/components/order/OrderGoodsRow.vue'
 import { useActionGuard } from '@/utils/actionGuard'
@@ -160,6 +163,19 @@ async function loadDetail() {
 	}
 }
 
+function onItemReview(item, code) {
+	if (!detail.value) return
+	actionGuard.run(() => {
+		if (code === ORDER_ACTION.REVIEW) {
+			goReviewEdit(detail.value.orderId, item.orderItemId)
+			return
+		}
+		if (code === ORDER_ACTION.VIEW_REVIEW) {
+			goReviewView(detail.value.orderId, item.orderItemId)
+		}
+	})
+}
+
 function onAction(code) {
 	if (!detail.value) return
 	actionGuard.run(async () => {

shop-app/subpackage/order/list.vue

@@ -54,13 +54,15 @@
 						<text class="order-card__status">{{ card.statusText }}</text>
 					</view>
 
-					<order-goods-row
-						v-if="card.firstItem"
-						:item="card.firstItem"
-					/>
-					<text v-if="card.itemCount > 1" class="order-card__more">
-						共 {{ card.itemCount }} 件商品
-					</text>
+					<view v-if="card.items && card.items.length" class="order-card__goods">
+						<order-goods-row
+							v-for="(item, idx) in card.items"
+							:key="item.orderItemId || `${card.orderId}-${idx}`"
+							:item="item"
+							:review-action="getItemReviewAction(item)"
+							@review="(code) => onItemReview(card, item, code)"
+						/>
+					</view>
 
 					<view class="order-card__sum">
 						<text class="order-card__time">{{ card.createTime }}</text>
@@ -96,10 +98,10 @@
 import { ref } from 'vue'
 import { onLoad, onShow } from '@dcloudio/uni-app'
 import { listOrders } from '@/api/order'
-import { mapOrderListRow, formatPayCountdown } from '@/utils/orderDisplay'
+import { mapOrderListRow, formatPayCountdown, getItemReviewAction } from '@/utils/orderDisplay'
 import { ORDER_LIST_TABS, ORDER_PAGE_SIZE, ORDER_ACTION } from '@/constants/order'
 import { ensureApiToken } from '@/utils/apiAuth'
-import { goOrderDetail, goReviewList, goAftersaleList } from '@/utils/orderNav'
+import { goOrderDetail, goReviewList, goAftersaleList, goReviewEdit, goReviewView } from '@/utils/orderNav'
 import { runOrderAction, openPayModal } from '@/utils/orderAction'
 import { PAGE_HOME } from '@/utils/pageRoute'
 import { useActionGuard } from '@/utils/actionGuard'
@@ -191,6 +193,18 @@ function onCardClick(card) {
 	goOrderDetail(card.orderId)
 }
 
+function onItemReview(card, item, code) {
+	actionGuard.run(() => {
+		if (code === ORDER_ACTION.REVIEW) {
+			goReviewEdit(card.orderId, item.orderItemId)
+			return
+		}
+		if (code === ORDER_ACTION.VIEW_REVIEW) {
+			goReviewView(card.orderId, item.orderItemId)
+		}
+	})
+}
+
 function onAction(code, card) {
 	actionGuard.run(async () => {
 		if (code === ORDER_ACTION.PAY) {
@@ -203,6 +217,7 @@ function onAction(code, card) {
 		await runOrderAction(code, {
 			orderId: card.orderId,
 			firstItem: card.firstItem,
+			items: card.items,
 			onRefresh: () => reloadList(true)
 		})
 	})
@@ -315,12 +330,8 @@ onShow(() => {
 	font-size: 26rpx;
 	color: #e65100;
 }
-.order-card__more {
-	display: block;
-	margin-top: 4rpx;
-	font-size: 24rpx;
-	color: #999;
-	text-align: right;
+.order-card__goods :deep(.order-goods-row + .order-goods-row) {
+	border-top: 1rpx solid #f5f5f5;
 }
 .order-card__sum {
 	margin-top: 12rpx;

shop-app/subpackage/order/review-edit.vue

@@ -5,6 +5,11 @@
 		</view>
 
 		<template v-else>
+			<view v-if="goodsItem" class="review-edit-card review-edit-goods">
+				<text class="review-edit-card__label">评价商品</text>
+				<order-goods-row :item="goodsItem" />
+			</view>
+
 			<view class="review-edit-card">
 				<text class="review-edit-card__label">评分</text>
 				<view class="review-stars">
@@ -43,15 +48,20 @@
 <script setup>
 import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
+import { getOrderDetail } from '@/api/order'
 import { submitReview } from '@/api/orderReview'
+import { mapOrderDetail } from '@/utils/orderDisplay'
 import { ensureApiToken } from '@/utils/apiAuth'
 import { REVIEW_SCORE_MAX, REVIEW_PIC_MAX, REVIEW_CONTENT_MAX } from '@/constants/order'
 import { useActionGuard } from '@/utils/actionGuard'
 import ImageUploadGrid from '@/components/order/ImageUploadGrid.vue'
+import OrderGoodsRow from '@/components/order/OrderGoodsRow.vue'
 
 const submitGuard = useActionGuard()
 
 const orderId = ref('')
+const orderItemId = ref('')
+const goodsItem = ref(null)
 const score = ref(5)
 const content = ref('')
 const pics = ref([])
@@ -67,11 +77,15 @@ function onSubmit() {
 			uni.showToast({ title: '请选择星级', icon: 'none' })
 			return
 		}
-		await submitReview(orderId.value, {
+		const payload = {
 			score: score.value,
 			content: content.value.trim(),
 			pics: pics.value
-		})
+		}
+		if (orderItemId.value) {
+			payload.orderItemId = Number(orderItemId.value) || orderItemId.value
+		}
+		await submitReview(orderId.value, payload)
 		uni.showToast({ title: '评价成功', icon: 'success' })
 		setTimeout(() => {
 			uni.navigateBack()
@@ -79,13 +93,36 @@ function onSubmit() {
 	})
 }
 
+async function loadGoods() {
+	pageLoading.value = true
+	try {
+		const res = await getOrderDetail(orderId.value)
+		const detail = mapOrderDetail(res.data)
+		const targetId = String(orderItemId.value)
+		goodsItem.value =
+			(detail?.items || []).find((row) => String(row.orderItemId) === targetId) || null
+		if (!goodsItem.value) {
+			uni.showToast({ title: '商品信息不存在', icon: 'none' })
+			setTimeout(() => uni.navigateBack(), 800)
+		}
+	} catch (e) {
+		uni.showToast({ title: '加载失败', icon: 'none' })
+		setTimeout(() => uni.navigateBack(), 800)
+	} finally {
+		pageLoading.value = false
+	}
+}
+
 onLoad((options) => {
 	if (!ensureApiToken(true)) return
 	orderId.value = options.orderId || ''
-	if (!orderId.value) {
+	orderItemId.value = options.orderItemId || ''
+	if (!orderId.value || !orderItemId.value) {
 		uni.showToast({ title: '订单信息缺失', icon: 'none' })
 		setTimeout(() => uni.navigateBack(), 800)
+		return
 	}
+	loadGoods()
 })
 </script>
 
@@ -107,6 +144,9 @@ onLoad((options) => {
 	background: #fff;
 	border-radius: 12rpx;
 }
+.review-edit-goods :deep(.order-goods-row) {
+	padding-top: 0;
+}
 .review-edit-card__label {
 	display: block;
 	margin-bottom: 16rpx;

shop-app/subpackage/order/review-list.vue

@@ -1,254 +1,492 @@
 <template>
+
 	<view class="review-list-page">
+
 		<view class="review-tabs">
+
 			<view
+
 				v-for="tab in tabs"
+
 				:key="tab.key"
+
 				class="review-tabs__item"
+
 				:class="{ 'review-tabs__item--on': activeTab === tab.key }"
+
 				@click="onTabChange(tab.key)"
+
 			>
+
 				{{ tab.label }}
+
 			</view>
+
 		</view>
 
+
+
 		<scroll-view
+
 			class="review-scroll"
+
 			scroll-y
+
 			:style="{ height: scrollHeight }"
+
 			refresher-enabled
+
 			:refresher-triggered="refreshing"
+
 			@refresherrefresh="onPullRefresh"
+
 			@scrolltolower="onLoadMore"
+
 		>
-			<view v-if="loading && !list.length" class="review-state">
+
+			<view v-if="loading && !displayList.length" class="review-state">
+
 				<u-loading-icon mode="circle" />
+
 			</view>
-			<view v-else-if="!list.length" class="review-state">
+
+			<view v-else-if="!displayList.length" class="review-state">
+
 				<u-empty mode="list" :text="emptyText" icon-size="80" />
+
 			</view>
+
 			<template v-else>
-				<view
-					v-for="card in list"
-					:key="card.orderId"
-					class="review-card"
-					@click="onCardClick(card)"
-				>
-					<view class="review-card__head">
-						<text class="review-card__shop">{{ card.shopName }}</text>
-						<text class="review-card__status">{{ card.statusText }}</text>
+
+				<!-- 待评价：仅商品；点商品进订单详情，点「评价」进发表评价 -->
+
+				<template v-if="activeTab === REVIEW_TAB.PENDING">
+
+					<view
+
+						v-for="entry in displayList"
+
+						:key="entry.key"
+
+						class="pending-item"
+
+					>
+
+						<order-goods-row
+
+							:item="entry.item"
+
+							:review-action="getItemReviewAction(entry.item)"
+
+							@click="goOrderDetail(entry.orderId)"
+
+							@review="(code) => onPendingReview(entry, code)"
+
+						/>
+
 					</view>
-					<order-goods-row v-if="card.firstItem" :item="card.firstItem" />
-					<view class="review-card__foot">
-						<text class="review-card__time">{{ card.createTime }}</text>
-						<button
-							v-if="activeTab === 'PENDING'"
-							class="review-card__btn"
-							@click.stop="goReviewEdit(card.orderId)"
-						>
-							去评价
-						</button>
-						<button
-							v-else
-							class="review-card__btn review-card__btn--plain"
-							@click.stop="goOrderDetail(card.orderId)"
-						>
-							查看订单
-						</button>
+
+				</template>
+
+				<!-- 已评价：紧凑摘要卡，点击进入查看评价页 -->
+
+				<template v-else>
+
+					<view
+
+						v-for="entry in displayList"
+
+						:key="entry.key"
+
+						class="done-item"
+
+						@click="onDoneItemClick(entry)"
+
+					>
+
+						<review-done-summary-card
+
+							:item="entry.item"
+
+							:score="entry.score"
+
+							:content-brief="entry.contentBrief"
+
+							:review-time="entry.reviewTime"
+
+						/>
+
 					</view>
-				</view>
+
+				</template>
+
 				<view class="review-footer">
+
 					<text v-if="loadingMore">加载中...</text>
+
 					<text v-else-if="finished">没有更多了</text>
+
 				</view>
+
 			</template>
+
 		</scroll-view>
+
 	</view>
+
 </template>
 
+
+
 <script setup>
+
 import { ref, computed } from 'vue'
+
 import { onLoad, onShow } from '@dcloudio/uni-app'
+
 import { listReviews } from '@/api/orderReview'
-import { mapOrderListRow } from '@/utils/orderDisplay'
-import { REVIEW_TABS, REVIEW_TAB, ORDER_PAGE_SIZE } from '@/constants/order'
+
+import {
+
+	flattenPendingReviewItems,
+
+	mapReviewDoneRow,
+
+	getItemReviewAction
+
+} from '@/utils/orderDisplay'
+
+import { REVIEW_TABS, REVIEW_TAB, ORDER_PAGE_SIZE, ORDER_ACTION } from '@/constants/order'
+
 import { ensureApiToken } from '@/utils/apiAuth'
-import { goOrderDetail, goReviewEdit } from '@/utils/orderNav'
+
+import { goOrderDetail, goReviewView, goReviewEdit } from '@/utils/orderNav'
+
 import OrderGoodsRow from '@/components/order/OrderGoodsRow.vue'
 
+import ReviewDoneSummaryCard from '@/components/order/ReviewDoneSummaryCard.vue'
+
+
+
 const tabs = REVIEW_TABS
+
 const activeTab = ref(REVIEW_TAB.PENDING)
-const list = ref([])
+
+/** 待评价为展平商品行；已评价为摘要行 */
+
+const pendingList = ref([])
+
+const doneList = ref([])
+
 const loading = ref(false)
+
 const loadingMore = ref(false)
+
 const finished = ref(false)
+
 const refreshing = ref(false)
+
 const pageNum = ref(1)
+
 const scrollHeight = ref('600px')
 
+
+
+const displayList = computed(() =>
+
+	activeTab.value === REVIEW_TAB.PENDING ? pendingList.value : doneList.value
+
+)
+
+
+
 const emptyText = computed(() =>
-	activeTab.value === REVIEW_TAB.PENDING ? '暂无待评价订单' : '暂无已评价订单'
+
+	activeTab.value === REVIEW_TAB.PENDING ? '暂无待评价商品' : '暂无已评价'
+
 )
 
+
+
 function calcScrollHeight() {
+
 	try {
+
 		const sys = uni.getSystemInfoSync()
+
 		scrollHeight.value = `${(sys.windowHeight || 600) - 52}px`
+
 	} catch (e) {
+
 		scrollHeight.value = '600px'
+
+	}
+
+}
+
+
+
+function mapRowsByTab(rows) {
+
+	if (activeTab.value === REVIEW_TAB.PENDING) {
+
+		return flattenPendingReviewItems(rows)
+
 	}
+
+	return (rows || []).map(mapReviewDoneRow).filter((row) => row?.item)
+
 }
 
+
+
 async function fetchPage(isReset) {
+
 	if (isReset) {
+
 		loading.value = true
+
 		pageNum.value = 1
+
 		finished.value = false
+
 	} else if (finished.value || loadingMore.value) {
+
 		return
+
 	} else {
+
 		loadingMore.value = true
+
 	}
+
 	try {
+
 		const res = await listReviews({
+
 			tab: activeTab.value,
+
 			pageNum: pageNum.value,
+
 			pageSize: ORDER_PAGE_SIZE
+
 		})
-		const rows = (res.rows || []).map(mapOrderListRow).filter(Boolean)
+
+		const rows = mapRowsByTab(res.rows || [])
+
 		const total = Number(res.total) || 0
+
+		const targetList =
+
+			activeTab.value === REVIEW_TAB.PENDING ? pendingList : doneList
+
 		if (isReset) {
-			list.value = rows
+
+			targetList.value = rows
+
 		} else {
-			list.value = list.value.concat(rows)
+
+			targetList.value = targetList.value.concat(rows)
+
 		}
-		finished.value = list.value.length >= total || rows.length < ORDER_PAGE_SIZE
+
+		finished.value = targetList.value.length >= total || rows.length < ORDER_PAGE_SIZE
+
 		if (!finished.value) pageNum.value += 1
+
 	} catch (e) {
-		if (isReset) list.value = []
+
+		if (isReset) {
+
+			if (activeTab.value === REVIEW_TAB.PENDING) {
+
+				pendingList.value = []
+
+			} else {
+
+				doneList.value = []
+
+			}
+
+		}
+
 	} finally {
+
 		loading.value = false
+
 		loadingMore.value = false
+
 		refreshing.value = false
+
 	}
+
 }
 
+
+
 function onTabChange(key) {
+
 	if (activeTab.value === key) return
+
 	activeTab.value = key
+
 	fetchPage(true)
+
 }
 
+
+
 function onPullRefresh() {
+
 	refreshing.value = true
+
 	fetchPage(true)
+
 }
 
+
+
 function onLoadMore() {
+
 	fetchPage(false)
+
 }
 
-function onCardClick(card) {
-	if (activeTab.value === REVIEW_TAB.PENDING) {
-		goReviewEdit(card.orderId)
-	} else {
-		goOrderDetail(card.orderId)
-	}
+
+
+function onPendingReview(entry, code) {
+
+	if (code !== ORDER_ACTION.REVIEW || !entry?.orderId) return
+
+	goReviewEdit(entry.orderId, entry.item?.orderItemId)
+
 }
 
+
+
+function onDoneItemClick(entry) {
+
+	if (!entry?.orderId) return
+
+	goReviewView(entry.orderId, entry.orderItemId)
+
+}
+
+
+
 onLoad((options) => {
+
 	calcScrollHeight()
+
 	if (options.tab) activeTab.value = options.tab
+
 })
 
+
+
 onShow(() => {
+
 	if (!ensureApiToken(false)) return
+
 	fetchPage(true)
+
 })
+
 </script>
 
+
+
 <style lang="scss" scoped>
+
 .review-list-page {
+
 	height: calc(100vh - 88rpx);
+
 	background: #f5f6f8;
+
 }
+
 .review-tabs {
+
 	display: flex;
+
 	background: #fff;
+
 }
+
 .review-tabs__item {
+
 	flex: 1;
+
 	text-align: center;
+
 	padding: 24rpx 0;
+
 	font-size: 28rpx;
+
 	color: #666;
+
 }
+
 .review-tabs__item--on {
+
 	color: #2e7d32;
+
 	font-weight: 600;
+
 	border-bottom: 4rpx solid #2e7d32;
+
 }
+
 .review-scroll {
+
 	padding: 16rpx 24rpx;
+
 	box-sizing: border-box;
+
 }
+
 .review-state {
+
 	padding: 120rpx 48rpx;
+
 	display: flex;
+
 	flex-direction: column;
+
 	align-items: center;
+
 }
-.review-card {
+
+.pending-item {
+
 	margin-bottom: 16rpx;
-	padding: 20rpx 24rpx;
+
+	padding: 8rpx 24rpx 12rpx;
+
 	background: #fff;
+
 	border-radius: 12rpx;
+
 }
-.review-card__head {
-	display: flex;
-	justify-content: space-between;
-	margin-bottom: 8rpx;
-}
-.review-card__shop {
-	font-size: 28rpx;
-	color: #333;
-	font-weight: 500;
-}
-.review-card__status {
-	font-size: 26rpx;
-	color: #2e7d32;
-}
-.review-card__foot {
-	margin-top: 12rpx;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-.review-card__time {
-	font-size: 24rpx;
-	color: #999;
-}
-.review-card__btn {
-	margin: 0;
-	min-width: 140rpx;
-	height: 56rpx;
-	line-height: 56rpx;
-	padding: 0 20rpx;
-	font-size: 26rpx;
-	color: #fff;
-	background: #2e7d32;
-	border-radius: 28rpx;
-	border: none;
-}
-.review-card__btn--plain {
-	color: #333;
-	background: #fff;
-	border: 1rpx solid #ddd;
+
+.done-item {
+
+	margin-bottom: 16rpx;
+
 }
+
 .review-footer {
+
 	padding: 24rpx;
+
 	text-align: center;
+
 	font-size: 24rpx;
+
 	color: #999;
+
 }
+
 </style>
+

shop-app/subpackage/order/review-view.vue

@@ -0,0 +1,193 @@
+<template>
+	<view class="review-view-page">
+		<view v-if="pageLoading" class="review-view-state">
+			<u-loading-icon mode="circle" />
+		</view>
+
+		<view v-else-if="pageError" class="review-view-state">
+			<u-empty mode="list" :text="pageError" icon-size="80" />
+		</view>
+
+		<template v-else-if="review">
+			<view class="review-view-card">
+				<text class="review-view-card__label">评分</text>
+				<view class="review-stars">
+					<text
+						v-for="n in scoreMax"
+						:key="n"
+						class="review-stars__item"
+						:class="{ 'review-stars__item--on': n <= review.score }"
+					>★</text>
+					<text class="review-stars__text">{{ review.score }} 分</text>
+				</view>
+			</view>
+
+			<view class="review-view-card">
+				<text class="review-view-card__label">评价内容</text>
+				<text class="review-view-content">{{ review.content || '（无文字评价）' }}</text>
+				<view v-if="review.pics && review.pics.length" class="review-view-pics">
+					<image
+						v-for="(pic, idx) in review.pics"
+						:key="idx"
+						class="review-view-pic"
+						:src="pic"
+						mode="aspectFill"
+						@click="previewPics(idx)"
+					/>
+				</view>
+				<text v-if="review.createTime" class="review-view-time">评价时间：{{ review.createTime }}</text>
+			</view>
+
+			<view v-if="review.replyContent" class="review-view-card review-view-reply">
+				<text class="review-view-card__label">商家回复</text>
+				<text class="review-view-content">{{ review.replyContent }}</text>
+				<text v-if="review.replyTime" class="review-view-time">回复时间：{{ review.replyTime }}</text>
+			</view>
+
+			<view v-if="goodsItem" class="review-view-card review-view-goods">
+				<text class="review-view-card__label">评价商品</text>
+				<order-goods-row :item="goodsItem" />
+			</view>
+		</template>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getOrderDetail } from '@/api/order'
+import { getOrderReview } from '@/api/orderReview'
+import { mapOrderDetail, mapOrderReview } from '@/utils/orderDisplay'
+import { ensureApiToken } from '@/utils/apiAuth'
+import { REVIEW_SCORE_MAX } from '@/constants/order'
+import OrderGoodsRow from '@/components/order/OrderGoodsRow.vue'
+
+const orderId = ref('')
+const orderItemId = ref('')
+const review = ref(null)
+const goodsItem = ref(null)
+const pageLoading = ref(false)
+const pageError = ref('')
+const scoreMax = REVIEW_SCORE_MAX
+
+async function loadReview() {
+	if (!orderId.value || !orderItemId.value) {
+		pageError.value = '评价信息缺失'
+		return
+	}
+	pageLoading.value = true
+	pageError.value = ''
+	try {
+		const [reviewRes, orderRes] = await Promise.all([
+			getOrderReview(orderId.value, orderItemId.value),
+			getOrderDetail(orderId.value)
+		])
+		review.value = mapOrderReview(reviewRes.data)
+		if (!review.value) {
+			pageError.value = '暂无评价内容'
+			return
+		}
+		const detail = mapOrderDetail(orderRes.data)
+		const targetId = String(orderItemId.value)
+		goodsItem.value =
+			(detail?.items || []).find((row) => String(row.orderItemId) === targetId) || null
+	} catch (e) {
+		pageError.value = '加载失败'
+		review.value = null
+		goodsItem.value = null
+	} finally {
+		pageLoading.value = false
+	}
+}
+
+function previewPics(index) {
+	const urls = review.value?.pics || []
+	uni.previewImage({ urls, current: urls[index] })
+}
+
+onLoad((options) => {
+	if (!ensureApiToken(true)) return
+	orderId.value = options.orderId || ''
+	orderItemId.value = options.orderItemId || ''
+	if (!orderId.value || !orderItemId.value) {
+		pageError.value = '参数错误'
+		return
+	}
+	loadReview()
+})
+</script>
+
+<style lang="scss" scoped>
+.review-view-page {
+	min-height: 100vh;
+	padding: 24rpx;
+	background: #f5f6f8;
+	box-sizing: border-box;
+}
+.review-view-state {
+	padding: 120rpx 0;
+	display: flex;
+	justify-content: center;
+}
+.review-view-card {
+	margin-bottom: 16rpx;
+	padding: 24rpx;
+	background: #fff;
+	border-radius: 12rpx;
+}
+.review-view-card__label {
+	display: block;
+	margin-bottom: 16rpx;
+	font-size: 28rpx;
+	color: #333;
+	font-weight: 500;
+}
+.review-stars {
+	display: flex;
+	align-items: center;
+	gap: 8rpx;
+}
+.review-stars__item {
+	font-size: 40rpx;
+	color: #ddd;
+}
+.review-stars__item--on {
+	color: #ffb300;
+}
+.review-stars__text {
+	margin-left: 8rpx;
+	font-size: 26rpx;
+	color: #666;
+}
+.review-view-content {
+	font-size: 28rpx;
+	color: #444;
+	line-height: 1.6;
+	white-space: pre-wrap;
+	word-break: break-word;
+}
+.review-view-pics {
+	margin-top: 16rpx;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 12rpx;
+}
+.review-view-pic {
+	width: 160rpx;
+	height: 160rpx;
+	border-radius: 8rpx;
+	background: #eee;
+}
+.review-view-time {
+	display: block;
+	margin-top: 16rpx;
+	font-size: 24rpx;
+	color: #999;
+}
+.review-view-reply {
+	background: #f9fff9;
+}
+.review-view-goods :deep(.order-goods-row) {
+	padding-top: 0;
+}
+</style>

shop-app/utils/orderAction.js

@@ -5,7 +5,7 @@ const payModalGuard = useActionGuard()
 const confirmReceiveGuard = useActionGuard()
 import { ORDER_ACTION } from '@/constants/order'
 import { goGoodsDetail } from '@/utils/goodsDetail'
-import { goReviewEdit, goAftersaleSubmit } from '@/utils/orderNav'
+import { goReviewEdit, goReviewView, goReviewList, goAftersaleSubmit } from '@/utils/orderNav'
 import { PAGE_ORDER_REVIEW_LIST } from '@/utils/pageRoute'
 
 /**
@@ -21,10 +21,14 @@ export function runOrderAction(code, ctx = {}) {
     case ORDER_ACTION.CONFIRM_RECEIVE:
       return doConfirmReceive(orderId, ctx.onRefresh)
     case ORDER_ACTION.REVIEW:
-      goReviewEdit(orderId)
+      goReviewEdit(orderId, ctx.orderItemId)
       return Promise.resolve()
     case ORDER_ACTION.VIEW_REVIEW:
-      uni.navigateTo({ url: `${PAGE_ORDER_REVIEW_LIST}?tab=DONE&orderId=${orderId}` })
+      if (ctx.orderItemId) {
+        goReviewView(orderId, ctx.orderItemId)
+      } else {
+        uni.navigateTo({ url: `${PAGE_ORDER_REVIEW_LIST}?tab=DONE&orderId=${orderId}` })
+      }
       return Promise.resolve()
     case ORDER_ACTION.AFTERSALE:
       return openAftersalePicker(ctx)
@@ -94,7 +98,7 @@ function doConfirmReceive(orderId, onRefresh) {
               cancelText: '稍后',
               success: (r) => {
                 if (r.confirm) {
-                  goReviewEdit(orderId)
+                  goReviewList('PENDING')
                 }
               }
             })

shop-app/utils/orderDisplay.js

@@ -1,15 +1,50 @@
 import { resolveFileUrl } from '@/utils/image'
 import { formatPrice } from '@/utils/format'
 import { parseCartSpecText } from '@/utils/cartSpec'
-import { ORDER_ACTION_LABEL } from '@/constants/order'
+import {
+  ORDER_ACTION,
+  ORDER_ACTION_LABEL,
+  REVIEW_ITEM_STATUS,
+  AFTERSALE_APPLY_TYPE_OPTIONS
+} from '@/constants/order'
+
+/** 订单级不再展示的评价按钮（改在商品行） */
+const ORDER_LEVEL_REVIEW_CODES = [ORDER_ACTION.REVIEW, ORDER_ACTION.VIEW_REVIEW]
 
 const GOODS_PLACEHOLDER = '/static/logo.png'
 const SHOP_PLACEHOLDER = '/static/logo.png'
 
+/** 后端凭证图可能是逗号拼接字符串，统一转成数组 */
+function normalizePicList(raw) {
+  if (!raw) return []
+  if (Array.isArray(raw)) return raw.filter(Boolean)
+  if (typeof raw === 'string') {
+    return raw.split(',').map((s) => s.trim()).filter(Boolean)
+  }
+  return []
+}
+
+function mapAftersaleApplyTypeText(applyType) {
+  const hit = AFTERSALE_APPLY_TYPE_OPTIONS.find((opt) => opt.value === applyType)
+  return hit ? hit.label : applyType || ''
+}
+
+function mapAftersaleStatusText(status) {
+  if (status === '2') return '售后完结'
+  if (status === '1') return '商家处理中'
+  return status || ''
+}
+
+function mapAftersaleProgressText(stage) {
+  if (stage === 'FINISHED') return '商家处理 → 售后完结（当前：售后完结）'
+  return '商家处理 → 售后完结（当前：商家处理）'
+}
+
 function mapFirstItem(item) {
   if (!item) return null
   const specText = (item.goodsSpec || item.specText || '').trim() || '默认'
   return {
+    orderItemId: item.itemId || item.orderItemId,
     goodsId: item.goodsId,
     goodsName: item.goodsName || '',
     displayPic: resolveFileUrl(item.goodsImage || item.mainPic) || GOODS_PLACEHOLDER,
@@ -17,7 +52,9 @@ function mapFirstItem(item) {
     specList: parseCartSpecText(specText),
     quantity: Number(item.quantity) || 1,
     unitPrice: item.unitPrice,
-    priceText: formatPrice(item.unitPrice)
+    priceText: formatPrice(item.unitPrice),
+    reviewStatus: item.reviewStatus,
+    reviewId: item.reviewId
   }
 }
 
@@ -37,12 +74,15 @@ function mapOrderItemRow(row) {
     priceText: formatPrice(row.unitPrice || row.salePrice),
     lineAmount: row.lineAmount || row.subtotal,
     lineAmountText: formatPrice(row.lineAmount || row.subtotal),
-    buyerRemark: row.buyerRemark || ''
+    buyerRemark: row.buyerRemark || '',
+    reviewStatus: row.reviewStatus,
+    reviewId: row.reviewId
   }
 }
 
 function mapActions(actions) {
   return (actions || [])
+    .filter((code) => !ORDER_LEVEL_REVIEW_CODES.includes(code))
     .map((code) => ({
       code,
       label: ORDER_ACTION_LABEL[code] || code
@@ -50,10 +90,77 @@ function mapActions(actions) {
     .filter((item) => item.label)
 }
 
+/** 交易成功商品行：待评价→评价，已评价→查看评价 */
+export function getItemReviewAction(item) {
+  if (!item || !item.reviewStatus) return null
+  if (item.reviewStatus === REVIEW_ITEM_STATUS.PENDING) {
+    return {
+      code: ORDER_ACTION.REVIEW,
+      label: ORDER_ACTION_LABEL[ORDER_ACTION.REVIEW]
+    }
+  }
+  if (item.reviewStatus === REVIEW_ITEM_STATUS.DONE) {
+    return {
+      code: ORDER_ACTION.VIEW_REVIEW,
+      label: ORDER_ACTION_LABEL[ORDER_ACTION.VIEW_REVIEW]
+    }
+  }
+  return null
+}
+
+/** 评价列表「待评价」：订单行展平为待评价商品行 */
+export function flattenPendingReviewItems(rows) {
+  const result = []
+  for (const row of rows || []) {
+    const card = mapOrderListRow(row)
+    if (!card) continue
+    for (const item of card.items || []) {
+      if (item.reviewStatus !== REVIEW_ITEM_STATUS.PENDING) continue
+      result.push({
+        key: `pending-${card.orderId}-${item.orderItemId}`,
+        orderId: card.orderId,
+        item
+      })
+    }
+  }
+  return result
+}
+
+/** 评价列表「已评价」行 → 紧凑卡片模型 */
+export function mapReviewDoneRow(row) {
+  if (!row) return null
+  const item = mapFirstItem(row.firstItem)
+  const content = (row.content || '').trim()
+  return {
+    key: `done-${row.reviewId || row.orderId}-${item?.orderItemId || 0}`,
+    reviewId: row.reviewId,
+    orderId: row.orderId,
+    orderItemId: item?.orderItemId,
+    score: Number(row.score) || 0,
+    content,
+    contentBrief: trimText(content, 48, '此用户未填写评价内容'),
+    reviewTime: row.reviewTime || row.createTime || '',
+    item
+  }
+}
+
+function trimText(text, maxLen, emptyFallback = '') {
+  const s = (text || '').trim()
+  if (!s) return emptyFallback
+  if (s.length <= maxLen) return s
+  return `${s.slice(0, maxLen)}…`
+}
+
 /** 列表行 VO → 卡片模型 */
 export function mapOrderListRow(row) {
   if (!row) return null
-  const firstItem = mapFirstItem(row.firstItem)
+  const rawItems = Array.isArray(row.items) && row.items.length
+    ? row.items
+    : row.firstItem
+      ? [row.firstItem]
+      : []
+  const items = rawItems.map(mapFirstItem).filter(Boolean)
+  const firstItem = items[0] || mapFirstItem(row.firstItem)
   return {
     orderId: row.orderId,
     orderNo: row.orderNo || '',
@@ -67,7 +174,8 @@ export function mapOrderListRow(row) {
     goodsAmount: row.goodsAmount,
     freightAmount: row.freightAmount,
     createTime: row.createTime || '',
-    itemCount: Number(row.itemCount) || 0,
+    itemCount: Number(row.itemCount) || items.length,
+    items,
     firstItem,
     payRemainSeconds: row.payRemainSeconds,
     reviewStatus: row.reviewStatus,
@@ -152,9 +260,12 @@ export function mapAftersaleListRow(row) {
     aftersaleId: row.aftersaleId,
     aftersaleNo: row.aftersaleNo || '',
     aftersaleStatus: row.aftersaleStatus,
-    statusText: row.aftersaleStatusText || row.statusText || '',
+    statusText:
+      row.aftersaleStatusText ||
+      row.statusText ||
+      mapAftersaleStatusText(row.aftersaleStatus),
     applyType: row.applyType,
-    applyTypeText: row.applyTypeText || '',
+    applyTypeText: row.applyTypeText || mapAftersaleApplyTypeText(row.applyType),
     applyReason: row.applyReason || '',
     applyAmount: row.applyAmount,
     applyAmountText: formatPrice(row.applyAmount),
@@ -172,21 +283,29 @@ export function mapAftersaleDetail(data) {
   if (!data) return null
   const info = data.info || data
   const specText = (info.goodsSpec || info.specText || '').trim() || '默认'
+  const progressStage = data.progressStage || info.progressStage || ''
+  const aftersaleStatus = info.aftersaleStatus || data.aftersaleStatus
   return {
     aftersaleId: info.aftersaleId || data.aftersaleId,
     aftersaleNo: info.aftersaleNo || data.aftersaleNo || '',
-    aftersaleStatus: info.aftersaleStatus || data.aftersaleStatus,
-    statusText: info.aftersaleStatusText || info.statusText || '',
-    progress: data.progress || info.progress || '',
-    progressText: data.progressText || info.progressText || '',
+    aftersaleStatus,
+    statusText:
+      info.aftersaleStatusText ||
+      info.statusText ||
+      mapAftersaleStatusText(aftersaleStatus),
+    progress: data.progress || info.progress || progressStage,
+    progressText:
+      data.progressText ||
+      info.progressText ||
+      mapAftersaleProgressText(progressStage),
     applyType: info.applyType,
-    applyTypeText: info.applyTypeText || '',
+    applyTypeText: info.applyTypeText || mapAftersaleApplyTypeText(info.applyType),
     applyReason: info.applyReason || '',
     returnQuantity: info.returnQuantity,
     applyAmount: info.applyAmount,
     applyAmountText: formatPrice(info.applyAmount),
     description: info.description || '',
-    evidencePics: (info.evidencePics || []).map((p) => resolveFileUrl(p) || p),
+    evidencePics: normalizePicList(info.evidencePics).map((p) => resolveFileUrl(p) || p),
     createTime: info.createTime || '',
     finishTime: info.finishTime || '',
     processResult: data.processResult || info.processResult || '',

shop-app/utils/orderNav.js

@@ -3,6 +3,7 @@ import {
   PAGE_ORDER_DETAIL,
   PAGE_ORDER_REVIEW_LIST,
   PAGE_ORDER_REVIEW_EDIT,
+  PAGE_ORDER_REVIEW_VIEW,
   PAGE_ORDER_AFTERSALE_LIST,
   PAGE_ORDER_AFTERSALE_DETAIL,
   PAGE_ORDER_AFTERSALE_SUBMIT
@@ -36,11 +37,23 @@ export function goReviewList(tab = 'PENDING') {
   })
 }
 
-/** 评价编辑 */
-export function goReviewEdit(orderId) {
+/** 评价编辑（一行一评须传 orderItemId） */
+export function goReviewEdit(orderId, orderItemId) {
   if (!orderId) return
+  const parts = [`orderId=${orderId}`]
+  if (orderItemId != null && orderItemId !== '') {
+    parts.push(`orderItemId=${orderItemId}`)
+  }
   uni.navigateTo({
-    url: `${PAGE_ORDER_REVIEW_EDIT}?orderId=${orderId}`
+    url: `${PAGE_ORDER_REVIEW_EDIT}?${parts.join('&')}`
+  })
+}
+
+/** 查看商品行评价 */
+export function goReviewView(orderId, orderItemId) {
+  if (!orderId || orderItemId == null || orderItemId === '') return
+  uni.navigateTo({
+    url: `${PAGE_ORDER_REVIEW_VIEW}?orderId=${orderId}&orderItemId=${orderItemId}`
   })
 }
 

shop-app/utils/pageRoute.js

@@ -81,6 +81,8 @@ export const PAGE_ORDER_DETAIL = '/subpackage/order/detail'
 export const PAGE_ORDER_REVIEW_LIST = '/subpackage/order/review-list'
 /** 评价编辑 */
 export const PAGE_ORDER_REVIEW_EDIT = '/subpackage/order/review-edit'
+/** 查看评价 */
+export const PAGE_ORDER_REVIEW_VIEW = '/subpackage/order/review-view'
 /** 售后列表 */
 export const PAGE_ORDER_AFTERSALE_LIST = '/subpackage/order/aftersale-list'
 /** 售后详情 */