new-88live/pages/product/comment.vue

<!-- 商品評論页面 -->
<template>
  <view>
    <view class="edgeInsetTop"></view>
    <view class="wanl-goods-comment">
      <view class="padding-bj bg-white margin-bottom-bj head">
        <view class="padding-bottom-bj solid-bottom">
          {{ $t('mall.comment.goodRate') }}
          <text class="margin-left-xs wanl-orange">{{ statisticsData.rate }}%</text>
        </view>
        <view>
          <view @tap="onTag('')" class="cu-tag round" :class="{ active: tag === '' }">{{ $t('mall.comment.all') }} ({{ statisticsData.total }})</view>
          <view @tap="onTag('good')" class="cu-tag round" :class="{ active: tag === 'good' }">{{ $t('mall.comment.good') }} ({{ statisticsData.good }})</view>
          <view @tap="onTag('pertinent')" class="cu-tag round" :class="{ active: tag === 'pertinent' }">{{ $t('mall.comment.pertinent') }} ({{ statisticsData.pertinent }})</view>
          <view @tap="onTag('poor')" class="cu-tag round" :class="{ active: tag === 'poor' }">{{ $t('mall.comment.poor') }} ({{ statisticsData.poor }})</view>
          <view @tap="onTag('figure')" class="cu-tag round" :class="{ active: tag === 'figure' }">{{ $t('mall.comment.withImage') }} ({{ statisticsData.figure }})</view>
        </view>
      </view>
      <view class="list padding-bj radius-bock" v-for="item in listData" :key="item.id">
        <view class="userinfo">
          <view class="avatar">
            <view class="cu-avatar round margin-right-xs"
              :style="{ backgroundImage: 'url(' + (item.user && item.user.avatar || '') + ')' }"></view>
            <view class="text-sm">
              <view>{{ (item.user && item.user.nickname) || $t('mall.comment.anonymous') }}</view>
              <view class="text-gray">{{ item.createtime || '' }}</view>
            </view>
          </view>
          <view class="rate-stars">
            <text v-for="n in 5" :key="n" class="rate-star"
              :class="n <= item.score ? 'filled' : ''">★</text>
          </view>
        </view>
        <view class="details">
          <view class="margin-bottom-sm">{{ item.content }}</view>
          <view class="text-gray text-sm">{{ $t('mall.comment.spec') }} {{ item.suk }}</view>
        </view>
        <view class="grid flex-sub grid-square"
          :class="[item.images && item.images.length > 3 ? 'col-3' : 'col-' + (item.images ? item.images.length : 0)]"
          v-if="item.images && item.images.length !== 0">
          <view class="bg-img" v-for="(image, index) in item.images" :key="index"
            @tap="previewImage(item.images, index)"
            :style="{ backgroundImage: 'url(' + image + ')' }"></view>
        </view>
      </view>
      <view class="load-more" v-if="listData.length > 0">
        <text v-if="status === 'loading'">{{ $t('common.loading') }}</text>
        <text v-else-if="status === 'noMore'">{{ $t('common.noMore') }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { pullMallProductComment } from '@/features/mall/mall-gateway'

export default {
  data() {
    return {
      listData: [],
      statisticsData: {
        rate: 0,
        good: 0,
        pertinent: 0,
        poor: 0,
        figure: 0,
        total: 0
      },
      reload: false,
      current_page: 1,
      last_page: 1,
      goods_id: 0,
      tag: '',
      status: 'loading'
    }
  },
  onLoad(option) {
    this.goods_id = option.id
    this.tag = option.tag ? option.tag : ''
    this.loadData()
  },
  onPullDownRefresh() {
    this.current_page = 1
    this.reload = true
    this.loadData()
  },
  onReachBottom() {
    if (this.current_page >= this.last_page) {
      this.status = 'noMore'
    } else {
      this.reload = false
      this.current_page += 1
      this.status = 'loading'
      this.loadData()
    }
  },
  methods: {
    async loadData() {
      try {
        const res = await pullMallProductComment({
          id: this.goods_id,
          page: this.current_page,
          tag: this.tag
        })
        uni.stopPullDownRefresh()
        this.listData = this.reload ? res.list : this.listData.concat(res.list)
        this.current_page = res.currentPage
        this.last_page = res.lastPage
        this.statisticsData = res.statistics
        this.status = res.list.length === 0 || this.current_page >= this.last_page ? 'noMore' : 'more'
      } catch (e) {
        uni.stopPullDownRefresh()
        this.status = 'noMore'
      }
    },
    previewImage(images, index) {
      const imgArr = images || []
      uni.previewImage({
        urls: imgArr,
        current: imgArr[index],
        indicator: 'number'
      })
    },
    onTag(tag) {
      this.current_page = 1
      this.reload = true
      this.tag = tag
      this.loadData()
    }
  }
}
</script>

<style scoped>
.edgeInsetTop {
  padding-top: var(--status-bar-height, 44px);
}

.wanl-goods-comment .head .cu-tag {
  height: 60rpx;
  background-color: #ffeee3;
  color: #383736;
  padding: 0 25rpx;
  margin: 25rpx 15rpx 0 0;
}

.wanl-goods-comment .head .cu-tag.active {
  background-color: #fe6600;
  color: white;
}

.wanl-goods-comment .list {
  margin-bottom: 25rpx;
  background-color: white;
  padding-bottom: 0;
}

.wanl-goods-comment .list .userinfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wanl-goods-comment .list .userinfo .avatar {
  display: flex;
  align-items: center;
}

.wanl-goods-comment .list .details {
  margin: 20rpx 0;
}

.rate-stars {
  display: flex;
}

.rate-star {
  font-size: 28rpx;
  color: #ddd;
}

.rate-star.filled {
  color: #ffca00;
}

.load-more {
  text-align: center;
  padding: 30rpx 0;
  color: #999;
  font-size: 24rpx;
}

.bg-img {
  background-size: cover;
  background-position: center;
}

.grid-square .bg-img {
  padding-bottom: 100%;
}
</style>