红包逻辑需要重构

pages/mall/comment.vue

@@ -17,6 +17,7 @@
   const productId = ref('')
   const listData = ref([])
   const paging = ref(null)
+  const total = ref(0)
 
   const onTop = id => {
     formData.type = id
@@ -24,23 +25,31 @@
 
   const getList = async (pageNum, pageSize) => {
     try {
+      console.log(listData.value.length, '====')
       const res = await getProductCommentList({
         productId: productId.value,
         pageNum,
         pageSize
       })
+      total.value = res.total
       paging.value.complete(res.rows)
     } catch (err) {
       paging.value.complete(false)
     }
   }
 
+  const onImage = img => {
+    uni.previewImage({
+      urls: [img]
+    })
+  }
+
   onLoad(e => {
     productId.value = e.productId
   })
 
   onShow(() => {
-    getList()
+    getList(1, 15)
   })
 </script>
 
@@ -51,6 +60,7 @@
     :default-page-size="15"
     safe-area-inset-bottom
     use-safe-area-placeholder
+    :show-loading-more-no-more-view="total !== listData.length"
     :auto="false"
     @query="getList"
   >
@@ -69,7 +79,19 @@
 
       <!-- 卡片位置 -->
       <view v-for="item in listData" :key="item.id" class="card-box">
+        <uni-icons
+          v-if="item.isAnonymous"
+          type="contact-filled"
+          size="90rpx"
+          class="avatar"
+          style="
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          "
+        ></uni-icons>
         <image
+          v-else
           :src="item.avatar || '/static/images/public/random1.png'"
           mode="scaleToFill"
           class="avatar"
@@ -77,7 +99,9 @@
         <!-- 右边 -->
         <view class="right-box">
           <view class="name_box">
-            <text class="name">{{ item.userName }}</text>
+            <text class="name">
+              {{ item.isAnonymous ? '匿名用户' : item.userName }}
+            </text>
             <uni-rate readonly :size="24" :value="item.rating" />
           </view>
           <view class="rate-box">
@@ -104,15 +128,16 @@
           <text class="content">
             {{ item.content }}
           </text>
-          <!-- <view class="img-box">
-          <image
-            v-for="item in 5"
-            src="/static/images/public/random1.png"
-            mode="scaleToFill"
-            class="bottom-img"
-          ></image>
-        </view>
-        <view class="bottom-content">
+          <view v-if="item.imageUrls" class="img-box">
+            <image
+              :src="item.imageUrls"
+              lazy-load
+              mode="scaleToFill"
+              class="bottom-img"
+              @click="onImage(item.imageUrls)"
+            ></image>
+          </view>
+          <!-- <view class="bottom-content">
           <view class="name-box">
             <text>名字：</text>
             <text>内容</text>
@@ -128,7 +153,7 @@
         <cb-button
           @click="navigateTo('/pages/mall/add-comment', { productId })"
         >
-          确认添加
+          添加评论
         </cb-button>
       </bottom-view>
     </template>
@@ -139,7 +164,7 @@
   // @import './styles/public.scss';
   @import '@/styles/top-selector.scss';
   .comment-box {
-    padding: 32rpx 24rpx;
+    padding: 32rpx 24rpx 180rpx 24rpx;
     .card-box {
       margin-top: 36rpx;
       display: flex;