✨ 商品详情：评论列表

pages/goods/components/detail/comment-item.vue

@@ -1,95 +1,94 @@
+<!-- 商品评论项 -->
 <template>
   <view>
+    <!-- 用户评论 -->
     <view class="user ss-flex ss-m-b-14">
       <view class="ss-m-r-20 ss-flex">
-        <image class="avatar" :src="sheep.$url.cdn(item.user_avatar)"></image>
-      </view>
-      <view class="nickname ss-m-r-20">
-        {{ item.userNickname }}
+        <image class="avatar" :src="item.userAvatar"></image>
       </view>
+      <view class="nickname ss-m-r-20">{{ item.userNickname }}</view>
       <view class="">
         <uni-rate :readonly="true" v-model="item.scores" size="18" />
       </view>
     </view>
-    <view class="content">
-      {{ item.content }}
-    </view>
+    <view class="content"> {{ item.content }} </view>
     <view class="ss-m-t-24" v-if="item.picUrls?.length">
       <scroll-view class="scroll-box" scroll-x scroll-anchoring>
         <view class="ss-flex">
-          <view v-for="(item, index) in item.picUrls" :key="item" class="ss-m-r-10">
-            <su-image class="content-img" isPreview :previewList="state.commentImages" :current="index" :src="item"
-              :height="120" :width="120" mode="aspectFill"></su-image>
+          <view v-for="(picUrl, index) in item.picUrls" :key="picUrl" class="ss-m-r-10">
+            <su-image
+              class="content-img"
+              isPreview
+              :previewList="item.picUrls"
+              :current="index"
+              :src="picUrl"
+              :height="120"
+              :width="120"
+              mode="aspectFill"
+            />
           </view>
         </view>
       </scroll-view>
     </view>
-    <view class="ss-m-t-20 reply-box" v-if="item.reply_time">
+    <!-- 商家回复 -->
+    <view class="ss-m-t-20 reply-box" v-if="item.replyTime">
       <view class="reply-title">商家回复：</view>
-      <view class="reply-content">{{ item.reply_content }}</view>
+      <view class="reply-content">{{ item.replyContent }}</view>
     </view>
   </view>
 </template>
 
 <script setup>
-import sheep from '@/sheep';
-import { reactive } from 'vue';
-const props = defineProps({
-  item: {
-    type: Object,
-    default() { },
-  },
-});
-const state = reactive({
-  commentImages: [],
-});
-props.item.images?.forEach((i) => {
-  state.commentImages.push(sheep.$url.cdn(i));
-});
+  const props = defineProps({
+    item: {
+      type: Object,
+      default() {},
+    },
+  });
 </script>
 
 <style lang="scss" scoped>
-.avatar {
-  width: 52rpx;
-  height: 52rpx;
-  border-radius: 50%;
-}
+  .avatar {
+    width: 52rpx;
+    height: 52rpx;
+    border-radius: 50%;
+  }
 
-.nickname {
-  font-size: 26rpx;
-  font-weight: 500;
-  color: #999999;
-}
+  .nickname {
+    font-size: 26rpx;
+    font-weight: 500;
+    color: #999999;
+  }
 
-.content {
-  width: 636rpx;
-  font-size: 26rpx;
-  font-weight: 400;
-  color: #333333;
-}
+  .content {
+    width: 636rpx;
+    font-size: 26rpx;
+    font-weight: 400;
+    color: #333333;
+  }
 
-.reply-box {
-  position: relative;
-  background: #f8f8f8;
-  border-radius: 8rpx;
-  padding: 16rpx;
-}
+  .reply-box {
+    position: relative;
+    background: #f8f8f8;
+    border-radius: 8rpx;
+    padding: 16rpx;
+  }
 
-.reply-title {
-  position: absolute;
-  left: 16rpx;
-  top: 16rpx;
-  font-weight: 400;
-  font-size: 26rpx;
-  line-height: 40rpx;
-  color: #333333;
-}
+  .reply-title {
+    position: absolute;
+    left: 16rpx;
+    top: 16rpx;
+    font-weight: 400;
+    font-size: 26rpx;
+    line-height: 40rpx;
+    color: #333333;
+  }
 
-.reply-content {
-  text-indent: 128rpx;
-  font-weight: 400;
-  font-size: 26rpx;
-  line-height: 40rpx;
-  color: #333333;
-}
+  .reply-content {
+    text-indent: 128rpx;
+    font-weight: 400;
+    font-size: 26rpx;
+    line-height: 40rpx;
+    color: #333333;
+  }
 </style>

pages/goods/components/detail/detail-comment-card.vue

@@ -1,3 +1,4 @@
+<!-- 商品评论的卡片 -->
 <template>
   <view class="detail-comment-card bg-white">
     <view class="card-header ss-flex ss-col-center ss-row-between ss-p-b-30">
@@ -12,19 +13,20 @@
         v-if="state.commentList.length > 0"
       >
         <button class="ss-reset-button more-btn">查看全部</button>
-        <text class="cicon-forward"></text>
+        <text class="cicon-forward" />
       </view>
     </view>
+    <!-- 评论列表 -->
     <view class="card-content">
       <view class="comment-box ss-p-y-30" v-for="item in state.commentList" :key="item.id">
-        <comment-item :item="item"></comment-item>
+        <comment-item :item="item" />
       </view>
       <s-empty
         v-if="state.commentList.length === 0"
         paddingTop="0"
         icon="/static/comment-empty.png"
         text="期待您的第一个评价"
-      ></s-empty>
+      />
     </view>
   </view>
 </template>
@@ -32,25 +34,27 @@
 <script setup>
   import { reactive, onBeforeMount } from 'vue';
   import sheep from '@/sheep';
+  import CommentApi from '@/sheep/api/product/comment';
   import commentItem from './comment-item.vue';
+
   const props = defineProps({
     goodsId: {
       type: [Number, String],
       default: 0,
     },
   });
+
   const state = reactive({
-    commentList: [],
-    total: 0,
+    commentList: [], // 评论列表，只展示最近的 3 条
+    total: 0, // 总评论数
   });
+
   async function getComment(id) {
-    const { data } = await sheep.$api.goods.comment(id, {
-      list_rows: 3,
-    });  
-	 const {data:datas} = await sheep.$api.goods.comment2(id);
-    state.commentList = data;
-    state.total = datas.total;
+    const { data } = await CommentApi.getCommentPage(id, 1, 3, 0);
+    state.commentList = data.list;
+    state.total = data.total;
   }
+
   onBeforeMount(() => {
     getComment(props.goodsId);
   });