✨ 商品详情：评论列表

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>