uniapp-im-shop/pages/mall/comment.vue

<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' },
    { name: '好评(54)', id: '2' },
    { name: '差评(43)', id: '3' },
    { name: '有图(23)', id: '4' }
  ])

  const formData = reactive({
    type: '1'
  })
  const productId = ref('')
  const listData = ref([])
  const paging = ref(null)
  const total = ref(0)

  const onTop = id => {
    formData.type = id
  }

  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(1, 15)
  })
</script>

<template>
  <z-paging
    ref="paging"
    v-model="listData"
    :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"
  >
    <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 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"
        ></image>
        <!-- 右边 -->
        <view class="right-box">
          <view class="name_box">
            <text class="name">
              {{ item.isAnonymous ? '匿名用户' : item.userName }}
            </text>
            <uni-rate readonly :size="24" :value="item.rating" />
          </view>
          <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>
              <text v-if="item.likeCount">{{ item.likeCount }}</text>
            </view>
            <uni-icons
              type="chat"
              size="16"
              color="#74747480"
            ></uni-icons>
          </view> -->
          </view>
          <text class="content">
            {{ item.content }}
          </text>
          <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>
          </view>
          <text class="expand">共三条回复></text>
        </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>
  // @import './styles/public.scss';
  @import '@/styles/top-selector.scss';
  .comment-box {
    padding: 32rpx 24rpx 180rpx 24rpx;
    .card-box {
      margin-top: 36rpx;
      display: flex;
      .avatar {
        width: 64rpx;
        height: 64rpx;
        border-radius: 64rpx;
        flex-shrink: 0;
        margin-right: 16rpx;
      }
      .right-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;

        text-align: left;
        font-style: normal;
        text-transform: none;
        .name_box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .name {
            font-size: 28rpx;
            color: #333333;
          }
        }

        .rate-box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 10rpx 0 20rpx;
          .date {
            font-weight: 400;
            font-size: 24rpx;
            color: #74747480;
            text {
              &:first-child {
                margin-right: 20rpx;
              }
            }
          }
          .star {
            display: flex;
            align-items: center;
            .like {
              display: flex;
              align-items: center;
              font-weight: 400;
              font-size: 22rpx;
              color: #74747480;
              margin-right: 86rpx;
            }
          }
        }
        .content {
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
        }
        .img-box {
          margin-top: 16rpx;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          grid-gap: 16rpx;
          .bottom-img {
            width: 128rpx;
            height: 128rpx;
          }
        }
        .bottom-content {
          margin-top: 32rpx;
          background: #f9f9f9;
          border-radius: 8rpx;
          padding: 0 16rpx 16rpx;
          font-family: PingFang SC, PingFang SC;
          font-style: normal;
          text-transform: none;
          .name-box {
            margin-top: 16rpx;
            text {
              font-weight: 400;
              font-size: 28rpx;
              color: #333333;
              &:last-child {
                font-weight: 500;
                font-size: 28rpx;
                color: #999999;
              }
            }
          }
          .expand {
            display: block;
            margin-top: 14rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #00d993;
          }
        }
      }
    }
  }
</style>