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

<!-- 商品评论的卡片 -->
<template>
  <div class="detail-comment-card ">
    <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>
        </div>
      </div>
    </div>
    <div v-if="state.total === 0" style="margin: 30px auto; color: #777;">期待您的第一个评价</div>
    <!-- 评论列表 -->
    <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" style="min-height: 300px;">
        <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>
        <template v-else>
          <div style="margin: 30px auto; color: #777;">暂无数据</div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { reactive, onBeforeMount, ref } from 'vue';
  import { getCommentPage } from '@/api/mall/product'
  import commentItem from './comment-item.vue';

  const props = defineProps({
    goodsId: {
      type: [Number, String],
      default: 0,
    },
  });

  const state = reactive({
    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 getList(id) {
    id = id || props.goodsId
    state.commentList = []
    const res = await getCommentPage(
      props.goodsId,
      query.value.pageNo,
      query.value.pageSize,
      currentTab.value,
    )
    // console.log('getCommentPage:', res)
    state.commentList = res.list;
    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;
    query.value.total = 0;
    getList()
  }

  onBeforeMount(() => {
    getList()
  });
</script>

<style lang="scss" scoped>
  .detail-comment-card {
    margin: 0 20rpx 20rpx 20rpx;
    padding: 20rpx 20rpx 0 20rpx;
    .card-header {
      .line {
        width: 6rpx;
        height: 30rpx;
        background: linear-gradient(180deg, var(--v-primary-base) 0%, var(--v-primary-lighten1) 100%);
        border-radius: 3rpx;
      }

      .title {
        font-size: 30rpx;
        font-weight: bold;
        line-height: normal;
      }

      .des {
        font-size: 24rpx;
        color: #999999;
      }

      .more-btn {
        font-size: 24rpx;
        color: var(--v-primary-base);
        line-height: normal;
      }

      .cicon-forward {
        font-size: 24rpx;
        line-height: normal;
        color: var(--v-primary-base);
        margin-top: 4rpx;
      }
    }
  }
  .comment-box {
    border-bottom: 2rpx solid #eeeeee;
    &:last-child {
      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>