xdd-uniapp-new/pagesShop/shop/EvaluateList/index.vue

<template>
  <view class="evaluate-list" ref="container">
    <view class="header">
      <view class="generalComment acea-row row-between-wrapper">
        <view class="acea-row row-middle font-color-red">
          <text class="evaluate">评分</text>
          <view class="start" :class="'star' + replyData.replyStar"></view>
        </view>
        <view>
        <text class="font-color-red">{{ isTravelGroup ? replyData.replyChance || 0 : replyData.replyChance + '%' || 0 }}</text>
		    <text> {{ ` 好评率` }}</text>
        </view>
      </view>
      <view class="nav acea-row row-middle">
        <view
          class="acea-row row-center-wrapper"
          v-for="(item, navListIndex) in navList"
          :key="navListIndex"
          @click="changeType(navListIndex)"
        >
          <view
            class="item"
            :class="currentActive === navListIndex ? 'bg-color-red' : ''"
            v-if="item.num"
          >
		  <text>{{ item.evaluate }}({{ item.num }})</text>
          </view>
        </view>
      </view>
    </view>
    <UserEvaluation :reply="reply"></UserEvaluation>
    <Loading :loaded="loadend" :loading="loading"></Loading>
  </view>
</template>
<script>
import UserEvaluation from "@/components/UserEvaluation";
import { getReplyConfig, getReplyList } from "@/api/store";
import { getJiaLouProductReply, getJiaLouProductReplyCount } from "@/api/qianxian";
import Loading from "@/components/Loading";

export default {
  name: "EvaluateList",
  components: {
    UserEvaluation,
    Loading
  },
  props: {},
  data: function() {
    return {
      product_id: 0,
      isTravelGroup: false,
      replyData: {},
      navList: [
        { evaluate: "全部", num: 0 },
        { evaluate: "好评", num: 0 },
        { evaluate: "中评", num: 0 },
        { evaluate: "差评", num: 0 }
      ],
      currentActive: 0,
      page: 1,
      limit: 8,
      reply: [],
      loadTitle: "",
      loading: false,
      loadend: false
    };
  },
  mounted: function() {
    this.product_id = this.$yroute.query.id;
    this.isTravelGroup = String(this.$yroute.query.isTravelGroup || '') === '1';
    this.getProductReplyCount();
    this.getProductReplyList();
  },
  onReachBottom() {
    !this.loading && this.getProductReplyList();
  },
  methods: {
    getProductReplyCount: function() {
      let that = this;
      if (that.isTravelGroup) {
        getJiaLouProductReplyCount({
          travelGroupProductId: that.product_id
        }).then(res => {
          const data = res.data || {};
          that.$set(that, "replyData", data);
          that.navList[0].num = data.sumCount || 0;
          that.navList[1].num = data.goodCount || 0;
          that.navList[2].num = data.inCount || 0;
          that.navList[3].num = data.poorCount || 0;
        });
      } else {
        getReplyConfig(that.product_id).then(res => {
          const data = res.data || {};
          that.$set(that, "replyData", data);
          that.navList[0].num = data.sumCount || 0;
          that.navList[1].num = data.goodCount || 0;
          that.navList[2].num = data.inCount || 0;
          that.navList[3].num = data.poorCount || 0;
        });
      }
    },
    getProductReplyList: function() {
      let that = this;
      if (that.loading) return;
      if (that.loadend) return;
      that.loading = true;
      let q = { page: that.page, limit: that.limit, type: that.currentActive };
      if (that.isTravelGroup) {
        getJiaLouProductReply({
          travelGroupProductId: that.product_id,
          type: q.type,
          page: q.page,
          limit: q.limit
        }).then(res => {
          that.loading = false;
          const pageData = res.data || {};
          const rawList = Array.isArray(pageData.records) ? pageData.records : [];
          const list = rawList.map(item => {
            const productScore = Number(item.productScore) || 0;
            const serviceScore = Number(item.serviceScore) || 0;
            let star = productScore || serviceScore || 5;
            const skuText = '默认';
            const picturesArr = Array.isArray(item.pics) ? item.pics : [];
            return {
              ...item,
              star,
              sku: item.travelGroupProductName || skuText,
              picturesArr
            };
          });
          that.reply.push.apply(that.reply, list);
          that.loadend = list.length < that.limit || !pageData.pages || that.page >= pageData.pages;
          that.page = that.page + 1;
        }).catch(() => {
          that.loading = false;
        });
      } else {
        getReplyList(that.product_id, q).then(res => {
          that.loading = false;
          const data = res.data || [];
          that.reply.push.apply(that.reply, data);
          that.loadend = data.length < that.limit;
          that.page = that.page + 1;
        }).catch(() => {
          that.loading = false;
        });
      }
    },
    changeType: function(index) {
      let that = this;
      that.currentActive = index;
      that.page = 1;
      that.loadend = false;
      that.$set(that, "reply", []);
      that.getProductReplyList();
    }
  }
};
</script>
<style scoped lang="less">
.noCommodity {
  height: 8*100rpx;
  background-color: #fff;
}
</style>