CommunityApp/pagesM/pages/goods_comment_list.vue

<template>
  <view class="pageBg">
    <!-- <view class="tab-h">
      <view class="tab-item" :class="currentTab == 0 ? 'active' : ''" @tap="currentTab=0">全部</view>
      <view class="tab-item" :class="currentTab == 1 ? 'active' : ''" @tap="currentTab=1">有图</view>
      <view></view>
    </view> -->
    <!-- <swiper :current="currentTab" duration="300" @change="switchTab" :style="{height:swiper_height}">
      <swiper-item> -->
        <!-- <view id="start0"></view> -->
        <block v-if="reviewDatas.length>0">
          <!-- <view class="tab_height"></view> -->
          <DtGoodsComment :dataList="reviewDatas" @tapImage="roopImageClick" />
          <DtNoMore v-if="isNoMore" />
        </block>
        <view v-else class="no_data_wrap">
          <DtNoData msg="暂无数据" image="http://139.9.103.171:1888/img/image/noData.png" />
        </view>
        <!-- <view id="end0"></view> -->
      <!-- </swiper-item> -->
      <!-- <swiper-item>
        <view id="start1"></view>
        <block v-if="hasPicRewiewDatas.length>0">
          <view class="tab_height"></view>
          <DtGoodsComment :dataList="hasPicRewiewDatas" @tapImage="roopImageClick" />
          <DtNoMore v-if="noMore" />
        </block>
        <view class="no_data_wrap" v-else>
          <DtNoData msg="暂无数据" image="http://139.9.103.171:1888/img/image/noData.png" />
        </view>
        <view id="end1"></view>
      </swiper-item>
    </swiper> -->
  </view>
</template>
<script>
import DtGoodsComment from '../comps/dt_goods_comment'
import DtNoData from '../comps/dt_no_data.vue'
import DtNoMore from '../comps/dt_no_more.vue'
export default {
  components: {
    DtGoodsComment,
    DtNoData,
    DtNoMore
  },
  data() {
    return {
      currentTab: 0,
      swiper_height: 0,
      productId: 0,
      reviewDatas: [],
      hasPicRewiewDatas: [],
      pageNo: 1,
      noMore: false,
      srcs: [],
    };
  },
  methods: {

    //获取评论
    async getReviewList() {
      let data = {}
      data.pageNo = this.pageNo;
      data.pageSize = 10;
      data.productId = this.productId;
      data.type = '';
      let res = await this.$api.getReviewList(data);
      let hasPicRewiewDatas = [];
      if (res.datas.length > 0) {
        for (let i in res.datas) {
          res.datas[i].imageUrls = JSON.parse(res.datas[i].imageUrls)
          if (res.datas[i].imageUrls.length > 0) {
            hasPicRewiewDatas.push(res.datas[i]);
          }
          this.srcs = this.srcs.concat(res.datas[i].imageUrls)
        }
        this.reviewDatas = this.reviewDatas.concat(res.datas);
        this.hasPicRewiewDatas = this.hasPicRewiewDatas.concat(hasPicRewiewDatas);
      } else {
        if (this.reviewDatas.length > 0) {
          this.isNoMore = true;
        } else {
          this.isNoMore = false
        }
      }
      this.isFrefresh = false
      this.pageNo++;
    },

    roopImageClick(img) {
      console.log(img);
      uni.previewImage({
        current: img, // 当前显示图片的http链接
        urls: this.srcs // 需要预览的图片http链接列表
      });
    },

    onLoadPage(options) {
	  wx.hideShareMenu();
      console.log(this);
      console.log(options);
      this.productId = options.productId;
      this.getReviewList();
    },

  },
  onReachBottom() {
    this.onReachBottomPage()
  }
};
</script>

<style lang="scss" scoped>
.goods-fix {
  height: 60upx;
}

.tab-h {
  height: 90upx;
  line-height: 90upx;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #fff;
  justify-content: center;
  border-bottom: 1upx solid #e5e5e5;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  .tab-item {
    width: 200upx;
    text-align: center;
    padding: 0 40upx;
    font-size: 30upx;
    color: #333333;
    letter-spacing: 1upx;
  }
  .active {
    color: $dt-color-primary;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      width: 120upx;
      height: 2upx;
      background: $dt-color-primary;
      top: 89upx;
      left: 80upx;
    }
  }
}

.tab_height {
  height: 90rpx;
}

.no_data_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
</style>