kxmall-ui/kxmall-app-ui/pages/product/appraise.vue

<template>
  <view>
    <view class="eva-section">
      <view class="e-header">
        <text class="tit">评价</text>
        <text>({{page.total}})</text>
      </view>

      <view v-for="(item,index) in page.rows" :key="index" class="eva-box">
        <image class="portrait" :src="item.userAvatar ? item.userAvatar : '/static/user/touxiang-@2x.png'"
          mode="aspectFill"></image>
        <view class="right">
          <text class="name">{{item.userNickName?item.userNickName:('用户' + item.userId)}}</text>
          <text class="con">{{item.content}}</text>
          <view v-if="item.imgList && item.imgList.length > 0" class="imgs">
            <image @click="previewImg(item.imgList, imgIndex)" v-for="(imgItem, imgIndex) in item.imgList"
              :key="imgIndex" class="ig" :src="imgItem "></image>
          </view>
          <view class="bot">
            <text class="attr">购买类型：{{item.productName}}</text>
            <text class="time">{{item.createTime}}</text>
          </view>
        </view>
      </view>
    </view>
    <uni-load-more :status="loadingType"></uni-load-more>
  </view>
</template>

<script>
  // import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
  export default {
    components: {
      // uniLoadMore
    },
    data() {
      return {
        page: {
          row: {}
        },
        productId: undefined,
        pageNo: 1,
        pageSize: 10,
        loadingType: 'more'
      }
    },
    onLoad(option) {
      this.page = JSON.parse(option.firstpage)
      this.productId = this.page.rows[0].productId
      this.pageNo = 2
      this.loadingType = this.pageNo < this.page.total / this.pageSize + (this.page.total % this.pageSize == 0 ? 0 :
        1) ? 'more' : 'nomore'
    },
    onReachBottom(e) {
      const that = this
      if (that.loadingType === 'more') {
        that.loadingType = 'loading'
        that.$api.request('get', '/appraise/app/getSpuAllAppraise', {
          productId: that.productId,
          pageNo: that.page.pageNo + 1,
          pageSize: 10
        }).then(res => {
          that.page.rows = that.page.rows.concat(res.data.rows)
          that.page.pageNo = res.data.pageNo
          that.loadingType = res.data.pageNo < res.data.totalPageNo ? 'more' : 'nomore'
        })
      }

    },
    methods: {
      previewImg(imgs, index) {
        uni.previewImage({
          current: index,
          urls: imgs
        })
      }
    }
  }
</script>

<style lang="scss">
  /* 评价 */
  .eva-section {
    display: flex;
    flex-direction: column;
    padding: 20upx 30upx;
    background: #fff;
    margin-top: 16upx;

    .e-header {
      display: flex;
      align-items: center;
      height: 70upx;
      font-size: $font-sm + 2upx;
      color: $font-color-light;

      .tit {
        font-size: $font-base + 2upx;
        color: $font-color-dark;
        margin-right: 4upx;
      }

      .tip {
        flex: 1;
        text-align: right;
      }

      .icon-you {
        margin-left: 10upx;
      }
    }
  }

  .eva-box {
    display: flex;
    padding: 20upx 0;

    .portrait {
      flex-shrink: 0;
      width: 80upx;
      height: 80upx;
      border-radius: 100px;
    }

    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      font-size: $font-base;
      color: $font-color-base;
      padding-left: 26upx;

      .con {
        font-size: $font-base;
        color: $font-color-dark;
        padding: 20upx 0;
      }

      .imgs {
        padding: 20upx 0;

        .ig {
          width: 190upx;
          height: 190upx;
          padding: 4upx;
        }
      }

      .bot {
        display: flex;
        justify-content: space-between;
        font-size: $font-sm;
        color: $font-color-light;
      }
    }
  }
</style>