评论商品接口有问题

pages/mall/comment.vue

@@ -1,5 +1,8 @@
 <script setup>
   import { ref, reactive } from 'vue'
+  import { onLoad, onShow } from '@dcloudio/uni-app'
+  import { getProductCommentList } from '@/api/mall'
+  import { navigateTo } from '../../utils/router'
 
   const topNav = ref([
     { name: '全部', id: '1' },
@@ -11,61 +14,97 @@
   const formData = reactive({
     type: '1'
   })
+  const productId = ref('')
+  const listData = ref([])
+  const paging = ref(null)
 
   const onTop = id => {
     formData.type = id
   }
+
+  const getList = async (pageNum, pageSize) => {
+    try {
+      const res = await getProductCommentList({
+        productId: productId.value,
+        pageNum,
+        pageSize
+      })
+      paging.value.complete(res.rows)
+    } catch (err) {
+      paging.value.complete(false)
+    }
+  }
+
+  onLoad(e => {
+    productId.value = e.productId
+  })
+
+  onShow(() => {
+    getList()
+  })
 </script>
 
 <template>
-  <view class="comment-box">
-    <view class="top-options">
-      <view
-        v-for="(item, index) in topNav"
-        :key="index"
-        :class="{ active: item.id === formData.type }"
-        class="text"
-        @click="onTop(item.id)"
-      >
-        {{ item.name }}
-      </view>
-    </view>
+  <z-paging
+    ref="paging"
+    v-model="listData"
+    :default-page-size="15"
+    safe-area-inset-bottom
+    use-safe-area-placeholder
+    :auto="false"
+    @query="getList"
+  >
+    <view class="comment-box">
+      <!-- <view class="top-options">
+        <view
+          v-for="(item, index) in topNav"
+          :key="index"
+          :class="{ active: item.id === formData.type }"
+          class="text"
+          @click="onTop(item.id)"
+        >
+          {{ item.name }}
+        </view>
+      </view> -->
 
-    <!-- 卡片位置 -->
-    <view class="card-box">
-      <image
-        src="/static/images/public/random1.png"
-        mode="scaleToFill"
-        class="avatar"
-      ></image>
-      <!-- 右边 -->
-      <view class="right-box">
-        <text class="name">名字</text>
-        <view class="rate-box">
-          <view class="date">
-            <text>2022-2-2</text>
-            <text>重庆市</text>
+      <!-- 卡片位置 -->
+      <view v-for="item in listData" :key="item.id" class="card-box">
+        <image
+          :src="item.avatar || '/static/images/public/random1.png'"
+          mode="scaleToFill"
+          class="avatar"
+        ></image>
+        <!-- 右边 -->
+        <view class="right-box">
+          <view class="name_box">
+            <text class="name">{{ item.userName }}</text>
+            <uni-rate readonly :size="24" :value="item.rating" />
           </view>
-          <view class="star">
+          <view class="rate-box">
+            <view class="date">
+              <text>{{ item.createTime }}</text>
+              <!-- <text>重庆市</text> -->
+            </view>
+            <!-- <view class="star">
             <view class="like">
               <uni-icons
                 type="hand-up"
                 size="16"
                 color="#74747480"
               ></uni-icons>
-              22
+              <text v-if="item.likeCount">{{ item.likeCount }}</text>
             </view>
             <uni-icons
               type="chat"
               size="16"
               color="#74747480"
             ></uni-icons>
+          </view> -->
           </view>
-        </view>
-        <text class="content">
-          视频讲的真好，全面升级，讲的真的全面，老师 徒弟吗？
-        </text>
-        <view class="img-box">
+          <text class="content">
+            {{ item.content }}
+          </text>
+          <!-- <view class="img-box">
           <image
             v-for="item in 5"
             src="/static/images/public/random1.png"
@@ -79,10 +118,21 @@
             <text>内容</text>
           </view>
           <text class="expand">共三条回复></text>
+        </view> -->
         </view>
       </view>
     </view>
-  </view>
+    <!-- 底部按钮 -->
+    <template #bottom>
+      <bottom-view position="absolute">
+        <cb-button
+          @click="navigateTo('/pages/mall/add-comment', { productId })"
+        >
+          确认添加
+        </cb-button>
+      </bottom-view>
+    </template>
+  </z-paging>
 </template>
 
 <style lang="scss" scoped>
@@ -96,6 +146,7 @@
       .avatar {
         width: 64rpx;
         height: 64rpx;
+        border-radius: 64rpx;
         flex-shrink: 0;
         margin-right: 16rpx;
       }
@@ -109,10 +160,16 @@
         text-align: left;
         font-style: normal;
         text-transform: none;
-        .name {
-          font-size: 28rpx;
-          color: #333333;
+        .name_box {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .name {
+            font-size: 28rpx;
+            color: #333333;
+          }
         }
+
         .rate-box {
           display: flex;
           align-items: center;