wanmeiyizhan/pages/rate/index.vue

<template>
  <div class="rate-body">
    <div class="rate-screen">
      <block v-for="(item, i) in rateScreen" :key="item.id">
        <div
          class="screen-tag"
          v-show="item.COUNT > 0"
          :class="{ active: item.isCheck, gray: item.noGood }"
          @click="checkTag(i)"
        >
          {{ item.TAGNAME + " " + item.COUNT }}
        </div>
      </block>
    </div>
    <div class="rate-list" v-show="rateList.length > 0">
      <block v-for="item in rateList" :key="item.COMMENT_ID">
        <rateItem :item="item" />
      </block>
    </div>
    <block v-if="rateList.length === 0">
      <no-data :text="'评论空空如也'" :isShow="rateList.length" />
    </block>
  </div>
</template>

<script>
import rateItem from "../rate/components/rateItem";
import noData from "@/components/noData.vue";
import { mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      rateScreen: [],
      rateList: [],
      rateMsg: {
        goodId: "",
        pageIndex: 1,
        tagType: [],
        keyWord: [],
        TotalCount: 0,
      },
    };
  },
  computed: {
    ...mapGetters({
      user: "user",
    }),
  },
  components: {
    rateItem,
    noData,
  },
  methods: {
    ...mapMutations(["setIsLoading"]),
    starColor(num) {
      num = Math.ceil(num);
      let colors = ["#f5bd50", "#f1b84d", "#f7a750", "#f59b3a", "#f28c44"];
      return colors[num - 1];
    },
    rateText(num) {
      num = Math.ceil(num);
      let text = ["非常差", "差", "一般", "满意", "超满意,无可挑剔"];
      return text[num - 1];
    },
    checkTag(index) {
      let _this = this;
      let u = _this.rateScreen[index];
      _this.rateScreen.map((n) => {
        if (n.ID === u.ID) {
          u.isCheck = true;
        } else {
          n.isCheck = false;
        }
      });
      if (!u.ISKEYWORD) {
        if (this.rateMsg.tagType !== u.ID) {
          this.rateMsg.tagType = u.ID;
        }
      } else {
        if (this.rateMsg.keyWord !== u.TAGNAME) {
          this.rateMsg.keyWord = u.TAGNAME;
        }
      }

      _this.setIsLoading(true);
      this.rateMsg.pageIndex = 1;
      // _this.rateList = []
      this.getRate({ needClearList: true });
    },
    seePhoto(item, list) {
      let u = [];

      list.map((n) => {
        u.push(n.IMAGE_URL);
      });
      mpvue.previewImage({
        current: item, // 当前显示图片的http链接
        urls: u, // 需要预览的图片http链接列表
      });
    },
    getScreen() {
      let _this = this;
      this.$api
        .postCoop({
          action_type: "getMallCommentTag",
          commodityId: this.rateMsg.goodId,
        })
        .then((res) => {
          _this.rateScreen = res.Data.List;
          res.Data.List.map((n) => {
            n.isCheck = false;
            n.noGood = !!(
              n.TAGNAME.indexOf("不") > -1 || n.TAGNAME.indexOf("差") > -1
            );
          });
          _this.checkTag(0);
        });
    },
    getRate(obj) {
      let _this = this;
      // let images = [] // 评论列表加载的用户头像图片 少于5头像则拼接
      this.$api
        .getCoop({
          action_type: "getMallCommentList",
          commodityId: this.rateMsg.goodId,
          tagType: this.rateMsg.tagType.toString(),
          keyWord: this.rateMsg.keyWord.toString(),
          pageSize: 10,
          pageIndex: this.rateMsg.pageIndex,
        })
        .then((res) => {
          if (obj && obj.needClearList) {
            _this.rateList = res.Data.List;
          } else {
            _this.rateList = _this.rateList.concat(res.Data.List);
          }
          // if (_this.rateMsg.usersImages.length < 5) { // 评论列表加载的用户头像图片 少于10条则拼接
          //   _this.rateList.map(n => {
          //     if (n.HEADIMAGEURL !== '' && images.indexOf(n.HEADIMAGEURL) === -1) {
          //       images.push(n.HEADIMAGEURL || 'https://eshangtech.com/ShopICO/noName.png')
          //     }
          //   })
          //   _this.rateMsg.usersImages = images
          // }
          _this.rateMsg.TotalCount = res.Data.TotalCount;
          // res.Data.List.map(n => {
          //   n.rateText = _this.rateText(n.COMMENT_SCORE)
          //   n.starColor = _this.starColor(n.COMMENT_SCORE)
          // })
          _this.setIsLoading(false);
        });
    },

    loadMore() {
      if (this.rateMsg.TotalCount > this.rateList.length) {
        this.rateMsg.pageIndex += 1;
        this.setIsLoading(true);
        this.getRate();
      }
    },
  },
  onLoad(option) {
    this.setIsLoading(true);
    this.rateScreen = [];
    this.rateList = [];
    this.rateMsg.goodId = option.id;
    this.getScreen();
    this.$utils.addUserBehaviorNew();
  },
};
</script>
<style lang="stylus" scoped>
.rate-body {
  padding-bottom: 90rpx;
  background: #fff;
  height: 100%;

  .rate-screen {
    display: flex;
    padding: 24rpx 24rpx;
    flex-wrap: wrap;
    align-items: center;

    .screen-tag {
      text-align: center;
      width: 156rpx;
      height: 64rpx;
      line-height: 64rpx;
      border-radius: 6rpx;
      margin: 12rpx 9rpx;
      font-size: 24rpx;
      color: #BA9B6F;
      background: #F8E8D8;

      &.gray {
        background-color: #F5F5F5;
        color: #A5A5A5;
      }

      &.active {
        background-color: #BA9B6F;
        color: #fff;
      }
    }
  }

  .rate-list {
    padding-left: 32rpx;
    padding-bottom: 80rpx;
  }

  .rate-card {
    border-top: 1rpx solid #eee;
    padding: 24rpx 24rpx 24rpx 0;
    font-size: 28rpx;

    .rate-card-top {
      display: flex;
      align-items: top;
    }

    .rate-user-photo {
      height: 80rpx;
      width: 80rpx;
      border-radius: 40rpx;
    }

    .top-card-center {
      flex: 6;
      padding-left: 16rpx;
    }

    .rate-text {
      color: #666666;
      font-size: 26rpx;
      display: flex;
      align-items: center;
    }

    .vip-level {
      font-size: 20rpx;
      background: #333;
      color: #EEDCB6;
      padding: 4rpx 6rpx;
      margin-left: 16rpx;
      border-radius: 4rpx;
      display: flex;
      align-items: ceneter;
      position: relative;

      // padding-left 24rpx
      .vip-level:before {
        content: '';
        width: 20rpx;
        height: 20rpx;
        background: url('https://eshangtech.com/ShopICO/vip-ico.png') no-repeat center; // eshangtech.com/ShopICO/vip-ico.png) no-repeat center
        background-size: contain;
        position: absolute;
        left: 4rpx;
      }
    }

    .rate-date {
      flex: 4;
      color: #989898;
      font-size: 22rpx;
      text-align: right;
    }

    .rate-content {
      padding-left: 96rpx;
      font-size: 26rpx;
      // padding-top 16rpx
    }

    .rate-tag {
      border-radius: 4rpx;
      border: 1rpx solid #CF855E;
      color: #CF855E;
      padding: 4rpx 6rpx;
      display: inline-block;
      font-size: 20rpx;
      margin: 0 16rpx 8rpx 0;
    }

    .rate-photo {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      image {
        height: 120rpx;
        width: 120rpx;
        border-radius: 4rpx;
        margin: 24rpx 12rpx;
      }
    }
  }
}
</style>