评论列表

src/views/mall/components/details/describe.vue

@@ -13,7 +13,7 @@ const props = defineProps({
     default: '',
   },
 });
-console.log('content:', props.content)
+// console.log('content:', props.content)
 </script>
 <style lang="scss" scoped>
 </style>

src/views/mall/components/details/detail-comment-card.vue

@@ -4,31 +4,36 @@
     <div class="card-header d-flex align-center justify-space-between pb-6">
       <div class="resume-header">
         <div class="resume-title">
-          评价<span class="des ml-1">({{ state.total }})</span>
+          评价
+          <span class="des ml-1">({{ state.total }})</span>
         </div>
       </div>
-      <!-- @tap="sheep.$router.go('/pages/goods/comment/list', { id: goodsId })" -->
-      <div
-        class="ss-flex ss-col-center"
-        @click="null"
-        v-if="state.commentList.length > 0"
-      >
-        <v-btn variant="text" class="ss-reset-button more-btn">查看全部</v-btn>
-        <span class="cicon-forward" />
-      </div>
     </div>
+    <div v-if="state.total === 0" style="margin: 30px auto; color: #777;">期待您的第一个评价</div>
     <!-- 评论列表 -->
-    <div class="card-content">
-      <div class="comment-box ss-p-y-30" v-for="item in state.commentList" :key="item.id">
-        <comment-item :item="item" />
+    <div v-else>
+      <v-tabs v-model="currentTab" align-tabs="start" color="#ff8a04" @update:model-value="onTabsChange">
+        <v-tab v-for="item of typeList" :key="item.name" :value="item.tab">{{ item.name }}</v-tab>
+      </v-tabs>
+      <div class="card-content mt-5 px-3">
+        <template v-if="state.commentList.length">
+          <div class="comment-box" v-for="item in state.commentList" :key="item.id">
+            <comment-item :item="item" />
+          </div>
+          <CtPagination
+            :total="query.total"
+            :page="query.pageNo"
+            :limit="query.pageSize"
+            @handleChange="handleChangePage"
+          ></CtPagination>
+        </template>
       </div>
-      <div v-if="state.commentList.length === 0" style="margin: 30px auto; color: #777;">期待您的第一个评价</div>
     </div>
   </div>
 </template>
 
 <script setup>
-  import { reactive, onBeforeMount } from 'vue';
+  import { reactive, onBeforeMount, ref } from 'vue';
   import { getCommentPage } from '@/api/mall/product'
   import commentItem from './comment-item.vue';
 
@@ -43,15 +48,52 @@
     commentList: [], // 评论列表，只展示最近的 3 条
     total: 0, // 总评论数
   });
+  
+  const typeList = [
+    { type: 0, name: '全部' },
+    { type: 1, name: '好评' },
+    { type: 2, name: '中评' },
+    { type: 3, name: '差评' },
+  ]
+  const currentTab = ref(0)
+  const query = ref({
+    total: 0, // 选项卡
+    pageNo: 1,
+    pageSize: 10,
+  })
 
-  async function getComment(id) {
-    const res = await getCommentPage(id, 1, 3, 0);
+  async function getList(id) {
+    id = id || props.goodsId
+    // const res = await getCommentPage(id, 1, 3, 0);
+    const res = await getCommentPage(
+      props.goodsId,
+      query.value.pageNo,
+      query.value.pageSize,
+      currentTab.value,
+    )
+    // console.log('getCommentPage:', res)
     state.commentList = res.list;
-    state.total = res.total;
+    query.value.total = res.total // 分页论数
+    if (!currentTab.value) state.total = res.total // 总评论数
+  }
+  
+  const handleChangePage = (index) => {
+    query.value.pageNo = index
+    getList()
+  }
+  
+
+  // 切换选项卡
+  function onTabsChange(e) {
+    // 加载列表
+    query.value.pageNo = 1;
+    state.list = [];
+    query.value.total = 0;
+    getList()
   }
 
   onBeforeMount(() => {
-    getComment(props.goodsId);
+    getList()
   });
 </script>
 
@@ -98,4 +140,16 @@
       border: none;
     }
   }
+  .tabClass {
+    color: #666;
+    cursor: pointer;
+    font-size: 18px;
+    font-weight: 400;
+    letter-spacing: 0;
+    margin-right: 32px;
+  }
+  .tabClassAct {
+    color: #1a1a1a;
+    font-weight: bold;
+  }
 </style>