uni-wechat-shop/pages/comment/index.vue

<template>
  <view class="container" :style="appThemeStyle">
    <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption" @up="upCallback">
      <!-- tab栏 -->
      <u-tabs :list="tabs" :is-scroll="false" v-model="curTab" :active-color="appTheme.mainBg" :duration="0.2" @change="onChangeTab" />
      <!-- 商品评价列表 -->
      <view class="comment-list">
        <view class="comment-item" v-for="(item, index) in list.data" :key="index">
          <view class="item-head">
            <!-- 用户信息 -->
            <view class="user-info">
              <view class="user-avatar">
                <avatar-image :url="item.avatar" :width="50" />
              </view>
              <text class="user-name f-26">{{ item.buyerName }}</text>
            </view>
            <!-- 评星 -->
            <!-- <u-rate active-color="#f4a213" :current="rates[item.score]" :disabled="true" /> -->
            <!-- 评价日期-->
            <view class="flex-box f-22 col-9 t-r">{{ new Date(item.createTime).toLocaleString() }}</view>
          </view>
          <!-- 评价内容 -->
          <view class="item-content m-top20">
            <text class="f-26">{{ item.productComment }}</text>
          </view>
          <!-- 评价图片 -->
         <!--  <view class="images-list clearfix" v-if="item.images.length">
            <view class="image-preview" v-for="(image, imgIdx) in item.images" :key="imgIdx">
              <image class="image" mode="aspectFill" :src="image.image_url" @click="onPreviewImages(index, imgIdx)">
              </image>
            </view>
          </view> -->
          <!-- 商品规格 -->
          <view class="goods-props clearfix">
            <view class="goods-props-item" v-for="(props, idx) in item.skuInfo" :key="idx">
              <text class="group-name">{{ props.propertyName }}: </text>
              <text>{{ props.propertyValue }}；</text>
            </view>
          </view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
  import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
  import AvatarImage from '@/components/avatar-image'
  import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
  import * as CommentApi from '@/api/comment'
  import { apiGetCommentList } from '@/api/goods'

  const pageSize = 15
  const tabs = [{ name: `全部`, level: '' }, { name: `好评`, level: 'good' }, { name: `中评`, level: 'common' }, { name: `差评`, level: 'notgood' }]

  export default {
    components: {
      AvatarImage
    },
    mixins: [MescrollMixin],
    data() {
      return {
        goodsId: null,
        curTab: 0,
        list: getEmptyPaginateObj(),
        total: { all: 0, negative: 0, praise: 0, review: 0 },
        rates: { 10: 5, 20: 3, 30: 1 },
        tabs,
        // 上拉加载配置
        upOption: {
          // 首次自动执行
          auto: true,
          page: { size: pageSize },
          // 数量要大于4条才显示无更多数据
          noMoreSize: 4,
          empty: {
            tip: '亲，暂无相关商品评价'
          }
        },
      }
    },
    onLoad(options) {
      this.goodsId = options.goodsId
      // 获取指定评分总数
    //   this.getTotal()
    },

    methods: {
      /**
       * 上拉加载的回调 (页面初始化时也会执行一次)
       */
      upCallback(page) {
        const app = this
        apiGetCommentList({ productId: app.goodsId, level: app.tabs[app.curTab].level, page: page.num }).then(res => {
            const data = res.data.map(item => ({
                ...item,
                skuInfo: JSON.parse(item.skuInfo)
            }))
            app.list.data = getMoreListData({ data }, app.list, page.num)
            app.mescroll.endBySize(data.length, data.length)
        }).catch(() => app.mescroll.endErr())
        // CommentApi.list({})
      },
      // 获取指定评分总数
      getTotal() {
        const app = this
        CommentApi.total(app.goodsId)
          .then(result => {
            const total = result.data.total
            const tabs = app.tabs
            tabs[0].name = `全部(${total.all})`
            tabs[1].name = `好评(${total.praise})`
            tabs[2].name = `中评(${total.review})`
            tabs[3].name = `差评(${total.negative})`
          })
      },
      // 切换标签项
      onChangeTab(index) {
        const app = this
        app.curTab = index
        app.list = getEmptyPaginateObj()
        setTimeout(() => {
            app.mescroll.resetUpScroll()
        }, 120)
      },
      // 预览评价图片
      onPreviewImages(dataIdx, imgIndex) {
        const app = this
        const images = app.list.data[dataIdx].images
        const imageUrls = images.map(item => item.image_url)
        uni.previewImage({
          current: imageUrls[imgIndex],
          urls: imageUrls
        })
      }

    }
  }
</script>

<style lang="scss" scoped>
  .comment-item {
    padding: 30rpx;
    box-sizing: border-box;
    border-bottom: 1rpx solid #f7f7f7;
    background: #fff;
  }

  .item-head {
    display: flex;
    align-items: center;

    // 用户信息
    .user-info {
      margin-right: 15rpx;
      display: flex;
      align-items: center;

      .user-avatar {
        margin-right: 15rpx;
      }

      .user-name {
        color: #999;
      }
    }

  }

  // 评价内容
  .item-content {
    font-size: 30rpx;
    color: #333;
    margin: 16rpx 0;
  }

  // 评价图片
  .images-list {
    &::after {
      clear: both;
      content: " ";
      display: table;
    }

    .image-preview {
      float: left;
      margin-bottom: 15rpx;
      margin-right: 15rpx;

      &:nth-child(3n+0) {
        margin-right: 0;
      }

      .image {
        display: block;
        width: 220rpx;
        height: 220rpx;
      }
    }
  }

  // 商品规格
  .goods-props {
    font-size: 24rpx;
    color: #999;

    .goods-props-item {
      float: left;

      .group-name {
        margin-right: 6rpx;
      }
    }
  }
</style>