upd

frontend/src/views/ProductDetail.vue

@@ -27,6 +27,16 @@
         </el-col>
       </el-row>
     </el-card>
+    <el-card class="reviews">
+      <div class="review-title">用户评价</div>
+      <div v-if="reviews.length === 0" class="review-empty">暂无评价</div>
+      <div v-else>
+        <div v-for="item in reviews" :key="item.id" class="review-item">
+          <el-rate :value="item.rating" disabled />
+          <div class="review-content">{{ item.content }}</div>
+        </div>
+      </div>
+    </el-card>
   </div>
 </template>
 
@@ -34,6 +44,7 @@
 import { getProduct } from '../api/product';
 import { listAddresses } from '../api/address';
 import { createOrder } from '../api/order';
+import { listReviewsByProduct } from '../api/review';
 import { codeToText } from 'element-china-area-data';
 
 export default {
@@ -43,12 +54,14 @@ export default {
       quantity: 1,
       addresses: [],
       addressId: null,
+      reviews: [],
       placeholder: 'https://via.placeholder.com/400x300?text=Flower'
     };
   },
   created() {
     this.loadDetail();
     this.loadAddresses();
+    this.loadReviews();
   },
   methods: {
     loadDetail() {
@@ -92,6 +105,11 @@ export default {
         const order = res.data.data.order;
         this.$router.push(`/orders?highlight=${order.id}`);
       });
+    },
+    loadReviews() {
+      listReviewsByProduct(this.$route.params.id).then((res) => {
+        this.reviews = res.data.data || [];
+      });
     }
   }
 };
@@ -123,4 +141,23 @@ export default {
   margin-right: 12px;
   width: 300px;
 }
+.reviews {
+  margin-top: 16px;
+}
+.review-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+.review-empty {
+  color: #909399;
+}
+.review-item {
+  padding: 10px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+.review-content {
+  margin-top: 6px;
+  color: #606266;
+}
 </style>